For those interested: I have a small program for you which you may use to fine tune the colors for the colored clock face:
let ScreenWidth = g.getWidth(), CenterX = ScreenWidth/2;
let ScreenHeight = g.getHeight(), CenterY = ScreenHeight/2;
let outerRadius = Math.min(CenterX,CenterY) * 0.9;
let innerRadius = Math.min(CenterX,CenterY) * 0.8 - 10;
let sin = Math.sin, cos = Math.cos;
let twoPi = 2*Math.PI;
//g.setTheme({ bg:'#FFFFFF', dark:false }); // use whichever theme you prefer
g.setTheme({ bg:'#000000', dark:true });
g.clear(true); // also loads current theme
let dark = g.theme.dark;
let Saturations = [0.8,1.0,1.0,1.0,1.0,1.0,1.0,0.9,0.7,0.7,0.9,0.9];
let Brightnesses = [1.0,0.9,0.6,0.6,0.8,0.8,0.7,1.0,1.0,1.0,1.0,1.0,];
for (let i = 0; i < 60; i++) {
let Phi = i * twoPi/60;
let j = Math.floor(i / 5);
let Saturation = (dark ? Saturations[j] : 1.0);
let Brightness = (dark ? 1.0 : Brightnesses[j]);
let x = CenterX + outerRadius * sin(Phi);
let y = CenterY - outerRadius * cos(Phi);
let Color = E.HSBtoRGB(i/60,Saturation,Brightness, true);
g.setColor(Color[0]/255,Color[1]/255,Color[2]/255);
g.fillCircle(x,y, 1);
}
g.setFont('Vector', 22);
g.setFontAlign(0,0);
for (let i = 0; i < 12; i++) {
let Phi = i * twoPi/12;
let Saturation = (dark ? Saturations[i] : 1.0);
let Brightness = (dark ? 1.0 : Brightnesses[i]);
let Radius = innerRadius;
if (i >= 10) { Radius -= 4; }
let x = CenterX + Radius * sin(Phi);
let y = CenterY - Radius * cos(Phi);
let Color = E.HSBtoRGB(i/12,Saturation,Brightness, true);
g.setColor(Color[0]/255,Color[1]/255,Color[2]/255);
g.drawString(i == 0 ? '12' : '' + i, x,y);
}
My idea is to tweak saturation values (in dark mode) or brightness values (in light mode) depending on the current Hue in order to optimize the visual appearance of the clock face. (it is always a trade-off between color and visibility)
For the sake of relevance, you should try this on a real device only - and, perhaps, with backlight switched off. If your results differ from mine, let me know!
In one or two days, I'll then publish an update of the clock with an optimized "colorful" face.
Espruino is a JavaScript interpreter for low-power Microcontrollers. This site is both a support community for Espruino and a place to share what you are working on.
For those interested: I have a small program for you which you may use to fine tune the colors for the colored clock face:
My idea is to tweak saturation values (in dark mode) or brightness values (in light mode) depending on the current Hue in order to optimize the visual appearance of the clock face. (it is always a trade-off between color and visibility)
For the sake of relevance, you should try this on a real device only - and, perhaps, with backlight switched off. If your results differ from mine, let me know!
In one or two days, I'll then publish an update of the clock with an optimized "colorful" face.