256 lines
6.7 KiB
PHP
256 lines
6.7 KiB
PHP
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<script src="js/jsani/lib/jquery-1.11.1.min.js"></script>
|
|
<script src="js/jsani/lib/jquery-ui-1.11.2/jquery-ui.min.js"></script>
|
|
<link href="js/jsani/lib/jquery-ui-1.11.2/jquery-ui.min.css" rel="stylesheet" type="text/css">
|
|
<script src="js/jsani/jquery.jsani.min.js"></script>
|
|
<link href="js/jsani/jquery.jsani.min.css" rel="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
|
|
<style type="text/css">
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
#caminfo {
|
|
height: 100%;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table,th,td {
|
|
border: 1px solid black;
|
|
padding-horizontal: 15px;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
<body>
|
|
|
|
|
|
<div style="width: auto; height: 150px; margin: auto;">
|
|
|
|
<div id="caminfo">
|
|
<table>
|
|
<tbody id="camstats"></tbody>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: auto; margin: auto;">
|
|
<div id="animation_1"></div>
|
|
</div>
|
|
|
|
<div id="archive">
|
|
<label>Current archive length is 15 days</label>
|
|
<form onsubmit="return false;" method="post" name="archive">
|
|
<label for="archive">Enter Ending Date Time For Archive Data (YYYY-MM-DD HH:MM) UTC</label>
|
|
<input type="text" id="dtg" name="dtg">
|
|
<input type="submit" name="submit" value="Submit" onclick="archiveshow()" />
|
|
</form>
|
|
<br>
|
|
<br>
|
|
|
|
<form onsubmit="return false;" method="post" name="gifit">
|
|
<label for="gifit">Enter frame delay and last frame dwell to make an animated gif from loaded frames.</label>
|
|
<br>
|
|
<label for="delay">Delay</label>
|
|
<input type="text" id="delay" name="delay" value="20" size="6">
|
|
<label for="delay">Last Frame Delay</label>
|
|
<input type="text" id="lastdelay" name="lastdelay" value="200" size="6">
|
|
<label for="maxh">Max Horizonal Size</label>
|
|
<input type="text" id="maxh" name="maxh" value="500" size="6">
|
|
<label for="maxv">Max Vertical Size</label>
|
|
<input type="text" id="maxv" name="maxv" value="400" size="6">
|
|
<label for="delay">Last Frame Delay</label>
|
|
<input type="submit" name="gifit" value="Make GIF" onclick="makemp4()"/>
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
<?php
|
|
|
|
$camid = pg_escape_string($_GET['camid']);
|
|
echo('var camid = ' . $_GET["camid"] . ';');
|
|
if($_GET['dtg']){
|
|
$endtime = pg_escape_string($_GET['dtg']);
|
|
}
|
|
if($_GET['camimages']){
|
|
$camimages = $_GET['camimages'];
|
|
echo('var camimages = ' . $_GET["camimages"] . ';');
|
|
}
|
|
if(!$_GET['camimages']){
|
|
echo('var camimages = ' . 20 . ';');
|
|
}
|
|
|
|
|
|
|
|
|
|
if($_GET['dtg']){
|
|
echo('var camtime = ' . json_encode($_GET["dtg"]). ';');
|
|
}
|
|
|
|
|
|
|
|
?>
|
|
|
|
externalcam = [];
|
|
|
|
|
|
function archiveshow() {
|
|
archive = document.getElementById("dtg").value;
|
|
archive=archive.trim().replace(/ /g, '+');
|
|
window.open("one.php?camid=" + camid + "&camimages=" + camimages + "&dtg=" + archive);
|
|
}
|
|
|
|
|
|
|
|
|
|
function doTheInsert(label1,value1,label2,value2) {
|
|
newRow="<td>" + label1 + "</td><td>" + value1 + "</td><td>" + label2 + "</td><td>" + value2 + "</td>";
|
|
document.getElementById('camstats').innerHTML += newRow;
|
|
}
|
|
|
|
|
|
|
|
function updatetable() {
|
|
$.getJSON("single.php?camid=" + camid, function(caminfo){
|
|
document.getElementById('camstats').innerHTML = '';
|
|
doTheInsert('State',caminfo[0]['state'],'County',caminfo[0]['county']);
|
|
doTheInsert('Public Zone', caminfo[0]['pzone'], 'CWA', caminfo[0]['cwa']);
|
|
doTheInsert('Elevation',caminfo[0]['elevation'] + ' feet', 'Direct link to feed (all may not be accessible from RLX)','<a href="' + caminfo[0]['url'] + '">' + 'link' + '</a>');
|
|
doTheInsert('Description','<a href="' + googleMap(caminfo[0]['lat'],caminfo[0]['lon']) + '" target=”_blank">' + caminfo[0]['description'] + '</a>', '','');
|
|
});
|
|
}
|
|
|
|
function googleMap(lat, lon){
|
|
return "http://maps.google.com/maps?t=k&q=loc:" + lat + "+" + lon + "&basemap=satellite";
|
|
}
|
|
|
|
|
|
|
|
|
|
function getcam() {
|
|
if (typeof camtime !== 'undefined') {
|
|
var reqstring = "individualcam.php?camid=" + camid + '&camimages=' + camimages + '&dtg=' + camtime;
|
|
|
|
} else {
|
|
var reqstring = "individualcam.php?camid=" + camid + '&camimages=' + camimages;
|
|
|
|
}
|
|
|
|
//$.getJSON("individualcam.php?camid=" + camid + '&camimages=' + camimages, function(data){
|
|
$.getJSON(reqstring, function(data){
|
|
var camlist = [];
|
|
var filetimes = [];
|
|
|
|
for(var i in data){
|
|
camlist.push(data[i].filepath);
|
|
filetimes.push('<a href="./camdata/' + data[i].filepath + '">Pause Loop and click this to view image directly</a> ' + 'Image Retrieved: ' + data[i].dateutc + ' UTC');
|
|
externalcam.push("./camdata/" + data[i].filepath);
|
|
}
|
|
camlist.reverse();
|
|
filetimes.reverse();
|
|
externalcam.reverse();
|
|
var animation = $("#animation_1").jsani({
|
|
baseDir: './camdata',
|
|
imageSrcs: camlist,
|
|
aniWidth: 800,
|
|
aniHeight: 600,
|
|
//initdwell: 200,
|
|
frameLabels: filetimes,
|
|
controls: ['framelabel', 'stopplay', 'firstframe', 'previous', 'next', 'lastframe', 'looprock', 'slow', 'fast', 'zoom'],
|
|
last_frame_pause: 8,
|
|
//first_frame_pause: 1,
|
|
//frame_pause: '0:5, 3:6'
|
|
});
|
|
|
|
|
|
updatetable();
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
getcam();
|
|
|
|
window.setInterval('refresh()', 60000);
|
|
|
|
function refresh() {
|
|
window.location.reload();
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function makemp4() {
|
|
var delay = document.getElementById("delay").value;
|
|
var lastdelay = document.getElementById("lastdelay").value;
|
|
var maxh = document.getElementById("maxh").value;
|
|
var maxv = document.getElementById("maxv").value;
|
|
$.ajax({
|
|
type: "POST",
|
|
url: 'mp4.php',
|
|
data: {data: externalcam, images: camimages, delay: delay, lastdelay: lastdelay, maxh: maxh, maxv: maxv},
|
|
success: function(data) {
|
|
//var outputImg = document.createElement('img');
|
|
//var giffy = document.querySelector(`data:image/gif;base64,${data}`);
|
|
var giffy = document.createElement('img');
|
|
giffy.src = `data:image/gif;base64,${data}`;
|
|
var outputImg = document.createElement('a');
|
|
outputImg.innerHTML = "Click to save image <br>";
|
|
outputImg.appendChild(giffy);
|
|
outputImg.href = giffy.src;
|
|
outputImg.download = "loof.gif";
|
|
giffy.href = giffy.src;
|
|
giffy.download = "loop.gif";
|
|
outputImg.appendChild(giffy)
|
|
document.body.appendChild(outputImg);
|
|
//document.body.appendChild(giffy);
|
|
//window.open('about:blank').document.body.appendChild(outputImg);
|
|
//var OpenWindow = window.open('about:blank','_blank');
|
|
//OpenWindow.document.body.appendChild(outputImg);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<div id='hidden' style="display: none;">
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|