Moving widgets somewhere other than the top

I have an app that has a round face. I've shifted it down to make space for the widgets at the top of the screen. However, if I were able to move the widgets inside the circle, I'd be able to take full advantage of the height of the screen. Is there any way to do that, or might it be a feature in the future?

Thanks.

P.S.: I love hacking my Bangle. It's such a pleasant programming experience, without a lot of unnecessary complexity. It's possible to write interesting programs in just a few kilobytes of RAM. It brings me back to the days of my TRS-80, but with JavaScript instead of Z80 assembly language!

Thanks - glad you're enjoying it!

Yes, it's totally possible to change the widget positions!

First method is just to use require("widget_utils").swipeOn() which will allow you to swipe the widgets down from the top. It's used in a few clocks now and is nice and easy.

Second method is just to change the 'area' of widgets and set the position manually. You could do this once, but some widgets start off with width=0 and change (maybe when a message is received).

drawWidgets itself looks like https://github.com/espruino/Espruino/blob/master/libs/js/banglejs/Bangle_drawWidgets_Q3.js so if you don't have the area as tl/tr/bl/br it'll skip setting a position but will render them anyway. All you need to do is add your own drawWidgets implementation that runs first and sets the position up yourself.

For example:

Bangle.loadWidgets();

Bangle.drawWidgets = (oldDrawWidgets => {
  y = 0;
  for (var wd of WIDGETS) {
    wd.area="_";
    if (wd.width) {
      wd.y = y;
      wd.x = 0;
      y+=24;
    }
  }
  oldDrawWidgets();
})(Bangle.drawWidgets);

Bangle.drawWidgets();

Cool. But I tried require("widget_utils").swipeOn(); and got this:

>Uncaught Error: Module widget_utils not found

That happened both in the emulator and on the watch. The same thing happened when I tried loading the Pebble watch, which uses that API, through the IDE.

I hope I'm not missing something obvious.

I've followed the instructions on uploading modules, but I get Uncaught ReferenceError: "exports" is not defined when I try that with widget_utils.js.

I'm trying the code snippet you suggested instead. That will give me more control.

Thanks again.

I've submitted a pull request (#2305) that changes drawWidgets to clear only the area actually occupied by widgets rather than the entire top and bottom twenty-four pixels.

but I get Uncaught ReferenceError: "exports" is not defined

That's fine (because it is trying to execute the module after upload) but if you now try running code, it should work.

... or this is maybe the better option: https://github.com/espruino/BangleApps/blob/master/modules/README.md#change-the-web-ide-search-path-to-include-banglejs-modules

Thanks - I saw https://github.com/espruino/Espruino/pull/2305 but I'm afraid I don't think that's going to be an easy one to put in, because it will likely cause corruption in a lot of other apps.

Best bet is if you want to do that, in your clock, overwrite Bangle.drawWidgets with your code - then those changes will apply only for your clock, where it won't cause problems for other apps

You're absolutely right, of course. I've modified my own app with a modified drawWidgets, as you suggest. That's working nicely. In my case, having the widgets clear only the area that they use is great because it leaves the space between them for the top of my clock face, which can now use the full screen area. As long as I don't install too many widgets, there won't be any overlap.

Great! Having seen that PR it did make me think that it probably would be preferable to not clear the background of the widget bar at all - since I think nearly every widget already clears the background itself anyway.

... but as you saw I think changing it and then testing it didn't break stuff could be quite a big undertaking :)

it probably would be preferable to not clear the background of the widget bar at all - since I think nearly every widget already clears the background itself anyway.

Things would go Wrong when widgets are hidden/removed/resized though.

Yes, although when widgets like 'back' remove themselves they clear where they were already. I'm sure there are plenty of others that don't though.

It's probably one of those things that's far more effort to get working nicely than it is a benefit.

What about allowing the widget configuration from the apploader page?

As solutions I can imagine:

• Modifying through regexp following line of code before uploading
  WIDGETS["wdclkbttm"]={area:"br",...

• Implementing on default bangle system code/function from Widget Editor

1 Attachment

What about allowing the widget configuration from the apploader page?

What's wrong with the existing 'Widget Editor' app? Doesn't this do that already?

I guess someone could just add a configuration page to BangleApps for that though?

I am aware of 'Widget Editor' app and it works perfectly but probably many users are not aware of the existence of the app.

I think for new users the best is to have the functionality available by default.

Wow, I hadn't heard of the Widget Editor app. That is a great idea.

What I ended up doing was to define my own Bangle.drawWidgets that makes widgets clear only their own space. Then I made my watch face use the entire display. Since it's circular, there's still room at the corners. All the widgets that I use fit in that space without modification, so I'm done. But with Widget Editor, it will be possible to squeeze even more widgets onto the screen.

Thanks.

@dapgo I'm afraid I don't have the time to completely reimplement something like this that already exists and works fine. I did add a note to the wiki at https://github.com/espruino/BangleApps/wiki though so maybe more people will become aware of it