I'm using Maxim's color picker in a simple Sense watch face for personal use. The settings show up and work fine when I use the Fitbit OS Simulator, but when I sideload the face or download it from the store the settings page is completely blank.
My settings/index.jsx looks like this:
import * as cp from "./colorpicker";
import * as cpConstants from "../common/colorpicker";
var colorSet = [
{ color: "deepskyblue" },
{ color: "plum" },
{ color: "#FFAEC9" },
{ color: "#FFAC0D" },
{ color: "#FFD700" },
{ color: "black" },
{ color: "white" }
];
function mainSettings(props) {
return (
<Page>
<Section>
{getColorPickerSection(props, "section1ToggleOptions", "backgroundColor", "Background color")}
{getColorPickerSection(props, "section1ToggleOptions", "gradientColor", "Gradient color")}
{getColorPickerSection(props, "section1ToggleOptions", "textColor", "Text color")}
</Section>
</Page>
);
}
function getColorPickerSection(props, toggleOptionSettingsKey, targetSettingsKey, colorTitle) {
return (
JSON.parse(props.settings[toggleOptionSettingsKey] || 'false') &&
<Section>
<Text bold>{colorTitle}</Text>
{JSON.parse(props.settings[cpConstants.TARGET_SETTINGS_KEY] !== JSON.stringify(targetSettingsKey) || 'false') ? (
<Section>
<ColorSelect
settingsKey={targetSettingsKey}
colors={colorSet}
/>
<Button
label="Custom color"
onClick={() => cp.initColorPicker(props, targetSettingsKey)}
/>
</Section>
) : (cp.getColorPicker(props, targetSettingsKey))}
</Section>
);
}
registerSettingsPage(mainSettings);
I'm not sure what other files are relevant, so please let me know and I'll share them.
