Added pebble client.

2016-06-04 23:26:30 +02:00 · 2016-06-04 23:26:30 +02:00 · 91a3c69414
commit 91a3c69414
parent c1c82222b5
14 changed files with 1491 additions and 0 deletions
--- a/clients/pebble/McLighting.pbw
+++ b/clients/pebble/McLighting.pbw
--- a/clients/pebble/configuration_page/.firebaserc
+++ b/clients/pebble/configuration_page/.firebaserc
@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "mclighting-pebble-config"
+  }
+}
--- a/clients/pebble/configuration_page/database.rules.json
+++ b/clients/pebble/configuration_page/database.rules.json
@ -0,0 +1,4 @@
+{
+  ".read": true,
+  ".write": true
+}
--- a/clients/pebble/configuration_page/firebase.json
+++ b/clients/pebble/configuration_page/firebase.json
@ -0,0 +1,8 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "public"
+  }
+}
--- a/clients/pebble/configuration_page/public/404.html
+++ b/clients/pebble/configuration_page/public/404.html
@ -0,0 +1,81 @@
+
+<!doctype html>
+<html>
+  <head>
+    <title>Page Not Found</title>
+    <style>
+      body {
+        margin: 0 auto;
+        padding: 1em;
+        font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+        font-size: 1.1em;
+        color: #333;
+      }
+      @media screen and (min-width: 40em) {
+        body {
+          width: 40em;
+        }
+      }
+      h1, h2, h3 {
+        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+        font-weight: 300;
+      }
+      h1 {
+        margin: 1em 0;
+        padding: 0 0 0.25em 0;
+        border-bottom: 1px dotted #ccc;
+        text-align: center;
+        font-size: 3em;
+        line-height: 1.1em;
+      }
+      h2 {
+        margin: 1em 0 0.45em 0;
+        padding: 0;
+        font-size: 1.8em;
+      }
+      p {
+        margin: 0 0 0.5em 0;
+        line-height: 1.8em;
+      }
+      ol {
+
+      }
+      ol li {
+        margin: 0 0 0.5em 0;
+        font-size: 0.9em;
+        line-height: 1.8em;
+      }
+      a {
+        color: #50B1FF;
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      code {
+        display: inline-block;
+        padding: 0.1em;
+        background-color: #F8F8F8;
+        border: 1px solid #DDD;
+        border-radius: 3px;
+        font-family: Consolas,"Liberation Mono",Courier,monospace;
+        font-size: 0.9em;
+        line-height: 1;
+      }
+      .logo {
+        display: block;
+        margin: 3em 0;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Page Not Found</h1>
+    <p>This specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+    <h2>Why am I seeing this?</h2>
+    <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured public directory.</p>
+    <a class="logo" href="//www.firebase.com">
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAAAaCAYAAABRhnV8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNWM4MWUxOS0zYWJmLTQyYWYtOTVhMi01MDBiZWU5NzAyMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkNCQkJBMDlCNkRGMTFFM0JDMTdBQTgyNEFEQURCQTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkNCQkJBMDhCNkRGMTFFM0JDMTdBQTgyNEFEQURCQTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWFkZWM0M2YtMmFjMy00NTEyLTljNzQtYjVmMDJjMWNhNTkxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI1YzgxZTE5LTNhYmYtNDJhZi05NWEyLTUwMGJlZTk3MDIxOCIvPiA8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" />
+    </a>
+  </body>
+</html>
--- a/clients/pebble/configuration_page/public/css/slate.css
+++ b/clients/pebble/configuration_page/public/css/slate.css
@ -0,0 +1,475 @@
+@import url(../fonts/pfdindisplaypro-regular.woff);
+@import url(../fonts/ptsans-regular.woff);
+* {
+  margin: 0;
+  padding: 0; }
+
+*:focus {
+  outline-width: 0; }
+
+a {
+  color: #FF4700;
+  text-decoration: none; }
+
+body {
+  background-color: #EAEAEA;
+  margin-bottom: 15px;
+  font-size: 1.2em;
+  line-height: 1.4em;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important; }
+
+body, select, input[type=text], input[type=time], input[type=date] {
+  font-family: 'PF DinDisplay Pro', sans-serif;
+  font-weight: 300; }
+
+select, input[type=time], input[type=date] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  border: none;
+  position: absolute;
+  top: 13px;
+  color: #A8A8A8;
+  font-size: 1em;
+  line-height: 1em;
+  background-color: #F7F7F7; }
+
+input[type=date] {
+  direction: rtl; }
+
+select {
+  right: 30px;
+  top: 14px; }
+
+input[type=time] {
+  right: 10px !important; }
+
+input[type=date] {
+  right: 10px !important; }
+
+.select-triangle {
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 7px solid #FF4700; }
+
+.item-container {
+  color: #333333;
+  margin-top: 15px; }
+
+.item-container-header {
+  padding: 3px 10px;
+  text-transform: uppercase;
+  font-family: 'PT Sans', sans-serif;
+  font-size: .8em;
+  font-weight: 500;
+  color: #A8A8A8; }
+
+.item-container-content {
+  background-color: #F7F7F7;
+  border-top: 1px solid #DEDEDE;
+  border-bottom: 1px solid #DEDEDE; }
+
+.item-container-footer {
+  padding: 3px 10px;
+  font-size: .7em;
+  line-height: 1.4em;
+  color: #A8A8A8; }
+
+.item {
+  position: relative;
+  padding: 10px;
+  display: block;
+  overflow: hidden; }
+
+.item:not(:first-child) {
+  border-top: 1px solid #DEDEDE; }
+
+.item-subtitle-wrapper {
+  font-size: 1em; }
+
+.item-subtitle-wrapper .item-styled-toggle-wrapper {
+  top: 16px; }
+
+.item-subtitle-wrapper .item-styled-checkbox {
+  top: 18px; }
+
+.item-subtitle-wrapper .item-styled-radio {
+  top: 16px; }
+
+.item-subtitle-wrapper .item-draggable-handle {
+  top: 18px; }
+
+.item-subtitle {
+  font-size: .7em;
+  line-height: .7em;
+  padding: .3em 0; }
+
+.item-styled-toggle-wrapper {
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  width: 56px;
+  height: 30px;
+  border-radius: 5px;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.3s;
+  transition-property: background-color; }
+
+.item-styled-toggle {
+  position: relative;
+  background-color: #FFFFFF;
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+  top: 1px;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.3s;
+  transition-property: left; }
+
+.item-toggle {
+  display: none; }
+
+.item-toggle + .item-styled-toggle-wrapper {
+  background-color: #A8A8A8; }
+
+.item-toggle:checked + .item-styled-toggle-wrapper {
+  background-color: #FF4700; }
+
+.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
+  left: 1px; }
+
+.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
+  left: 27px; }
+
+.item-styled-toggle-bar {
+  width: 3px;
+  height: 15px;
+  margin-left: 3px;
+  background-color: #EAEAEA;
+  float: left;
+  position: relative;
+  left: 4px;
+  top: 7px; }
+
+.item-styled-checkbox {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 21px;
+  height: 21px;
+  border-radius: 5px;
+  border-width: 2px;
+  border-style: solid; }
+
+.item-checkbox {
+  display: none; }
+
+.item-checkbox + .item-styled-checkbox {
+  border-color: #DEDEDE; }
+
+.item-checkbox:checked + .item-styled-checkbox {
+  border-color: #FF4700;
+  background-color: #FF4700; }
+
+.item-checkbox:checked + .item-styled-checkbox:before {
+  content: "";
+  display: block;
+  position: relative;
+  left: 7px;
+  width: 6px;
+  height: 14px;
+  border-color: #F7F7F7;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg); }
+
+.item-styled-radio {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 21px;
+  height: 21px;
+  border-radius: 12px;
+  border-width: 2px;
+  border-style: solid; }
+
+.item-radio {
+  display: none; }
+
+.item-radio + .item-styled-radio {
+  border-color: #DEDEDE; }
+
+.item-radio:checked + .item-styled-radio {
+  border-color: #FF4700;
+  background-color: #FF4700; }
+
+.item-radio:checked + .item-styled-radio:before {
+  content: "";
+  display: block;
+  position: relative;
+  top: 1px;
+  left: 6px;
+  width: 6px;
+  height: 14px;
+  border-color: #F7F7F7;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg); }
+
+.item-color {
+  display: none; }
+
+.item-styled-color {
+  background: #F7F7F7; }
+  .item-styled-color .value {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 56px;
+    height: 30px;
+    border-radius: 5px;
+    border-color: #A8A8A8;
+    border-width: 1px;
+    border-style: solid; }
+  .item-styled-color .color-box-wrap {
+    display: none;
+    box-sizing: border-box;
+    position: relative;
+    height: 0;
+    width: 100%;
+    padding: 0 0 100% 0;
+    margin: 0.6em 0 0em; }
+    .item-styled-color .color-box-wrap.show {
+      display: block; }
+    .item-styled-color .color-box-wrap .color-box-container {
+      position: absolute;
+      height: 99.97%;
+      width: 100%;
+      left: 0;
+      top: 0; }
+      .item-styled-color .color-box-wrap .color-box-container .color-box {
+        float: left;
+        cursor: pointer; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
+          border-top-left-radius: 5px; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
+          border-top-right-radius: 5px; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
+          border-bottom-left-radius: 5px; }
+        .item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
+          border-bottom-right-radius: 5px; }
+
+.item-date, .item-time {
+  position: absolute;
+  color: #F7F7F7 !important; }
+
+.item-styled-date, .item-styled-time {
+  position: absolute;
+  top: 13px;
+  right: 10px;
+  color: #A8A8A8;
+  font-size: 1em;
+  line-height: 1em;
+  background-color: #F7F7F7; }
+
+.item-input-wrapper {
+  border-radius: 5px;
+  border: 2px solid #DEDEDE; }
+
+.item-input-wrapper-button {
+  box-sizing: border-box;
+  width: 77%; }
+
+.item-input {
+  border: 0;
+  background-color: transparent;
+  padding: 0 10px 7px 10px;
+  font-size: 13px;
+  width: 100%;
+  box-sizing: border-box; }
+
+.button-container {
+  text-align: center; }
+
+.item-button {
+  width: 60%;
+  height: 35px;
+  background-color: #FF4700;
+  border-radius: 5px;
+  color: white;
+  font-size: 0.8em;
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none; }
+
+.item-input-button {
+  position: absolute;
+  right: 10px;
+  top: 9px;
+  width: 20%; }
+
+.tab-buttons {
+  display: table;
+  width: 100%;
+  box-sizing: border-box;
+  table-layout: fixed; }
+
+.tab-button {
+  display: table-cell;
+  position: relative;
+  color: #FF4700;
+  border: 1px solid #FF4700;
+  border-right-width: 0;
+  font-size: 14px;
+  padding: 5px 0;
+  text-align: center;
+  right: -1px; }
+
+.tab-button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-right-width: 0; }
+
+.tab-button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-right-width: 1px; }
+
+.tab-button.active {
+  background-color: #FF4700;
+  color: #F7F7F7; }
+
+.item-slider {
+  position: relative;
+  top: 8px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  height: 30px;
+  width: 79%;
+  overflow: hidden;
+  background-color: transparent;
+  margin-top: -10px; }
+
+.item-slider::-webkit-slider-thumb:before {
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: -1001px;
+  height: 2px;
+  width: 1000px;
+  background: #FF4700; }
+
+.item-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  position: relative;
+  top: -13px;
+  height: 28px;
+  width: 28px;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+  border: 2px solid #EAEAEA; }
+
+.item-slider::-webkit-slider-runnable-track {
+  height: 2px;
+  background-color: #DEDEDE; }
+
+.item-slider::-webkit-slider-thumb:after {
+  content: "lll";
+  position: absolute;
+  left: 5px;
+  top: 3px;
+  height: 12px;
+  width: 10px;
+  font-weight: bold;
+  text-align: center;
+  color: #DEDEDE;
+  font-size: 16px;
+  letter-spacing: 1px; }
+
+.item-slider-text {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  width: 16%; }
+
+.item-slider-text .item-input {
+  text-align: center; }
+
+.delete-item {
+  width: 30px;
+  height: 30px;
+  right: 5px;
+  top: 5px;
+  position: absolute;
+  border-radius: 6px; }
+
+.delete-item:before, .delete-item:after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 2px;
+  background-color: #A8A8A8;
+  border-radius: 2px;
+  top: 16px; }
+
+.delete-item:before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  left: 3px; }
+
+.delete-item:after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  right: 3px; }
+
+.add-item {
+  color: #FF4700; }
+
+.item-draggable-handle {
+  position: absolute;
+  right: 5px;
+  top: 10px;
+  height: 28px;
+  width: 28px; }
+
+.item-draggable-handle-bar {
+  margin-top: 5px;
+  height: 2px;
+  width: 20px;
+  background-color: #A8A8A8;
+  text-align: center; }
+
+[draggable=true] {
+  background-color: #F7F7F7;
+  border: 2px solid #EAEAEA;
+  border-radius: 2px; }
--- a/clients/pebble/configuration_page/public/css/slate.min.css
+++ b/clients/pebble/configuration_page/public/css/slate.min.css
--- a/clients/pebble/configuration_page/public/fonts/pfdindisplaypro-regular.woff
+++ b/clients/pebble/configuration_page/public/fonts/pfdindisplaypro-regular.woff
--- a/clients/pebble/configuration_page/public/fonts/ptsans-regular.woff
+++ b/clients/pebble/configuration_page/public/fonts/ptsans-regular.woff
--- a/clients/pebble/configuration_page/public/index.html
+++ b/clients/pebble/configuration_page/public/index.html
@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<title>McLighting Pebble Configuration</title>
+	<link rel='stylesheet' type='text/css' href='css/slate.min.css'>
+	<script src='js/slate.min.js'></script>
+	<style>
+		.title {
+			padding: 15px 10px;
+			text-transform: uppercase;
+			font-family: 'PT Sans', sans-serif;
+			font-size: 1.2em;
+			font-weight: 500;
+			color: #888888;
+			text-align: center;
+		}
+	</style>
+	</head>
+
+	<body>
+		<h1 class='title'>McLighting Pebble Configuration</h1>
+
+		<div class='item-container'>
+			<div class='item-container-content'>
+				<div class='item'>
+					Use this configuration page to set the URL of your McLighting smart light.
+				</div>
+			</div>
+		</div>
+
+		<div class="item-container">
+			<div class="item-container-header">McLighting URL</div>
+			<div class="item-container-content">
+				<label class="item">
+					<div class="item-input-wrapper">
+						<input type="text" class="item-input" name="esp_url" id="esp_url" placeholder="ws://esp8266_01.local:81" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+					</div>
+				</label>
+			</div>
+		</div>
+
+		<!-- div class='item-container'>
+		<div class='item-container-header'>Customizability</div>
+		<div class='item-container-content'>
+		<label class='item'>
+		Background Color
+		<input id='background_color_picker' type='text' class='item-color item-color-sunny' value='#000000'>
+		</label>
+		</div>
+		<div class='item-container-footer'>
+		Choose the app's background color. Used if High Contrast Mode is not selected. Note: Only available on Basalt watches that support many colors.
+		</div>
+		</div>
+
+		<div class='item-container'>
+		<div class='item-container-header'>Accessibility</div>
+		<div class='item-container-content'>
+		<label class='item'>
+		High Contrast Mode
+		<input id='high_contrast_checkbox' type='checkbox' class='item-toggle'>
+		</label>
+		</div>
+		<div class='item-container-footer'>
+		This switches the app colors to a higher contrast set that promotes readability in low light.
+		</div>
+		</div -->
+
+		<div class='item-container'>
+			<div class='button-container'>
+				<input id='submit_button' type='button' class='item-button' value='SAVE'>
+			</div>
+		</div>
+	</body>
+	
+	<script>
+		function getConfigData() {
+			//var backgroundColorPicker = document.getElementById('background_color_picker');
+			//var highContrastCheckbox = document.getElementById('high_contrast_checkbox');
+			var urlTextfield = document.getElementById('esp_url');
+
+			var options = {
+				//      'background_color': backgroundColorPicker.value,
+				//      'high_contrast': highContrastCheckbox.checked
+				'esp_url': urlTextfield.value
+			};
+
+			// Save for next launch
+			//localStorage['background_color'] = options['background_color'];
+			//localStorage['high_contrast'] = options['high_contrast'];
+			localStorage['esp_url'] = options['esp_url'];
+
+			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;
+		}
+
+		var submitButton = document.getElementById('submit_button');
+		submitButton.addEventListener('click', function() {
+		console.log('Submit');
+
+		// Set the return URL depending on the runtime environment
+		var return_to = getQueryParam('return_to', 'pebblejs://close#');
+			document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData()));
+		});
+
+		(function() {
+			//var backgroundColorPicker = document.getElementById('background_color_picker');
+			//var highContrastCheckbox = document.getElementById('high_contrast_checkbox');
+			var urlTextfield = document.getElementById('esp_url');
+
+			// Load any previously saved configuration, if available
+			if(localStorage['esp_url']) {
+				//highContrastCheckbox.checked = JSON.parse(localStorage['high_contrast']);
+				//backgroundColorPicker.value = localStorage['background_color'];
+				urlTextfield.value = localStorage['esp_url'];
+			}
+		})();
+	</script>
+</html>
--- a/clients/pebble/configuration_page/public/js/slate.js
+++ b/clients/pebble/configuration_page/public/js/slate.js
--- a/clients/pebble/configuration_page/public/js/slate.min.js
+++ b/clients/pebble/configuration_page/public/js/slate.min.js
--- a/clients/pebble/watchapp/appinfo.json
+++ b/clients/pebble/watchapp/appinfo.json
@ -0,0 +1,46 @@
+{
+    "appKeys": {},
+    "capabilities": [
+        "configurable"
+    ],
+    "companyName": "pebble@tobiasblum.de",
+    "longName": "McLighting",
+    "projectType": "pebblejs",
+    "resources": {
+        "media": [
+            {
+                "file": "images/menu_icon.png",
+                "menuIcon": true,
+                "name": "IMAGE_MENU_ICON",
+                "type": "bitmap"
+            },
+            {
+                "file": "images/logo_splash.png",
+                "name": "IMAGE_LOGO_SPLASH",
+                "type": "bitmap"
+            },
+            {
+                "file": "images/tile_splash.png",
+                "name": "IMAGE_TILE_SPLASH",
+                "type": "bitmap"
+            },
+            {
+                "file": "fonts/UbuntuMono-Regular.ttf",
+                "name": "MONO_FONT_14",
+                "type": "font"
+            }
+        ]
+    },
+    "sdkVersion": "3",
+    "shortName": "McLighting",
+    "targetPlatforms": [
+        "aplite"
+    ],
+    "uuid": "11c1a793-0ddf-4045-8a40-4b4d059763ea",
+    "versionCode": 1,
+    "versionLabel": "1.0",
+    "watchapp": {
+        "hiddenApp": false,
+        "watchface": false
+    }
+}
--- a/clients/pebble/watchapp/src/app.js
+++ b/clients/pebble/watchapp/src/app.js
@ -0,0 +1,393 @@
+/**
+ * Welcome to Pebble.js!
+ *
+ * This is where you write your app.
+ */
+
+var UI = require('ui');
+var Settings = require('settings');
+//var ajax = require('ajax');
+
+
+var wsUri = "ws://esp8266_01.local:81/";
+
+var websocket;
+
+var main = new UI.Card({
+	title: 'Mc Lighting',
+	icon: 'images/menu_icon.png',
+	//subtitle: 'Hello World!',
+	body: 'Loading ...'
+});
+
+var colors = [
+	["White", "ffffff"],
+	["Red", "ff0000"],
+	["Blue", "0000ff"],
+	["Green", "00ff00"],
+	["Yellow", "ffff00"],
+	["White", "ffffff"],
+	["Pink", "ff1493"],
+	["Maroon", "800000"],
+	["Forest", "228b22"],
+	["Orange", "ff4500"],
+	["Cyan", "00ffff"]
+];
+
+var modes = ["Hold", "Off", "All", "Wipe", "Rainbow", "Rainbow Cycle", "Theater Chase", "Theater Chase Rainbow", "TV"];
+
+// **********************************
+// Init app
+// **********************************
+function init() {
+	console.log("init()");
+	
+	//var options = Settings.option();
+	//console.log("Settings: ", JSON.stringify(options));
+	
+	var esp_url = Settings.option('esp_url');
+	
+	if (esp_url === "") {
+		//main.body('NO');
+		esp_url = wsUri;
+	} else {
+		//main.body('YES'+esp_url);
+	}
+  
+	// Connect Websocket
+	websocket = new WebSocket(esp_url);
+	websocket.onopen = function(evt) {
+    	main.body('WebSocket connected!');
+		console.log("init() CONN");
+		
+    	websocket.send("$");
+  	};
+  	websocket.onclose = function(evt) { 
+		console.log("init() CLOSE", JSON.stringify(evt));
+    	errorMessage("WebSocket connection closed");
+  	};
+  	websocket.onmessage = function(evt) { 
+    	//console.log("WS received: "); 
+		updateStatus(evt.data);
+  	};
+	websocket.onerror = function(evt) {
+		console.log("init() ERROR", JSON.stringify(evt));
+		errorMessage("WebSocket error");
+	};
+  
+	main.show();
+}
+
+function updateStatus(msg) {
+	console.log("updateStatus: ", msg);
+	if (msg != "OK" && msg != "Connected") {
+		try {
+			var json = JSON.parse(msg);
+			var str_status = '';
+			if (json.mode !== undefined) {
+				console.log("JSON mode: ", json.mode);
+
+				str_status += 'Mode: ' + modes[json.mode] + "\n";
+				str_status += 'Brightness: ' + Math.round(json.brightness / 2.55) + "%\n";
+				str_status += 'Delay: ' + json.delay_ms + " ms\n";
+				str_status += 'Color: #' + decimalToHex(json.color[0], 2) + decimalToHex(json.color[1], 2) + decimalToHex(json.color[2], 2) + "\n";
+
+				main.body(str_status);
+			}
+		}
+		catch(evt) {
+			console.log("JSON parse error: ", JSON.stringify(evt)); 
+		}
+	}
+}
+
+function decimalToHex(decimal, chars) {
+	return (decimal + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
+}
+
+function errorMessage(message) {
+	var error_card = new UI.Card({
+		title: 'Error occurred',
+		icon: 'images/menu_icon.png',
+		subtitle: 'Press any button.',
+		body: message,
+	});
+	error_card.show();
+}
+
+
+
+
+// **********************************
+// Main Menu
+// **********************************
+main.on('click', 'select', function(e) {
+	var menu = new UI.Menu({
+		sections: [{
+			items: [
+				{
+					title: 'Mode',
+					//icon: 'images/menu_icon.png',
+					subtitle: 'Choose working mode'
+				}, {
+					title: 'Brightness',
+					subtitle: 'Let it shine'
+				}, {
+					title: 'Color',
+					subtitle: 'Bring color to the world'
+				}, {
+					title: 'Delay',
+					subtitle: 'Forever faster'
+				}
+			]
+		}]
+	});
+  
+  
+  
+	// **********************************
+	// Main Menu Selected
+	// **********************************
+	menu.on('select', function(e) {
+		console.log('Selected item #' + e.itemIndex + ' of section #' + e.sectionIndex);
+		console.log('The item is titled "' + e.item.title + '"');
+
+		// Mode selection
+		var mode_menu;
+		if (e.itemIndex === 0) {
+
+			mode_menu = new UI.Menu({
+				sections: [{
+					items: [
+						{
+							title: 'Off',
+							subtitle: 'Turn it off'
+						}, {
+							title: 'All',
+							subtitle: 'All LEDs on'
+						}, {
+							title: 'Wipe',
+							subtitle: 'Wipe it bright'
+						}, {
+							title: 'Rainbow',
+							subtitle: 'Bring color to the world'
+						}, {
+							title: 'Rainbow Cycle',
+							subtitle: 'Like a unicorn'
+						},{
+							title: 'Theater Chase',
+							subtitle: 'Disco'
+						},{
+							title: 'Theater Chase Rainbow',
+							subtitle: 'Unicorn disco'
+						}, {
+							title: 'TV',
+							subtitle: 'Video killed the radio star'
+						}
+					]
+				}]
+			});
+			mode_menu.show();
+
+			// **********************************
+			// Mode Selected
+			// **********************************
+			mode_menu.on('select', function(e) {
+				// Select mode
+				console.log('Selected mode #' + e.itemIndex + ' of section #' + e.sectionIndex);
+
+				setMode(e.itemIndex);
+			});
+		}
+
+
+		// Brightness selection
+		var brightness_menu;
+		if (e.itemIndex === 1) {
+			var brightness_items  = [];
+
+			for (var i = 0; i<=10; i++) {
+				var brightness_item = {
+					title: (i*10) + " %",
+				};
+				brightness_items.push(brightness_item);
+			}
+
+			brightness_menu = new UI.Menu({
+				sections: [{
+					items: brightness_items
+				}]
+			});
+			brightness_menu.show();
+
+			// **********************************
+			// Brightness Selected
+			// **********************************
+			brightness_menu.on('select', function(e) {
+				// Select mode
+				console.log('Selected mode #' + e.itemIndex + ' of section #' + e.sectionIndex);
+
+				setBrightness(e.itemIndex);
+			});
+		}
+
+
+		// Color selection
+		var color_menu;
+		if (e.itemIndex === 2) {
+			var color_items  = [];
+
+			for (var k = 0; k < colors.length; k++) {
+				var color_item = {
+					title: colors[k][0]
+				};
+				color_items.push(color_item);
+			}
+
+			color_menu = new UI.Menu({
+				sections: [{
+					items: color_items
+				}]
+			});
+			color_menu.show();
+
+			// **********************************
+			// Brightness Selected
+			// **********************************
+			color_menu.on('select', function(e) {
+				// Select mode
+				console.log('Selected mode #' + e.itemIndex + ' of section #' + e.sectionIndex);
+
+				setColor(e.itemIndex);
+			});
+		}
+
+
+		// Delay selection
+		var delay_menu;
+		if (e.itemIndex === 3) {
+			var delay_items  = [];
+
+			for (var j = 0; j<=15; j++) {
+				var delay_item = {
+					title: Math.round(j*10) + " ms",
+				};
+				delay_items.push(delay_item);
+			}
+
+			delay_menu = new UI.Menu({
+				sections: [{
+					items: delay_items
+				}]
+			});
+			delay_menu.show();
+
+			// **********************************
+			// Brightness Selected
+			// **********************************
+			delay_menu.on('select', function(e) {
+				// Select mode
+				console.log('Selected mode #' + e.itemIndex + ' of section #' + e.sectionIndex);
+
+				setDelay(e.itemIndex);
+			});
+		}
+
+
+	});
+	menu.show();
+});
+
+
+
+// **********************************
+// Requests
+// **********************************
+function setMode(mode) {
+	if (mode === 0) {
+		performRequest("=off");
+	}
+	if (mode === 1) {
+		performRequest("=all");
+	}
+	if (mode === 2) {
+		performRequest("=wipe");
+	}
+	if (mode === 3) {
+		performRequest("=rainbow");
+	}
+	if (mode === 4) {
+		performRequest("=rainbowCycle");
+	}
+	if (mode === 5) {
+		performRequest("=theaterchase");
+	}
+	if (mode === 6) {
+		performRequest("=theaterchaseRainbow");
+	}
+	if (mode === 7) {
+		performRequest("=tv");
+	}
+}
+
+function setBrightness(index) {
+	var value = Math.round(index * 25.5);
+	performRequest("%"+value);
+}
+
+function setColor(index) {
+	var value = colors[index][1];
+	performRequest("*"+value);
+}
+
+function setDelay(index) {
+	var value = Math.round(index * 10);
+	performRequest("?"+value);
+}
+
+
+
+function performRequest(message) {
+	websocket.send(message);
+}
+
+
+main.on('click', 'up', function(e) {
+	// Restart websocket connection
+	//websocket.send("$");
+	websocket.close();
+	init();
+});
+
+main.on('click', 'down', function(e) {
+	// Update status
+	websocket.send("$");
+});
+
+
+
+// **********************************
+// Settings
+// **********************************
+// https://pebble.github.io/pebblejs/#settings
+// https://github.com/pebble/slate
+// Set a configurable with just the close callback
+Settings.config(
+	{ url: 'https://mclighting-pebble-config.firebaseapp.com' },
+	function(e) {
+		console.log('closed configurable');
+
+		// Show the parsed response
+		console.log(JSON.stringify(e.options));
+		init();
+
+		// Show the raw response if parsing failed
+		if (e.failed) {
+			console.log(e.response);
+		}
+	}
+);
+
+
+
+init();