Watchface Ideas #5886
Replies: 1 comment
-
Posted at 2021-12-14 by fanoushs-punching-bag Nm Posted at 2021-12-14 by @gfwilliams Thanks! Yes, some nice segmented clocks would be cool. I guess there's always power usage being an issue for stuff that animated quickly, but you could always only make it do it when the screen as unlocked. Also, I like the Nike watch face idea - should be pretty easy to find two matching fonts, one outlined, one not Posted at 2021-12-14 by Mi Yes the Nike is really nice. I guess that is from the original manufacturers software - or is this already realized on bangle? Posted at 2021-12-14 by HughB I think its from the original software but could be done if someone fancies having a crack at it. Posted at 2021-12-15 by @gfwilliams That was just a photoshop from the original manufacturer. I don't believe it even existed even on the original firmware - I think the reality might not be as good given the 3 bit display though! Posted at 2021-12-15 by fanoushs-punching-bag nm Posted at 2021-12-15 by fanoushs-punching-bag Nm Posted at 2021-12-15 by fanoushs-punching-bag Nm Posted at 2021-12-15 by fanoushs-punching-bag Nm Posted at 2021-12-16 by @gfwilliams There's an example of making your own clock face with a font from Google fonts at http://www.espruino.com/Bangle.js+Clock+Font - so it should be pretty easy! Posted at 2021-12-16 by fanoushs-punching-bag nm Posted at 2021-12-16 by fanoushs-punching-bag nm Posted at 2021-12-16 by fanoushs-punching-bag Nm Posted at 2021-12-16 by HughB There's a slider in the font converter. Just slide that along to change font size. They can be a bit annoying as it depends on the font. Selecting 60 for one font might look more like 40 for another. It very much depends on the characteristics of the font. It can be a bit of trial an error. Posted at 2021-12-22 by fanoushs-punching-bag Nm Posted at 2021-12-22 by HughB Hi there @andiohn, Its not that hard to get started. You can do an aweful lot in the emulator. The challenge is finding the best colour match and a good free Below is some basic code to try:
This will produce a watch like this: Attachments: Posted at 2021-12-22 by fanoushs-punching-bag Nm Posted at 2021-12-22 by HughB Next you will want to muck about with fonts. I have just googled 'free square true type font'. https://www.1001fonts.com/search.html?search=square Next I load that file into the font coverter at: I adjust the slider to around 30 as I want to be able to scale the font up to 90 pixels and 3x90=90.
Now instead of using the Vector font I use:
Now I get a clock that will look like this: Attachments: Posted at 2021-12-22 by HughB So you might want to giggle the starting x,y coordinates a bit to get the font digits to look properly aligned. Or you can adjust the size of the font in the font converter until its scales better. Colour control on the Bangle 2 is a bit limited. Color is set using 3 flags for a colour mix So
Means set RED. You can also dither the color a bit by setting the RED value from 0,1,,, through to f. I just used a color mixer app at: I dragged to a color selection I wanted. The output for a 24bit color was #F6D1D5 You can then turn this into a full clock. The difficult part is finding nice colors and fonts that look really good. I hope that gets you started. Dive in and have a go, plenty of help available on this forum if you get stuck. Posted at 2021-12-23 by fanoushs-punching-bag nm Posted at 2021-12-23 by fanoushs-punching-bag nm Posted at 2021-12-23 by fanoushs-punching-bag Nm Posted at 2021-12-28 by fanoushs-punching-bag nm Posted at 2021-12-28 by fanoushs-punching-bag Nm Posted at 2021-12-29 by fanoushs-punching-bag Nm Posted at 2021-12-29 by fanoushs-punching-bag nm Posted at 2021-12-29 by HughB Might be good if you could share screenshots. The one I liked is: Attachments: Posted at 2021-12-30 by fanoushs-punching-bag nm Posted at 2021-12-30 by fanoushs-punching-bag nm Posted at 2022-01-05 by @gfwilliams I love the one above - if anyone needs a hand to implement it let me know! I think it should be reasonably easy with an offscreen Graphics buffer and transparency. Posted at 2022-01-05 by HughB @andiohn - I'd have a go at that (10:09) if you can find the right fonts on fonts.google.com or 1001 fonts. Posted at 2022-01-05 by fanoushs-punching-bag Nm Posted at 2022-01-05 by HughB I think maybe Lato for the steps etc. Probably 2 different sizes. Posted at 2022-01-05 by fanoushs-punching-bag Nm Posted at 2022-01-14 by fanoushs-punching-bag nm Posted at 2022-01-18 by myxor
I once started working on this - it's far from looking good or being complete but i don't have the time to continue this. Maybe someone is motivated to make a watch out of this. Attachments: Posted at 2022-01-18 by fanoushs-punching-bag nm Posted at 2022-01-19 by fanoushs-punching-bag Nm Posted at 2022-01-20 by Mark_M My Nerdic binary watch. Attachments: Posted at 2022-01-20 by Serj @Mark_M Hi! How about adding a setting to switch between a color version and a black and white version? I would choose black and white ver. Posted at 2022-01-20 by Mark_M Hi Serj, sure, it should not be a problem. I'll need to add app settings. Posted at 2022-01-20 by Serj Rosewright A Watchface from Pebble Attachments: Posted at 2022-01-20 by fanoushs-punching-bag Nm Posted at 2022-01-20 by HughB The B2 screen has limitations in terms of how crisp images can be made, so many of these watch faces will look pretty dissappointing when attempted. The B2 has a 178x178 display where as most of these watches will be 380x380 or 400x400. The Amazfit GTS2 is 348x442. Posted at 2022-01-20 by HughB Like it ! Could you have an option to put the time at the bottom, for when you can't be bothered to work it out :) Posted at 2022-01-20 by HughB this looks like a photoshop job, it almost feels like you could peel the sticker off the front of the watch :) Posted at 2022-01-20 by fanoushs-punching-bag nm Posted at 2022-01-20 by Mark_M LOL yes, exactly, I've added that "normal time" to top, but removed for this screenshot :) I am thinking about couple of options for the normal time hint: what do you think? (I do not have experience with the events above, so it will be a learning curve for me) Posted at 2022-01-21 by Serj Here more realistic version :) Attachments: Posted at 2022-01-21 by HughB Close to LARS clock Posted at 2022-01-21 by fanoushs-punching-bag Pretty cool! Posted at 2022-01-26 by Mark_M I've uploaded Nerdic binary watch to my github App Loader https://markmal.github.io/BangleApps/#nerdic Note1: double-tap to see decimal time hint Posted at 2022-01-26 by fanoushs-punching-bag nm Posted at 2022-01-26 by Mark_M what is your watch? I have B2. Hint is fine there. No garbage. Posted at 2022-01-26 by fanoushs-punching-bag nm Posted at 2022-01-26 by Mark_M Hi andiohn, Posted at 2022-01-26 by fanoushs-punching-bag Nm Posted at 2022-01-26 by HughB I saw the time at the bottom get half cut off at one point. Can't reproduce now, otherwise would send a screenshot. Posted at 2022-01-26 by fanoushs-punching-bag Ya, that's what I'm getting too. Posted at 2022-01-26 by Mark_M I cannot reproduce it. Posted at 2022-01-26 by Serj Pretty smart! Attachments: Posted at 2022-01-26 by fanoushs-punching-bag Nm Posted at 2022-01-26 by fanoushs-punching-bag nm Posted at 2022-01-26 by Serj Cool! There are a lot of interesting watchfaces on Pebble! Posted at 2022-01-26 by HughB here you go. Left it running for 30 minues. Attachments: Posted at 2022-01-26 by fanoushs-punching-bag nm Posted at 2022-01-26 by myownself Wow, that one is impressive! Posted at 2022-01-26 by Mark_M I see. it is weird issue. Need to take a look ... Posted at 2022-01-26 by HughB
48x48 Posted at 2022-01-26 by Mark_M oh, I see ... Posted at 2022-01-27 by Mark_M I've modified the app:
https://markmal.github.io/BangleApps/#nerdic I cannot reproduce the issue with hint artefact. This is the code. Vars T SW,SH Posted at 2022-01-28 by fanoushs-punching-bag nm Posted at 2022-01-29 by Mark_M
Posted at 2022-01-31 by fanoushs-punching-bag nm Posted at 2022-02-02 by fanoushs-punching-bag nm Posted at 2022-02-02 by Serj Nice! Posted at 2022-02-03 by myxor Just notices that some fonts of your list are licensed with "free for personal but not commercial use". I don't know if including them into BangleApps would violate the license because @gfwilliams makes money with Bangle.js watches. Posted at 2022-02-03 by @gfwilliams I guess we're ok? We're not selling the watchfaces, and I'm not selling watches with them preinstalled. However we might have to be careful with the licensing as the BangleApps repo is MIT. It might be we just have to ask them Posted at 2022-02-03 by fanoushs-punching-bag nm Posted at 2022-02-03 by fanoushs-punching-bag nm Posted at 2022-02-03 by HughB What do reckon ? I think the orange one looks closer to your screenshot.
Attachments: Posted at 2022-02-04 by fanoushs-punching-bag nm Posted at 2022-02-04 by fanoushs-punching-bag nm Posted at 2022-02-05 by Alessandro The orange one is really cool! Posted at 2022-02-14 by InnerCode Hi, Posted at 2022-02-17 by fanoushs-punching-bag nm Posted at 2022-06-21 by fanoushs-punching-bag Nm Posted at 2022-06-21 by fanoushs-punching-bag Nm Posted at 2022-06-21 by fanoushs-punching-bag Nm Posted at 2022-07-27 by Jferrari6803 I have an idea for a watch face, but I can't figure out the code. I know almost no JavaScript. Here's what I want to do.
Something like: Any suggestions? Posted at 2022-07-27 by @fanoush
This functionality looks almost like what the lock widget does however now it only shows lock in the corner. When changing lock widget to show splash screen instead of small lock it would do what you want. By pressing button watch is unlocked and watchface is shown. Not sure how practical this is, at least for me it is good when watch shows the time :-) Posted at 2022-07-27 by @gfwilliams Sounds like a neat idea... Not for everyone but I can see the attraction A widget that covers the screen would be a good idea but may end up being a bit hard to implement right now (since you want to keep track of what's going on 'under' it when the screen is locked). Assuming you have some code like you'd get at the end of https://www.espruino.com/Bangle.js+Clock+Font then what you want to do is:
So you just copy the final code from that tutorial, then add this code right to the end:
In a way, for the splash screen I'd suggest it's better to make a 176x152 image and then use https://www.espruino.com/Image+Converter to convert it to the watch (then Posted at 2022-07-27 by Hank Something i always missed with my pebble was a privacy mode. Even when DND was active, the messages were shown. I like the idea of a widget blanking everything out while the watch is locked. In the settings menu it could even provide a function to quickly turn this function on and off. Posted at 2022-07-27 by @gfwilliams
I know, but at some point we've got to say that this is quite a constrained device. And honestly it only takes a few seconds to uninstall/reinstall something if you don't like it - and the watch will be a lot faster if you uninstall the widgets you don't want rather than hiding them Posted at 2022-07-27 by Jferrari6803 So... this is what I've got so far.
Posted at 2022-07-27 by Jferrari6803 sorry, I thought the code would display like yours. The only thing I'm missing is the button event to run the time function. I just stuck time() at the end to see what would happen. Posted at 2022-07-27 by @gfwilliams
All you need is three backticks before and after - or highlight it and click the I think your code might have some issues with the way you're calling Another option is I just added some code to the firmware (in cutting edge builds) to handle overlays. So as a result, if you've got the latest firmware and you copy the following code into
Posted at 2022-07-27 by Jferrari6803 Thanks for the advice on displaying code. I like the lock screen idea, but I'm trying to go another route. I want to run the "zen", on button press or screen touch run "time" for 5 seconds, then return to "zen". -Run Zen Can this be done? Posted at 2022-07-28 by @gfwilliams Yes, it can be done pretty easily. But... can't you just set the 'lock timeout' to 10 seconds in the watch settings, and then the code above does exactly what you want? I'm just thinking that if the watch was unlocked but it's still in zen mode, pressing the button would just go to the launcher. It all gets a bit more confusing Posted at 2022-07-28 by Jferrari6803 Good point. That would work perfectly if I could use my code snippet, or save it as a jpg, in place of the sunset. Posted at 2022-11-11 by @gfwilliams Just a note that a slidey clock got mentioned in https://forum.espruino.com/comments/16328196/ and it's now available at https://banglejs.com/apps/?id=slopeclock Posted at 2022-11-11 by fanoushs-punching-bag Nm Posted at 2023-05-07 by Jferrari6803 I finally have the code for my Existentialist's Watch. The watchface shows the word "Now" in the center of the screen. If you find a need for the terrestrial time, press the button and the current time will display for five seconds, then revert back to "Now".
It's simplistic, no widgets and such, but I'm sure somebody will jazz it up if they want. Posted at 2023-05-07 by Jferrari6803 Here it is. Attachments: Posted at 2023-05-09 by @gfwilliams Nice idea, thanks! How about adding it to http://www.espruino.com/Bangle.js+App+Loader ? |
Beta Was this translation helpful? Give feedback.
-
Posted at 2021-12-13 by fanoushs-punching-bag
Nm
Beta Was this translation helpful? Give feedback.
All reactions