ericfawcett
/
route-eight
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Compare commits

base: ericfawcett:e158c5ffcc2f940ab52c54dcc882a2a7dc51fc9f
Branches Tags
ericfawcett:master
...
compare: ericfawcett:f1994c095d8b4c5f356d5b95bd4591585f2f56e5
Branches Tags
ericfawcett:master

7 Commits
e158c5ffcc ... f1994c095d

Author SHA1 Message Date
Eric Fawcett f1994c095d default config 2021-10-18 02:53:23 +00:00
Eric Fawcett 16e6b40277 fix json output 2021-10-18 02:52:46 +00:00
Eric Fawcett 1ef76b1945 break out configuration 2021-10-18 02:33:42 +00:00
Eric Fawcett e9de6b7f9c set up for PHP 2021-10-17 20:29:53 +00:00
Eric Fawcett b1934fa6ac break out js 2021-10-17 20:28:48 +00:00
Eric Fawcett 12ac382495 break out css 2021-10-17 20:17:48 +00:00
Eric Fawcett f711277bec clean up code 2021-10-17 20:13:16 +00:00
5 changed files with 137 additions and 134 deletions
Show Stats Expand all files Collapse all files

14
config.php Normal file
View File

@ -0,0 +1,14 @@
<?php
$config = [
'page_title' => 'Route 8 - Stow' //html page title
];
$camList = [ //list of cam titles and urls - currently must be 6
['Hudson Dr', 'https://itscameras.dot.state.oh.us/images/CLE/CLE034.jpg'],
['Graham Rd', 'https://itscameras.dot.state.oh.us/images/CLE/CLE036a-L.jpg'],
['Hampshire Rd', 'https://itscameras.dot.state.oh.us/images/CLE/CLE040-L.jpg'],
['Steels Corners', 'https://itscameras.dot.state.oh.us/images/CLE/CLE038-L.jpg'],
['Barlow Rd', 'https://itscameras.dot.state.oh.us/images/CLE/CLE044-L.jpg'],
['SR 303', 'https://itscameras.dot.state.oh.us/images/CLE/CLE013-L.jpg']
];
?>

134
index.html
View File

@ -1,134 +0,0 @@
<!----------------------------------------------------------------
#title: Stow Route Eight Cameras
#descr: A dynamic display of cameras along OH-8 in Stow
#author: Eric Fawcett
#email: eric@ericfawcett.com
----------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Route 8 Cameras</title>
<style type="text/css">
body {
margin: auto;
background-color: #444444;
align-content: center;
}
.grid-item img {
display: inline-block;
width: 100%;
}
.title-wrapper{
text-align: center;
background-color: #000000;
}
.item-title {
color: #ffffff;
font-size: 1.5em;
text-transform: uppercase;
}
.grid-container { /* Default to single column for small screens */
margin: auto;
display: grid;
grid-template-columns: 100%;
grid-gap: 0.2em 0.2em;
}
@media only screen and (min-width: 40em){ /* screens >640px wide*/
.grid-container {
grid-template-columns: 49% 49%;
}
}
@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
.grid-container {
grid-template-columns: 33% 33% 33%;
}
.item-title {
font-size: 1.7em;
}
}
@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
.item-title {
font-size: 2.2em;
}
}
</style>
<script>
$(document).ready(function(){
var camList = [];
camList[1] = ["CLE/CLE034", "Hudson Dr"];
camList[2] = ["CLE/CLE036a-L", "Graham Rd"];
camList[3] = ["CLE/CLE040-L", "Hampshire Rd"];
camList[4] = ["CLE/CLE038-L", "Steels Corners"];
camList[5] = ["CLE/CLE044-L", "Barlow Rd"];
camList[6] = ["CLE/CLE013-L", "SR 303"];
camList.forEach(loadTitle); //set titles
setIMG(camList); //load initial images
setInterval(setIMG, 6000, camList); //set timer to continuously reload images.
setInterval(reloadPage, 3600000); //set timer to reload page.
});
function loadTitle(camDat, camNum){
$("#title" + camNum).text(camDat[1]);
}
function setIMG(camList){
camList.forEach(loadIMG);
}
function loadIMG(camDat, camNum){
datestr = Date.now();
camURL = "https://itscameras.dot.state.oh.us/images/" + camDat[0] + ".jpg?date=" + datestr;
$("#cam" + camNum).attr("src", camURL);
}
function reloadPage(){
window.location = window.location.href;
}
</script>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title1"></span></div>
<img src="" id="cam1">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title2"></span></div>
<img src="" id="cam2">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title3"></span></div>
<img src="" id="cam3">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title4"></span></div>
<img src="" id="cam4">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title5"></span></div>
<img src="" id="cam5">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title6"></span></div>
<img src="" id="cam6">
</div>
</div>
</body>
</html>

44
index.php Normal file
View File

@ -0,0 +1,44 @@
<?php
require("config.php");
?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<title><?=$config['page_title']?></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script>
var camList = <?=json_encode($camList, JSON_UNESCAPED_SLASHES);?>;
</script>
<script src="script.js"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title1"></span></div>
<img src="" id="cam1">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title2"></span></div>
<img src="" id="cam2">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title3"></span></div>
<img src="" id="cam3">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title4"></span></div>
<img src="" id="cam4">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title5"></span></div>
<img src="" id="cam5">
</div>
<div class="grid-item">
<div class="title-wrapper"><span class="item-title" id="title6"></span></div>
<img src="" id="cam6">
</div>
</div>
</body>
</html>

37
script.js Normal file
View File

@ -0,0 +1,37 @@
$(document).ready(function(){
camList.forEach(loadTitle); //set titles
setIMG(camList); //load initial images
setInterval(setIMG, 6000, camList); //set timer to continuously reload images.
setInterval(reloadPage, 3600000); //set timer to reload page.
});
function loadTitle(camDat, camNum){
$("#title" + (camNum+1)).text(camDat[0]);
}
function setIMG(camList){
camList.forEach(loadIMG);
}
function loadIMG(camDat, camNum){
datestr = Date.now();
camURL = camDat[1] + "?date=" + datestr;
$("#cam" + (camNum+1)).attr("src", camURL);
}
function reloadPage(){
window.location = window.location.href;
}

42
style.css Normal file
View File

@ -0,0 +1,42 @@
body {
margin: auto;
background-color: #444444;
align-content: center;
}
.grid-item img {
display: inline-block;
width: 100%;
}
.title-wrapper{
text-align: center;
background-color: #000000;
}
.item-title {
color: #ffffff;
font-size: 1.5em;
text-transform: uppercase;
}
.grid-container { /* Default to single column for small screens */
margin: auto;
display: grid;
grid-template-columns: 100%;
grid-gap: 0.2em 0.2em;
}
@media only screen and (min-width: 40em){ /* screens >640px wide*/
.grid-container {
grid-template-columns: 49% 49%;
}
}
@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
.grid-container {
grid-template-columns: 33% 33% 33%;
}
.item-title {
font-size: 1.7em;
}
}
@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
.item-title {
font-size: 2.2em;
}
}