Converting app to Bangle.js 2

Posted on
  • Is there a guide to converting an app from version 1 to version 2? Or is it just
    Is the old vector font available for the watch's version 2?

  • There isn't a specific tutorial, but it is suggested that you try and use the Layout module which is documented at­t

    Everything should be available (inc the vector font) that's in Bangle.js 1, but there are a few extras (eg more fonts) in Bangle.js 2

  • Is there a way to detect whether the watch is a v1 or v2 from code?

    Background: I plan on tweaking the Numerals clock face, because on the Bangle2 the colors used look weak compared to the Bangle1. So I would like to choose the color palette depending on the watch type.

    EDIT: I guess you could use g.getWidth() to see if its either 176 (Bangle2) or 240 (Bangle1) right?

  • It's covered in the tutorials (like "First app"):

    Returns 1 or 2 respectively.

    But checking screen width would work too...

  • if (process.env.HWVERSION == 1)

  • I've looked at the layout and the tutorial for Bangle.js version 2. The main thing I need is to convert two toggle switches that in version 1 were BTN4 and BTN5. The toggle functions aren't changing; just the new location of the switches needs to be specified. In version 1, it was only this:

    setWatch(function(){ toggleTimeDigits(); }, BTN4, {repeat:true});
    setWatch(function(){ toggleDateFormat(); }, BTN5, {repeat:true});

    The watch was coded by someone who's left the project. Being a non-coder, I can't figure out the equivalent syntax for version 2. If anyone's interested in helping, I'll be grateful.

  • You could use the Bangle.touch function which would work fine on both watches:­le_touch

    Bangle.on('touch', function(button, xy) { 
      if (button==1) toggleTimeDigits();
      if (button==2) toggleDateFormat();
  • If Gordons respond is not enough, I will have time on my hand in ~1-2 weeks, I can help with the code.

  • Thank you. When you're available, let's communicate again.

    I suppose I could put the two toggles into Settings. May be more complicated.

  • About converting apps, there used to be a "lazy watch" on Bjs1. It was brilliant in my opinion, and got all the people around me talking discussing this watch that has this unique feature. I can't find it anymore, anyone interested in porting it ?

  • @Fteacher I ran the Lazy Clock through the Bangle 2 emulator and it looks fine... From what I can see after a quick look, it's just the button logic that needs an update. If no-one else does I might take a stab at it myself in the near future.

  • @johan_m_o You're much welcome to do so :)) ! I don't know anything about coding and I'm so-so interested in learning now.

  • Trying to convert an app for watch version 2, I get this set of errors:

    Uncaught Error: setLCDMode is unsupported on this device
    at line 5 col 13 in .boot1
    global.BTN1=BTN3; global.BTN3=_;

    at line 41 col 19 in .bootcde

    While I can get rid of the second instance at line 41, I don't know where .boot1 is and so can't see the correct line 5 or find that first error.

    Any suggestion?

  • What's the app? It sounds like some code is being added to yourapp.boot.js which doesn't work on bangle.js 2.

  • The dozenal time watch, sometimes called Doztime. Sorry, I don't know where yourapp.boot.js is found… (or myapp.boot.js) — not finding much yet in documentation, although it seems .boot1 etc. are added to code by Espruino under most conditions.

    What to do about that, I don't know.

    I've discovered that I can actually send the code for my watch to bangle.js 2, and I've solved most of its problems. So are the above documented bugs affecting only the emulator?

  • So taking the doztime code from github and uploading to the emulator as Bangle2 (or to the Bangle2 itself) I get the following errors:

    Uncaught Error: Function "sleep" not found!
     at line 4 col 45 in .boot0
    if (!NRF.getSecurityStatus().connected) NRF.sleep();
    >Uncaught Error: setLCDMode is unsupported on this device
     at line 1 col 19
    >Uncaught ReferenceError: "BTN2" is not defined
     at line 1 col 48
    ... Bangle.showLauncher(); }, BTN2, { repeat: false, edge: "fal...
    >Uncaught ReferenceError: "BTN3" is not defined
     at line 1 col 40
    setWatch(function(){ modeWeather(); }, BTN3, {repeat:true});
    >Uncaught ReferenceError: "BTN4" is not defined
     at line 1 col 45
    ...(){ toggleTimeDigits(); }, BTN4, {repeat:true});
    >Uncaught ReferenceError: "BTN5" is not defined
     at line 1 col 45
    ...(){ toggleDateFormat(); }, BTN5, {repeat:true});

    So NRF and setLCDMode are to be expected because the emulator does not have NRF and the Bangle2 does not support LCD modes.

    And the others are related to the button definitions that are not supported on the Bangle2 either.

    But you could work around with that probably by using above code from Gordon.

    Not sure why you are seeing different errors. Maybe some browser caching issue?

  • Thanks for that. I removed the invalid button references before starting on bangle.js 2. I've not seen the NRF error. I did insert Gordon's code, which works fine, and tweaked all the sizes and positions. I don't see the LCDMode error on uploading to the watch from the computer, only in the emulator itself.

    Next step will be to see if the watch uploads from one of the bangle.js app loaders. Not a great photo, and the colors remain a small issue, but it seems to work now:

    1 Attachment

    • Bangle.js 2.jpg
  • Currently the above watch screen goes blank 5 seconds after the lock icon comes on. Is there a way to write a line of code to keep the bangle.js 2 on (in screen lock mode) and, of course, the clock still running? I tried importing some code from the default Anton watch face (which stays on), without success so far, possibly because of the way my whole watch code is written.

    But I have to disturb the code as little as possible, because its creator left the project, and I'm no coder.

  • A little late in the game, I've seen that 3-bit colour doesn't distinguish orange from yellow. With some flexibility (shades of the colours don't matter), I need the six rainbow colours for the only app I've produced, which works fine on bangle.js 1, with its better colour.

    Using 0.5 for the colours instead of only 1 or 0 for RGB on bangle.js 2 with g.setBgColor seems to make a difference. Am I dreaming?

  • You aren't dreaming, the Bangle.js will use dithering to emulate colors that it can't display. 0.5 values will result in a very fine checkerboard pattern.

  • Buried up there is a question about the (simplest) way to stop a clock display from disappearing and keep it running. I've probably now solved that for this watch. Testing it.

    Thanks to all those who commented.

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

Converting app to Bangle.js 2

Posted by Avatar for Numerist @Numerist