04-17-2018 07:24
04-17-2018 07:24
Hi all.
I’ve built myself a clockface and it’s working nicely. The code isn’t necessarily the cleanest but it works with no huge battery drain so I’m happy. I’d like to add a colour selector page as a settings app, to change one maybe two of the base colours in the face. Can anyone point me to any decent resource for how to do this? The bit about settings etc in the official guides doesn’t give much usable info for a newbie and just says you need a settings page, here’s an example, and you need to tell the app to implement the change. No great detail how though. All help appreciated.
Answered! Go to the Best Answer.
04-17-2018 08:03
04-17-2018 08:03
Here's a snippet from a forthcoming clock of mine:
Define an array of colors, then use those in 2 ColorSelect fields (Background Color and Time Color).
settings/index.jsx
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="Background Color"> <ColorSelect settingsKey="colorBackground" colors={colorSet} /> </Section> <Section title="Time Color"> <ColorSelect settingsKey="colorTime" colors={colorSet} /> </Section> </Page> ); } registerSettingsPage(mySettings);
When any settings change, send the changes to the device.
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); } }
Receive settings from the companion, then apply those values to the elements. Save the settings into a file, so they load automatically when the app starts.
app/index.js
import { me } from "appbit"; import { me as device } from "device"; import * as fs from "fs"; import * as messaging from "messaging"; const SETTINGS_TYPE = "cbor"; const SETTINGS_FILE = "settings.cbor"; let settings = loadSettings();
function onsettingschange(data) {
// Apply colors to elements
if (!data) {
return;
}
if (data.colorBackground) {
myBackgroundElement.style.fill = data.colorBackground;
}
if (data.colorTime) {
myTimeElemet.style.fill = data.colorTime;
}
} // 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); }
04-17-2018 08:03
04-17-2018 08:03
Here's a snippet from a forthcoming clock of mine:
Define an array of colors, then use those in 2 ColorSelect fields (Background Color and Time Color).
settings/index.jsx
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="Background Color"> <ColorSelect settingsKey="colorBackground" colors={colorSet} /> </Section> <Section title="Time Color"> <ColorSelect settingsKey="colorTime" colors={colorSet} /> </Section> </Page> ); } registerSettingsPage(mySettings);
When any settings change, send the changes to the device.
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); } }
Receive settings from the companion, then apply those values to the elements. Save the settings into a file, so they load automatically when the app starts.
app/index.js
import { me } from "appbit"; import { me as device } from "device"; import * as fs from "fs"; import * as messaging from "messaging"; const SETTINGS_TYPE = "cbor"; const SETTINGS_FILE = "settings.cbor"; let settings = loadSettings();
function onsettingschange(data) {
// Apply colors to elements
if (!data) {
return;
}
if (data.colorBackground) {
myBackgroundElement.style.fill = data.colorBackground;
}
if (data.colorTime) {
myTimeElemet.style.fill = data.colorTime;
}
} // 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); }
04-18-2018 14:26
04-18-2018 14:26
Thanks. Took a bit of combining yours with the demo one in the online guides, but combining the two I got it working. Thanks
07-05-2018 09:18
07-05-2018 09:18
@JonFitbitWhat would happen if they change the color when the app is not open? How could we allow the user to do this?
07-06-2018 06:14 - edited 07-06-2018 06:18
07-06-2018 06:14 - edited 07-06-2018 06:18
@GrumpyCyclist wrote:Thanks. Took a bit of combining yours with the demo one in the online guides, but combining the two I got it working. Thanks
Hello,
would you be so kind to post your solution?
Thanks.
04-22-2019 06:51
04-22-2019 06:51
Hello @JonFitbit ...
Do you know how we would be able to combine the color select and Image picker into settings? Also will this retain the settings and store them on the device so if the app / clockface is closed or another app is opened and then the users subsequently returns to the clockface / app, the settings will persist and load again?
Any help at all is greatly appreciated.