Skip to content

Commit 1c42042

Browse files
ADRN-9ADRN-9
authored
Add files via upload
1 parent 516b8ec commit 1c42042

File tree

1 file changed

+299
-0
lines changed

1 file changed

+299
-0
lines changed

‎index.html

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>ADRN-FLOW METER </title>
7+
8+
<!-- Bootstraps Java Scipts Links -->
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
12+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
13+
14+
15+
16+
<!-- JQuery links -->
17+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
18+
19+
20+
<!--High CHART LIVE -->
21+
<script src="http://code.highcharts.com/highcharts.js"></script>
22+
<script src="http://code.highcharts.com/highcharts-more.js"></script>
23+
<script src="http://code.highcharts.com/modules/exporting.js"></script>
24+
25+
<!--Gauge -->
26+
<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon.js"></script>
27+
28+
29+
</head>
30+
31+
<body>
32+
33+
<div class="jumbotron">
34+
<h1 class="text-center text-white">ACCROSS GRPOUP - FLOW/PRESUURE CONTROLLER SYSTEM </h1>
35+
</div>
36+
<br>
37+
<br>
38+
39+
<div class="container-fluid">
40+
41+
<div class="row">
42+
43+
<div class="col-5 jumbotron p-2 mx-1">
44+
<h1 class="sensor1"> Sensor : </h1>
45+
</div>
46+
<br>
47+
48+
<div class="col-5 jumbotron p-2 mx-1">
49+
<h1 class="sensor2">Sensor :</h1>
50+
</div>
51+
<br>
52+
53+
<div class="col-5 jumbotron p-2 mx-1">
54+
<h1 class="sensor3">Target Flow(ml/min): {{targetflow}}</h1>
55+
<form method="POST" action="/">
56+
<input name="tar">
57+
<input type="submit" value="Set">
58+
</form>
59+
</div>
60+
<br>
61+
62+
<div class="col-5 jumbotron p-2 mx-1">
63+
<h1 class="sensor4">Sensor :</h1>
64+
</div>
65+
<br>
66+
67+
68+
</div>
69+
</div>
70+
71+
<style>
72+
73+
.jumbotron{
74+
widows: 150px;
75+
height: 220px;
76+
justify-content: center;
77+
}
78+
79+
.row{
80+
justify-content: center;
81+
}
82+
83+
84+
</style>
85+
86+
<div class="container-fluid">
87+
<!-- Example row of columns -->
88+
<div class="row">
89+
<div class="container-fluid" id="data-temperature">
90+
91+
</div>
92+
</div>
93+
</div>
94+
<br>
95+
<br>
96+
<br>
97+
98+
<div class="container-fluid">
99+
<!-- Example row of columns -->
100+
<div class="row">
101+
<div class="container-fluid" id="data-flow">
102+
103+
</div>
104+
</div>
105+
</div>
106+
107+
108+
<script>
109+
var chartTemperatue;
110+
var chartFlow;
111+
112+
function requestData()
113+
{
114+
// Ajax call to get the Data from Flask
115+
var requests = $.get('/data');
116+
117+
var tm = requests.done(function (result)
118+
{
119+
// Temperature
120+
var seriesTemperature = chartTemperatue.series[0],
121+
shiftTemperature = seriesTemperature.data.length > 302400;
122+
123+
// Flow
124+
var seriesFlow = chartFlow.series[0],
125+
shiftFlow = seriesTemperature.data.length > 302400;
126+
127+
// Add the Point
128+
// Time Temperature\
129+
var data1 = [];
130+
data1.push(result[0]);
131+
data1.push(result[1]);
132+
133+
134+
// Add the Point
135+
// Time Flow
136+
var data2 = [];
137+
data2.push(result[0]);
138+
data2.push(result[2]);
139+
140+
141+
// Add the Point
142+
// Time Vacuum
143+
var data3 = [];
144+
data3.push(result[0]);
145+
data3.push(result[3]);
146+
147+
chartTemperatue.series[0].addPoint(data1, true, shiftTemperature);
148+
chartFlow.series[0].addPoint(data2, true, shiftFlow);
149+
$(".sensor1").text("");
150+
$(".sensor1").text("Vacuum(mbar) : " + Math.round(data3[1]) );
151+
152+
$(".sensor2").text("");
153+
$(".sensor2").text("Flow(ml/min) : " + Math.round(data2[1]) );
154+
155+
//$(".sensor3").text("");
156+
//$(".sensor3").text(" Target Flow(ml/min) :" {{targetflow}});
157+
158+
$(".sensor4").text("");
159+
$(".sensor4").text("Valve Load(%) : " + Math.round(data1[1]) );
160+
161+
// call it again after one second
162+
setTimeout(requestData, 2000);
163+
164+
});
165+
}
166+
167+
$(document).ready(function()
168+
{
169+
// --------------Chart 1 ----------------------------
170+
chartTemperatue = new Highcharts.Chart({
171+
chart:
172+
{
173+
type: 'spline',
174+
renderTo: 'data-temperature',
175+
defaultSeriesType: 'area',
176+
events: {
177+
load: requestData
178+
}
179+
},
180+
title:
181+
{
182+
text: 'Temperature'
183+
},
184+
xAxis: {
185+
type: 'datetime',
186+
tickPixelInterval: 150,
187+
maxZoom: 20 * 1000
188+
},
189+
yAxis: {
190+
minPadding: 0.2,
191+
maxPadding: 0.2,
192+
title: {
193+
text: 'Value',
194+
margin: 80
195+
}
196+
},
197+
series: [{
198+
color : '#c23d23',
199+
lineColor: '#c23d23',
200+
name: 'Temperature',
201+
data: []
202+
}]
203+
});
204+
// --------------Chart 1 Ends - -----------------
205+
206+
chartFlow = new Highcharts.Chart({
207+
chart:
208+
{
209+
renderTo: 'data-flow',
210+
defaultSeriesType: 'spline',
211+
events: {
212+
load: requestData
213+
}
214+
},
215+
title:
216+
{
217+
text: 'Flow(ml/min)'
218+
},
219+
xAxis: {
220+
type: 'datetime',
221+
tickPixelInterval: 150,
222+
maxZoom: 20 * 1000
223+
},
224+
yAxis: {
225+
minPadding: 0.2,
226+
maxPadding: 0.2,
227+
title: {
228+
text: 'Value',
229+
margin: 80
230+
}
231+
},
232+
series: [{
233+
color : '#1d82b8',
234+
lineColor: '#1d82b8',
235+
name: 'Flow',
236+
data: []
237+
}]
238+
});
239+
240+
241+
});
242+
</script>
243+
244+
245+
246+
<script>
247+
class Image{
248+
249+
constructor(imgUrl, size)
250+
{
251+
this.imgUrl=imgUrl;
252+
this.size=size;
253+
}
254+
255+
backgroundImage()
256+
{
257+
console.log("inside function ")
258+
// Select the Image
259+
var img = document.querySelector(".jumbotron");
260+
261+
// create Css Text
262+
var text = "margin:auto;"+
263+
"background-image: url("+this.imgUrl+");" +
264+
"background-size:cover;"+
265+
"opacity:1;"+
266+
"background-blend-mode: darken;"+
267+
"height: "+ this.size + "vh;";
268+
269+
img.style.cssText = text;
270+
}
271+
272+
centerTitle()
273+
{
274+
/*
275+
Center the Title
276+
*/
277+
var t1 = document.querySelector("#title");
278+
t1.classList.add("text-white");
279+
t1.classList.add("text-center");
280+
t1.classList.add("display-3");
281+
}
282+
}
283+
const imgUrl = 'https://drive.google.com/uc?id=1CBYU8VHXtl2AY65JoQ6hL7gxcR4q1cLR'
284+
const size = "55";
285+
var obj = new Image(imgUrl, size);
286+
obj.backgroundImage();
287+
obj.centerTitle();
288+
</script>
289+
<br>
290+
<footer>
291+
<p>Designed and Executed by ADRN<br>
292+
<a href="[email protected]">[email protected]</a></p>
293+
</footer>
294+
295+
</body>
296+
297+
298+
</html>
299+

0 commit comments

Comments
 (0)