alina
/
fitbit-squared
1
0
Fork 0
Code Pull Requests Releases Activity

initial commit

main
Alina Marquardt 2023-04-04 23:18:18 +02:00
commit e86d3f6358
11 changed files with 918 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
app/index.js Normal file
View File

@ -0,0 +1,164 @@
import document from "document";
import clock from "clock";
import { display } from "display";
import { vibration } from "haptics";
import { preferences } from "user-settings";
import * as messaging from "messaging";
import * as fs from "fs";
import * as digits from "../common/digits";
import * as colors from "../common/colors";
import * as themes from "../common/themes";
var starttime, endtime;
const debug = false;
const colorTemplate = false;
const colorCount = 25;
var colorDef = [
null,
themes.colors['whiteMarble'],
themes.colors['blackMarble']
];
var storedColorDef;
var fileSuccess = true;
console.log('reading color def');
try {
storedColorDef = fs.readFileSync("colordef.txt", "cbor");
}
catch(err) {
fileSuccess = false;
console.log('color def not found');
}
if (fileSuccess) {
colorDef = storedColorDef;
}
var storedColorSet;
var fileSuccess = true;
console.log('reading colors file');
try {
storedColorSet = fs.readFileSync("colors.txt", "cbor");
}
catch(err) {
fileSuccess = false;
console.log('colors file not found, scheduling initial color generation');
}
if (fileSuccess) {
colors.setCurrentColorSet(storedColorSet);
}
if (debug) {
let touchArea = document.getElementById('touchArea');
display.autoOff = false;
display.on = true;
colors.initColors(colorDef, colorCount);
touchArea.onclick = (e) => {
colors.initColors(colorDef, colorCount);
updateClock(true);
}
}
function updateClock(forceRedraw) {
starttime = new Date();
console.log('started updateClock with forceRedraw = '+forceRedraw);
let currDate = new Date();
let hours = currDate.getHours();
let displayHours = hours;
if (preferences.clockDisplay === '12h') {
displayHours = displayHours % 12;
displayHours = displayHours ? displayHours : 12;
}
let minutes = currDate.getMinutes();
let day = currDate.getDate();
let month = currDate.getMonth()+1;
let newDigits = [
Math.floor(displayHours/10),
displayHours%10,
Math.floor(minutes/10),
minutes%10,
Math.floor(day/10),
day%10,
Math.floor(month/10),
month%10,
];
if (debug) {
newDigits[0] = 1;
newDigits[1] = 7;
newDigits[2] = 0;
newDigits[3] = 4;
newDigits[4] = 1;
newDigits[5] = 3;
newDigits[6] = 0;
newDigits[7] = 7;
}
if (colorTemplate) {
newDigits[0] = 'Ÿ';
newDigits[1] = 'ÿ';
newDigits[2] = 'Ÿ';
newDigits[3] = 'ÿ';
}
endtime = new Date();
console.log('updateClock is ready for setDigits at '+(endtime-starttime)+' ms');
digits.setDigits(newDigits, forceRedraw);
endtime = new Date();
console.log('updateClock finished setDigits at '+(endtime-starttime)+' ms');
}
display.onchange = () => {
if (!display.on) {
colors.initColors(colorDef, colorCount);
updateClock(true);
}
}
clock.granularity = "minutes";
clock.ontick = () => updateClock();
updateClock();
messaging.peerSocket.onmessage = e => {
console.log("Message received -> "+e.data.key+": "+e.data.newValue);
display.poke();
vibration.start("bump");
let updateColors = false
switch (e.data.key) {
case 'digitColor':
colorDef[1] = themes.colors[e.data.newValue];
updateColors = true;
break;
case 'ornamentColor':
colorDef[2] = themes.colors[e.data.newValue];
updateColors = true;
break;
};
if (updateColors) {
colors.initColors(colorDef, colorCount);
updateClock(true);
vibration.start("bump");
fs.writeFileSync("colordef.txt", colorDef, "cbor");
}
}
messaging.peerSocket.onopen = () => {
console.log("Clockface opened socket");
};
messaging.peerSocket.close = () => {
console.log("Clockface closed socket");
};
messaging.peerSocket.onerror = (err) => {
console.log("Clockface socket error: " + err.code + " - " + err.message);
}
setTimeout(() => {
colors.initColors(colorDef, colorCount);
updateClock(true);
}, 200);

80
common/characters.js Normal file
View File

@ -0,0 +1,80 @@
export const charwidth = 5;
export const chars = {
'ÿ': [
[1,1,1,1,1],
[1,1,1,1,1],
[1,1,1,1,1],
[1,1,1,1,1],
[1,1,1,1,1]
],
'Ÿ': [
[2,2,2,2,2],
[2,2,2,2,2],
[2,2,2,2,2],
[2,2,2,2,2],
[2,2,2,2,2]
]
};
export const numbers = [[
[1,1,1,1,1],
[1,0,0,0,1],
[1,0,2,0,1],
[1,0,0,0,1],
[1,1,1,1,1]
], [
[2,2,0,1,1],
[0,0,0,0,1],
[2,2,2,0,1],
[0,0,0,0,1],
[2,2,2,0,1]
], [
[1,1,1,1,1],
[0,0,0,0,1],
[1,1,1,1,1],
[1,0,0,0,0],
[1,1,1,1,1]
], [
[1,1,1,1,1],
[0,0,0,0,1],
[0,1,1,1,1],
[0,0,0,0,1],
[1,1,1,1,1]
], [
[1,0,2,0,1],
[1,0,0,0,1],
[1,1,1,1,1],
[0,0,0,0,1],
[2,2,2,0,1]
], [
[1,1,1,1,1],
[1,0,0,0,0],
[1,1,1,1,1],
[0,0,0,0,1],
[1,1,1,1,1]
], [
[1,1,1,1,1],
[1,0,0,0,0],
[1,1,1,1,1],
[1,0,0,0,1],
[1,1,1,1,1]
], [
[1,1,1,1,1],
[0,0,0,0,1],
[2,0,2,0,1],
[2,0,2,0,1],
[2,0,2,0,1]
], [
[1,1,1,1,1],
[1,0,0,0,1],
[1,1,1,1,1],
[1,0,0,0,1],
[1,1,1,1,1]
], [
[1,1,1,1,1],
[1,0,0,0,1],
[1,1,1,1,1],
[0,0,0,0,1],
[1,1,1,1,1]
]];

