FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity
BangleApps/apps/ac_ac/Customizer.html

784 lines
28 KiB
HTML
Raw Normal View History

Create Customizer.html
2022-01-11 15:30:48 +00:00
<!DOCTYPE html>
<html lang="en" style="width:100%; height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no">
<style type="text/css">
html {
text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
</style>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' 'unsafe-inline' 'unsafe-eval' file: https:;
">
<meta http-equiv="X-Content-Security-Policy" content="
default-src 'self' 'unsafe-inline' 'unsafe-eval' file: https:;
">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Update Customizer.html
2022-01-12 08:43:39 +00:00
Update Customizer.html
2022-01-12 12:02:52 +00:00
<link rel="stylesheet" href="../../css/spectre.min.css">
<script src="../../core/lib/customize.js"></script>
Update Customizer.html
2022-01-12 08:43:39 +00:00
Create Customizer.html
2022-01-11 15:30:48 +00:00
<style>
Update Customizer.html
2022-01-12 08:43:39 +00:00
body { background:white; color:black }
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
table.centered td {
text-align:center; vertical-align:top;
}
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 09:57:10 +00:00
label.Preview {
display:inline-block; position:relative;
}
label.Preview > input[type="radio"] {
Update Customizer.html
2022-01-12 08:43:39 +00:00
display:none; position:relative;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:0px; height:0px;
}
Update Customizer.html
2022-01-12 09:57:10 +00:00
label.Preview > input[type="radio"] + img {
display:inline-block; position:relative;
width:88px; height:88px;
Update Customizer.html
2022-01-12 08:43:39 +00:00
margin:0px; padding:0px;
Update Customizer.html
2022-01-12 09:57:10 +00:00
border:solid 3px white;
box-shadow:0px 0px 1px 1px lightgray;
Update Customizer.html
2022-01-12 08:43:39 +00:00
}
Update Customizer.html
2022-01-12 09:57:10 +00:00
label.Preview > input[type="radio"]:checked + img {
Update Customizer.html
2022-01-12 08:43:39 +00:00
border:solid 3px red;
Create Customizer.html
2022-01-11 15:30:48 +00:00
}
Update Customizer.html
2022-01-12 08:43:39 +00:00
Update Customizer.html
2022-01-12 09:57:10 +00:00
.ColorPatch {
Update Customizer.html
2022-01-12 08:43:39 +00:00
display:inline-block; position:relative;
Update Customizer.html
2022-01-12 09:57:10 +00:00
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:30px; height:30px; box-sizing:border-box;
Update Customizer.html
2022-01-12 08:43:39 +00:00
border:solid 3px white;
margin:0px; padding:0px;
Update Customizer.html
2022-01-12 09:57:10 +00:00
box-shadow:inset 0px 0px 1px 1px black;
Update Customizer.html
2022-01-12 08:43:39 +00:00
vertical-align:top;
}
Update Customizer.html
2022-01-12 09:57:10 +00:00
.ColorPatch:checked {
Update Customizer.html
2022-01-12 08:43:39 +00:00
border:solid 3px red;
Create Customizer.html
2022-01-11 15:30:48 +00:00
}
Update Customizer.html
2022-01-12 08:43:39 +00:00
label.ColorPatch {
Update Customizer.html
2022-01-12 09:57:10 +00:00
display:inline-block; position:relative;
Update Customizer.html
2022-01-12 08:43:39 +00:00
width:70px;
Update Customizer.html
2022-01-12 09:57:10 +00:00
border:none;
box-shadow:none;
}
label.ColorPatch > input[type="radio"] {
display:none; position:relative;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width:0px; height:0px;
}
label.ColorPatch > input[type="radio"] + span {
display:inline-block; position:absolute;
left:0px; top:0px; right:0px; bottom:0px;
margin:0px; padding:0px;
border:solid 3px white;
box-shadow:inset 0px 0px 1px 1px black;
Update Customizer.html
2022-01-12 08:43:39 +00:00
font-size:16px; line-height:24px;
text-align:center;
}
Update Customizer.html
2022-01-12 09:57:10 +00:00
label.ColorPatch > input[type="radio"]:checked + span {
Update Customizer.html
2022-01-12 08:43:39 +00:00
border:solid 3px red;
}
</style>
Create Customizer.html
2022-01-11 15:30:48 +00:00
<script>
Update Customizer.html
2022-01-12 12:02:52 +00:00
$(function () {
let ClockSize, ClockSizeURL
let ClockFace, ClockFaceDots, ClockFaceURL
let ClockHands, SecondHand, ClockHandsURL, FillColor
let ComplicationTL, ComplicationTLURL
let ComplicationT, ComplicationTURL
let ComplicationTR, ComplicationTRURL
let ComplicationL, ComplicationLURL
let ComplicationR, ComplicationRURL
let ComplicationBL, ComplicationBLURL
let ComplicationB, ComplicationBURL
let ComplicationBR, ComplicationBRURL
let Foreground, Background
Update Customizer.html
2022-01-12 08:43:39 +00:00
Update Customizer.html
2022-01-12 12:02:52 +00:00
/**** retrieveInputs ****/
Update Customizer.html
2022-01-12 08:43:39 +00:00
Update Customizer.html
2022-01-12 12:02:52 +00:00
function retrieveInputs () {
ClockSize = $('input[name="clock-size"]:checked').val()
ClockSizeURL = ($('#clock-size-custom-url').val() || '').trim()
Update Customizer.html
2022-01-12 08:43:39 +00:00
Update Customizer.html
2022-01-12 12:02:52 +00:00
ClockFace = $('input[name="clock-face"]:checked').val()
ClockFaceDots = $('input[name="clock-face-dots"]:checked').val()
ClockFaceURL = ($('#clock-face-custom-url').val() || '').trim()
ClockHands = $('input[name="clock-hands"]:checked').val()
FillColor = $('input[name="fill-color"]:checked').val()
SecondHand = $('input[name="second-hand"]:checked').val()
ClockHandsURL = ($('#clock-hands-custom-url').val() || '').trim()
ComplicationTL = $('#complication-tl').val()
ComplicationTLURL = ($('#complication-tl-custom-url').val() || '').trim()
ComplicationT = $('#complication-t').val()
ComplicationTURL = ($('#complication-t-custom-url').val() || '').trim()
ComplicationTR = $('#complication-tr').val()
ComplicationTRURL = ($('#complication-tr-custom-url').val() || '').trim()
ComplicationL = $('#complication-l').val()
ComplicationLURL = ($('#complication-l-custom-url').val() || '').trim()
ComplicationR = $('#complication-r').val()
ComplicationRURL = ($('#complication-r-custom-url').val() || '').trim()
ComplicationBL = $('#complication-bl').val()
ComplicationBLURL = ($('#complication-bl-custom-url').val() || '').trim()
ComplicationB = $('#complication-b').val()
ComplicationBURL = ($('#complication-b-custom-url').val() || '').trim()
ComplicationBR = $('#complication-br').val()
ComplicationBRURL = ($('#complication-br-custom-url').val() || '').trim()
Foreground = $('input[name="foreground"]:checked').val()
Background = $('input[name="background"]:checked').val()
}
retrieveInputs()
/**** validateInputs ****/
function validateInputs () {
function withError (Message) {
showMessage(Message)
$('#UploadButton').attr('disabled',true)
}
switch (true) {
case (ClockSize === 'custom') && (ClockSizeURL === ''):
return withError('please enter the URL of your custom "Clock Size Calculator"')
case (ClockFace === 'custom') && (ClockFaceURL === ''):
return withError('please enter the URL of your custom clock face')
case (ClockHands === 'custom') && (ClockHandsURL === ''):
return withError('please enter the URL of your custom clock hands')
case (ComplicationTL === 'custom') && (ComplicationTLURL === ''):
return withError('please enter the URL of your custom complication in the top-left corner')
case (ComplicationT === 'custom') && (ComplicationTURL === ''):
return withError('please enter the URL of your custom complication at the top edge')
case (ComplicationTR === 'custom') && (ComplicationTRURL === ''):
return withError('please enter the URL of your custom complication in the top-right corner')
case (ComplicationL === 'custom') && (ComplicationLURL === ''):
return withError('please enter the URL of your custom complication at the left edge')
case (ComplicationR === 'custom') && (ComplicationRURL === ''):
return withError('please enter the URL of your custom complication at the right edge')
case (ComplicationBL === 'custom') && (ComplicationBLURL === ''):
return withError('please enter the URL of your custom complication in the bottom-left corner')
case (ComplicationB === 'custom') && (ComplicationBURL === ''):
return withError('please enter the URL of your custom complication at the bottom edge')
case (ComplicationBR === 'custom') && (ComplicationBRURL === ''):
return withError('please enter the URL of your custom complication in the bottom-right corner')
}
hideMessage()
$('#UploadButton').removeAttr('disabled')
}
/**** hide/showMesssage ****/
function hideMessage () { $('#MessageView').hide() }
function showMessage (Message) {
$('#MessageView').text(Message).show()
}
/**** createAndUploadApp ****/
function createAndUploadApp () {
Update Customizer.html
2022-01-12 15:45:28 +00:00
function WidgetsOnBackground () {
return (
ClockSize === 'smart'
? "require('https://raw.githubusercontent.com/rozek/banglejs-2-widgets-on-background/main/drawWidgets.js');"
: ''
)
}
Update Customizer.html
2022-01-12 12:02:52 +00:00
function chosenClockSize () {
switch (ClockSize) {
case 'simple': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-simple-clock-size/main/ClockSize.js')"
case 'smart': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-smart-clock-size/main/ClockSize.js')"
Update Customizer.html
2022-01-12 14:54:57 +00:00
case 'custom': return "require('" + ClockSizeURL + "')"
Update Customizer.html
2022-01-12 12:02:52 +00:00
}
}
function chosenClockFace () {
switch (ClockFace) {
Update Customizer.html
2022-01-12 14:54:57 +00:00
case 'none': return "undefined"
Update Customizer.html
2022-01-12 12:02:52 +00:00
case 'four-fold': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-four-fold-clock-face/main/ClockFace.js')"
case 'twelve-fold': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-twelve-fold-clock-face/main/ClockFace.js')"
case 'rainbow': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-rainbow-clock-face/main/ClockFace.js')"
Update Customizer.html
2022-01-12 14:54:57 +00:00
case 'custom': return "require('" + ClockFaceURL + "')"
Update Customizer.html
2022-01-12 12:02:52 +00:00
}
}
function chosenClockHands () {
switch (ClockHands) {
case 'simple': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-simpled-clock-hands/main/ClockHands.js')"
case 'rounded': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-rounded-clock-hands/main/ClockHands.js')"
case 'hollow': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-hollow-clock-hands/main/ClockHands.js')"
Update Customizer.html
2022-01-12 14:54:57 +00:00
case 'custom': return "require('" + ClockHandsURL + "')"
Update Customizer.html
2022-01-12 12:02:52 +00:00
}
}
function chosenComplication (Complication, customURL) {
switch (Complication) {
Update Customizer.html
2022-01-12 14:54:57 +00:00
case 'none': return "undefined"
Update Customizer.html
2022-01-12 12:02:52 +00:00
case 'date': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-date-complication/main/Complication.js')"
case 'weekday': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-weekday-complication/main/Complication.js')"
case 'calendar-week': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-calendar-week-complication/main/Complication.js')"
case 'moon-phase': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-moon-phase-complication/main/Complication.js')"
Update Customizer.html
2022-01-12 14:54:57 +00:00
case 'custom': return "require('" + customURL + "')"
Update Customizer.html
2022-01-12 12:02:52 +00:00
}
}
function chosenComplicationAt (Position) {
switch (Position) {
case 'tl': return chosenComplication(ComplicationTL, ComplicationTLURL)
case 't': return chosenComplication(ComplicationT, ComplicationTURL)
case 'tr': return chosenComplication(ComplicationTR, ComplicationTRURL)
case 'l': return chosenComplication(ComplicationL, ComplicationLURL)
case 'r': return chosenComplication(ComplicationR, ComplicationRURL)
case 'bl': return chosenComplication(ComplicationBL, ComplicationBLURL)
case 'b': return chosenComplication(ComplicationB, ComplicationBURL)
case 'br': return chosenComplication(ComplicationBR, ComplicationBRURL)
}
}
function chosenColor (ColorChoice) {
Update Customizer.html
2022-01-12 15:02:28 +00:00
return (ColorChoice === 'none' ? 'undefined' : "'" + ColorChoice + "'")
Update Customizer.html
2022-01-12 12:02:52 +00:00
}
function chosenForeground () { return chosenColor(Foreground) }
function chosenBackground () { return chosenColor(Background) }
function chosenSecondHand () { return chosenColor(SecondHand) }
function chosenFillColor () { return chosenColor(FillColor) }
Update Customizer.html
2022-01-12 14:54:57 +00:00
function chosenDots () { return (ClockFaceDots === 'with-dots' ? 'true' : 'false') }
Update Customizer.html
2022-01-12 12:02:52 +00:00
let AppSource = `
Update Customizer.html
2022-01-12 15:45:28 +00:00
${WidgetsOnBackground()}
Update Customizer.html
2022-01-12 12:02:52 +00:00
let Clockwork = require('https://raw.githubusercontent.com/rozek/banglejs-2-simple-clockwork/main/Clockwork.js');
Clockwork.windUp({
size: ${chosenClockSize()},
background:null,
face: ${chosenClockFace()},
hands: ${chosenClockHands()},
complications:{
tl:${chosenComplicationAt('tl')},
t: ${chosenComplicationAt('t')},
tr:${chosenComplicationAt('tr')},
l: ${chosenComplicationAt('l')},
r: ${chosenComplicationAt('r')},
bl:${chosenComplicationAt('bl')},
b: ${chosenComplicationAt('b')},
br:${chosenComplicationAt('br')},
}
},{
Foreground:${chosenForeground()},
Background:${chosenBackground()},
Seconds: ${chosenSecondHand()},
withDots: ${chosenDots()},
FillColor: ${chosenFillColor()}
});
`
Update Customizer.html
2022-01-12 14:58:20 +00:00
console.log('the configured AC-AC app looks as follows:')
console.log(AppSource)
Update Customizer.html
2022-01-12 12:02:52 +00:00
sendCustomizedApp({
storage:[
Update Customizer.html
2022-01-12 15:36:28 +00:00
{name:'ac_ac.app.js', url:'app.js', content:AppSource},
Update Customizer.html
2022-01-12 12:02:52 +00:00
]
})
}
/**** register event handlers ****/
function retrieveAndValidateInputs () {
retrieveInputs ()
validateInputs ()
}
$('input[type="radio"]').on('change',retrieveAndValidateInputs)
$('input[type="url"]'). on('change',retrieveAndValidateInputs)
$('select'). on('change',retrieveAndValidateInputs)
Update Customizer.html
2022-01-12 14:15:44 +00:00
$('#UploadButton').on('click',createAndUploadApp)
Update Customizer.html
2022-01-12 12:02:52 +00:00
})
Create Customizer.html
2022-01-11 15:30:48 +00:00
</script>
Update Customizer.html
2022-01-12 08:43:39 +00:00
Create Customizer.html
2022-01-11 15:30:48 +00:00
</head>
<body>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<p>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Please customize your analog clock for the Bangle.js 2 according to your needs.
Update Customizer.html
2022-01-12 08:43:39 +00:00
When finished, click on "Upload" at the bottom of this form.
</p>
<h3>Clock Size Calculation</h3>
<p>
Click on the desired clock size calculator (if you installed some widgets
on your Bangle.js 2, the smart one may produce larger clock faces than the
simple one):
</p><p>
<table class="centered"><tbody>
<tr>
<td>
<label class="Preview">
<input type="radio" name="clock-size" value="simple">
<img src="simpleClockSize.png"/>
</label><br>
simple
</td>
<td>
<label class="Preview">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<input type="radio" name="clock-size" value="smart" checked>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<img src="smartClockSize.png"/>
</label><br>
smart
</td>
<td>
<label class="Preview">
<input type="radio" name="clock-size" value="custom">
<img src="custom.png"/>
</label><br>
(custom)
</td>
</tr>
</tbody></table>
</p><p>
If you prefer a "custom" clock size calculator, please enter the URL
of its JavaScript module below:
</p><p>
Update Customizer.html
2022-01-12 12:02:52 +00:00
custom URL: <input type="url" id="clock-size-custom-url" size="50">
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p>
<h3>Clock Face</h3>
<p>
Click on the desired clock face:
</p><p>
<table class="centered"><tbody>
<tr>
<td>
<label class="Preview">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<input type="radio" name="clock-face" value="none" checked>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<img src="none.png"/>
</label><br>
none
</td>
<td>
<label class="Preview">
<input type="radio" name="clock-face" value="four-fold">
<img src="fourfoldClockFace.png"/>
</label><br>
four-fold
</td>
<td>
<label class="Preview">
<input type="radio" name="clock-face" value="twelve-fold">
<img src="twelvefoldClockFace.png"/>
</label><br>
twelve-fold
</td>
<td>
<label class="Preview">
<input type="radio" name="clock-face" value="rainbow">
<img src="RainbowClockFace.png"/>
</label><br>
"rainbow"<br>colored
</td>
<td>
<label class="Preview">
<input type="radio" name="clock-face" value="custom">
<img src="custom.png"/>
</label><br>
(custom)
</td>
</tr>
</tbody></table>
</p><p>
Clock faces are drawn in the configured foreground and background colors
(you may select them at the end of this form)
</p><p>
The "twelve-fold" and "rainbow"-colored faces may be drawn with or without
dots marking the position of every minute. Which variant do you prefer?
</p><p>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<input type="radio" name="clock-face-dots" value="without-dots" checked> without dots <br>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<input type="radio" name="clock-face-dots" value="with-dots"> with dots
</p><p>
If you prefer a "custom" clock face, please enter the URL
of its JavaScript module below:
</p><p>
Update Customizer.html
2022-01-12 12:02:52 +00:00
custom URL: <input type="url" id="clock-face-custom-url" size="50">
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p>
<h3>Clock Hands</h3>
<p>
Click on the desired clock hands:
</p><p>
<table class="centered"><tbody>
<tr>
<td>
<label class="Preview">
<input type="radio" name="clock-hands" value="simple">
<img src="simpleClockHands.png"/>
</label><br>
simple
</td>
<td>
<label class="Preview">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<input type="radio" name="clock-hands" value="rounded" checked>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<img src="roundedClockHands.png"/>
</label><br>
rounded
</td>
<td>
<label class="Preview">
<input type="radio" name="clock-hands" value="hollow">
<img src="hollowClockHands.png"/>
</label><br>
hollow
</td>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<td>
<label class="Preview">
<input type="radio" name="clock-hands" value="custom">
<img src="custom.png"/>
</label><br>
(custom)
</td>
</tr>
</tbody></table>
</p><p>
Clock hands are drawn in the configured foreground and background colors
(you may select them at the end of this form)
Update Customizer.html
2022-01-12 12:02:52 +00:00
</p><p>
Hollow clock hands may optionally be filled with a given color. If you have
chosen hollow hands, please specify the desired fill mode and color below:
Update Customizer.html
2022-01-12 14:15:44 +00:00
</p><p>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<b>Hollow Hand Fill Color:</b>
</p><p>
<label class="ColorPatch">
<input type="radio" name="fill-color" value="none" checked/>
<span>none</span>
</label>
<label class="ColorPatch">
<input type="radio" name="fill-color" value="Theme"/>
<span>themed</span>
</label>
<input type="radio" name="fill-color" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="fill-color" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="fill-color" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="fill-color" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="fill-color" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="fill-color" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="fill-color" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="fill-color" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p><p>
Additionally, all clock hands may be drawn with or without second hands.
If you want them to be drawn, please click on their desired color below
(or choose "themed" to use your Bangle's configured theme) - if not, just
select "none":
</p><p>
Update Customizer.html
2022-01-12 09:57:10 +00:00
<b>Second Hand Color:</b>
</p><p>
<label class="ColorPatch">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<input type="radio" name="second-hand" value="none" checked/>
Update Customizer.html
2022-01-12 09:57:10 +00:00
<span>none</span>
</label>
<label class="ColorPatch">
<input type="radio" name="second-hand" value="Theme"/>
<span>themed</span>
</label>
<input type="radio" name="second-hand" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="second-hand" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="second-hand" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="second-hand" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="second-hand" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="second-hand" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="second-hand" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="second-hand" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p><p>
If you prefer "custom" clock hands, please enter the URL
of their JavaScript module below:
</p><p>
Update Customizer.html
2022-01-12 12:02:52 +00:00
custom URL: <input type="url" id="clock-hands-custom-url" size="50">
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<h3>Complications</h3>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<p>
Complications are small displays for additional information. If you want
one or multiple complications to be added to your clock, you'll have to
specify which one to be loaded and where it should be placed.
</p><p>
Up to 6 possible positions exist (top-left, top-right, left, right,
bottom-left and bottom-right). Alternatively, the positions "top-left" and
"top-right" may be traded for a slightly larger complication at position
"top" or "bottom-left" and "bottom-right" for one at the "bottom".
</p><p>
<table><tbody>
<tr>
<td colspan="3"><b>top-left:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-tl">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-tl-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>top:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-t">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-t-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>top-right:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-tr">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-tr-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>left:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-l">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-l-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>right:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-r">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-r-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>bottom-left:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-bl">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-bl-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>bottom:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-b">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-b-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<tr>
<td colspan="3"><b>bottom-right:</b></td>
</tr><tr>
<td> &nbsp; </td>
<td> Complication:</td>
<td>
<select id="complication-br">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<option value="none" selected>(none)</option>
Update Customizer.html
2022-01-12 08:43:39 +00:00
<option value="date"> date</option>
<option value="weekday"> weekday</option>
<option value="calendar-week">calendar week</option>
<option value="moon-phase"> moon phase</option>
<option value="custom"> (custom)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>custom URL:</td>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<td><input type="url" id="complication-br-custom-url" size="50"></td>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</tr>
</tbody></table>
</p>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<h3>Settings</h3>
Create Customizer.html
2022-01-11 15:30:48 +00:00
Update Customizer.html
2022-01-12 08:43:39 +00:00
<p>
Color faces, hands and complications are often drawn using configurable
foreground and background colors.
</p><p>
Here you may specify these colors. Click on a color to select it - or on
"themed" if you want the clock to use the currently configured theme on
your Bangle.js 2:
Update Customizer.html
2022-01-12 09:57:10 +00:00
</p><p>
<b>Background Color:</b>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p><p>
Update Customizer.html
2022-01-12 09:57:10 +00:00
<label class="ColorPatch">
Update Customizer.html
2022-01-12 12:02:52 +00:00
<input type="radio" name="background" value="Theme" checked/>
Update Customizer.html
2022-01-12 09:57:10 +00:00
<span>themed</span>
</label>
<input type="radio" name="background" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="background" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="background" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="background" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="background" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="background" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="background" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="background" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
Update Customizer.html
2022-01-12 12:02:52 +00:00
</p><p>
<b>Foreground Color:</b>
</p><p>
<label class="ColorPatch">
<input type="radio" name="foreground" value="Theme" checked/>
<span>themed</span>
</label>
<input type="radio" name="foreground" value="#000000" class="ColorPatch" style="background:#000000"/>
<input type="radio" name="foreground" value="#FF0000" class="ColorPatch" style="background:#FF0000"/>
<input type="radio" name="foreground" value="#00FF00" class="ColorPatch" style="background:#00FF00"/>
<input type="radio" name="foreground" value="#0000FF" class="ColorPatch" style="background:#0000FF"/>
<input type="radio" name="foreground" value="#FFFF00" class="ColorPatch" style="background:#FFFF00"/>
<input type="radio" name="foreground" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
<input type="radio" name="foreground" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
<input type="radio" name="foreground" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
Update Customizer.html
2022-01-12 08:43:39 +00:00
</p><p>
When you are satisfied with your configuration, just click on "Upload" in
order to generate the specified clock and upload it to your Bangle.js 2:
</p>
Update Customizer.html
2022-01-12 12:02:52 +00:00
<p id="MessageView" style="display:none; color:red"></p>
<button id="UploadButton">Upload</button>
</p><p> &nbsp; </p>
Create Customizer.html
2022-01-11 15:30:48 +00:00
</body>
</html>