Updated GUI

Fixes #43

Author: jeremypoulter

gui

@@ -588,6 +588,8 @@ handleConfig(MongooseHttpServerRequest *request) {
   s += "\",";
   s += "\"mqtt_solar\":\""+mqtt_solar+"\",";
   s += "\"mqtt_grid_ie\":\""+mqtt_grid_ie+"\",";
+  s += "\"mqtt_supported_protocols\":[\"mqtt\"],";
+  s += "\"http_supported_protocols\":[\"http\",\"https\"],";
   s += "\"www_username\":\"" + www_username + "\",";
   s += "\"www_password\":\"";
   if(www_password != 0) {

src/web_server.cpp

@@ -1,2 +1,2 @@
 static const char CONTENT_STYLE_CSS[] PROGMEM = 
-  "body{font-family:sans-serif;color:#333;font:14px Helvetica,sans-serif;box-sizing:border-box}#page,body{background-color:#fff}#page{margin:20px}iframe{max-width:100%}table{width:100%;border-collapse:collapse}th{background-color:#777;color:#fff;border:1px solid #f1f1f1}td,th{padding:8px}td{color:#777;border:1px solid #e1e1e1}tr{background-color:#fff}tr:nth-child(2n+2){background-color:#f3f3f3}.wifiselected td{background-color:teal;color:#fff}.header{padding:20px}.header h1{padding-bottom:.3em;color:teal;font-size:45px;font-weight:400;text-align:left;margin:0}.header h1,.header h1 span{font-family:Garmond,\"sans-serif\"}.header h1 span{font-weight:700;color:#000}h2{padding-bottom:.2em;border-bottom:1px solid #eee;margin-top:2px}.header h3{padding-top:-5px;padding-left:50px;font-weight:700;font-family:Arial,\"sans-serif\";font-size:17px;color:#b6b6b6;margin:-25px 0 -5px}.box{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff;margin-bottom:20px}.box-full{margin:20px;width:840px}.box380,.box-half{margin:20px;width:380px}.box380{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff}.left{float:left;clear:left}.right{float:right;clear:right}@media (max-width:494px){#page{width:inherit;margin:5px auto}#content{padding:1px}.box380,.box-full{margin:8px 8px 12px;padding:10px;width:inherit;float:none}}@media (min-width:494px) and (max-width:980px){#page{width:465px;margin:0 auto}.box-full{width:380px}}@media (min-width:980px){#page{width:930px;margin:0 auto}}button{background-color:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);border:none;color:#fff;padding:10px 28px;text-align:center;text-decoration:none;display:inline-block;font-size:1em;margin:4px 2px;cursor:pointer;outline:none}button:disabled{background-color:#eee;color:#ccc}button.on{background-color:#f1f1f1;color:#000}input[type=date],input[type=file],input[type=number],input[type=password],input[type=text],input[type=time],select{box-sizing:border-box;border:1px solid #ddd;border-radius:4px;margin-top:10px;width:280px;padding:5px}input:optional{border-color:#ddd}input:required{border-color:#19a6ff}input:required:valid{border-color:#249c4a}input:required:valid+.validMessage{display:none}input:required+.validMessage{display:block;margin:5px 0}.setup input[type=time],input[type=time]{width:110px}.setup input[type=date]{width:164px}@media screen and (max-width:420px){input[type=file],input[type=number],input[type=password],input[type=text],select{width:240px}input[type=time]{width:85px}input[type=date]{width:174px}}#update{background-color:red}.container{height:inherit;padding-bottom:20px}.tabs{padding-bottom:4px;overflow:hidden}.tabs:after{content:\" \";display:block;height:0;clear:both}.tabs input[type=radio]{display:none}.tabs label{background:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);color:#fff;cursor:pointer;display:block;float:left;font-size:1em;height:2.5em;line-height:2.5em;margin-right:.25em;padding:0 1.5em;text-align:center}.tabs input:hover+label{background:#e1e1e1;color:#000}.tabs input:checked+label{background:#f1f1f1;color:#000}#content{background:#e1e1e1;border-radius:.5em .5em .5em .5em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);display:block}#content:after{content:\" \";display:block;height:0;clear:both}#footer{font-size:15px;text-align:center;margin-bottom:0}.small-text{font-size:10px;word-wrap:break-word}.saved{border-color:#3c763d!important;border-left-width:5px!important}.warning{border-left-color:#aa6708;border-left-width:5px}.warning h4{color:#aa6708;margin-top:0;margin-bottom:5px}.error{border-left-color:#a94442;border-left-width:5px}.error h4{margin-top:0;margin-bottom:5px}.error h4,.error td{color:#a94442}.error td:first-child{border-left-color:#a94442;border-left-width:5px}.switch{position:relative;display:inline-block;width:40px;height:24px;vertical-align:-40%}.switch input{display:none}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;-webkit-transition:.4s;transition:.4s}.slider:before{content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:teal}input:focus+.slider{box-shadow:0 0 1px teal}input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px)}.slider.round{border-radius:12px}.slider.round:before{border-radius:50%}.info{background-color:teal;border-radius:100%;color:#fff;display:inline-block;font-family:serif;font-size:12px;font-style:italic;height:16px;margin-left:16px;text-align:center;width:16px;vertical-align:20%}.info:before{content:\"i\"}span.selected{color:teal}.ready{border-color:#01c40e;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(1,196,14,.3)}.connected{border-color:#d5ff70;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(213,255,112,.4)}.charging{border-color:#0092f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(0,146,247,.4)}.sleeping{border-color:#9200f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(146,0,247,.4)}hr{height:1px;color:#eee;background-color:#eee;border:none}.updateBad{color:red}.updateGood{color:#32c832}.updateSlow{color:#f0b414}.updateSlower{color:#ff7d14}#progressBack{width:100%;border:1px solid #19a6ff;border-radius:4px}#progressBar{width:1%;height:30px;background-color:teal}#wifiList{display:inline-block;width:100%;max-height:230px;overflow:auto}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item{position:relative;display:flex;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125);justify-content:space-between;align-items:center}.list-group-item.active{z-index:2;color:#fff;background-color:teal;border-color:teal}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}\n";
+  "body{font-family:sans-serif;color:#333;font:14px Helvetica,sans-serif;box-sizing:border-box}#page,body{background-color:#fff}#page{margin:20px}iframe{max-width:100%}table{width:100%;border-collapse:collapse}th{background-color:#777;color:#fff;border:1px solid #f1f1f1}td,th{padding:8px}td{color:#777;border:1px solid #e1e1e1}tr{background-color:#fff}tr:nth-child(2n+2){background-color:#f3f3f3}.wifiselected td{background-color:teal;color:#fff}.header{padding:20px}.header h1{padding-bottom:.3em;color:teal;font-size:45px;font-weight:400;text-align:left;margin:0}.header h1,.header h1 span{font-family:Garmond,\"sans-serif\"}.header h1 span{font-weight:700;color:#000}h2{padding-bottom:.2em;border-bottom:1px solid #eee;margin-top:2px}.header h3{padding-top:-5px;padding-left:50px;font-weight:700;font-family:Arial,\"sans-serif\";font-size:17px;color:#b6b6b6;margin:-25px 0 -5px}.box{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff;margin-bottom:20px}.box-full{margin:20px;width:840px}.box380,.box-half{margin:20px;width:380px}.box380{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff}.left{float:left;clear:left}.right{float:right;clear:right}@media (max-width:494px){#page{width:inherit;margin:5px auto}#content{padding:1px}.box380,.box-full{margin:8px 8px 12px;padding:10px;width:inherit;float:none}}@media (min-width:494px) and (max-width:980px){#page{width:465px;margin:0 auto}.box-full{width:380px}}@media (min-width:980px){#page{width:930px;margin:0 auto}}button{background-color:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);border:none;color:#fff;padding:10px 28px;text-align:center;text-decoration:none;display:inline-block;font-size:1em;margin:4px 2px;cursor:pointer;outline:none}button:disabled{background-color:#eee;color:#ccc}button.on{background-color:#f1f1f1;color:#000}input[type=date],input[type=file],input[type=number],input[type=password],input[type=text],input[type=time],select{box-sizing:border-box;border:1px solid #ddd;border-radius:4px;margin-top:10px;width:280px;padding:5px}input:optional{border-color:#ddd}input:required{border-color:#19a6ff}input:required:valid{border-color:#249c4a}input:required:valid+.validMessage{display:none}input:required+.validMessage{display:block;margin:5px 0}.setup input[type=time],input[type=time]{width:110px}.setup input[type=date]{width:164px}@media screen and (max-width:420px){input[type=file],input[type=number],input[type=password],input[type=text],select{width:240px}input[type=time]{width:85px}input[type=date]{width:174px}}#update{background-color:red}.container{height:inherit;padding-bottom:20px}.tabs{padding-bottom:4px;overflow:hidden}.tabs:after{content:\" \";display:block;height:0;clear:both}.tabs input[type=radio]{display:none}.tabs label{background:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);color:#fff;cursor:pointer;display:block;float:left;font-size:1em;height:2.5em;line-height:2.5em;margin-right:.25em;padding:0 1.5em;text-align:center}.tabs input:hover+label{background:#e1e1e1;color:#000}.tabs input:checked+label{background:#f1f1f1;color:#000}#content{background:#e1e1e1;border-radius:.5em .5em .5em .5em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);display:block}#content:after{content:\" \";display:block;height:0;clear:both}#footer{font-size:15px;text-align:center;margin-bottom:0}.small-text{font-size:10px;word-wrap:break-word}.saved{border-color:#3c763d!important;border-left-width:5px!important}.warning{border-left-color:#aa6708;border-left-width:5px}.warning h4{color:#aa6708;margin-top:0;margin-bottom:5px}.error{border-left-color:#a94442;border-left-width:5px}.error h4{margin-top:0;margin-bottom:5px}.error h4,.error td{color:#a94442}.error td:first-child{border-left-color:#a94442;border-left-width:5px}.switch{position:relative;display:inline-block;width:40px;height:24px;vertical-align:-40%}.switch input{display:none}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;-webkit-transition:.4s;transition:.4s}.slider:before{content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:teal}input:focus+.slider{box-shadow:0 0 1px teal}input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px)}.slider.round{border-radius:12px}.slider.round:before{border-radius:50%}.info{background-color:teal;border-radius:100%;color:#fff;display:inline-block;font-family:serif;font-size:12px;font-style:italic;height:16px;margin-left:16px;text-align:center;width:16px;vertical-align:20%}.info:before{content:\"i\"}span.selected{color:teal}.ready{border-color:#01c40e;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(1,196,14,.3)}.connected{border-color:#d5ff70;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(213,255,112,.4)}.charging{border-color:#0092f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(0,146,247,.4)}.sleeping{border-color:#9200f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(146,0,247,.4)}hr{height:1px;color:#eee;background-color:#eee;border:none}.updateBad{color:red}.updateGood{color:#32c832}.updateSlow{color:#f0b414}.updateSlower{color:#ff7d14}#progressBack{width:100%;border:1px solid #19a6ff;border-radius:4px}#progressBar{width:1%;height:30px;background-color:teal}#wifiList{display:inline-block;width:100%;max-height:230px;overflow:auto}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item{position:relative;display:flex;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125);justify-content:space-between;align-items:center}.list-group-item.active{z-index:2;color:#fff;background-color:teal;border-color:teal}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.protocol select{width:80px}.protocol input{width:195px}@media screen and (max-width:420px){.protocol input{width:155px}}\n";

src/web_static/web_server.home.html.h

@@ -1,2 +1,2 @@
 static const char CONTENT_WIFI_PORTAL_HTML[] PROGMEM = 
-  "<!doctype html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>OpenEVSE</title> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"> <meta name=\"viewport\" content=\"width=device-width,user-scalable=no\"> <meta name=\"description\" content=\"OpenEVSE\"> <meta name=\"author\" content=\"OpenEVSE\"> <meta name=\"theme-color\" content=\"#000000\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"> <link rel=\"icon\" type=\"image/png\" href=\"favicon-32x32.png\" sizes=\"32x32\"> <link rel=\"icon\" type=\"image/png\" href=\"favicon-16x16.png\" sizes=\"16x16\"> </head> <body> <div id=\"page\"> <div class=\"header\"> <h1>Open<span>EVSE</span></h1> <h3>WiFi</h3> </div> <div class=\"container\"> <div class=\"box\" data-bind=\"visible: wifi.canConfigure() &amp;&amp; !wifi.wifiConnecting()\"> <h2>WiFi Setup</h2> <p><b>Mode:</b> <span id=\"mode\" data-bind=\"text: status.fullMode\"></span></p> <p>Connect to network:</p> <div id=\"wifiList\"> <ul class=\"list-group\" data-bind=\"foreach: scan.filteredResults, visible: 0 != scan.results().length\"> <li class=\"list-group-item\" data-bind=\"click: $root.wifi.select, css: { active: $root.wifi.selectedNet() === $data }\"> <span data-bind=\"text: ssid\"></span> <img width=\"24px\" height=\"24px\" data-bind=\"attr:{src: 'wifi_signal_'+strength()+'.svg'}\"> </li> </ul> </div> <div data-bind=\"visible: 0 == scan.results().length\"> Scanning... </div> <p> <b>SSID:</b><br> <input type=\"text\" autocapitalize=\"none\" data-bind=\"textInput: config.ssid\"> </p> <p> <b>Passkey:</b><br> <input type=\"text\" autocapitalize=\"none\" data-bind=\"textInput: wifiPassword.value, attr: { type: wifiPassword.show() ? 'text' : 'password' }\"><br> </p><div> <input id=\"wifipassword\" type=\"checkbox\" data-bind=\"checked: wifiPassword.show\"> <label for=\"wifipassword\">Show password</label> </div> <p></p> <p> <button data-bind=\"click: wifi.saveNetwork, text: (wifi.saveNetworkFetching() ? 'Saving' : (wifi.saveNetworkSuccess() ? 'Saved' : 'Connect')), disable: wifi.saveNetworkFetching\">Connect</button> </p> <p>Connecting to a local WiFi network is not essential. OpenEVSE can be configured and controlled while in standalone WiFi AP (Access Point) mode:</p> <div> <button onclick=\"window.location.href='/home.html'\">WiFi Standalone Mode</button> </div> <p><i><span class=\"small-text\">Note: remote logging features e.g Emoncms will not work while in AP standalone mode</span></i></p> </div> <div class=\"box\" data-bind=\"visible: wifi.wifiConnecting() || !wifi.canConfigure()\"> <h2>Connecting to <span data-bind=\"text: config.ssid\"></span> ...</h2> <p>Please connect this device to <span data-bind=\"text: config.ssid\"></span> and navigate to the IP address displayed on your OpenEVSE display.</p> <p>Alternatively you can use <a href=\"http://openevse.local/\">http://openevse.local/</a> or <a href=\"http://openevse/\">http://openevse/</a></p> <div id=\"client-view\" data-bind=\"visible: status.isWifiClient\"> <button id=\"apoff\" data-bind=\"click: wifi.turnOffAccessPoint, disable: wifi.turnOffAccessPointFetching\">Continue</button> </div> </div> <div id=\"footer\"> <br><b> Powered by <a href=\"http://www.openevse.com\">OpenEVSE</a> and <a href=\"https://openenergymonitor.org\">OpenEnergyMonitor</a></b> <br> <b>Version: </b>V<span data-bind=\"text: config.version\"></span> </div> </div> </div> <script src=\"lib.js\"></script> <script src=\"wifi_portal.js\"></script> </body> </html> \n";
+  "<!doctype html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>OpenEVSE</title> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"> <meta name=\"viewport\" content=\"width=device-width,user-scalable=no\"> <meta name=\"description\" content=\"OpenEVSE\"> <meta name=\"author\" content=\"OpenEVSE\"> <meta name=\"theme-color\" content=\"#000000\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"> <link rel=\"icon\" type=\"image/png\" href=\"favicon-32x32.png\" sizes=\"32x32\"> <link rel=\"icon\" type=\"image/png\" href=\"favicon-16x16.png\" sizes=\"16x16\"> </head> <body> <div id=\"page\"> <div class=\"header\"> <h1>Open<span>EVSE</span></h1> <h3>WiFi</h3> </div> <div class=\"container\"> <div class=\"box\" data-bind=\"visible: wifi.canConfigure() &amp;&amp; !wifi.wifiConnecting()\"> <h2>WiFi Setup</h2> <p><b>Mode:</b> <span id=\"mode\" data-bind=\"text: status.fullMode\"></span></p> <p>Connect to network:</p> <div id=\"wifiList\"> <ul class=\"list-group\" data-bind=\"foreach: scan.filteredResults, visible: 0 != scan.results().length\"> <li class=\"list-group-item\" data-bind=\"click: $root.wifi.select, css: { active: $root.wifi.selectedNet() === $data }\"> <span data-bind=\"text: ssid\"></span> <img width=\"24px\" height=\"24px\" data-bind=\"attr:{src: 'wifi_signal_'+strength()+'.svg'}\"> </li> </ul> </div> <div data-bind=\"visible: 0 == scan.results().length\"> Scanning... </div> <p> <b>SSID:</b><br> <input type=\"text\" autocapitalize=\"none\" data-bind=\"textInput: config.ssid\"> </p> <p> <b>Passkey:</b><br> <input type=\"text\" autocapitalize=\"none\" data-bind=\"textInput: wifiPassword.value, attr: { type: wifiPassword.show() ? 'text' : 'password' }\"><br> </p><div> <input id=\"wifipassword\" type=\"checkbox\" data-bind=\"checked: wifiPassword.show\"> <label for=\"wifipassword\">Show password</label> </div> <p></p> <p> <button data-bind=\"click: wifi.saveNetwork, text: (wifi.saveNetworkFetching() ? 'Saving' : (wifi.saveNetworkSuccess() ? 'Saved' : 'Connect')), disable: wifi.saveNetworkFetching\">Connect</button> </p> <p>Connecting to a local WiFi network is not essential. OpenEVSE can be configured and controlled while in standalone WiFi AP (Access Point) mode:</p> <div> <button onclick=\"window.location.href='/home.html'\">WiFi Standalone Mode</button> </div> <p><i><span class=\"small-text\">Note: remote logging features e.g Emoncms will not work while in AP standalone mode</span></i></p> </div> <div class=\"box\" data-bind=\"visible: wifi.wifiConnecting() || !wifi.canConfigure()\"> <h2>Connecting to <span data-bind=\"text: config.ssid\"></span> ...</h2> <p>Please connect this device to <span data-bind=\"text: config.ssid\"></span> and navigate to the IP address displayed on your OpenEVSE display.</p> <p>Alternatively you can use <a data-bind=\"attr: { href: 'http://' + config.hostname() + '.local/' }, text: 'http://' + config.hostname() + '.local/'\"></a> or <a data-bind=\"attr: { href: 'http://' + config.hostname() + '/' }, text: 'http://' + config.hostname() + '/'\"></a></p> <div id=\"client-view\" data-bind=\"visible: status.isWifiClient\"> <button id=\"apoff\" data-bind=\"click: wifi.turnOffAccessPoint, disable: wifi.turnOffAccessPointFetching\">Continue</button> </div> </div> <div id=\"footer\"> <br><b> Powered by <a href=\"http://www.openevse.com\">OpenEVSE</a> and <a href=\"https://openenergymonitor.org\">OpenEnergyMonitor</a></b> <br> <b>Version: </b>V<span data-bind=\"text: config.version\"></span> </div> </div> </div> <script src=\"lib.js\"></script> <script src=\"wifi_portal.js\"></script> </body> </html> \n";