1
0
Fork 0

docs and example fix

master
Gordon Williams 2019-12-03 17:07:15 +00:00
parent 885d856b2b
commit 7ebde31f63
3 changed files with 20 additions and 17 deletions

View File

@ -88,7 +88,7 @@ require("Storage").write('*'+appname,
// place app-icon.js contents here // place app-icon.js contents here
); );
// //
require("Storage").write("+"+appname,{ require("Storage").write("+"+appname,{
"name":"My Great App","type":"", "name":"My Great App","type":"",
"icon":"*"+appname, "icon":"*"+appname,
@ -120,8 +120,8 @@ Apps are listed in the Bangle.js menu, accessible from a clock app via the middl
* `add_to_apps.json` - insert into `apps.json`, describes the widget to bootloader and loader * `add_to_apps.json` - insert into `apps.json`, describes the widget to bootloader and loader
* `app.png` - app icon - 48x48px * `app.png` - app icon - 48x48px
* `app-icon.js` - JS version of the icon (made with http://www.espruino.com/Image+Converter) for use in Bangle.js's menu * `app-icon.js` - JS version of the icon (made with http://www.espruino.com/Image+Converter) for use in Bangle.js's menu
* `app.json` - short app name for Bangle.js menu and storage filenames * `app.json` - short app name for Bangle.js menu and storage filenames
* `app.js` - app code * `app.js` - app code
#### `app-icon.js` #### `app-icon.js`
@ -135,11 +135,11 @@ Follow this steps to create a readable icon as image string.
2. set _X_ Use Compression 2. set _X_ Use Compression
3. set _X_ Transparency (optional) 3. set _X_ Transparency (optional)
4. set Diffusion: _flat_ 4. set Diffusion: _flat_
5. set Colours: _1 bit_, _4 bit_ or _8 bit Web Palette_ 5. set Colours: _1 bit_, _4 bit_ or _8 bit Web Palette_
6. set Output as: _Image String_ 6. set Output as: _Image String_
Replace this line with the image converter output: Replace this line with the image converter output:
``` ```
require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA==")); require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA=="));
``` ```
@ -152,8 +152,8 @@ Keep in mind to use this converter for creating images you like to draw with `g.
The widget example is available in [`apps/_example_widget`](apps/_example_widget) The widget example is available in [`apps/_example_widget`](apps/_example_widget)
* `add_to_apps.json` - insert into `apps.json`, describes the widget to bootloader and loader * `add_to_apps.json` - insert into `apps.json`, describes the widget to bootloader and loader
* `widget.json` - short widget name and storage names * `widget.json` - short widget name and storage names
* `widget.js` - widget code * `widget.js` - widget code
#### `apps.json` format #### `apps.json` format
@ -170,6 +170,9 @@ The widget example is available in [`apps/_example_widget`](apps/_example_widget
// iframe, and it must post back an 'app' structure // iframe, and it must post back an 'app' structure
// like this one with 'storage','name' and 'id' set up // like this one with 'storage','name' and 'id' set up
"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
"storage": [ // list of files to add to storage "storage": [ // list of files to add to storage
{"name":"-appid", // filename to use in storage {"name":"-appid", // filename to use in storage
"url":"", // URL of file to load (currently relative to apps/) "url":"", // URL of file to load (currently relative to apps/)
@ -204,31 +207,31 @@ The widget example is available in [`apps/_example_widget`](apps/_example_widget
- chaining graphics methodes, eg `g.setColor(0xFD20).setFontAlign(0,0).setfont("6x8",3)` - chaining graphics methodes, eg `g.setColor(0xFD20).setFontAlign(0,0).setfont("6x8",3)`
### Graphic areas ### Graphic areas
The screen is parted in a widget and app area for lcd mode `direct`(default). The screen is parted in a widget and app area for lcd mode `direct`(default).
| areas | as rectangle or point | | areas | as rectangle or point |
| :-:| :-: | | :-:| :-: |
| Widget | (0,0,239,23) | | Widget | (0,0,239,23) |
| Apps | (0,24,239,239) | | Apps | (0,24,239,239) |
| BTN1 | (230, 55) | | BTN1 | (230, 55) |
| BTN2 | (230, 140) | | BTN2 | (230, 140) |
| BTN3 | (230, 210) | | BTN3 | (230, 210) |
| BTN4 | (0,0,119, 239)| | BTN4 | (0,0,119, 239)|
| BTN5 | (120,0,239,239) | | BTN5 | (120,0,239,239) |
- Use `g.setFontAlign(0, 0, 3)` to draw rotated string to BTN1-BTN3 with `g.drawString()`. - Use `g.setFontAlign(0, 0, 3)` to draw rotated string to BTN1-BTN3 with `g.drawString()`.
- For BTN4-5 the touch area is named - For BTN4-5 the touch area is named
## Available colors ## Available colors
You can use `g.setColor(r,g,b)` OR `g.setColor(16bitnumber)` - some common 16 bit colors are below: You can use `g.setColor(r,g,b)` OR `g.setColor(16bitnumber)` - some common 16 bit colors are below:
| color-name | color-value| | color-name | color-value|
| :-: | :-: | | :-: | :-: |
| Black | 0x0000 | | Black | 0x0000 |
| Navy | 0x000F | | Navy | 0x000F |
| DarkGreen | 0x03E0 | | DarkGreen | 0x03E0 |
| DarkCyan | 0x03EF | | DarkCyan | 0x03EF |

View File

@ -8,5 +8,5 @@
{"name":"+7chname","url":"app.json"}, {"name":"+7chname","url":"app.json"},
{"name":"-7chname","url":"app.js"}, {"name":"-7chname","url":"app.js"},
{"name":"*7chname","url":"app-icon.js","evaluate":true} {"name":"*7chname","url":"app-icon.js","evaluate":true}
], ]
} }

View File

@ -7,5 +7,5 @@
"storage": [ "storage": [
{"name":"+7chname","url":"widget.json"}, {"name":"+7chname","url":"widget.json"},
{"name":"-7chname","url":"widget.js"}, {"name":"-7chname","url":"widget.js"},
], ]
} }