Watch Face picture not displaying

[mnakoff]

 I am having an issue when I made a digital clock face it only wants to display the face as a black background. I am wanting to use a 300x300 jpg file for the background. I have the files and can up load them to FitBitOS if a developer would like to help me out with this issue I am having.

https://github.com/mnakoff/FitBit-Project/issues/1

the above link should give you access to a zip file with my code for the FitBit OS project I am having issues with.

[JeCom]

I see you've tried some thing with the viewport-fill in the css class '.background'. My most simple way of doing it was like this:

<svg> 
  <image id="backgroundImg" href="image.jpg" width="100%" height="100%"/>
</svg

So the image is within the general svg and I put width and height to 100% because my image is not exact 300px by 300px.
I also had a background css class on the svg-tag like this:

.background {
  viewport-fill: #000000;
}

but because there is a background image it's not even necessary.

I also saw in your styles.css that you have a double entry for '.background'. I would only keep one to make sure that doesn't mess up anything.

[mnakoff]

 I tried that but I am still getting just the image and nothing else on the watch face. If I take out any reference of the image then I get a black background and the time and other widgets are displayed. Otherwise it just shows the image and not thing else.

 Index.gui below

<svg viewport-fill="lightblue">
  <image x="0" y="0" width="300" height="300" href="mansion.jpg" load="sync" />
</svg>
<svg class="background">
  <text id="timeLabel"/>
  <text id="dateLabel" />
  <text id="heartrateLabel" />
  <text id="batteryLabel" />
  <text id="stepsLabel" />     
</svg>

Index.js

import clock from "clock"; // needed to have a clock! (see line 33)
import document from "document"; // needed for I have no idea what! If you don't put this nothing works!!!
import { preferences } from "user-settings"; // needed to get the user preference 12h or 24h (see line 38)
import { zeroPad, } from "../common/utils"; // import user function zeroPad (see lines 43, 45, 46)
import { HeartRateSensor } from "heart-rate"; // import HR reading from sensor (seel line 18)
import { battery } from "power"; // import battery level (see line26)
import userActivity from "user-activity"; //adjusted types (matching the stats that you upload to fitbit.com, as opposed to local types)

// Update the clock every minute
clock.granularity = "seconds"; //clock is refreshing every sec. It is possible to select minutes as well

// Get a handle on the <text> elements specified in the index.gui file
const timeHandle = document.getElementById("timeLabel"); 
const batteryHandle = document.getElementById("batteryLabel");
const stepsHandle = document.getElementById("stepsLabel");
const heartrateHandle = document.getElementById("heartrateLabel");

// The following block read the heart rate from your watch
const hrm = new HeartRateSensor();

hrm.onreading = function() {
  heartrateHandle.text = `${hrm.heartRate}`; // the measured HR is being sent to the heartrateHandle set at line 16
}
hrm.start();

// Battery Measurement
let batteryValue = battery.chargeLevel; // measure the battery level and send it to the variable batteryValue


// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  const now = evt.date; // get the actual instant
  let hours = now.getHours(); // separate the actual hours from the instant "now"
  let mins = now.getMinutes(); // separate the actual minute from the instant "now"
  let secs = now.getSeconds(); // separate the actual second from the instan "now"
  if (preferences.clockDisplay === "12h") { // check from your wach settings if you use 12h or 24h visualization
    // 12h format
    hours = hours % 12 || 12; 
  } else {
    // 24h format
    hours = zeroPad(hours); // when you use 24h in case hours are in one digit then I put a zero in front. i.e. 3 am -> 03
  }
  let minsZeroed = zeroPad(mins); // one digit mins get a zero in front
  let secsZeroes = zeroPad(secs); // one digit secs get a zero in front
  timeHandle.text = `${hours}:${minsZeroed}:${secsZeroes}`; // time in format hh:mm:ss is assigned in the timeHandle defined at line 13
  
  
  // Activity Values: adjusted type
  let stepsValue = (userActivity.today.adjusted["steps"] || 0); // steps value measured from fitbit is assigned to the variable stepsValue
  let stepsString = stepsValue + ' steps'; // I concatenate a the stepsValue (line above) with th string ' steps' and assign to a new variable
  stepsHandle.text = stepsString; // the string stepsString is being sent to the stepsHandle set at line 15
 
  // Assignment value battery
  batteryHandle.text = `Batt: ${batteryValue} %`; // the string including the batteryValue is being sent to the batteryHandle set at line 14
  
 
}

Style.css

#myLabel {
  font-size: 120;
  font-family: Tungsten-Medium;
  text-length: 32;
  text-anchor: middle;
  x: 50%;
  y: 50%+40;
  fill: #ADFF2F;

}

