Bangle.js App Customiser

In the app loader, it is possible to customise some apps before they are uploaded. We'll explain how to do that here.

Another method is to create an interface.html file which allows you to read/write data for an app that is already installed - you can see how to do that on the Bangle.js Storage page

We'll assume you've been through adding an app to the Bangle.js App Loader already so you know what's involved in submitting an app and have one that you want to customise.

The idea behind the customiser is pretty simple. You create a webpage which helps the user customise their app. When you click the button in the app loader, the webpage pops up, and when complete the webpage gives the App Loader a list of files it should upload to the Bangle (in addition to the ones in metadata.json).

We're going to create a simple app that displays the text that's been entered on the HTML page.

First, we'll create an app that displays data from a file on the Bangle itself:

var txt = require("Storage").readJSON("myapp.json",1)||{}};
g.clear(1);
g.setFontAlign(0,0);
g.setFont("6x8");
g.drawString(txt.value, 120,120);

This will read some JSON in the form of {"value":"Some text"} from a file called myapp.json on the Bangle.

Next, we need an HTML file which will generate myapp.json. There are a few basics here - a CSS style file so the style matches with the rest of the app loader, and a library to help communicate with the App Loader.

Create a file in your app's folder called custom.html and add:

<html>
  <head>
    <link rel="stylesheet" href="../../css/spectre.min.css">
  </head>
  <body>

    <p>Some text: <input type="text" id="mytext" class="form-input" value="http://espruino.com"></p>
    <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>

    <script src="../../core/lib/customize.js"></script>

    <script>
      // When the 'upload' button is clicked...
      document.getElementById("upload").addEventListener("click", function() {
        // get the text to add
        var text = document.getElementById("mytext").value;
        var json = {value : text};
        // send app's info (in addition to the contents of metadata.json)
        sendCustomizedApp({
          storage:[
            {name:"myapp.json", content:JSON.stringify(json)},
          ]
        });
      });

    </script>
  </body>
</html>

Now edit your app's JSON and add the line "custom": "custom.html", just before "storage".

And now you're ready to go! When you start the App Loader you'll be able to create a custom app.

Note: You can also get information about the currently connected device. To do this you must tell the app loader the device must be connected first by adding "customConnect": true, to the metadata.json, and then you can define an function onInit(device) { ... } function that is called with information about the device, and which can use functions like Util.readStorage that are defined at https://github.com/espruino/EspruinoAppLoaderCore/blob/master/lib/customize.js

Note: Previously, this tutorial gave an example of directly writing to a single myapp.js with the app and the data inside it, but while that is possible (for instance the Beer Compass App still does it) it's not something we'd recommend as it can make it harder to develop and maintain the app.

This page is auto-generated from GitHub. If you see any mistakes or have suggestions, please let us know.