-
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.
-
-
Well,
showMenu
may use less resources and may be sufficient for navigation and selecting single values out of a short list - but as soon as configuration becomes more complex (and this already begins with the choice of a specific color) or has to offer "Ok" and "Cancel" or even "Preview" opportunities (rather than just a simple "Back"), the menu system becomes really cumbersome to operate. Thats why I started writing components which look familiar for "normal" users.Test person is my wife which does not care at all about technical constraints and efforts, but just wants a system like the Bangle.js to be easily usable - and she currently likes using a Bangle.js 2 although she did not wear any wrist watch for many years
-
Hmm, have I already mentioned that my wife loves the rainbow version? She didn't wear wrist watches for many years - until now: now she wears a Bangle.js 2 because I can customize it for her personal needs!
Thanks again for the second incarnation of Bangle.js! It was the right decision to speed graphics up - even at the cost of a decreased space and color resolution!
-
-
-
-
-
-
I just published a very first (preview) version of a "configurable analog clock" with various faces, hands and colors to choose from. You have the choice between
- 4 different clock faces and
- 3 different clock hands (optionally with or without second hands)
Additionally, you may use the currently configured global theme or configure your own colors for clock fore- and background and second hands.
Just swipe up or down to switch from clock display to the first configuration screen and continue from there.
Chosen settings will be written to the Bangle.js's flash memory and restored whenever the clock is started again.
Right now, you'll find in my personal app loader only - just look for "Configurable Analog Clock" - because I still have the problem that widgets may appear on a configuration screen (which is a bit annoying but should not affect operation in any way)
This clock also acts as an example for the building blocks found in my GitHub repository
Any feedback is welcome!
- 4 different clock faces and
-
As mentioned yesterday, I'm currently developing an analog clock with several configuration screens.
Widgets should only be shown while the clock is running - and hidden while any configuration screen is active. I already figured out how to (temporarily) let
Bangle.appRect
cover the whole screen, and (during configuration) I also do not actively draw any widgets.However, from time to time, some widgets still appear on the screen - presumably because that widget wants to inform about some changes (e.g., the battery widget).
How do I temporarily prevent widgets from being shown?
-
I've (hopefully) solved my problem with the following hack:
let ScreenWidth = g.getWidth(); let ScreenHeight = g.getHeight(); let AppRect = Bangle.appRect; Bangle.appRect = { x:0,y:0, w:ScreenWidth,h:ScreenHeight, x2:ScreenWidth-1,y2:ScreenHeight-1 };
Before entering a configuration screen, I run the code mentioned above - when leaving it, I simply restore
Bangle.appRect
fromAppRect
.Important note: Bangle.appRect must be set to fullscreen again whenever a new layout shall be calculated/rendered
-
I'm currently developing a clock with several settings screens.
While the clock is running, widgets should be respected (and the clock face shrunken accordingly), but the settings screens (based on the layout library) should cover the whole screen area.
Unfortunately however, part of the screen appears to not be available (see screenshot). How can I avoid this behaviour?
-
-
Well, I know that the Bangle.js 2 has plenty of memory and performance (I did not yet reach its limits).
However, it might be wise to keep modules small in order to let programmers fine tune their imports (I don't expect any "tree shaking" from your Web IDE, am I right?).
My idea is to have a "LayoutEx" module for my components (or even separate modules for each individual control) which "sits" on top of the layout library. This reduces the memory foot print for programmers that do not need my components (or not all of them)
-
I see.
On the other hand, I usually preset the (minimum) size of a control (e.g., in order to keep them equal across rows/columns) and then want the text to be properly aligned within its cell. Thats what my "Label" control (and all the others) do.
Thus, don't worry right now (perhaps update docs, at least) - I already have a "workaround"
-
-
-
I just wrote a little "program" to find out which fonts on a Bangle.js 2 will be reported properly and which will not:
print('which fonts will not properly be reported?'); print(''); let FontList = g.getFonts(); for (let i = 0, l = FontList.length; i < l; i++) { let Font = FontList[i]; g.setFont(Font); if (g.getFont() === Font) { print('== set: "' + Font + '", got "' + Font + '"'); } else { print('<> set: "' + Font + '", got "' + g.getFont() + '"'); } }
Outcome:
>which fonts will not properly be reported? > >== set: "4x6", got "4x6" == set: "6x8", got "6x8" <> set: "12x20", got "Custom" <> set: "6x15", got "Custom" == set: "Vector", got "Vector" >
-
-
-
can anybody explain the following behaviour (entered into the left-hand side of the Web IDE):
>g.setFont12x20(); =Graphics: { flip: function () { [native code] }, drawRoundedRect: function (x1,y1,x2,y2,r) { ... }, fillRoundedRect: function (x1,y1,x2,y2,r) { ... } } >g.getFont(); ="Custom"
I have a similar problem deep inside a program which crashes with
Uncaught Error: Font bitmap must be a String at line 1 col 1140 ...t!=null){g.setFont(Details.font);}g.setFontAlign(xAlignment,yAli...
In
Details.font
I've stored a previously configured font, obtained usingg.getFont()
(which returnedCustom
, although the font was set usingg.setFont12x20()
before) -
I already thought of roman numerals - but did not yet introduce them because that would have required an additional configuration screen. It's on my list of possible extensions, though