Javascript per prevenire il problema di "burn-in" sullo schermo LCD

Question

Sto costruendo un'app Web non pubblica che verrà utilizzata come info-monitor. Come tale, funzionerà 24 ore su 24 su uno schermo LCD.

Poiché questo potrebbe produrre un errore "burn-in" sul display LCD, sto cercando un Javascript che impedisca/riduca questo problema. Voglio usare qualcosa di simile a quelli che usano sui display degli aeroporti (una linea che si sposta periodicamente da sinistra a destra e dall'alto in basso e cambia colore).

Sai qualche Javascript che fa questo? Grazie!

Answer 1

Nel caso in cui si erano ancora interessati: (utilizza 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); 

esempio di lavoro trovato qui: http://www.jsfiddle.net/bradchristie/4w2K3/3/ (o full screen version)

Answer 2

Ho usato la sceneggiatura di Brad, ma purtroppo la mia pagina ha avuto un grande tavolo HTML che estendersi all'esterno del contenitore principale. Questo ha fatto in modo che la barra dei pixel potesse viaggiare solo parzialmente sullo schermo. Invece di alterare la mia tabella ho aggiunto uno script di bounding box per trovare la larghezza effettiva della tabella html e quindi l'ho usata per impostare la larghezza nello script di Brad.

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