Awesome, got it all to work.
Updated the background images. and it works great until I ran into a bug.
It seems when I go to an app on the watch, or Alexa, the background image will just disappear completely, and unless I swipe around a lot or reset it the background image will not come back.
Here is the full build:
https://drive.google.com/file/d/16hQlXlSkDSXw4OiCXYnWdjC6VRBzZU32/view?usp=sharing
Index.js
import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { display } from "display";
import { HeartRateSensor } from "heart-rate";
const myClock = document.getElementById("myClock");
const hrmData = document.getElementById("hrm-data");
const myDate = document.getElementById("myDate");
const sensors = [];
let days = ["Sun", "Mon", "Tue", "Wen", "Thu", "Fri", "Sat"];
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
clock.granularity = "minutes";
clock.ontick = (evt) => {
let today = evt.date;
let dayName = days[today.getDay()];
let hours = today.getHours();
let month = util.zeroPad(today.getMonth() + 1);
let monthName = months[today.getMonth()];
let dayNumber = util.zeroPad(today.getDate());
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
myClock.text = `${hours}:${mins}`;
myDate.text = `${dayName}, ${monthName}-${dayNumber}`;
}
let BG1 = document.getElementById('BG1');
let BG2 = document.getElementById('BG2');
if (HeartRateSensor) {
const hrm = new HeartRateSensor({ frequency: 1 });
hrm.addEventListener("reading", () => {
hrmData.text = `${hrm.heartRate}`;
if (hrm.heartRate <= 100){
BG2.style.display = 'none';
BG1.style.display = 'inline';
} else if (hrm.heartRate > 100){
BG2.style.display = 'inline';
BG1.style.display = 'none';
}
});
sensors.push(hrm);
hrm.start();
} else {
hrmLabel.style.display = "none";
hrmData.style.display = "none";
}
display.addEventListener("change", () => {
// Automatically stop all sensors when the screen is off to conserve battery
display.on ? sensors.map(sensor => sensor.start()) : sensors.map(sensor => sensor.stop());
});
Common > Utils.js
// Add zero in front of numbers < 10
export function zeroPad(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
Resources > Index.view
<svg class="background">
<svg>
<image id = 'BG1' href="AllioredBanners.png" />
<image id = 'BG2' href="WarMode.png" />
<text id="myClock"></text>
<text id="myDate"></text>
<text id="hrm-data" class="sensor-data"></text>
</svg>
</svg>
Resources > Style.css
#myDate {
font-size: 35;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 130;
y: 210;
fill: white;
}
#myClock {
font-size: 40;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 180;
y: 103;
fill: white;
}
#hrm-data {
font-size: 20;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 262;
y: 285;
fill: white;
}
