Nicer webcam failure notifications

janpaul123 · Jan 10, 2010 · 04893ec · 04893ec
1 parent 5bbb6f4
commit 04893ec
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/index.php b/index.php
@@ -130,12 +130,10 @@
 						}
 
 						echo('<div class="container" style="' . $styleDiv . '">');
-						echo('<div class="holder">');
+						echo('<div class="holder" id="webcam-' . $nr . '" >');
 						echo('<div class="title">' . $cam['title'] . '</div>');
 						echo('<div class="border"></div>');
-						echo('<img style="' . $styleImage . '" id="webcam-' . $nr . '" src="' . $cam['url'] . '"');
-						echo(' onLoad="$(this).css(\'opacity\', 1); $(\'#webcam-error-'.$nr.'\').hide();"'); 
-						echo(' onError="$(this).css(\'opacity\', 0); $(\'#webcam-error-'.$nr.'\').show();"/>');
+						echo('<img class="webcam" style="' . $styleImage . '" src="' . $cam['url'] . '"/>');
 						echo('<img class="error" id="webcam-error-' . $nr . '" src="img/webcam_error.png"/>');
 						echo('</div>');
 						echo('</div>');

diff --git a/js/PhotoFrame.js b/js/PhotoFrame.js
@@ -250,6 +250,27 @@ var PhotoFrame = new function () {
 		PhotoFrame.helpShown = false;
 	}
 
+	this.updateWebcam = function(id) {
+		var url = PhotoFrame.webcams[id];
+		url = url + (url.indexOf('?') > -1 ? '&' : '?') + (new Date().getTime() + Math.random())
+
+		var $newCam = $(new Image());
+		var style = $('#' + id + ' img.webcam').attr('style');
+
+		$newCam.addClass('webcam');
+		$newCam.attr('style', style);
+		$newCam.load(function () {
+			$('#' + id + ' img.webcam').remove();
+			$('#' + id).append($(this));
+			$('#' + id + ' img.error').fadeOut("fast");
+		});
+		$newCam.error(function () {
+			$('#' + id + ' img.error').fadeIn("fast");
+		});
+
+		$newCam.attr('src', url);
+	}
+
 	this.updateWebcams = function() {
 		if (PhotoFrame.webcamsTimer!=null) {
 			clearTimeout(PhotoFrame.webcamsTimer);
@@ -258,9 +279,7 @@ var PhotoFrame = new function () {
 
 		if (PhotoFrame.webcamsShown) {
 			for (var id in PhotoFrame.webcams) {
-				var url = PhotoFrame.webcams[id];
-				$('#' + id).attr('src', url 
-						+ (url.indexOf('?') > -1 ? '&' : '?') + (new Date().getTime() + Math.random()));
+				PhotoFrame.updateWebcam(id);
 			}
 
 			PhotoFrame.webcamsTimer = setTimeout(function() { PhotoFrame.updateWebcams() }, PhotoFrame.webcamsInterval);