commit 8f284f078c2a28ece973b63018b7c8fd31386018
parent 8703ca90086d984c20c360984cf3023a0222fb87
Author: Natasha Kerensikova <natacha@instinctive.eu>
Date: Wed, 2 Dec 2015 18:49:27 +0000
Add a configuration page
Diffstat:
3 files changed, 181 insertions(+), 0 deletions(-)
diff --git a/appinfo.json b/appinfo.json
@@ -6,6 +6,7 @@
"versionLabel": "1.0",
"sdkVersion": "3",
"targetPlatforms": ["aplite", "basalt", "chalk"],
+ "capabilities": [ "configurable" ],
"watchapp": {
"watchface": true
},
diff --git a/config.html b/config.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+ <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/css/slate.min.css">
+ <style>
+ .title {
+ padding: 15px 10px;
+ text-transform: uppercase;
+ font-family: "PT Sans", sans-serif;
+ font-size: 1.2em;
+ font-weight: 500;
+ color: 0x888888;
+ text-align: center;
+ }
+ </style>
+ <script>
+ 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;
+ }
+
+ function onSubmit() {
+ // Set the return URL depending on the runtime environment
+ var formats = [ "", "Pebble", "%a %d", "%d %b", "%b %d", "%d %m", "%m %d",
+ "%a %d %m", "%a %m %d" ];
+ var return_to = getQueryParam("return_to", "pebblejs://close#");
+ var options = {
+ "backgroundColor": document.getElementById("backgroundColorPicker").value,
+ "handColor": document.getElementById("handColorPicker").value,
+ "hourColor": document.getElementById("hourColorPicker").value,
+ "innerColor": document.getElementById("innerColorPicker").value,
+ "minuteColor": document.getElementById("minuteColorPicker").value,
+ "textColor": document.getElementById("textColorPicker").value,
+ "batteryColor": document.getElementById("batteryColorPicker").value,
+ "lowBatteryLevel": document.getElementById("lowBatteryLevel").value,
+ "bluetoothColor": document.getElementById("bluetoothColorPicker").value,
+ "bluetoothVibration": document.getElementById("bluetoothVibration").checked ? "1" : "0",
+ "textFormat": encodeURIComponent(formats[document.getElementById("textFormat").value]),
+ }
+ document.location = return_to + encodeURIComponent(JSON.stringify(options));
+ }
+ </script>
+</head>
+<body>
+ <div class="item-container">
+ <h1 class="title">Classic Lite</h1>
+ </div>
+
+ <div class="item-container">
+ <div class="item-container-header">Color Scheme</div>
+ <div class="item-container-content">
+ <label class="item">
+ Background Color
+ <input id="backgroundColorPicker" type="text" class="item-color item-color-normal" value="0xFFFFFF">
+ </label>
+ <label class="item">
+ Hand Color
+ <input id="handColorPicker" type="text" class="item-color item-color-normal" value="0x000000">
+ </label>
+ <label class="item">
+ Hour Mark Color
+ <input id="hourColorPicker" type="text" class="item-color item-color-normal" value="0x000000">
+ </label>
+ <label class="item">
+ Inner Rectangle Color
+ <input id="innerColorPicker" type="text" class="item-color item-color-normal" value="0xAAAAAA">
+ </label>
+ <label class="item">
+ Minute Mark Color
+ <input id="minuteColorPicker" type="text" class="item-color item-color-normal" value="0x000000">
+ </label>
+ </div>
+ </div>
+
+ <div class="item-container">
+ <div class="item-container-header">Low Battery Warning</div>
+ <div class="item-container-content">
+ <label class="item">
+ <input type="range" class="item-slider" name="lowBatteryLevel" value="50">
+ <div class="item-input-wrapper item-slider-text">
+ <input type="text" id="lowBatteryLevel" class="item-input" name="lowBatteryLevel" value="50">
+ </div>
+ </label>
+ <label class="item">
+ Icon Color
+ <input id="batteryColorPicker" type="text" class="item-color item-color-normal" value="0x555555">
+ </label>
+ </div>
+ </div>
+
+ <div class="item-container">
+ <div class="item-container-header">Bluetooth Warning</div>
+ <div class="item-container-content">
+ <label class="item">
+ Icon Color
+ <input id="bluetoothColorPicker" type="text" class="item-color item-color-normal" value="0x000000">
+ </label>
+ <label class="item">
+ Vibration
+ <input id="bluetoothVibration" type="checkbox" class="item-toggle" checked>
+ </label>
+ </div>
+ </div>
+
+ <div class="item-container">
+ <div class="item-container-header">Info Text</div>
+ <div class="item-container-content">
+ <label class="item">
+ Color
+ <input id="textColorPicker" type="text" class="item-color item-color-normal" value="0x000000">
+ </label>
+ <label class="item">
+ Format
+ <select id="textFormat" class="item-select">
+ <option class="item-select-option" value="0">(disabled)</option>
+ <option class="item-select-option" value="1">Pebble</option>
+ <option class="item-select-option" value="2" selected>Sun 31</option>
+ <option class="item-select-option" value="3">31 Jan</option>
+ <option class="item-select-option" value="4">Jan 31</option>
+ <option class="item-select-option" value="5">31 01</option>
+ <option class="item-select-option" value="6">01 31</option>
+ <option class="item-select-option" value="7">Sun 31 01</option>
+ <option class="item-select-option" value="8">Sun 01 31</option>
+ </select>
+ </label>
+ </div>
+ </div>
+
+ <div class="item-container">
+ <div class="button-container">
+ <input id="submitButton" type="button" class="item-button" value="SUBMIT" onClick="onSubmit()">
+ </div>
+ </div>
+
+ <script src="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/js/slate.min.js"></script>
+</body>
+</html>
diff --git a/src/js/pebble-js-app.js b/src/js/pebble-js-app.js
@@ -0,0 +1,34 @@
+Pebble.addEventListener("ready", function() {
+ console.log("Classic-Lite PebbleKit JS ready!");
+});
+
+Pebble.addEventListener("showConfiguration", function() {
+/* TODO: switch to release version:
+ Pebble.openURL("https://cdn.rawgit.com/faelys/classic-lite/v1.0/config.html");
+*/
+ Pebble.openURL("https://rawgit.com/faelys/classic-lite/master/config.html");
+});
+
+Pebble.addEventListener("webviewclosed", function(e) {
+ var configData = JSON.parse(decodeURIComponent(e.response));
+
+ var dict = {
+ 1: parseInt(configData["backgroundColor"]),
+ 2: parseInt(configData["batteryColor"]),
+ 3: parseInt(configData["bluetoothColor"]),
+ 4: parseInt(configData["handColor"]),
+ 5: parseInt(configData["hourColor"]),
+ 6: parseInt(configData["innerColor"]),
+ 7: parseInt(configData["minuteColor"]),
+ 8: parseInt(configData["textColor"]),
+ 11: configData["textFormat"],
+ 12: parseInt(configData["bluetoothVibration"]),
+ 13: parseInt(configData["lowBatteryLevel"]),
+ };
+
+ Pebble.sendAppMessage(dict, function() {
+ console.log("Send successful: " + JSON.stringify(dict));
+ }, function() {
+ console.log("Send failed!");
+ });
+});
