Skip to content

Commit ffc5172

Browse files
committed
refactoring and code cleanups
1 parent 19aafef commit ffc5172

12 files changed

+233
-199
lines changed

css/infoscreen.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.space_body {
2+
background-size: 30%;
3+
background-repeat: no-repeat;
4+
background-position: center;
5+
background-image: url("../img/logo.png");
6+
background-color: black;
7+
text-align: center;
8+
}
9+
10+
#wrapper {
11+
min-height: 100%;
12+
position: relative;
13+
}
14+
15+
#upper {
16+
position: absolute;
17+
left: 0;
18+
padding-left: 0;
19+
top: 0;
20+
width: 100%;
21+
z-index: 10000000;
22+
}
23+
24+
#lower {
25+
width: 100%;
26+
height: 80px;
27+
position: absolute;
28+
bottom: 0;
29+
left: 0;
30+
}
31+
32+
#doordiv {
33+
color: white;
34+
background-color: green;
35+
text-align: center;
36+
font-size: 100px;
37+
font-family: "Courrier New", sans-serif;
38+
vertical-align: middle;
39+
}
40+
41+
#songdiv {
42+
color: white;
43+
background-color: blue;
44+
text-align: center;
45+
font-size: 40px;
46+
font-family: "Courrier New", sans-serif;
47+
vertical-align: middle;
48+
}
49+
50+
.sensor_div {
51+
color: white;
52+
width: 20%;
53+
float: left;
54+
position: relative;
55+
top:24px;
56+
margin: 0;
57+
border-radius: 0;
58+
padding: 0;
59+
height: 60px;
60+
vertical-align: middle;
61+
font-size: 40px;
62+
font-family: "Courrier New", sans-serif;
63+
text-align: center;
64+
}
65+
.sensor_div_2 {
66+
width: 38%;
67+
}
68+
69+
.sensor_img {
70+
height: 40px;
71+
vertical-align: text-top;
72+
}
73+
74+
#clock_div {
75+
color: white;
76+
width: 20%;
77+
top: 20%;
78+
height: auto;
79+
float: left;
80+
position: relative;
81+
display: block;
82+
margin: auto;
83+
font-size: 60px;
84+
font-family: "Courrier New", sans-serif;
85+
vertical-align: middle;
86+
}

img/clock.png

4.47 KB
Loading

img/humidity.png

681 Bytes
Loading

img/logo.png

216 KB
Loading

img/pressure.png

15.4 KB
Loading

img/temperature.png

2.21 KB
Loading

index.html

+42-183
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,50 @@
11
<html>
22
<head>
3-
<style type="text/css">
4-
#mydiv
5-
{
6-
color:white;
7-
background-color: green;
8-
text-align:center;
9-
font-size:100px;
10-
font-family:"Courrier New";
11-
vertical-align:"middle";
12-
}
13-
#mydiv2
14-
{
15-
color:white;
16-
background-color: blue;
17-
text-align:center;
18-
font-size:40px;
19-
font-family:"Courrier New";
20-
vertical-align:"middle";
21-
}
22-
</style>
23-
<link type="text/css" href="jplayer/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
24-
25-
<style type="text/css">
26-
#jp_container_1
27-
{
28-
margin-right:auto;
29-
margin-left:auto;
30-
}
31-
</style>
32-
3+
<link rel="stylesheet" type="text/css" href="css/infoscreen.css"/>
334
</head>
34-
<body>
35-
<script src="jquery-1.7.1.js"></script>
36-
<script src="jquery-ui-1.8.17.custom.min.js"></script>
37-
<script type="text/javascript">
38-
<!--
39-
var xmlhttp,last, last2, old, old2;
40-
old="0";
41-
old2="0";
42-
function myFunction()
43-
{
44-
$.get('http://192.168.1.5/report/?limit=1&nostyle&nobutton', function(data) {
45-
last = data;
46-
if (last!=old)
47-
{
48-
old=last;
49-
// alert(old);
50-
$("#testing").draggable();
51-
$("#username").html(old.substring( old.indexOf(" ",0), old.length - 6 ));
52-
// $("#mydiv").animate({height:"135px"},1000).delay(5000).animate({height:"0px"},1000);
53-
$( "#mydiv" ).toggle("blind",{}, 1000 ).delay(5000).toggle("blind",{}, 1000 );
54-
}
55-
});
56-
57-
}
58-
function myFunction2()
59-
{
60-
$.get('mpd-report.php', function(data) {
61-
last2 = data;
62-
if (last2!=old2)
63-
{
64-
old2=last2;
65-
// alert(old);
66-
$("#song").html(old2);
67-
$( "#mydiv2" ).toggle("blind",{}, 1000 ).delay(45000).toggle("blind",{}, 1000 );
68-
}
69-
});
70-
}
71-
72-
</script>
73-
<script type="text/javascript">
74-
$(document).ready(function(){
75-
// $("#testing").draggable().width("0px").height("0px");
76-
// $("#testing").width("100px").height("100px");
77-
$(".dropdown").hide().height("1.4em").delay(5000);
78-
// $("#mydiv").draggable();
79-
setInterval ("myFunction()", 500);
80-
setInterval ("myFunction2()", 500);
81-
});
82-
83-
</script>
84-
855

