mirror of
https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git
synced 2025-01-25 22:06:16 +00:00
198 lines
5.9 KiB
HTML
198 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Graph</title>
|
|
<link href="css/mui.css" rel="stylesheet" type="text/css"/>
|
|
<link href="css/test.css" rel="stylesheet" type="text/css"/>
|
|
<link href="css/style.css" rel="stylesheet" type="text/css"/>
|
|
<script src="lib/mui.js"></script>
|
|
<script src="lib/notification.js"></script>
|
|
<link rel="stylesheet" href="css/notification.css">
|
|
</head>
|
|
<body style="background-color:#171d25">
|
|
<div class="mui-container">
|
|
<div class='mui-row'>
|
|
<div class="mui-col-md-3 panel">
|
|
<div class='mui-panel' id="main"></div>
|
|
<!--<div class='mui-panel' id="graph"></div>-->
|
|
<div id="output"></div>
|
|
</div>
|
|
<div class="mui-col-md-9">
|
|
<div class="mui-container">
|
|
<div id="chartdiv" style="width:100%; height:600px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div id="main"></div>-->
|
|
<!--<div id="graph"></div>-->
|
|
<script type="text/template" id="loaded-template">
|
|
<div
|
|
style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
|
|
</div>
|
|
</script>
|
|
<script type="text/template" id="main-template">
|
|
<div class="mui-container">
|
|
<div class="mui-row">
|
|
<div class="mui-select">
|
|
<select id="device" name="device">
|
|
<option></option>
|
|
<option>
|
|
HIE-mobile-1
|
|
</option>
|
|
<option>
|
|
HIE-demo
|
|
</option>
|
|
<option>
|
|
HIE-mobile-2
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-1
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-2
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-3
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-4
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-5
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-6
|
|
</option>
|
|
<option>
|
|
HIE-smart-campus-7
|
|
</option>
|
|
<option>
|
|
CENSIS-LoRa-1
|
|
</option>
|
|
<option>
|
|
CENSIS-LoRa-2
|
|
</option>
|
|
<option>
|
|
CENSIS-LoRa-3
|
|
</option>
|
|
<option>
|
|
CENSIS-LoRa-4
|
|
</option>
|
|
<option>
|
|
HIE-mDot-1
|
|
</option>
|
|
</select> <label>Device</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mui-row">
|
|
<div class="mui-col-md-12">
|
|
<button id='refresh'
|
|
class="mui-btn mui-btn--small mui-btn--primary">Refresh
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/template" id="list-template">
|
|
<ul></ul>
|
|
</script>
|
|
<script type="text/template" id="item-template">
|
|
<div class="mui-row">
|
|
<div class="mui-col-md-2"><%= item.timestamp %></div>
|
|
<div class="mui-col-md-2"><%= item.lux %></div>
|
|
<div class="mui-col-md-2"><%= item.co2 %></div>
|
|
<div class="mui-col-md-2"><%= item.temp %></div>
|
|
<div class="mui-col-md-2"><%= item.humidity %></div>
|
|
<div class="mui-col-md-2"><%= item.sound %></div>
|
|
</div>
|
|
</script>
|
|
<script type="text/template" id="AMChart-template">
|
|
<div class="mui-container">
|
|
<div class="mui-row">
|
|
<div class="mui-select mui-col-md-12">
|
|
<select id="displaymode" name="displaymode">
|
|
<option value="0"></option>
|
|
<option value="1">
|
|
Light
|
|
</option>
|
|
<option value="2">
|
|
Temp
|
|
</option>
|
|
<option value="3">
|
|
Co2
|
|
</option>
|
|
<option value="4">
|
|
Humidity
|
|
</option>
|
|
<option value="5">
|
|
Noise
|
|
</option>
|
|
<option value="6">
|
|
Light & Co2
|
|
</option>
|
|
<option value="7">
|
|
Temperature & Humidity
|
|
</option>
|
|
|
|
</select> <label>Graph</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/template" id="graph-template">
|
|
<div class="mui-container">
|
|
<div class="mui-row">
|
|
<div class="mui-select mui-col-md-6">
|
|
<select id="displaymode" name="displaymode">
|
|
<option value="0"></option>
|
|
<option value="1">
|
|
Light
|
|
</option>
|
|
<option value="2">
|
|
Temp
|
|
</option>
|
|
<option value="3">
|
|
Co2
|
|
</option>
|
|
<option value="4">
|
|
Humidity
|
|
</option>
|
|
<option value="5">
|
|
Noise
|
|
</option>
|
|
</select> <label>Graph</label>
|
|
</div>
|
|
<div class="mui-col-md-6">
|
|
<svg id="graphSVG" width="300" height="150" fill="blue">
|
|
<line x1="46" y1="12" x2="280" y2="12"
|
|
style="stroke:#004c6d;stroke-width:2;"></line>
|
|
<text id="maxY" x="36" y="15" text-anchor="end">--</text>
|
|
<line x1="46" y1="136" x2="280" y2="136"
|
|
style="stroke:#004c6d;stroke-width:2;"></line>
|
|
<text id="MinY" x="36" y="139" text-anchor="end">0</text>
|
|
<polyline id="line" fill="none" stroke="#2196F3" text-anchor="end"
|
|
stroke-width="1" points=""></polyline>
|
|
<g id="datapoints"></g>
|
|
<g id="baseline"></g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script src="lib/jquery.js"
|
|
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
|
|
crossorigin="anonymous"></script>
|
|
<script src="lib/base64.js"></script>
|
|
<script src="lib/underscore.js"></script>
|
|
<script src="lib/backbone.js"></script>
|
|
<script src="lib/sugar-date.js"></script>
|
|
<script src="lib/notification.js"></script>
|
|
<script src="lib/amcharts.js"></script>
|
|
<script src="lib/serial.js"></script>
|
|
<script src="lib/amstock.js"></script>
|
|
<script src="js/mdot.js"></script>
|
|
</body>
|
|
</html>
|