From da0725178228e4f87fb1e786f3c0d53139da8613 Mon Sep 17 00:00:00 2001 From: mpomery <bob_george33@hotmail.com> Date: Wed, 3 Dec 2014 19:20:00 +0800 Subject: [PATCH] Moving JS out of the archive page --- www/archive.html | 382 ++--------------------------------------------- www/archive.js | 333 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 347 insertions(+), 368 deletions(-) create mode 100644 www/archive.js diff --git a/www/archive.html b/www/archive.html index 8558d42..77d54d8 100644 --- a/www/archive.html +++ b/www/archive.html @@ -6,367 +6,14 @@ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>UCC Webcams @ Loading...</title> - <noscript> - <meta http-equiv="refresh" content="0;URL=http://www.ucc.asn.au/cgi-bin/webcam.py"> - </noscript> <link rel="stylesheet" href="http://planet.ucc.asn.au/planet.css" type="text/css" media="screen" /> - <link rel="stylesheet" href="http://webcam.ucc.asn.au/webcam-overrides.css" type="text/css" media="screen" /> - <link rel="icon" type="image/png" href="http://planet.ucc.asn.au/icon.png" /> - <link rel="SHORTCUT ICON" type="image/png" href="http://planet.ucc.asn.au/icon.png" /> - <script type="text/javascript"> -var d; -var months = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); -var days = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); - -function windowOnload() -{ - // set the initial date from the server - // get an XML HTTP Request object - var req = false; - try - { - req = new XMLHttpRequest (); - } - catch (e) - { - try - { - req = new ActiveXObject ("Microsoft.XMLHTTP"); - } - catch (e) - { - } - } - - if (req) - { - req.onreadystatechange = function () - { - if (req.readyState == 4) - { - d = new Date (Date.parse (req.getResponseHeader ("Date"))); - - if (location.hash.length > 0) - { - d.setTime (location.hash.substring(1, location.hash.length)); - } - else - { - d.setMinutes(d.getMinutes() - 1); - } - setupPage(); - setDate(); - } - - }; - - var timestamp = new Date (); - req.open ("HEAD", "index.html?" + timestamp.getTime (), true); - req.send (""); - } -} - -function setDateNow() -{ - // get a new date from the server - // get an XML HTTP Request object - var req = false; - try - { - req = new XMLHttpRequest (); - } - catch (e) - { - try - { - req = new ActiveXObject ("Microsoft.XMLHTTP"); - } - catch (e) - { - } - } - - if (req) - { - req.onreadystatechange = function () - { - if (req.readyState == 4) - { - d = new Date (Date.parse (req.getResponseHeader ("Date"))); - - d.setMinutes(d.getMinutes() - 1); - setDate(); - alignSelects(); - } - - }; - - var timestamp = new Date (); - req.open ("HEAD", "index.html?" + timestamp.getTime (), true); - req.send (""); - } -} - -function setupPage() -{ - var form; - var i; - - document.getElementById("nav-dayname").firstChild.data = days[d.getDay()]; - form = document.getElementById("nav-day"); - for (i = 0; i < 31; i++) - { - form[i] = new Option(i+1,i+1,(d.getDate() == i+1)); - } - form = document.getElementById("nav-month"); - for (i = 0; i < 12; i++) - { - form[i] = new Option(months[i],i,(d.getMonth() == i)); - } - form = document.getElementById("nav-year"); - for (i = 2003; i < d.getFullYear() + 1; i++) - { - form[i-2003] = new Option(i,i,(d.getFullYear() == i)); - } - form = document.getElementById("nav-hour"); - for (i = 0; i < 24; i++) - { - form[i] = new Option(zPad(i.toString()),i,(d.getHours() == i)); - } - form = document.getElementById("nav-minute"); - for (i = 0; i < 60; i++) - { - form[i] = new Option(zPad(i.toString()),i,(d.getMinutes() == i)); - } -} - -function alignSelects() -{ - var form; - var i; - - form = document.getElementById("nav-day"); - for (i = 0; i < 31; i++) - { - if (d.getDate() == i+1) - { - form[i].selected = true; - } - else - { - form[i].selected = false; - } - } - form = document.getElementById("nav-month"); - for (i = 0; i < 12; i++) - { - if (d.getMonth() == i) - { - form[i].selected = true; - } - else - { - form[i].selected = false; - } - } - form = document.getElementById("nav-year"); - for (i = 2003; i < d.getFullYear() + 1; i++) - { - if (d.getFullYear() == i) - { - form[i-2003].selected = true; - } - else - { - form[i-2003].selected = false; - } - } - form = document.getElementById("nav-hour"); - for (i = 0; i < 24; i++) - { - if (d.getHours() == i) - { - form[i].selected = true; - } - else - { - form[i].selected = false; - } - } - form = document.getElementById("nav-minute"); - for (i = 0; i < 60; i++) - { - if (d.getMinutes() == i) - { - form[i].selected = true; - } - else - { - form[i].selected = false; - } - } -} - -function navDate() -{ - d.setDate(document.getElementById("nav-day").value); - d.setMonth(document.getElementById("nav-month").value); - d.setFullYear(document.getElementById("nav-year").value); - d.setHours(document.getElementById("nav-hour").value); - d.setMinutes(document.getElementById("nav-minute").value); - - setDate(); -} - -function zPad(str) -{ - if (str.length == 1) - { - str = "0" + str; - } - return str; -} - -function setAlt (img, text) -{ - var lines = img.alt.split ("\n"); - if (lines.length > 0) - { - img.alt = lines[0] + "\n" + text; - } - else - { - img.alt += "\n" + text; - } -} - -function updateWebcam (webcamid, webcamurl) -{ - var img = document.getElementById (webcamid); - - // get an XML HTTP Request object - var req = false; - try - { - req = new XMLHttpRequest (); - } - catch (e) - { - try - { - req = new ActiveXObject ("Microsoft.XMLHTTP"); - } - catch (e) - { - } - } - - if (req) - { - req.onreadystatechange = function () - { - if (req.readyState == 4) - { - if (req.status == 200 || req.status == 304) - { - //img.parentNode.style.backgroundColor = "transparent"; - img.style.display = 'inline'; - //setAlt (img, ""); - } - else - { - img.style.display = 'none'; - //img.parentNode.style.backgroundColor = "darkred"; - //setAlt (img, "(status " + req.status + ")"); - } - } - - }; - - req.open ("HEAD", webcamurl, true); - req.send (""); - } - - // set the image - img.setAttribute ("src",webcamurl); -} - - -function setDate() -{ - window.location.hash = d.getTime(); - //document.getElementById("timeremaining").firstChild.data = "loading..."; - - var timeString = days[d.getDay()]+" "+d.getDate()+" "+months[d.getMonth()]+" "+d.getFullYear()+", "+zPad(d.getHours().toString())+":"+zPad(d.getMinutes().toString()); - document.title = "UCC Webcams @ "+timeString; - document.getElementById("header").firstChild.data = "UCC Webcams @ "+timeString; - document.getElementById("timeindex").firstChild.data = d.getTime(); - document.getElementById("timeindex").href = "#"+d.getTime(); - - document.getElementById("nav-dayname").firstChild.data = days[d.getDay()]; - - var image = d.getFullYear()+zPad((d.getMonth()+1).toString())+"/"+zPad(d.getDate().toString())+"/"+zPad(d.getHours().toString())+"/"+zPad(d.getMinutes().toString())+".jpg"; - updateWebcam ("webcam1", "/archive/colour/" + image); - //updateWebcam ("webcam1-datetime", "/archive/colour/" + image); - updateWebcam ("webcam2", "/archive/colour1/" + image); - updateWebcam ("webcam3", "/archive/colour3/" + image); - updateWebcam ("webcam4", "/archive/bw/" + image); - updateWebcam ("uvc1", "/archive/uvc1/" + image); - updateWebcam ("ipcamera1", "/archive/ipcamera1/" + image); - updateWebcam ("ipcamera2", "/archive/ipcamera2/" + image); - updateWebcam ("ipcamera3", "/archive/ipcamera3/" + image); - updateWebcam ("ipcamera4", "/archive/ipcamera4/" + image); - updateWebcam ("ipcamera5", "/archive/ipcamera5/" + image); - updateWebcam ("ipcamera6", "/archive/ipcamera6/" + image); - //setTimeout("clearText()",1000); -} - -function setMinutes(mins) -{ - d.setMinutes(d.getMinutes() + mins); - setDate(); - alignSelects(); -} - -function setHours(hours) -{ - d.setHours(d.getHours() + hours); - setDate(); - alignSelects(); -} - -function setDays(days) -{ - d.setDate(d.getDate() + days); - setDate(); - alignSelects(); -} - -function clearText() -{ - document.getElementById("timeremaining").firstChild.data = ""; -} - </script> -<style> -.camera { - margin: 4px; - /*padding: 20px;*/ - margin-left: auto; - margin-right: auto; - display: inline-block; - font-size: 0; -} -.header { - background: none; -} -</style> + <link rel="stylesheet" href="webcam-overrides.css" type="text/css" media="screen" /> + <script type="text/javascript" src="archive.js"></script> </head> <body onload="windowOnload()"> <div class="header"> <img alt="Planet UCC" id="pucc_logo" src="//www.ucc.asn.au/images/ucc_logo.gif" /> -<!--<img src="http://planet.ucc.asn.au/cam_collage.jpg" alt="UCC Webcam Collage" id="pucc_banner1" /> -<img src="http://planet.ucc.asn.au/cam_collage.gif" alt="UCC Webcam Collage" id="pucc_banner2" />--> <div id="globalnav-wrapper"> <ul id="portal-globalnav"> @@ -402,20 +49,19 @@ function clearText() <div class="navMenu"> <a href="index.html">Live</a> <a href="http://webcam.ucc.asn.au/clubroom-schematic.png">Map</a> - <a href="index-nojs.php" title="Non-Javascript Webcam Page">Web0 Version</a> </div> <div class=camSection> - <div class="camera"><img id="webcam4" alt="BW Webcam" /></div> - <div class="camera"><img id="webcam3" alt="Webcam 3" /></div> - <div class="camera"><img id="webcam2" alt="Webcam 1" /></div> - <div class="camera"><img id="uvc1" alt="UVC 1" /></div> - <div class="camera"><img id="webcam1" alt="Webcam 2" /></div> - <div class="camera"><img id="ipcamera1" alt="IPCamera1" /></div> - <div class="camera"><img id="ipcamera2" alt="IPCamera2" /></div> - <div class="camera"><img id="ipcamera3" alt="IPCamera3" /></div> - <div class="camera"><img id="ipcamera4" alt="IPCamera4" /></div> - <div class="camera"><img id="ipcamera5" alt="IPCamera5" /></div> - <div class="camera"><img id="ipcamera6" alt="IPCamera6" /></div> + <div class="camera" id="webcam4"><img alt="BW Webcam" /></div> + <div class="camera" id="webcam3"><img alt="Webcam 3" /></div> + <div class="camera" id="webcam2"><img alt="Webcam 1" /></div> + <div class="camera" id="uvc1"><img alt="UVC 1" /></div> + <div class="camera" id="webcam1"><img alt="Webcam 2" /></div> + <div class="camera" id="ipcamera1"><img alt="IPCamera1" /></div> + <div class="camera" id="ipcamera2"><img alt="IPCamera2" /></div> + <div class="camera" id="ipcamera3"><img alt="IPCamera3" /></div> + <div class="camera" id="ipcamera4"><img alt="IPCamera4" /></div> + <div class="camera" id="ipcamera5"><img alt="IPCamera5" /></div> + <div class="camera" id="ipcamera6"><img alt="IPCamera6" /></div> </div> <div class="nav"> <table width="100%"> @@ -485,7 +131,7 @@ days </form></div> </div> <div class="footer"> - <p>Copyright 1993-2011, The University Computer Club Inc. + <p>Copyright 1993-2014, The University Computer Club Inc. <<a href="mailto:webmasters@ucc">webmasters@ucc</a>><br /> Written to be <a href="http://www.w3c.org/">specifications compliant</a>. </p> diff --git a/www/archive.js b/www/archive.js new file mode 100644 index 0000000..f78181d --- /dev/null +++ b/www/archive.js @@ -0,0 +1,333 @@ +var d; +var months = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); +var days = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); + +function windowOnload() +{ + // set the initial date from the server + // get an XML HTTP Request object + var req = false; + try + { + req = new XMLHttpRequest (); + } + catch (e) + { + try + { + req = new ActiveXObject ("Microsoft.XMLHTTP"); + } + catch (e) + { + } + } + + if (req) + { + req.onreadystatechange = function () + { + if (req.readyState == 4) + { + d = new Date (Date.parse (req.getResponseHeader ("Date"))); + + if (location.hash.length > 0) + { + d.setTime (location.hash.substring(1, location.hash.length)); + } + else + { + d.setMinutes(d.getMinutes() - 1); + } + setupPage(); + setDate(); + } + + }; + + var timestamp = new Date (); + req.open ("HEAD", "index.html?" + timestamp.getTime (), true); + req.send (""); + } +} + +function setDateNow() +{ + // get a new date from the server + // get an XML HTTP Request object + var req = false; + try + { + req = new XMLHttpRequest (); + } + catch (e) + { + try + { + req = new ActiveXObject ("Microsoft.XMLHTTP"); + } + catch (e) + { + } + } + + if (req) + { + req.onreadystatechange = function () + { + if (req.readyState == 4) + { + d = new Date (Date.parse (req.getResponseHeader ("Date"))); + + d.setMinutes(d.getMinutes() - 1); + setDate(); + alignSelects(); + } + + }; + + var timestamp = new Date (); + req.open ("HEAD", "index.html?" + timestamp.getTime (), true); + req.send (""); + } +} + +function setupPage() +{ + var form; + var i; + + document.getElementById("nav-dayname").firstChild.data = days[d.getDay()]; + form = document.getElementById("nav-day"); + for (i = 0; i < 31; i++) + { + form[i] = new Option(i+1,i+1,(d.getDate() == i+1)); + } + form = document.getElementById("nav-month"); + for (i = 0; i < 12; i++) + { + form[i] = new Option(months[i],i,(d.getMonth() == i)); + } + form = document.getElementById("nav-year"); + for (i = 2003; i < d.getFullYear() + 1; i++) + { + form[i-2003] = new Option(i,i,(d.getFullYear() == i)); + } + form = document.getElementById("nav-hour"); + for (i = 0; i < 24; i++) + { + form[i] = new Option(zPad(i.toString()),i,(d.getHours() == i)); + } + form = document.getElementById("nav-minute"); + for (i = 0; i < 60; i++) + { + form[i] = new Option(zPad(i.toString()),i,(d.getMinutes() == i)); + } +} + +function alignSelects() +{ + var form; + var i; + + form = document.getElementById("nav-day"); + for (i = 0; i < 31; i++) + { + if (d.getDate() == i+1) + { + form[i].selected = true; + } + else + { + form[i].selected = false; + } + } + form = document.getElementById("nav-month"); + for (i = 0; i < 12; i++) + { + if (d.getMonth() == i) + { + form[i].selected = true; + } + else + { + form[i].selected = false; + } + } + form = document.getElementById("nav-year"); + for (i = 2003; i < d.getFullYear() + 1; i++) + { + if (d.getFullYear() == i) + { + form[i-2003].selected = true; + } + else + { + form[i-2003].selected = false; + } + } + form = document.getElementById("nav-hour"); + for (i = 0; i < 24; i++) + { + if (d.getHours() == i) + { + form[i].selected = true; + } + else + { + form[i].selected = false; + } + } + form = document.getElementById("nav-minute"); + for (i = 0; i < 60; i++) + { + if (d.getMinutes() == i) + { + form[i].selected = true; + } + else + { + form[i].selected = false; + } + } +} + +function navDate() +{ + d.setDate(document.getElementById("nav-day").value); + d.setMonth(document.getElementById("nav-month").value); + d.setFullYear(document.getElementById("nav-year").value); + d.setHours(document.getElementById("nav-hour").value); + d.setMinutes(document.getElementById("nav-minute").value); + + setDate(); +} + +function zPad(str) +{ + if (str.length == 1) + { + str = "0" + str; + } + return str; +} + +function setAlt (img, text) +{ + var lines = img.alt.split ("\n"); + if (lines.length > 0) + { + img.alt = lines[0] + "\n" + text; + } + else + { + img.alt += "\n" + text; + } +} + +function updateWebcam (webcamid, webcamurl) +{ + var div = document.getElementById (webcamid); + var img = div.getElementsByTagName('img')[0]; + + // get an XML HTTP Request object + var req = false; + try + { + req = new XMLHttpRequest (); + } + catch (e) + { + try + { + req = new ActiveXObject ("Microsoft.XMLHTTP"); + } + catch (e) + { + } + } + + if (req) + { + req.onreadystatechange = function () + { + if (req.readyState == 4) + { + if (req.status == 200 || req.status == 304) + { + //img.parentNode.style.backgroundColor = "transparent"; + div.style.display = 'inline'; + //setAlt (img, ""); + } + else + { + div.style.display = 'none'; + //img.parentNode.style.backgroundColor = "darkred"; + //setAlt (img, "(status " + req.status + ")"); + } + } + + }; + + req.open ("HEAD", webcamurl, true); + req.send (""); + } + + // set the image + img.setAttribute ("src",webcamurl); +} + + +function setDate() +{ + window.location.hash = d.getTime(); + //document.getElementById("timeremaining").firstChild.data = "loading..."; + + var timeString = days[d.getDay()]+" "+d.getDate()+" "+months[d.getMonth()]+" "+d.getFullYear()+", "+zPad(d.getHours().toString())+":"+zPad(d.getMinutes().toString()); + document.title = "UCC Webcams @ "+timeString; + document.getElementById("header").firstChild.data = "UCC Webcams @ "+timeString; + document.getElementById("timeindex").firstChild.data = d.getTime(); + document.getElementById("timeindex").href = "#"+d.getTime(); + + document.getElementById("nav-dayname").firstChild.data = days[d.getDay()]; + + var image = d.getFullYear()+zPad((d.getMonth()+1).toString())+"/"+zPad(d.getDate().toString())+"/"+zPad(d.getHours().toString())+"/"+zPad(d.getMinutes().toString())+".jpg"; + updateWebcam ("webcam1", "/archive/colour/" + image); + //updateWebcam ("webcam1-datetime", "/archive/colour/" + image); + updateWebcam ("webcam2", "/archive/colour1/" + image); + updateWebcam ("webcam3", "/archive/colour3/" + image); + updateWebcam ("webcam4", "/archive/bw/" + image); + updateWebcam ("uvc1", "/archive/uvc1/" + image); + updateWebcam ("ipcamera1", "/archive/ipcamera1/" + image); + updateWebcam ("ipcamera2", "/archive/ipcamera2/" + image); + updateWebcam ("ipcamera3", "/archive/ipcamera3/" + image); + updateWebcam ("ipcamera4", "/archive/ipcamera4/" + image); + updateWebcam ("ipcamera5", "/archive/ipcamera5/" + image); + updateWebcam ("ipcamera6", "/archive/ipcamera6/" + image); + //setTimeout("clearText()",1000); +} + +function setMinutes(mins) +{ + d.setMinutes(d.getMinutes() + mins); + setDate(); + alignSelects(); +} + +function setHours(hours) +{ + d.setHours(d.getHours() + hours); + setDate(); + alignSelects(); +} + +function setDays(days) +{ + d.setDate(d.getDate() + days); + setDate(); + alignSelects(); +} + +function clearText() +{ + document.getElementById("timeremaining").firstChild.data = ""; +} \ No newline at end of file -- GitLab