diff -r 48f8f3fce7c0 -r 0bb48333d133 www/js/mon_ispindel.js
--- a/www/js/mon_ispindel.js	Mon May 18 11:00:59 2020 +0200
+++ b/www/js/mon_ispindel.js	Tue May 19 13:50:14 2020 +0200
@@ -25,9 +25,6 @@
 
  var record = {},
  blank = {},
- newProduct = false,
- newMode = false,
- schedule = 0,
 
  productSource = {
   datatype: 'json',
@@ -54,9 +51,7 @@
    }
    return data;
   },
-  loadError: function(jqXHR, status, error) {
-   $('#err').text(status + ' ' + error);
-  },
+  loadError: function(jqXHR, status, error) { console.log(status + ' ' + error); },
  }),
  gaugeoptionst = {
   min: 10, max: 40, width: 375, height: 375,
@@ -109,17 +104,23 @@
  dataAdapter = new $.jqx.dataAdapter(source, {
   loadComplete: function(records) {
    record = dataAdapter.records[0];
-   var oline = (record.online) ? 'On-line' : 'Off-line';
-   $('#info_uuid').html(record.uuid);
-   $('#info_system').html(record.node + '/' + record.alias);
-   $('#info_online').html(oline);
-   $('#info_beer').html(record.beercode + ' - ' + record.beername);
-   $('#info_mode').jqxDropDownList('selectItem', record.mode);
+   updateScreen();
    blank['name'] = record.alias;
    blank['code'] = record.alias.toUpperCase();
    blank['uuid'] = record.uuid;
+  }
+ });
 
-   if (record.online && (record.mode != 'OFF')) {
+ function updateScreen() {
+
+  $('#info_uuid').html(record.uuid);
+  $('#info_system').html(record.node + '/' + record.alias);
+  $('#info_beer').html(record.beercode + ' - ' + record.beername);
+  $('#info_mode').jqxDropDownList('selectItem', record.mode);
+
+  if (record.online) {
+   $('#info_online').html('On-line');
+   if (record.mode != 'OFF') {
     $('#ispindel_powerled').html('<div class="LEDblue_on"></div>Power');
     $('#select_beer').jqxDropDownList({ disabled: true });
     $('#select_beer').jqxDropDownList('clearSelection');
@@ -137,9 +138,10 @@
 
    $('#gaugeContainer_temperature').jqxGauge({ caption: { value: record.temperature.toFixed(3) + '°C' }});
    $('#gaugeContainer_temperature').jqxGauge({ value: record.temperature });
+   $('#gaugeContainer_temperature').jqxGauge({ disabled: false });
+  $('#gaugeContainer_gravity').jqxLinearGauge({ disabled: false });
 
    var sg = plato_to_sg(record.gravity);
-
    $('#info_battery').val(record.battery);
    $('#info_tilt').val(record.angle);
    $('#info_plato').val(record.gravity);
@@ -148,7 +150,10 @@
    if (record.og_gravity) {
     var og = plato_to_sg(record.og_gravity);
     var svg = calc_svg(og, sg);
+    var max = Math.ceil(og * 100, 0) * 10;
 
+    console.log ('set max ' + max);
+    $('#gaugeContainer_gravity').jqxLinearGauge({ max: max });
     $('#vg_og1').html(og.toFixed(4));
     $('#vg_og2').html(record.og_gravity.toFixed(1) + '&deg;P');
     $('#vg_sg1').html(sg.toFixed(4));
@@ -156,6 +161,7 @@
     $('#vg_svg').html(svg.toFixed(1) + '%');
     $('#vg_abv').html(abvol(og, sg).toFixed(2) + '%');
    } else {
+    $('#gaugeContainer_gravity').jqxLinearGauge({ max: 1150 });
     $('#vg_og1').html('');
     $('#vg_og2').html('');
     $('#vg_sg1').html('');
@@ -172,11 +178,19 @@
     batt = 100;
    $('#vg_batt').html(batt + '%');
 
-
    var gravity = sg * 1000;
    $('#gaugeContainer_gravity').jqxLinearGauge({ value: gravity });
+
+  } else { // offline
+   $('#info_online').html('Off-line');
+   $('#ispindel_powerled').html('<div class="LEDblue_off"></div>Power');
+   $('#select_beer').show();
+   $('#select_beer').jqxDropDownList({ disabled: false });
+   $('#ispindel_alarmled').html('<div class="LEDred_on"></div>Alarm');
+   $('#gaugeContainer_temperature').jqxGauge({ disabled: true });
+   $('#gaugeContainer_gravity').jqxLinearGauge({ disabled: true });
   }
- });
+ }
 
  $('#select_beer').jqxDropDownList({
   placeHolder: 'Kies bier:',
@@ -199,64 +213,14 @@
  $('#info_sg').jqxNumberInput(Show4dec);
 
  $('#gaugeContainer_temperature').jqxGauge(gaugeoptionst);
- $('#gaugeContainer_temperature').jqxGauge({ caption: { value: 'Temp: 00.000' }});
+ $('#gaugeContainer_temperature').jqxGauge({ caption: { value: '0.000°C' }});
  $('#gaugeContainer_gravity').jqxLinearGauge(gaugeoptionsg);
 
  srcMode = ['OFF', 'ON'];
  $('#info_mode').jqxDropDownList({ theme: theme, source: srcMode, width: 100, height: 24, dropDownHeight: 65 });
 
- function sendProduct(code, name, uuid) {
-
-  console.log('sendProduct(' + code + ', ' + name + ', ' + uuid + ')');
-  var data = 'uuid=' + record.uuid + '&beeruuid=' + uuid + '&beercode=' + code + '&beername=' + name;
-  $.ajax({
-   url: 'cmd_ispindel.php',
-   data: data,
-   type: 'POST',
-   success: function(data) {},
-   error: function(jqXHR, textStatus, errorThrown) { console.log('sendProduct() error'); }
-  });
- }
-
- function sendMode(mode) {
-
-  console.log('sendMode(' + mode + ')');
-  var data = 'uuid=' + record.uuid + '&mode=' + mode;
-  $.ajax({
-   url: 'cmd_ispindel.php',
-   data: data,
-   type: 'POST',
-   success: function(data) {},
-   error: function(jqXHR, textStatus, errorThrown) { console.log('sendMode() error'); }
-  });
- }
-
- // Get the data immediatly and then at regular intervals to refresh.
+ // Get the data immediatly.
  dataAdapter.dataBind();
- setInterval(function() {
-  var skip = false;
-  if (newMode) {
-   sendMode(record.mode);
-   newMode = false;
-   skip = true;
-  }
-  if (newProduct) {
-   sendProduct(record.beercode, record.beername, record.beeruuid);
-   newProduct = false;
-   skip = true;
-  }
-  if (skip) {
-   schedule = 4; // 2 seconds wait to get the results
-  } else {
-   if (schedule > 0)
-    schedule--;
-  }
-
-  if (schedule <= 0) {
-   dataAdapter.dataBind();
-   schedule = 20;
-  }
- }, 500);
 
  $('#select_beer').on('select', function(event) {
   if (event.args) {
@@ -265,13 +229,16 @@
    record.beercode = datarecord.code;
    record.beername = datarecord.name;
    record.beeruuid = datarecord.uuid;
-   newProduct = true;
+   console.log('Select beer ' + record.beercode + ', ' + record.beername);
+   websocket.send('{"device":"ispindels","node":"' + record.node + '","unit":"' + record.alias +
+             '","beeruuid":"' + record.beeruuid + '","beercode":"' + record.beercode + '","beername":"' + record.beername + '"}');
   }
  });
  $('#info_mode').on('select', function(event) {
-  if (event.args) {
+  if (event.args && event.args.item.value != record.mode) {
    record.mode = event.args.item.value;
-   newMode = true;
+   console.log('set mode ' + record.mode);
+   websocket.send('{"device":"ispindels","node":"' + record.node + '","unit":"' + record.alias + '","mode":"' + record.mode + '"}');
   }
  });
 
@@ -280,4 +247,28 @@
  $('#VLog').click(function() {
   window.open('log_ispindel.php?code=' + record.beercode + '&name=' + record.beername);
  });
+
+ websocket.onmessage = function(evt) {
+  var msg = evt.data;
+  var obj = JSON.parse(msg);
+  if (obj.device == "ispindels" && obj.node == record.node) {
+   console.log('ws got this device ' + msg);
+   record.online = obj.online;
+   if (obj.online) {
+    record.beeruuid = obj.beeruuid;
+    record.beercode = obj.beercode;
+    record.beername = obj.beername;
+    record.mode = obj.mode;
+    record.alarm = obj.alarm;
+    record.angle = obj.angle;
+    record.temperature = obj.temperature;
+    record.battery = obj.battery;
+    record.gravity = obj.gravity;
+    record.up_interval = obj.up_interval;
+    record.og_gravity = obj.og_gravity;
+   }
+   updateScreen();
+  }
+  ws_global(msg);
+ }
 });