ICON preparation for apps and the Bangle JS2 loader.

[espruino-discuss2]

Posted at 2021-12-16 by HughB

I've spotted a couple of people struggling to get the icons right for Bangle JS2.
This can be a bit tricky.

One app supplied a 400x400 .png file as the icon for the App loader page.
Needless to say this did not display as an Icon in the launcher or on the App loader page.

I have just seen another icon be loaded that takes over the whole of the dtlauncher and the icon size is 178x178 pixels.

Here's how I would recommend this is done for the least amount of pain and to maximise success.

1. Find the image that you want to use for the App Launcher Icon.
   This gets displayed next to the App description in the App Launcher.

OPTION A

If you simply want this to be a screenshot of your app then take a screenshot of your app through the IDE.
Connect to your bangle through the IDE and type g.dump() in the left hand side of the screen (this only works on Bangle.js 2).
This will create a 176x176 png file.
Click on it and it should download to your download folder.
You now need to resize it to 48x48px in (eg Microsoft Painbrush, or GIMP on Linux)

OPTION B

Download the image you want to represent your App
Load it into a paint program (eg Microsoft Painbrush, or GIMP on Linux)
Cut it to 48x48 pixels, or resize it to 48x48 pixels if its already square.

2. Create your ICON code by loading your 48x48 pixel image app.png file into
   https://espruino.github.io/EspruinoWebTools/examples/imageconverter.html

• For colours: Select 'Optimal 1 bit'. If that doesn't look nice, choose 2 bit, 3 bit, 4 bit until you get the desired look
• For output: Select "Image String"
• Click the 'Use Compression' output.

You should end up with a string that is a few hundred characters long - as below.

You then simply cut and paste that into the icon.js file - with no ; on the end.
This gets converted to an image (.img) file by the App Loader when its installed onto your Bangle.

require("heatshrink").decompress(atob("oFA4X/AAIHBw3Aiv3HmE/HQQAF/gPEnWqAAOpy2VqoFB3gPIBoIABtQPJ1PVqv1q3qB5OlrNVEIQPK2tlBwOptQPIyvdH4VtrQPI3tbqtdB4OaB5FVH4NV0pgBB5F13//MIIPJ1O2TgWV/o/I1fbB4WpqoPI1NvB4REBJ5APD/wPBD5JOBB4WVqwPH0oPE0oPJ/NX//6AoNVF5HZq3pq2qSYIPI6tX+pNBB5Ol6v6B4IABH5P7//b1oPBN5GlLwPr9IPK1IPC/SvK1QPCOAIPL6te//5B5lW/5ABL5APB/wPB3IPJ1Y/C/yuBF5APC9X+yo/K34LB3QPBtQPJ//23SPB1QPI3eVs2qJwIPJ1flqyeBtQPJtZPBLwIPKzf/1ROCB5OWAQJOBB5QsBAAQGBf5FlB5tVvoPMNQO9B4daB5O+B4aPIqtX35tBB5M1qtbB4i/HB4WvOAjvGB4IpBIQIADB46aBB4t8B49VB54AFB6zrB1Wm1RTBywPI0oPCeQOaB4+ltOlq2V02VqwPOrQPIF5w/PFQIvPB71pH4uqX8g"))

[espruino-discuss2]

Posted at 2021-12-17 by @gfwilliams

@hughb I just edited your post as it was telling folks do to slighty the wrong thing. Icons need to be 48x48px for the app loader

---

Posted at 2021-12-17 by HughB

Oops. No problem.

---

Posted at 2025-01-26 by mbork

3 years later: this didn't work for me, but when I used "Output as: Image String", it did. Is it only me?

---

Posted at 2025-01-27 by @gfwilliams

Thanks - I think there was a typo in the original post - it said "Object String" when there is no such option - he meant "Image String" which is what you found worked? I've just edited it.