03-10-2019 08:50
03-10-2019 08:50
Hello,
when color of mylabel is changed, its still visible until some app is executed. Than is replaced by original color form css file...
my I have searched and tried about two days. I cant figure out, whats missiing, or what is bad. Could somebody help me, please?
here si my code:
index.js
import { me } from "appbit"; import { me as device } from "device"; import * as fs from "fs"; const SETTINGS_TYPE = "cbor"; const SETTINGS_FILE = "settings.cbor"; let settings = loadSettings(); import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; import { HeartRateSensor } from "heart-rate"; import userActivity from "user-activity"; import { battery } from "power"; import * as messaging from "messaging"; //.......................................................... const den = document.getElementById("den"); const myLabel = document.getElementById("myLabel"); const myBatteryLabel = document.getElementById("myBatteryLabel"); const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay"); const dnes = document.getElementById("dnes"); const stepsHandle = document.getElementById("stepsLabel"); const hrLabel = document.getElementById("hrLabel"); const batt = document.getElementById("batt"); //........................................ let myElement = document.getElementById("myLabel"); let myElement2 = document.getElementById("hrLabel"); let myElement3 = document.getElementById("myBatteryLabel"); function onsettingschange(data) { // Apply colors to elements if (!data) { return; } if (data.myColor) { myElement.style.fill = data.myColor; myElement2.style.fill = data.myColor; myElement3.style.fill = data.myColor; } } //baterie..................................... myBatteryLabel.text = `${battery.chargeLevel}%`; // initialize on startup battery.onchange = (charger, evt) => { myBatteryLabel.text = `${battery.chargeLevel}%`; } //hodiny...................................... clock.granularity = "minutes"; clock.ontick = (evt) => { if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; } //datum....................................... clock.ontick = (evt) => { let today = evt.date; let hours = today.getHours(); let monthnum = today.getMonth(); let day = today.getDate(); var month = new Array(); let today = new Date(); // or get this from the tick event (evt.date) const days = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota" ]; let dayName = days[today.getDay()]; //dnes kroku.................................... let stepsValue = (userActivity.today.adjusted["steps"] || 0); // steps value measured from fitbit is assigned to the variable stepsValue let stepsString = 'Dnes kroků: '+ stepsValue ; stepsHandle.text = stepsString; dnes.text = dayName; month[0] = "Leden"; month[1] = "Únor"; month[2] = "Březen"; month[3] = "Duben"; month[4] = "Květen"; month[5] = "Červen"; month[6] = "Červenc"; month[7] = "Srpen"; month[8] = "Září"; month[9] = "Říjen"; month[10] = "Listopad"; month[11] = "Prosinec"; let monthname = month[monthnum]; if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; myDay.text = `${day}.${monthname}`; } //HRM................................................. var hrm = new HeartRateSensor(); hrm.onreading = function() { console.log("Current heart rate: " + hrm.heartRate); hrLabel.text = "Aktuální tep: " + hrm.heartRate; } hrm.start(); //.................................................... // Received message containing settings data messaging.peerSocket.addEventListener("message", function(evt) { settings[evt.data.key] = evt.data.value; onsettingschange(settings); }) // Register for the unload event me.addEventListener("unload", saveSettings); // Load settings from filesystem function loadSettings() { try { return fs.readFileSync(SETTINGS_FILE, SETTINGS_TYPE); } catch (ex) { return {}; } } // Save settings to the filesystem function saveSettings() { fs.writeFileSync(SETTINGS_FILE, settings, SETTINGS_TYPE); } import { me } from "appbit"; import { me as device } from "device"; import * as fs from "fs"; const SETTINGS_TYPE = "cbor"; const SETTINGS_FILE = "settings.cbor"; let settings = loadSettings(); import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; import { HeartRateSensor } from "heart-rate"; import userActivity from "user-activity"; import { battery } from "power"; import * as messaging from "messaging"; //.......................................................... const den = document.getElementById("den"); const myLabel = document.getElementById("myLabel"); const myBatteryLabel = document.getElementById("myBatteryLabel"); const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay"); const dnes = document.getElementById("dnes"); const stepsHandle = document.getElementById("stepsLabel"); const hrLabel = document.getElementById("hrLabel"); const batt = document.getElementById("batt"); //........................................ let myElement = document.getElementById("myLabel"); let myElement2 = document.getElementById("hrLabel"); let myElement3 = document.getElementById("myBatteryLabel"); function onsettingschange(data) { // Apply colors to elements if (!data) { return; } if (data.myColor) { myElement.style.fill = data.myColor; myElement2.style.fill = data.myColor; myElement3.style.fill = data.myColor; } } //baterie..................................... myBatteryLabel.text = `${battery.chargeLevel}%`; // initialize on startup battery.onchange = (charger, evt) => { myBatteryLabel.text = `${battery.chargeLevel}%`; } //hodiny...................................... clock.granularity = "minutes"; clock.ontick = (evt) => { if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; } //datum....................................... clock.ontick = (evt) => { let today = evt.date; let hours = today.getHours(); let monthnum = today.getMonth(); let day = today.getDate(); var month = new Array(); let today = new Date(); // or get this from the tick event (evt.date) const days = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota" ]; let dayName = days[today.getDay()]; //dnes kroku.................................... let stepsValue = (userActivity.today.adjusted["steps"] || 0); // steps value measured from fitbit is assigned to the variable stepsValue let stepsString = 'Dnes kroků: '+ stepsValue ; stepsHandle.text = stepsString; dnes.text = dayName; month[0] = "Leden"; month[1] = "Únor"; month[2] = "Březen"; month[3] = "Duben"; month[4] = "Květen"; month[5] = "Červen"; month[6] = "Červenc"; month[7] = "Srpen"; month[8] = "Září"; month[9] = "Říjen"; month[10] = "Listopad"; month[11] = "Prosinec"; let monthname = month[monthnum]; if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; myDay.text = `${day}.${monthname}`; } //HRM................................................. var hrm = new HeartRateSensor(); hrm.onreading = function() { console.log("Current heart rate: " + hrm.heartRate); hrLabel.text = "Aktuální tep: " + hrm.heartRate; } hrm.start(); //.................................................... // Received message containing settings data messaging.peerSocket.addEventListener("message", function(evt) { settings[evt.data.key] = evt.data.value; onsettingschange(settings); }) // Register for the unload event me.addEventListener("unload", saveSettings); // Load settings from filesystem function loadSettings() { try { return fs.readFileSync(SETTINGS_FILE, SETTINGS_TYPE); } catch (ex) { return {}; } } // Save settings to the filesystem function saveSettings() { fs.writeFileSync(SETTINGS_FILE, settings, SETTINGS_TYPE); }
companion index.js
import * as messaging from "messaging"; import { settingsStorage } from "settings"; settingsStorage.addEventListener("change", evt => { if (evt.oldValue !== evt.newValue) { sendValue(evt.key, evt.newValue); } }); function sendValue(key, val) { if (val) { sendSettingData({ key: key, value: JSON.parse(val) }); } } function sendSettingData(data) { if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) { messaging.peerSocket.send(data); } }
settings:
function mySettings(props) { let colorSet = [ {color: "black"}, {color: "darkslategrey"}, {color: "dimgrey"}, {color: "grey"}, {color: "lightgrey"}, {color: "beige"}, {color: "white"}, {color: "maroon"}, {color: "saddlebrown"}, {color: "darkgoldenrod"}, {color: "goldenrod"}, {color: "rosybrown"}, {color: "wheat"}, {color: "navy"}, {color: "blue"}, {color: "dodgerblue"}, {color: "deepskyblue"}, {color: "aquamarine"}, {color: "cyan"}, {color: "olive"}, {color: "darkgreen"}, {color: "green"}, {color: "springgreen"}, {color: "limegreen"}, {color: "palegreen"}, {color: "lime"}, {color: "greenyellow"}, {color: "darkslateblue"}, {color: "slateblue"}, {color: "purple"}, {color: "fuchsia"}, {color: "purple"}, {color: "plum"}, {color: "orchid"}, {color: "lavender"}, {color: "darkkhaki"}, {color: "khaki"}, {color: "lemonchiffon"}, {color: "yellow"}, {color: "gold"}, {color: "orangered"}, {color: "orange"}, {color: "coral"}, {color: "lightpink"}, {color: "palevioletred"}, {color: "deeppink"}, {color: "darkred"}, {color: "crimson"}, {color: "red"} ]; return ( <Page> <Section title="Change Color"> <ColorSelect settingsKey="myColor" colors={colorSet} /> </Section> </Page> ); } registerSettingsPage(mySettings);
css
.background {
viewport-fill: black;
}
#myLabel {
font-size: 140;
font-family: Tungsten-Medium;
text-length: 32;
text-anchor: middle;
x: 57%;
y: 52%+40;
fill: #0077b3;
}
#myBatteryLabel {
font-size: 32;
font-family: Tungsten-Medium;
text-length: 4;
text-anchor: middle;
x: 15%;
y: 47%+40;
fill: #0077b3;
}
#batt {
font-size: 35;
font-family: Tungsten;
text-length: 5;
text-anchor: middle;
x: 16%;
y: 38%+40;
fill: #A9A9A9;
}
#myDay {
font-size: 38;
font-family: Tungsten-Medium;
text-length: 22;
text-anchor: end;
x: 92%;
y: 15%+40;
fill: white;
}
#stepsLabel {
font-size: 32;
font-family: System-Regular;
text-length: 18;
text-anchor: middle;
x: 52%;
y: 64%+40;
fill: grey;
}
#hrLabel {
font-size: 54;
font-family: Tungsten-Medium;
text-length: 30;
text-anchor: middle;
x: 56%;
y: 78%+40;
fill: #0077b3;
}
#dnes {
font-size: 110;
font-family: Tungsten-Medium;
text-length: 34;
text-anchor: middle;
x: 38%;
y: 15%+40;
fill: #666666;
}
Answered! Go to the Best Answer.
03-10-2019 11:31
03-10-2019 11:31
The best arrangement is to store settings values locally on the watch using the File System, and then reload that file (if it exists) and restore the settings whenever your clockface starts.
03-10-2019 11:31
03-10-2019 11:31
The best arrangement is to store settings values locally on the watch using the File System, and then reload that file (if it exists) and restore the settings whenever your clockface starts.
03-11-2019 00:57
03-11-2019 00:57
working excellent, thanks!