-
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".
// Display the "Now" message on the Bangle.js 2 watch function showNow() { g.clear(); g.setFontAlign(0, 0); g.setFont("Vector", 48); g.drawString("Now", g.getWidth() / 2, g.getHeight() / 2); return true; } // Display the current time on the Bangle.js 2 watch function showTime() { // Get the current time var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); // Format the time as a string var timeString = hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0") + ":" +; // Display the time on the screen g.clear(); g.setFontAlign(0, 0); g.setFont("Vector", 42); g.drawString(timeString, g.getWidth() / 2, g.getHeight() / 2); // Revert to the "Now" display after 5 seconds setTimeout(showNow, 5000); } // Set up a button listener to display the time setWatch(showTime, BTN1, { repeat: true }); // Display the "Now" message on start-up showNow();
It's simplistic, no widgets and such, but I'm sure somebody will jazz it up if they want.
This is the main reason I bought the Bangle.js 2. So happy now. -
-
-
-
So... this is what I've got so far.
It just flashes back and forth between the "Zen" splash and the clock.
I think we're almost there.
Any Suggestions?// This is my Zen Splash Screen function zen(){ setInterval(function() { g.clear(1); //Draw Text g.setFont("Vector",45); g.drawString("Now",42,70); }, 5000); } // clock from your tutorial function time(){ // Load fonts // position on screen const X = 170, Y = 110; function draw() { // work out how to display the current time var d = new Date(); var h = d.getHours(), m = d.getMinutes(); var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2); // Reset the state of the graphics library g.reset(); // draw the current time g.setFont("Vector",55); g.setFontAlign(40,40); // align right bottom g.drawString(time, X, Y, true /*clear background*/); // draw the date, in a normal font g.setFont("Vector",20); g.setFontAlign(0,1); // align center bottom // pad the date - this clears the background if the date were to change length var dateStr = " "+require("locale").date(d)+" "; g.drawString(dateStr, g.getWidth()/2, Y+15, true /*clear background*/); } // Clear the screen once, at startup g.clear(); // draw immediately at first draw(); var secondInterval = setInterval(draw, 1000); // Stop updates when LCD is off, restart when on Bangle.on('lcdPower',on=>{ if (secondInterval) clearInterval(secondInterval); secondInterval = undefined; if (on) { secondInterval = setInterval(draw, 1000); draw(); // draw immediately } }); // Show launcher when middle button pressed Bangle.setUI("clock"); // Load widgets Bangle.loadWidgets(); Bangle.drawWidgets(); //revert to zen splashscreen myTimeout = setTimeout (zen, 3000); } // run clock time();
-
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.
- I have a splash screen with a custom message on it.
- On button press I'd like to show the clock ( any watch face, I'm not picky) for 10 seconds.
- Then revert back to the splash screen.
Something like:
Run function 1
On button press Run function 2
After 10, seconds break and return to function 1Any suggestions?
- I have a splash screen with a custom message on it.
-
-
Here it is.