{"id":28388573,"url":"https://github.com/espruino/bangleapps","last_synced_at":"2025-06-27T07:31:57.019Z","repository":{"id":37734895,"uuid":"220052751","full_name":"espruino/BangleApps","owner":"espruino","description":"Bangle.js App Loader (and Apps)","archived":false,"fork":false,"pushed_at":"2025-06-23T15:59:37.000Z","size":111093,"stargazers_count":521,"open_issues_count":107,"forks_count":1245,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-06-23T17:03:24.083Z","etag":null,"topics":["hacktoberfest","javascript","smartwatch","webbluetooth"],"latest_commit_sha":null,"homepage":"https://banglejs.com/apps","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/espruino.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":"espruino","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["http://www.espruino.com/Donate"]}},"created_at":"2019-11-06T17:27:51.000Z","updated_at":"2025-06-23T15:59:41.000Z","dependencies_parsed_at":"2022-07-13T09:20:32.419Z","dependency_job_id":"f9de0d7f-9d59-48d8-89c0-cb35cc047655","html_url":"https://github.com/espruino/BangleApps","commit_stats":{"total_commits":16140,"total_committers":471,"mean_commits":"34.267515923566876","dds":0.8891573729863693,"last_synced_commit":"1aa9b7af03b63601253f922bdf3d7ff4df706e1b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/espruino/BangleApps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/espruino%2FBangleApps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/espruino%2FBangleApps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/espruino%2FBangleApps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/espruino%2FBangleApps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/espruino","download_url":"https://codeload.github.com/espruino/BangleApps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/espruino%2FBangleApps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262212578,"owners_count":23275952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","smartwatch","webbluetooth"],"created_at":"2025-05-30T22:13:50.836Z","updated_at":"2025-06-27T07:31:57.004Z","avatar_url":"https://github.com/espruino.png","language":"JavaScript","readme":"Bangle.js App Loader (and Apps)\n================================\n\n[![Build Status](https://github.com/espruino/BangleApps/actions/workflows/nodejs.yml/badge.svg)](https://github.com/espruino/BangleApps/actions/workflows/nodejs.yml)\n\n* Try the **release version** at [banglejs.com/apps](https://banglejs.com/apps)\n* Try the **development version** at [espruino.github.io](https://espruino.github.io/BangleApps/)\n\nThe release version is manually refreshed with regular intervals while the development version is continuously updated as new code is committed to this repository.\n\n**All software (including apps) in this repository is MIT Licensed - see [LICENSE](LICENSE)** By\nsubmitting code to this repository you confirm that you are happy with it being MIT licensed,\nand that it is not licensed in another way that would make this impossible.\n\n## How does it work?\n\n* A list of apps is in `apps.json` (this is auto-generated from all the `apps/yourapp/metadata.json` using Jekyll or `bin/create_apps_json.sh`)\n* Each element references an app in `apps/\u003cid\u003e` which is uploaded\n* When it starts, BangleAppLoader checks the JSON and compares\nit with the files it sees in the watch's storage.\n* To upload an app, BangleAppLoader checks the files that are\nlisted in `apps.json`, loads them, and sends them over Web Bluetooth.\n\n## Getting Started\n\nCheck out:\n\n* [Building your first Bangle.js Application](https://www.espruino.com/Bangle.js+First+App)\n* [Adding an app to the Bangle.js App Loader](https://www.espruino.com/Bangle.js+App+Loader)\n* [Customising the App Loader](https://www.espruino.com/Bangle.js+App+Loader+Custom)\n\n## What filenames are used\n\nFilenames in storage are limited to 28 characters. To\neasily distinguish between file types, we use the following:\n\n* `stuff.info` is JSON that describes an app - this is auto-generated by the App Loader\n* `stuff.img` is an image\n* `stuff.app.js` is JS code for applications\n* `stuff.wid.js` is JS code for widgets\n* `stuff.settings.js` is JS code for the settings menu\n* `stuff.boot.js` is JS code that automatically gets run at boot time\n* `stuff.json` is used for JSON settings for an app\n\n## Developing your own app\n\n* Head over to [the Web IDE](https://www.espruino.com/ide/) and ensure `Save on Send` in settings set to the *default setting* of `To RAM`\n* We'd recommend that you start off using code from 'Example Applications' (below) to get started...\n* Load [`app.js`](apps/_example_app/app.js) or [`widget.js`](apps/_example_widget/widget.js) into the IDE and start developing.\n* The `Upload` button will load your app to Bangle.js temporarily\n\n## Adding your app to the menu\n\n* Come up with a unique (all lowercase, no spaces) name, we'll assume `myappid`. Bangle.js\nis limited to 28 char filenames and appends a file extension (eg `.js`) so please\ntry and keep filenames short to avoid overflowing the buffer.\n* Create a folder called `apps/\u003cid\u003e`, lets assume `apps/myappid`\n* We'd recommend that you copy files from one of the Examples in `apps/_example_*` (see below), or...\n* `apps/myappid/app.png` should be a 48px icon\n* Use http://www.espruino.com/Image+Converter to create `apps/myappid/app-icon.js`, using a 1 bit, 4 bit or 8 bit Web Palette \"Image String\"\n* Create/modify `apps/myappid/metadata.json` as follows:\n\n```\n{ \"id\": \"myappid\",\n  \"name\": \"My app's human readable name\",\n  \"shortName\" : \"Short Name\",\n  \"icon\": \"app.png\",\n  \"description\": \"A detailed description of my great app\",\n  \"tags\": \"\",\n  \"storage\": [\n    {\"name\":\"myappid.app.js\",\"url\":\"app.js\"},\n    {\"name\":\"myappid.img\",\"url\":\"app-icon.js\",\"evaluate\":true}\n  ],\n},\n```\n\n### Screenshots\n\nIn the app `metadata.json` file you can add a list of screenshots with a line like: `\"screenshots\" : [ { \"url\":\"screenshot.png\" } ],`\n\nTo get a screenshot you can:\n\n* Type `g.dump()` in the left-hand side of the Web IDE when connected to a Bangle.js 2 - you can then\nright-click and save the image shown in the terminal (this only works on Bangle.js 2 - Bangle.js 1 is\nunable to read data back from the LCD controller).\n* Run your code in the emulator and use the screenshot button in the bottom right of the window.\n\n\n## Testing\n\n### Online\n\nThis is the best way to test...\n\n* Fork the https://github.com/espruino/BangleApps git repository\n* Add your files\n* Go to GitHub Settings and activate GitHub Pages\n* Run your personal `Bangle App Loader` at https://\\\u003cyour-github-username\\\u003e.github.io/BangleApps/index.html to load apps onto your device\n* Your apps should be inside it - if there are problems, check your web browser's 'developer console' for errors\n\n**Note:** It's a great idea to get a local copy of the repository on your PC,\nthen run `bin/sanitycheck.js` - it'll run through a bunch of common issues\nthat there might be. To get the project running locally, you have to initialize and update the git submodules first: `git submodule update --init`.\n\nBe aware of the delay between commits and updates on github.io - it can take a few minutes (and a 'hard refresh' of your browser) for changes to take effect.\n\n### Offline\n\nUsing the 'Storage' icon in [the Web IDE](https://www.espruino.com/ide/)\n(4 discs), upload your files into the places described in your JSON:\n\n* `app-icon.js` -\u003e `myappid.img`\n\nNow load `app.js` up in the editor, and click the down-arrow to the bottom\nright of the `Send to Espruino` icon. Click `Storage` and then either choose\n`myappid.app.js` (if you'd uploaded your app previously), or `New File`\nand then enter `myappid.app.js` as the name.\n\nNow, clicking the `Send to Espruino` icon will load the app directly into\nEspruino **and** will automatically run it.\n\nWhen you upload code this way, your app will even be uploaded to Bangle.js's menu\nwithout you having to use the `Bangle App Loader`\n\n**Note:** Widgets need to be run inside a clock or app, so if you're\ndeveloping a widget you need to go go `Settings` -\u003e `Communications` -\u003e `Load after saving`\nand set it to `Load default application`.\n\n## Example Applications\n\nTo make the process easier we've come up with some example applications that you can use as a base\nwhen creating your own. Just come up with a unique name (ideally lowercase, under 20 chars), copy `apps/_example_app`\nor `apps/_example_widget` to `apps/myappid`, and edit `apps/myappid/metadata.json` accordingly.\n\n**Note:** the max filename length is 28 chars, so we suggest an app ID of under\n20 so that when `.app.js`/etc gets added to the end the filename isn't cropped.\n\n**If you're making a widget** please start the name with `wid` to make\nit easy to find!\n\n### App Example\n\nThe app example is available in [`apps/_example_app`](apps/_example_app)\n\nApps are listed in the Bangle.js menu, accessible from a clock app via the middle button.\n\n* `metadata.json` - describes the app to bootloader and loader\n* `app.png` - app icon - 48x48px\n* `app-icon.js` - JS version of the icon (made with http://www.espruino.com/Image+Converter) for use in Bangle.js's menu\n* `app.js` - app code\n* `ChangeLog` - A file containing a list of changes to your app so users can see what's changed\n\n#### `app-icon.js`\n\nThe icon image and short description is used in Bangle.js's launcher.\n\nUse the Espruino [image converter](https://www.espruino.com/Image+Converter) and upload your `app.png` file.\n\nFollow this steps to create a readable icon as image string.\n\n1. upload a 48x48 png file - THE IMAGE SHOULD BE 48x48 OR LESS\n2. set _X_ Use Compression\n3. set _X_ Transparency (optional)\n4. set Diffusion: _flat_\n5. set Colours: _1 bit_, any of the Optimised options, or _8 bit Web Palette_ are best\n6. set Output as: _Image String_\n\nReplace this line with the image converter output:\n\n```\nrequire(\"heatshrink\").decompress(atob(\"mEwwJC/AH4A/AH4AgA==\"))\n```\n\n**Do not add a trailing semicolon**\n\nYou can also use this converter for creating images you like to draw with `g.drawImage()` with your app.\n\nApps that need widgets can call `Bangle.loadWidgets()` **once** at startup to load\nthem, and then `Bangle.drawWidgets()` to draw them onto the screen whenever the app\nhas call to completely clear the screen. Widgets themselves will update as and when needed.\n\n### Widget Example\n\nThe widget example is available in [`apps/_example_widget`](apps/_example_widget)\n\n* `metadata.json` - describes the widget to bootloader and loader\n* `widget.js` - widget code\n\nWidgets are just small bits of code that run whenever an app that supports them\ncalls `Bangle.loadWidgets()`. If they want to display something in the 24px high\nwidget bar at the top of the screen they can add themselves to the global\n`WIDGETS` array with:\n\n```\nWIDGETS[\"mywidget\"]={\n  area:\"tl\", // tl (top left), tr (top right), bl (bottom left), br (bottom right)\n  sortorder:0, // (Optional) determines order of widgets in the same corner\n  width: 24, // how wide is the widget? You can change this and call Bangle.drawWidgets() to re-layout\n  draw:draw // called to draw the widget\n};\n```\n\nWhen the widget is to be drawn, `x` and `y` values are set up in `WIDGETS[\"mywidget\"]`\nand `draw` can then use `this.x` and `this.y` to figure out where it needs to draw to.\n\n\n### ChangeLog\n\nThis is a file containing a list of changes to your app so users can see what's changed, for example:\n\n```\n0.01: New App!\n0.02: Changed the colors\n0.03: Made the app run quicker\n```\n\nEntries should be newest last, with the version number of the last entry matching the version in `metadata.json`\n\nPlease keep the same format at the example as the file needs to be parsed by the BangleApps tools.\n\n### `app.info` format\n\nThis is the file that's **auto-generated** from `metadata.json` and loaded onto Bangle.js by the App Loader,\nand which gives information about the app for the Launcher.\n\n```\n{\n  \"name\":\"Short Name\", // for Bangle.js menu\n  \"icon\":\"*myappid\", // for Bangle.js menu\n  \"src\":\"-myappid\", // source file\n  \"type\":\"widget/clock/app/bootloader/...\", // optional, default \"app\"\n     // see 'type' in 'metadata.json format' below for more options/info\n  \"version\":\"0.01\",\n     // added by BangleApps loader on upload based on metadata.json\n  \"files:\"file1,file2,file3\",\n     // added by BangleApps loader on upload - lists all files\n     // that belong to the app so it can be deleted\n  \"data\":\"appid.data.json,appid.data?.json;appidStorageFile,appidStorageFile*\"\n     // added by BangleApps loader on upload - lists files that\n     // the app might write, so they can be deleted on uninstall\n     // typically these files are not uploaded, but created by the app\n     // these can include '*' or '?' wildcards\n}\n```\n\n### `metadata.json` format\n\n```\n{ \"id\": \"appid\",              // 7 character app id\n  \"name\": \"Readable name\",    // readable name\n  \"shortName\": \"Short name\",  // short name for launcher\n  \"version\": \"0.01\",          // the version of this app\n  \"description\": \"...\",       // long description (can contain markdown)\n  \"icon\": \"icon.png\",         // icon in apps/\n  \"screenshots\" : [ { \"url\":\"screenshot.png\" } ], // optional screenshot for app\n  \"type\":\"...\",               // optional(if app) -\n                              //   'app' - an application\n                              //   'clock' - a clock - required for clocks to automatically start\n                              //   'widget' - a widget\n                              //   'module' - this provides a module that can be used with 'require'.\n                              //              'provides_modules' should be used if type:module is specified\n                              //   'bootloader' - an app that at startup (app.boot.js) but doesn't have a launcher entry for 'app.js'\n                              //   'settings' - apps that appear in Settings-\u003eApps (with appname.settings.js) but that have no 'app.js'\n                              //   'clkinfo' - Provides a 'myapp.clkinfo.js' file that can be used to display info in clocks - see modules/clock_info.js\n                              //   'RAM' - code that runs and doesn't upload anything to storage\n                              //   'launch' - replacement 'Launcher'\n                              //   'textinput' - provides a 'textinput' library that allows text to be input on the Bangle\n                              //   'scheduler' - provides 'sched' library and boot code for scheduling alarms/timers\n                              //                 (currently only 'sched' app)\n                              //   'notify' - provides 'notify' library for showing notifications\n                              //   'locale' - provides 'locale' library for language-specific date/distance/etc\n                              //              (a version of 'locale' is included in the firmware)\n                              //   'defaultconfig' - a set of apps that will can be installed and will wipe out all previously installed apps\n  \"tags\": \"\",                 // comma separated tag list for searching (don't include uppercase or spaces)\n                              // common types are:\n                              //   'clock' - it's a clock\n                              //   'widget' - it is (or provides) a widget\n                              //   'outdoors' - useful for outdoor activities\n                              //   'tool' - a useful utility (timer, calculator, etc)\n                              //   'game' - a game\n                              //   'bluetooth' - uses Bluetooth LE\n                              //   'system' - used by the system\n                              //   'clkinfo' - provides or uses clock_info module for data on your clock face or clocks that support it (see apps/clock_info/README.md)\n                              //   'health' - e.g. heart rate monitors or step counting\n  \"supports\": [\"BANGLEJS2\"],  // List of device IDs supported, either BANGLEJS or BANGLEJS2\n  \"dependencies\" : { \"notify\":\"type\" } // optional, app 'types' we depend on (see \"type\" above)\n  \"dependencies\" : { \"messages\":\"app\" } // optional, depend on a specific app ID\n                              // for instance this will use notify/notifyfs is they exist, or will pull in 'notify'\n  \"dependencies\" : { \"messageicons\":\"module\" } // optional, depend on a specific library to be used with 'require' - see provides_modules\n  \"dependencies\" : { \"message\":\"widget\" } // optional, depend on a specific type of widget - see provides_widgets\n  \"provides_modules\" : [\"messageicons\"] // optional, this app provides a module that can be used with 'require'\n  \"provides_widgets\" : [\"battery\"] // optional, this app provides a type of widget - 'alarm/battery/bluetooth/pedometer/message'\n  \"provides_features\" : [\"welcome\"] // optional, this app provides some feature, used to ensure two aren't installed at once. Currently just 'welcome'\n  \"default\" : true,           // set if an app is the default implementer of something (a widget/module/etc)\n  \"readme\": \"README.md\",      // if supplied, a link to a markdown-style text file\n                              // that contains more information about this app (usage, etc)\n                              // A 'Read more...' link will be added under the app\n\n  \"custom\": \"custom.html\",    // if supplied, apps/custom.html is loaded in an\n                              // iframe, and it must post back an 'app' structure\n                              // like this one with 'storage','name' and 'id' set up\n                              // see below for more info\n\n  \"customConnect\": true,      // if supplied, ensure we are connected to a device\n                              // before the \"custom.html\" iframe is loaded. An\n                              // onInit function in \"custom.html\" is then called\n                              // with info on the currently connected device.\n\n  \"interface\": \"interface.html\",   // if supplied, apps/interface.html is loaded in an\n                              // iframe, and it may interact with the connected Bangle\n                              // to retrieve information from it\n                              // see below for more info\n\n  \"allow_emulator\":true,      // if 'app.js' will run in the emulator, set to true to\n                              // add an icon to allow your app to be tested\n\n  \"storage\": [                // list of files to add to storage\n    {\"name\":\"appid.js\",       // filename to use in storage.\n                              // If name=='RAM', the code is sent directly to Bangle.js and is not saved to a file\n     \"url\":\"\",                // URL of file to load (currently relative to apps/)\n     \"content\":\"...\",         // if supplied, this content is loaded directly\n     \"evaluate\":true,         // if supplied, data isn't quoted into a String before upload\n                              // (eg it's evaluated as JS)\n     \"noOverwrite\":true       // if supplied, this file will not be overwritten if it\n                              // already exists\n     \"supports\": [\"BANGLEJS2\"]// if supplied, this file will ONLY be uploaded to the device\n                              // types named in the array. This allows different versions of\n                              // the app to be uploaded for different platforms\n    },\n  ]\n  \"data\": [                   // list of files the app writes to\n    {\"name\":\"appid.data.json\",  // filename used in storage\n     \"storageFile\":true       // if supplied, file is treated as storageFile\n     \"url\":\"\",                // if supplied URL of file to load (currently relative to apps/)\n     \"content\":\"...\",         // if supplied, this content is loaded directly\n     \"evaluate\":true,         // if supplied, data isn't quoted into a String before upload\n                              // (eg it's evaluated as JS)\n    },\n    {\"wildcard\":\"appid.data.*\" // wildcard of filenames used in storage\n    },                         // this is mutually exclusive with using \"name\"\n  ],\n  \"sortorder\" : 0,            // optional - choose where in the list this goes.\n                              // this should only really be used to put system\n                              // stuff at the top\n}\n```\n\n* name, icon and description present the app in the app loader.\n* 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`, `bluetooth` or empty.\n* storage is used to identify the app files and how to handle them\n* data is used to clean up files when the app is uninstalled\n\n### `metadata.json`: `custom` element\n\nApps that can be customised need to define a `custom` element in `metadata.json`,\nwhich names an HTML file in that app's folder.\n\nWhen `custom` is defined, the 'upload' button is replaced by a customize\nbutton, and when clicked it opens the HTML page specified in an iframe.\n\nIn that HTML file you're then responsible for handling a button\npress and calling `sendCustomizedApp` with your own customised\nversion of what's in `metadata.json`:\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"../../css/spectre.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cp\u003e\u003cbutton id=\"upload\" class=\"btn btn-primary\"\u003eUpload\u003c/button\u003e\u003c/p\u003e\n    \u003cscript src=\"../../lib/customize.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      document.getElementById(\"upload\").addEventListener(\"click\", function() {\n        sendCustomizedApp({\n          id : \"myappid\",\n          storage:[\n            {name:\"myappid.app.js\", url:\"app.js\", content:app_source_code},\n            {name:\"myappid.img\", content:'require(\"heatshrink\").decompress(atob(\"mEwg...4\"))', evaluate:true},\n          ]\n        });\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis'll then be loaded in to the watch. See [apps/qrcode/grcode.html](the QR Code app)\nfor a clean example.\n\n**Note:** we specify a `url` for JS files even though it doesn't have to exist\nand will never be loaded. This is so the app loader can tell if it's a JavaScript\nfile based on the extension, and if so it can minify and pretokenise it.\n\n### `metadata.json`: `interface` element\n\nApps that create data that can be read back can define a `interface` element in `metadata.json`,\nwhich names an HTML file in that app's folder.\n\nWhen `interface` is defined, a `Download from App` button is added to\nthe app's description, and when clicked it opens the HTML page specified\nin an iframe.\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"../../css/spectre.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"../../core/lib/interface.js\"\u003e\u003c/script\u003e\n    \u003cdiv id=\"t\"\u003eLoading...\u003c/div\u003e\n    \u003cscript\u003e\n      function onInit() {\n        Puck.eval(\"E.getTemperature()\", temp=\u003e {\n          document.getElementById(\"t\").innerHTML = temp;\n        });\n      }\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWhen the page is ready a function called `onInit` is called,\nand in that you can call `Puck.write` and `Puck.eval` to get\nthe data you require from Bangle.js.\n\nSee [apps/gpsrec/interface.html](the GPS Recorder) for a full example.\n\n### Adding configuration to the \"Settings\" menu\n\nApps (or widgets) can add their own settings to the \"Settings\" menu under \"App/widget settings\".\nTo do so, the app needs to include a `settings.js` file, containing a single function\nthat handles configuring the app.\nWhen the app settings are opened, this function is called with one\nargument, `back`: a callback to return to the settings menu.\n\nUsually it will save any information in `myappid.json` where `myappid` is the name\nof your app - so you should change the example accordingly.\n\nExample `settings.js`\n```js\n// make sure to enclose the function in parentheses\n(function(back) {\n  let settings = require('Storage').readJSON('myappid.json',1)||{};\n  if (typeof settings.monkeys !== \"number\") settings.monkeys = 12; // default value\n  function save(key, value) {\n    settings[key] = value;\n    require('Storage').write('myappid.json', settings);\n  }\n  const appMenu = {\n    '': {'title': 'App Settings'},\n    '\u003c Back': back,\n    'Monkeys': {\n      value: settings.monkeys,\n      onchange: (m) =\u003e {save('monkeys', m)}\n    }\n  };\n  E.showMenu(appMenu)\n})\n```\nIn this example the app needs to add `myappid.settings.js` to `storage` in `metadata.json`.\nIt should also add `myappid.json` to `data`, to make sure it is cleaned up when the app is uninstalled.\n```json\n  { \"id\": \"myappid\",\n    ...\n    \"storage\": [\n      ...\n      {\"name\":\"myappid.settings.js\",\"url\":\"settings.js\"}\n    ],\n    \"data\": [\n      {\"name\":\"myappid.json\"}\n    ]\n  },\n```\n\n## Modules\n\nYou can include any of [Espruino's modules](https://www.espruino.com/Modules) as\nnormal with `require(\"modulename\")`. To include [Bangle's modules](modules) for use in the Web\nIDE, [upload the modules to internal storage](modules#upload-the-module-to-the-bangles-internal-storage)\nor [change the IDE's search path](modules#change-the-web-ide-search-path-to-include-banglejs-modules).\nIf you want to develop your own module for your\napp(s) then you can do that too. Just add the module into the `modules` folder\nthen you can use it from your app as normal.\n\nYou won't be able to develop apps using your own modules with the IDE,\nso instead we'd recommend you write your module to a Storage File called\n`modulename` on Bangle.js. You can then develop your app as normal on Bangle.js\nfrom the IDE.\n\n## Coding hints\n\n- use `g.setFont(.., size)` to multiply the font size, eg (\"6x8\",3) : \"18x24\"\n\n- use `g.drawString(text,x,y,true)` to draw with background color to overwrite existing text\n\n- use `g.clearRect()` to clear parts of the screen, instead of using `g.clear()`\n\n- use `g.fillPoly()` or `g.drawImage()` for complex graphic elements\n\n- using `g.clear()` can cause screen flicker\n\n- using `g.setLCDBrightness()` can save you power during long periods with lcd on\n\n- chaining graphics methods, eg `g.setColor(0xFD20).setFontAlign(0,0).setfont(\"6x8\",3)`\n\n### Misc Notes\n\n- Need to save state? Use the `E.on('kill',...)` event to save JSON to a file called `myappid.json`, then load it at startup.\n\n- 'Alarm' apps define a file called `alarm.js` which handles the actual alarm window.\n\n- Locale is handled by `require(\"locale\")`. An app may create a `locale` file in Storage which is\na module that overwrites Bangle.js's default locale.\n\n\n### Graphic areas\n\nThe screen is parted in a widget and app area for lcd mode `direct`(default).\n\n| areas | as rectangle or point |\n| :-:| :-: |\n| Widget | (0,0,239,23) |\n| Apps | (0,24,239,239) |\n| BTN1 | (230, 55)  |\n| BTN2 | (230, 140) |\n| BTN3 | (230, 210) |\n| BTN4 | (0,0,119, 239)|\n| BTN5 |  (120,0,239,239) |\n\n- Use `g.setFontAlign(0, 0, 3)` to draw rotated string to BTN1-BTN3 with `g.drawString()`.\n\n- For BTN4-5 the touch area is named\n\n## Available colors\n\nYou can use `g.setColor(r,g,b)` OR `g.setColor(16bitnumber)` - some common 16 bit colors are below:\n\n| color-name | color-value|\n| :-: | :-: |\n| Black | 0x0000 |\n| Navy | 0x000F |\n| DarkGreen | 0x03E0 |\n| DarkCyan | 0x03EF |\n| Maroon | 0x7800 |\n| Purple | 0x780F |\n| Olive | 0x7BE0\n| LightGray | 0xC618\n| DarkGrey | 0x7BEF\n| Blue | 0x001F\n| Green | 0x07E0 |\n| Cyan | 0x07FF |\n| RED | 0xF800 |\n| Magenta | 0xF81F |\n| Yellow | 0xFFE0 |\n| White | 0xFFFF |\n| Orange | 0xFD20 |\n| GreenYellow | 0xAFE5 |\n| Pink | 0xF81F |\n\n## Fonts\n\nA recent addition to Bangle.js is the ability to use extra fonts with support for more characters.\nFor example [all regions](https://banglejs.com/apps/?id=fontall) or [extended](https://banglejs.com/apps/?id=fontext) fonts.\n\nOnce installed, these apps cause a new font, `Intl` to be added to `Graphics`, which can be used with just `g.setFont(\"Intl\")`.\n\nThere is also a `font` library - this is not implemented yet, but more information about the planned implementation\nis available at https://github.com/espruino/BangleApps/issues/3109\n\nFor now, to make your app work with the international font, you can check if `Graphics.prototype.setFontIntl` exists,\nand if so you can change the font you plan on using:\n\n```JS\nmyFont = \"6x8:2\";\nif (Graphics.prototype.setFontIntl)\n  myFont = \"Intl\";\n```\n\nAny new Font library must contain the metadata `\"icon\": \"app.png\", \"tags\": \"font\", \"type\": \"module\", \"provides_modules\" : [\"fonts\"],`\nand should provide a `font` library, as well as a `boot.js` that adds `Graphics.prototype.setFontIntl`. If you plan on\nmaking a new library it's best to just copy one of the existing ones for now.\n\n\n## API Reference\n\n[Reference](http://www.espruino.com/Reference#software)\n\n[Bangle Class](https://banglejs.com/reference#Bangle)\n\n[Graphics Class](https://banglejs.com/reference#Graphics)\n\n## 'Testing' folder\n\nThe [`testing`](testing) folder contains snippets of code that might be useful for your apps.\n\n* `testing/colors.js` - 16 bit colors as name value pairs\n* `testing/gpstrack.js` - code to store a GPS track in Bangle.js storage and output it back to the console\n\n## Credits\n\nThe majority of icons used for these apps are from [Icons8](https://icons8.com/) - we have a commercial license but icons are also free for Open Source projects.\n","funding_links":["https://patreon.com/espruino","http://www.espruino.com/Donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fespruino%2Fbangleapps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fespruino%2Fbangleapps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fespruino%2Fbangleapps/lists"}