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

Settings page help - colour picker

ANSWERED

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.

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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

 

 

View best answer in original post

Best Answer
5 REPLIES 5

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

 

 

Best Answer

Thanks. Took a bit of combining yours with the demo one in the online guides, but combining the two I got it working. Thanks

Best Answer
0 Votes

@JonFitbitWhat would happen if they change the color when the app is not open?  How could we allow the user to do this?

Best Answer
0 Votes

@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.

Best Answer

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.

Best Answer
0 Votes