Added screenshot display in app list (automatic screenshots should follow soonish)

README.md

@@ -220,6 +220,7 @@ and which gives information about the app for the Launcher.
   "version": "0v01",          // the version of this app
   "description": "...",       // long description (can contain markdown)
   "icon": "icon.png",         // icon in apps/
+  "screenshots" : [ { url:"screenshot.png" } ], // optional screenshot for app
   "type":"...",               // optional(if app) -  
                               //   'app' - an application
                               //   'widget' - a widget

apps.json

@@ -10,9 +10,7 @@
     "supports": ["BANGLEJS","BANGLEJS2"],
     "custom": "custom.html",
     "customConnect": true,
-    "storage": [
+    "storage": [],
-
-    ],
     "sortorder": -20
   },
   {
@@ -65,7 +63,6 @@
     ],
     "sortorder": -8
   },
-
   {
     "id": "moonphase",
     "name": "Moonphase",
@@ -456,10 +453,11 @@
     "version": "0.15",
     "description": "An Analog Clock",
     "icon": "clock-analog.png",
+    "screenshots": [{"url":"screenshot_analog.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"aclock.app.js","url":"clock-analog.js"},
@@ -472,10 +470,11 @@
     "version": "0.05",
     "description": "This is a simple clock using minimalist 2x3 pixel numerical digits",
     "icon": "clock2x3.png",
+    "screenshots": [{"url":"screenshot_pixel.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"clock2x3.app.js","url":"clock2x3-app.js"},
@@ -504,9 +503,10 @@
     "version": "0.04",
     "description": "T-Rex game in the style of Chrome's offline game",
     "icon": "trex.png",
+    "screenshots": [{"url":"screenshot_trex.png"}],
     "tags": "game",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"trex.app.js","url":"trex.js"},
@@ -691,6 +691,7 @@
     "version": "0.10",
     "description": "Show Gadgetbridge weather report",
     "icon": "icon.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "tags": "widget,outdoors",
     "supports": ["BANGLEJS"],
     "readme": "readme.md",
@@ -797,6 +798,7 @@
     "version": "0.02",
     "description": "Show a warning when the battery runs low.",
     "icon": "widget.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "type": "widget",
     "tags": "tool,battery",
     "supports": ["BANGLEJS"],
@@ -876,14 +878,15 @@
       {"name":"widhrm.wid.js","url":"widget.js"}
     ]
   },
-  { "id": "bthrm",
+  {
+    "id": "bthrm",
     "name": "Bluetooth Heart Rate Monitor",
     "shortName": "BT HRM",
     "version": "0.01",
     "description": "Overrides Bangle.js's build in heart rate monitor with an external Bluetooth one.",
     "icon": "app.png",
-    "tags": "health,bluetooth",
     "type": "boot",
+    "tags": "health,bluetooth",
     "supports": ["BANGLEJS","BANGLEJS2"],
     "readme": "README.md",
     "storage": [
@@ -1094,10 +1097,11 @@
     "version": "0.03",
     "description": "A simple 7 segment Clock with date",
     "icon": "icon.png",
+    "screenshots": [{"url":"screenshot_s7segment.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"s7clk.app.js","url":"app.js"},
@@ -1315,9 +1319,10 @@
     "version": "0.05",
     "description": "A Flappy Bird game clone",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot1_flappy.png"},{"url":"screenshot2_flappy.png"}],
     "tags": "game",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"flappy.app.js","url":"app.js"},
@@ -1348,9 +1353,7 @@
     "tags": "tool,outdoors,agps",
     "supports": ["BANGLEJS"],
     "custom": "custom.html",
-    "storage": [
+    "storage": []
-
-    ]
   },
   {
     "id": "pomodo",
@@ -1389,10 +1392,11 @@
     "version": "0.05",
     "description": "Simple, readable and practical clock",
     "icon": "bold_clock.png",
+    "screenshots": [{"url":"screenshot_bold.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"boldclk.app.js","url":"bold_clock.js"},
@@ -1626,6 +1630,7 @@
     "version": "0.08",
     "description": "A simple digital clock showing seconds as a bar",
     "icon": "clock-bar.png",
+    "screenshots": [{"url":"screenshot.png"},{"url":"screenshot_pm.png"}],
     "type": "clock",
     "tags": "clock",
     "supports": ["BANGLEJS"],
@@ -3229,45 +3234,43 @@
     ],
     "data": [{"name":"speedalt.json"}]
   },
-  { "id": "speedalt2",
+  {
+    "id": "speedalt2",
     "name": "GPS Adventure Sports II",
     "shortName": "GPS Adv Sport II",
-    "icon": "app.png",
     "version": "0.07",
     "description": "GPS speed, altitude and distance to waypoint display. Designed for easy viewing and use during outdoor activities such as para-gliding, hang-gliding, sailing, cycling etc.",
+    "icon": "app.png",
+    "type": "app",
     "tags": "tool,outdoors",
     "supports": ["BANGLEJS"],
-    "type":"app",
-    "allow_emulator":true,
     "readme": "README.md",
+    "allow_emulator": true,
     "storage": [
       {"name":"speedalt2.app.js","url":"app.js"},
       {"name":"speedalt2.img","url":"app-icon.js","evaluate":true},
       {"name":"speedalt2.settings.js","url":"settings.js"}
     ],
-   "data": [
+    "data": [{"name":"speedalt2.json"}]
-      {"name":"speedalt2.json"}
-    ]
   },
-  { "id": "slomoclock",
+  {
+    "id": "slomoclock",
     "name": "SloMo Clock",
     "shortName": "SloMo Clock",
-    "icon": "watch.png",
     "version": "0.10",
     "description": "Simple 24h clock face with large digits, hour above minute. Uses Layout library.",
+    "icon": "watch.png",
+    "type": "clock",
     "tags": "clock",
     "supports": ["BANGLEJS"],
-    "type":"clock",
-    "allow_emulator":true,
     "readme": "README.md",
+    "allow_emulator": true,
     "storage": [
       {"name":"slomoclock.app.js","url":"app.js"},
       {"name":"slomoclock.img","url":"app-icon.js","evaluate":true},
       {"name":"slomoclock.settings.js","url":"settings.js"}
     ],
-   "data": [
+    "data": [{"name":"slomoclock.json"}]
-      {"name":"slomoclock.json"}
-    ]
   },
   {
     "id": "de-stress",
@@ -3579,6 +3582,7 @@
     "version": "0.05",
     "description": "Control the music on your Gadgetbridge-connected phone",
     "icon": "icon.png",
+    "screenshots": [{"url":"screenshot.png"},{"url":"screenshot_2.png"}],
     "type": "app",
     "tags": "tools,bluetooth,gadgetbridge,music",
     "supports": ["BANGLEJS"],
@@ -3652,6 +3656,7 @@
     "version": "0.02",
     "description": "Automatically turn Quiet Mode on or off at set times",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot_edit.png"},{"url":"screenshot_main.png"},{"url":"screenshot_widget_alarms.png"},{"url":"screenshot_widget_silent.png"}],
     "tags": "tool,widget",
     "supports": ["BANGLEJS"],
     "readme": "README.md",
@@ -3702,6 +3707,7 @@
     "version": "0.01",
     "description": "An Omnitrix Showpiece",
     "icon": "omnitrix.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "tags": "game",
     "supports": ["BANGLEJS"],
     "readme": "README.md",
@@ -3717,6 +3723,7 @@
     "version": "0.02",
     "description": "Morphing Clock, with an awesome \"The Dark Knight\" themed logo.",
     "icon": "bat-clock.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "type": "clock",
     "tags": "clock",
     "supports": ["BANGLEJS"],
@@ -3970,6 +3977,7 @@
     "version": "0.02",
     "description": "A simple clock using the bold Anton font.",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "type": "clock",
     "tags": "clock",
     "supports": ["BANGLEJS","BANGLEJS2"],
@@ -3985,10 +3993,11 @@
     "version": "0.02",
     "description": "A clock using a wave image by [Lillith May](https://www.instagram.com/_lilustrations_/). **Note: This requires firmware 2v11 or later Bangle.js 1**",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"waveclk.app.js","url":"app.js"},
@@ -4001,10 +4010,11 @@
     "version": "0.01",
     "description": "A clock with a flower background by [Lillith May](https://www.instagram.com/_lilustrations_/). **Note: This requires firmware 2v11 or later Bangle.js 1**",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot_floral.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"floralclk.app.js","url":"app.js"},
@@ -4017,6 +4027,7 @@
     "version": "0.01",
     "description": "Score Tracker for sports that use plain numbers (e.g. Badminton, Volleyball, Soccer, Table Tennis, ...). Also supports tennis scoring.",
     "icon": "score.app.png",
+    "screenshots": [{"url":"screenshot_score.png"}],
     "type": "app",
     "tags": "",
     "supports": ["BANGLEJS","BANGLEJS2"],
@@ -4048,10 +4059,11 @@
     "version": "0.01",
     "description": "A nifty clock with time and date",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot_nifty.png"}],
     "type": "clock",
     "tags": "clock",
-    "readme": "README.md",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "readme": "README.md",
     "allow_emulator": true,
     "storage": [
       {"name":"ffcniftya.app.js","url":"app.js"},
@@ -4064,6 +4076,7 @@
     "version": "0.02",
     "description": "A nifty clock (series B) with time, date and color configuration",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "type": "clock",
     "tags": "clock",
     "supports": ["BANGLEJS","BANGLEJS2"],
@@ -4081,6 +4094,7 @@
     "version": "0.01",
     "description": "A touch based stop watch for Bangle JS 2",
     "icon": "stopwatch.png",
+    "screenshots": [{"url":"screenshot1.png"},{"url":"screenshot2.png"},{"url":"screenshot3.png"}],
     "tags": "tools,app,b2",
     "supports": ["BANGLEJS2"],
     "readme": "README.md",
@@ -4089,7 +4103,8 @@
       {"name":"stopwatch.img","url":"stopwatch.icon.js","evaluate":true}
     ]
   },
-  { "id": "vernierrespirate",
+  {
+    "id": "vernierrespirate",
     "name": "Vernier Go Direct Respiration Belt",
     "shortName": "Respiration Belt",
     "version": "0.01",
@@ -4110,6 +4125,7 @@
     "version": "0.01",
     "description": "A touch based GPS watch, shows OS map reference",
     "icon": "gpstouch.png",
+    "screenshots": [{"url":"screenshot1.png"},{"url":"screenshot2.png"},{"url":"screenshot3.png"},{"url":"screenshot4.png"}],
     "tags": "tools,app",
     "supports": ["BANGLEJS2"],
     "readme": "README.md",

bin/create_app_supports_field.js

@@ -55,20 +55,31 @@ apps = apps.map((app,appIdx) => {
   return app;
 });
 
+// search for screenshots
+apps = apps.map((app,appIdx) => {
+  if (app.screenshots) return app; // already sorted
+
+  var files = require("fs").readdirSync(__dirname+"/../apps/"+app.id);
+  var screenshots = files.filter(fn=>fn.startsWith("screenshot") && fn.endsWith(".png"));
+  if (screenshots.length)
+    app.screenshots = screenshots.map(fn => ({url:fn}));
+  return app;
+});
+
 var KEY_ORDER = [
-  "id","name","shortName","version","description","icon","type","tags","supports",
+  "id","name","shortName","version","description","icon","screenshots","type","tags","supports",
   "dependencies", "readme", "custom", "customConnect", "interface",
   "allow_emulator", "storage", "data", "sortorder"
 ];
 
 var JS = JSON.stringify;
 var json = "[\n  "+apps.map(app=>{
-  /*var keys = KEY_ORDER.filter(k=>k in app);
+  var keys = KEY_ORDER.filter(k=>k in app);
   Object.keys(app).forEach(k=>{
     if (!KEY_ORDER.includes(k))
       throw new Error(`Key named ${k} not known!`);
-  });*/
+  });
-  var keys = Object.keys(app); // don't re-order
+  //var keys = Object.keys(app); // don't re-order
 
   return "{\n    "+keys.map(k=>{
     var js = JS(app[k]);

core

@@ -1 +1 @@
-Subproject commit 8bbdf699210ab4d265a29a2bb0fd823cb5bca78a
+Subproject commit df02cd0529d81439fb859b553576398a445ef1b8

css/main.css

@@ -29,12 +29,26 @@
 .sort-nav {
   float: right;
 }
+
+.app-tile {
+  position: relative;
+  border-bottom: 1px solid #EEE;
+  margin-bottom: 4px;
+}
+
 .tile-content { position: relative; }
 .link-github {
   position:absolute;
   top: 36px;
   left: -24px;
 }
+.tile-screenshot {
+  position:absolute;bottom:1em;right:1em;
+  width:4em;height:4em;
+  padding:2px;border:1px solid black;
+  cursor:pointer;
+}
+
 .btn.btn-favourite { color: red; }
 .btn.btn-favourite:hover { color: red; }
 
@@ -53,4 +67,3 @@
 .icon.icon-interface::before {
   content: "\01F5AB";
 }
-

loader.js

@@ -161,3 +161,25 @@ window.addEventListener('load', (event) => {
     });
   });
 });
+
+function onAppJSONLoaded() {
+  return new Promise(resolve => {
+    httpGet("screenshots.json").then(screenshotJSON=>{
+      var screenshots = [];
+      try {
+        screenshots = JSON.parse(screenshotJSON);
+      } catch(e) {
+        console.error("Screenshot JSON Corrupted", e);
+      }
+      screenshots.forEach(s => {
+        var app = appJSON.find(a=>a.id==s.id);
+        if (!app) return;
+        if (!app.screenshots) app.screenshots = [];
+        app.screenshots.push({url:s.url});
+      })
+    }).catch(err=>{
+      console.log("No screenshots.json found");
+      resolve();
+    });
+  });
+}