Skip to content

Commit b14a52f

Browse files
StefanStefan
Stefan
authored and
Stefan
committed
[v0.6]
* Added configuration.
1 parent 48fd6e0 commit b14a52f

File tree

5 files changed

+541
-14
lines changed

5 files changed

+541
-14
lines changed

‎Fibonacci_Clock.pbw‎

2.82 KB
Binary file not shown.

‎appinfo.json‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
11
{
2-
"appKeys": {},
2+
"appKeys": {
3+
"BackgroundColor": 13,
4+
"DotColor": 15,
5+
"GridColor": 14,
6+
"HourColor": 8,
7+
"HourMinuteColor": 10,
8+
"MinuteColor": 9,
9+
"NoneColor": 11,
10+
"OutlineColor": 17,
11+
"ShowBluetooth": 6,
12+
"ShowCharge": 5,
13+
"ShowDate": 2,
14+
"ShowMonth": 3,
15+
"ShowSpiral": 7,
16+
"ShowTime": 1,
17+
"ShowWeekNum": 4,
18+
"SpiralColor": 12,
19+
"TimeColor": 16
20+
},
321
"capabilities": [
4-
""
22+
"configurable"
523
],
624
"companyName": "Stefan \\\"Blixten\\\" Karlsson",
725
"longName": "Fibonacci Clock",
@@ -37,7 +55,7 @@
3755
"basalt"
3856
],
3957
"uuid": "1289bd91-5811-40a5-a270-e8f97c126f18",
40-
"versionLabel": "0.5",
58+
"versionLabel": "0.6",
4159
"watchapp": {
4260
"watchface": true
4361
}

