diff --git a/examples/gui/data/css/style.css b/examples/gui/data/css/style.css
index fb47e3e..18e86fb 100644
--- a/examples/gui/data/css/style.css
+++ b/examples/gui/data/css/style.css
@@ -320,7 +320,6 @@
 
   button {
     display: inline-block;
-
     padding: 10px;
     border-radius: 3px;
     color: #fff;
diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js
index d9422bd..99a9799 100644
--- a/examples/gui/data/js/controls.js
+++ b/examples/gui/data/js/controls.js
@@ -23,190 +23,250 @@ const C_CARROT = 5;
 const C_ALIZARIN = 6;
 const C_NONE = 7;
 
-function colorClass(colorId){
-  colorId = Number(colorId);
-  switch(colorId){
-    case C_TURQUOISE:
-      return "turquoise";
-    break;
+function colorClass(colorId) {
+    colorId = Number(colorId);
+    switch (colorId) {
+        case C_TURQUOISE:
+            return "turquoise";
+            break;
 
-    case C_EMERALD:
-      return "emerald";
-    break;
+        case C_EMERALD:
+            return "emerald";
+            break;
 
-    case C_PETERRIVER:
-      return "peterriver";
-      break;
+        case C_PETERRIVER:
+            return "peterriver";
+            break;
 
-    case C_WETASPHALT:
-      return "wetasphalt";
-    break;
+        case C_WETASPHALT:
+            return "wetasphalt";
+            break;
 
-    case C_SUNFLOWER:
-      return "sunflower";
-    break;
+        case C_SUNFLOWER:
+            return "sunflower";
+            break;
 
-    case C_CARROT:
-      return "carrot"
-    break;
+        case C_CARROT:
+            return "carrot"
+            break;
 
-    case C_ALIZARIN:
-      return "alizarin"
-    break;
+        case C_ALIZARIN:
+            return "alizarin"
+            break;
 
-    case C_NONE:
-      return ""
-    break;
+        case C_NONE:
+            return ""
+            break;
 
-    default:
-      return "";
-  }
+        default:
+            return "";
+    }
 }
 
 var websock;
 
 function start() {
-  websock = new WebSocket('ws://' + window.location.hostname + '/ws');
-  websock.onopen = function(evt) {
-    console.log('websock open');
-    $("#conStatus").addClass("color-green");
-    $("#conStatus").text("Connected");
-   };
-  websock.onclose = function(evt) {
-    console.log('websock close');
-    $("#conStatus").removeClass("color-green");
-    $("#conStatus").addClass("color-red");
-    $("#conStatus").text("Error / No Connection");
-  };
-  websock.onerror = function(evt) {
-    console.log(evt);
-    $("#conStatus").removeClass("color-green");
-    $("#conStatus").addClass("color-red");
-    $("#conStatus").text("Error / No Connection");
-  };
-  websock.onmessage = function(evt) {
-    console.log(evt);
-    var data = JSON.parse(evt.data);
-    var e = document.body;
-    var center = "";
-    switch(data.type){
-      case UI_TITEL:
-        document.title = data.label;
-        $('#mainHeader').html(data.label);
-      break;
-      case UI_LABEL:
-        $('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5 id='"+data.id+"'>"+data.label+"</h5><hr /><span id='l"+data.id+"' class='label'>"+data.value+"</span></div>");
-      break;
-      case UI_BUTTON:
-        $('#row').append("<div class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'>"+data.value+"</button></div>");
-        $('#'+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 = "<label id='sl"+data.id+"' class='switch checked'>";
-      var input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' checked>";
-      if(data.value == "0"){
-        label = "<label id='sl"+data.id+"' class='switch'>";
-        input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >";
-      }
-      $('#row').append(
-      "<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>" +
-      label + "<i class='icon-ok'></i>" +
-      "<i class='icon-remove'></i>" + input +
-      "</label>" +
-      "</div>");
-      break;
-      case UI_CPAD:
-      center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='pc"+data.id+"'>OK</a>";
-      //NO BREAK
-      case UI_PAD:
-      $('#row').append(
-      "<div class='two columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
-      "<nav class='control'>"+
-      "<ul>"+
-      "<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='pf"+data.id+"'>▲</a></li>" +
-      "<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>" +
-      "<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>" +
-      "<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>" +
-      "</ul>"+
-      center +
-      "</nav>"+
-      "</div>");
+    websock = new WebSocket('ws://' + window.location.hostname + '/ws');
+    websock.onopen = function(evt) {
+        console.log('websock open');
+        $("#conStatus").addClass("color-green");
+        $("#conStatus").text("Connected");
+    };
+    websock.onclose = function(evt) {
+        console.log('websock close');
+        $("#conStatus").removeClass("color-green");
+        $("#conStatus").addClass("color-red");
+        $("#conStatus").text("Error / No Connection");
+    };
+    websock.onerror = function(evt) {
+        console.log(evt);
+        $("#conStatus").removeClass("color-green");
+        $("#conStatus").addClass("color-red");
+        $("#conStatus").text("Error / No Connection");
+    };
+    websock.onmessage = function(evt) {
+        console.log(evt);
+        var data = JSON.parse(evt.data);
+        var e = document.body;
+        var center = "";
+        switch (data.type) {
+            case UI_TITEL:
+                document.title = data.label;
+                $('#mainHeader').html(data.label);
+                break;
+            case UI_LABEL:
+                $('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label'>" + data.value + "</span></div>");
+                break;
+            case UI_BUTTON:
+                $('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
+                $('#' + 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 = "<label id='sl" + data.id + "' class='switch checked'>";
+                var input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked>";
+                if (data.value == "0") {
+                    label = "<label id='sl" + data.id + "' class='switch'>";
+                    input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' >";
+                }
+                $('#row').append(
+                    "<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
+                    label + "<i class='icon-ok'></i>" +
+                    "<i class='icon-remove'></i>" + input +
+                    "</label>" +
+                    "</div>");
+                break;
+            case UI_CPAD:
+                center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
+                //NO BREAK
+            case UI_PAD:
+                $('#row').append(
+                    "<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
+                    "<nav class='control'>" +
+                    "<ul>" +
+                    "<li><a onmousedown='padclick(FOR, " + data.id + ", true)' onmouseup='padclick(FOR, " + data.id + ", false)' href='#' id='pf" + data.id + "'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' href='#' id='pr" + data.id + "'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(LEFT, " + data.id + ", true)' onmouseup='padclick(LEFT, " + data.id + ", false)' href='#' id='pl" + data.id + "'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(BACK, " + data.id + ", true)' onmouseup='padclick(BACK, " + data.id + ", false)' href='#' id='pb" + data.id + "'>▲</a></li>" +
+                    "</ul>" +
+                    center +
+                    "</nav>" +
+                    "</div>");
 
-      $('#pf'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
-      $('#pf'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
-      $('#pl'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
-      $('#pl'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
-      $('#pr'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
-      $('#pr'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
-      $('#pb'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
-      $('#pb'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
-      $('#pc'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
-      $('#pc'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
+                $('#pf' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(FOR, data.id, true)
+                    }
+                });
+                $('#pf' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(FOR, data.id, false)
+                    }
+                });
+                $('#pl' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(LEFT, data.id, true)
+                    }
+                });
+                $('#pl' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(LEFT, data.id, false)
+                    }
+                });
+                $('#pr' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(RIGHT, data.id, true)
+                    }
+                });
+                $('#pr' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(RIGHT, data.id, false)
+                    }
+                });
+                $('#pb' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(BACK, data.id, true)
+                    }
+                });
+                $('#pb' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(BACK, data.id, false)
+                    }
+                });
+                $('#pc' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(CENTER, data.id, true)
+                    }
+                });
+                $('#pc' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(CENTER, data.id, false)
+                    }
+                });
 
-      break;
-      case UPDATE_LABEL:
-      $('#l'+data.id).html(data.value);
-      break;
-      case UPDATE_SWITCHER:
-      if(data.value == "0")
-        switcher(data.id, 0);
-      else
-        switcher(data.id, 1);
-      break;
-      default:
-        console.error('Unknown type or event');
-      break;
-    }
-  };
+                break;
+            case UPDATE_LABEL:
+                $('#l' + data.id).html(data.value);
+                break;
+            case UPDATE_SWITCHER:
+                if (data.value == "0")
+                    switcher(data.id, 0);
+                else
+                    switcher(data.id, 1);
+                break;
+            default:
+                console.error('Unknown type or event');
+                break;
+        }
+    };
 }
 
 
 function buttonclick(number, isdown) {
-  if(isdown)websock.send("bdown:"+number);
-  else websock.send("bup:"+number);
+    if (isdown) websock.send("bdown:" + number);
+    else websock.send("bup:" + number);
 }
 
 function padclick(type, number, isdown) {
-  switch(type){
-    case CENTER:
-      if(isdown)websock.send("pcdown:"+number);
-      else websock.send("pcup:"+number);
-    break;
-    case FOR:
-      if(isdown)websock.send("pfdown:"+number);
-      else websock.send("pfup:"+number);
-    break;
-    case BACK:
-      if(isdown)websock.send("pbdown:"+number);
-      else websock.send("pbup:"+number);
-    break;
-    case LEFT:
-      if(isdown)websock.send("pldown:"+number);
-      else websock.send("plup:"+number);
-    break;
-    case RIGHT:
-      if(isdown)websock.send("prdown:"+number);
-      else websock.send("prup:"+number);
-    break;
+    switch (type) {
+        case CENTER:
+            if (isdown) websock.send("pcdown:" + number);
+            else websock.send("pcup:" + number);
+            break;
+        case FOR:
+            if (isdown) websock.send("pfdown:" + number);
+            else websock.send("pfup:" + number);
+            break;
+        case BACK:
+            if (isdown) websock.send("pbdown:" + number);
+            else websock.send("pbup:" + number);
+            break;
+        case LEFT:
+            if (isdown) websock.send("pldown:" + number);
+            else websock.send("plup:" + number);
+            break;
+        case RIGHT:
+            if (isdown) websock.send("prdown:" + number);
+            else websock.send("prup:" + number);
+            break;
 
-  }
-}
-
-function switcher(number, state){
-  if(state == null){
-    if($('#s'+number).is(':checked')){
-      websock.send("sactive:"+number);
-      $('#sl'+number).addClass('checked');
-    }else {
-      websock.send("sinactive:"+number);
-      $('#sl'+number).removeClass('checked');
     }
-  }else if(state == 1){
-    $('#sl'+number).addClass('checked');
-    $('#sl'+number).prop( "checked", true );
-  }else if(state == 0){
-    $('#sl'+number).removeClass('checked');
-    $('#sl'+number).prop( "checked", false );
-  }
+}
+
+function switcher(number, state) {
+    if (state == null) {
+        if ($('#s' + number).is(':checked')) {
+            websock.send("sactive:" + number);
+            $('#sl' + number).addClass('checked');
+        } else {
+            websock.send("sinactive:" + number);
+            $('#sl' + number).removeClass('checked');
+        }
+    } else if (state == 1) {
+        $('#sl' + number).addClass('checked');
+        $('#sl' + number).prop("checked", true);
+    } else if (state == 0) {
+        $('#sl' + number).removeClass('checked');
+        $('#sl' + number).prop("checked", false);
+    }
 }
diff --git a/examples/gui/gui.ino b/examples/gui/gui.ino
index d234845..90b924b 100644
--- a/examples/gui/gui.ino
+++ b/examples/gui/gui.ino
@@ -1,8 +1,8 @@
-#include <WiFi.h>
 #include <ESPUI.h>
+#include <WiFi.h>
 
-const char* ssid = "ESP32";
-const char* password = "";
+const char *ssid = "ESP32";
+const char *password = "";
 
 long oldTime = 0;
 bool switchi = false;
@@ -12,7 +12,7 @@ void setup(void) {
   WiFi.mode(WIFI_AP);
   WiFi.setHostname(ssid);
   WiFi.softAP(ssid);
-  //WiFi.softAP(ssid, password);
+  // WiFi.softAP(ssid, password);
   Serial.println("");
   Serial.print("IP address: ");
   Serial.println(WiFi.softAPIP());
@@ -35,14 +35,13 @@ void setup(void) {
   ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
   ESPUI.label("Millis:", COLOR_EMERALD, "0");
   ESPUI.button("Push Button", &buttonCallback, COLOR_PETERRIVER);
-  ESPUI.button("Other Button",  &buttonExample, COLOR_WETASPHALT, "Press" );
+  ESPUI.button("Other Button", &buttonExample, COLOR_WETASPHALT, "Press");
   ESPUI.pad("Pad with center", true, &padExample, COLOR_SUNFLOWER);
   ESPUI.pad("Pad without center", false, &padExample, COLOR_CARROT);
   ESPUI.switcher("Switch one", false, &switchExample, COLOR_ALIZARIN);
   ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
 
   ESPUI.begin("ESP32 Control");
-
 }
 
 void loop(void) {
@@ -56,60 +55,59 @@ void loop(void) {
 
 void buttonCallback(Control sender, int type) {
   switch (type) {
-    case B_DOWN:
-      Serial.println("Button DOWN");
-      break;
-    case B_UP:
-      Serial.println("Button UP");
-      break;
+  case B_DOWN:
+    Serial.println("Button DOWN");
+    break;
+  case B_UP:
+    Serial.println("Button UP");
+    break;
   }
-
 }
 
 void buttonExample(Control sender, int type) {
   switch (type) {
-    case B_DOWN:
-      Serial.println("Status: Start");
-      ESPUI.print(0, "Status: Start");
-      break;
-    case B_UP:
-      Serial.println("Status: Stop");
-      ESPUI.print(0, "Status: Stop");
-      break;
+  case B_DOWN:
+    Serial.println("Status: Start");
+    ESPUI.print(0, "Status: Start");
+    break;
+  case B_UP:
+    Serial.println("Status: Stop");
+    ESPUI.print(0, "Status: Stop");
+    break;
   }
 }
 void padExample(Control sender, int value) {
   switch (value) {
-    case P_LEFT_DOWN:
-      Serial.print("left down");
-      break;
-    case P_LEFT_UP:
-      Serial.print("left up");
-      break;
-    case P_RIGHT_DOWN:
-      Serial.print("right down");
-      break;
-    case P_RIGHT_UP:
-      Serial.print("right up");
-      break;
-    case P_FOR_DOWN:
-      Serial.print("for down");
-      break;
-    case P_FOR_UP:
-      Serial.print("for up");
-      break;
-    case P_BACK_DOWN:
-      Serial.print("back down");
-      break;
-    case P_BACK_UP:
-      Serial.print("back up");
-      break;
-    case P_CENTER_DOWN:
-      Serial.print("center down");
-      break;
-    case P_CENTER_UP:
-      Serial.print("center up");
-      break;
+  case P_LEFT_DOWN:
+    Serial.print("left down");
+    break;
+  case P_LEFT_UP:
+    Serial.print("left up");
+    break;
+  case P_RIGHT_DOWN:
+    Serial.print("right down");
+    break;
+  case P_RIGHT_UP:
+    Serial.print("right up");
+    break;
+  case P_FOR_DOWN:
+    Serial.print("for down");
+    break;
+  case P_FOR_UP:
+    Serial.print("for up");
+    break;
+  case P_BACK_DOWN:
+    Serial.print("back down");
+    break;
+  case P_BACK_UP:
+    Serial.print("back up");
+    break;
+  case P_CENTER_DOWN:
+    Serial.print("center down");
+    break;
+  case P_CENTER_UP:
+    Serial.print("center up");
+    break;
   }
   Serial.print(" ");
   Serial.println(sender.id);
@@ -117,12 +115,12 @@ void padExample(Control sender, int value) {
 
 void switchExample(Control sender, int value) {
   switch (value) {
-    case S_ACTIVE:
-      Serial.print("Active:");
-      break;
-    case S_INACTIVE:
-      Serial.print("Inactive");
-      break;
+  case S_ACTIVE:
+    Serial.print("Active:");
+    break;
+  case S_INACTIVE:
+    Serial.print("Inactive");
+    break;
   }
   Serial.print(" ");
   Serial.println(sender.id);
@@ -130,12 +128,12 @@ void switchExample(Control sender, int value) {
 
 void otherSwitchExample(Control sender, int value) {
   switch (value) {
-    case S_ACTIVE:
-      Serial.print("Active:");
-      break;
-    case S_INACTIVE:
-      Serial.print("Inactive");
-      break;
+  case S_ACTIVE:
+    Serial.print("Active:");
+    break;
+  case S_INACTIVE:
+    Serial.print("Inactive");
+    break;
   }
   Serial.print(" ");
   Serial.println(sender.id);
diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
index e130c35..9f88c98 100644
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@@ -93,8 +93,8 @@ void ESPUIClass::label(const char *label, int color, String value) {
   cIndex++;
 }
 
-void ESPUIClass::button(const char *label, void (*callBack)(Control, int), int color,
-                        String value) {
+void ESPUIClass::button(const char *label, void (*callBack)(Control, int),
+                        int color, String value) {
   if (labelExists(label)) {
     if (debug)
       Serial.println("UI ERROR: Element " + String(label) +