added rebble store page link to README

Memory usage improvements, combination of charsets, better handling of config page submit Started adding health / battery display, more...

.gitignore

@@ -1,5 +1,4 @@
 assets
-config
 bin
 
 # Created by https://www.gitignore.io/api/osx

README.md

@@ -2,7 +2,43 @@
 
 A Pebble Watchface for Pebble, Pebble Time and Pebble Time Round
 
-Original source code by lastfuture
-SDK 2.0beta4 port by Jnm
-SDK 3.0 port and colorizing by hexahedria
-adaptations for Chalk and Aplite by lastfuture
+## Store page
+
+[Squared 4.0 – Rebble Store Page](https://apps.rebble.io/en_US/application/52f014d342937dc4430000ee)
+
+## Demo videos
+
+[![Promo for Vine](https://img.youtube.com/vi/EjgYxUxGvdI/default.jpg)](https://youtu.be/EjgYxUxGvdI)
+
+[![Animation Showcase](https://img.youtube.com/vi/P3UX2pdzZdk/default.jpg)](https://youtu.be/P3UX2pdzZdk)
+
+## Gallery
+
+#### App banners for the Pebble featured section
+![Banner Pebble Time Round](images/banner_squared_chalk.jpg)
+
+![Banner Pebble Time](images/banner_squared_basalt.jpg)
+
+![Banner Pebble Steel](images/banner_squared_aplite.jpg)
+
+#### Official Pebble promo shot for the Pebble website
+![Pebble Official Promo Shot](images/pebble-promo-shot.jpeg)
+
+#### Showcase of some color options
+![Color Demo](images/colors_squared_chalk.jpg)
+
+#### Settings page automatically showing the correct frame for the connected model and colorway
+![Settings Demo](images/settings_squared_4.7.jpg)
+
+#### Own promo photo of Squared 4.0 on the Pebble Time Round
+![Pebble Time Round Promo](images/promo-ptr.jpg)
+
+## Other Platforms
+[Fitbit Versa](https://git.broken.graphics/alina/fitbit-squared)
+
+## Credits
+
+Original Squared 1.0 source code by Alina  
+SDK 2.0beta4 port by Jnm  
+SDK 3.0 port and colorization by hexahedria  
+Adaptations for all black and white and color Pebble models as well as continued development by Alina  

appinfo.json

@@ -1,45 +0,0 @@
-{
-    "appKeys": {
-        "background_color": 4,
-        "backlight": 17,
-        "btvibe": 12,
-        "center": 11,
-        "contrast": 13,
-        "debugwatch": 50,
-        "eu_date": 1,
-        "invert": 9,
-        "large_mode": 0,
-        "leading_zero": 3,
-        "monochrome": 10,
-        "nightsaver": 14,
-        "ns_start": 15,
-        "ns_stop": 16,
-        "number_base_color": 5,
-        "number_variation": 6,
-        "ornament_base_color": 7,
-        "ornament_variation": 8,
-        "quick_start": 2,
-        "weekday": 18
-    },
-    "capabilities": [
-        "configurable"
-    ],
-    "companyName": "lastfuture",
-    "longName": "Squared 4.0",
-    "projectType": "native",
-    "resources": {
-        "media": []
-    },
-    "sdkVersion": "3",
-    "shortName": "Squared",
-    "targetPlatforms": [
-        "aplite",
-        "basalt",
-        "chalk"
-    ],
-    "uuid": "793bab03-9464-48a2-b63f-3f779c473db8",
-    "versionLabel": "4.11",
-    "watchapp": {
-        "watchface": true
-    }
-}

config/squared40/css/slate.css

@@ -0,0 +1,485 @@
+@font-face {
+  font-family: 'PFDinDisplayProLightWebfont';
+  src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal; }
+@font-face {
+  font-family: 'PTSansRegularWebfont';
+  src: url("../fonts/PTSans-regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal; }
+* {
+  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: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
+  font-weight: normal; }
+
+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', PTSansRegularWebfont, sans-serif;
+  font-size: .8em;
+  font-weight: normal;
+  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: 4px;
+  top: 3px;
+  height: 12px;
+  width: 10px;
+  font-weight: normal;
+  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; }

config/squared40/index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Squared 4.0 Settings</title>
+	<link rel="stylesheet" href="css/slate.min.css">
+<body>
+	
+	<div class="item-container">
+    	<div class="item-container-header">Colors</div>
+    	<div class="item-container-content">
+        	<label class="item bwhide">
+            	Number Color
+            	<select id="num_color" dir='rtl' class="item-select">
+    				<option class="bwhide" selected="selected">Diamond</option>
+    				<option class="bwhide">Ruby</option>
+    				<option class="bwhide">Fire</option>
+    				<option class="bwhide">Forest</option>
+    				<option class="bwhide">Red</option>
+    				<option class="bwhide">Green</option>
+    				<option class="bwhide">Blue</option>
+    				<option class="bwhide">Yellow</option>
+    				<option class="bwhide">Cyan</option>
+    				<option class="bwhide">Magenta</option>
+    				<option class="bwhide">Violet</option>
+    				<option class="bwhide">Orange</option>
+    				<option class="bwhide">Vivid Cerulean</option>
+    				<option class="bwhide">Chrome Yellow</option>
+    				<option class="bwhide">Spring Green</option>
+    				<option>Black</option>
+    				<option>Dark Gray</option>
+    				<option class="bwhide">Light Gray</option>
+    				<option class="bwdefault">White</option>
+    			</select>
+        	</label>
+        	<label class="item bwhide">
+            	Ornament Color
+            	<select id="orn_color" dir='rtl' class="item-select">
+    				<option class="bwhide">Diamond</option>
+    				<option class="bwhide" selected="selected">Ruby</option>
+    				<option class="bwhide">Fire</option>
+    				<option class="bwhide">Forest</option>
+    				<option class="bwhide">Red</option>
+    				<option class="bwhide">Green</option>
+    				<option class="bwhide">Blue</option>
+    				<option class="bwhide">Yellow</option>
+    				<option class="bwhide">Cyan</option>
+    				<option class="bwhide">Magenta</option>
+    				<option class="bwhide">Violet</option>
+    				<option class="bwhide">Orange</option>
+    				<option class="bwhide">Vivid Cerulean</option>
+    				<option class="bwhide">Chrome Yellow</option>
+    				<option class="bwhide">Spring Green</option>
+    				<option>Black</option>
+    				<option class="bwdefault">Dark Gray</option>
+    				<option class="bwhide">Light Gray</option>
+    				<option>White</option>
+    			</select>
+        	</label>
+        	<label class="item bwhide">
+            	Background Color
+            	<select id="bg_color" dir='rtl' class="item-select">
+    				<option class="bwdefault" selected="selected">Black</option>
+    				<option>Dark Gray</option>
+    				<option class="bwhide">Light Gray</option>
+    				<option>White</option>
+    				<option class="bwhide">Red</option>
+    				<option class="bwhide">Green</option>
+    				<option class="bwhide">Blue</option>
+    				<option class="bwhide">Yellow</option>
+    				<option class="bwhide">Cyan</option>
+    				<option class="bwhide">Magenta</option>
+    				<option class="bwhide">Violet</option>
+    				<option class="bwhide">Orange</option>
+    				<option class="bwhide">Vivid Cerulean</option>
+    				<option class="bwhide">Chrome Yellow</option>
+    				<option class="bwhide">Spring Green</option>
+    			</select>
+        	</label>
+            <label class='item colorhide'>
+                Three Colors
+                <input id='monochrome' type='checkbox' class='item-toggle'>
+            </label>
+            <label class='item colorhide'>
+                Invert colors
+                <input id='invert' type='checkbox' class='item-toggle'>
+            </label>
+    	</div>
+        <div class='item-container-footer'>
+            Cras mattis consectetur purus sit amet fermentum.
+        </div>
+	</div>
+	<div class='item-container'>
+        <div class='item-container-header'>Appearance</div>
+        <div class='item-container-content'>
+            <label class='item roundhide'>
+                Large Numbers
+                <input id='size' type='checkbox' class='item-toggle'>
+            </label>
+            <label class='item'>
+                Leading Zero
+                <input id='zero' type='checkbox' class='item-toggle'>
+            </label>
+            <label class='item'>
+                European Date (dd/mm)
+                <input id='date' type='checkbox' class='item-toggle'>
+            </label>
+            <label class='item'>
+                Fast Start Delay
+                <input id='delay' type='checkbox' class='item-toggle'>
+            </label>
+        </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>

config/squared40/js/main.js

@@ -0,0 +1,150 @@
+function parse(val) {
+    var result = "Not found",
+        tmp = [];
+    location.search
+    //.replace ( "?", "" ) 
+    // this is better, there might be a question mark inside
+    .substr(1)
+        .split("&")
+        .forEach(function (item) {
+        tmp = item.split("=");
+        if (tmp[0] === val) result = decodeURIComponent(tmp[1]);
+    });
+    return result;
+}
+
+function getColorByName(name) {
+	return {
+		"Diamond":		202,
+		"Ruby": 		226,
+		"Fire":			224,
+		"Forest":		200,
+		"Red":			240,
+		"Green":		204,
+		"Blue":			195,
+		"Yellow":		252,
+		"Cyan":			207,
+		"Magenta":		243,
+		"Violet":		227,
+		"Orange":		244,
+		"Vivid Cerulean":	203,
+		"Chrome Yellow":	248,
+		"Spring Green":		206,
+		"Black":		192,
+		"Dark Gray":	213,
+		"Light Gray":	234,
+		"White":		255
+	}[name];
+}
+function getVariationByName(name) {
+	return ["Diamond", "Ruby", "Fire", "Forest"].indexOf(name) != -1;
+}
+
+(function() {
+  loadOptions();
+  submitHandler();
+})();
+
+function getDataToSend() {
+	bg_color = $("#bg_color").val();
+	num_color = $("#num_color").val();
+	orn_color = $("#orn_color").val();
+	data = {
+	    large_mode: ''+$("#size").prop("checked"),
+	    eu_date: ''+$("#date").prop("checked"),
+	    quick_start: ''+$("#delay").prop("checked"),
+	    leading_zero: ''+$("#zero").prop("checked"),
+	    background_color: getColorByName(bg_color),
+	    number_base_color: getColorByName(num_color),
+	    number_variation: 0+getVariationByName(num_color),
+	    ornament_base_color: getColorByName(orn_color),
+	    ornament_variation: 0+getVariationByName(orn_color),
+	    invert: ''+$("#invert").prop("checked"),
+	    monochrome: ''+$("#monochrome").prop("checked"),
+	};
+	return data;
+}
+
+function saveData(){
+	if(localStorage) {
+		toStore = {
+			size: ''+$("#size").prop("checked"),
+			date: ''+$("#date").prop("checked"),
+			delay: ''+$("#delay").prop("checked"),
+			zero: ''+$("#zero").prop("checked"),
+			bg_color: $("#bg_color").val(),
+			num_color: $("#num_color").val(),
+			orn_color: $("#orn_color").val(),
+			invert: ''+$("#invert").prop("checked"),
+			monochrome: ''+$("#monochrome").prop("checked")
+		};
+		localStorage.setItem("lastconfig", JSON.stringify(toStore));
+	}
+}
+
+function restoreData(){
+	if(localStorage) {
+		stored = JSON.parse(localStorage.getItem("lastconfig"));
+		if(stored){
+			$("#size").prop("checked", (stored.size === 'true'));
+			$("#date").prop("checked", (stored.date === 'true'));
+			$("#delay").prop("checked", (stored.delay === 'true'));
+			$("#zero").prop("checked", (stored.zero === 'true'));
+			$("#bg_color").val(stored.bg_color);
+			$("#num_color").val(stored.num_color);
+			$("#orn_color").val(stored.orn_color);
+			$("#invert").prop("checked", (stored.invert === 'true'));
+			$("#monochrome").prop("checked", (stored.monochrome === 'true'));
+		}
+	}
+}
+
+
+
+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() {
+  if(parse('rect') == 'true') {
+      // $('.recthide').hide();
+  } else {
+      $('.roundhide').hide();
+  }
+  if(parse('bw') == 'true') {
+      $('.bwhide').hide();
+      $("option.bwhide").remove();
+      $("select").each(function() {
+          if ($(this)[0].value == "") {
+              $(this)[0].value = $(this).find('option.bwdefault').html();
+          }
+      });
+  } else {
+      $('.colorhide').hide();
+  }
+  restoreData();
+}
+
+function getAndStoreConfigData() {
+  saveData();
+  return getDataToSend();
+}
+
+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;
+}

config/squared412/css/slate.css

@@ -0,0 +1,485 @@
+@font-face {
+  font-family: 'PFDinDisplayProLightWebfont';
+  src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal; }
+@font-face {
+  font-family: 'PTSansRegularWebfont';
+  src: url("../fonts/PTSans-regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal; }
+* {
+  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: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
+  font-weight: normal; }
+
+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', PTSansRegularWebfont, sans-serif;
+  font-size: .8em;
+  font-weight: normal;
+  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: 4px;
+  top: 3px;
+  height: 12px;
+  width: 10px;
+  font-weight: normal;
+  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; }

config/squared412/css/squared.css

@@ -0,0 +1,119 @@
+.preview {
+    width: 144px;
+    height: 168px;
+    position: relative;
+    margin: 10px auto;
+    box-shadow: 0px 3px 7px rgba(0,0,0,0.4);
+    overflow: hidden;
+}
+.round-preview {
+    width: 178px;
+    height: 178px;
+    border-radius: 90px;
+}
+.round-preview .preview-scaler {
+    position: relative;
+    top: 6px;
+    left: 17px;
+}
+.preview-r {
+    top: -1px;
+    left: -1px;
+}
+.round-preview .preview-b-round {
+    width: 180px;
+    height: 180px;
+}
+.preview img {
+    image-rendering: crisp-edges;
+}
+.preview-scaler.scaled {
+    zoom: 1.2;
+    position: absolute;
+    top: -15px;
+    left: -12px;
+}
+.preview-n, .preview-o, .preview-o2, .preview-b, .preview-r, .preview-zero, .preview-zero2, .preview-eurodate, .preview-eurodate2, .preview-centeralign, .preview-centeralign-digit2 {
+    position: absolute;
+}
+.preview-zero {
+    width: 75px;
+    height: 75px;
+    overflow: hidden;
+}
+.preview-zero2 {
+    width: 30px;
+    height: 31px;
+    top: 132px;
+    left: 10px;
+    overflow: hidden;
+}
+.preview-zero2.smallzero .preview-o2 {
+    top: -132px;
+    left: -10px;
+}
+.showzero {
+    display: none;
+}
+.showzero.activeshowzero {
+    display: block;
+}
+.preview-zero2.eurodate.activeeurodate {
+    left: 70px;
+}
+.preview-eurodate, .preview-eurodate2 {
+    width: 55px;
+    height: 27px;
+    overflow: hidden;
+    top: 130px;
+    display: none;
+}
+.preview-eurodate img, .preview-eurodate2 img {
+    top: -130px;
+}
+
+.preview-eurodate img {
+    left: -15px;
+}
+.preview-eurodate2 img {
+    left: -75px;
+}
+.preview-eurodate {
+    left: 75px;
+}
+.preview-eurodate2 {
+    left: 15px;
+}
+
+.preview-eurodate .preview-o2 {
+    left: -15px;
+    top: -130px;
+}
+.preview-eurodate .preview-b.showzero {
+    left: -120px;
+}
+
+.preview-eurodate.activeeurodate, .preview-eurodate2.activeeurodate {
+    display: block;
+}
+
+.preview-centeralign {
+    display: none;
+}
+.preview-centeralign.activecenteralign {
+    display: block;
+}
+
+.preview-centeralign .preview-n {
+    left: -45px;
+}
+.preview-centeralign-digit2 {
+    width: 30px;
+    height: 30px;
+    left: 30px;
+    overflow: hidden;
+}
+
+.hide {
+    display: none;
+}

config/squared412/css/squared.min.css

@@ -0,0 +1 @@
+.preview{width:144px;height:168px;position:relative;margin:10px auto;box-shadow:0px 3px 7px rgba(0,0,0,0.4)}.preview-n,.preview-o,.preview-o2,.preview-b,.preview-zero,.preview-zero2,.preview-eurodate,.preview-eurodate2,.preview-centeralign,.preview-centeralign-digit2{position:absolute}.preview-zero{width:75px;height:75px;overflow:hidden}.preview-zero2{width:30px;height:30px;top:132px;left:10px;overflow:hidden}.preview-zero2.smallzero .preview-o2{top:-132px;left:-10px}.showzero{display:none}.showzero.activeshowzero{display:block}.preview-zero2.eurodate.activeeurodate{left:70px}.preview-eurodate,.preview-eurodate2{width:55px;height:25px;overflow:hidden;top:130px;display:none}.preview-eurodate img,.preview-eurodate2 img{top:-130px}.preview-eurodate img{left:-15px}.preview-eurodate2 img{left:-75px}.preview-eurodate{left:75px}.preview-eurodate2{left:15px}.preview-eurodate .preview-o2{left:-15px;top:-130px}.preview-eurodate .preview-b.showzero{left:-120px}.preview-eurodate.activeeurodate,.preview-eurodate2.activeeurodate{display:block}.preview-centeralign{display:none}.preview-centeralign.activecenteralign{display:block}.preview-centeralign .preview-n{left:-45px}.preview-centeralign-digit2{width:30px;height:30px;left:30px;overflow:hidden}