Sat, 22 Sep 2018 22:15:01 +0200
Design update
16 | 1 | <?php |
2 | require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php'); | |
3 | page_header('Hoofdmenu', NULL); | |
4 | $uuid = $_GET["uuid"]; | |
5 | ?> | |
6 | <script> | |
7 | $(document).ready(function () { | |
8 | ||
9 | var gaugeoptions = { | |
10 | min: -5, max: 35, width: 275, height: 275, | |
11 | ranges: [{ startValue: -5, endValue: 0, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 }, | |
12 | { startValue: 0, endValue: 16, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 }, | |
13 | { startValue: 16, endValue: 24, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 10, startWidth: 10 }, | |
14 | { startValue: 24, endValue: 35, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 10, startWidth: 10 }], | |
15 | ticksMinor: { interval: 1, size: '5%' }, | |
16 | ticksMajor: { interval: 5, size: '9%' }, | |
17 | labels: { interval: 5 }, | |
18 | style: { fill: '#eeeeee', stroke: '#666666' }, | |
19 | value: 0, | |
20 | colorScheme: 'scheme05', | |
21 | animationDuration: 1200 | |
22 | }; | |
23 | var gaugeSmalloptions = { | |
24 | min: -20, max: 25, width: 150, height: 150, | |
25 | ranges: [{ startValue: -20, endValue: 0, startWidth: 5, endWidth: 5, style: { fill: '#3399FF', stroke: '#3399FF' }}, | |
26 | { startValue: 0, endValue: 25, startWidth: 5, endWidth: 5, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }}], | |
27 | ticksMinor: { interval: 1, size: '5%' }, | |
28 | ticksMajor: { interval: 5, size: '9%' }, | |
29 | labels: { interval: 5 }, | |
30 | style: { fill: '#eeeeee', stroke: '#666666' }, | |
31 | value: 0, | |
32 | colorScheme: 'scheme05', | |
33 | animationDuration: 1200, | |
34 | caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] } | |
35 | }; | |
36 | ||
37 | $("#gaugeContainer_air").jqxGauge( gaugeoptions ); | |
38 | $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} ); | |
39 | $("#gaugeContainer_beer").jqxGauge( gaugeoptions ); | |
40 | $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} ); | |
41 | $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions ); | |
42 | ||
43 | var uuid = "<?php echo $uuid; ?>"; | |
44 | var url = "getfermenter.php?uuid='" + uuid + "'"; | |
45 | var source = { | |
46 | datatype: "json", | |
47 | datafields: [ | |
48 | { name: 'record', type: 'int' }, | |
49 | { name: 'uuid', type: 'string' }, | |
50 | { name: 'alias', type: 'string' }, | |
51 | { name: 'node', type: 'string' }, | |
52 | { name: 'online', type: 'bool' }, | |
53 | { name: 'beercode', type: 'string' }, | |
54 | { name: 'beername', type: 'string' }, | |
55 | { name: 'air_address', type: 'string' }, | |
56 | { name: 'air_state', type: 'string' }, | |
57 | { name: 'air_temperature', type: 'float' }, | |
58 | { name: 'beer_address', type: 'string' }, | |
59 | { name: 'beer_state', type: 'string' }, | |
60 | { name: 'beer_temperature', type: 'float' }, | |
61 | { name: 'chiller_address', type: 'string' }, | |
62 | { name: 'chiller_state', type: 'string' }, | |
63 | { name: 'chiller_temperature', type: 'float' }, | |
64 | { name: 'heater_address', type: 'string' }, | |
65 | { name: 'heater_state', type: 'int' }, | |
66 | { name: 'heater_usage', type: 'int' }, | |
67 | { name: 'cooler_address', type: 'string' }, | |
68 | { name: 'cooler_state', type: 'int' }, | |
69 | { name: 'cooler_usage', type: 'int' }, | |
70 | { name: 'fan_address', type: 'string' }, | |
71 | { name: 'fan_state', type: 'int' }, | |
72 | { name: 'fan_usage', type: 'int' }, | |
73 | { name: 'light_address', type: 'string' }, | |
74 | { name: 'light_state', type: 'int' }, | |
75 | { name: 'light_usage', type: 'int' }, | |
76 | { name: 'door_address', type: 'string' }, | |
77 | { name: 'door_state', type: 'int' }, | |
78 | { name: 'psu_address', type: 'string' }, | |
79 | { name: 'psu_state', type: 'int' }, | |
80 | { name: 'mode', type: 'string' }, | |
81 | { name: 'alarm', type: 'int' }, | |
82 | { name: 'setpoint_high', type: 'float' }, | |
83 | { name: 'setpoint_low', type: 'float' }, | |
84 | { name: 'profile_uuid', type: 'string' }, | |
85 | { name: 'profile_name', type: 'string' }, | |
86 | { name: 'profile_state', type: 'string' }, | |
87 | { name: 'profile_precent', type: 'int' }, | |
88 | { name: 'profile_inittemp_high', type: 'float' }, | |
89 | { name: 'profile_inittemp_low', type: 'float' }, | |
90 | { name: 'profile_steps', type: 'string' }, | |
91 | { name: 'stage', type: 'string' } | |
92 | ], | |
93 | id: 'record', | |
94 | url: url | |
95 | }; | |
96 | var dataAdapter = new $.jqx.dataAdapter(source, { | |
97 | loadComplete: function (records) { | |
98 | var record = dataAdapter.records[0]; | |
99 | var oline = (record.online) ? "On-line" : "Off-line"; | |
100 | var html = "<div id='fermenter_table'>"; | |
101 | html += "<table style='width: 100%; padding: 10px;'>"; | |
102 | html += "<tr><th colspan=2>Klimaatkast overzicht</th></tr>"; | |
103 | html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; | |
104 | html += "<tr><td>Systeem</td><td>" + record.node + "/" + record.alias + " " + oline + "</td></tr>"; | |
105 | html += "<tr><td>Bier</td><td>" + record.beercode + " - " + record.beername + "</td></tr>"; | |
106 | html += "<tr><td>Werking</td><td>" + record.mode + "</td></tr>"; | |
107 | html += "<tr><td>Fase</td><td>" + record.stage + "</td></tr>" | |
108 | html += "</<table>"; | |
109 | html += "</div>"; | |
110 | $("#ContentPanel").html(html); | |
111 | ||
112 | $('#gaugeContainer_air').jqxGauge({ value: record.air_temperature }); | |
113 | if (record.online && (record.air_state == "OK")) { | |
114 | $("#gaugeContainer_air").jqxGauge({ disabled: false }); | |
115 | } else { | |
116 | $("#gaugeContainer_air").jqxGauge({ disabled: true }); | |
117 | } | |
118 | $('#gaugeContainer_beer').jqxGauge({ value: record.beer_temperature }); | |
119 | if (record.online && (record.beer_state == "OK")) { | |
120 | $("#gaugeContainer_beer").jqxGauge({ disabled: false }); | |
121 | } else { | |
122 | $("#gaugeContainer_beer").jqxGauge({ disabled: true }); | |
123 | } | |
124 | $("#gaugeContainer_chiller").jqxGauge({ value: record.chiller_temperature }); | |
125 | if (record.online && (record.chiller_state == "OK")) { | |
126 | $("#gaugeContainer_chiller").jqxGauge({ disabled: false }); | |
127 | } else { | |
128 | $("#gaugeContainer_chiller").jqxGauge({ disabled: true }); | |
129 | } | |
130 | ||
40
b825c675987d
Finished mash steps editing. Style sheets cleanup.
Michiel Broek <mbroek@mbse.eu>
parents:
16
diff
changeset
|
131 | html = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high.toFixed(1) + "</span></div>"; |
b825c675987d
Finished mash steps editing. Style sheets cleanup.
Michiel Broek <mbroek@mbse.eu>
parents:
16
diff
changeset
|
132 | html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low.toFixed(1) + "</span></div>"; |
b825c675987d
Finished mash steps editing. Style sheets cleanup.
Michiel Broek <mbroek@mbse.eu>
parents:
16
diff
changeset
|
133 | html += "<div>Air <span class='temperature NUM'>" + record.air_temperature.toFixed(3) + "</span></div>"; |
b825c675987d
Finished mash steps editing. Style sheets cleanup.
Michiel Broek <mbroek@mbse.eu>
parents:
16
diff
changeset
|
134 | html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature.toFixed(3) + "</span></div>"; |
16 | 135 | $("#fermenter_tempdigits").html(html); |
136 | } | |
137 | }); | |
138 | ||
139 | // Get the data immediatly and then at regular intervals to refresh. | |
140 | dataAdapter.dataBind(); | |
141 | setInterval(function(){ | |
142 | dataAdapter.dataBind(); | |
143 | }, 10000); | |
144 | ||
145 | }); | |
146 | </script> | |
147 | <div id="MainPanel"> | |
148 | <div id="ContentPanel"></div> | |
149 | <div id='fermenter_thermometers'> | |
150 | <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div> | |
151 | <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div> | |
152 | <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div> | |
153 | <div id="fermenter_tempdigits"></div> | |
154 | </div> | |
155 | </div> | |
156 | ||
157 | <?php | |
158 | page_footer(); | |
159 | ?> |