Noob at programming. How to make a simple background with a picture

[SunsetRunner]

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

[SunsetRunner]

I am also working my way through a javascript basics tutorial. Hopefully this will help!

[EmersonGS · Accepted solution]

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.

[JonFitbit]

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;

[SunsetRunner]

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! 

[CoulterJames]

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.

[JonFitbit]

---

@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

[CoulterJames]

Thanks Jon, I’ll add a setting to let the user override that then.