{"id":22845967,"url":"https://github.com/conoro/bangleapps-temp","last_synced_at":"2025-07-06T23:03:01.318Z","repository":{"id":139933420,"uuid":"234067999","full_name":"conoro/BangleApps-Temp","owner":"conoro","description":"Testing from before Christmas","archived":false,"fork":false,"pushed_at":"2020-01-15T11:43:26.000Z","size":212,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-06T23:02:59.748Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/conoro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2020-01-15T11:43:08.000Z","updated_at":"2020-01-15T11:43:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"82186032-8c73-498f-98e8-e5b7ff423da1","html_url":"https://github.com/conoro/BangleApps-Temp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/conoro/BangleApps-Temp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conoro%2FBangleApps-Temp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conoro%2FBangleApps-Temp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conoro%2FBangleApps-Temp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conoro%2FBangleApps-Temp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/conoro","download_url":"https://codeload.github.com/conoro/BangleApps-Temp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conoro%2FBangleApps-Temp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263986225,"owners_count":23539807,"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":[],"created_at":"2024-12-13T03:19:38.839Z","updated_at":"2025-07-06T23:03:01.276Z","avatar_url":"https://github.com/conoro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Bangle.js App Loader (and Apps)\n================================\n\nTry it live at [banglejs.com/apps](https://banglejs.com/apps)\n\n## How does it work?\n\n* A list of apps is in `apps.json`\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## What filenames are used\n\nFilenames in storage are limited to 8 characters. To\neasily distinguish between file types, we use the following:\n\n* `+stuff` is JSON for an app\n* `*stuff` is an image\n* `-stuff` is JS code\n* `=stuff` is JS code for stuff that is run at boot time - eg. handling settings or creating widgets on the clock screen\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 7 character name, we'll assume `7chname`\n* Create a folder called `apps/\u003cid\u003e`, lets assume `apps/7chname`\n* We'd recommend that you copy files from 'Example Applications' (below) as a base, or...\n* `apps/7chname/app.png` should be a 48px icon\n* Use http://www.espruino.com/Image+Converter to create `apps/7chname/app-icon.js`, using a 1 bit, 4 bit or 8 bit Web Palette \"Image String\"\n* Create an entry in `apps/7chname/app.json` as follows:\n\n```\n{\n  \"name\":\"Short Name\",\n  \"icon\":\"*7chname\",\n  \"src\":\"-7chname\"\n}\n```\n\nSee `app.json /  widget.json` below for more info on the correct format.\n\n* Create an entry in `apps.json` as follows:\n\n```\n{ \"id\": \"7chname\",\n  \"name\": \"My app's human readable name\",\n  \"icon\": \"app.png\",\n  \"description\": \"A detailed description of my great app\",\n  \"tags\": \"\",\n  \"storage\": [\n    {\"name\":\"+7chname\",\"url\":\"app.json\"},\n    {\"name\":\"-7chname\",\"url\":\"app.js\"},\n    {\"name\":\"*7chname\",\"url\":\"app-icon.js\",\"evaluate\":true}\n  ],\n},\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\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\nYou can add the following to the Espruino Web IDE:\n\n```\n// replace with your 7chname app name\nvar appname = \"mygreat\";\n\nrequire(\"Storage\").write('*'+appname,\n  // place app-icon.js contents here\n);\n\n//\nrequire(\"Storage\").write(\"+\"+appname,{\n  \"name\":\"My Great App\",\"type\":\"\",\n  \"icon\":\"*\"+appname,\n  \"src\":\"-\"+appname,\n});\n\nrequire(\"Storage\").write(\"-\"+appname,`\n// place contents of app.js here\n// be aware of double-quoting templated strings\n`\n```\n\nWhen you upload code this way, your app will be uploaded to Bangle.js's menu\nwithout you having to use the `Bangle App Loader`\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 7 character name, copy `apps/_example_app`\nor `apps/_example_widget` to `apps/7chname`, and add `apps/_example_X/add_to_apps.json` to\n`apps.json`.\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* `add_to_apps.json` - insert into `apps.json`, describes the widget 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.json` - short app name for Bangle.js menu and storage filenames\n* `app.js` - app code\n\n#### `app-icon.js`\n\nThe icon image and short description is used in the menu entry as selection posibility.\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 png file\n2. set _X_ Use Compression\n3. set _X_ Transparency (optional)\n4. set Diffusion: _flat_\n5. set Colours: _1 bit_, _4 bit_ or _8 bit Web Palette_\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\nKeep in mind to use this converter for creating images you like to draw with `g.drawImage()` with your app.\n\n\n### Widget Example\n\nThe widget example is available in [`apps/_example_widget`](apps/_example_widget)\n\n* `add_to_apps.json` - insert into `apps.json`, describes the widget to bootloader and loader\n* `widget.json` - short widget name and storage names\n* `widget.js` - widget code\n\n### `app.json` / `widget.json` format\n\nThis is the file that's loaded onto Bangle.js, which gives information\nabout the app.\n\n```\n{\n  \"name\":\"Short Name\", // for Bangle.js menu\n  \"icon\":\"*7chname\", // for Bangle.js menu\n  \"src\":\"-7chname\", // source file\n  \"type\":\"widget/clock/app\", // optional, default \"app\"\n     // if this is 'widget' then it's not displayed in the menu\n     // if it's 'clock' then it'll be loaded by default at boot time\n  \"version\":\"1.23\",\n     // added by BangleApps loader on upload based on apps.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}\n```\n\n### `apps.json` format\n\n```\n{ \"id\": \"appid\",              // 7 character app id\n  \"name\": \"Readable name\",    // readable name\n  \"icon\": \"icon.png\",         // icon in apps/\n  \"description\": \"...\",       // long description\n  \"type\":\"...\",               // optional(if app) - 'app' or 'widget'\n  \"tags\": \"\",                 // comma separated tag list for searching\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\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\",         // filename to use in storage\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    },\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\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` or empty.\n* storage is used to identify the app files and how to handle them\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 methodes, eg `g.setColor(0xFD20).setFontAlign(0,0).setfont(\"6x8\",3)`\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## 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 Bagle.js storage and output it back to the console\n* `testing/map` - code for splitting an image into map tiles and then displaying them\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconoro%2Fbangleapps-temp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconoro%2Fbangleapps-temp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconoro%2Fbangleapps-temp/lists"}