www/mon_ispindel.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 631
450ac489bbe7
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 iSpindels', 'mon_ispindel');
?>

   <div id="ispindel">

    <div style="float: left; width: 970px;">
     <div id="ispindel_table">
      <div id="ispindel_info">
       <table style='width: 100%; padding: 10px;'>
	<col width="20%">
	<col width="40%">
        <col width="20%">
        <col width="20%">
        <tr><th colspan=4>iSpindel overzicht</th></tr>
        <tr style="height: 25px;">
         <td>Uuid</td>
         <td colspan="3"><div id="info_uuid"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Systeem</td>
	 <td><div id="info_system"></div></td>
         <td colspan="2"><div id="info_online"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Code en bier</td>
         <td><div id="info_beer"></div></td>
         <td colspan="2"><div id="select_beer"></div></td>
        </tr>
        <tr style="height: 25px;">
         <td>Werking</td>
         <td colspan="3"><div id="info_mode"></div></td>
        </tr>
	<tr style="height: 25px;">
         <td>Batterij volt</td>
         <td><div id="info_battery"></div></td>
         <td>Densiteit &deg;P</td>
         <td><div id="info_plato"></div></td>
        </tr>
        <tr style="height: 25px;">
         <td>Tilt hoek &deg;</td>
         <td><div id="info_tilt"></div></td>
         <td>Densiteit SG</td>
         <td><div id="info_sg"></div></td>
        </tr>
       </table>
      </div>
     </div>
     <div id='ispindel_meters'>
      <div id="gaugeContainer_temperature" style='float: left; margin-top: 10px; margin-left: 60px;'></div>
      <div id="gaugeContainer_gravity" style="float: right; margin-top: 10px; margin-right: 160px;"></div>
     </div>
    </div> <!-- End left side -->

    <div style="float: right; width: 295px;">
     <div id="ispindel_panel_top">
      <div id="ispindel_powerled"></div>
      <div id="ispindel_alarmled"></div>
     </div> <!-- ispindel_panel_top -->

     <div id="ispindel_panel_display">
      <table style='width: 100%; padding: 10px;'>
       <col width="30%">
       <col width="35%">
       <col width="35%">
       <tr><th colspan=3>Vergisting status</th></tr>
       <tr><th colspan=3>&nbsp;</th></tr>
       <tr style="height: 25px;">
        <td>OG</td>
        <td><div id="vg_og1"></div></td>
        <td><div id="vg_og2"></div></td>
       </tr>
       <tr style="height: 25px;">
        <td>SG</td>
        <td><div id="vg_sg1"></div></td>
        <td><div id="vg_sg2"></div></td>
       </tr>
       <tr style="height: 25px;">
        <td>SVG</td>
        <td colspan='2'><div id="vg_svg"></div></td>
       </tr>
       <tr style="height: 25px;">
        <td>ABV</td>
        <td colspan='2'><div id="vg_abv"></div></td>
       </tr>
       <tr style="height: 25px;">
        <td>Batterij</td>
        <td colspan='2'><div id="vg_batt"></div></td>
       </tr>
      </table>
     </div> <!-- ispindel_panel_display -->

     <div id="ispindel_panel_control">
     </div> <!-- ispindel_panel_control -->

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

<?php
page_footer();
?>

mercurial