From a703e154559b464bd882b07e981da10c6d02a9bc Mon Sep 17 00:00:00 2001 From: Gordon Williams Date: Mon, 10 Feb 2020 13:49:36 +0000 Subject: [PATCH] Add GPS Recorder with companion code in Bangle App Loader that allows the data to be read back as a KML --- README.md | 79 ++++++++++++++ apps/beer/beercompass.html | 4 +- apps/gpsrec/app.js | 4 - apps/gpsrec/interface.html | 216 ++++++++++++++++++++++++++++++++----- apps/qrcode/qrcode.html | 7 +- apps/route/route.html | 3 +- index.js | 42 ++++---- lib/customize.js | 25 +++++ lib/interface.js | 32 ++++++ 9 files changed, 358 insertions(+), 54 deletions(-) create mode 100644 lib/customize.js create mode 100644 lib/interface.js diff --git a/README.md b/README.md index eaf8c6f4c..f79c8d4d4 100644 --- a/README.md +++ b/README.md @@ -192,10 +192,12 @@ about the app. "custom": "custom.html", // if supplied, apps/custom.html is loaded in an // iframe, and it must post back an 'app' structure // like this one with 'storage','name' and 'id' set up + // see below for more info "interface": "interface.html", // if supplied, apps/interface.html is loaded in an // iframe, and it may interact with the connected Bangle // to retrieve information from it + // see below for more info "allow_emulator":true, // if 'app.js' will run in the emulator, set to true to // add an icon to allow your app to be tested @@ -218,6 +220,83 @@ about the app. * tags is used for grouping apps in the library, separate multiple entries by comma. Known tags are `tool`, `system`, `clock`, `game`, `sound`, `gps`, `widget`, `launcher` or empty. * storage is used to identify the app files and how to handle them +### `apps.json`: `custom` element + +Apps that can be customised need to define a `custom` element in `apps.json`, +which names an HTML file in that app's folder. + +When `custom` is defined, the 'upload' button is replaced by a customize +button, and when clicked it opens the HTML page specified in an iframe. + +In that HTML file you're then responsible for handling a button +press and calling `sendCustomizedApp` with your own customised +version of what's in `apps.json`: + +``` + + + + + +

+ + + + +``` + +This'll then be loaded in to the watch. See [apps/qrcode/grcode.html](the QR Code app) +for a clean example. + +### `apps.json`: `interface` element + +Apps that create data that can be read back can define a `interface` element in `apps.json`, +which names an HTML file in that app's folder. + +When `interface` is defined, a `Download from App` button is added to +the app's description, and when clicked it opens the HTML page specified +in an iframe. + +``` + + + + + + +
Loading...
+ + + +``` + +When the page is ready a function called `onInit` is called, +and in that you can call `Puck.write` and `Puck.eval` to get +the data you require from Bangle.js. + +See [apps/gpsrec/interface.html](the GPS Recorder) for a full example. + ## Coding hints - Need to save state? Use the `E.on('kill',...)` event to save JSON to a file called `@7chname`, then load it at startup. diff --git a/apps/beer/beercompass.html b/apps/beer/beercompass.html index ba3988aec..cb5590fa7 100644 --- a/apps/beer/beercompass.html +++ b/apps/beer/beercompass.html @@ -33,6 +33,7 @@

If ok, Click

+ @@ -202,8 +203,7 @@ g.clear();`; }); var icon = `require("heatshrink").decompress(atob("mEwghC/AB0O/4AG8AXNgYXHmAXl94XH+AXNn4XH/wXW+YX/C6oWHAAIXN7sz9vdAAoXN9sznvuAAXf/vuC53jC4Xd7wXQ93jn3u9vv9vt7wXT/4tBAgIXQ7wvCC4PgC5sO6czIQJfBC6PumaPDC6wwCC50NYAJcBVgIDBCxrAFbgYXP7yoDF6TADL4YXPVAIXCRyAXC7wXW9zwBC6cNC9zABC4gWQC653CR4fQC6x3TF6gXXI4M9d6wAEC9EN73dAAZfQgczAAkwC/4XXAH4"))`; - - window.postMessage({ + sendCustomizedApp({ id : "beer", storage:[ diff --git a/apps/gpsrec/app.js b/apps/gpsrec/app.js index 890cf95bf..a06938e60 100644 --- a/apps/gpsrec/app.js +++ b/apps/gpsrec/app.js @@ -109,7 +109,3 @@ function viewTrack(n) { } showMainMenu(); - - -// f = require("Storage").open(".gpsrc"+n,"r"); -// f.readLine()... diff --git a/apps/gpsrec/interface.html b/apps/gpsrec/interface.html index cf6b2c311..edc17c160 100644 --- a/apps/gpsrec/interface.html +++ b/apps/gpsrec/interface.html @@ -3,34 +3,202 @@ +
-

Hello!

+ + diff --git a/apps/qrcode/qrcode.html b/apps/qrcode/qrcode.html index cb734c1b5..bdc34def5 100644 --- a/apps/qrcode/qrcode.html +++ b/apps/qrcode/qrcode.html @@ -8,7 +8,7 @@

Try your QR Code:

Click

- + @@ -41,15 +41,13 @@ g.setColor(0,0,0); g.drawString(url,120,230); g.setColor(1,1,1); `; - console.log(app); var json = JSON.stringify({ name:"QR Code", icon:"*qrcode", src:"-qrcode" }); var icon = `require("heatshrink").decompress(atob("mEwgP/AEX8gE8nkAn4FSngCWF6xfYDgIABHAQFPDQXD4YgDApxNDMooFOAQIdDAqIvWfcYA="))`; - - window.postMessage({ + sendCustomizedApp({ id : "qrcode", storage:[ @@ -58,6 +56,7 @@ g.setColor(1,1,1); {name:"*qrcode", content:icon, evaluate:true}, ] }); + }); diff --git a/apps/route/route.html b/apps/route/route.html index bee670b08..f44fb97c5 100644 --- a/apps/route/route.html +++ b/apps/route/route.html @@ -25,6 +25,7 @@ 


+