HTML para representação gráfica

ScadaBR - Desenvolvimento
1

Como faço para simular um GIF analógico em um componente HTML? Por exemplo, tenho um data point que pode ter resultados 0, 1 e 2, foi adicionado imagens respectivas dentro da pasta do ScadaBr para poderem ser selecionadas, é possível criar um código script dentro do HTML para criar um comando if para cada resultado possível dentro do data point? Um exemplo de código, onde não sei como citar o data point:

‘!-- @license MIT --’

‘!-- Exemplo de troca de imagem com base no estado de um datapoint --’

'img id=“imagem” src=“imagem-padrao.png” ’

‘script’
// Obtém o estado do datapoint
var estadoDatapoint = getDataPointState(“Vazamento.Aviso”);

// Verifica o estado e altera a imagem correspondente
if (estadoDatapoint == 0) {
    document.getElementById("imagem").src = "imagem-estado-1.png";
} else if (estadoDatapoint == 1) {
    document.getElementById("imagem").src = "imagem-estado-2.png";
} else if (estadoDatapoint == 2) {
    document.getElementById("imagem").src = "imagem-estado-3.png";
} else {
    document.getElementById("imagem").src = "imagem-padrao.png";
}

‘/script’

Inicialmente é uma maneira complexa de se colocar uma imagem, porém é mais simples de editá-la caso necessite, obrigado desde já (coloquei entre aspas simples, pois o simbolo “<” buga).

2

Você pode (“deve”, pois o componente HTML não pode ler valores de datapoints) usar um script para servidor para gerar o HTML da imagem que você deseja. Exemplo:

var caminho_imagem = "";

// A variável "value" contém o valor mais recente do data point no script para servidor
if (value == 0) {
    caminho_imagem = "imagem-estado-1.png";
} else if (value == 1) {
    caminho_imagem = "imagem-estado-2.png";
} else if (value == 2) {
    caminho_imagem = "imagem-estado-3.png";
} else {
    caminho_imagem = "imagem-padrao.png";
}

var html = "<img src='" + caminho_imagem + "' >"

return html;

Sobre como postar códigos no Fórum, veja este tutorial: Postando códigos no Fórum