Weather icons

[yelewatchfaces]

I'm new to sdk and I've built a clockface with weather. I used the fitbit weather api, and for reference I used the exact code of the "sdk-weather-clock" https://github.com/Fitbit/sdk-weather-clock

Everything worked so far, now I want to assign weather icons to weather conditioncodes. I already have icons in resources folder and want help assigning them.

[kozm0naut]

You can use the image element and set the href to the image name as it appears in the resources folder:

https://dev.fitbit.com/build/guides/user-interface/svg/#images

You can either create an element for each icon and show/hide them as needed in js, or use one image element and dynamically set the href:

let ele_weatherIcon = document.getElementById("weather-icon");
// ...
if (isSunny) {
  ele_weatherIcon.href = "sunny-icon.jpg";
}

[yelewatchfaces]

let ele_wimage = document.getElementById("wimage");
newfile.initialize(data => {
if (data.conditioncode == "32") {
  ele_wimage.href = "windy.png";
  }
  if (data.conditioncode == "1") {
    ele_wimage.href = "sunny.png";
  }
});

not displaying any icons in sim

[Gondwana]

Use console.log to see what's getting executed, and the values of important variables (eg, data.conditioncode).

[yelewatchfaces]

in simulator conditioncode shown as 32 (windy)

details.text = '${data.conditionCode}'

[Gondwana]

"32 (windy)" isn't equal to "32". See what damage you can do with this.

[Gondwana · Accepted solution]

That said, I'd be inclined to extract the number and use it as an index into an associative array of image filenames.

Or, change the filenames to match the conditionCode values plus .png, then you wouldn't need a conditional test at all!

[yelewatchfaces]

I typed 32 (windy) for reference purpose (ie., the conditionCode 32 refers weather condition windy)

actually its a type error.

what I should write is

if (data.conditionCode == "32")

instead I typed if (data.conditioncode == "32").

I feel stupid now.

Thanks everyone for your quick replies.

[SunsetRunner]

I totally agree with Gondwana to reference the href by renaming your images to the associated conditionCode.

So you just need one line for that.

image.href = …yourPath/data.conditionCode + '.png'

[yelewatchfaces]

That's a good trick, but what if I need to assign two conditionCodes with only one image. I can duplicate the image with two different names, but it would increase the no of images.

[SunsetRunner]

I wouldn't bother having a copy of one or two images, otherwise you could make an exception for those groups of codes calling the same href
Or define elsewhere. In pseudo code:
code = code === this || that ? this : code
You could do so in an extra variable or directly with the href.
I never worked with the fitbit weather API so no idea how many overlaps of conditions exist there.
You might want to "group" them like above in an early state at the data itself, so you can use that for images, descriptive text...