I am trying to create a clockface that is user configurable. Everything seems to work fine except the fontsize for date. The fontsize for clock the clock works fine and I believe the coding is the same for date and clock. Just don't understand why it works for clock but not for date. What have I done wrong ?
import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import { charger, battery } from "power";
import userActivity from "user-activity";
import * as messaging from "messaging";
import * as util from "../common/utils";
// Update the clock every minute
clock.granularity = "seconds";
let backGround = document.getElementById("background");
// Get a handle on the <text> element
let myLabel = document.getElementById("myLabel");
let myLabels = document.getElementById("myLabels");
let fullDate = document.getElementById("fullDate");
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let stepValue = "0";
var newDate ="";
var dayDate ="";
// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = new Date();
// check for date change
newDate = today.getDate();
// update date on date change
if (newDate != dayDate)
{
dayDate = today.getDate();
let disDate = today.getDate();
let weekDay = days[today.getDay()];
let curMonth = month[today.getMonth()];
fullDate.text = `${disDate} ${weekDay} ${curMonth}`;
}
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = (hours);
}
let mins = util.zeroPad(today.getMinutes());
myLabel.text = myLabels.text=`${hours}:${mins}`;
}
// Message is received
messaging.peerSocket.onmessage = evt => {
console.log(`App received: ${JSON.stringify(evt)}`);
//set clock digit color
if (evt.data.key === "clockcolor" && evt.data.newValue) {
let color = JSON.parse(evt.data.newValue);
console.log(`Setting clock color: ${color}`);
myLabels.style.fill = color;
}
//set date digit color
if (evt.data.key === "datecolor" && evt.data.newValue) {
let color = JSON.parse(evt.data.newValue);
console.log(`Setting date color: ${color}`);
fullDate.style.fill = color;
}
//set clock digit shadow color
if (evt.data.key === "shadowcolor" && evt.data.newValue) {
let color = JSON.parse(evt.data.newValue);
console.log(`Setting clock shadow color: ${color}`);
myLabel.style.fill = color;
}
//set clock digit position
if (evt.data.key === "clockpos" && evt.data.newValue) {
var **ahem** = JSON.parse(evt.data.newValue);
var possub = **ahem**["selected"];
console.log(`Setting clock position: ${possub}`);
if (possub=="0") {
console.log(`top left: ${possub}`);
myLabels.textAnchor = "start";
myLabel.textAnchor = "start";
myLabels.x= 10;
myLabel.x= 10-2;
myLabels.y= 85;
myLabel.y= 85;
}
else if (possub=="1") {
console.log(`top right: ${possub}`);
myLabels.textAnchor = "end";
myLabel.textAnchor = "end";
myLabels.x= 295;
myLabel.x= 295-2;
myLabels.y= 85;
myLabel.y= 85;
}
else if (possub=="2") {
console.log(`bottom left: ${possub}`);
myLabels.textAnchor = "start";
myLabel.textAnchor = "start";
myLabels.x= 10;
myLabel.x= 10-2;
myLabels.y= 268;
myLabel.y= 268;
}
else if (possub=="3") {
console.log(`bottom right: ${possub}`);
myLabels.textAnchor = "end";
myLabel.textAnchor = "end";
myLabels.x= 295;
myLabel.x= 295-2;
myLabels.y= 268;
myLabel.y= 268;
}
else if (possub=="4") {
console.log(`top right: ${possub}`);
myLabels.textAnchor = "middle";
myLabel.textAnchor = "middle";
myLabels.x= 150;
myLabel.x= 150-2;
myLabels.y= 150;
myLabel.y= 150;
}
}
//set date digit position
if (evt.data.key === "datepos" && evt.data.newValue) {
var **ahem** = JSON.parse(evt.data.newValue);
var possub = **ahem**["selected"];
console.log(`Setting date position: ${possub}`);
if (possub=="0") {
console.log(`top left: ${possub}`);
fullDate.textAnchor = "start";
fullDate.x = 10;
fullDate.y = 30;
}
else if (possub=="1") {
console.log(`top right: ${possub}`);
fullDate.textAnchor = "end";
fullDate.x = 295;
fullDate.y = 30;
}
else if (possub=="2") {
console.log(`bottom left: ${possub}`);
fullDate.textAnchor = "start";
fullDate.x = 10;
fullDate.y = 295;
}
else if (possub=="3") {
console.log(`bottom right: ${possub}`);
fullDate.textAnchor = "end";
fullDate.x = 295;
fullDate.y = 295;
}
else if (possub=="4") {
console.log(`center: ${possub}`);
fullDate.textAnchor = "middle";
fullDate.x = 150;
fullDate.y = 180;
}
}
//set clock digit font size
if (evt.data.key === "fontsize" && evt.data.newValue) {
var fontsize = JSON.parse(evt.data.newValue);
var fontsizesub = fontsize["selected"];
console.log(`Setting clock font size: ${fontsizesub}`);
if (fontsizesub=="0") {
console.log(`extra small: ${fontsizesub}`);
myLabels.style.fontSize = myLabel.style.fontSize =35;
}
else if (fontsizesub=="1") {
console.log(`small: ${fontsizesub}`);
myLabels.style.fontSize = myLabel.style.fontSize = 45;
}
else if (fontsizesub=="2") {
console.log(`medium: ${fontsizesub}`);
myLabels.style.fontSize = myLabel.style.fontSize =55;
}
else if (fontsizesub=="3") {
console.log(`large: ${fontsizesub}`);
myLabels.style.fontSize = myLabel.style.fontSize =65;
}
else if (fontsizesub=="4") {
console.log(`extra large: ${fontsizesub}`);
myLabels.style.fontSize = myLabel.style.fontSize =75;
}
}
//set date font size
if (evt.data.key === "datefontsize" && evt.data.newValue) {
var fontsize = JSON.parse(evt.data.newValue);
var fontsizesub = fontsize["selected"];
console.log(`Setting date font size: ${fontsizesub}`);
if (fontsizesub=="0") {
console.log(`extra small: ${fontsizesub}`);
fullDate.style.fontSize = 35;
}
else if (fontsizesub=="1") {
console.log(`small: ${fontsizesub}`);
fullDate.style.fontSize = 45;
}
else if (fontsizesub=="2") {
console.log(`medium: ${fontsizesub}`);
fullDate.style.fontSize = 55;
}
else if (fontsizesub=="3") {
console.log(`large: ${fontsizesub}`);
fullDate.style.fontSize = 65;
}
else if (fontsizesub=="4") {
console.log(`extra large: ${fontsizesub}`);
fullDate.style.fontSize = 75;
}
}
};
// Message socket opens
messaging.peerSocket.onopen = () => {
console.log("App Socket Open");
};
// Message socket closes
messaging.peerSocket.onclose = () => {
console.log("App Socket Closed");
};
