www/mon_fermenter.php

Mon, 18 May 2020 11:00:59 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Mon, 18 May 2020 11:00:59 +0200
changeset 679
48f8f3fce7c0
parent 334
26c6f8e5d58e
permissions
-rw-r--r--

Added reconnecting-websocket.js to automatic reconnect the websocket if the connection is lost. Usefull for mobile devices that go to sleep after a while. Changed mon_fermenters to use websockets instead of polling. Fixed wrong temperature color ranges on the fermenter monior. Increased the websocket receive buffer to 2048. In cannot overflow, but larger messages are chunked and the application does not handle these split messages. Needs termferm 0.9.9 or newer.

<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php');
page_header('Monitor Fermentation', 'mon_fermenter');
?>

   <div id="fermenter">

    <div style="float: left; width: 970px;">
     <div id="fermenter_table">
      <div id="fermenter_info">
       <table style='width: 100%; padding: 10px;'>
	<col width="20%">
	<col width="40%">
        <col width="40%">
        <tr><th colspan=3>Klimaatkast overzicht</th></tr>
	<tr style="height: 25px;">
         <td>Uuid</td>
         <td colspan="2"><div id="info_uuid"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Systeem</td>
	 <td><div id="info_system"></div></td>
         <td><div id="info_online"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Code en bier</td>
         <td><div id="info_beer"></div></td>
         <td><div id="select_beer"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Werking</td>
         <td><div id="info_mode"></div></td>
         <td><input type="button" id="Profile1" value="Profile 1" /><input style="margin-left: 10px;" type="button" id="Profile2" value="Profile 2" /></td>
        </tr>
	<tr style="height: 25px;">
         <td>Vergisting fase</td>
         <td colspan="2"><div id="info_stage"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Vergisting profiel</td>
         <td><div id="info_profile"></div></td>
         <td><div id="select_profile"></div><div id="status_profile"></div></td>
        </tr>
       </table>
      </div>
     </div>
     <div id='fermenter_thermometers'>
      <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div>
      <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div>
      <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div>
     </div>
    </div> <!-- End left side -->

    <div style="float: right; width: 295px;">
     <div id="fermenter_panel_top">
      <div id="fermenter_doorled"></div>
      <div id="fermenter_lightled"></div>
      <div id="fermenter_alarmled"></div>
      <div id="fermenter_powerled"></div>
     </div> <!-- fermenter_panel_top -->

     <div id="fermenter_panel_display">
      <div id="fermenter_display" class="f_display">
       <div id="target_lo" style="margin-left: 40px; margin-top: 15px;"></div>
       <div style="margin-top: 5px;">&deg;C laag</div>
      </div>
      <div id="fermenter_display" class="f_display">
       <div id="target_hi" style="margin-left: 40px; margin-top: 15px;"></div>
       <div style="margin-top: 5px;">&deg;C hoog</div>
      </div>
     </div> <!-- fermenter_panel_display -->

     <div id="fermenter_panel_control">
      <div class="f_control_leds">
       <div id="fermenter_led1"></div>
       <div id="fermenter_led2"></div>
       <div id="fermenter_led3"></div>
      </div>
      <div class="f_control_switches">
       <div id="fermenter_toggle1"></div>
       <div id="fermenter_toggle2"></div>
       <div id="fermenter_toggle3"></div>
      </div>
     </div> <!-- fermenter_panel_control -->

     <div id="fermenter_panel_buttons">
      <input style="margin-top: 20px; margin-left: 70px;" type="button" id="FLog" value="Vergisting log" />
      <input style="margin-top: 20px; margin-left: 70px;" type="button" id="Camera" value="Camera" />
     </div> <!-- fermenter_panel_buttons -->
    </div> <!-- End right side -->
   </div>

   <div id="eventWindow">
    <div>
     Bevestig profiel afbreken
    </div>
    <div>
     <div>
      Klik "OK" om dit profiel definitief te stoppen. Opnieuw starten begint dan weer bij het begin.<br>
      Druk "Cancel" om te sluiten zonder dit profiel te stoppen.
     </div>
     <div>
      <div style="float: right; margin-top: 40px; margin-bottom: 10px;">
       <input type="button" id="delOk" value="OK" style="margin-right: 90px" />
       <input type="button" id="delCancel" value="Cancel" style="margin-right: 80px" />
      </div>
     </div>
    </div>
   </div>

<?php
page_footer();
?>

mercurial