86-
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>
87-
<script type="text/javascript" src="jplayer/jplayer.playlist.min.js"></script>
88-
<script type="text/javascript" src="jplayer/jquery.jplayer.inspector.js"></script>
6+
<body class="space_body" onload="startTime()">
7+
<div id="wrapper">
8+
<div id="upper">
9+
<div id="doordiv" width=100% height=0px class="dropdown"><span id="username"></span> entered!</div>
10+
<div id="songdiv" width=100% height=0px class="dropdown"><span id="song"></span></div>
11+
</div>
12+
<div id="lower">
13+
<div id="clock_div" width=100% height=100%>
14+
<span id="time"> </span>
15+
</div>
16+
<div class="sensor_div">
17+
<span><img class="sensor_img" src="img/temperature.png"/>
18+
: <span id="temp"></span>&nbsp;&deg;C</span>
19+
</div>
20+
<div class="sensor_div">
21+
<img class="sensor_img" src="img/humidity.png"/>
22+
: <span id="hum"></span>&nbsp;%
23+
</div>
24+
<div class="sensor_div sensor_div_2">
25+
<img class="sensor_img" src="img/pressure.png">
26+
: <span id="pres"></span>&nbsp;hPa
27+
</div>
28+
</div>
29+
</div>
30+
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
31+
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
32+
<script type="text/javascript" src="js/infoscreen.js"></script>
8933
<script type="text/javascript">
90-
91-
$(document).ready(function()
92-
{
93-
url = 'http://192.168.1.5/videos/';
94-
$.get(url, function(data)
95-
{
96-
window.list = data;
97-
playlist = new jPlayerPlaylist(
98-
{
99-
jPlayer: "#jquery_jplayer_1",
100-
cssSelectorAncestor: "#jp_container_1"
101-
},
102-
JSON.parse(window.list),
103-
{
104-
playlistOptions: { shuffleOnLoop: true, autoPlay: true },
105-
swfPath: "jplayer/",
106-
supplied: "m4v"
107-
});
108-
109-
playlist.shuffle(true);
110-
$(".jp-repeat")[0].click();
111-
$(".jp-full-screen")[0].click();
112-
113-
});
114-
115-
$("#jquery_jplayer_1").bind($.jPlayer.event.ended, function()
116-
{
117-
$.get(url, function(data)
118-
{
119-
if(window.list != data)
120-
location.reload();
121-
});
122-
});
123-
124-
});
125-
34+
$(document).ready(function () {
35+
// $("#testing").draggable().width("0px").height("0px");
36+
// $("#testing").width("100px").height("100px");
37+
$(".dropdown").hide().height("1.4em").delay(5000);
38+
// $("#mydiv").draggable();
39+
setInterval("getDoorData()", 500);
40+
setInterval("getSongData()", 500);
41+
setInterval("getTempData()", 60 * 1000);
42+
setTimeout("getTempData()", 1000);
43+
setInterval("getHumData()", 60 * 1000);
44+
setTimeout("getHumData()", 1000);
45+
setTimeout("getPresData()", 1500);
46+
setInterval("getPresData()", 60 * 1000);
47+
});
12648
</script>
127-
128-
<div style="position:absolute; left:0px; padding-left:0px; top:0px; width:100%; z-index:10000000">
129-
<div id="mydiv" width=100% height=0px class="dropdown"><span id="username"></span> entered!</div>
130-
<div id="mydiv2" width=100% height=0px class="dropdown"><span id="song"></span></div>
131-
</div>
132-
<div id="jp_container_1" class="jp-video jp-video-270p">
133-
<div class="jp-type-playlist">
134-
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
135-
<div class="jp-gui">
136-
<div class="jp-video-play">
137-
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
138-
</div>
139-
<div class="jp-interface">
140-
<div class="jp-progress">
141-
<div class="jp-seek-bar">
142-
<div class="jp-play-bar"></div>
143-
</div>
144-
</div>
145-
<div class="jp-current-time"></div>
146-
<div class="jp-duration"></div>
147-
<div class="jp-title">
148-
<ul>
149-
<li></li>
150-
</ul>
151-
</div>
152-
<div class="jp-controls-holder">
153-
<ul class="jp-controls">
154-
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
155-
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
156-
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
157-
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
158-
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
159-
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
160-
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
161-
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
162-
</ul>
163-
<div class="jp-volume-bar">
164-
<div class="jp-volume-bar-value"></div>
165-
</div>
166-
<ul class="jp-toggles">
167-
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
168-
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
169-
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
170-
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
171-
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
172-
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
173-
</ul>
174-
</div>
175-
</div>
176-
</div>
177-
<div class="jp-playlist">
178-
<ul>
179-
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
180-
<li></li>
181-
</ul>
182-
</div>
183-
<div class="jp-no-solution">
184-
<span>Update Required</span>
185-
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
186-
</div>
187-
</div>
188-
</div>
189-
19049
</body>
19150
</html>

0 commit comments

Comments
 (0)