109
common/colors.js Normal file
View File

@ -0,0 +1,109 @@
import * as themes from "themes";
import * as fs from "fs";
let defaultColorSet = [
'#666',
'#333'
]
function hslToRgb(h, s, l) {
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
var hue2rgb = (p, q, t) => {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
const defaultRanges = [[0,1],[0.2,1],[0.2,0.8]];
var currentColorSet = defaultColorSet;
var colorPosition = [0, 0];
var colorReverse = [false, false];
export function setCurrentColorSet(colorSet) {
currentColorSet = colorSet;
}
function generateColors(hsl, variance, ranges, number) {
let colorArray = [];
for (let i=0; i<number; i++) {
colorArray.push(hslToHex(hsl, variance, ranges));
}
return colorArray;
}
function generateColorSet(colorDef, number) {
let colorSet = new Array([],[]);
for (let i=0; i<2; i++) {
if (typeof colorDef[i+1] === 'string') {
colorSet[i] = colorDef[i+1];
} else {
colorSet[i] = generateColors(colorDef[i+1].hsl, colorDef[i+1].variance, colorDef[i+1].ranges, number);
}
}
return colorSet;
}
export function initColors(colorDef, number) {
currentColorSet = generateColorSet(colorDef, number);
console.log('writing colors file');
fs.writeFileSync("colors.txt", currentColorSet, "cbor");
}
export function pickColor(type) {
let currentColor;
if (typeof currentColorSet[type] === 'string') {
currentColor = currentColorSet[type];
} else {
currentColor = currentColorSet[type][colorPosition[type]];
if (colorPosition[type] == currentColorSet[type].length-1) {
colorReverse[type] = true;
} else if (colorPosition[type] == 0) {
colorReverse[type] = false;
}
if (colorReverse[type]) {
colorPosition[type]--;
} else {
colorPosition[type]++;
}
}
return currentColor;
}
export function hslToHex(hsl, variance, ranges) {
let variance = variance || false;
let ranges = ranges || defaultRanges;
if (variance) {
for(let i=0; i<3; i++) {
hsl[i]+=Math.random()*variance[i]-(variance[i]/2);
if (hsl[i] < ranges[i][0]) {
hsl[i] = ranges[i][0];
} else if (hsl[i] > ranges[i][1]) {
hsl[i] = ranges[i][1];
}
}
}
let rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

69
common/digits.js Normal file
View File

@ -0,0 +1,69 @@
import document from "document";
import * as colors from "colors";
import * as characters from "characters";
var starttime, endtime;
export let currentDigits = [-1,-1,-1,-1,-1,-1,-1,-1];
function getSquares(character) {
if (typeof character === 'string') {
return characters.chars[character];
} else {
return characters.numbers[character];
}
}
export function setDigits(digits, forceRedraw) {
for(let i=0; i<digits.length; i++) {
let digit = digits[i];
if (forceRedraw || digit != currentDigits[i]) {
setDigit(i, digit);
currentDigits[i] = digit;
}
}
}
export function setDigit(digit, character) {
/*
starttime = new Date();
console.log('updating digit '+digit+': '+character);
*/
/*
squares.forEach(function(line, lineNum) {
line.forEach(function(square, squareNum) {
let squareElem = digitElem.getElementById(lineNum+'-'+squareNum);
if (square == 0) {
squareElem.style.display = 'none';
} else {
//let localColor = colors.pickColor(square-1);
squareElem.style.display = 'inline';
//squareElem.style.fill = localColor;
squareElem.style.fill = 'red';
}
});
});
*/
let squares = getSquares(character);
let digitElemChildren = document.getElementById('digit'+digit).getElementsByClassName('square');
for (let i = 0; i < digitElemChildren.length; i++) {
let square = squares[Math.floor(i/characters.charwidth)][i%characters.charwidth];
let squareElem = digitElemChildren[i];
if (square == 0) {
if (squareElem.style.display !== 'none') {
squareElem.style.display = 'none';
};
} else {
let localColor = colors.pickColor(square-1);
if (squareElem.style.display !== 'inline') {
squareElem.style.display = 'inline';
};
squareElem.style.fill = localColor;
}
}
/*
endtime = new Date();
console.log('digit updated at '+(endtime-starttime)+' ms');
*/
}

182
common/themes.js Normal file
View File

@ -0,0 +1,182 @@
export const colors = {
whiteMarble: {
hsl: [0.9,0.0,0.7],
variance: [0.01,0.2,0.2],
ranges: [
[0.8,1],
[0.0,0.05],
[0.65,1]
]
},
blackMarble: {
hsl: [0.9,0.0,0.2],
variance: [0.01,0.2,0.1],
ranges: [
[0.8,1],
[0.0,0.05],
[0.15,0.25]
]
},
clearWater: {
hsl: [0.75,1.0,0.6],
variance: [0.1,0.1,0.05],
ranges: [
[0.6,0.7],
[0.8,1.0],
[0.6,0.7]
]
},
void: {
hsl: [0.8,1,0.2],
variance: [0,0.2,0.1],
ranges: [
[0,1],
[0.5,1],
[0.2,0.4]
]
},
lava: {
hsl: [0.1,1,0.5],
variance: [0.12,0.5,0.5],
ranges: [
[0.02,0.15],
[0.8,1],
[0.5,0.6]
]
},
cloudCover: {
hsl: [0.7,0.6,0.7],
variance: [0.05,0.05,0.2],
ranges: [
[0.7,0.72],
[0.4,0.6],
[0.7,0.9]
]
},
forest: {
hsl: [0.35,0.7,0.4],
variance: [0.35,0.05,0.3],
ranges: [
[0.25,0.35],
[0.7,0.8],
[0.35,0.5]
]
},
ruby: {
hsl: [0,0.8,0.4],
variance: [0.05,0.05,0.2],
ranges: [
[0,0.02],
[0.8,0.9],
[0.35,0.55]
]
},
amethyst: {
hsl: [0.8,0.8,0.5],
variance: [0.05,0.05,0.2],
ranges: [
[0.75,0.8],
[0.8,0.9],
[0.4,0.55]
]
},
spottyIce: {
hsl: [0.6,0.8,0.5],
variance: [0.05,0.05,1],
ranges: [
[0.55,0.6],
[0.8,0.9],
[0.2,0.8]
]
},
frost: {
hsl: [0.6,0.8,0.8],
variance: [0.05,0.05,0.7],
ranges: [
[0.55,0.6],
[0.8,0.9],
[0.8,1]
]
},
mint: {
hsl: [0.3,0.8,0.8],
variance: [0.05,0.05,0.7],
ranges: [
[0.25,0.3],
[0.8,0.9],
[0.8,1]
]
},
citrus: {
hsl: [0.15,0.8,0.8],
variance: [0.05,0.05,0.7],
ranges: [
[0.1,0.15],
[0.8,0.9],
[0.6,0.8]
]
},
salad: {
hsl: [0.2,0.8,0.7],
variance: [0.05,0.05,0.3],
ranges: [
[0.17,0.27],
[0.7,0.9],
[0.5,0.7]
]
},
sand: {
hsl: [0.1,0.5,0.7],
variance: [0.05,0.8,0.6],
ranges: [
[0.08,0.1],
[0.4,0.6],
[0.5,0.7]
]
},
orangeJello: {
hsl: [0.07,1,0.5],
variance: [0.3,0,0.1],
ranges: [
[0.06,0.08],
[1,1],
[0.4,0.55]
]
},
electric: {
hsl: [0.5,1,0.5],
variance: [0.3,0.1,0.1],
ranges: [
[0.4,0.5],
[0.95,1],
[0.45,0.55]
]
},
orchid: {
hsl: [0.8,0.4,0.3],
variance: [0.1,0.05,0.1],
ranges: [
[0.75,0.9],
[0.2,0.4],
[0.4,0.7]
]
},
rose: {
hsl: [1,0.7,0.3],
variance: [0.1,0.05,0.2],
ranges: [
[0.95,1],
[0.7,0.8],
[0.45,0.6]
]
},
peach: {
hsl: [1,0.7,0.7],
variance: [0.1,0.05,0.15],
ranges: [
[0.95,1],
[0.7,0.8],
[0.65,0.75]
]
},
}

47
companion/index.js Normal file
View File

@ -0,0 +1,47 @@
import * as messaging from "messaging";
import { settingsStorage } from "settings";
//console.log("Companion Started");
messaging.peerSocket.onopen = () => {
};
messaging.peerSocket.close = () => {
};
settingsStorage.onchange = evt => {
let data = {}
switch(evt.key) {
case 'digitColor':
case 'ornamentColor':
data = {
key: evt.key,
newValue: JSON.parse(evt.newValue).values[0].value
};
break;
case 'elements':
let elements = [];
let newValue = JSON.parse(evt.newValue);
for(let i=0; i < newValue.length; i++) {
elements[i] = newValue[i].value;
}
data = {
key: evt.key,
newValue: elements
};
default:
data = {
key: evt.key,
newValue: evt.newValue
};
break;
}
sendVal(data);
};
function sendVal(data) {
if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
messaging.peerSocket.send(data);
}
}

18
package.json Normal file
View File

@ -0,0 +1,18 @@
{
"fitbit": {
"appUUID": "ded37ece-013f-4291-8704-da8374ffdae0",
"appType": "app",
"appDisplayName": "Squared",
"iconFile": "resources/icon.png",
"wipeColor": "#8bc34a",
"requestedPermissions": [],
"buildTargets": [
"meson"
],
"i18n": {
"en": {
"name": "Squared"
}
}
}
}

25
resources/index.gui Normal file
View File

@ -0,0 +1,25 @@
<svg class="background">
<use href="#digit" x="40" y="15" id="digit0" class="digits">
</use>
<use href="#digit" x="160" y="15" id="digit1" class="digits">
</use>
<use href="#digit" x="40" y="131" id="digit2" class="digits">
</use>
<use href="#digit" x="160" y="131" id="digit3" class="digits">
</use>
<use href="#digit" x="40" y="245" id="digit4" class="digits">
<set href="scaler" attributeName="transform" to="scale(0.4)" />
</use>
<use href="#digit" x="100" y="245" id="digit5" class="digits">
<set href="scaler" attributeName="transform" to="scale(0.4)" />
</use>
<use href="#digit" x="160" y="245" id="digit6" class="digits">
<set href="scaler" attributeName="transform" to="scale(0.4)" />
</use>
<use href="#digit" x="220" y="245" id="digit7" class="digits">
<set href="scaler" attributeName="transform" to="scale(0.4)" />
</use>
<rect x="0" y="0" width="100%" height="100%" opacity="0" id="touchArea" pointer-events="visible" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1004 B

8
resources/styles.css Normal file
View File

@ -0,0 +1,8 @@
.background {
viewport-fill: black;
}
.square {
fill: #444444;
display: inline;
}

115
resources/widgets.gui Normal file
View File

@ -0,0 +1,115 @@
<svg>
<defs>
<link rel="stylesheet" href="styles.css" />
<link rel="import" href="/mnt/sysassets/widgets_common.gui" />
<symbol id="digit">
<g id="scaler" transform="scale(1)">
<rect x="0" y="0" width="20" height="20" id="0-0" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="20" y="0" width="20" height="20" id="0-1" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="40" y="0" width="20" height="20" id="0-2" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="60" y="0" width="20" height="20" id="0-3" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="80" y="0" width="20" height="20" id="0-4" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="0" y="20" width="20" height="20" id="1-0" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="20" y="20" width="20" height="20" id="1-1" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="40" y="20" width="20" height="20" id="1-2" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="60" y="20" width="20" height="20" id="1-3" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="80" y="20" width="20" height="20" id="1-4" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="0" y="40" width="20" height="20" id="2-0" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="20" y="40" width="20" height="20" id="2-1" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="40" y="40" width="20" height="20" id="2-2" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="60" y="40" width="20" height="20" id="2-3" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="80" y="40" width="20" height="20" id="2-4" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="0" y="60" width="20" height="20" id="3-0" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="20" y="60" width="20" height="20" id="3-1" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="40" y="60" width="20" height="20" id="3-2" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="60" y="60" width="20" height="20" id="3-3" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="80" y="60" width="20" height="20" id="3-4" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="0" y="80" width="20" height="20" id="4-0" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="20" y="80" width="20" height="20" id="4-1" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="40" y="80" width="20" height="20" id="4-2" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="60" y="80" width="20" height="20" id="4-3" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
<rect x="80" y="80" width="20" height="20" id="4-4" class="square">
<animate attributeName="width" begin="enable" from="0" to="100" dur="0.4" easing="linear" />
<animate attributeName="width" begin="disable" from="100" to="0" dur="0" easing="linear" />
</rect>
</g>
</symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

101
settings/index.jsx Normal file
View File

@ -0,0 +1,101 @@
function Squared(props) {
return (
<Page>
<Section
title={<Text bold>Color Settings</Text>}>
<Select
label={`Digit Color`}
settingsKey="digitColor"
options={[
{name:"Black Marble", value:"blackMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAFVBMVEUxLTE6OToxMTEpKCkpJCEpLSkxLSkJSerLAAAAUklEQVR4AWJAAEEsQAkOjAHt1KERADEMA8HmvoVvIf2XEGaRAGPNHvWsoCcEaSDI9yjnkMwUEARB1k8igw0EQZDtk0gNBEGQ9E9nyjUzCIIUkAvkduff9+hePgAAAABJRU5ErkJggg=="},
{name:"White Marble", value:"whiteMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEWtqq2toqWlpqWtpqW9srW9ur3Fvr3W19bFvsXW0tbFxsW9vr3Oxs7e39739/f////v7++ZeDKyAAAAV0lEQVR4Ae3NxQGFAAwFsK+47D8tDIC7pbfay/s1st4LZvsjEAgEAoFAfmPlSyEQCAQCgUDC8c8QCAQCgUAuhGS3RCAQCAQCgZQtw2rZ7HgEAoFAIBBIDZ3YVCVeA/QNAAAAAElFTkSuQmCC"},
{name:"Orange Jelly", value:"orangeJello", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAHlBMVEX/fQj/WQD/dQDmUQDWZQDvcQD/ZQj/ggj3dQD/YQik+4HRAAAAW0lEQVR4AWJAAEE4UIIDYzhwgQNA+3JMBTAMQzEQgymUgimUQiiEQiiEQtl202QE/+n2s1gsCWWhsHEGCcVisVw0Ch8KCcVisTQuzmAjoVgslsLCi8aDgGKxWH4BzWWMn+sDSwAAAABJRU5ErkJggg=="},
{name:"Lava", value:"lava", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEXm0hnv20L/5ynvwiH30jr/6xn/0jH/ogD/mgD/4wDm1yH/qjr/qgD/6zH3ngjmZRn/TQD/RSnveUImK5OiAAAAV0lEQVR4AWJkwAIYAe3NAQYAIAxA0SAI0f0PWxcYYMbyPuDDS371CAQCgUAgkAmBQCAQCORLZASt9ggEAoFAIJAdzfYIBAKBQCCQE8yb++oRCAQCgUAgD1HRVNlIfSgpAAAAAElFTkSuQmCC"},
{name:"Citrus", value:"citrus", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXv31rvxkL324Tv10L346X366X354zvykLv42Pv20LvwmP315Tv21r331r376X353Pv0kJqeV04AAAAZ0lEQVR4Ae3NNwECARRAMXpv/tVi4E1w96fEQDZlG3ZhG/ZBIpFIJBLJfHIIx3AKx3AOEolEIpFI5pNLuIZzuIV7kEgkEolEMp9swyM8wyu8g0QikUgkkvnkE15/+ASJRCKRSCTjyRcAC0UQZL14mwAAAABJRU5ErkJggg=="},
{name:"Salad", value:"salad", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEX392v39yne8xC98wje8wjF8wi99zHm81Lm7xDm6xDm7yHW6xDW70Lm7yne7ylt9AkdAAAASElEQVR4AWJkgANBQDt1UAIACARR1HB2spPlrGCBQTwPb08Dn3fdz4UgDQSZz3zCQhCkieSMIEgrGeFWfiEIghSRnTOCdBPkAqEboZH2xVF1AAAAAElFTkSuQmCC"},
{name:"Forest", value:"forest", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEUZ5yl72xljshBaohBjuhAQqiEQtiEZzikZ4zEh3zEh3ykx3yFrvhkQmiEZ0jEZyiFCphl456u0AAAAXUlEQVR4Ae3NAQaAUBRE0b5ESvvfaQC1gQeM8nxnAJdxxhJsBA0CgXyLQCAQyBqcIZC+CAQCgUD2KREIBAKBQCBXcL6LdrZAIBAIBAKBbEU8ivYE7XcEAoFAIBDIC1HkVDmvkMAnAAAAAElFTkSuQmCC"},
{name:"Mint", value:"mint", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAIVBMVEW1+5z3//f////W+8W9+6Xv/+bF96W9+5zF+6X3/++1+6XoAIbdAAAAU0lEQVR4Ae3LMRWAMBAFwVg4C2chFmIhFrCABSxgAZV0S4OC/3b6GZ9CY2IhoVgsloWNAxupxWKxTDQKAwnFYrGcaFzoHwnFYrHceNAoRBWLxfICzAaeRfo19vcAAAAASUVORK5CYII="},
{name:"Electric", value:"electric", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEUQ/3MI+2sQ+/8I+/8Z+3MQ+2sZ/3MA72MA59YA4+YA9/cA++YA6+8A7+8A45SSunamAAAAWUlEQVRYw+3WMQ0AIAxEUZCAhYrDExrQggSwgAW2sjSE+fI7XZq+zpeTT3mmOxkCgQgQ82jB4YZAIKKkBsvuqQZvIBCIAmmfVWFBIBApMp8FYQRFAgKBCJADohaViafomEQAAAAASUVORK5CYII="},
{name:"Frost", value:"frost", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEX///+tzv+tyv+cwv+cxv+10v+91//e7//O6/+czv+lyv+lyvfv9/+lzvel1/el2/fe8/+FHV4hAAAAaElEQVR4Ae3NsRUBQQBAweUAsPqvVgM/EO27YKaBGf86hBGOQbI+kUgkEolkC6dwDpewBYlEIpFIJPtIruEWRrgHiUQikUgk65NHqHiEZ3gFiUQikUgk65N3+IQZvmGG5YlEIpFIJJIf7zv6AVp4kJcAAAAASUVORK5CYII="},
{name:"Spotty Ice", value:"spottyIce", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEWlyvelwvelzvel1/djtvcQnu+l2/97xvdKnu9jru8IKFpKku8IQWMIRXMQouYxou8IQVoIRVoIWZRMFe9xAAAAYUlEQVR4Ae3YAQaAQBCF4RZRCLr/RRPqAgPseBbfAH68D4AZW3GjuUEgeQQCgUAge/PguwQCgUAgEAjknBh8inYsgUAgEAgEArkCz4I8AoFAIBAI5C7i19vyCAQCgUAgkB8sFnxNbAzCbwAAAABJRU5ErkJggg=="},
{name:"Clear Water", value:"clearWater", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVjXf9rgvdzafeMdfdrafdjivdSlvdSafdaffdamv9Saf9Siv9Kkv9jef9rYf9ajv9jnv9rmv9jgv97bf90pYKvAAAAXUlEQVR4Ae3NAQaAYAzH0b4IQuj+d10XGMYyyRvgZ39vbcmtl9s8AoFAIBAI5IBAIBAIBPJL5GyMI2k7BAKBQCCQTyBXZ1xs8wgEAoFAIJC7+BiNNo5AIBAIBAJ5AA31aQGn5Q7DAAAAAElFTkSuQmCC"},
{name:"Cloud Cover", value:"cloudCover", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAANlBMVEXFsu/WzvfFuu/e2/fWyvfe0ve9su+tnubOxu/Wyu/e1/fOwu/m2/e9tua1pualjt6tot6lktYpVHzuAAAAZklEQVR4Ae3NNQEDARRAsaMy+zdbA2/+U2IgS1nDFvawhflEIpFIJBLJGio+SjgFiUQikUgk88kRzuESrmEP84lEIpFIJJJbuIc9PMIzzCcSiUQikUhe4R0+4Rt+QSKRSCQSyXjyBy5SCbDqRZu3AAAAAElFTkSuQmCC"},
{name:"Amethyst", value:"amethyst", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEW9FO+9EO+lDM6MDL2cDMWcEOatHO+lKO+1EPe1EO/FGPfOJPetJPeMGPdzDN6EEPeUKO+QxRsXAAAAYElEQVR4Ae3OAQaAYBCE0bY/RN3/tFEXGKDKxhvAB29qCqt3GwQCgUAgkA+QEeJ85yEEAoFAIJAWyJoiBAKBQCC/RyDbw0hBIBAIBAJpgewhLqEdoY3QTggEAoFAIB2QCw+GLGHIj3WsAAAAAElFTkSuQmCC"},
{name:"Void", value:"void", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEVSAGtjBHtrAIRzAIxzAJRrCIRzBJR7CJSEBKV7BJx7AJSMAK2cAL2UBLWMBLW7TliIAAAAUklEQVRYw+3UMREAIAwEQSIBT1jAAqKwgiewQJc0DJP65766ItvGiq9+K2YQCESAtCSpEAhEinTPwPNxOCAQiBRZnif7LiAQiADZD/IvCAQiQC4cwbLV6IRp0gAAAABJRU5ErkJggg=="},
{name:"Orchid", value:"orchid", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVzPYx7PYxrQZRzQYyERZSMQYyMPYyMQZycQZSUQYyUQXucSXulSYytTaWtVZS1WZy1Ya21cb2lab21Yb02zd0GAAAAYElEQVR4Ae3NAQaAQBiE0X4WQtD9r1p1gcGyWS1vAJ/h1RZWA+0ObT4CgUAgEAikfYzULxAIBAKBQCB7iFdobSkEAoFAIBDI0XuEQCAQCASyFHJ2Hp+BBoFAIBAIZDryAvysaJ0B2r8hAAAAAElFTkSuQmCC"},
{name:"Peach", value:"peach", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEXvipzvkpzvfXvvYXvvZWvvcYTvaYzvhqXvgoTvaYTvYXPvaZTvdZz3gpwxmHJ4AAAATklEQVRYw+3LMQ0AIAxEUZBQC3hCC1rwhAYsYIHtJkI6X36nn15eLbpIVoVAIAakK4+qQSAQezK/MwQCcSVLeZIFgUAcyHg8tyogEIgnuZkl0YkUM5s8AAAAAElFTkSuQmCC"},
{name:"Rose", value:"rose", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEXmTXvmUXveNUrOJCHFICHePTrmUWPmSXPeQXPeNWveJELFICnFIELWIFrmRXPmUWveOTrmTVLmSXvmTWPMDo4dAAAAX0lEQVR4Ae3WAQaAAAyG0YYSBN3/pIW6wDCYJW+Az88DWCzJRX9rRiAQCAQCgazF4Z20LWnXJxAIBAKBQCB7wyMxj0AgEAgEAjl+iUAgEAgEAjmLw6fe5hEIBAKBQCAvrDxoTTe8DTYAAAAASUVORK5CYII="},
{name:"Ruby", value:"ruby", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAP1BMVEWtEAitCAjFEAitHAi9HAjeIAjvKAjmIAjOJAj3LRnvLRnOFBDvICHvMSHvRSnWLRCtJBDFKBDmMRnvRTHvMTEmSGP4AAAAXElEQVR4AWJkwAIYKRADtDcXBQACABDAcLf+ZSEC7nufbFzYg0AgEAgEci6ytJjsgCEQCAQCgVyP5HvGEAgEAoFAHos0O8YBBAKBQCCQxyLDDiSEQCAQCATyVGQCskwsnQlcdKQAAAAASUVORK5CYII="},
{name:"Sand", value:"sand", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXWupTWspTeunvetoTWplq1ikrOjjHeqmPOpmveomvWklLFlmvmtoS1fUrWmlrOgjHFmlLNbQHKAAAAZ0lEQVR4Ae3NwRUBMABAMYUCxf7TWuCf+xySBXIoIxzDKZzD/kQikUgkEsklzHANtzDC/kQikUgkEsk9PMIzjPAfiUQikUgkkldY4R0+YYb9iUQikUgkkhW+YYUZKt6eSCQSiUQi+QHbkywQRzo7IQAAAABJRU5ErkJggg=="},
]}
renderItem={
(option) =>
<TextImageRow
label={option.name}
//sublabel="Sub-Label"
icon={option.icon}
/>
}
onSelection={(selection) => console.log(selection)}
/>
<Select
label={`Ornament Color`}
settingsKey="ornamentColor"
options={[
{name:"Black Marble", value:"blackMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAFVBMVEUxLTE6OToxMTEpKCkpJCEpLSkxLSkJSerLAAAAUklEQVR4AWJAAEEsQAkOjAHt1KERADEMA8HmvoVvIf2XEGaRAGPNHvWsoCcEaSDI9yjnkMwUEARB1k8igw0EQZDtk0gNBEGQ9E9nyjUzCIIUkAvkduff9+hePgAAAABJRU5ErkJggg=="},
{name:"White Marble", value:"whiteMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEWtqq2toqWlpqWtpqW9srW9ur3Fvr3W19bFvsXW0tbFxsW9vr3Oxs7e39739/f////v7++ZeDKyAAAAV0lEQVR4Ae3NxQGFAAwFsK+47D8tDIC7pbfay/s1st4LZvsjEAgEAoFAfmPlSyEQCAQCgUDC8c8QCAQCgUAuhGS3RCAQCAQCgZQtw2rZ7HgEAoFAIBBIDZ3YVCVeA/QNAAAAAElFTkSuQmCC"},
{name:"Orange Jelly", value:"orangeJello", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAHlBMVEX/fQj/WQD/dQDmUQDWZQDvcQD/ZQj/ggj3dQD/YQik+4HRAAAAW0lEQVR4AWJAAEE4UIIDYzhwgQNA+3JMBTAMQzEQgymUgimUQiiEQiiEQtl202QE/+n2s1gsCWWhsHEGCcVisVw0Ch8KCcVisTQuzmAjoVgslsLCi8aDgGKxWH4BzWWMn+sDSwAAAABJRU5ErkJggg=="},
{name:"Lava", value:"lava", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEXm0hnv20L/5ynvwiH30jr/6xn/0jH/ogD/mgD/4wDm1yH/qjr/qgD/6zH3ngjmZRn/TQD/RSnveUImK5OiAAAAV0lEQVR4AWJkwAIYAe3NAQYAIAxA0SAI0f0PWxcYYMbyPuDDS371CAQCgUAgkAmBQCAQCORLZASt9ggEAoFAIJAdzfYIBAKBQCCQE8yb++oRCAQCgUAgD1HRVNlIfSgpAAAAAElFTkSuQmCC"},
{name:"Citrus", value:"citrus", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXv31rvxkL324Tv10L346X366X354zvykLv42Pv20LvwmP315Tv21r331r376X353Pv0kJqeV04AAAAZ0lEQVR4Ae3NNwECARRAMXpv/tVi4E1w96fEQDZlG3ZhG/ZBIpFIJBLJfHIIx3AKx3AOEolEIpFI5pNLuIZzuIV7kEgkEolEMp9swyM8wyu8g0QikUgkkvnkE15/+ASJRCKRSCTjyRcAC0UQZL14mwAAAABJRU5ErkJggg=="},
{name:"Salad", value:"salad", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEX392v39yne8xC98wje8wjF8wi99zHm81Lm7xDm6xDm7yHW6xDW70Lm7yne7ylt9AkdAAAASElEQVR4AWJkgANBQDt1UAIACARR1HB2spPlrGCBQTwPb08Dn3fdz4UgDQSZz3zCQhCkieSMIEgrGeFWfiEIghSRnTOCdBPkAqEboZH2xVF1AAAAAElFTkSuQmCC"},
{name:"Forest", value:"forest", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEUZ5yl72xljshBaohBjuhAQqiEQtiEZzikZ4zEh3zEh3ykx3yFrvhkQmiEZ0jEZyiFCphl456u0AAAAXUlEQVR4Ae3NAQaAUBRE0b5ESvvfaQC1gQeM8nxnAJdxxhJsBA0CgXyLQCAQyBqcIZC+CAQCgUD2KREIBAKBQCBXcL6LdrZAIBAIBAKBbEU8ivYE7XcEAoFAIBDIC1HkVDmvkMAnAAAAAElFTkSuQmCC"},
{name:"Mint", value:"mint", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAIVBMVEW1+5z3//f////W+8W9+6Xv/+bF96W9+5zF+6X3/++1+6XoAIbdAAAAU0lEQVR4Ae3LMRWAMBAFwVg4C2chFmIhFrCABSxgAZV0S4OC/3b6GZ9CY2IhoVgsloWNAxupxWKxTDQKAwnFYrGcaFzoHwnFYrHceNAoRBWLxfICzAaeRfo19vcAAAAASUVORK5CYII="},
{name:"Electric", value:"electric", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEUQ/3MI+2sQ+/8I+/8Z+3MQ+2sZ/3MA72MA59YA4+YA9/cA++YA6+8A7+8A45SSunamAAAAWUlEQVRYw+3WMQ0AIAxEUZCAhYrDExrQggSwgAW2sjSE+fI7XZq+zpeTT3mmOxkCgQgQ82jB4YZAIKKkBsvuqQZvIBCIAmmfVWFBIBApMp8FYQRFAgKBCJADohaViafomEQAAAAASUVORK5CYII="},
{name:"Frost", value:"frost", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEX///+tzv+tyv+cwv+cxv+10v+91//e7//O6/+czv+lyv+lyvfv9/+lzvel1/el2/fe8/+FHV4hAAAAaElEQVR4Ae3NsRUBQQBAweUAsPqvVgM/EO27YKaBGf86hBGOQbI+kUgkEolkC6dwDpewBYlEIpFIJPtIruEWRrgHiUQikUgk65NHqHiEZ3gFiUQikUgk65N3+IQZvmGG5YlEIpFIJJIf7zv6AVp4kJcAAAAASUVORK5CYII="},
{name:"Spotty Ice", value:"spottyIce", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEWlyvelwvelzvel1/djtvcQnu+l2/97xvdKnu9jru8IKFpKku8IQWMIRXMQouYxou8IQVoIRVoIWZRMFe9xAAAAYUlEQVR4Ae3YAQaAQBCF4RZRCLr/RRPqAgPseBbfAH68D4AZW3GjuUEgeQQCgUAge/PguwQCgUAgEAjknBh8inYsgUAgEAgEArkCz4I8AoFAIBAI5C7i19vyCAQCgUAgkB8sFnxNbAzCbwAAAABJRU5ErkJggg=="},
{name:"Clear Water", value:"clearWater", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVjXf9rgvdzafeMdfdrafdjivdSlvdSafdaffdamv9Saf9Siv9Kkv9jef9rYf9ajv9jnv9rmv9jgv97bf90pYKvAAAAXUlEQVR4Ae3NAQaAYAzH0b4IQuj+d10XGMYyyRvgZ39vbcmtl9s8AoFAIBAI5IBAIBAIBPJL5GyMI2k7BAKBQCCQTyBXZ1xs8wgEAoFAIJC7+BiNNo5AIBAIBAJ5AA31aQGn5Q7DAAAAAElFTkSuQmCC"},
{name:"Cloud Cover", value:"cloudCover", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAANlBMVEXFsu/WzvfFuu/e2/fWyvfe0ve9su+tnubOxu/Wyu/e1/fOwu/m2/e9tua1pualjt6tot6lktYpVHzuAAAAZklEQVR4Ae3NNQEDARRAsaMy+zdbA2/+U2IgS1nDFvawhflEIpFIJBLJGio+SjgFiUQikUgk88kRzuESrmEP84lEIpFIJJJbuIc9PMIzzCcSiUQikUhe4R0+4Rt+QSKRSCQSyXjyBy5SCbDqRZu3AAAAAElFTkSuQmCC"},
{name:"Amethyst", value:"amethyst", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEW9FO+9EO+lDM6MDL2cDMWcEOatHO+lKO+1EPe1EO/FGPfOJPetJPeMGPdzDN6EEPeUKO+QxRsXAAAAYElEQVR4Ae3OAQaAYBCE0bY/RN3/tFEXGKDKxhvAB29qCqt3GwQCgUAgkA+QEeJ85yEEAoFAIJAWyJoiBAKBQCC/RyDbw0hBIBAIBAJpgewhLqEdoY3QTggEAoFAIB2QCw+GLGHIj3WsAAAAAElFTkSuQmCC"},
{name:"Void", value:"void", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEVSAGtjBHtrAIRzAIxzAJRrCIRzBJR7CJSEBKV7BJx7AJSMAK2cAL2UBLWMBLW7TliIAAAAUklEQVRYw+3UMREAIAwEQSIBT1jAAqKwgiewQJc0DJP65766ItvGiq9+K2YQCESAtCSpEAhEinTPwPNxOCAQiBRZnif7LiAQiADZD/IvCAQiQC4cwbLV6IRp0gAAAABJRU5ErkJggg=="},
{name:"Orchid", value:"orchid", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVzPYx7PYxrQZRzQYyERZSMQYyMPYyMQZycQZSUQYyUQXucSXulSYytTaWtVZS1WZy1Ya21cb2lab21Yb02zd0GAAAAYElEQVR4Ae3NAQaAQBiE0X4WQtD9r1p1gcGyWS1vAJ/h1RZWA+0ObT4CgUAgEAikfYzULxAIBAKBQCB7iFdobSkEAoFAIBDI0XuEQCAQCASyFHJ2Hp+BBoFAIBAIZDryAvysaJ0B2r8hAAAAAElFTkSuQmCC"},
{name:"Peach", value:"peach", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEXvipzvkpzvfXvvYXvvZWvvcYTvaYzvhqXvgoTvaYTvYXPvaZTvdZz3gpwxmHJ4AAAATklEQVRYw+3LMQ0AIAxEUZBQC3hCC1rwhAYsYIHtJkI6X36nn15eLbpIVoVAIAakK4+qQSAQezK/MwQCcSVLeZIFgUAcyHg8tyogEIgnuZkl0YkUM5s8AAAAAElFTkSuQmCC"},
{name:"Rose", value:"rose", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEXmTXvmUXveNUrOJCHFICHePTrmUWPmSXPeQXPeNWveJELFICnFIELWIFrmRXPmUWveOTrmTVLmSXvmTWPMDo4dAAAAX0lEQVR4Ae3WAQaAAAyG0YYSBN3/pIW6wDCYJW+Az88DWCzJRX9rRiAQCAQCgazF4Z20LWnXJxAIBAKBQCB7wyMxj0AgEAgEAjl+iUAgEAgEAjmLw6fe5hEIBAKBQCAvrDxoTTe8DTYAAAAASUVORK5CYII="},
{name:"Ruby", value:"ruby", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAP1BMVEWtEAitCAjFEAitHAi9HAjeIAjvKAjmIAjOJAj3LRnvLRnOFBDvICHvMSHvRSnWLRCtJBDFKBDmMRnvRTHvMTEmSGP4AAAAXElEQVR4AWJkwAIYKRADtDcXBQACABDAcLf+ZSEC7nufbFzYg0AgEAgEci6ytJjsgCEQCAQCgVyP5HvGEAgEAoFAHos0O8YBBAKBQCCQxyLDDiSEQCAQCATyVGQCskwsnQlcdKQAAAAASUVORK5CYII="},
{name:"Sand", value:"sand", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXWupTWspTeunvetoTWplq1ikrOjjHeqmPOpmveomvWklLFlmvmtoS1fUrWmlrOgjHFmlLNbQHKAAAAZ0lEQVR4Ae3NwRUBMABAMYUCxf7TWuCf+xySBXIoIxzDKZzD/kQikUgkEsklzHANtzDC/kQikUgkEsk9PMIzjPAfiUQikUgkkldY4R0+YYb9iUQikUgkkhW+YYUZKt6eSCQSiUQi+QHbkywQRzo7IQAAAABJRU5ErkJggg=="},
]}
renderItem={
(option) =>
<TextImageRow
label={option.name}
//sublabel="Sub-Label"
icon={option.icon}
/>
}
onSelection={(selection) => console.log(selection)}
/>
</Section>
<Section
title={<Text bold>Display Elements</Text>}>
<AdditiveList
settingsKey="elements"
minItems="4"
maxItems="4"
addAction={
<Select
label="Add Item"
options={[
{ name: 'Hours', required: true, value: 'hr' },
{ name: 'Minutes', required: true, value: 'min' },
{ name: 'Day', required: true, value: 'day' },
{ name: 'Month', required: true, value: 'mon' },
{ name: 'Day of the Week', required: true, value: 'wkd' }
]}
/>
}
/>
</Section>
</Page>
);
}
registerSettingsPage(Squared);