There is a setting under devices for 24-hour time as a preference.
The introductory example for making faces in CloudPebble using Javascript mentions this in part 6, but it sounds like it requires the user to install Clay on their phone to use the example settings reader.
How do I read the 24-hour on/off value from the current Pebble app so that I can change the time format in one of my faces written in Javascript? Without this Clay, whatever that might be.
In an Alloy app, you can use this
console.log(`watch.hour12 ${watch.hour12} (user prefers ${watch.hour12 ? "12" : "24"} hour display)`);
OK, it took some looking and outright guessing to figure out how to turn that into something I could use in an if statement, I thought this was doing it:
let timeStr = “blank”;
if (log(console.log(watch.hour12 ${watch.hour12} (user prefers ${watch.hour12 ? "12" : "24"} hour display))) === “true”) {
timeStr = “12”;
} else {
timeStr = “24”;
}
If using timeStr here simply because I opened the sample first watch face tutorial and co-opted that as my output.
After several results of getting “undefined” where the time would print I finally got the value in the if statement. Trouble is I believe I’m not doing the testing correctly. I also tried
let timeStr = “blank”;
if (log(console.log(watch.hour12 ${watch.hour12} (user prefers ${watch.hour12 ? "12" : "24"} hour display))) === true) {
timeStr = “12”;
} else {
timeStr = “24”;
}
where true is not in quotation marks thinking the value returned was boolean.
This situation is not helped by the fact that I can’t seem to change some settings in the emulator window
Soooo, I tried running the code on my phone. There I can of course change the 24-hour preference setting. This seems to have no effect so I suspect my if statement is not correct.
I also tried if statements with === “12” and ===“24” instead of true. Same results.
OK, as I suspected, I don’t understand the format of that command. It looks like it’s saying first “get a true false” and then “generate text based on that true false”.
Searching around what I really need to do is something like:
const logEntry = console.log(watch.hour12 ${watch.hour12} (user prefers ${watch.hour12 ? "12" : "24"} hour display));
? ? ?
const prefers12 = !!watch.hour12;
Well, I thought I had it with this
let timeStr = “blank”;
let consoleOut = console.log(watch.hour12 ${watch.hour12});
let hour12 = !!consoleOut;
if (hour12 === true) {
timeStr = “12”;
} else {
timeStr = “24”;
}
That shows 24 in the emulator window
If I change if (hour12 === true) to if (hour12 === false) I get 12 in the emulator window.
Since I can’t try switching to 12-hour in the emulator, the checkbox is still stuck on 24-hour, I tried running it on my phone using DevConnect. There I do not get this behaviour.
import Poco from “commodetto/Poco”;
const render = new Poco(screen);
// Fonts
const timeFont = new render.Font(“Bitham-Bold”, 42);
const dateFont = new render.Font(“Gothic-Bold”, 24);// Colors
const black = render.makeColor(0, 0, 0);
const white = render.makeColor(255, 255, 255);// Day and month names for date formatting
const DAYS = [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”];
const MONTHS = [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”,
“Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”];function log(data){
console.log(data);
return data;
}function draw(event) {
const now = event.date;render.begin(); render.fillRectangle(black, 0, 0, render.width, render.height); // Format time as HH:MM const hours = String(now.getHours()).padStart(2, "0"); const minutes = String(now.getMinutes()).padStart(2, "0");// const timeStr =
${hours}:${minutes};let timeStr = “blank”;
let consoleOut = console.log(watch.hour12 ${watch.hour12});
let hour12 = !!consoleOut;if (hour12 === false) {
timeStr = “12”;
} else {
timeStr = “24”;
}// Center the time vertically (shifted up slightly to make room for date) let width = render.getTextWidth(timeStr, timeFont); render.drawText(timeStr, timeFont, white, (render.width - width) / 2, (render.height / 2) - timeFont.height + 5); // Format date as "Mon Jan 01" const dayName = DAYS[now.getDay()]; const monthName = MONTHS[now.getMonth()]; const dateStr = `${dayName} ${monthName} ${String(now.getDate()).padStart(2, "0")}`; // Draw date below the time width = render.getTextWidth(dateStr, dateFont); render.drawText(dateStr, dateFont, white, (render.width - width) / 2, (render.height / 2) + 10); render.end();}
// Update every minute (fires immediately when registered)
watch.addEventListener(“minutechange”, draw);
OK, I looked at the Clay example. It does cover this. I was expecting having to do much work to create an interface for the phone, but I ran the sample code and published it and I get the settings option for an individual watch face.
I was expecting the Pebble app setting for 24-hour was what I should use, but maybe I ought to try this instead?
I’ll have a look later today or tomorrow to see if I can implement the 12/24 setting using this Clay example.
The code Eric gave you is just an example that prints out the setting’s value and what it means to the log. What matters is the value of watch.hour12, if true then it’s 12h and if not it’s 24h.
The setting is stored and adjustable on the watch itself, in the app it’s in the “watch” tab which is a page where you can change the watch settings, everything on there is a watch setting and not an app setting, as the tabs say.
Yes, I believe I figured out how we are actually meant to do this. Just wasted a lot of time thinking I’d been given the answer.
Given the tutorial code part 6 is available for loading in CloudPebble so you get the framework for this and I’ve already tried it I expect I have what I need.
Yes, the sample code from part 6 of the introduction will do what I was after.
Thanks for the responses. After a detour I did get there on my own, by actually reading all the parts of the intro part 6.
Interesting bit, I notice that while the emulator does not respond to the 24-hour green check mark for square faces, it does work on round faces. I can not say if it has been this way before since I did not test that with round faces.
Well, it’s really nice the example code has most of the settings a user would want to change.
I only wanted the hourFormat, so I tried to remove the other settings. Wow, not easy.
I dropped back and started over and so far after several tries I’ve managed to turn the weather off and the option to change degrees C to F and back.
Baby steps, searching code for key words, and close inspection of beginning and end marks.
Well this is the first face using the Clay system. I removed every setting except time format for this one, eventually, and it seems to be working as expected.
https://apps.repebble.com/the-monday_4300ee3130834df0b6090de3
