<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<title>Timelapse Now WebServer</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/timelapse.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Timelapse Now</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="center hide-on-med-and-down">
<li><a href="#" onclick="record()">Record</a></li>
<li><a href="#" onclick="realtime()">Real Time</a></li>
</ul>
</div>
</nav>
<!-- Dropdown Structure -->
<ul class="sidenav" id="mobile-demo">
<li><a href="#" onclick="record()">Record</a></li>
<li><a href="#" onclick="realtime()">Real Time</a></li>
</ul>
<div class="img-container">
</div>
<div class="timelapse-state">
<div class="rec" id="rec">Stopped</div>
<div class="real-time" id="real-time">Interval</div><br>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
var record_text=document.getElementById("rec");
var rt_text=document.getElementById("real-time");
function setText()
{
record_text.innerText = rec ? "Recording" : "Stopped";
rt_text.innerText = real ? "Real Time" : "Inerval";
}
var rec=false;
var real=false;
$(document).ready(function(){
$('.sidenav').sidenav();
yourFunction();
});
function record()
{
get(`api/setstate.cgi?rec=${!rec}&real=${real}`,(e)=>{
var j=JSON.parse(e);
rec=j.Recording;
real=j.RealTime;
setText();
});
return false;
}
function realtime()
{
get(`api/setstate.cgi?rec=${rec}&real=${!real}`,(e)=>{
var j=JSON.parse(e);
rec=j.Recording;
real=j.RealTime;
setText();
});
return false;
}
function yourFunction(){
// do whatever you like here
get("api/state.json",(e)=>{
var j=JSON.parse(e);
rec=j.Recording;
real=j.RealTime;
setText();
});
setTimeout(yourFunction,2000);
}
function get(url,resp)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
resp(xhttp.responseText);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
</html>