diff --git a/examples/gui/data/index.htm b/examples/gui/data/index.htm
index 5874070..4150d4f 100644
--- a/examples/gui/data/index.htm
+++ b/examples/gui/data/index.htm
@@ -1,23 +1,28 @@
-
-
- Control
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Control
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js
index c101846..b4f4c1a 100644
--- a/examples/gui/data/js/controls.js
+++ b/examples/gui/data/js/controls.js
@@ -13,6 +13,50 @@ const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;
+// Colors
+const C_TURQUOISE = 0;
+const C_EMERALD = 1;
+const C_PETERRIVER = 2;
+const C_WETASPHALT = 3;
+const C_SUNFLOWER = 4;
+const C_CARROT = 5;
+const C_ALIZARIN = 6;
+
+function colorClass(colorId){
+ colorId = Number(colorId);
+ switch(colorId){
+ case C_TURQUOISE:
+ return "turquoise";
+ break;
+
+ case C_EMERALD:
+ return "emerald";
+ break;
+
+ case C_PETERRIVER:
+ return "peterriver";
+ break;
+
+ case C_WETASPHALT:
+ return "wetasphalt";
+ break;
+
+ case C_SUNFLOWER:
+ return "sunflower";
+ break;
+
+ case C_CARROT:
+ return "carrot"
+ break;
+
+ case C_ALIZARIN:
+ return "alizarin"
+ break;
+ default:
+ return "alizarin";
+ }
+}
+
var websock;
function start() {
@@ -45,10 +89,10 @@ function start() {
$('#mainHeader').html(data.label);
break;
case UI_LABEL:
- $('#row').append(""+data.label+"
"+data.value+"");
+ $('#row').append(""+data.label+"
"+data.value+"");
break;
case UI_BUTTON:
- $('#row').append(""+data.label+"
");
+ $('#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;
@@ -60,7 +104,7 @@ function start() {
input = "";
}
$('#row').append(
- ""+data.label+"
" +
+ "
"+data.label+"
" +
label + "
" +
"
" + input +
"" +
@@ -71,7 +115,7 @@ function start() {
//NO BREAK
case UI_PAD:
$('#row').append(
- "
"+data.label+"
"+
+ "
"+data.label+"
"+
"