#timeLabel {
  font-size: 70;
  font-family: System-Bold;
  text-length: 8;
  text-anchor: start;
  x: 15;
  y: 100;
  fill: #7CFC00;
}

#heartrateLabel {
  font-size: 50;
  font-family: System-Bold;
  text-length: 3;
  text-anchor: middle;
  x: 20%;
  y: 80%;
  fill: #7CFC00;
}

#batteryLabel {
  font-size: 15;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: start;
  x: 5%;
  y: 5%;
  fill: #7CFC00;
}


#stepsLabel {
  font-size: 20;
  font-family: System-Bold;
  text-length: 10;
  text-anchor: start;
  x: 50%;
  y: 80%;
  fill: #7CFC00;
}

widgets.gui

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
  </defs>
</svg>

utils.js

// Add zero in front of numbers < 10
export function zeroPad(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

[Gondwana]

Not sure you need, or should have, two top-level SVG elements in your index.gui. Just a guess.

[JeCom · Accepted solution]

I second that. Try this:

<svg>
  <image x="0" y="0" width="300" height="300" href="mansion.jpg" load="sync" viewport-fill="lightblue"/>
  <text id="timeLabel"/>
  <text id="dateLabel" />
  <text id="heartrateLabel" />
  <text id="batteryLabel" />
  <text id="stepsLabel" />     
</svg>

[JeCom]

I think you could also leave out the viewport-fill.

[mnakoff]

Thank you that did the trick and it is now working. One more question the heart rate is not appearing and it was not an option to toggle on or off during installation. Do you think it has something to do with the code below. It has a statement about it being blocked?

import clock from "clock"; // needed to have a clock! (see line 33)
import document from "document"; // needed for I have no idea what! If you don't put this nothing works!!!
import { preferences } from "user-settings"; // needed to get the user preference 12h or 24h (see line 38)
import { zeroPad, } from "../common/utils"; // import user function zeroPad (see lines 43, 45, 46)
import { HeartRateSensor } from "heart-rate"; // import HR reading from sensor (seel line 18)
import { battery } from "power"; // import battery level (see line26)
import userActivity from "user-activity"; //adjusted types (matching the stats that you upload to fitbit.com, as opposed to local types)

// Update the clock every minute
clock.granularity = "seconds"; //clock is refreshing every sec. It is possible to select minutes as well

// Get a handle on the <text> elements specified in the index.gui file
const timeHandle = document.getElementById("timeLabel"); 
const batteryHandle = document.getElementById("batteryLabel");
const stepsHandle = document.getElementById("stepsLabel");
const heartrateHandle = document.getElementById("heartrateLabel");

// The following block read the heart rate from your watch
const hrm = new HeartRateSensor();

hrm.onreading = function() {
  heartrateHandle.text = `${hrm.heartRate}`; // the measured HR is being sent to the heartrateHandle set at line 16
}
hrm.start();

// Battery Measurement
let batteryValue = battery.chargeLevel; // measure the battery level and send it to the variable batteryValue


// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  const now = evt.date; // get the actual instant
  let hours = now.getHours(); // separate the actual hours from the instant "now"
  let mins = now.getMinutes(); // separate the actual minute from the instant "now"
  let secs = now.getSeconds(); // separate the actual second from the instan "now"
  if (preferences.clockDisplay === "12h") { // check from your wach settings if you use 12h or 24h visualization
    // 12h format
    hours = hours % 12 || 12; 
  } else {
    // 24h format
    hours = zeroPad(hours); // when you use 24h in case hours are in one digit then I put a zero in front. i.e. 3 am -> 03
  }
  let minsZeroed = zeroPad(mins); // one digit mins get a zero in front
  let secsZeroes = zeroPad(secs); // one digit secs get a zero in front
  timeHandle.text = `${hours}:${minsZeroed}:${secsZeroes}`; // time in format hh:mm:ss is assigned in the timeHandle defined at line 13
  
  
  // Activity Values: adjusted type
  let stepsValue = (userActivity.today.adjusted["steps"] || 0); // steps value measured from fitbit is assigned to the variable stepsValue
  let stepsString = stepsValue + ' steps'; // I concatenate a the stepsValue (line above) with th string ' steps' and assign to a new variable
  stepsHandle.text = stepsString; // the string stepsString is being sent to the stepsHandle set at line 15
 
  // Assignment value battery
  batteryHandle.text = `Batt: ${batteryValue} %`; // the string including the batteryValue is being sent to the batteryHandle set at line 14
  
 
}

[Gondwana]

Have you set your app's permissions correctly?

[mnakoff]

I totally forgot to enable it in the project configuration. Thanks for the catch.

[joturos]

how to enable my image is showing but no time

[spencerscelfo]

so if it is not showing be shure to tell the watchface in resouces gui to display the text and it is caps sensitive