<!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:#3f3f4f"> <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 class="mui-row"> <div class="mui-col-md-6"> <div class="mui-textfield"> <input type="date" placeholder="" id='from' name="from"/> <label>From</label> </div> </div> <div class="mui-col-md-6"> <div class="mui-textfield"> <input type="date" placeholder="" id='to' name="to"/> <label>To</label> </div> </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/amcharts.js"></script> <script src="lib/serial.js"></script> <script src="lib/amstock.js"></script> <script src="js/mdot.js"></script> </body> </html>