Step counter widget (#2)

* Create README.md

* Add files via upload

* Update metadata.json

apps/widstep/ChangeLog

@@ -0,0 +1 @@
+0.01: New widget

apps/widstep/README.md

@@ -0,0 +1,4 @@
+# Step counter widget
+This is my step counter widget. There are many like it, but this one is mine.
+Designed to be as narrow as possible, but still easy to read, by sacrificing accuracy and only showing to the nearest 100 steps (0.1k).
+Shows a subtle fill colour in the background for progress to the goal. The goal is picked up from the health tracker settings.

apps/widstep/metadata.json

@@ -0,0 +1,15 @@
+{
+    "id": "widstep",
+    "name": "Step counter widget",
+    "version": "0.01",
+    "description": "Step counter widget, narrow but clearly readable",
+    "icon": "icons8-winter-boots-48.png",
+    "type": "widget",
+    "tags": "widget,health",
+    "supports": ["BANGLEJS","BANGLEJS2"],
+    "dependencies" : {"health":"app"},
+    "allow_emulator":true,
+    "storage": [
+      {"name":"widstep.wid.js","url":"widstep.wid.js"}
+    ]
+  }

apps/widstep/widstep.wid.js

@@ -0,0 +1,36 @@
+let settings;
+
+function loadSettings() {
+  settings = require('Storage').readJSON("health.json", 1) || {};
+  if( settings.stepGoal === undefined ) {
+    settings.stepGoal = 10000;
+  }
+}
+
+Bangle.on('step', function(s) { WIDGETS["widstep"].draw(); });
+Bangle.on('lcdPower', function(on) {
+  if (on) WIDGETS["widstep"].draw();
+});
+WIDGETS["widstep"]={area:"tl", sortorder:-1, width:28,
+  draw:function() {
+    if (!Bangle.isLCDOn()) return; // dont redraw if LCD is off
+    //var steps = Bangle.getHealthStatus("day").steps;
+    var steps = 5285;
+    g.reset();
+    g.setColor(g.theme.bg);
+    g.fillRect(this.x, this.y, this.x + this.width, this.y + 23);
+    g.setColor(g.theme.dark ? '#00f' : '#0ff');
+    var progress = this.width * Math.min(steps/settings.stepGoal, 1);
+    g.fillRect(this.x+1, this.y+1, this.x + progress -1, this.y + 23);
+    g.setColor(g.theme.fg);
+    g.setFontAlign(0, -1);
+    var steps_k = (steps/1000).toFixed(1) + 'k';
+    g.setFont('6x15').drawString(steps_k, this.x+this.width/2, this.y + 10);
+    g.setFont('4x6').drawString('steps', this.x+this.width/2, this.y + 2);
+    //g.drawRect(this.x, this.y, this.x + this.width, this.y + 23);
+  }, reload:function() {
+    loadSettings();
+    WIDGETS["widstep"].draw();
+  }
+};
+loadSettings();