How do I create one for different labels as well? I have this one for the background but I would also like one for time, date, and a few others. What should I change to do this?
Settings
function mySettings(props) {
return (
<Page>
<Select
label="Theme"
settingsKey="theme"
options={[
{
name: "Classic Green",
value: {
background: "#002200",
foreground: "#00ff00"
}
},
{
name: "Classic Red",
value: {
background: "#220000",
foreground: "#ff0000"
}
},
{
name: "Classic Blue",
value: {
background: "#000022",
foreground: "#0000ff"
}
},
{
name: "Classic Yellow",
value: {
background: "#222200",
foreground: "#ffff00"
}
},
{
name: "Classic Pink",
value: {
background: "#220022",
foreground: "#ff00ff"
}
},
{
name: "Classic Cyan",
value: {
background: "#002222",
foreground: "#00ffff"
}
},
{
name: "Orange",
value: {
background: "#221100",
foreground: "#FF8C00"
}
},
{
name: "Cerulean",
value: {
background: "#191970",
foreground: "#5B4CFF"
}
},
{
name: "White and Black",
value: {
background: "#000000",
foreground: "#FFFFFF"
}
}]
}
/>
<Section
title={<Text bold align="center">Demo Settings</Text>}>
<Toggle
settingsKey="toggle"
label="Toggle Switch"
/>
<ColorSelect
settingsKey="color"
colors={[
{color: 'tomato'},
{color: 'sandybrown'},
{color: 'gold'},
{color: 'aquamarine'},
{color: 'deepskyblue'},
{color: 'plum'}
]}
/>
</Section>
</Page>
);
}
registerSettingsPage(mySettings);companion:
import { settingsStorage } from "settings";
import * as messaging from "messaging";
settingsStorage.onchange = function(evt) {
if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
if (evt.key === "theme") {
let data = JSON.parse(evt.newValue);
messaging.peerSocket.send(data["values"][0].value);
}
}
}
import { settingsStorage } from "settings";
import * as messaging from "messaging";
import { me } from "companion";
let KEY_COLOR = "myColor";
// Settings have been changed
settingsStorage.onchange = function(evt1) {
sendValue(evt1.key, evt.newValue);
}
// Settings were changed while the companion was not running
if (me.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");
}
}app:
import document from "document";
import clock from "clock";
import { preferences } from "user-settings";
import { goals, today } from "user-activity";
console.log((goals.steps || 0) + " steps");
let myElement = document.getElementById("myElement");
let time = document.getElementById("time");
let steps = document.getElementById("steps");
let arc = document.getElementById("arc-fg");
let txtDate = document.getElementById("date");
let date = new Date();
let month = nameOfMonth(date.getMonth());
let day = date.getDate();
txtDate.text = `${month} ${day}`;
let step = today.local.steps
function update() {
if (date = new Date()){
let step = 0;
}
steps.text = today.local.steps || 0;
let anglePercentage = (step || 0) / (goals.steps || 0);
let angle = 360 * anglePercentage;
arc.sweepAngle = angle;
}
update();
setInterval(update, 3000);
let time12 = document.getElementById("time12");
let myElement = time12;
clock.granularity = "seconds";
clock.ontick = (evt) => {
let hours = evt.date.getHours();
let minutes = evt.date.getMinutes();
let seconds = evt.date.getSeconds();
if(preferences.clockDisplay === "12h" && hours == 12) {
hours = 12;
}
else if(preferences.clockDisplay === "12h" && hours > 12) {
hours = hours - 12;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
let time12 = time;
time.text = `${hours}:${minutes.toString()}`;
}
function nameOfMonth(i) {
switch(i) {
case 0:
return "JAN";
case 1:
return "FEB";
case 2:
return "MAR";
case 3:
return "APR";
case 4:
return "MAY";
case 5:
return "JUN";
case 6:
return "JUL";
case 7:
return "AUG";
case 8:
return "SEP";
case 9:
return "OCT";
case 10:
return "NOV";
case 11:
return "DEC";
}
}
import * as messaging from "messaging";
import { me } from "appbit";
import clock from "clock";
import document from "document";
import * as fs from "fs";
import * as messaging from "messaging";
import { preferences } from "user-settings";
import * as util from "./utils";
const SETTINGS_TYPE = "cbor";
const SETTINGS_FILE = "settings.cbor";
let settings = loadSettings();
applyTheme(settings.background, settings.foreground);
function applyTheme(background, foreground) {
let items = document.getElementsByClassName("background");
items.forEach(function(item) {
item.style.fill = background;
});
let items = document.getElementsByClassName("foreground");
items.forEach(function(item) {
item.style.fill = foreground;
});
settings.background = background;
settings.foreground = foreground;
}
messaging.peerSocket.onmessage = evt => {
applyTheme(evt.data.background, evt.data.foreground);
}
me.onunload = saveSettings;
function loadSettings() {
try {
return fs.readFileSync(SETTINGS_FILE, SETTINGS_TYPE);
} catch (ex) {
// Defaults
return {
background: "#000000",
foreground: "#FFFFFF"
}
}
}
function saveSettings() {
fs.writeFileSync(SETTINGS_FILE, settings, SETTINGS_TYPE);
}
import * as messaging from "messaging";
import document from "document";
messaging.peerSocket.onmessage = function(evt1) {
time12.style.fill = evt1.data.value;
}
Fitbit Developers oversee the SDK and API forums. We're here to answer questions about Fitbit developer tools, assist with projects, and make sure your voice is heard by the development team.
Best Answer