Solved: Setting colors are reseted after running other app

tofna · ‎03-10-2019

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;
}

Gondwana · ‎03-10-2019

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.

Peter McLennan
Gondwana Software

View best answer in original post

Gondwana · ‎03-10-2019

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.

Peter McLennan
Gondwana Software

tofna · ‎03-11-2019

working excellent, thanks!

Join us on the Community Forums!

Community Guidelines

Learn the Basics

Join the Community!

Not finding your answer on the Community Forums?

Go to the Help Site

Contact Support

Setting colors are reseted after running other app

tofna

Gondwana

Gondwana

tofna