Bangle.js 2: Color wheel #3605
Replies: 27 comments
-
Posted at 2021-12-25 by Andreas_Rozek ...and here is the same in a touchable version:
Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-25 by Andreas_Rozek ...now available on my personal App Loader (look for "ColorWheel") and - hopefully - soon on the official one as well. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-25 by jimr1603 Awesome. If there was a props button I'd be spamming it - I could not get my head around 3 bit colour when I cracked open my first app. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-26 by Andreas_Rozek I've started documenting my Bangle.js 2 "activities" on GitHub - this may be a better place for small code snippets than this forum... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-30 by fanoushs-punching-bag This forum is a very good place to get attention of the community though, I liked seeing this idea :) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-30 by HughB I like this version. Note you only need 3 hex digits. #8F0 instead of #80FF00. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-30 by HughB Are you going to do a pull request to the main repository? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by Andreas_Rozek Yes, I know, but I prefer the long notation. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by Andreas_Rozek It's already available in my personal app store - just look for the tool "Color Wheel" - and will hopefully be merged as soon as Gordon will return |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by Serj It's interesting to watch the experiments! It's a good idea to document them ;) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by HughB @Andreas_Rozek - I tried out the colour wheel from your loader. My only comments would be I think the design would look more attractive with a black centre and white text for the Hex digits. The advantage of going to a 3 digits hex format would be that the text can be larger and easier to read. I also tried out your various analogue clocks. Really good. I like the the fact that you have done a really basic one. I can see you have been really busy. I'm really interested to see if its possible to get the hollow hands or altimeter hands look and hands that have a bolt in the middle.Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by Andreas_Rozek Hollow hands are trivial: simply replace However, I'll probably won't find the time to implement them today/this year - you'll have to wait til tomorrow/next year. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by Andreas_Rozek I found a few minutes and just wrote rounded and hollow hands - code and documentation will follow by tomorrowAttachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by HughB Hi @Andreas_Rozek - thanks for sharing your code and posts. I'm really enjoying them and find them useful. The example hands are a bit more complicated than simple rectangles. The ends are rounded, they start with short spindles etc. The resulting outline by changing to drawPoly will be very weedy. But I am sure it is possible with a lot of tinkering and trial and error with two polygons, one for the ouside and another to hollow it out. I'll probably have a go at this at some point, but suspect its about 4-8 hours of trial and error. But I think it will be worth doing inthe long run as it will enable better looking clocks. I had a play with your simple_clock code - many thanks for sharing. I dont thing you need to draw the widgets. I managed to get the widgets to draw and take up the current theme correctly using the code snippets below.
Note Bangle.appRect gives you the usable space for the app. Here I am just taking into account if there are widgets on the top, but the approach could be adjusted for the bottom as well taking into account Bangle.appRect.h. Bangle.appRect adjusts depending on if widgets are displayed at the top and bottom - I dont think it is documented - it was introduced in one of the threads a while back. In the draw() function I g.fillRect(Bangle.appRect); And leave the drawing of the widgets to the widgets.
And at the end I have.
The rest of the code is the same as yours but without the 80 or so lines that form updateClockFaceSize () and the code to override Bangle.drawWidgets(). |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-31 by HughB Wow - you've been busy. |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by Andreas_Rozek Good morning (and all the best for 2022)! As promised, I've (fine tuned what I wrote yesterday evening and) published the sources for rounded and hollow hands at the usual place (i.e., on GitHub) The new implementations now also contain some "bolts" in the center. I really appreciate the sheer performance of the new Bangle.js 2 compared to the first incarnation of that watch!Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by Andreas_Rozek Concerning your remarks: I'm sorry, it's been my fault: I did not remember that I published a simplified version of the simple hands only (and that version drew rectangles rather than rounded rectangles) Concerning |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by Andreas_Rozek don't worry - it will soon come to an end when lecture time starts again... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by Andreas_Rozek The "rounded hands" are now those drawn by my "minimal clock" (see my personal app store) |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by myownself Thank goodness, you're having all the fun and making it easy for the rest of us! :D |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by HughB Great work @Andreas_Rozek, very nice. I'm looking forward to your pull requests.
Shame about the lectures. Assume you are doing a CS degree ? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by HughB
Sure but in practice its not making very much difference. In the example below I am using the Lock, Pedometer, and Battery Widget (themed). I printed out the values of CentreX, CentreY, outerRadius in both versions and the difference is less than 1 pixel. The presence of one widget on the top line results in the top of the 12 being written at Y = 23.9. The advantage of your code is that it will adjust as a person's config changes as they go from no widgets, some top widgets, some bottom widgets etc. So no matter what the config is, your approach will always attempt to maximise the size of the clock face. My working example is at: Attachments: |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by Andreas_Rozek Well,
not to misunderstand each other: I give lectures (I made my diploma in physics more than three decades ago). And right now (i.e. during the Corona pandemic), Arduinos (and Espruinos), RasPis and Bangle.js's help me motivating my students and showing them what they could do if they only would have the courage and start doing... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by Andreas_Rozek Personally, I use very few widgets only - and in such a case, my code may probably reserve the whole screen for an (analog) clock |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-01 by HughB
I have always found people who has done physics or maths make exceptionally good software developers. Your bolted hands are a thing of beauty. You have significantly raised the bar of what is possible. Ccould you turn your students onto improving the step counter ? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-02 by Andreas_Rozek Well, I could - but don't expect too much: homeschooling during the Corona lockdown had recognizable (negative) effects on the "intellectual performance" of many students (albeit not all of them, some even benefited!). My presentations therefore shall primarily motivate students to work on and eliminate their knowledge gaps and give beginners (that decided to study CS although they never did any programming before) a target they could pursue without getting lost. Times are difficult right now... |
Beta Was this translation helpful? Give feedback.
-
Posted at 2022-01-06 by Andreas_Rozek although its a bit late: see attached screenshot for an example why I don't use
|
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-25 by Andreas_Rozek
In the last few days, the thread Graphics Color questions has been hijacked for several small example programs related to several..."graphics color questions".
In order to simplify finding more specific solutions, I've started a new thread for the following example, namely:
a small color wheel using colors with "full" (0 and 1) and "half" (0.5) values
Hopefully it will help you finding proper good-looking colors
Attachments:
Beta Was this translation helpful? Give feedback.
All reactions