TV Burn-in em sites? - Pante sites • apps • sistemas

Você já desenvolveu algum hotsite ou webapp para televisores (agenda para aeroportos, rodoviárias, etc.)? Se sim, pode ser que nem tenha sido pensada a questão do burn-in.

Fonte: https://www.showmetech.com.br/smart-tv-efeito-burn-in/

Mas que negócio é esse?

Burn-in ou “pixel fantasma” ocorre quando elementos iguais são exibidos estaticamente por muito tempo.

Como demonstrado na imagem acima, logos de emissoras tinham este problema desde as TVs de tubo. Atualmente elas modificaram a exibição dos seus logos para que em um tempo definido ele mude. Seja piscando e reaparecendo, exibindo somente as bordas, etc.

Ao exibir este mesmo padrão por um longo período, os pixels que geram esta imagem começam a “envelhecer”. Assim, eles perdem a capacidade de gerar outros elementos, fixando-os na tela, com outros pixels tentando ser exibidos por cima. Daí “fantasma”.

Se você é da época de usar capa no monitor pra não amarelar, deve lembrar dos screensavers (protetores de tela) da Microsoft. Serviam exatamente pra isso – Eles ainda existem, mas sem muita utilidade, já que os monitores se aperfeiçoaram com o tempo.

O screensaver “labirinto” do Windows, um dos mais famosos do seu tempo;

Para saber mais sobre Burn-in, acesse: https://www.showmetech.com.br/smart-tv-efeito-burn-in/

Ok, e eu – desenvolvedor – com isso?

Talvez você nem precise se preocupar, mas melhor saber disso antes do que depois de dar problema, não é? Pra isso, você pode usar o script do tutorial abaixo, que usa javascript puro (vanilla) e jQuery (foi usada a versão 3.3.1). No fim, confira o código completo e um link para o demo.

Passo 1: Vamos criar as variáveis que vão guardar as nossas cores primárias (RGB), o tempo entre um e outro (delay) e o tempo que ele dura na tela (delayScroll):

var cores = ['#FF0000','#00FF00','#0000FF'],

```
    cor = 0,
```
```
    delay = 5000,
```
```
    delayScroll = 1000;
```

Passo 2: Agora vamos criar a variável que vai gerar o elemento na tela:

var $div_burnin = $('').attr('id','div_burnin');

Depois vamos inserir alguns estilos na nossa div. Ela é um elemento de 1px de largura, posicionado de forma absoluta (“flutuante”), iniciando no topo esquerdo e com a mesma altura da tela do navegador. Note que ela possui uma cor de fundo inicial, para evitar ficar invisível:

```
$div_burnin.css({
```
```
  'background-color': '#FF00FF',
```
```
  'width': '1px',
```
```
  'height': $(document).height()+'px',
```
```
  'position': 'absolute',
```
```
  'top': 0,
```
```
  'left': 0,
```
```
  'display': 'none'
```
```
});
```

Por fim, incluiremos (appendTo) a nossa div no corpo do documento via javascript, pra não termos de modificar nenhum arquivo HTML:

$div_burnin.appendTo('body');

Passo 3: Criaremos agora uma função simples que usa a função setTimeout do javascript para fazer o loop.

Essa função usa a variável criada no passo 1, “cor“, que lá começou definida como 0 (zero). Ela vai ser pré-incrementada (++cor), e dividida por 3 (a quantidade de cores que temos no vetor “cores“), para haver aleatoriedade.

Depois, inserimos os novos estilos na nossa div, e usaremos a função animate para movimentá-la pela tela.

O evento setTimeout ocorre no fim mas ainda dentro da função, para que sempre que ela for chamada, o loop ocorra novamente.

Também chamamos o setTimeout duas vezes: uma dentro e outra fora da função, para que a função seja iniciada na primeira vez que a página for executada.

```
function evitarBurnIn(){
```
```
  cor = ++cor % 3;
```
```
  var CorAleatoria = cores[cor];
```
```
 
```
```
  $div_burnin.css({
```
```
    'left': 0,
```
```
    'background-color': CorAleatoria,
```
```
  });
```
```
 
```
```
  //exibe a div, que vinha oculta
```
```
  $div_burnin.show();
```
```
 
```
```
  $div_burnin.animate({
```
```
    'left':$(window).width()+'px'
```
```
  },
```
```
  delayScroll, function(){
```
```
   //oculta a div novamente
```
```
    $(this).hide();
```
```
  });
```
```
 
```

  //executa novamente a funcao, depois do tempo definido (delay)

```
  setTimeout(evitarBurnIn,delay);
```
```
}
```
```
 
```
```
//inicia a funcao
```
```
setTimeout(evitarBurnIn,delay);
```

Código completo:

* O código abaixo foi reduzido propositalmente mas possui a mesma estrutura.

var cores = ['#FF0000','#00FF00','#0000FF'], cor = 0, delay = 5000, delayScroll = 1000;

```
 
```

var $div_burnin = $('').attr('id','div_burnin').css({

```
 'background-color':'#FF00FF',
```
```
 'width':'1px',
```
```
 'height':$(document).height()+'px',
```
```
 'position':'absolute',
```
```
 'top':0,
```
```
 'left':0,
```
```
 'display':'none'
```
```
}).appendTo('body');
```
```
 
```
```
function evitarBurnIn(){
```
```
 cor = ++cor % 3;
```
```
 var rCor = cores[cor];
```
```
 $div_burnin.css({
```
```
  'left': 0,
```
```
  'background-color': rCor,
```
```
 }).show().animate({
```
```
  'left':$(window).width()+'px'
```
```
 },delayScroll,function(){
```
```
  $(this).hide();
```
```
 });
```
```
 setTimeout(evitarBurnIn,delay);
```
```
}
```
```
 
```
```
setTimeout(evitarBurnIn,delay);
```

Demonstração do script:

https://codepen.io/dimaspante/full/wjQaXm/

Como evitar burn-in em sites para TVs

Mas que negócio é esse?

Ok, e eu – desenvolvedor – com isso?