Widgets on black backgrounds look ugly...

I'm currently developing clock faces with a black background.

Since clocks should respect any installed widgets, my clock also draws them - however, most widgets seem to expect a white background and look ugly (if not unrecognizable) on a black one.

Does anybody have an idea how to enhance the look of such widgets?

for those interested: currently, I'm just adding g.setBgColor(1,1,1); in front of my invocation of Bangle.drawWidgets in order to let the internal g.clearRect of that function whiten the actually occupied widget areas only.

This approach still looks ugly, but makes widgets recognizable again.

You could adjust the widgets code so they make proper use of g.theme?

Well, basically, the widget authors should perhaps respect g.theme, if possible...

For those interested: while playing around with theming, I made the following theme display

  let ScreenWidth  = g.getWidth(),  CenterX = ScreenWidth/2;
  let ScreenHeight = g.getHeight();

  g.reset();                                // automatically loads current theme
  g.clearRect(0,0, ScreenWidth,ScreenHeight);

  g.setFont12x20();

  g.setFontAlign(0,-1);
  g.drawString('current Theme', CenterX,0);

  g.setFontAlign(-1,-1);

  let Theme = g.theme;

  g.setColor(Theme.fg);
    g.drawString('fg',  0,35);
    g.drawString('bg',  CenterX,35);
    g.drawString('fg2', 0,70);
    g.drawString('bg2', CenterX,70);
    g.drawString('fgH', 0,105);
    g.drawString('bgH', CenterX,105);
    g.drawString('dark', 0,140);

  g.setColor(Theme.fg); g.fillRect(40,35, 70,55);

  g.setColor(Theme.fg); g.drawRect(CenterX+39,34, CenterX+71,56);
  g.setColor(Theme.bg); g.fillRect(CenterX+40,35, CenterX+70,55);

  g.setColor(Theme.fg2); g.fillRect(40,70, 70,90);

  g.setColor(Theme.fg);  g.drawRect(CenterX+39,69, CenterX+71,91);
  g.setColor(Theme.bg2); g.fillRect(CenterX+40,70, CenterX+70,90);

  g.setColor(Theme.fgH); g.fillRect(40,105, 70,125);

  g.setColor(Theme.fg);  g.drawRect(CenterX+39,104, CenterX+71,126);
  g.setColor(Theme.bgH); g.fillRect(CenterX+40,105, CenterX+70,125);

  g.setColor(Theme.fg); g.drawString(Theme.dark ? 'yes' : 'no', 50,140);

1 Attachment

Which widgets look bad, can you supply screens hots.

See attached screenshot as an example - I'd definitely prefer

• a white lock icon,
  
• a battery icon with black and white exchanged, and
  
• a version display with white text on black background
  
  

Keep in mind that, e.g., the lock icon can only be recognized because I still draw the expected white background - if I would use a bitmap as background, I would not clear the widgets area first...

1 Attachment

I installed all 3 widgets, set the theme to the dark theme and ran Anton Clock on my Bangle 2.

Something not right in the example you have displayed.
Its possible its the code you are using.

Is your screenshot from code loaded on your Bangle 2 or via the Emulator ?
Can you show your code - it could be the order in which you have set the theme / drawn the widgets etc.

The three widgets displayed Lock, Battery Level and Firmware ID widgets all adjust their backgrounds based on what whether the light or dark theme have been setup through Settings / System / Theme.

It is arguable that both the Bluetooth ID and Firmware ID widgets would be better using g.theme.fg instead of the fixed cyan colour they have been set to. That text does not work well on a black background. But the battery and Lock widgets are working as I would expect.

I think what you might have done is possibly -- set to Light Theme, through Settings/System/Theme - but in your app cleared the whole screen area to a black background, the widgets have then drawn themselves using the light theme.

1 Attachment

Worth having a look at bold clock as it works with both the light and dark themes.
And the widgets adjust accordingly without having to be managed by the clock or app.

https://github.com/espruino/BangleApps/b­lob/master/apps/boldclk/bold_clock.js

2 Attachments

a battery icon with black and white exchanged

I did a version of the battery widget called widbata that works just like that.
A lot of the screenshots I put in posts feature it :)

@Andreas_Rozek - not sure if you saw this reply or if it is still relevant.

oh, thanks for the reminder - yes, I already saw it, but holidays and the weekend made it difficult to find some time to investigate (family has priority, you know).

I'll analyze widget drawing behaviour a.s.a.p., however - nevertheless, thanks for your effort!

So.... ideally I think you'd just honour the theme the user requested with g.theme when drawing your clock.

HOWEVER if you really don't want to do that, you can use setTheme to set the theme for just your app, in which case widgets will then honour that. See 'Wave Clock' which has a purple background for an example :)