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!

It could? I thought this kind of problems was restricted to CRT monitors. — Andreas Rejbrand, Jan 19 '11 at 22:46
This isn't a major problem for LCDs, just CRTs and plasma displays. See http://compreviews.about.com/od/monitors/a/LCDBurnIn.htm. @Andreas it was just as bad with plasmas :) — Rafe Kettler, Jan 19 '11 at 22:47
I could only dream a better solution for my "problem" :) tnx guys — Spiro Krasic, Jan 19 '11 at 23:06

score 19 · Accepted Answer · answered Jan 19 '11 at 23:19

19

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)

answered Jan 19 '11 at 23:19

Brad Christie

100,477
16
156
200

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). – Brad Christie Jan 19 '11 at 23:23
How often should this bar wander across the screen? Once every second? Is there some science behind this technique? – l33t Sep 29 '16 at 16:34
1

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). – Brad Christie Sep 29 '16 at 16:38
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! – peelman Mar 26 '18 at 15:57

score 0 · Answer 2 · answered Sep 17 '14 at 02:54

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);

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

2 Answers2