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>
95 <div class="group-5">
96 <div class="overlap-7">
97 <div class="text-wrapper-7">AQI</div>
98 <div class="rectangle-7"></div>
99 <img class="img" src="/static/img/vector-1.svg" />
100 <div class="ellipse"></div>
101 <div class="ellipse-2"></div>
102 </div>
103 </div>
104 </div>
105 </div>
106 <script>
107 function setTarget(element) {
108 var temperature = element.innerText.trim().replace('°','');
109 console.log('Temperatura selezionata:', temperature);
110
111 tosend= {'t_setpoint': temperature}
112 console.log("Post: ",tosend);
113 postData(tosend);
114 }
115
116 function setPower(element) {
117 var power = element.innerText.trim();
118 if (power =="ON")
119 power = 1;
120 else power = 0;
121 tosend = {'power': power}
122 console.log('Accensione: :', power);
123 postData(tosend)
124 }
125
126 function setFanSpeed(element) {
127 var speed = element.innerText.trim();
128 switch (speed){
129 case "1":
130 speed = 500;
131 break;
132 case "2":
133 speed = 1000;
134 break;
135 case "3":
136 speed = 2000;
137 break;
138 case "4":
139 speed = 3000;
140 break;
141 }
142 tosend = {'fan_speed': speed}
143 console.log('Fan_speed: :', tosend);
144 postData(tosend)
145 }
146
147 function setAuto(element) {
148 var attivazione = element.innerText.trim();
149 if(attivazione == "MANUAL")
150 attivazione = 0;
151 else
152 attivazione = 1;
153 tosend = {'auto': attivazione}
154 console.log('Auto/Man selezionato:', attivazione);
155 postData(tosend)
156 }
157
158
159 function postData(data) {
160 let formBody = [];
161 for (var property in data) {
162 var encodedKey = encodeURIComponent(property);
163 var encodedValue = encodeURIComponent(data[property]);
164 formBody.push(encodedKey + "=" + encodedValue);
165 }
166 formBody = formBody.join("&");
167
168 fetch('http://localhost:1111/data', {
169 method: 'POST',
170 headers: {
171 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
172 },
173 body: formBody
174 })
175 }
176
177
178 async function getData() {
179 const response = await fetch('http://localhost:1111/data')
180 console.log(response);
181 const data= await response.json();
182 console.log(data);
183
184 switch(data) {
185 case data.t_in:
186 document.getElementById("t_in").innerHTML = data[1];
187 break;
188 case "t_out":
189 document.getElementById("t_out").innerHTML = data[1];
190 break;
191 case "aqi":
192 document.getElementById("aqi_ext").innerHTML = data[1];
193 break;
194 case "aqi_in":
195 document.getElementById("aqi_in").innerHTML = data[1];
196 break;
197 case "air_flow":
198 break;
199 case "fan_speed":
200 document.getElementById("aqi_in").innerHTML = data[1];
201 break;
202 }
203 window.addEventListener('load', function () {
204 // Your document is loaded.
205 var fetchInterval = 5000; // 5 seconds.
206
207 // Invoke the request every 5 seconds.
208 setInterval(getData, fetchInterval);
209 });
210 }
211 </script>
212 </body>
213</html>