‎config/config.htm‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<html>
2+
<head>
3+
<title>Fibonacci Clock Settings</title>
4+
<script>
5+
var elementIds = [
6+
"ShowTime", /* "ShowDate", "ShowMonth", "ShowWeekNum", */ "ShowCharge",
7+
/* "ShowBluetooth", */ "ShowSpiral", "HourColor", "MinuteColor", "HourMinuteColor",
8+
"NoneColor", "SpiralColor", "BackgroundColor", "GridColor", "DotColor",
9+
"TimeColor", "OutlineColor"
10+
];
11+
12+
var defValue = [
13+
0, // ShowTime
14+
/*
15+
0, // ShowDate
16+
0, // ShowMonth
17+
0, // ShowWeekNum
18+
*/
19+
1, // ShowCharge
20+
// 0, // ShowBluetooth
21+
1, // ShowSpiral
22+
48, // HourColor
23+
12, // MinuteColor
24+
3, // HourMinuteColor
25+
63, // NoneColor
26+
56, // SpiralColor
27+
0, // BackgroundColor
28+
0, // GridColor
29+
63, // DotColor
30+
27, // TimeColor
31+
21 // OutlineColor
32+
];
33+
34+
35+
// Expand a 2-bit color part (r, g, or b) to 8-bit
36+
function expColor(c) {
37+
return (c << 6) + (c << 4) + (c << 2) + c;
38+
}
39+
40+
// Create a RGB hex string
41+
function rgb2hex(r, g, b) {
42+
var col = (1 << 24) + (r << 16) + (g << 8) + b;
43+
return col.toString(16).substring(1);
44+
}
45+
46+
function AddColorOptions(element) {
47+
var colors = [
48+
"Black", "OxfordBlue", "DukeBlue", "Blue", "DarkGreen", "MidnightGreen", "CobaltBlue", "BlueMoon",
49+
"IslamicGreen", "JaegerGreen", "TiffanyBlue", "VividCerulean", "Green", "Malachite", "MediumSpringGreen", "Cyan",
50+
"BulgarianRose", "ImperialPurple", "Indigo", "ElectricUltramarine", "ArmyGreen", "DarkGray", "Liberty", "VeryLightBlue",
51+
"KellyGreen", "MayGreen", "CadetBlue", "PictonBlue", "BrightGreen", "ScreaminGreen", "MediumAquamarine", "ElectricBlue",
52+
"DarkCandyAppleRed", "JazzberryJam", "Purple", "VividViolet", "WindsorTan", "RoseVale", "Purpureus", "LavenderIndigo",
53+
"Limerick", "Brass", "LightGray", "BabyBlueEyes", "SpringBud", "Inchworm", "MintGreen", "Celeste",
54+
"Red", "Folly", "FashionMagenta", "Magenta", "Orange", "SunsetOrange", "BrilliantRose", "ShockingPink",
55+
"ChromeYellow", "Rajah", "Melon", "RichBrilliantLavender", "Yellow", "Icterine", "PastelYellow", "White"
56+
];
57+
58+
for (var i = 0; i < 64; i++) {
59+
var opt = document.createElement('option');
60+
var hexR = expColor((i >> 4) & 0x03);
61+
var hexG = expColor((i >> 2) & 0x03);
62+
var hexB = expColor(i & 0x03);
63+
64+
if ( (i < 8) || ( (i > 15) && (i < 24) ) ) {
65+
txtCol = "FFFFFF";
66+
} else {
67+
txtCol = "000000";
68+
}
69+
opt.setAttribute("style", "background-color:#" + rgb2hex(hexR, hexG, hexB) + "; color:#" + txtCol)
70+
opt.setAttribute("value", 192 + i)
71+
if (i == 5) opt.setAttribute("selected", true);
72+
opt.innerHTML = colors[i];
73+
element.appendChild(opt);
74+
}
75+
}
76+
77+
function OnLoadHandler() {
78+
document.getElementById("Save").addEventListener("click", SaveHandler);
79+
for (var id in elementIds) {
80+
var element = document.getElementById(elementIds[id]);
81+
var def = localStorage.getItem(elementIds[id]);
82+
if (document.getElementById(elementIds[id] + "Preview")) {
83+
AddColorOptions(element);
84+
element.addEventListener("change", UpdatePreviews);
85+
if (def) def = def - 192;
86+
}
87+
if (!def) def = defValue[id];
88+
element.options[def].selected = true;
89+
}
90+
UpdatePreviews();
91+
};
92+
93+
function UpdatePreviews() {
94+
for (var id in elementIds) {
95+
var previewElem = document.getElementById(elementIds[id] + "Preview");
96+
if (previewElem) {
97+
var selectionElem = document.getElementById(elementIds[id]);
98+
previewElem.style.backgroundColor = selectionElem.options[selectionElem.selectedIndex].style.backgroundColor;
99+
}
100+
}
101+
}
102+
103+
function getQueryParam(variable, default_) {
104+
var query = location.search.substring(1);
105+
var vars = query.split('&');
106+
for (var i = 0; i < vars.length; i++) {
107+
var pair = vars[i].split('=');
108+
if (pair[0] == variable)
109+
return decodeURIComponent(pair[1]);
110+
}
111+
return default_ || false;
112+
}
113+
114+
function SaveHandler() {
115+
console.log("SaveHandler called!");
116+
var options = new Map();
117+
for (var id in elementIds) {
118+
var element = document.getElementById(elementIds[id]);
119+
options[elementIds[id]] = element.options[element.selectedIndex].value;
120+
localStorage.setItem(elementIds[id], element.options[element.selectedIndex].value);
121+
}
122+
123+
var json = JSON.stringify(options);
124+
console.log("JSON: ", json);
125+
var return_to = getQueryParam('return_to', 'pebblejs://close#');
126+
document.location = return_to + encodeURIComponent(json);
127+
};
128+
</script>
129+
</head>
130+
<body onload="OnLoadHandler()">
131+
<h1>Fibonacci Clock Settings</h1>
132+
133+
<p><select id="ShowTime">
134+
<option value="0">Hide</option>
135+
<option value="1">Show</option>
136+
</select> time with digits</p>
137+
<!--
138+
<p><select id="ShowDate">
139+
<option value="0">Hide</option>
140+
<option value="1">Show</option>
141+
</select> date</p>
142+
143+
<p><select id="ShowMonth">
144+
<option value="0">Hide</option>
145+
<option value="1">Show</option>
146+
</select> month</p>
147+
148+
<p><select id="ShowWeekNum">
149+
<option value="0">Hide</option>
150+
<option value="1">Show</option>
151+
</select> week number</p>
152+
-->
153+
<p><select id="ShowCharge">
154+
<option value="0">Hide</option>
155+
<option value="1">Show</option>
156+
</select> battery charge</p>
157+
<!--
158+
<p><select id="ShowBluetooth">
159+
<option value="0">Hide</option>
160+
<option value="1">Show</option>
161+
</select> bluetooth connection</p>
162+
-->
163+
<p><select id="ShowSpiral">
164+
<option value="0">Hide</option>
165+
<option value="1">Show</option>
166+
</select> spiral</p>
167+
168+
<p><select id="HourColor"></select>
169+
<span id="HourColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Hour color</p>
170+
171+
<p><select id="MinuteColor"></select>
172+
<span id="MinuteColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Minute color</p>
173+
174+
<p><select id="HourMinuteColor"></select>
175+
<span id="HourMinuteColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Hour+Minute color</p>
176+
177+
<p><select id="NoneColor"></select>
178+
<span id="NoneColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> None color</p>
179+
180+
<p><select id="SpiralColor"></select>
181+
<span id="SpiralColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Spiral color</p>
182+
183+
<p><select id="BackgroundColor"></select>
184+
<span id="BackgroundColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Background color</p>
185+
186+
<p><select id="GridColor"></select>
187+
<span id="GridColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Grid color</p>
188+
189+
<p><select id="DotColor"></select>
190+
<span id="DotColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Dot color</p>
191+
192+
<p><select id="TimeColor"></select>
193+
<span id="TimeColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Time color</p>
194+
195+
<p><select id="OutlineColor"></select>
196+
<span id="OutlineColorPreview" style="border:1px solid">&nbsp;&nbsp;&nbsp;&nbsp;</span> Outline color</p>
197+
198+
<p>
199+
<button id="Save">Save</button>
200+
</p>
201+
</body>
202+
</html>

0 commit comments

Comments
 (0)