Javascript for preventing "burn-in" problem on lcd screen

Question

I'm building a non-public web app that will be used as info-monitor. As such, it will be running 24/7 on one LCD TV display.

Since this could produce a "burn-in color" error on the LCD I'm looking for a Javascript that will prevent/reduce this problem. I want to use something similar to those they use on airport displays (a line periodically moving from left to right and top to bottom and switching color).

Do you know any Javascript doing this? Thank you!

Weitzel

It could? I thought this kind of problems was restricted to CRT monitors. – Box

This isn't a major problem for LCDs, just CRTs and plasma displays. See compreviews.about.com/od/monitors/a/LCDBurnIn.htm. @Andreas it was just as bad with plasmas :) – Griffie

I could only dream a better solution for my "problem" :) tnx guys – Weitzel

Answer 1

In case you were still interested: (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);

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

Derwood

Or maybe I should account for the new, what is it, orange/yellow color that the new TVs have as part of the color list? ;-p (Used Primary's as this should be enough to refresh the pixel). – Derwood

How often should this bar wander across the screen? Once every second? Is there some science behind this technique? – Ova

TBH, not even sure it's necessary in this day and age. Simply wrote it because it was requested. That said, may be worthwhile to do a little research and see if there is an optimal setting. It was my understanding this was more to avoid CRT degradation. Now that everything is lcd, not sure it applies (leds won't have a residual glow). – Derwood

Just used this to add some burn-in protection (avoidance?) to our Dashing / Smashing instance. I had to manually create the DIV, and set the z-index of It to a large number to get it to cooperate, but its working great now. Thanks for sharing! – Tasso

Answer 2

I used Brad's script but unfortunately my page had a large HTMl table that extend outside the parent container. This made it so the pixel bar would only travel part way across the screen. Instead of altering my table I added a bounding box script to find the actual width of the html table and then used that to set the width in Brad's 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);

Bookrest