Saving color settings, for a beginner

[Cardboard_Boy]

My clockface has a function to change the color, but if you open an app, the selected color reverts to the default. Ive looked at other posts and know i need to save the settings to a file and read the file and reapply the settings that way. The issue is how unfamiliar with this code i am. Can someone help me add this to my code? My attempts all simply broke the code.

what i have:

app/index.js:

import clock from "clock";
import document from "document";

// Tick every second
clock.granularity = "seconds";

let hourHand = document.getElementById("hours");
let minHand = document.getElementById("mins");
let secHand = document.getElementById("secs");

// Returns an angle (0-360) for the current hour in the day, including minutes
function hoursToAngle(hours, minutes) {
let hourAngle = (360 / 12) * hours;
let minAngle = (360 / 12 / 60) * minutes;
return hourAngle + minAngle;
}

// Returns an angle (0-360) for minutes
function minutesToAngle(minutes) {
return (360 / 60) * minutes;
}

// Returns an angle (0-360) for seconds
function secondsToAngle(seconds) {
return (360 / 60) * seconds;
}

// Rotate the hands every tick
function updateClock() {
let today = new Date();
let hours = today.getHours() % 12;
let mins = today.getMinutes();
let secs = today.getSeconds();

hourHand.groupTransform.rotate.angle = hoursToAngle(hours, mins);
minHand.groupTransform.rotate.angle = minutesToAngle(mins);
secHand.groupTransform.rotate.angle = secondsToAngle(secs);
}

// Update the clock every tick event
clock.addEventListener("tick", updateClock);

const myDay = document.getElementById("myDay");
const myMonth = document.getElementById("myMonth");
const myDate = document.getElementById("myDate");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {

let today = evt.date;
let hours = today.getHours();
let day = days[new Date().getDay()];
let daylabel = today.getDate();
let monthnum = today.getMonth();

var month = new Array();
month[0] = "Jan.";
month[1] = "Feb.";
month[2] = "Mar.";
month[3] = "Apr.";
month[4] = "May";
month[5] = "Jun.";
month[6] = "Jul.";
month[7] = "Aug.";
month[8] = "Sep.";
month[9] = "Oct.";
month[10] = "Nov.";
month[11] = "Dec.";
let monthname = month[monthnum];
myMonth.text = `${monthname}`;
myDate.text = `${daylabel}`;
myDay.text = `${day}`;

}

//handle day names
var days = [
"Sun.",
"Mon.",
"Tue.",
"Wed.",
"Thu.",
"Fri.",
"Sat."
];

//settings for background
import * as messaging from "messaging";
import * as document from "document";

let myBackground = document.getElementById("myBackground");

messaging.peerSocket.addEventListener("message", (evt) => {
if (evt && evt.data && evt.data.key === "myColor") {
myBackground.style.fill = evt.data.value;
}
});

import { battery } from "power";

const myBattery = document.getElementById("myBattery");

myBattery.text = `${battery.chargeLevel}%`; // initialize on startup
battery.onchange = (charger, evt) => {
myBattery.text = `${battery.chargeLevel}%`;
}

companion/index.js:

import { settingsStorage } from "settings";
import * as messaging from "messaging";
import { me as companion } from "companion";

let KEY_COLOR = "myColor";

// Settings have been changed
settingsStorage.addEventListener("change", (evt) => {
sendValue(evt.key, evt.newValue);
});

// Settings were changed while the companion was not running
if (companion.launchReasons.settingsChanged) {
// Send the value of the setting
sendValue(KEY_COLOR, settingsStorage.getItem(KEY_COLOR));
}

function sendValue(key, val) {
if (val) {
sendSettingData({
key: key,
value: JSON.parse(val)
});
}
}
function sendSettingData(data) {
// If we have a MessageSocket, send the data to the device
if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
messaging.peerSocket.send(data);
} else {
console.log("No peerSocket connection");
}
}

resources/index.gui:

<svg>
<rect id="myBackground" width="100%" height="100%" x="0" y="0" fill="black" />
<image href = "Analog.png"/>
<text id="myMonth"/>
<text id="myDay" />
<text id="myDate" />
<text id="myBattery" />
<g id="mins" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-2" y="-100" width="4" height="100" fill="#cfcfcf" />
</g>
<g id="hours" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-4" y="-70" width="8" height="70" fill="#8a8a8a" />
</g>
<g id="secs" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-1" y="-110" width="2" height="110" fill="#ff1d0a" />
</g>
<circle cx="50%" cy="50%" r="5" fill="#303841" />
</svg>

settings/index.js:

function Colors(props) {
return (
<Page>
<Section
title={<Text bold align="center">Color Settings</Text>}>
<ColorSelect
settingsKey="myColor"
colors={[
{color: '#000028'},
{color: '#000017'},
{color: 'black'},
{color: '#0087ff'},
{color: '#5600a9'},
{color: '#055300'}
]}
/>
</Section>
</Page>
);
}

registerSettingsPage(Colors);

[Gondwana]

That's a lot of unformatted code to read!

Have a look through the ossapps here (search for 'settings'). There is at least one library that largely automates the process. A cruder approach is used in BIG TIME.

[Cardboard_Boy]

Hmm I'm still having trouble grasping what's going on here. I may need to study some more before I understand this. My approach to learning wasn't very thorough, as shown by my lack of organization, so i likely just need to study the language more to understand what I'm looking at. I will use these examples in the future, though, thank you.

[SunsetRunner]

I think you might need to write your current settings to a file on unload and recall that value on load.
I personally use this one: fitbit-shared-preferences by Grégoire Sage.