--- a/webcontrol/zml.js	Thu May 18 13:38:45 2017 +0200
+++ b/webcontrol/zml.js	Thu May 18 14:29:04 2017 +0200
@@ -1,10 +1,10 @@
 'use strict';
 
-var servers = [
+var gServers = [
     {
         name: 'bird',
-        url: 'w:/192.168.0.10',
-        websserver: null
+        url: 'ws:/192.168.0.10',
+        websocket: null,
     },
     //{
     //    name: "fox",
@@ -14,19 +14,106 @@
     
 ];
 
-var buttons = [
-    {
-        id: "bt_black",
-        command: "black"
+//var gButtons = [
+//    {
+//        id: "bt_black",
+//        command: "black"
+//    }
+//];
+
+
+function $(expr) {
+    return document.querySelector(expr);
+}
+
+function $$(expr) {
+    return Array.from(document.querySelectorAll(expr));
+}
+
+function sendCommand(str) {
+    gServers.forEach(function(server) {
+        if (server.websocket && server.websocket.readyState == WebSocket.OPEN) {
+            server.websocket.send(str)
+        } else {
+            updateStatus();
+        }
+    });
+}
+
+function updateStatus() {
+    var nb_servers = gServers.length;
+    var nb_servers_ok = 0;
+    
+    gServers.forEach(function(server) {
+        if (server.websocket && server.websocket.readyState == WebSocket.OPEN) {
+            nb_servers_ok++;
+            if (server.status_box) {
+                server.status_box.innerHTML =
+                    '<span class="status-txt status-ok">OK</span>';
+            }
+        } else if (server.status_box) {
+            server.status_box.innerHTML =
+                '<span class="status-txt status-alert">KO</span>';
+        }
+    });
+    
+    var main_status_box = $('#main-status-box');
+    if (!main_status_box)
+        return;
+    
+    if (nb_servers_ok === 0) {
+        main_status_box.innerHTML =
+            '<big class="status-txt status-alert">! KO !</big>';
+    } else if (nb_servers === nb_servers_ok) {
+        main_status_box.innerHTML =
+            '<big class="status-txt status-ok">OK</big>';
+    } else if (nb_servers_ok < nb_servers) {
+        main_status_box.innerHTML =
+            '<big class="status-txt status-warning">warning !</big>';
     }
-];
+}
 
 function init() {
+    updateStatus();
+    
+    var substatus_box = $('#substatus-box');
+    gServers.forEach(function(server) {
+        if (substatus_box) {
+            server.status_box = document.createElement('div');
+            server.status_box.className = 'substatus';
+            substatus_box.appendChild(server.status_box);
+        }
+        server.websocket = new WebSocket(server.url);
+        server.websocket.addEventListener('open', function (evt) {
+            updateStatus();
+        });
+    });
+    
+    var mutable_bt = $('#mutable-cmd-bt');
+    var mutable_input = $('#mutable-cmd-input');
+    if (mutable_bt && mutable_input) {
+        mutable_bt.addEventListener('click', function(evt) {
+            cmd = mutable_input.value;
+
+            if (cmd)
+                sendCommand(cmd);
+        });
+    }
+    
+    $$('.cmd-bt').forEach(function(elt) {
+        elt.addEventListener('click', function(evt) {
+            cmd = elt.getAttribute('data-cmd');
+            if (cmd)
+                sendCommand(cmd);
+        });
+    });
+    
     
 }
 
 
-document.addEventListener("DOMContentLoaded", function(e) {
+document.addEventListener('DOMContentLoaded', function(e) {
     //console.log("DOM loaded");
+    init();
 });