diff --git a/examples/softAP_UI_Test/data/css/style.css b/examples/softAP_UI_Test/data/css/style.css
index 9c35725..6157ca3 100644
--- a/examples/softAP_UI_Test/data/css/style.css
+++ b/examples/softAP_UI_Test/data/css/style.css
@@ -1,4 +1,3 @@
-
body{
background-color: #F4F3EF;
}
@@ -29,17 +28,16 @@
padding: 0.12em 0.4em 0.14em;
text-align: center;
color: #ffffff;
- font-size: 0.75em;
font-weight: 700;
line-height: 1;
- display: inline;
+ margin-bottom: 5px;
+ display: inline-block;
white-space: nowrap;
vertical-align: baseline;
position: relative;
top: -0.15em;
- background-color: #999999; }
-
- .label { ... }
+ background-color: #999999;
+ margin-bottom: 10px;}
.label.color-blue { background-color: #6f9ad1; }
.label.color-red { background-color: #d37c7c; }
@@ -292,26 +290,13 @@
margin-left: .5rem;
font-weight: normal; }
-
- /* Lists
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
- ul {
- list-style: circle inside; }
- ol {
- list-style: decimal inside; }
- ol, ul {
- padding-left: 0;
- margin-top: 0; }
- ul ul,
- ul ol,
- ol ol,
- ol ul {
- margin: 1.5rem 0 1.5rem 3rem;
- font-size: 90%; }
- li {
- margin-bottom: 1rem; }
-*/
+ #mainHeader{
+ display:inline-block;
+ }
+ #conStatus{
+ position:inherit;
+ font-size: 0.75em;
+ }
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -481,3 +466,92 @@
.control .confirm:focus {
background-color: #eee;
}
+
+
+
+/* Switch
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+
+.switch {
+ background-color: #bebebe;
+ border-radius: 4px;
+ box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ color: #fff;
+ cursor: pointer;
+ display: block;
+ font-size: 14px;
+ height: 26px;
+ margin-bottom: 12px;
+ position: relative;
+ width: 60px;
+ -webkit-transition: background-color 0.2s ease-in-out;
+ -moz-transition: background-color 0.2s ease-in-out;
+ -o-transition: background-color 0.2s ease-in-out;
+ -ms-transition: background-color 0.2s ease-in-out;
+ transition: background-color 0.2s ease-in-out;
+}
+.switch.checked {
+ background-color: #76d21d;
+}
+.switch input[type="checkbox"] {
+ cursor: pointer;
+ height: 10px;
+ left: 12px;
+ position: absolute;
+ top: 8px;
+ -webkit-transition: left 0.05s ease-in-out;
+ -moz-transition: left 0.05s ease-in-out;
+ -o-transition: left 0.05s ease-in-out;
+ -ms-transition: left 0.05s ease-in-out;
+ transition: left 0.05s ease-in-out;
+ width: 10px;
+}
+.switch.checked input[type="checkbox"] {
+ left: 38px;
+}
+.switch input:before {
+ background: #fff;
+ background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
+ background: -webkit-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+ background: -o-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+ background: -ms-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+ background: linear-gradient(to bottom, #fff 0%,#f0f0f0 100%);
+ border: 1px solid #fff;
+ border-radius: 2px;
+ box-shadow: 0 0 4px rgba(0,0,0,0.3);
+ content: '';
+ height: 18px;
+ position: absolute;
+ top: -5px;
+ left: -9px;
+ width: 26px;
+}
+.switch input:after {
+ background: #f0f0f0;
+ background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#fff));
+ background: -webkit-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+ background: -o-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+ background: -ms-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+ background: linear-gradient(to bottom, #f0f0f0 0%,#fff 100%);
+ border-radius: 10px;
+ content: '';
+ height: 12px;
+ margin: -1px 0 0 -1px;
+ position: absolute;
+ width: 12px;
+}
+.switch .icon-ok,
+.switch .icon-remove {
+ line-height: 28px;
+ text-shadow: 0 -2px 0 rgba(0,0,0,0.2);
+ margin: 0 9px;
+}
+.switch .icon-ok {
+ float: left;
+}
+.switch .icon-remove {
+ float: right;
+}
diff --git a/examples/softAP_UI_Test/data/js/controls.js b/examples/softAP_UI_Test/data/js/controls.js
index 8711475..e820a92 100644
--- a/examples/softAP_UI_Test/data/js/controls.js
+++ b/examples/softAP_UI_Test/data/js/controls.js
@@ -1,6 +1,3 @@
-// Roadmap:
-// Build a serial Console?
-
const UI_TITEL = 0;
const UI_LABEL = 1;
const UI_BUTTON = 2;
@@ -8,6 +5,7 @@ const UI_SWITCHER = 3;
const UI_PAD = 4;
const UI_CPAD = 5;
const UPDATE_LABEL = 6;
+const UPDATE_SWITCHER = 7;
const FOR = 0;
const BACK = 1;
@@ -16,6 +14,7 @@ const RIGHT = 3;
const CENTER = 4;
var websock;
+
function start() {
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
websock.onopen = function(evt) {
@@ -46,13 +45,27 @@ function start() {
$('#mainHeader').html(data.label);
break;
case UI_LABEL:
- $('#row').append("
"+data.label+"
");
+ $('#row').append(""+data.label+"
"+data.value+"");
break;
case UI_BUTTON:
$('#row').append(""+data.label+"
");
$('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
$('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
break;
+ case UI_SWITCHER:
+ var label = "