added HTML/JS/CSS for config page (but not the integration into the watchface yet)
parent
99b0cdeee6
commit
99e43e6502
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Super Simple Settings</title>
|
||||||
|
<link rel="stylesheet" href="css/slate.min.css">
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="item-container">
|
||||||
|
<div class="item-container-header">Color settings</div>
|
||||||
|
<div class="item-container-content">
|
||||||
|
<div class="item">
|
||||||
|
Background
|
||||||
|
<input id="color-bg" type="text" class="item-color item-color-normal" name="color-bg" value="#000000">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
Minute Hand
|
||||||
|
<input id="color-m" type="text" class="item-color item-color-normal" name="color-m" value="#ffffff">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
Hour Hand
|
||||||
|
<input id="color-h" type="text" class="item-color item-color-normal" name="color-h" value="#ff0000">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
Center Peg
|
||||||
|
<input id="color-p" type="text" class="item-color item-color-normal" name="color-p" value="#cccccc">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-container">
|
||||||
|
<div class="button-container">
|
||||||
|
<input id="send" type="button" class="item-button" value="SEND">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/slate.min.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,63 @@
|
||||||
|
(function() {
|
||||||
|
loadOptions();
|
||||||
|
submitHandler();
|
||||||
|
})();
|
||||||
|
|
||||||
|
function submitHandler() {
|
||||||
|
var $submitButton = $('#send');
|
||||||
|
|
||||||
|
$submitButton.on('click', function() {
|
||||||
|
console.log('Submit');
|
||||||
|
|
||||||
|
var return_to = getQueryParam('return_to', 'pebblejs://close#');
|
||||||
|
document.location = return_to + encodeURIComponent(JSON.stringify(getAndStoreConfigData()));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptions() {
|
||||||
|
var $colorbg = $('#color-bg');
|
||||||
|
var $colorm = $('#color-m');
|
||||||
|
var $colorh = $('#color-h');
|
||||||
|
var $colorp = $('#color-p');
|
||||||
|
|
||||||
|
if (localStorage.colorbg) {
|
||||||
|
$colorbg[0].value = localStorage.colorbg;
|
||||||
|
$colorm[0].value = localStorage.colorm;
|
||||||
|
$colorh[0].value = localStorage.colorh;
|
||||||
|
$colorp[0].value = localStorage.colorp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAndStoreConfigData() {
|
||||||
|
var $colorbg = $('#color-bg');
|
||||||
|
var $colorm = $('#color-m');
|
||||||
|
var $colorh = $('#color-h');
|
||||||
|
var $colorp = $('#color-p');
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
colorbg: $colorbg.val(),
|
||||||
|
colorm: $colorm.val(),
|
||||||
|
colorh: $colorh.val(),
|
||||||
|
colorp: $colorp.val(),
|
||||||
|
};
|
||||||
|
|
||||||
|
localStorage.colorbg = options.colorbg;
|
||||||
|
localStorage.colorm = options.colorm;
|
||||||
|
localStorage.colorh = options.colorh;
|
||||||
|
localStorage.colorp = options.colorp;
|
||||||
|
|
||||||
|
console.log('Got options: ' + JSON.stringify(options));
|
||||||
|
return options;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getQueryParam(variable, defaultValue) {
|
||||||
|
var query = location.search.substring(1);
|
||||||
|
var vars = query.split('&');
|
||||||
|
for (var i = 0; i < vars.length; i++) {
|
||||||
|
var pair = vars[i].split('=');
|
||||||
|
if (pair[0] === variable) {
|
||||||
|
return decodeURIComponent(pair[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return defaultValue || false;
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue