10-15-2017 18:55
10-15-2017 18:55
I'd love some help, and I have been trying every possible thing i have found in the resources but I just can't seem to figure out how to set a background image for my clock face. I started a digital clock template, so that is what I am starting with. So main two questions are how do I set a background picture, and where (what file?). Also, how do I change my time from 24 hr to 12 hr. Like I said, I don't code, I am a beginner at the very basic level, but if someone would point the way, I can figure it out from there.
Thanks for your help!
Newbie Programmer
Answered! Go to the Best Answer.
10-15-2017 19:02
10-15-2017 19:02
Hey there, for the 12 hour question i have a really simple fix for that.
Here is where we update our clock text:
// Update the <text> element with the current time function updateClock() { let today = new Date(); let hours = today.getHours(); let mins = util.zeroPad(today.getMinutes()); // Format time into 12 hour clock if (hours > 12) { hours = hours - 12; } myLabel.innerText = `${hours}:${mins}`; }
Here when it updates, we just check if the hour value is more than 12, if it is we just subtract 12 leaving it in 12 hour format.
For the background image in your index.gui add the following:
<image id="image" href="my-image.jpg" width="100%" height="100%"/>
You can place the image file right in the directory where you have your index.gui file.
I hope this helps.
10-15-2017 18:56
10-15-2017 18:56
I am also working my way through a javascript basics tutorial. Hopefully this will help!
10-15-2017 19:02
10-15-2017 19:02
Hey there, for the 12 hour question i have a really simple fix for that.
Here is where we update our clock text:
// Update the <text> element with the current time function updateClock() { let today = new Date(); let hours = today.getHours(); let mins = util.zeroPad(today.getMinutes()); // Format time into 12 hour clock if (hours > 12) { hours = hours - 12; } myLabel.innerText = `${hours}:${mins}`; }
Here when it updates, we just check if the hour value is more than 12, if it is we just subtract 12 leaving it in 12 hour format.
For the background image in your index.gui add the following:
<image id="image" href="my-image.jpg" width="100%" height="100%"/>
You can place the image file right in the directory where you have your index.gui file.
I hope this helps.
10-16-2017 08:52
10-16-2017 08:52
Ideally you should check the user's preference for 12h/24h format.
import userSettings from "user-settings"; // in updateClock() if (userSettings.preferences.clockDisplay == "12h" && hours > 12) hours-=12;
10-16-2017 16:49
10-16-2017 16:49
Yes! Perfect! Thank you guys so much for your help! This is a great community and I hope to make lots of cool apps and faces with you guys, as well as see what you all come up with. I can't wait for the app store to come out.
@EmersonGS - Your help on the graphics is appreciated! I was SO close to having it right, just didn't have the image tag at the beginning, I was setting it up as a background-image, which, maybe I was close? Either way, this works perfect. Thank you!
@JonFitbit - I like your 12/24 hour solution. If I could mark both as answers, you bet I would. Thank you so much for the tip!
12-11-2017 04:50
12-11-2017 04:50
Where in the Fitbit app are these preferences stored / set? According to the clock face I'm developing at the moment, I'm on 12h format, but I can't find anywhere to change it, not even in the developer menu.
12-12-2017 06:01
12-12-2017 06:01
@CoulterJames wrote:
Where in the Fitbit app are these preferences stored / set? According to the clock face I'm developing at the moment, I'm on 12h format, but I can't find anywhere to change it, not even in the developer menu.
It's actually on the Fitbit website in your account settings. https://www.fitbit.com/settings/profile
12-12-2017 06:33
12-12-2017 06:33
Thanks Jon, I’ll add a setting to let the user override that then.