-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclient.html
97 lines (76 loc) · 3.49 KB
/
client.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HueMenorah client</title>
<style type="text/css">
body {
margin: 0 ;
overflow: hidden;
/*background-color: black ;*/
}
img {
position: fixed;
width: 100% ;
}
#img_fg {
z-index: 10;
}
#img_bg {
z-index: 9;
}
</style>
<!-- load Firebase library -->
<script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script>
<!-- load jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<!-- Commands go here. -->
<script type="text/javascript">
// CHANGE THE CLIENT ID BELOW
var client_id = '0' ; // Customize this per client. No duplicates expected!
var fb_url = 'https://huemenorah.firebaseio.com/' ;
var image_folder = 'images/' ;
var image_database = new Firebase(fb_url) ;
image_database.child( client_id ).on("value", function ( client_setting ) {
console.log ( 'getting config for ***CLIENT ' + client_id + '***...' ) ;
var image_url = client_setting.val().path ;
console.log("path: " + image_url); //
var transition = client_setting.val().transition ;
console.log("transition: " + transition); //
var delay = client_setting.val().delay ;
console.log("delay: " + delay); //
if ( jQuery('#img_fg').length ) {
// Load new image, fade the old one, and swap IDs
var img = jQuery("<img id='img_bg' />").attr('src', image_folder + image_url )
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
console.error('broken image!'); // image did not load correctly!
} else {
// Image loaded successfully.
jQuery('body').append( img ) ; // add new image to the DOM
jQuery('#img_fg').delay(delay*1000).fadeOut(1000, function () { // fade out the foreground image
jQuery('#img_fg').remove(); // remove the foreground image from the DOM
jQuery('#img_bg').attr('id','img_fg') ; // make the bg image the new fg image
});
}
});
}
else {
// Just load an image.
var img = jQuery("<img id='img_fg' />").attr('src', image_folder + image_url )
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
console.error('broken image!'); // image did not load correctly!
} else {
// Image loaded successfully.
jQuery('body').append( img ); // add new image to the DOM
}
});
}
});
</script>
</head>
<body>
</body>
</html>