example update

apps/_example_app/README.md

@@ -1,5 +1,10 @@
 # App Name
 
+More information on making apps:
+
+* http://www.espruino.com/Bangle.js+First+App
+* http://www.espruino.com/Bangle.js+App+Loader
+
 Describe the app...
 
 Add screen shots (if possible) to the app folder and link then into this file with ![](<name>.png)

apps/_example_clkinfo/ChangeLog

@@ -0,0 +1 @@
+0.01: New Widget!

apps/_example_clkinfo/README.md

@@ -0,0 +1,27 @@
+# Clock Info Name
+
+More info on making Clock Infos and what they are: http://www.espruino.com/Bangle.js+Clock+Info
+
+Describe the clock info...
+
+Add screen shots (if possible) to the app folder and link then  into this file with ![](<name>.png)
+
+## Usage
+
+Describe how to use it
+
+## Features
+
+Name the function
+
+## Controls
+
+Name the buttons and what they are used for
+
+## Requests
+
+Name who should be contacted for support/update requests
+
+## Creator
+
+Your name

apps/_example_clkinfo/clkinfo.js

@@ -0,0 +1,16 @@
+(function() {
+  return {
+    name: "Bangle",
+    // img: 24x24px image for this list of items. The default "Bangle" list has its own image so this is not needed
+    items: [
+      { name : "Item1",
+        get : function() { return { text : "TextOfItem1",
+                       // v : 10, min : 0, max : 100, - optional
+                      img : atob("GBiBAAAAAAAAAAAYAAD/AAOBwAYAYAwAMAgAEBgAGBAACBCBCDHDjDCBDBAACBAACBhCGAh+EAwYMAYAYAOBwAD/AAAYAAAAAAAAAA==") }},
+        show : function() {},
+        hide : function() {},
+        // run : function() {} optional (called when tapped)
+      }
+    ]
+  };
+}) // must not have a semi-colon!

apps/_example_clkinfo/metadata.json

@@ -0,0 +1,14 @@
+{ "id": "7chname",
+  "name": "My clock info's human readable name",
+  "shortName":"Short Name",
+  "version":"0.01",
+  "description": "A detailed description of my clock info",
+  "icon": "icon.png",
+  "type": "clkinfo",
+  "tags": "clkinfo",
+  "supports" : ["BANGLEJS2"],
+  "readme": "README.md",
+  "storage": [
+    {"name":"7chname.clkinfo.js","url":"clkinfo.js"}
+  ]
+}

apps/_example_widget/README.md

@@ -1,5 +1,7 @@
 # Widget Name
 
+More info on making Widgets and what they are: http://www.espruino.com/Bangle.js+Widgets
+
 Describe the app...
 
 Add screen shots (if possible) to the app folder and link then  into this file with ![](<name>.png)

apps/_example_widget/metadata.json

@@ -3,7 +3,7 @@
   "shortName":"Short Name",
   "version":"0.01",
   "description": "A detailed description of my great widget",
-  "icon": "widget.png",  
+  "icon": "icon.png",
   "type": "widget",
   "tags": "widget",
   "supports" : ["BANGLEJS2"],

apps/_example_widget/widget.js

@@ -1,16 +1,14 @@
-/* run widgets in their own function scope so they don't interfere with
-currently-running apps */
+/* run widgets in their own function scope if they need to define local
+variables so they don't interfere with currently-running apps */
 (() => {
-  function draw() {
-    g.reset(); // reset the graphics context to defaults (color/font/etc)
-    // add your code
-    g.drawString("X", this.x, this.y);
-  }
-
   // add your widget
   WIDGETS["mywidget"]={
     area:"tl", // tl (top left), tr (top right), bl (bottom left), br (bottom right), be aware that not all apps support widgets at the bottom of the screen
     width: 28, // how wide is the widget? You can change this and call Bangle.drawWidgets() to re-layout
-    draw:draw // called to draw the widget
+    draw:function() {
+      g.reset(); // reset the graphics context to defaults (color/font/etc)
+      // add your code
+      g.drawString("X", this.x, this.y);
+    } // called to draw the widget
   };
 })()