Geek Answers Handbook

Javascript to prevent lcd screen burning problem

I am creating a non-public web application that will be used as an information monitor. Thus, it will work 24/7 on a single LCD.

Since this can lead to a “burn” error on the LCD, I am looking for Javascript that will prevent / reduce this problem. I want to use something similar to the ones they use on the display at the airport (the line periodically moves from left to right and from top to bottom and switches the color).

Do you know that Javascript does this? Thanks!

+6
javascript lcd
source share
2 answers

If you're still curious: (uses jQuery)

var $burnGuard = $('<div>').attr('id','burnGuard').css({ 'background-color':'#FF00FF', 'width':'1px', 'height':$(document).height()+'px', 'position':'absolute', 'top':'0px', 'left':'0px', 'display':'none' }).appendTo('body'); var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000; function burnGuardAnimate() { color = ++color % 3; var rColor = colors[color]; $burnGuard.css({ 'left':'0px', 'background-color':rColor, }).show().animate({ 'left':$(window).width()+'px' },scrollDelay,function(){ $(this).hide(); }); setTimeout(burnGuardAnimate,delay); } setTimeout(burnGuardAnimate,delay);

A working example is found here: http://www.jsfiddle.net/bradchristie/4w2K3/3/ (or full screen version )

+12
source share

I used a Brad script, but unfortunately my page had a large HTMl table that extended beyond the parent container. This made the pixel panel move partially across the screen. Instead of modifying my table, I added a script bounding box to find the actual width of the html table, and then used this to set the width in the Brad script.

 var div = document.getElementById ("HtmlTable-ID"); if (div.getBoundingClientRect) { var rect = div.getBoundingClientRect (); w = rect.right - rect.left; // alert (" Width: " + w ); } var $burnGuard = $('<div>').attr('id','burnGuard').css({ 'background-color':'#FF00FF', 'width':'1px', 'height':$(document).height()+'px', 'position':'absolute', 'top':'0px', 'left':'0px', 'display':'none' }).appendTo('body'); var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000; function burnGuardAnimate() { color = ++color % 3; var rColor = colors[color]; $burnGuard.css({ 'left':'0px', 'background-color':rColor, }).show().animate({ 'left': w +'px' },scrollDelay,function(){ $(this).hide(); }); setTimeout(burnGuardAnimate,delay); } setTimeout(burnGuardAnimate,delay);
0
source share

More articles:


All Articles