full-screen background image

Posted on
  • Good morning!

    This morning I had some spare time with my Bangle.js and I managed to upload and display a bitmap with 240x240 pixels and 16-bit colours.

    Upload takes a while, but I wrote a web form, that does all the hard stuff for you. Displaying the whole bitmap takes approx. 2.2 secs on my Bangle.js.

    Now I have to find out, how to write only parts of such an image in order to make it fast enough to be used as a clock background...

    Stay tuned...

    P.S.: yes, sorry, those web pages are still in German - trouble with files simply took far more time than I expected. Sorry - but I haven't forgotten all those enthusiasts without thorough knowledge of the German language...

  • Nice! if you're after a bit more performance you might find it's better to write separate binary files for each 'slice' of the image. You can then load them directly without having to do atob.

    Not sure if you spotted it but there is already a way to get slices of image as well: https://github.com/espruino/EspruinoWebT­ools/blob/master/examples/imageconverter­.html#L80

  • Ah,

    thanks for the hints! Let me see, what I can do with this info!

  • Wow, great job !!
    BTW, in an application I added translation and read text out in some languages.
    It would take some time to seperate everything from my application.
    If you are interested, please let me know (auch in deutsch ;-)

  • @JumJum

    thanks for the offer, but my problem is not the translation itself (DeepL already does a pretty good 80% translation), but to isolate text from markup before translation and adding markup properly afterwards).

    I'm working on it, but I only have little time...

  • @Andreas_Rozek
    I couldn't resist, see your page with translation by Google.
    As far as I can see, all formatting is ok, at least with chrome browser.
    Lines 516, 522 and 943 to 953, are added to your html.
    Translation itself is google like (Schachtelsätze sind furchtbar)
    Far away from being perfect, but much better than nothing.

  • Very interesting...

    although the translation itself is horrible, it may indeed be "better than nothing".

    It is impressive to see how far Google gets with keeping the formatting - although I have not looked into the details with all my annotations, embedded code etc. It won't help me anyway as my pages are created automatically using my own kind of CMS and I will have to translate all the building block individually.

    Nevertheless, until then people may help themselves using this translator.

    Thanks for this hint!

  • Honestly, I had this idea before to use a full image as clock face. Since lack of actual Bangle device and a quick learning about low RAM took me down to drop the idea.

    After some time this idea again activated in my mind with a bit difference. So this time I split the 240x240 image into 16 slices with dimensions of 60x60 each and converted image to binary using image converter tool.

    Now the idea is to save each binary image file to storage, and draw all image once when face is initialized. 16 images will help to identify the segment of display to be updated on each minute and update only those image which is effected by the clock hands to be re-print.

    1 Attachment

    • bg - Copy.jpg
  • 16 images are just a max slices required for an asymmetric watch face, but the actual numbers of images can be reduces by re-using the same image on different screen position.

    Like corner images are same but just filliped and rotated. So one saved image can be used to get 4 different ways.

    It will save some space still having 16 segments of display..

  • Sun 2020.01.19

    Nicely done @Abhinav and a code block for others to emulate too! I have a feeling your technique will get used a lot!!

  • Thanks @Robin, I am still learning the BangleJs ecosystem. :)

  • Wow, nice! Just looking at that and your suggestion of rotating by 90 degrees each time, I guess there's even the possibility of having a small radial slice and rotating by 30 degrees each time?

    In terms of the big image, I added some code last week which should allow one single big image to be written to flash and rendered from there - but I've still got to add some tools to let you actually upload that image (and right now it won't work in the emulator because there is no concept of flash storage).

  • Thanks @Gordon!!

    Yes possibilities are endless, however

    rotating by 90 degrees each time, I guess there's even the possibility of having a small radial slice and rotating by 30 degrees each time

    I struggled to render the image with rotation if rotation angle is less. It does not render and sometimes result is a distorted image. See attachment.

    I added some code last week which should allow one single big image to be written to flash and rendered from there

    This is great!! Where I can find this in source code?

    Another thing that I really like to have fake storage in emulator. so that read and write can be done via chrome storage that emulate the device storage. Is it possible??

    1 Attachment

    • rotation_issue.png
  • Mon 2020.01.20

    'I added some code last week . . . .'
    'Where I can find this in source code?'

    Until Gordon is able to reply with a specific link, unless that reference was specific for the emulator which is in#2 post;

    the running list of updates


    location of all source code files


    It is much easier to navigate the source using VSCode and I had been given a tremendous amount of assistance getting started. Took me a bit to get going as can be seen from this thread, which may be used as an overview, should that choice be desired.


  • When you specify a rotation, the image starts getting centered in the middle - so all you need to do is use some of the code used in other watchfaces with Math.sin/cos to change the x and y coordinates. Rotation is in radians not degrees too: https://banglejs.com/reference#l_Graphic­s_drawImage

    Faking flash storage in the emulator is possible, but it's low priority for me right now since there's more work to do to actually make the emulator 'remember'. Right now I'm interested in actually getting the real watch working well ready for next month :)

    big image ... Where I can find this in source code?

    It should 'just work'. If you write an image into flash memory as an 'image string' (I'm working on some tools to do this nicely in the IDE) then you can just do g.drawImage(require("Storage").read("img­")) and it'll do it

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

full-screen background image

Posted by Avatar for Andreas_Rozek @Andreas_Rozek