www-thermferm/liveview.php

changeset 517
5fd12d9f3f84
parent 404
6205c7931659
child 521
28d1f5188c1d
equal deleted inserted replaced
516:65299c11774b 517:5fd12d9f3f84
1 <?php 1 <?php
2 /***************************************************************************** 2 /*****************************************************************************
3 * Copyright (C) 2014-2015 3 * Copyright (C) 2014-2017
4 * 4 *
5 * Michiel Broek <mbroek at mbse dot eu> 5 * Michiel Broek <mbroek at mbse dot eu>
6 * 6 *
7 * This file is part of ThermFerm 7 * This file is part of ThermFerm
8 * 8 *
105 } 105 }
106 106
107 $outstr .= ' <script type="text/javascript">'.PHP_EOL; 107 $outstr .= ' <script type="text/javascript">'.PHP_EOL;
108 $outstr .= ' $(document).ready(function () {'.PHP_EOL; 108 $outstr .= ' $(document).ready(function () {'.PHP_EOL;
109 109
110 $outstr .= ' function getExportServer'.$unr.'() {'.PHP_EOL; 110 if ("$air_state" == "OK") {
111 $outstr .= ' return "http://www.jqwidgets.com/export_server/export.php";'.PHP_EOL; 111 $outstr .= ' $("#gaugeContainer_air'.$unr.'").jqxGauge({'.PHP_EOL;
112 $outstr .= ' }'.PHP_EOL; 112 $outstr .= ' min: -5, max: 35, width: 275, height: 275,'.PHP_EOL;
113 $outstr .= ' var source'.$unr.' ='.PHP_EOL; 113 $outstr .= ' ranges: [{ startValue: -5, endValue: 0, style: { fill: \'#3399FF\', stroke: \'#3399FF\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
114 $outstr .= ' {'.PHP_EOL; 114 $outstr .= ' { startValue: 0, endValue: 16, style: { fill: \'#00CC33\', stroke: \'#00CC33\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
115 $outstr .= ' datatype: "json",'.PHP_EOL; 115 $outstr .= ' { startValue: 16, endValue: 24, style: { fill: \'#FCA76A\', stroke: \'#FCA76A\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
116 $outstr .= ' datafields: ['.PHP_EOL; 116 $outstr .= ' { startValue: 24, endValue: 35, style: { fill: \'#FC6A6A\', stroke: \'#FC6A6A\' }, endWidth: 10, startWidth: 10 }],'.PHP_EOL;
117 $outstr .= ' { name: "Date", type: "date", format: "yyyy-MM-dd HH:mm" },'.PHP_EOL; 117 $outstr .= ' ticksMinor: { interval: 1, size: \'5%\' },'.PHP_EOL;
118 $outstr .= ' { name: "Mode" },'.PHP_EOL; 118 $outstr .= ' ticksMajor: { interval: 5, size: \'9%\' },'.PHP_EOL;
119 $outstr .= ' { name: "Air", type: "float" },'.PHP_EOL; 119 $outstr .= ' labels: { interval: 5 },'.PHP_EOL;
120 $outstr .= ' { name: "Beer", type: "float" },'.PHP_EOL; 120 $outstr .= ' value: '.$air_temperature.','.PHP_EOL;
121 $outstr .= ' { name: "Target_lo", type: "float" },'.PHP_EOL; 121 $outstr .= ' colorScheme: \'scheme05\','.PHP_EOL;
122 $outstr .= ' { name: "Target_hi", type: "float" },'.PHP_EOL; 122 $outstr .= ' animationDuration: 5000,'.PHP_EOL;
123 $outstr .= ' { name: "Heater", type: "int" },'.PHP_EOL; 123 $outstr .= ' caption: { value: \'Air\', position: \'bottom\', offset: [0, 10] }'.PHP_EOL;
124 $outstr .= ' { name: "Cooler", type: "int" },'.PHP_EOL; 124 $outstr .= ' });'.PHP_EOL;
125 $outstr .= ' { name: "HeatUse", type: "int" },'.PHP_EOL; 125 }
126 $outstr .= ' { name: "CoolUse", type: "int" },'.PHP_EOL; 126
127 $outstr .= ' { name: "Room", type: "float" }'.PHP_EOL; 127 if ("$beer_state" == "OK") {
128 $outstr .= ' ],'.PHP_EOL; 128 $outstr .= ' $(\'#gaugeContainer_beer'.$unr.'\').jqxGauge({'.PHP_EOL;
129 $outstr .= ' url: \'getlog.php?unit='.$unit.'\''.PHP_EOL; 129 $outstr .= ' min: -5, max: 35, width: 275, height: 275,'.PHP_EOL;
130 $outstr .= ' };'.PHP_EOL; 130 $outstr .= ' ranges: [{ startValue: -5, endValue: 0, style: { fill: \'#3399FF\', stroke: \'#3399FF\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
131 131 $outstr .= ' { startValue: 0, endValue: 16, style: { fill: \'#00CC33\', stroke: \'#00CC33\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
132 $outstr .= ' var dataAdapter'.$unr.' = new $.jqx.dataAdapter(source'.$unr.','.PHP_EOL; 132 $outstr .= ' { startValue: 16, endValue: 24, style: { fill: \'#FCA76A\', stroke: \'#FCA76A\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
133 $outstr .= ' {'.PHP_EOL; 133 $outstr .= ' { startValue: 24, endValue: 35, style: { fill: \'#FC6A6A\', stroke: \'#FC6A6A\' }, endWidth: 10, startWidth: 10 }],'.PHP_EOL;
134 $outstr .= ' autoBind: true,'.PHP_EOL; 134 $outstr .= ' ticksMinor: { interval: 1, size: \'5%\' },'.PHP_EOL;
135 $outstr .= ' async: false,'.PHP_EOL; 135 $outstr .= ' ticksMajor: { interval: 5, size: \'9%\' },'.PHP_EOL;
136 $outstr .= ' downloadComplete: function () { },'.PHP_EOL; 136 $outstr .= ' labels: { interval: 5 },'.PHP_EOL;
137 $outstr .= ' loadComplete: function () { },'.PHP_EOL; 137 $outstr .= ' value: '.$beer_temperature.','.PHP_EOL;
138 $outstr .= ' loadError: function () { }'.PHP_EOL; 138 $outstr .= ' colorScheme: \'scheme05\','.PHP_EOL;
139 $outstr .= ' });'.PHP_EOL; 139 $outstr .= ' animationDuration: 5000,'.PHP_EOL;
140 140 $outstr .= ' caption: { value: \'Beer\', position: \'bottom\', offset: [0, 10] }'.PHP_EOL;
141 $outstr .= ' var settings'.$unr.' = {'.PHP_EOL; 141 $outstr .= ' });'.PHP_EOL;
142 $outstr .= ' title: "'.$name.'",'.PHP_EOL; 142 }
143 $outstr .= ' description: "",'.PHP_EOL; 143
144 $outstr .= ' padding: { left: 5, top: 5, right: 5, bottom: 5 },'.PHP_EOL; 144 if ("$chiller_state" == "OK") {
145 $outstr .= ' titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },'.PHP_EOL; 145 $outstr .= ' $(\'#gaugeContainer_chiller'.$unr.'\').jqxLinearGauge({'.PHP_EOL;
146 $outstr .= ' source: dataAdapter'.$unr.','.PHP_EOL; 146 $outstr .= ' min: -20, max: 25, width: 100, height: 275,'.PHP_EOL;
147 $outstr .= ' xAxis:'.PHP_EOL; 147 $outstr .= ' ranges: [{ startValue: -20, endValue: 0, style: { fill: \'#3399FF\', stroke: \'#3399FF\' }},'.PHP_EOL;
148 $outstr .= ' {'.PHP_EOL; 148 $outstr .= ' { startValue: 1, endValue: 25, style: { fill: \'#FC6A6A\', stroke: \'#FC6A6A\' }}],'.PHP_EOL;
149 $outstr .= ' dataField: \'Date\','.PHP_EOL; 149 $outstr .= ' ticksMinor: { interval: 1, size: \'5%\' },'.PHP_EOL;
150 $outstr .= ' type: \'date\','.PHP_EOL; 150 $outstr .= ' ticksMajor: { interval: 5, size: \'9%\' },'.PHP_EOL;
151 $outstr .= ' formatFunction: function (value) {'.PHP_EOL; 151 $outstr .= ' labels: { interval: 5, position: \'far\' },'.PHP_EOL;
152 $outstr .= ' return value.getDate() + \'-\' + (value.getMonth() + 1) + \'-\' + value.getFullYear()'.PHP_EOL; 152 $outstr .= ' value: 0,'.PHP_EOL;
153 $outstr .= ' },'.PHP_EOL; 153 $outstr .= ' ticksPosition: \'far\','.PHP_EOL;
154 $outstr .= ' toolTipFormatFunction: function (value) {'.PHP_EOL; 154 $outstr .= ' colorScheme: \'scheme04\','.PHP_EOL;
155 $outstr .= ' var h = value.getHours();'.PHP_EOL; 155 $outstr .= ' animationDuration: 1200'.PHP_EOL;
156 $outstr .= ' var m = value.getMinutes();'.PHP_EOL; 156 $outstr .= ' });'.PHP_EOL;
157 $outstr .= ' return value.getDate() + \'-\' + (value.getMonth() + 1) + \'-\' + value.getFullYear()'; 157 }
158 $outstr .= ' + \' \' + (h < 10 ? \'0\' + h : h) + \':\' + (m < 10 ? \'0\' + m : m);'.PHP_EOL;
159 $outstr .= ' },'.PHP_EOL;
160 $outstr .= ' textRotationAngle: 45,'.PHP_EOL;
161 $outstr .= ' showGridLines: false'.PHP_EOL;
162 $outstr .= ' },'.PHP_EOL;
163 $outstr .= ' colorScheme: \'scheme01\','.PHP_EOL;
164 $outstr .= ' seriesGroups:'.PHP_EOL;
165 $outstr .= ' [{'.PHP_EOL;
166 $outstr .= ' type: "line",'.PHP_EOL;
167 $outstr .= ' valueAxis:'.PHP_EOL;
168 $outstr .= ' {'.PHP_EOL;
169 $outstr .= ' minValue: 0,'.PHP_EOL;
170 $outstr .= ' maxValue: 100,'.PHP_EOL;
171 $outstr .= ' displayValueAxis: false,'.PHP_EOL;
172 $outstr .= ' description: "Heat/Cool %"'.PHP_EOL;
173 $outstr .= ' },'.PHP_EOL;
174 $outstr .= ' series: ['.PHP_EOL;
175 $outstr .= ' { dataField: "CoolUse", lineWidth: 1, displayText: "Cool %", opacity: 0.5 },'.PHP_EOL;
176 $outstr .= ' { dataField: "HeatUse", lineWidth: 1, displayText: "Heat %", opacity: 0.5 }'.PHP_EOL;
177 $outstr .= ' ]'.PHP_EOL;
178 $outstr .= ' },'.PHP_EOL;
179 $outstr .= ' {'.PHP_EOL;
180 $outstr .= ' type: "line",'.PHP_EOL;
181 $outstr .= ' valueAxis:'.PHP_EOL;
182 $outstr .= ' {'.PHP_EOL;
183 $outstr .= ' minValue: 0,'.PHP_EOL;
184 $outstr .= ' description: \'Degrees C\''.PHP_EOL;
185 $outstr .= ' },'.PHP_EOL;
186 $outstr .= ' series: ['.PHP_EOL;
187 $outstr .= ' { dataField: "Air", lineWidth: 1, displayText: "Air" },'.PHP_EOL;
188 $outstr .= ' { dataField: "Beer", lineWidth: 2, displayText: "Beer" },'.PHP_EOL;
189 $outstr .= ' { dataField: "Target_lo", lineWidth: 1, displayText: "Target Lo", opacity: 0.7 },'.PHP_EOL;
190 $outstr .= ' { dataField: "Target_hi", lineWidth: 1, displayText: "Target Hi", opacity: 0.7 },'.PHP_EOL;
191 $outstr .= ' { dataField: "Room", lineWidth: 1, displayText: "Room", opacity: 0.5 }'.PHP_EOL;
192 $outstr .= ' ]'.PHP_EOL;
193 $outstr .= ' }]'.PHP_EOL;
194 $outstr .= ' };'.PHP_EOL;
195 /* Direct draw for the first time */
196 $outstr .= ' $("#fermentor_chart_'.$unit.'").jqxChart(settings'.$unr.');'.PHP_EOL;
197 /* Regular updates of the chart */
198 // $outstr .= ' setInterval(function(){'.PHP_EOL;
199 // $outstr .= ' $("#fermentor_chart_'.$unit.'").jqxChart("update");'.PHP_EOL;
200 // $outstr .= ' }, 3000);'.PHP_EOL;
201
202 $outstr .= ' $("#print_'.$unr.'").click(function () {'.PHP_EOL;
203 $outstr .= ' var content = $("#fermentor_chart_'.$unit.'")[0].outerHTML;'.PHP_EOL;
204 $outstr .= ' var newWindow = window.open("", "", "width=750, height=400"),'.PHP_EOL;
205 $outstr .= ' document = newWindow.document.open(),'.PHP_EOL;
206 $outstr .= ' pageContent ='.PHP_EOL;
207 $outstr .= ' \'<!DOCTYPE html>\' +'.PHP_EOL;
208 $outstr .= ' \'<html>\' +'.PHP_EOL;
209 $outstr .= ' \'<head>\' +'.PHP_EOL;
210 $outstr .= ' \'<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />\' +'.PHP_EOL;
211 $outstr .= ' \'<meta charset="utf-8" />\' +'.PHP_EOL;
212 $outstr .= ' \'<title>jQWidgets Chart</title>\' +'.PHP_EOL;
213 $outstr .= ' \'</head>\' +'.PHP_EOL;
214 $outstr .= ' \'<body>\' + content + \'</body></html>\';'.PHP_EOL;
215 $outstr .= ' document.write(pageContent);'.PHP_EOL;
216 $outstr .= ' document.close();'.PHP_EOL;
217 $outstr .= ' newWindow.print();'.PHP_EOL;
218 $outstr .= ' });'.PHP_EOL;
219 $outstr .= ' $("#print_'.$unr.'").jqxButton({ width: 70, height: 25, theme: "ui-redmond" });'.PHP_EOL;
220
221 $outstr .= ' $("#pngButton_'.$unr.'").click(function () {'.PHP_EOL;
222 // call the export server to create a PNG image
223 $outstr .= ' $("#fermentor_chart_'.$unit.'").jqxChart("saveAsPNG", "Chart_'.$name.'.png", getExportServer'.$unr.'());'.PHP_EOL;
224 $outstr .= ' });'.PHP_EOL;
225 $outstr .= ' $("#pdfButton_'.$unr.'").click(function () {'.PHP_EOL;
226 $outstr .= ' $("#fermentor_chart_'.$unit.'").jqxChart("saveAsPDF", "Chart_'.$name.'.pdf", getExportServer'.$unr.'());'.PHP_EOL;
227 $outstr .= ' });'.PHP_EOL;
228 $outstr .= ' $("#pngButton_'.$unr.'").jqxButton({ width: 70, height: 25, theme: "ui-redmond" });'.PHP_EOL;
229 $outstr .= ' $("#pdfButton_'.$unr.'").jqxButton({ width: 70, height: 25, theme: "ui-redmond" });'.PHP_EOL;
230 158
231 $outstr .= ' setInterval(function(){'.PHP_EOL; 159 $outstr .= ' setInterval(function(){'.PHP_EOL;
232 $outstr .= ' $.getJSON("getstate.php?uuid='.$unit.'", function(data) {'.PHP_EOL; 160 $outstr .= ' $.getJSON("getstate.php?uuid='.$unit.'", function(data) {'.PHP_EOL;
233 $outstr .= ' $("#load_air_'.$unr.'").html(data.air_temperature);'.PHP_EOL; 161 if ("$air_state" == "OK") {
234 $outstr .= ' $("#load_beer_'.$unr.'").html(data.beer_temperature);'.PHP_EOL; 162 $outstr .= ' $("#load_air_'.$unr.'").html(data.air_temperature);'.PHP_EOL;
163 $outstr .= ' $("#gaugeContainer_air'.$unr.'").jqxGauge(\'value\', data.air_temperature);'.PHP_EOL;
164 }
165 if ("$beer_state" == "OK") {
166 $outstr .= ' $("#load_beer_'.$unr.'").html(data.beer_temperature);'.PHP_EOL;
167 $outstr .= ' $("#gaugeContainer_beer'.$unr.'").jqxGauge(\'value\', data.beer_temperature);'.PHP_EOL;
168 }
235 $outstr .= ' $("#load_target_lo_'.$unr.'").html(data.target_temperature_lo);'.PHP_EOL; 169 $outstr .= ' $("#load_target_lo_'.$unr.'").html(data.target_temperature_lo);'.PHP_EOL;
236 $outstr .= ' $("#load_target_hi_'.$unr.'").html(data.target_temperature_hi);'.PHP_EOL; 170 $outstr .= ' $("#load_target_hi_'.$unr.'").html(data.target_temperature_hi);'.PHP_EOL;
237 $outstr .= ' $("#load_select_'.$unr.'").html(data.mode);'.PHP_EOL; 171 $outstr .= ' $("#load_select_'.$unr.'").html(data.mode);'.PHP_EOL;
238 $outstr .= ' $("#load_led1_'.$unr.'").html(data.led1);'.PHP_EOL; 172 $outstr .= ' $("#load_led1_'.$unr.'").html(data.led1);'.PHP_EOL;
239 $outstr .= ' $("#load_led2_'.$unr.'").html(data.led2);'.PHP_EOL; 173 $outstr .= ' $("#load_led2_'.$unr.'").html(data.led2);'.PHP_EOL;
258 $outstr .= ' $("#load_sw1_'.$unr.'").jqxTooltip({ content: "Manual control cooler.", theme: "'.$my_style.'" });'.PHP_EOL; 192 $outstr .= ' $("#load_sw1_'.$unr.'").jqxTooltip({ content: "Manual control cooler.", theme: "'.$my_style.'" });'.PHP_EOL;
259 if (($mode == "NONE") && ($heater == "yes")) 193 if (($mode == "NONE") && ($heater == "yes"))
260 $outstr .= ' $("#load_sw2_'.$unr.'").jqxTooltip({ content: "Manual control heater.", theme: "'.$my_style.'" });'.PHP_EOL; 194 $outstr .= ' $("#load_sw2_'.$unr.'").jqxTooltip({ content: "Manual control heater.", theme: "'.$my_style.'" });'.PHP_EOL;
261 if (($mode == "NONE") && ($fan== "yes")) 195 if (($mode == "NONE") && ($fan== "yes"))
262 $outstr .= ' $("#load_sw3_'.$unr.'").jqxTooltip({ content: "Manual control fan.", theme: "'.$my_style.'" });'.PHP_EOL; 196 $outstr .= ' $("#load_sw3_'.$unr.'").jqxTooltip({ content: "Manual control fan.", theme: "'.$my_style.'" });'.PHP_EOL;
263 $outstr .= ' $("#print_'.$unr.'").jqxTooltip({ content: "Print the current graph.", theme: "'.$my_style.'" });'.PHP_EOL; 197
264 $outstr .= ' $("#pngButton_'.$unr.'").jqxTooltip({ content: "Save the current graph as png image.", theme: "'.$my_style.'" });'.PHP_EOL;
265 $outstr .= ' $("#pdfButton_'.$unr.'").jqxTooltip({ content: "Save the current graph as PDF file.", theme: "'.$my_style.'" });'.PHP_EOL;
266
267 $outstr .= ' });'.PHP_EOL; 198 $outstr .= ' });'.PHP_EOL;
268 $outstr .= ' </script>'.PHP_EOL; 199 $outstr .= ' </script>'.PHP_EOL;
200
269 $outstr .= ' <div id="fermentor">'.PHP_EOL; 201 $outstr .= ' <div id="fermentor">'.PHP_EOL;
270 $outstr .= ' <div id="fermentor_chart_'.$unit.'" style="width:720px; height:377px; float:left"></div>'.PHP_EOL; 202 $outstr .= ' <div id="fermentor_thermometers">'.PHP_EOL;
203 if ("$air_state" == "OK") {
204 $outstr .= ' <div id="gaugeContainer_air'.$unr.'" style="float: left; margin-top: 10px; margin-left: 10px;"></div>'.PHP_EOL;
205 }
206 if ("$beer_state" == "OK") {
207 $outstr .= ' <div id="gaugeContainer_beer'.$unr.'" style="float: left; margin-top: 10px; margin-left: 10px;"></div>'.PHP_EOL;
208 }
209 if ("$chiller_state" == "OK") {
210 $outstr .= ' <div id="gaugeContainer_chiller'.$unr.'" style="float: left; margin-top: 10px; margin-left: 10px;"></div>'.PHP_EOL;
211 }
212 $outstr .= ' </div>'.PHP_EOL;
271 213
272 $outstr .= ' <div id="fermentor_panel_top">'.PHP_EOL; 214 $outstr .= ' <div id="fermentor_panel_top">'.PHP_EOL;
273 $outstr .= ' <div id="fermentor_selector">'.PHP_EOL; 215 $outstr .= ' <div id="fermentor_selector">'.PHP_EOL;
274 $outstr .= ' <form id="select_'.$unr.'" action="index.php" method="post">'.PHP_EOL; 216 $outstr .= ' <form id="select_'.$unr.'" action="index.php" method="post">'.PHP_EOL;
275 $outstr .= ' <div id="load_select_'.$unr.'">'.PHP_EOL; 217 $outstr .= ' <div id="load_select_'.$unr.'">'.PHP_EOL;
448 $outstr .= ' </div>'.PHP_EOL; 390 $outstr .= ' </div>'.PHP_EOL;
449 $outstr .= ' </div> <!-- fermentor_panel_control -->'.PHP_EOL; 391 $outstr .= ' </div> <!-- fermentor_panel_control -->'.PHP_EOL;
450 392
451 $outstr .= ' <div id="fermentor_panel_buttons">'.PHP_EOL; 393 $outstr .= ' <div id="fermentor_panel_buttons">'.PHP_EOL;
452 $outstr .= ' <div style="margin-top: 2px; margin-left: 5px;">'.PHP_EOL; 394 $outstr .= ' <div style="margin-top: 2px; margin-left: 5px;">'.PHP_EOL;
453 $outstr .= ' <input style="float: left;" id="print_'.$unr.'" type="button" value="Print" />'.PHP_EOL; 395 $outstr .= ' <form action="archives.php">'.PHP_EOL;
454 $outstr .= ' <input style="float: left; margin-left: 7px;" id="pngButton_'.$unr.'" type="button" value="as PNG" />'.PHP_EOL; 396 $outstr .= ' <input type="submit" id="maintenance" value="Graph" />'.PHP_EOL;
397 $outstr .= ' <input type="hidden" name="action" value="view">'.PHP_EOL;
398 $outstr .= ' <input type="hidden" name="return" value="index">'.PHP_EOL;
399 $outstr .= ' <input type="hidden" name="name" value="'.urlencode($name).'">'.PHP_EOL;
400 $outstr .= ' </form>'.PHP_EOL;
401 // $outstr .= ' <input style="float: left;" id="print_'.$unr.'" type="button" value="Grafiek" />'.PHP_EOL;
402 /* $outstr .= ' <input style="float: left; margin-left: 7px;" id="pngButton_'.$unr.'" type="button" value="as PNG" />'.PHP_EOL;
455 $outstr .= ' <input style="float: left; margin-left: 7px;" id="pdfButton_'.$unr.'" type="button" value="as PDF" />'.PHP_EOL; 403 $outstr .= ' <input style="float: left; margin-left: 7px;" id="pdfButton_'.$unr.'" type="button" value="as PDF" />'.PHP_EOL;
456 $outstr .= ' </div>'.PHP_EOL; 404 */ $outstr .= ' </div>'.PHP_EOL;
457 $outstr .= ' </div> <!-- fermentor_panel_buttons -->'.PHP_EOL; 405 $outstr .= ' </div> <!-- fermentor_panel_buttons -->'.PHP_EOL;
458 406
459 $outstr .= ' </div> <!-- fermentor -->'.PHP_EOL; 407 $outstr .= ' </div> <!-- fermentor -->'.PHP_EOL;
460 } 408 }
461 409

mercurial