backend_iot/templates/index.html (view raw)
1<!DOCTYPE html>
2<html>
3 <head>
4 <link rel="stylesheet" href="/static/globals.css" />
5 <link rel="stylesheet" href="/static/style.css" />
6 </head>
7 <body>
8 <div class="surface-pro">
9 <div class="div">
10 <div class="overlap">
11 <p class="text">
12 <span class="text-wrapper">T</span>
13 <span class="span">ext</span>
14 <span class="text-wrapper" id="t_out"> 25°</span>
15 </p>
16 </div>
17 <div class="overlap-group">
18 <p class="AQI-int"><span class="text-wrapper">AQI int</span> <span class="span" id="aqi_in">0</span></p>
19 <div class="rectangle"></div>
20 </div>
21 <div class="overlap-2">
22 <p class="AQI-ext"><span class="text-wrapper">AQI </span> <span class="span" id="aqi_ext">0</span></p>
23 <div class="rectangle-2"></div>
24 </div>
25 <div class="group"></div>
26 <div class="overlap-3">
27 <img class="vector" src="/static/img/vector.svg" />
28 <div class="overlap-wrapper">
29 <div class="overlap-group-2">
30 <div class="frame-wrapper">
31 <div class="frame">
32 <p class="p">
33 <span class="text-wrapper-2">.<br />.<br /></span>
34 <span id="speed-4" class="text-wrapper-3" onclick="setFanSpeed(this)">4<br /></span>
35 <span id="speed-3" class="text-wrapper-3" onclick="setFanSpeed(this)">3<br /></span>
36 <span id="speed-2" class="text-wrapper-3" onclick="setFanSpeed(this)">2<br /></span>
37 <span id="speed-1" class="text-wrapper-3" onclick="setFanSpeed(this)">1<br /></span>
38 <span class="text-wrapper-2">.<br /></span>
39 </p>
40 </div>
41 </div>
42 <div class="rectangle-3"></div>
43 <div class="rectangle-4"></div>
44 </div>
45 </div>
46 <div class="rectangle-5"></div>
47 <div class="rectangle-6"></div>
48 </div>
49 <div class="overlap-group-wrapper">
50 <div class="overlap-group-2">
51 <div class="div-wrapper">
52 <div class="frame">
53 <p class="p">
54 <span id="temp-28" class="text-wrapper-3">.<br /></span>
55 <span id="temp-28" class="text-wrapper-3">.<br /></span>
56 <span id="temp-28" class="text-wrapper-3" onclick="setTarget(this)">28°<br /></span>
57 <span id="temp-27" class="text-wrapper-3" onclick="setTarget(this)">27°<br /></span>
58 <span id="temp-26" class="text-wrapper-3" onclick="setTarget(this)">26°<br /></span>
59 <span id="temp-25" class="text-wrapper-3" onclick="setTarget(this)">25°<br /></span>
60 <span id="temp-24" class="text-wrapper-3" onclick="setTarget(this)">24°<br /></span>
61 <span id="temp-23" class="text-wrapper-3" onclick="setTarget(this)">23°<br /></span>
62 <span id="temp-22" class="text-wrapper-3" onclick="setTarget(this)">22°<br /></span>
63 <span id="temp-21" class="text-wrapper-3" onclick="setTarget(this)">21°<br /></span>
64 <span id="temp-20" class="text-wrapper-3" onclick="setTarget(this)">20°<br /></span>
65 <span id="temp-19" class="text-wrapper-3" onclick="setTarget(this)">19°<br /></span>
66 <span id="temp-18" class="text-wrapper-3" onclick="setTarget(this)">18°<br /></span>
67 <span id="temp-28" class="text-wrapper-3">.<br /></span>
68 <span id="temp-28" class="text-wrapper-3">.<br /></span>
69 </p>
70 </div>
71 </div>
72 <div class="rectangle-3"></div>
73 <div class="rectangle-4"></div>
74 </div>
75 </div>
76 <p class="tint">
77 <span class="text-wrapper">T</span>
78 <span class="span">int</span>
79 <span class="text-wrapper" id="t_in">22°</span>
80 </p>
81 <div class="overlap-4">
82 <div class="group-2">
83 <div class="overlap-5"><div class="text-wrapper-4">AUTO</div></div>
84 </div>
85 <div class="group-3">
86 <div class="overlap-5"><div class="text-wrapper-4">MANUAL</div></div>
87 </div>
88 <div class="group-4">
89 <div class="overlap-6">
90 <div class="overlap-group-3"><div class="text-wrapper-5" onclick="setPower(this)">ON</div></div>
91 <div class="text-wrapper-6" onclick="setPower(this)">OFF</div>
92 </div>
93 </div>
94 <div class="group-6">
95 <div class="overlap-5"><div class="text-wrapper-4"></div></div>
96 </div>
97 <div class="group-7">
98 <div class="overlap-5"><div class="text-wrapper-4"></div></div>
99 </div>
100 </div>
101 <div class="group-5">
102 <div class="overlap-7">
103 <div class="text-wrapper-7">AQI</div>
104 <div class="rectangle-7"></div>
105 <img class="img" src="/static/img/vector-1.svg" />
106 <div class="ellipse"></div>
107 <div class="ellipse-2"></div>
108 </div>
109 </div>
110 </div>
111 </div>
112 <script>
113 function setTarget(element) {
114 var temperature = element.innerText.trim().replace('°','');
115 console.log('Temperatura selezionata:', temperature);
116
117 tosend= {'t_in': temperature}
118 console.log("Post: ",tosend);
119 postData(tosend);
120 }
121
122 function setPower(element) {
123 var power = element.innerText.trim();
124 if (power =="ON")
125 power = 1;
126 else power = 0;
127 tosend = {'power': power}
128 console.log('Accensione: :', power);
129 postData(tosend)
130 }
131
132 function setFanSpeed(element) {
133 var speed = element.innerText.trim();
134 switch (speed){
135 case "1":
136 speed = 500;
137 break;
138 case "2":
139 speed = 1000;
140 break;
141 case "3":
142 speed = 2000;
143 break;
144 case "4":
145 speed = 3000;
146 break;
147 }
148 tosend = {'fan_speed': speed}
149 console.log('Fan_speed: :', tosend);
150 postData(tosend)
151 }
152
153 function setAuto(element) {
154 var attivazione = element.innerText.trim();
155 if(attivazione == "MANUAL")
156 attivazione = 0;
157 else
158 attivazione = 1;
159 tosend = {'auto': attivazione}
160 console.log('Auto/Man selezionato:', attivazione);
161 postData(tosend)
162 }
163
164
165 function postData(data) {
166 let formBody = [];
167 for (var property in data) {
168 var encodedKey = encodeURIComponent(property);
169 var encodedValue = encodeURIComponent(data[property]);
170 formBody.push(encodedKey + "=" + encodedValue);
171 }
172 formBody = formBody.join("&");
173
174 fetch('http://localhost:1111/data', {
175 method: 'POST',
176 headers: {
177 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
178 },
179 body: formBody
180 })
181 }
182
183
184 async function getData() {
185 const response = await fetch('http://localhost:1111/data')
186 console.log(response);
187 const data= await response.json();
188 console.log(data);
189
190 switch(data) {
191 case data.t_in:
192 document.getElementById("t_in").innerHTML = data[1];
193 break;
194 case "t_out":
195 document.getElementById("t_out").innerHTML = data[1];
196 break;
197 case "aqi":
198 document.getElementById("aqi_ext").innerHTML = data[1];
199 break;
200 case "aqi_in":
201 document.getElementById("aqi_in").innerHTML = data[1];
202 break;
203 case "air_flow":
204 break;
205 case "fan_speed":
206 document.getElementById("aqi_in").innerHTML = data[1];
207 break;
208 }
209 window.addEventListener('load', function () {
210 // Your document is loaded.
211 var fetchInterval = 5000; // 5 seconds.
212
213 // Invoke the request every 5 seconds.
214 setInterval(getData, fetchInterval);
215 });
216 }
217 </script>
218 </body>
219</html>