initial
This commit is contained in:
384
camobs.html
Normal file
384
camobs.html
Normal file
@@ -0,0 +1,384 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>RLX Weather Camera List</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id ="container" class="mosaic">
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin-left: 0;
|
||||
margin-right:0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.mosaic {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50%, 100%));
|
||||
grid-gap: 0px;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
passing: 0px 0px;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
padding: 0px 0px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function sleep(ms = 0) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
var querytype = getUrlVars()["type"];
|
||||
var lat1 = getUrlVars()["lat1"];
|
||||
var lon1 = getUrlVars()["lon1"];
|
||||
var lat2 = getUrlVars()["lat2"];
|
||||
var lon2 = getUrlVars()["lon2"];
|
||||
var radius = getUrlVars()["radius"];
|
||||
var elevbottom = getUrlVars()["elevbottom"];
|
||||
var elevtop = getUrlVars()["elevtop"];
|
||||
|
||||
if (querytype == "bbox") {
|
||||
var camurl = "camobs.php?camstatic=bbox&lat1=" + lat1 + "&lon1=" + lon1 + "&lat2=" + lat2 + "&lon2=" + lon2 + "&elevbottom=" + elevbottom + "&elevtop=" + elevtop;
|
||||
}
|
||||
|
||||
if (querytype == "radius") {
|
||||
var camurl = "camobs.php?camstatic=radius&lat1=" + lat1 + "&lon1=" + lon1 + "&radius=" + radius;
|
||||
}
|
||||
|
||||
console.log(camurl);
|
||||
|
||||
|
||||
function getUrlVars() {
|
||||
var vars = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
||||
vars[key] = value;
|
||||
});
|
||||
return vars;
|
||||
}
|
||||
|
||||
|
||||
camimages = 20;
|
||||
function setcams() {
|
||||
camimages = document.getElementById("numberofimages").value;
|
||||
refreshcams();
|
||||
}
|
||||
|
||||
var showcams = [];
|
||||
|
||||
|
||||
function filter() {
|
||||
var showcams = [];
|
||||
var x = document.getElementById("filters");
|
||||
options = x.getElementsByTagName('option');
|
||||
var y = document.getElementById("cwa").checked;
|
||||
values = [];
|
||||
for (var i=options.length; i--;) {
|
||||
if (options[i].selected) values.push(options[i].value)
|
||||
}
|
||||
|
||||
|
||||
for(var k in allcams) {
|
||||
for(var l in values) {
|
||||
|
||||
|
||||
if (allcams[k].state == values[l]) {
|
||||
if (!y) {
|
||||
showcams.push(allcams[k].camid);
|
||||
}
|
||||
if (y && 'RLX' == allcams[k].cwa) {
|
||||
showcams.push(allcams[k].camid);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById(allcams[k].camid).style.display = 'none';
|
||||
for(var o in showcams) {
|
||||
document.getElementById(showcams[o]).style.display = '';
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function sortcams() {
|
||||
var sortcams = allcams;
|
||||
var x = document.getElementById("sort");
|
||||
options = x.getElementsByTagName('option');
|
||||
values = [];
|
||||
for (var i=options.length; i--;) {
|
||||
|
||||
if (options[i].selected) {
|
||||
switch(options[i].value) {
|
||||
case "elevd":
|
||||
sortcams.sort(function(a,b) {
|
||||
return b.elevation-a.elevation
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
break;
|
||||
case "eleva":
|
||||
sortcams.sort(function(a,b) {
|
||||
return a.elevation-b.elevation
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
// code block
|
||||
break;
|
||||
case "westeast":
|
||||
sortcams.sort(function(a,b) {
|
||||
if (a.lon > b.lon) {
|
||||
return -1;
|
||||
}
|
||||
if (b.lon > a.lon) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
|
||||
|
||||
})
|
||||
break;
|
||||
case "northsouth":
|
||||
sortcams.sort(function(a,b) {
|
||||
if (a.lat> b.lat) {
|
||||
return -1;
|
||||
}
|
||||
if (b.lat > a.lat) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
|
||||
|
||||
})
|
||||
break;
|
||||
case "countyza":
|
||||
sortcams.sort(function(a,b) {
|
||||
if (a.county > b.county) {
|
||||
return -1;
|
||||
}
|
||||
if (b.county > a.county) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
|
||||
|
||||
})
|
||||
break;
|
||||
case "countyaz":
|
||||
sortcams.sort(function(a,b) {
|
||||
if (a.county > b.county) {
|
||||
return 1;
|
||||
}
|
||||
if (b.county > a.county) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
|
||||
|
||||
})
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
for (var ii in sortcams) {
|
||||
console.log(sortcams[ii].camid);
|
||||
//var xx = document.getElementsByTagName("Figure");
|
||||
var x = document.getElementById(sortcams[ii].camid);
|
||||
x.style.order=ii
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var allcams = [];
|
||||
|
||||
|
||||
|
||||
|
||||
$.getJSON(camurl, function(data){
|
||||
console.log(data);
|
||||
allcams = data;
|
||||
for(var i in data){
|
||||
var div = document.createElement('div');
|
||||
var a = document.createElement('a');
|
||||
div.className = "image";
|
||||
div.id = data[i].camid;
|
||||
var img = document.createElement('img');
|
||||
img.src = 'camdata/' + data[i].lastimage;
|
||||
a.href = 'one.php?camid=' + data[i].camid + '&camimages=' + camimages;
|
||||
a.appendChild(img);
|
||||
div.appendChild(a);
|
||||
//div.appendChild(img);
|
||||
var span = document.createElement('span');
|
||||
span.className = 'label';
|
||||
span.innerHTML = data[i].description + ' / ' + data[i].county + ' ' + data[i].state + ' / ' + data[i].elevation + ' ft';
|
||||
div.appendChild(span);
|
||||
document.getElementById('container').appendChild(div);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function refreshcams() {
|
||||
|
||||
|
||||
$.getJSON(camurl, function(data){
|
||||
console.log(data);
|
||||
for(var i in data){
|
||||
|
||||
var updatefigure = document.getElementById(data[i].camid);
|
||||
if(updatefigure.hasChildNodes()) {
|
||||
var children = updatefigure.childNodes;
|
||||
for (var m = 0; m < children.length; m++) {
|
||||
children[m].href = 'one.php?camid=' + data[i].camid + '&camimages=' + camimages;
|
||||
if (children[m].nodeName == 'A') {
|
||||
children[m].firstElementChild.src = 'camdata/' + data[i].lastimage;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const main = $('html');
|
||||
|
||||
async function scrollTopQuick() {
|
||||
$(window).scrollTop(0);
|
||||
scrollDownVH();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function scrollBottom() {
|
||||
console.log('scrolling to bottom')
|
||||
main.animate({scrollTop: document.body.offsetHeight},25000,"linear",scrollTopQuick).delay(2000)
|
||||
}
|
||||
|
||||
// this kicks it off
|
||||
// again only running $(document).ready once to increase performance.
|
||||
// Once scrollTop completes, it calls scrollBottom, which in turn calls scrollTop and so on
|
||||
|
||||
|
||||
async function scrollDownVH() {
|
||||
await sleep(3000);
|
||||
vh = $(window).height()
|
||||
bodyh = document.body.offsetHeight
|
||||
console.log(bodyh, window.innerHeight + window.scrollY + vh,vh);
|
||||
currentx = main.scrollTop()
|
||||
if (bodyh > (window.innerHeight + window.scrollY + vh )) {
|
||||
main.animate({scrollTop: currentx + vh},8000,"linear",scrollDownVH)
|
||||
console.log('scrolling down');
|
||||
} else {
|
||||
main.animate({scrollTop: currentx + vh},8000,"linear",scrollTopQuick)
|
||||
console.log('scrolling down then up');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$(document).ready(scrollDownVH);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
window.setInterval(function(){
|
||||
refreshcams()
|
||||
}, 30000);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function googleMap(lat, lon){
|
||||
return "http://maps.google.com/maps?t=k&q=loc:" + lat + "+" + lon + "&basemap=satellite";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user