Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Setting colors are reseted after running other app

ANSWERED

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

 

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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

Best Answer
2 REPLIES 2

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
Best Answer

working excellent, thanks! Smiley Happy

Best Answer