Clock Info -> extra data on the clock face

[gfwilliams]

I'm seeing quite a few clocks now that provide extra data on the watch face - like steps or weather. Often there may even be an existing clock that is then cloned to make it show that extra data - and then the clock's code is duplicated, as well as the code to show the data.

It'd be nice to:

• make the process of adding extra data to clock faces easier and more flexible
• reduce the code duplication

The idea of widgets was to display this kind of data, but right now they're relegated to a small 24px strip at the top and bottom of the screen.

We also have clock_info now which is a really neat system that allows a clock to display information that can be scrolled through (and added to with plugins): https://github.com/espruino/BangleApps/blob/master/modules/clock_info.js

I'm open to ideas here - just thinking aloud really, but:

• We have tl,tr,bl,br widget areas - we could have a new widget area clk or something, and then a library that allowed those widgets to be displayed wherever made sense on the clock face. Widgets would then need to look at this.w and this.h to figure out how much space they had available.
  • Downside is clock widgets would get loaded (and then ignored) when there wasn't a clock showing
• Maybe we have another library like clock_info that handles non-interactive clock widgets?
• Or maybe these clocks should just use clock_info? It seems in many cases being able to swipe through different info would actually be a big improvement
  • but then what if >1 type of info was to be displayed? Maybe we could allow a tap to select which one swipes on the screen would affect
  • currently clock_info leaves user-interaction up to the app, but this could be part of the library too

[gfwilliams]

... also if using clock_info it should probably remember what setting it was scrolled to last time the clock was shown

[gfwilliams]

Ok, just added something... So as an example:

var clockInfoMenu = require("clock_info").addInteractive(require("clock_info").load(), (itm, info) => {
  var x = 20, y = 20, w=80, h=48;
  g.reset().clearRect(x,y,x+w-1,y+h-1);
  g.drawRect(x,y,x+w-1,y+h-1); // debug - just to show where we are
  g.drawImage(info.img, x+w/2-12,y+4);
  g.setFont("6x8:2").setFontAlign(0,0).drawString(info.text, x+w/2,y+36);
});
// then when clock 'unloads':
clockInfoMenu.remove();
delete clockInfoMenu;

So this should be really easy to add to clock faces now...

[gfwilliams]

@peerdavid any thoughts on this? How does this fit with what you're doing with clock_info at the moment?

I think we should probably do with .focus/.unfocus methods exported, so clocks could potentially have two of these and then allow them to be tapped on to select them.

... and maybe it should store the currently shown options in a settings file

[thyttan]

@gfwilliams When clock_info and these things crystallize a bit, should something be appended to the Clock Faces guide? If I get to learning it first I could maybe contribute to that later.

[gfwilliams]

should something be appended to the Clock Faces guide?

Yes, absolutely! And it might be worth mentioning the clock module too

[peerdavid]

Hi @gfwilliams,

sry forgot to answer :/ Honestly, I'm not sure if I understood it correctly, but the addInteractive function allows me to dynamically add clock infos somewhere in my clocks when those are selected?

[gfwilliams]

It basically abstracts the user interaction away, so you call it and then all you have to worry about is drawing the information. Swiping on the watch screen then cycles through all the info.

... having said that it doesn't handle calling item.run but I reckon that would be pretty easy.

I need to actually add it to some clock faces now, but it's just a few lines to do now.

[peerdavid]

Ohhh yea thats pretty cool, thank you! I will later on update my clocks :D

[gfwilliams]

There is now an app which adds sunrise/sunset to this, if someone wants to see how to add their own clockinfo-only app: https://github.com/espruino/BangleApps/tree/master/apps/clkinfosunrise

Also tapping on an info item will call the run method if it exists, and it is now possible to have more than one clock_info on screen at once:

let clockInfoDraw = (itm, info, options) => {
  g.reset().setBgColor(options.bg).setColor(options.fg).clearRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1);
  if (options.focus) g.drawRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1)
  var midx = options.x+options.w/2;
  g.drawImage(info.img, midx-12,options.y);
  g.setFont("6x15").setFontAlign(0,-1).drawString(info.text, midx,options.y+26);
};
let clockInfoItems = require("clock_info").load();
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:126, y:24, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg });
let clockInfoMenu2 = require("clock_info").addInteractive(clockInfoItems, { x:0, y:120, w:50, h:40, draw : clockInfoDraw, bg : bgColor, fg : g.theme.bg});

You can then tap to focus, and swipes change the focused item - which is also remembered next time you load the clock.

I'll update slopeclockpp to use it in a minute