Espruino JavaScript
Help with JS please #5892
Unanswered
espruino-discuss2
asked this question in
Bangle.js
Help with JS please
#5892
Replies: 2 comments
-
|
Posted at 2023-04-30 by @thyttan Hi! Really cool clock face idea! 😀 Much can be figured out with:
"g." is the Graphics class, can be read about in the hardware reference. There you can also read about the Date class. Posted at 2023-04-30 by ga Thanks. One question I, am not sure, to display the numbers in varying sizes I need to embed fonts in all sizes I need ? Posted at 2023-04-30 by @andresdju Hi! ("B2? :" is for choosing different sizes for bangle.js and bangle.js 2.) Posted at 2023-04-30 by @thyttan I do reccomend the tutorials for familiarizing yourself with coding for the bangle in a guided step-by-step fashion. I think you'd be hard pressed finding a faster track to getting where you want. They helped me getting started 😉🙂 Posted at 2023-04-30 by ga I dont know, I think the simple clock examples are simple enought to learn from. I decided against the vector font for now since it didnt look so smooth. I havent testet it on tge device yet Attachments: Posted at 2023-04-30 by ga
I decided to only create it fir the Bangle 2 for now. I actually hard coded the screen size, I know its bad style. Posted at 2023-05-01 by @allObjects @ga, looks like your main challenge is switching from environments with theoretically unlimited resources to something that lives on a shoe string budget, almost in evey regard display: did you ever do graphics on a 176x176 pixel, 8 colors per pixel display (11KB graphics memory), like bangle.js2? A bit more graphics resource of 240x240 pixel 64K colors? ...no GPU... memory: 256KB (64KB) RAM - includes 'OS' (OS is standalone JS - or a JS that includes all OS commands) cpu: single core, 64MHz, responsible for just everything that is going on. ...and last but not least: execution runs (mainly) on source interpretatively (now there are some faster options for some parts, and compiled, c and assembly can be mixed in). It is a mind shift... even when coming for a JS past. Good pre-disposition is having worked with the first - viable for general applications - 8-bit micro processors on the market, where you might have the computing capacity defined by 8-bit CPU with mainy 8 bit registers and a few 16- bit ones for adressing memory, 2-4MHz clocked, 32..64 KB RAM, very simple, frugal OS, and sometimes the screen/character display of 24 lines / 80 characters - monochrome - is memory mapped / part of your RAM. OS and Screen in 10KB, rest free for programs with their data. Storage: 80 or 160KB 8" or 5-1/4" floppy... total 'mass' storage addressability: 60/80..16..1200KB (max not even 'lasting' for a single picture taken with the phone... All this said and in mind, it is all just a matter of how smart and targeted/dedicated the implementation is with so much - little - resources. Posted at 2023-05-01 by ga right. My first computer was an Ohio Scuentific Superboard II with I think 2 kB Memory. At the moment however my watch face caculates everything each minute instead of calculating the week only once. Attachments: Posted at 2023-05-01 by @allObjects @ga, looking good. Very interesting approach to make a watch face more alive and injecting analog aspects into digital representation. Regarding calculation intervals: you can actually have multiple events with different timeout times / interval times going, so that the minimum calculations are executed to save power and extend battery life. Same applies for applying changes to the display: update only what is actually required to be updated. Bangle.js2 is already very fast, much faster than Bangle.js. Display size and color depth and how the display driver is communicating with the processor. Using vector fonts is process intensive. May be you can use a bitmap copy process rather than a drawing process, since the number of character you need are very small, and the variation in size is limited (what's the min and max font size for hr and min?). Storage in Flash EEPROM rather than RAM should provide you enough space to do something like that. Checkout out this conversation about setFontCustom bitmap format vs vertical_byte:true - GT24L24A2Y fontchip in F07 fitness tracker Posted at 2023-05-01 by ga I use bitmap fonts now and omitted the scaling, maybe will do this for a different more gimicky watch face. I just good the moon display code working ( I hope, seems to work). The plan for now is to clean up the code and optimize the screen drawing as you suggested, and release it. The other ideas need more time and learning, and I realized that I like a simplistic look better and its also easier to modify when its kept simple. Although onther thought I had is, that a watch that is crammed with info about your upcoming dates may increase stress, maybe its not even a good idea. Heres the work in progress code so far in case someone is interested, does not take the locale into account or DST, and full moon is all white. Posted at 2023-05-02 by ga I cleaned up the code and seperated it into 3 timers. But I ran into a problem I cant solve However, the minutes on screen are only updated one additional time then Posted at 2023-05-02 by @gfwilliams Hi - I just tried this and it looks neat. One thing I can see is you call But after that you don't call it again. I think you really need to copy: and paste it into the end of the |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Posted at 2023-05-02 by ga Thanks, it works now. Will take me a while to finish it, it seems I maybe have to recreate the Moon icons since the license of the font is a bit fuzzy and I cant reach its author. In case someone wants to try heres the code Top line is battery, line below is just a 24 h clock mockup for the sunshine time. You can delete these things and uncomment the part to for the widgets. Attachments: Posted at 2023-05-02 by @allObjects Nice... piece of art! Do you have something that shows the second or half second on certain events, like tapping the screen? For example a growing circle segment starting at 0 seconds, grow up to current second, and then tick for a few more seconds, and then fade away? Posted at 2023-05-02 by ga Its the font that gives a special mood I think. Nice idea about the sceonds, and no, I havent thought much about seconds yet, But probably I will make a different more animated clock with the original Do we need seconds? The other day I was thinking that you can always switch to a On the other hand I like the idea of the watch waking up and getting more vivid I think I ll just have to finish and release a version and then see. Posted at 2023-05-02 by @allObjects Great elaboration... Actually, it could be around the moon... (taking the moon a bit more out of and up from the day stripe, make the day a bit narrower provides the extra pixels for a moon 'lander' to orbit w/ a trace the moon). I understand and agree that the redraw should not be complicated when wanting to remove an element. What I do to remove an element, I have it on a plain background and redraw it with the background color. I know that the moon is already pretty small because it has to fit into the day space. Have a 'second pulsing' is just another thing alive when really wanted to see it... it is less for the timing but more for the show and 'feel' a rhythm. I did some fancy thing with the 'stopping and jumping/restarting second hand when starting a new minute, like all Swiss Federal Railway clocks do - see Swiss Federal Railway Clock modeled w/ Circular Gauges. PS: All kinds of walks of life get involved and conversation titles look a-like: New to Bangle.js and Espruino. Need help with graphics. Posted at 2023-05-02 by ga Right now I am fighting with the Guithub process. Posted at 2023-05-02 by stweedo I think that's a typo in the tutorial. It should be named app-icon.js for the 48x48 pixel icon image that gets stored directly on the bangle watch when it is uploaded from the app loader. I'm not sure about the other error. Posted at 2023-05-02 by stweedo You want your main code to go in app.js and it sounds like you were putting the base64 image data in there instead, so maybe that's where your errors are coming from. Posted at 2023-05-02 by ga thanks. I have this sorted, but still get the error " has no supports field or is no array" I also get a warning that app ownweather is also listed as data file for weather. Posted at 2023-05-02 by @thyttan
When the tests are run all apps are checked for errors and warnings, and that warning has been present for some time. It's almost certainly not anything you've done now. :)
Yes that is probably the problem. If you look at metadata.json in the example app you'll probably work out what's needed. (Specifically line 8 ) The comprehensive (I believe) list of possible metadata entries is in the BangleApps-repo README. Posted at 2023-05-02 by ga Thanks. I added some more data, didnt use all the options though. Its now in my App Loader copy if any feels inclined to check it and give some feedback. Its called "APolynaths Clock" cause thats what it looks like to me Posted at 2023-05-06 by HughB I tried it out. My only thought would be to make the full screen version a settings option. https://raw.githubusercontent.com/espruino/BangleApps/master/apps/clkinfosunrise/clkinfo.js Posted at 2023-05-07 by ga Thanks much for the example, how to poll this clock info would have been one if ny next questions.
I think there is a Clock Info module for Moon phase too, and it makes sense to use this instead of an extra calculation since someone interested in this might want install this module anyways and then its also not recalculated too often. I dont have much time this week, if someone feels like fixing one if these issues before I find tje time just drop a line here so we dont work on the same thing simulatanousky. Posted at 2023-05-07 by HughB To use clock_info's you need to make a clock that supports the way they work. https://github.com/espruino/BangleApps/tree/master/apps/simplestpp There is also a clock_info wiki or tutorial somewhere as well. You dont need to poll the clock_info they have their own timers, they emit a draw event that your code then reponds to. Posted at 2023-05-09 by @gfwilliams Tutorial here: http://www.espruino.com/Bangle.js+Clock+Info |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Posted at 2023-04-30 by ga
I have this idea for a clock but despite that I know several programming languages
and even contributed to well known books on Action Script long time ago,
I am stumped with JS and Espruino..
I actually hesitated a lot to buy the Bangle because of JS.
I managed to change the font in Anton Clock, but I dont really get any of it
and I have no clue what is Bangle specific, Espruino specific or JS, or user defined functions.
Or what all the parameters and keywords mean.
And it seems too much to learn fir something that otherwise could be finished in an hour or two.
Maybe someone can help me building this?
Though I guess its faster to code it yourself than to explain...
Here is the concept:
Top: sunrise/ sunset day / night time, 24 h ( moving right to left, indicators at noon and midnight)
Arrow beneath: current moment ( center)
Dots benath: upcoming alarms (12 h)
Big number: hour and minute, ( with the minutes getting bigger while they aproach 59
and the hour getting smaller respectively. So each hour starts big end ends small,
with the minutes vice versa. A kind of depth effect)
Bottom: current day of month in the respective box of the day in the week, starting with Monday.
Also an icon for the days of, new, half and full moons.
When the date and moon overlap I want to display a dim large moon bitmap in the background on these days instead if the icon on the bottom.
so my questions are:
how do I query, preferably as numbers, not strings:
day in the week
day of month
Julian date
and scheduled alarms 12 h ahead?
How do I draw a line, and a box , a circle,
How do I place a bitmap?
What is "g." ?
?
Attachments:
Beta Was this translation helpful? Give feedback.
All reactions