Commit b04dab4
Changed files (17)
static
js
static/css/main.css
@@ -5,10 +5,12 @@ html {
}
body {
- padding: 45px 0;
font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
+.container.is-fluid {
+ margin-top: 5px;
+}
.video-js {
width: 100%;
}
@@ -29,3 +31,13 @@ body {
color: #FFFFFF;
text-shadow: 2px 2px #000000;
}
+
+#map {
+ height: 100%
+}
+
+figure>img {
+ border-radius: 5px;
+ box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);
+ background: #fff;
+}
static/css/unslider.css
@@ -1,1 +1,45 @@
-.unslider{overflow:auto;margin:0;padding:0}.unslider-wrap{position:relative}.unslider-wrap.unslider-carousel>li{float:left}.unslider-vertical>ul{height:100%}.unslider-vertical li{float:none;width:100%}.unslider-fade{position:relative}.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}.unslider-fade .unslider-wrap li.unslider-active{z-index:10}.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}.unslider-arrow.next{left:auto;right:20px}
\ No newline at end of file
+.unslider{
+ overflow:auto;
+ margin:0;padding:0
+}
+.unslider-wrap{
+ position:relative
+}
+.unslider-wrap.unslider-carousel>li{
+ float:left
+}
+.unslider-vertical>ul{
+ height:100%
+}
+.unslider-vertical li{
+ float:none;
+ width:100%
+}
+.unslider-fade{
+ position:relative
+}
+.unslider-fade .unslider-wrap li:not(.weatherli){
+ position:absolute;
+ left:0;
+ top:0;
+ right:0;
+ z-index:8
+}
+.unslider-fade .unslider-wrap li.unslider-active{
+ z-index:10
+}
+.unslider li,.unslider ol,.unslider ul{
+ list-style:none;
+ margin:0;
+ padding:0;
+ border:none}
+.unslider-arrow{
+ position:absolute;
+ left:20px;
+ z-index:2;
+ cursor:pointer
+}
+.unslider-arrow.next{
+ left:auto;
+ right:20px
+}
static/css/weather.css
@@ -30,7 +30,15 @@
justify-content: center;
align-items: center;
text-transform: uppercase;
- background: #1192d3 url(../img/lab.jpg) no-repeat bottom right;
+}
+
+#weather.lts {
+ background: #1192d3 url(../img/lts.jpg) no-repeat bottom right;
+ background-size: cover;
+}
+
+#weather.e3 {
+ background: #1192d3 url(../img/e3.jpg) no-repeat bottom right;
background-size: cover;
}
static/css/webticker.css
@@ -1,5 +1,6 @@
.webtickers {
+ padding-bottom: 10px;
}
.ticker-title {
static/img/e3.jpg
Binary file
static/img/lab.jpg → static/img/lts.jpg
File renamed without changes
static/js/webmon.js
@@ -0,0 +1,103 @@
+$(document).ready( function() {
+ $('#webticker1').webTicker({
+ speed: 40,
+ startEmpty:false,
+ rssurl: "rss1",
+ rssfrequency: 5,
+ });
+ $('#webticker2').webTicker({
+ speed: 40,
+ startEmpty:false,
+ rssurl: "rss2",
+ rssfrequency: 5,
+ });
+ $('#webticker3').webTicker({
+ speed: 40,
+ startEmpty:false,
+ rssurl: "rss3",
+ rssfrequency: 5,
+ });
+ $('.slider').unslider({
+ autoplay: true,
+ nav: false,
+ arrows: false,
+ animation: 'fade',
+ selectors: {
+ container: 'ul',
+ slides: 'figure'
+ },
+ });
+ $('.slider-content').unslider({
+ autoplay: true,
+ nav: false,
+ arrows: false,
+ animation: 'fade',
+ delay: 10000,
+ selectors: {
+ container: 'article',
+ slides: 'li'
+ },
+ });
+ $('.unslider').addClass('tile'); // unslider tile fix
+ getWeather()
+ displayTime()
+ initMap()
+ setInterval(displayTime, 1000); //update time every second
+ setInterval(getWeather, 60000); //update weather every 60s
+ setInterval(reloadPage, 1800000); //reload page every 30m
+});
+
+function displayTime() {
+ var today = moment().format('MMMM Do YYYY');
+ var time = moment().format('HH:mm:ss');
+ var dow = moment().format('dddd');
+ $('#date').html(today);
+ $('#time').html(time);
+ $('#dow').html(dow);
+}
+
+function getWeather() {
+ console.log('updating weather info');
+ $.simpleWeather({
+ location: $("#weather").attr("location"),
+ woeid: '',
+ unit: 'f',
+ success: function(weather) {
+ html = '<div class="weather-content"><h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'°'+weather.units.temp+'</h2>';
+ html += '<ul><li class="weatherli">'+weather.city+', '+weather.region+'</li>';
+ html += '<li class="weatherli currently">'+weather.currently+'</li>';
+ html += '<li class="weatherli">'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul></div>';
+ $("#weather").html(html);
+ },
+ error: function(error) {
+ $("#weather").html('<p>'+error+'</p>');
+ }
+ });
+}
+
+function reloadPage() {
+ window.location.reload(true);
+}
+
+function initMap() {
+ var lat = parseFloat($("#map").attr("lat"));
+ var lng = parseFloat($("#map").attr("lng"));
+ console.log(lat,lng)
+ var map = new google.maps.Map(document.getElementById('map'), {
+ zoom: 10,
+ center: {lat: lat, lng: lng},
+ disableDefaultUI: true,
+ panControl: false,
+ zoomControl: false,
+ scaleControl: false,
+ streetViewControl: false,
+ mapTypeControlOptions: {
+ mapTypeIds: [google.maps.MapTypeId.ROADMAP]
+ },
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
+ });
+
+ var trafficLayer = new google.maps.TrafficLayer();
+ trafficLayer.setMap(map);
+}
+
static/slides/right/1.jpg → static/slides/bot/1.jpg
File renamed without changes
static/slides/right/2.jpg → static/slides/bot/2.jpg
File renamed without changes
static/slides/bot/3.jpg
Binary file
static/slides/right/3.jpg
Binary file
static/slides/left/1.jpg → static/slides/top/1.jpg
File renamed without changes
static/slides/left/2.jpg → static/slides/top/2.jpg
File renamed without changes
static/slides/left/3.jpg → static/slides/top/3.jpg
File renamed without changes
static/e3.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Welcome to E3</title>
+
+ <link href="css/bulma.css" rel="stylesheet">
+ <link href="css/video-js.css" rel="stylesheet">
+ <link href="css/webticker.css" rel="stylesheet">
+ <link href="css/weather.css" rel="stylesheet">
+ <link href="css/main.css" rel="stylesheet">
+ <link href="css/unslider.css" rel="stylesheet">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+ <script src="js/video.js"></script>
+ <script>
+ videojs.options.flash.swf = "js/video-js.swf";
+ </script>
+</head>
+<body>
+ <div class="container is-fluid">
+ <div class="tile is-ancestor">
+ <div class="tile is-9">
+ <div class="tile is-vertical">
+ <div class="tile is-parent slider">
+ <ul class="tile is-child image is-16by9">
+ <figure><img src="slides/top/1.jpg"></figure>
+ <figure><img src="slides/top/2.jpg"></figure>
+ <figure><img src="slides/top/3.jpg"></figure>
+ </ul>
+ </div>
+ <div class="tile is-parent slider">
+ <ul class="tile is-child image is-16by9" >
+ <figure><img src="slides/bot/1.jpg"></figure>
+ <figure><img src="slides/bot/2.jpg"></figure>
+ <figure><img src="slides/bot/3.jpg"></figure>
+ </ul>
+ </div>
+ </div>
+ <div class="tile is-vertical" >
+ <div class="tile">
+ <article class="tile is-parent flex-center is-16by9" >
+ <div id="welcome" class="is-child box">
+ <div >
+ <p class="title is-1 has-text-centered">Welcome to E3!</p>
+ <p id="time" class="title is-2 has-text-centered"></p>
+ <p id="dow" class="title is-3 has-text-centered"></p>
+ <p id="date" class="title is-3 has-text-centered"></p>
+ </div>
+ </div>
+ </article>
+ </div>
+ <div class="tile is-parent slider-content">
+ <article class="tile is-child box is-16by9 ">
+ <li id="weather" class="box e3" location="Laurel, MD"></li>
+ <li id="map" class="box" lat="39.128672" lng="-76.857151"></li>
+ </article>
+ </div>
+ </div>
+ </div>
+ <div class="tile is-parent is-vertical is-3">
+ <div class="tile is-child box">
+ <video id="trafic_cam_1" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.139:1935/rtplive/8eff12b900a400ff0047e33696235daa/playlist.m3u8" type='video/mp4' />
+ </video>
+ <video id="trafic_cam_2" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.139:1935/rtplive/f201605800f700d700437a45351f0214/playlist.m3u8" type='video/mp4' />
+ </video>
+ <video id="trafic_cam_3" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.138:1935/rtplive/53000a2a002d00cf004ae33696235daa/playlist.m3u8" type='video/mp4' />
+ </video>
+ <video id="trafic_cam_4" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.139:1935/rtplive/63ff12a0008d00030048e33696235daa/playlist.m3u8" type='video/mp4' />
+ </div>
+ </div> <!-- /end videos/ -->
+ </div> <!-- /end tile 'row'/ -->
+ <div class="tile is-ancestor">
+ <div class="tile is-parent is-12">
+ <div class="tile is-child box webtickers">
+ <div class="ticker-title">CNN:</div><ul id="webticker1"></ul>
+ <div class="ticker-title">Al Jazeera:</div><ul id="webticker2"></ul>
+ <div class="ticker-title">ESPN:</div><ul id="webticker3"></ul>
+ </div >
+ </div>
+ </div> <!-- /end tile 'row'/ -->
+ </div> <!-- /end container/ -->
+
+ <script type="text/javascript" src="js/hls_streams.js"></script>
+ <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
+ <script type="text/javascript" src="js/jquery.webticker.js"></script>
+ <script type="text/javascript" src="js/jquery.simpleweather.js"></script>
+ <script type="text/javascript" src="js/moment.min.js"></script>
+ <script type="text/javascript" src="js/unslider-min.js"></script>
+ <script async defer
+ src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDccSZlyIPb6kuoxraIlKNRAhmKM8KZAog">
+ </script>
+ <script type="text/javascript" src="js/webmon.js"></script>
+</body>
+</html>
static/index.html
@@ -3,11 +3,11 @@
<head>
<title>Welcome to the LTS</title>
+ <link href="css/bulma.css" rel="stylesheet">
<link href="css/video-js.css" rel="stylesheet">
<link href="css/webticker.css" rel="stylesheet">
<link href="css/weather.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
- <link href="css/bulma.css" rel="stylesheet">
<link href="css/unslider.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/video.js"></script>
@@ -20,38 +20,39 @@
<div class="tile is-ancestor">
<div class="tile is-9">
<div class="tile is-vertical">
- <div class="tile is-parent">
- <article class="tile is-child box flex-center">
- <div id="welcome">
- <div >
- <p class="title is-1 has-text-centered">Welcome to the LTS!</p>
- <p id="time" class="title is-2 has-text-centered"></p>
- <p id="dow" class="title is-3 has-text-centered"></p>
- <p id="date" class="title is-3 has-text-centered"></p>
- </div>
- </div>
- </article>
- </div>
<div class="tile is-parent slider">
<ul class="tile is-child image is-16by9">
- <figure><img class="box" src="slides/left/1.jpg"></figure>
- <figure><img class="box" src="slides/left/2.jpg"></figure>
- <figure><img class="box" src="slides/left/3.jpg"></figure>
+ <figure><img src="slides/top/1.jpg"></figure>
+ <figure><img src="slides/top/2.jpg"></figure>
+ <figure><img src="slides/top/3.jpg"></figure>
+ </ul>
+ </div>
+ <div class="tile is-parent slider">
+ <ul class="tile is-child image is-16by9" >
+ <figure><img src="slides/bot/1.jpg"></figure>
+ <figure><img src="slides/bot/2.jpg"></figure>
+ <figure><img src="slides/bot/3.jpg"></figure>
</ul>
</div>
</div>
<div class="tile is-vertical" >
- <div class="tile is-parent">
- <article class="tile is-child box is-16by9">
- <div id="weather" class=""></div>
+ <div class="tile">
+ <article class="tile is-parent flex-center is-16by9" >
+ <div id="welcome" class="is-child box">
+ <div >
+ <p class="title is-1 has-text-centered">Welcome to the LTS!</p>
+ <p id="time" class="title is-2 has-text-centered"></p>
+ <p id="dow" class="title is-3 has-text-centered"></p>
+ <p id="date" class="title is-3 has-text-centered"></p>
+ </div>
+ </div>
</article>
</div>
- <div class="tile is-parent slider">
- <ul class="tile is-child image is-16by9">
- <figure><img class="box" src="slides/right/1.jpg"></figure>
- <figure><img class="box" src="slides/right/2.jpg"></figure>
- <figure><img class="box" src="slides/right/3.jpg"></figure>
- </ul>
+ <div class="tile is-parent slider-content">
+ <article class="tile is-child box is-16by9 ">
+ <li id="weather" class="box" location="College Park, MD"></li>
+ <li id="map" class="box" style=""></li>
+ </article>
</div>
</div>
</div>
@@ -82,12 +83,10 @@
</div> <!-- /end tile 'row'/ -->
<div class="tile is-ancestor">
<div class="tile is-parent is-12">
- <div class="tile is-child box">
- <div class="webtickers">
- <div class="ticker-title">CNN:</div><ul id="webticker1"></ul>
- <div class="ticker-title">Al Jazeera:</div><ul id="webticker2"></ul>
- <div class="ticker-title">ESPN:</div><ul id="webticker3"></ul>
- </div>
+ <div class="tile is-child box webtickers">
+ <div class="ticker-title">CNN:</div><ul id="webticker1"></ul>
+ <div class="ticker-title">Al Jazeera:</div><ul id="webticker2"></ul>
+ <div class="ticker-title">ESPN:</div><ul id="webticker3"></ul>
</div >
</div>
</div> <!-- /end tile 'row'/ -->
@@ -99,69 +98,9 @@
<script type="text/javascript" src="js/jquery.simpleweather.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/unslider-min.js"></script>
- <script>
- $(document).ready( function() {
- $('#webticker1').webTicker({
- speed: 60,
- startEmpty:false,
- rssurl: "rss1",
- rssfrequency: 5,
- });
- $('#webticker2').webTicker({
- speed: 60,
- startEmpty:false,
- rssurl: "rss2",
- rssfrequency: 5,
- });
- $('#webticker3').webTicker({
- speed: 60,
- startEmpty:false,
- rssurl: "rss3",
- rssfrequency: 5,
- });
- $('.slider').unslider({
- autoplay: true,
- nav: false,
- arrows: false,
- animation: 'fade',
- selectors: {
- container: 'ul',
- slides: 'figure'
- },
- });
- $('.unslider').addClass('tile'); // unslider tile fix
- getWeather()
- displayTime()
- setInterval(getWeather, 60000); //update weather every 60s
- setInterval(displayTime, 1000); //update time every second
- });
-
- function getWeather() {
- console.log('updating weather info');
- $.simpleWeather({
- location: 'College Park, MD',
- woeid: '',
- unit: 'f',
- success: function(weather) {
- html = '<div class="weather-content"><h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'°'+weather.units.temp+'</h2>';
- html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
- html += '<li class="currently">'+weather.currently+'</li>';
- html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul></div>';
- $("#weather").html(html);
- },
- error: function(error) {
- $("#weather").html('<p>'+error+'</p>');
- }
- });
- }
- function displayTime() {
- var today = moment().format('MMMM Do YYYY');
- var time = moment().format('HH:mm:ss');
- var dow = moment().format('dddd');
- $('#date').html(today);
- $('#time').html(time);
- $('#dow').html(dow);
- }
+ <script async defer
+ src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDccSZlyIPb6kuoxraIlKNRAhmKM8KZAog">
</script>
+ <script type="text/javascript" src="js/webmon.js"></script>
</body>
</html>
static/lts.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Welcome to the LTS</title>
+
+ <link href="css/bulma.css" rel="stylesheet">
+ <link href="css/video-js.css" rel="stylesheet">
+ <link href="css/webticker.css" rel="stylesheet">
+ <link href="css/weather.css" rel="stylesheet">
+ <link href="css/main.css" rel="stylesheet">
+ <link href="css/unslider.css" rel="stylesheet">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+ <script src="js/video.js"></script>
+ <script>
+ videojs.options.flash.swf = "js/video-js.swf";
+ </script>
+</head>
+<body>
+ <div class="container is-fluid">
+ <div class="tile is-ancestor">
+ <div class="tile is-9">
+ <div class="tile is-vertical">
+ <div class="tile is-parent slider">
+ <ul class="tile is-child image is-16by9">
+ <figure><img src="slides/top/1.jpg"></figure>
+ <figure><img src="slides/top/2.jpg"></figure>
+ <figure><img src="slides/top/3.jpg"></figure>
+ </ul>
+ </div>
+ <div class="tile is-parent slider">
+ <ul class="tile is-child image is-16by9" >
+ <figure><img src="slides/bot/1.jpg"></figure>
+ <figure><img src="slides/bot/2.jpg"></figure>
+ <figure><img src="slides/bot/3.jpg"></figure>
+ </ul>
+ </div>
+ </div>
+ <div class="tile is-vertical" >
+ <div class="tile">
+ <article class="tile is-parent flex-center is-16by9" >
+ <div id="welcome" class="is-child box">
+ <div >
+ <p class="title is-1 has-text-centered">Welcome to the LTS!</p>
+ <p id="time" class="title is-2 has-text-centered"></p>
+ <p id="dow" class="title is-3 has-text-centered"></p>
+ <p id="date" class="title is-3 has-text-centered"></p>
+ </div>
+ </div>
+ </article>
+ </div>
+ <div class="tile is-parent slider-content">
+ <article class="tile is-child box is-16by9 ">
+ <li id="weather" class="lts box" location="College Park, MD"></li>
+ <li id="map" class="box" lat="39.005388" lng="-76.944823"></li>
+ </article>
+ </div>
+ </div>
+ </div>
+ <div class="tile is-parent is-vertical is-3">
+ <div class="tile is-child box">
+ <video id="trafic_cam_1" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.139:1935/rtplive/fc016a5800f700d700437a45351f0214/playlist.m3u8" type='video/mp4' />
+ </video>
+ <video id="trafic_cam_2" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.139:1935/rtplive/3801a55801f700d700437a45351f0214/playlist.m3u8" type='video/mp4' />
+ </video>
+ <video id="trafic_cam_3" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.138:1935/rtplive/63016dde026300e50051fa36c4235c0a/playlist.m3u8" type='video/mp4' />
+ </video>
+ <video id="trafic_cam_4" class="video-js vjs-default-skin"
+ height="220" width="auto"
+ data-setup='{"techOrder": ["flash"], "controls":false, "autoplay":true, "preload":"auto"}'>
+ <source src="http://170.93.143.139:1935/rtplive/de014c5800f700d700437a45351f0214/playlist.m3u8" type='video/mp4' />
+ </video>
+ </div>
+ </div> <!-- /end videos/ -->
+ </div> <!-- /end tile 'row'/ -->
+ <div class="tile is-ancestor">
+ <div class="tile is-parent is-12">
+ <div class="tile is-child box webtickers">
+ <div class="ticker-title">CNN:</div><ul id="webticker1"></ul>
+ <div class="ticker-title">Al Jazeera:</div><ul id="webticker2"></ul>
+ <div class="ticker-title">ESPN:</div><ul id="webticker3"></ul>
+ </div >
+ </div>
+ </div> <!-- /end tile 'row'/ -->
+ </div> <!-- /end container/ -->
+
+ <script type="text/javascript" src="js/hls_streams.js"></script>
+ <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
+ <script type="text/javascript" src="js/jquery.webticker.js"></script>
+ <script type="text/javascript" src="js/jquery.simpleweather.js"></script>
+ <script type="text/javascript" src="js/moment.min.js"></script>
+ <script type="text/javascript" src="js/unslider-min.js"></script>
+ <script async defer
+ src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDccSZlyIPb6kuoxraIlKNRAhmKM8KZAog">
+ </script>
+ <script type="text/javascript" src="js/webmon.js"></script>
+</body>
+</html>