Biblioteca SCADA

Visor com 2 Variaveis

/* ========================================================
   BARGRAPH COMPACTO v5.0 - SCADA-LTS
   - SP lido direto do servidor pela API, usando o XID do ponto
     (nao depende da view nem do ID do componente)
   - Fallback: le texto "numero °C" do componente compSpId
   - Bloco do navegador so em ASCII (compativel com Rhino)
======================================================== */

// ---------- CONFIGURACOES ----------
var descricao = "";
var prefixo = "";
var sufixo = " °C";
var casas_decimais = 1;

var largura = 70;
var altura = 10;

var minimo = 0;
var maximo = 20;

var corPadrao = "#12CE00";

// ---------- CORES (valor - SP) ----------
var corVerde    = "#00B050";
var corAmarelo  = "#FFD400";
var corVermelho = "#FF0000";
var limiar_amarelo  = 2;
var limiar_vermelho = 5;

var corTexto = "#333333";

// ---------- SETPOINT ----------
var spXid    = "DP_492107";   // XID do SP MATURACAO 2 FUNDO
var compSpId = "";            // opcional: fallback por componente na mesma view
var spLabel  = "SP";
var corSP    = "#FF5722";
var mostrar_sp = true;
var intervalo_ms = 3000;

// ---------- LOGICA (servidor) ----------
if(value < minimo) value = minimo;
if(value > maximo) value = maximo;

var cor = corPadrao;
var perc = ((value - minimo) / (maximo - minimo)) * 100;
var uid = "bg_" + point.id + "_" + pointComponent.id;

// ---------- HTML ----------
var s = "";

s += "<style>";
s += "@keyframes bgPulseAlert_" + uid + " {";
s += "  0%   { box-shadow: 0 0 0 0 rgba(255,0,0,0.55); }";
s += "  70%  { box-shadow: 0 0 0 9px rgba(255,0,0,0); }";
s += "  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }";
s += "}";
s += "</style>";

s += "<div id='" + uid + "' style='width:" + largura + "px;font-family:Inter, Segoe UI, sans-serif;text-align:center;'>";

if(descricao){
    s += "<div style='font-size:10px;color:#888;margin-bottom:2px;'>" + descricao + "</div>";
}

s += "<div id='" + uid + "_val' style='font-size:16px;font-weight:700;color:" + corTexto + ";margin-bottom:6px;letter-spacing:-0.3px;'>";
s += prefixo + value.toFixed(casas_decimais) + sufixo;
s += "</div>";

s += "<div style='position:relative;height:8px;'>";

s += "<div style='position:absolute;top:0;left:0;right:0;height:" + altura + "px;border-radius:6px;background:#e2e4e7;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);z-index:0;'></div>";

s += "<div id='" + uid + "_fill' style='position:absolute;top:0;left:0;width:" + perc + "%;height:" + altura + "px;border-radius:6px;background:linear-gradient(90deg," + cor + "cc," + cor + ");box-shadow:0 0 5px " + cor + "66;transition:width 0.6s cubic-bezier(0.22,1,0.36,1),background 0.4s ease;z-index:1;'></div>";

s += "<div id='" + uid + "_dot' style='position:absolute;top:" + (altura/2 - 6) + "px;left:calc(" + perc + "% - 6px);width:12px;height:12px;border-radius:50%;background:white;border:2.5px solid " + cor + ";box-shadow:0 1px 3px rgba(0,0,0,0.25);transition:left 0.6s cubic-bezier(0.22,1,0.36,1),border-color 0.4s ease;z-index:2;'></div>";

if(mostrar_sp){
    s += "<div id='" + uid + "_spLine' style='position:absolute;top:-3px;left:0px;width:2px;height:" + (altura+6) + "px;background:" + corSP + ";transform:translateX(-50%);z-index:3;'></div>";
}

s += "</div>";

s += "<div style='display:flex;justify-content:space-between;font-size:8px;color:#b0b4ba;margin-top:3px;'>";
s += "<span>" + minimo + "</span><span>" + maximo + "</span>";
s += "</div>";

if(mostrar_sp){
    s += "<div id='" + uid + "_spLb' style='font-size:9px;font-weight:700;color:" + corSP + ";margin-top:-3px;'>" + spLabel + ": --</div>";
}

s += "</div>";

// ---------- JS DO NAVEGADOR ----------
if(mostrar_sp){
    var j = "";
    j += "(function(){";
    j += "var uid='" + uid + "', xid='" + spXid + "', spId='" + compSpId + "', spLabel='" + spLabel + "';";
    j += "var min=" + minimo + ", max=" + maximo + ", w=" + largura + ", dec=" + casas_decimais + ";";
    j += "var value=" + value + ";";
    j += "var corVerde='" + corVerde + "', corAmarelo='" + corAmarelo + "', corVermelho='" + corVermelho + "';";
    j += "var limA=" + limiar_amarelo + ", limV=" + limiar_vermelho + ";";
    j += "var cacheKey='sp_' + (xid || spId);";
    j += "window.__bgIntervals = window.__bgIntervals || {};";
    j += "if(window.__bgIntervals[uid]){ clearInterval(window.__bgIntervals[uid]); }";
    j += "window.__spCache = window.__spCache || {};";
    j += "var committedVal = null;";
    j += "var baseUrl = (location.pathname.split('/')[1] || 'Scada-LTS');";
    j += "function calcCor(sp){";
    j += "  var delta = value - sp;";
    j += "  if(delta <= limA){ return corVerde; }";
    j += "  if(delta < limV){ return corAmarelo; }";
    j += "  return corVermelho;";
    j += "}";
    j += "function apply(val){";
    j += "  var line = document.getElementById(uid+'_spLine');";
    j += "  var lb = document.getElementById(uid+'_spLb');";
    j += "  var fill = document.getElementById(uid+'_fill');";
    j += "  var dot = document.getElementById(uid+'_dot');";
    j += "  if(!line || !lb){ return; }";
    j += "  var clamped = Math.max(min, Math.min(max, val));";
    j += "  var x = ((clamped-min)/(max-min))*w;";
    j += "  var disp = val.toFixed(dec) + String.fromCharCode(176) + 'C';";
    j += "  line.style.left = x + 'px';";
    j += "  lb.textContent = spLabel + ': ' + disp;";
    j += "  var cor = calcCor(val);";
    j += "  if(fill){ fill.style.background = 'linear-gradient(90deg,' + cor + 'cc,' + cor + ')'; fill.style.boxShadow = '0 0 5px ' + cor + '66'; }";
    j += "  if(dot){";
    j += "    dot.style.borderColor = cor;";
    j += "    dot.style.animation = (cor === corVermelho) ? ('bgPulseAlert_' + uid + ' 1.4s infinite') : 'none';";
    j += "  }";
    j += "  window.__spCache[cacheKey] = {val: val};";
    j += "}";
    j += "function commit(val){";
    j += "  if(val === null || isNaN(val)){ return; }";
    j += "  if(val !== committedVal){ committedVal = val; apply(val); }";
    j += "}";
    j += "function readComp(){";
    j += "  var el = spId ? document.getElementById(spId) : null;";
    j += "  if(!el){ return null; }";
    j += "  var txt = String(el.textContent || el.innerText || '').replace(',', '.');";
    j += "  var re = new RegExp('(-?[0-9]+([.][0-9]+)?)[ ]*' + String.fromCharCode(176));";
    j += "  var m = txt.match(re);";
    j += "  return m ? parseFloat(m[1]) : null;";
    j += "}";
    j += "function readApi(){";
    j += "  try{";
    j += "    var x = new XMLHttpRequest();";
    j += "    x.open('GET', '/' + baseUrl + '/api/point_value/getValue/' + encodeURIComponent(xid), true);";
    j += "    x.onreadystatechange = function(){";
    j += "      if(x.readyState !== 4){ return; }";
    j += "      if(x.status !== 200){ commit(readComp()); return; }";
    j += "      try{";
    j += "        var d = JSON.parse(x.responseText);";
    j += "        var v = parseFloat(String(d.value).replace(',', '.'));";
    j += "        if(isNaN(v)){ commit(readComp()); } else { commit(v); }";
    j += "      }catch(e){ commit(readComp()); }";
    j += "    };";
    j += "    x.send();";
    j += "  }catch(e){ commit(readComp()); }";
    j += "}";
    j += "function update(){";
    j += "  if(!document.getElementById(uid)){ clearInterval(window.__bgIntervals[uid]); return; }";
    j += "  if(xid){ readApi(); } else { commit(readComp()); }";
    j += "}";
    j += "var cached = window.__spCache[cacheKey];";
    j += "if(cached){ committedVal = cached.val; apply(cached.val); }";
    j += "window.__bgIntervals[uid] = setInterval(update, " + intervalo_ms + ");";
    j += "update();";
    j += "})();";

s += "<scr" + "ipt>" + j + "</scr" + "ipt>";
}

return s;

Variavel String

Medidor de USO

var TITULO  = 'CPU';
var AVISO   = 70;
var CRITICO = 90;

var v = parseFloat(value);
if (isNaN(v)) { v = 0; }
if (v < 0)    { v = 0; }
if (v > 100)  { v = 100; }

var c = '#3aa757';
if (v >= CRITICO)    { c = '#d64545'; }
else if (v >= AVISO) { c = '#e0a800'; }

var txt = v.toFixed(1) + ' %';

var s = '';
s += "<div style='width:280px;padding:8px 10px;background:#fbfbfb;border:1px solid #c9c9c9;border-radius:5px;font-family:Arial,sans-serif;'>";
s += "<div style='width:260px;font:bold 12px Arial,sans-serif;color:#2f2f2f;margin:0 0 4px 0;white-space:nowrap;'>";
s += "<span style='display:inline-block;width:150px;'>" + TITULO + "</span>";
s += "<span style='display:inline-block;width:108px;text-align:right;color:" + c + ";'>" + txt + "</span>";
s += "</div>";
s += "<div style='width:258px;height:15px;background:#e8e8e8;border:1px solid #bfbfbf;border-radius:3px;overflow:hidden;'>";
s += "<div style='width:" + v.toFixed(1) + "%;height:15px;background:" + c + ";'></div>";
s += "</div>";
s += "</div>";

return s;

Gauge

// ===================================================
// MANÔMETRO INDUSTRIAL CLÁSSICO - SCADA-LTS (300x300)
// Estilo Bancada de Pressão (Fundo Branco/Metálico)
// ===================================================

// ---------------------------
// CONFIGURAÇÕES DE TAMANHO
// ---------------------------
var largura_tela  = 300;  
var altura_tela   = 300;

// ---------------------------
// CONFIGURAÇÕES DO GAUGE
// ---------------------------
var titulo        = "PRESSÃO";
var unidade       = "bar";

var valor_minimo  = 0;
var valor_maximo  = 10;

var casas         = 1;

// Limites de faixa (valores absolutos)
var faixa_ok_max  = 7;
var faixa_alerta  = 8.5;

// Duração da transição (ms)
var duracao_transicao_ms = 1400;

// ID único por instância vinculado ao ID do ponto técnico do SCADA
var gauge_instance_id = "manometro_bancada_" + point.id;

// ---------------------------
// LEITURA E SANITIZAÇÃO
// ---------------------------
var v = parseFloat(value);
if (isNaN(v)) v = 0;
if (v < valor_minimo) v = valor_minimo;
if (v > valor_maximo) v = valor_maximo;

var pct = (v - valor_minimo) / (valor_maximo - valor_minimo);

// ---------------------------
// COR DINÂMICA (Para o display digital)
// ---------------------------
var cor_texto_digital = "#333333";

if (v >= faixa_alerta) {
    cor_texto_digital = "#d32f2f"; // Vermelho
} else if (v >= faixa_ok_max) {
    cor_texto_digital = "#f57c00"; // Laranja
}

// ---------------------------
// FUNÇÕES GEOMETRIA
// ---------------------------
function rad(d) { return d * Math.PI / 180; }

function pt(cx, cy, r, graus) {
    return {
        x: cx + Math.cos(rad(graus)) * r,
        y: cy + Math.sin(rad(graus)) * r
    };
}

function hashStr(str) {
    var h = 0;
    for (var i = 0; i < str.length; i++) { h = (h * 31 + str.charCodeAt(i)) | 0; }
    return Math.abs(h).toString(36);
}

function arco(cx, cy, r, g_ini, g_fim, cor, sw) {
    var p1    = pt(cx, cy, r, g_ini);
    var p2    = pt(cx, cy, r, g_fim);
    var span  = g_fim - g_ini;
    var flag  = (Math.abs(span) > 180) ? 1 : 0;
    var sweep = (span >= 0) ? 1 : 0;
    return "<path d='M " + p1.x + " " + p1.y +
           " A " + r + " " + r + " 0 " + flag + " " + sweep + " " + p2.x + " " + p2.y + "'" +
           " fill='none' stroke='" + cor + "' stroke-width='" + sw + "' stroke-linecap='butt' />";
}

// Parâmetros fixos internos da malha vetorial
var W  = 360;  
var H  = 360;  
var cx = W / 2;
var cy = H / 2;  
var r  = 135;

var ang_meio       = -90;
var ang_span_total = 270; 
var ang_ini        = ang_meio - ang_span_total / 2;
var ang_fim        = ang_meio + ang_span_total / 2;
var ang_agulha     = ang_ini + (ang_fim - ang_ini) * pct;
var delta_deg      = ang_agulha - ang_ini;

var gaugeId      = "gauge_" + hashStr(gauge_instance_id);
var needleId     = gaugeId + "_needle";
var valorTextId  = gaugeId + "_valor";

// ---------------------------
// MONTAGEM HTML / SVG
// ---------------------------
var s = "";

s += "<div style='" +
     "display:inline-flex;" +
     "flex-direction:column;" +
     "align-items:center;" +
     "background:transparent;" +
     "font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;" +
     "text-align:center;" +
     "width:" + largura_tela + "px;" +
     "height:" + altura_tela + "px;" +
     "overflow:visible;" +
     "'>";

if (titulo !== "") {
    s += "<div style='color:#333; font-size:14px; font-weight:800; letter-spacing:1.5px; margin-bottom:6px;'>" + titulo + "</div>";
}

s += "<svg width='100%' height='100%' viewBox='0 0 " + W + " " + H + "' style='overflow:visible; filter: drop-shadow(0px 6px 10px rgba(0,0,0,0.15));'>";

s += "<defs>";
// Gradiente para o aro metálico (Bezel)
s += "<linearGradient id='metal_" + gaugeId + "' x1='0%' y1='0%' x2='100%' y2='100%'>" +
     "<stop offset='0%'   style='stop-color:#e0e0e0;stop-opacity:1'/>" +
     "<stop offset='20%'  style='stop-color:#ffffff;stop-opacity:1'/>" +
     "<stop offset='50%'  style='stop-color:#9e9e9e;stop-opacity:1'/>" +
     "<stop offset='80%'  style='stop-color:#f5f5f5;stop-opacity:1'/>" +
     "<stop offset='100%' style='stop-color:#757575;stop-opacity:1'/>" +
     "</linearGradient>";

// Gradiente para o fundo do mostrador
s += "<radialGradient id='fundo_" + gaugeId + "' cx='50%' cy='50%' r='50%'>" +
     "<stop offset='70%'  style='stop-color:#ffffff;stop-opacity:1'/>" +
     "<stop offset='100%' style='stop-color:#ececec;stop-opacity:1'/>" +
     "</radialGradient>";
     
// Sombra interna rebaixada
s += "<filter id='inner_shadow_" + gaugeId + "'>" +
     "<feOffset dx='0' dy='3'/>" +
     "<feGaussianBlur stdDeviation='3' result='offset-blur'/>" +
     "<feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse'/>" +
     "<feFlood flood-color='black' flood-opacity='0.2' result='color'/>" +
     "<feComposite operator='in' in='color' in2='inverse' result='shadow'/>" +
     "<feComposite operator='over' in='shadow' in2='SourceGraphic'/>" +
     "</filter>";
s += "</defs>";

// CARCAÇA E ARO (BEZEL)
s += "<circle cx='" + cx + "' cy='" + cy + "' r='" + (r + 30) + "' fill='url(#metal_" + gaugeId + ")' stroke='#666' stroke-width='1' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='" + (r + 15) + "' fill='url(#fundo_" + gaugeId + ")' stroke='#b0b0b0' stroke-width='1' filter='url(#inner_shadow_" + gaugeId + ")' />";

// FAIXA VERMELHA DE ALERTA
var pct_alert = (faixa_alerta - valor_minimo) / (valor_maximo - valor_minimo);
var ang_alert = ang_ini + (ang_fim - ang_ini) * pct_alert;
s += arco(cx, cy, r, ang_alert, ang_fim, "rgba(211, 47, 47, 0.7)", 6);

// ESCALA PRINCIPAL E NÚMEROS
var total_ticks = 10;
for (var i = 0; i <= total_ticks; i++) {
    var frac  = i / total_ticks;
    var ang_t = ang_ini + (ang_fim - ang_ini) * frac;

var p_ext = pt(cx, cy, r,      ang_t);
    var p_int = pt(cx, cy, r - 15, ang_t);
    var p_num = pt(cx, cy, r - 35, ang_t);

s += "<line x1='" + p_ext.x + "' y1='" + p_ext.y + "' x2='" + p_int.x + "' y2='" + p_int.y + "' stroke='#222222' stroke-width='3' stroke-linecap='square' />";

var num_val = valor_minimo + frac * (valor_maximo - valor_minimo);
    if (i % 2 === 0 || total_ticks <= 5) {
        s += "<text x='" + p_num.x + "' y='" + (p_num.y + 6) + "' fill='#111111' font-size='18' font-weight='bold' text-anchor='middle'>" +
             (Number.isInteger(num_val) ? num_val : num_val.toFixed(1)) + "</text>";
    }
}

// TICKS MENORES (Subdivisões)
var sub_ticks = total_ticks * 5; 
for (var j = 0; j <= sub_ticks; j++) {
    if (j % 5 !== 0) {
        var f   = j / sub_ticks;
        var am  = ang_ini + (ang_fim - ang_ini) * f;
        var pm1 = pt(cx, cy, r, am);
        var pm2 = pt(cx, cy, r - 8, am);
        s += "<line x1='" + pm1.x + "' y1='" + pm1.y + "' x2='" + pm2.x + "' y2='" + pm2.y + "' stroke='#555555' stroke-width='1.5' stroke-linecap='square' />";
    }
}

// TEXTO DA UNIDADE
s += "<text x='" + cx + "' y='" + (cy - 45) + "' fill='#666666' font-size='16' font-weight='bold' text-anchor='middle'>" + unidade + "</text>";

// DISPLAY DIGITAL REBAIXADO
var bx = cx;
var by = cy + 50;
s += "<rect x='" + (bx - 35) + "' y='" + (by - 15) + "' width='70' height='26' rx='3' ry='3' fill='#e9e9e9' stroke='#ccc' stroke-width='1' filter='url(#inner_shadow_" + gaugeId + ")'/>";
s += "<text id='" + valorTextId + "' x='" + bx + "' y='" + (by + 3) + "' fill='" + cor_texto_digital + "' font-size='16' font-family='monospace' font-weight='bold' letter-spacing='1' text-anchor='middle'>" + v.toFixed(casas) + "</text>";

// AGULHA MECÂNICA REALISTA
var tip    = pt(cx, cy, r - 10, ang_ini);
var base_l = pt(cx, cy, 8,      ang_ini + 90);
var base_r = pt(cx, cy, 8,      ang_ini - 90);
var tail   = pt(cx, cy, 30,     ang_ini + 180);

s += "<g id='" + needleId + "' style='transform-origin:" + cx + "px " + cy + "px; transform: rotate(" + delta_deg + "deg);'>";
s += "<polygon points='" + tip.x + "," + tip.y + " " + base_l.x + "," + base_l.y + " " + tail.x + "," + tail.y + " " + base_r.x + "," + base_r.y + "' fill='rgba(0,0,0,0.2)' transform='translate(3,3)' />";
s += "<polygon points='" + tip.x + "," + tip.y + " " + base_l.x + "," + base_l.y + " " + tail.x + "," + tail.y + " " + base_r.x + "," + base_r.y + "' fill='#1a1a1a' stroke='#000' stroke-width='1' />";
s += "</g>";

// PINO CENTRAL MECÂNICO
s += "<circle cx='" + cx + "' cy='" + cy + "' r='14' fill='#222' stroke='#444' stroke-width='2' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='6' fill='#dcdcdc' />";

s += "</svg>";
s += "</div>";

// ---------------------------
// SCRIPT DE ANIMAÇÃO PURO
// ---------------------------
s += "<script>(function(){";
s += "try{";
s += "var id='" + gaugeId + "';";
s += "var novoDelta=" + delta_deg + ";";
s += "var novoValor=" + v + ";";
s += "var casasDec=" + casas + ";";
s += "var duracao=" + duracao_transicao_ms + ";";
s += "window.__gaugeAnim=window.__gaugeAnim||{};";
s += "var prev=window.__gaugeAnim[id];";
s += "if(!prev){prev={delta:novoDelta,valor:novoValor};}";
s += "var needle=document.getElementById('" + needleId + "');";
s += "var valorEl=document.getElementById('" + valorTextId + "');";
s += "if(needle){";
s += "needle.style.transition='none';";
s += "needle.style.transform='rotate('+prev.delta+'deg)';";
s += "needle.getBoundingClientRect();";
s += "requestAnimationFrame(function(){";
s += "requestAnimationFrame(function(){";
s += "needle.style.transition='transform '+(duracao/1000)+'s cubic-bezier(0.34, 1.56, 0.64, 1)';";
s += "needle.style.transform='rotate('+novoDelta+'deg)';";
s += "});";
s += "});";
s += "}";
s += "var deValor=prev.valor,dvDelta=(novoValor-prev.valor);";
s += "var t0=null;";
s += "function passo(ts){";
s += "if(!t0)t0=ts;";
s += "var p=Math.min((ts-t0)/duracao,1);";
s += "var pe=1-Math.pow(1-p,3);";
s += "if(valorEl)valorEl.textContent=(deValor+dvDelta*pe).toFixed(casasDec);";
s += "if(p<1)requestAnimationFrame(passo);";
s += "else if(valorEl)valorEl.textContent=novoValor.toFixed(casasDec);";
s += "}";
s += "requestAnimationFrame(passo);";
s += "window.__gaugeAnim[id]={delta:novoDelta,valor:novoValor};";
s += "}catch(e){}";
s += "})();\x3c\x2fscript\x3e";

return s;

Gauge Manômetro

// ===================================================
// MANÔMETRO INDUSTRIAL WARME - SCADA-LTS (V4.2 CSS NATIVE)
// ===================================================

// ---------------------------
// CONFIGURAÇÕES E CALIBRAÇÃO
// ---------------------------

// Duração da transição (ms). Deixe menor que o intervalo de leitura (2000ms)
var duracao_transicao_ms = 1400;

// IMPORTANTE: se você usar mais de um gauge na mesma tela,
// dê um valor DIFERENTE aqui para cada um (ex: "gauge1", "gauge2"...)
var gauge_instance_id = "warme_principal";

// ---------------------------
// LEITURA, SANITIZAÇÃO E CONVERSÃO (Entra 0-100, vira 0-10)
// ---------------------------
var valor_minimo_clp = 0;
var valor_maximo_clp = 100;

var valor_bruto = parseFloat(value);
if (isNaN(valor_bruto)) valor_bruto = 0;

// Trava nos limites de entrada do CLP (0 a 100)
if (valor_bruto < valor_minimo_clp) valor_bruto = valor_minimo_clp;
if (valor_bruto > valor_maximo_clp) valor_bruto = valor_maximo_clp;

// CONVERSÃO DE LEITURA: O dado lido é de 0 a 100, mas o operador vê de 0 a 10
var v = valor_bruto / 10;

var valor_minimo_exibido = 0;
var valor_maximo_exibido = 10;
var pct = (v - valor_minimo_exibido) / (valor_maximo_exibido - valor_minimo_exibido);

// ---------------------------
// PARÂMETROS GEOMÉTRICOS (Réplica do Físico)
// ---------------------------
var W  = 450;
var H  = 450;
var cx = W / 2;
var cy = H / 2;

// O arco do manômetro real ocupa cerca de 270 graus de abertura
var ang_span_total = 270;
var ang_meio       = 90; // Voltado para baixo
var ang_ini        = ang_meio + (360 - ang_span_total) / 2;
var ang_fim        = ang_ini + ang_span_total;

// Ângulo absoluto em graus (onde 0° absoluto para o SVG é à direita)
var ang_agulha = ang_ini + (ang_fim - ang_ini) * pct;

// Delta em graus relativo ao ponto inicial de calibração (ang_ini)
var delta_deg = ang_agulha - ang_ini;

// Funções trigonométricas para renderizar as escalas internas e externas
function rad(d) { return d * Math.PI / 180; }
function pt(r, graus) {
    return {
        x: cx + Math.cos(rad(graus)) * r,
        y: cy + Math.sin(rad(graus)) * r
    };
}

// hash simples pra gerar um ID estável por gauge
function hashStr(str) {
    var h = 0;
    for (var i = 0; i < str.length; i++) {
        h = (h * 31 + str.charCodeAt(i)) | 0;
    }
    return Math.abs(h).toString(36);
}

// ---------------------------
// IDs ÚNICOS PARA ESTE GAUGE (Engine V4.2)
// ---------------------------
var idBase      = gauge_instance_id + "|" + valor_minimo_clp + "|" + valor_maximo_clp;
var gaugeId     = "gauge_" + hashStr(idBase);
var needleId    = gaugeId + "_needle";

// ---------------------------
// MONTAGEM HTML / SVG
// ---------------------------
var s = "";

s += "<div id='" + gaugeId + "' style='" +
     "display:inline-block;" +
     "background:transparent;" +
     "font-family:\"Arial\", \"Helvetica\", sans-serif;" +
     "transform:scale(0.55);" + // Mantido o tamanho reduzido pela metade solicitado anteriormente
     "transform-origin:top left;" +
     "'>";

s += "<svg width='" + W + "' height='" + H + "' viewBox='0 0 " + W + " " + H + "'>";

// CAIXA METALIZADA INOX (Borda do instrumento)
s += "<circle cx='" + cx + "' cy='" + cy + "' r='190' fill='#f4f4f6' stroke='#b5b8bc' stroke-width='3' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='184' fill='#ffffff' stroke='#3a3d40' stroke-width='1.5' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='180' fill='#fdfdfd' />"; // Fundo Branco

// ---------------------------
// ESCALA EXTERNA (BAR - CINZA ESCURO: 0 a 10)
// ---------------------------
var ticks_bar = 20; 
for (var i = 0; i <= ticks_bar; i++) {
    var frac = i / ticks_bar;
    var ang_t = ang_ini + (ang_fim - ang_ini) * frac;
    
    var is_main = (i % 2 === 0); 
    var r_ext = 172;
    var r_int = is_main ? 158 : 164;
    
    var p1 = pt(r_ext, ang_t);
    var p2 = pt(r_int, ang_t);
    
    s += "<line x1='" + p1.x + "' y1='" + p1.y + "' x2='" + p2.x + "' y2='" + p2.y + "' stroke='#2b2e31' stroke-width='" + (is_main ? 1.8 : 1) + "' />";
    
    if(is_main && i < ticks_bar) {
        for(var j = 1; j < 10; j++) {
            var ang_sub = ang_t + ((ang_fim - ang_ini) / ticks_bar) * (j / 10);
            var ps1 = pt(r_ext, ang_sub);
            var ps2 = pt(r_ext - 4, ang_sub);
            s += "<line x1='" + ps1.x + "' y1='" + ps1.y + "' x2='" + ps2.x + "' y2='" + ps2.y + "' stroke='#4a4d50' stroke-width='0.6' />";
        }
    }

if (is_main) {
        var p_text = pt(144, ang_t);
        var val_bar = (frac * 10);
        var texto_bar = Number.isInteger(val_bar) ? val_bar : val_bar.toString().replace('.', ',');
        s += "<text x='" + p_text.x + "' y='" + (p_text.y + 4) + "' fill='#2b2e31' font-size='12' font-weight='bold' text-anchor='middle'>" + texto_bar + "</text>";
    }
}

// ---------------------------
// ESCALA INTERNA (PSI - VERMELHA: 0 a 150)
// ---------------------------
var ticks_psi = 15; 
for (var i = 0; i <= ticks_psi; i++) {
    var frac = i / ticks_psi;
    var ang_t = ang_ini + (ang_fim - ang_ini) * frac;
    
    var r_ext_p = 126;
    var r_int_p = 116;
    
    var p1 = pt(r_ext_p, ang_t);
    var p2 = pt(r_int_p, ang_t);
    
    s += "<line x1='" + p1.x + "' y1='" + p1.y + "' x2='" + p2.x + "' y2='" + p2.y + "' stroke='#af382f' stroke-width='1.2' />";
    
    if (i < ticks_psi) {
        for(var j = 1; j < 5; j++) {
            var ang_sub_p = ang_t + ((ang_fim - ang_ini) / ticks_psi) * (j / 5);
            var ps1 = pt(r_ext_p, ang_sub_p);
            var ps2 = pt(r_ext_p - 5, ang_sub_p);
            s += "<line x1='" + ps1.x + "' y1='" + ps1.y + "' x2='" + ps2.x + "' y2='" + ps2.y + "' stroke='#af382f' stroke-width='0.7' />";
        }
    }

var p_text_p = pt(102, ang_t);
    s += "<text x='" + p_text_p.x + "' y='" + (p_text_p.y + 4) + "' fill='#af382f' font-size='11' font-weight='normal' text-anchor='middle'>" + Math.round(frac * 150) + "</text>";
}

// Linhas circulares de guia
s += "<circle cx='" + cx + "' cy='" + cy + "' r='172' fill='none' stroke='#2b2e31' stroke-width='1' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='126' fill='none' stroke='#af382f' stroke-width='0.8' />";

// TEXTOS INFORMATIVOS CENTRAIS
s += "<text x='" + cx + "' y='" + (cy - 46) + "' fill='#2b2e31' font-size='10' font-weight='bold' text-anchor='middle' letter-spacing='0.5'>MANÔMETRO DE TESTE</text>";
s += "<text x='" + cx + "' y='" + (cy - 34) + "' fill='#2b2e31' font-size='8' text-anchor='middle'>DIVISÃO <tspan font-weight='bold'>0,05 bar</tspan></text>";
s += "<text x='" + cx + "' y='" + (cy - 24) + "' fill='#af382f' font-size='8' text-anchor='middle'>1 psi</text>";
s += "<text x='" + cx + "' y='" + (cy + 48) + "' fill='#2b2e31' font-size='9' text-anchor='middle'>PRECISÃO ± 0,5%</text>";

// Unidades de Medida
s += "<text x='" + cx + "' y='" + (cy + 74) + "' fill='#af382f' font-size='14' font-weight='bold' text-anchor='middle'>psi</text>";
s += "<text x='" + cx + "' y='" + (cy + 92) + "' fill='#2b2e31' font-size='14' font-weight='bold' text-anchor='middle'>bar</text>";

// LOGO WARME
s += "<ellipse cx='" + cx + "' cy='" + (cy + 120) + "' rx='22' ry='10' fill='none' stroke='#1a3a6c' stroke-width='1' stroke-dasharray='2,2' />";
s += "<text x='" + cx + "' y='" + (cy + 123) + "' fill='#1a3a6c' font-size='10' font-weight='900' text-anchor='middle' font-style='italic'>warme</text>";
s += "<text x='" + cx + "' y='" + (cy + 138) + "' fill='#2b2e31' font-size='7' font-weight='bold' text-anchor='middle'>IND. BRAS.</text>";

// Pino mecânico de repouso no zero
var p_pino = pt(162, ang_ini - 2);
s += "<circle cx='" + p_pino.x + "' cy='" + p_pino.y + "' r='2.5' fill='#b5b8bc' stroke='#5a5d60' stroke-width='0.5' />";

// ---------------------------
// AGULHA BASEADA EM ANG_INI (Eixo centralizado)
// Rotacionada nativamente a partir de delta_deg via CSS
// ---------------------------
// Ângulo de correção para desenhar a agulha deitada alinhada exatamente com o ang_ini do SVG:
var ang_ref_css = ang_ini;

var p_topo_m   = pt(171, ang_ref_css);
var p_corpo_1  = pt(40,  ang_ref_css + 180);
var p_gota_ct  = pt(22,  ang_ref_css + 180);
var p_rampa_l  = pt(3,   ang_ref_css - 90);
var p_rampa_r  = pt(3,   ang_ref_css + 90);
var p_larga_l  = pt(12,  ang_ref_css - 60);
var p_larga_r  = pt(12,  ang_ref_css + 60);

s += "<g id='" + needleId + "' style='transform-origin: " + cx + "px " + cy + "px; transform: rotate(" + delta_deg + "deg);'>";
// Agulha e contrapeso integrados em vetores puros referenciados ao ponto inicial
s += "  <line x1='" + cx + "' y1='" + cy + "' x2='" + p_topo_m.x + "' y2='" + p_topo_m.y + "' stroke='#1e2022' stroke-width='1.2' />";
s += "  <path d='M " + pt(40, ang_ref_css + 5).x + " " + pt(40, ang_ref_css + 5).y + 
               " L " + pt(40, ang_ref_css - 5).x + " " + pt(40, ang_ref_css - 5).y + 
               " L " + p_rampa_l.x + " " + p_rampa_l.y + 
               " L " + p_larga_l.x + " " + p_larga_l.y + 
               " A 14 14 0 0 1 " + p_larga_r.x + " " + p_larga_r.y + 
               " L " + p_rampa_r.x + " " + p_rampa_r.y + " Z' fill='#1e2022' />";
s += "  <circle cx='" + pt(16, ang_ref_css + 180).x + "' cy='" + pt(16, ang_ref_css + 180).y + "' r='2' fill='#95989c' />";
s += "  <circle cx='" + pt(28, ang_ref_css + 180).x + "' cy='" + pt(28, ang_ref_css + 180).y + "' r='2' fill='#95989c' />";
s += "</g>";

// Capa do pino central do eixo fixo
s += "<circle cx='" + cx + "' cy='" + cy + "' r='7' fill='#b5b8bc' stroke='#3a3d40' stroke-width='1' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='3' fill='#85888c' />";

s += "</svg>";
s += "</div>";

// ---------------------------
// SCRIPT DE ANIMAÇÃO MODELO V4.2 (CSS TRANSITION AUTOMÁTICA)
// ---------------------------
s += "<script>(function(){";
s += "try{";
s += "var id='" + gaugeId + "';";
s += "var novoDelta=" + delta_deg + ";";
s += "var duracao=" + duracao_transicao_ms + ";";
s += "window.__gaugeAnim = window.__gaugeAnim || {};";
s += "var prev = window.__gaugeAnim[id];";
s += "if(!prev){ prev = {delta:novoDelta}; }";
s += "var needle = document.getElementById('" + needleId + "');";
s += "if(needle){";
s += "  needle.style.transition='none';";
s += "  needle.style.transform='rotate('+prev.delta+'deg)';";
s += "  needle.getBoundingClientRect();"; // força reflow estrutural
s += "  requestAnimationFrame(function(){";
s += "    requestAnimationFrame(function(){";
s += "      needle.style.transition='transform '+(duracao/1000)+'s cubic-bezier(0.25, 1, 0.5, 1)';"; // Ajustado para transição mecânica firme
s += "      needle.style.transform='rotate('+novoDelta+'deg)';";
s += "    });";
s += "  });";
s += "}";
s += "window.__gaugeAnim[id]={delta:novoDelta};";
s += "}catch(e){}";
s += "})();</" + "script>";

return s;

📦

NVPR

Relógio HTML

</div>

<style>

#scadaClock{
    display:inline-block;
    background:linear-gradient(#3A3A3A,#222222);
    border:3px solid #666;
    border-radius:8px;
    padding:12px 20px;
    text-align:center;
    user-select:none;
    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.08),
        inset 0 -2px 6px rgba(0,0,0,.5),
        0 2px 6px rgba(0,0,0,.35);
}

#clockDate{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#D8D8D8;
    letter-spacing:1px;
    margin-bottom:8px;
}

#clockTime{
    font-family:Consolas, "Courier New", monospace;
    font-size:34px;
    font-weight:bold;
    color:#E6B800;
    letter-spacing:2px;
    text-shadow:none;
}

</style>

(function(){

function atualizar(){

var agora = new Date();

var dias = [
        "Domingo",
        "Segunda-feira",
        "Terça-feira",
        "Quarta-feira",
        "Quinta-feira",
        "Sexta-feira",
        "Sábado"
    ];

var dia = String(agora.getDate()).padStart(2,"0");
    var mes = String(agora.getMonth()+1).padStart(2,"0");
    var ano = agora.getFullYear();

var h = String(agora.getHours()).padStart(2,"0");
    var m = String(agora.getMinutes()).padStart(2,"0");
    var s = String(agora.getSeconds()).padStart(2,"0");

document.getElementById("clockDate").innerHTML =
        dias[agora.getDay()] + " - " + dia + "/" + mes + "/" + ano;

document.getElementById("clockTime").innerHTML =
        h + ":" + m + ":" + s;
}

atualizar();

if(window.scadaClockInterval)
    clearInterval(window.scadaClockInterval);

window.scadaClockInterval = setInterval(atualizar,1000);

})();

</script>

Troca de Telas

Visor com icones

/* Livre para uso sob a licença MIT */

// ── CONFIGURAÇÕES GERAIS ──────────────────────────────────────────
var descricao_do_datapoint = "SILO 2";
var prefixo = "";
var sufixo = " °C";
var casas_decimais = 1;

// ── LIMITES DE TEMPERATURA (°C) ───────────────────────────────────
var temp_min_ideal = 2.0;   // Abaixo disso → alerta de frio
var temp_max_ideal = 7.0;   // Acima disso → alerta de calor

// ── CORES POR STATUS ──────────────────────────────────────────────
var cor_frio    = "#00bfff";  // Azul  — temperatura muito baixa
var cor_normal  = "#ffdd00";  // Amarelo — temperatura ideal
var cor_quente  = "#ff4444";  // Vermelho — temperatura alta

// ── ESTILO GERAL ─────────────────────────────────────────────────
var largura_minima      = 140;
var altura_minima       = 90;
var cor_fundo           = "#1a1a2e";
var cor_descricao       = "#aaaacc";
var tamanho_fonte_desc  = 13;
var tamanho_fonte_val   = 26;
var usar_negrito        = true;
var borda_arredondada   = true;
var mostrar_timestamp   = false;
var mostrar_icone       = true;

// ── NÃO ALTERE A PARTIR DAQUI ────────────────────────────────────

var classeDp = "datapoint_" + pointComponent.id;

// Determina status e cor do valor
var cor_valores, icone, status, animar;
if (value < temp_min_ideal) {
    cor_valores = cor_frio;
    icone       = "❄️";
    status      = "FRIO";
    animar      = true;
} else if (value > temp_max_ideal) {
    cor_valores = cor_quente;
    icone       = "🔥";
    status      = "QUENTE";
    animar      = true;
} else {
    cor_valores = cor_normal;
    icone       = "✅";
    status      = "OK";
    animar      = false;
}

// Formata valor e hora
var valorFormatado = prefixo + value.toFixed(casas_decimais) + sufixo;
var agora = new Date();
var horaFormatada = agora.getHours().toString().padStart(2, "0") + ":"
                  + agora.getMinutes().toString().padStart(2, "0") + ":"
                  + agora.getSeconds().toString().padStart(2, "0");

// ── HTML ──────────────────────────────────────────────────────────
var s = "";
s += "<div class='" + classeDp + "'>";

if (descricao_do_datapoint && descricao_do_datapoint.length > 0) {
    s += "  <div class='titulo'>" + descricao_do_datapoint + "</div>";
}

s += "  <div class='valor'>";
if (mostrar_icone) {
    s += "<span class='icone'>" + icone + "</span> ";
}
s += valorFormatado;
s += "  </div>";

if (mostrar_timestamp) {
    s += "  <div class='timestamp'>Última leitura: " + horaFormatada + "</div>";
}

s += "</div>";

// ── CSS ───────────────────────────────────────────────────────────
s += "<style>";

s += "." + classeDp + " {";
s += "  display: flex;";
s += "  flex-direction: column;";
s += "  justify-content: center;";
s += "  align-items: center;";
s += "  height: " + altura_minima + "px;";
s += "  width: " + largura_minima + "px;";
s += "  background: linear-gradient(145deg, " + cor_fundo + ", #16213e);";
s += "  border: 1.5px solid " + cor_valores + ";";
s += "  box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 8px " + cor_valores + "44;";
if (borda_arredondada) s += "  border-radius: 14px;";
s += "  box-sizing: border-box;";
s += "  font-family: 'Arial', sans-serif;";
if (usar_negrito) s += "  font-weight: bold;";
s += "  padding: 8px;";
if (animar) s += "  animation: " + classeDp + "_pulse 1.2s infinite;";
s += "}";

s += "." + classeDp + " .titulo {";
s += "  color: " + cor_descricao + ";";
s += "  font-size: " + tamanho_fonte_desc + "px;";
s += "  font-weight: normal;";
s += "  letter-spacing: 1px;";
s += "  text-transform: uppercase;";
s += "  margin-bottom: 4px;";
s += "}";

s += "." + classeDp + " .valor {";
s += "  color: " + cor_valores + ";";
s += "  font-size: " + tamanho_fonte_val + "px;";
s += "  line-height: 1.1;";
s += "  text-shadow: 0 0 8px " + cor_valores + "88;";
s += "}";

s += "." + classeDp + " .icone {";
s += "  font-size: " + (tamanho_fonte_val - 6) + "px;";
s += "}";

s += "." + classeDp + " .timestamp {";
s += "  color: #555577;";
s += "  font-size: 10px;";
s += "  font-weight: normal;";
s += "  margin-top: 5px;";
s += "}";

if (animar) {
    s += "@keyframes " + classeDp + "_pulse {";
    s += "  0%   { box-shadow: 0 0 6px " + cor_valores + "66; }";
    s += "  50%  { box-shadow: 0 0 18px " + cor_valores + "cc; }";
    s += "  100% { box-shadow: 0 0 6px " + cor_valores + "66; }";
    s += "}";
}

s += "</style>";

return s;

Silo

/* Livre para uso sob a licença MIT */

// ── CONFIGURAÇÕES GERAIS ──────────────────────────────────────────
var descricao_do_datapoint = "SILO 2";
var prefixo = "";
var sufixo = " °C";
var casas_decimais = 1;

// ── LIMITES DE TEMPERATURA (°C) ───────────────────────────────────
var temp_min_ideal = 2.0;
var temp_max_ideal = 7.0;

// ── NÍVEL DO LEITE (0.0 a 1.0) ───────────────────────────────────
// Se você tiver outro datapoint com nível, substitua o valor abaixo
var nivel_leite = 0.75; // 75% cheio

// ── NÃO ALTERE A PARTIR DAQUI ────────────────────────────────────

var classeDp = "silo_" + pointComponent.id;

// Status por temperatura
var cor_valor, cor_borda, cor_leite, icone, animar;
if (value < temp_min_ideal) {
    cor_valor  = "#00bfff";
    cor_borda  = "#00bfff";
    cor_leite  = "#a0d8ef";
    icone      = "❄️";
    animar     = true;
} else if (value > temp_max_ideal) {
    cor_valor  = "#ff4444";
    cor_borda  = "#ff4444";
    cor_leite  = "#ffaaaa";
    icone      = "🔥";
    animar     = true;
} else {
    cor_valor  = "#ffdd00";
    cor_borda  = "#44cc88";
    cor_leite  = "#cceeff";
    icone      = "✅";
    animar     = false;
}

var valorFormatado = prefixo + value.toFixed(casas_decimais) + sufixo;

// Dimensões do SVG
var W = 160;
var H = 260;

// Geometria do silo
var cx      = W / 2;           // centro X
var siloX   = 30;              // X esquerda do corpo
var siloW   = 100;             // largura do corpo
var siloY   = 40;              // Y topo do corpo (abaixo do domo)
var siloH   = 150;             // altura do corpo retangular
var domoH   = 35;              // altura do domo (elipse superior)
var baseH   = 25;              // altura da base cônica
var baseY   = siloY + siloH;  // Y onde começa a base
var pilarH  = 12;              // altura dos pés
var pilarY  = baseY + baseH;  // Y onde começa os pés

// Nível do leite dentro do silo
var maxLiqH  = siloH + baseH * 0.6;
var liqH     = maxLiqH * nivel_leite;
var liqY     = baseY - liqH + baseH * 0.4;

// Ponto de saída da base cônica
var baseMidX = cx;
var baseBotY = baseY + baseH;

var s = "";

// ── HTML + SVG ───────────────────────────────────────────────────
s += "<div class='" + classeDp + "_wrap'>";
s += "<svg width='" + W + "' height='" + H + "' xmlns='http://www.w3.org/2000/svg'>";

// === DEFINIÇÕES (gradientes, clip) ===
s += "<defs>";

// Gradiente do corpo do silo
s += "<linearGradient id='" + classeDp + "_gSilo' x1='0' y1='0' x2='1' y2='0'>";
s += "  <stop offset='0%'   stop-color='#2a2a3e'/>";
s += "  <stop offset='40%'  stop-color='#3d3d5c'/>";
s += "  <stop offset='100%' stop-color='#1a1a2e'/>";
s += "</linearGradient>";

// Gradiente do leite
s += "<linearGradient id='" + classeDp + "_gLeite' x1='0' y1='0' x2='0' y2='1'>";
s += "  <stop offset='0%'   stop-color='" + cor_leite + "' stop-opacity='0.95'/>";
s += "  <stop offset='100%' stop-color='" + cor_leite + "' stop-opacity='0.6'/>";
s += "</linearGradient>";

// Gradiente brilho lateral
s += "<linearGradient id='" + classeDp + "_gBrilho' x1='0' y1='0' x2='1' y2='0'>";
s += "  <stop offset='0%'   stop-color='#ffffff' stop-opacity='0.08'/>";
s += "  <stop offset='35%'  stop-color='#ffffff' stop-opacity='0.18'/>";
s += "  <stop offset='100%' stop-color='#000000' stop-opacity='0.15'/>";
s += "</linearGradient>";

// ClipPath para o leite ficar dentro do silo
s += "<clipPath id='" + classeDp + "_clip'>";
s += "  <rect x='" + siloX + "' y='" + siloY + "' width='" + siloW + "' height='" + (siloH + baseH + 2) + "'/>";
s += "</clipPath>";

s += "</defs>";

// === SOMBRA DO SILO (elipse no chão) ===
s += "<ellipse cx='" + cx + "' cy='" + (pilarY + pilarH + 4) + "' rx='52' ry='7' fill='rgba(0,0,0,0.35)'/>";

// === PÉS / SUPORTES ===
var p1x = siloX + 18;
var p2x = siloX + siloW - 18;
s += "<rect x='" + (p1x - 4) + "' y='" + pilarY + "' width='8' height='" + pilarH + "' rx='2' fill='#555577'/>";
s += "<rect x='" + (p2x - 4) + "' y='" + pilarY + "' width='8' height='" + pilarH + "' rx='2' fill='#555577'/>";
// Barra horizontal entre os pés
s += "<rect x='" + (p1x - 4) + "' y='" + (pilarY + pilarH - 4) + "' width='" + (p2x - p1x + 8) + "' height='4' rx='2' fill='#444466'/>";

// === BASE CÔNICA ===
s += "<polygon points='";
s += (siloX) + "," + baseY + " ";
s += (siloX + siloW) + "," + baseY + " ";
s += (p2x + 4) + "," + (pilarY) + " ";
s += (p1x - 4) + "," + (pilarY);
s += "' fill='url(#" + classeDp + "_gSilo)' stroke='" + cor_borda + "' stroke-width='1.2'/>";

// === LEITE NA BASE CÔNICA (clipped) ===
if (nivel_leite > 0) {
    s += "<g clip-path='url(#" + classeDp + "_clip)'>";
    // Retângulo de leite no corpo
    s += "<rect x='" + siloX + "' y='" + liqY + "' width='" + siloW + "' height='" + (baseY - liqY) + "' fill='url(#" + classeDp + "_gLeite)'/>";
    // Ondinha na superfície do leite
    var waveY = liqY;
    s += "<path d='M" + siloX + "," + waveY;
    s += " Q" + (cx - 25) + "," + (waveY - 5) + " " + cx + "," + waveY;
    s += " Q" + (cx + 25) + "," + (waveY + 5) + " " + (siloX + siloW) + "," + waveY;
    s += " L" + (siloX + siloW) + "," + (waveY + 8);
    s += " Q" + (cx + 25) + "," + (waveY + 13) + " " + cx + "," + (waveY + 8);
    s += " Q" + (cx - 25) + "," + (waveY + 3) + " " + siloX + "," + (waveY + 8) + " Z'";
    s += " fill='" + cor_leite + "' opacity='0.7'/>";
    s += "</g>";
}

// === CORPO PRINCIPAL DO SILO ===
s += "<rect x='" + siloX + "' y='" + siloY + "' width='" + siloW + "' height='" + siloH + "'";
s += " fill='url(#" + classeDp + "_gSilo)'";
s += " stroke='" + cor_borda + "' stroke-width='1.5'/>";

// Brilho lateral no corpo
s += "<rect x='" + siloX + "' y='" + siloY + "' width='" + siloW + "' height='" + siloH + "'";
s += " fill='url(#" + classeDp + "_gBrilho)'/>";

// Linhas decorativas horizontais (anéis do silo)
var numAneis = 5;
for (var i = 1; i < numAneis; i++) {
    var ay = siloY + (siloH / numAneis) * i;
    s += "<line x1='" + siloX + "' y1='" + ay + "' x2='" + (siloX + siloW) + "' y2='" + ay + "'";
    s += " stroke='" + cor_borda + "' stroke-width='0.5' stroke-opacity='0.35'/>";
}

// === DOMO SUPERIOR ===
// Elipse de fundo (parte de baixo do domo)
s += "<ellipse cx='" + cx + "' cy='" + siloY + "' rx='" + (siloW / 2) + "' ry='10'";
s += " fill='#2a2a3e' stroke='" + cor_borda + "' stroke-width='1.5'/>";
// Domo em arco
s += "<path d='M" + siloX + "," + siloY;
s += " Q" + cx + "," + (siloY - domoH * 2) + " " + (siloX + siloW) + "," + siloY + "'";
s += " fill='#2e2e48' stroke='" + cor_borda + "' stroke-width='1.5'/>";
// Reflexo no domo
s += "<path d='M" + (siloX + 20) + "," + siloY;
s += " Q" + (cx - 5) + "," + (siloY - domoH * 1.5) + " " + (siloX + siloW - 25) + "," + (siloY - 5) + "'";
s += " fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='3' stroke-linecap='round'/>";

// Chapéu do topo (pequeno cilindro + tampa)
s += "<rect x='" + (cx - 10) + "' y='" + (siloY - domoH * 2 - 10) + "' width='20' height='10' rx='3'";
s += " fill='#3a3a5a' stroke='" + cor_borda + "' stroke-width='1'/>";
s += "<ellipse cx='" + cx + "' cy='" + (siloY - domoH * 2 - 10) + "' rx='10' ry='4'";
s += " fill='#4a4a6a' stroke='" + cor_borda + "' stroke-width='1'/>";

// === BARRA DE NÍVEL (lado direito) ===
var barX   = siloX + siloW + 8;
var barY   = siloY;
var barH   = siloH;
var barW   = 8;
var fillH  = barH * nivel_leite;
var fillY  = barY + barH - fillH;

s += "<rect x='" + barX + "' y='" + barY + "' width='" + barW + "' height='" + barH + "' rx='3' fill='#1a1a2e' stroke='#444466' stroke-width='1'/>";
s += "<rect x='" + barX + "' y='" + fillY + "' width='" + barW + "' height='" + fillH + "' rx='3' fill='" + cor_leite + "' opacity='0.85'/>";
// Label % nível
s += "<text x='" + (barX + barW / 2) + "' y='" + (barY + barH + 12) + "'";
s += " font-family='Arial' font-size='9' fill='#aaaacc' text-anchor='middle'>";
s += Math.round(nivel_leite * 100) + "%";
s += "</text>";

// === TEXTOS ===
// Descrição
s += "<text x='" + cx + "' y='" + (H - 38) + "'";
s += " font-family='Arial' font-size='11' font-weight='bold'";
s += " fill='#aaaacc' text-anchor='middle' letter-spacing='1'>";
s += descricao_do_datapoint;
s += "</text>";

// Temperatura
s += "<text x='" + cx + "' y='" + (H - 20) + "'";
s += " font-family='Arial' font-size='20' font-weight='bold'";
s += " fill='" + cor_valor + "' text-anchor='middle'";
s += " filter='url(#" + classeDp + "_glow)'>";
s += icone + " " + valorFormatado;
s += "</text>";

s += "</svg>";
s += "</div>";

// ── CSS ───────────────────────────────────────────────────────────
s += "<style>";
s += "." + classeDp + "_wrap {";
s += "  display: inline-block;";
s += "  background: #12121f;";
s += "  border-radius: 16px;";
s += "  border: 1.5px solid " + cor_borda + ";";
s += "  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 12px " + cor_borda + "44;";
s += "  padding: 10px 10px 6px 10px;";
if (animar) {
    s += "  animation: " + classeDp + "_pulse 1.4s ease-in-out infinite;";
}
s += "}";

if (animar) {
    s += "@keyframes " + classeDp + "_pulse {";
    s += "  0%   { box-shadow: 0 0 8px "  + cor_borda + "55; }";
    s += "  50%  { box-shadow: 0 0 22px " + cor_borda + "cc; }";
    s += "  100% { box-shadow: 0 0 8px "  + cor_borda + "55; }";
    s += "}";
}

s += "</style>";

return s;

Slider

/* @license MIT */

// Configuração
var minimo = 0;
var maximo = 10;
var largura = 260;

// Valor recebido do controlador
var slider = value / 10;

if (slider < minimo) slider = minimo;
if (slider > maximo) slider = maximo;

var sliderId = "slider_" + point.id;
var valorId = "valor_" + point.id;

var s = "";

// Painel
s += "<div style='";
s += "width:" + largura + "px;";
s += "padding:20px;";
s += "background:#111;";
s += "border:2px solid #00FFFF;";
s += "border-radius:15px;";
s += "box-shadow:0 0 20px #00FFFF;";
s += "font-family:Arial;";
s += "text-align:center;";
s += "'>";

// Valor
s += "<div id='" + valorId + "' style='";
s += "color:#00FFFF;";
s += "font-size:26px;";
s += "font-weight:bold;";
s += "text-shadow:0 0 10px #00FFFF;";
s += "margin-bottom:15px;";
s += "'>";
s += slider.toFixed(1);
s += "</div>";

// Slider
s += "<input";
s += " id='" + sliderId + "'";
s += " type='range'";
s += " min='" + minimo + "'";
s += " max='" + maximo + "'";
s += " step='0.1'";
s += " value='" + slider + "'";
s += " style='width:220px;cursor:pointer;'";

// Atualiza valor na tela
s += " oninput=\"";
s += "document.getElementById('" + valorId + "').innerHTML=parseFloat(this.value).toFixed(1);";
s += "\"";

// Envia ao controlador
s += " onchange=\"";
s += "var v=Math.round(document.getElementById('" + sliderId + "').value*10);";
s += "mango.view.setPoint(" + point.id + "," + pointComponent.id + ",v);";
s += "\"";

s += ">";

// Escala
s += "<div style='";
s += "display:flex;";
s += "justify-content:space-between;";
s += "margin-top:10px;";
s += "color:#00FFFF;";
s += "font-weight:bold;";
s += "font-size:14px;";
s += "'>";

for (var i = minimo; i <= maximo; i++) {
    s += "<span>" + i + "</span>";
}

s += "</div>";
s += "</div>";

return s;

Nível Vertical

/* @license MIT */

// Escala
var scale_min = 0;
var scale_max = 100;

// Dimensões
var gallon_width = 170;
var gallon_height = 250;

// Cor do líquido
var liquid_color = "#12CE00";

// Conversão do valor para %
var percentage = 0;

if (value >= scale_max)
    percentage = 100;
else if (value <= scale_min)
    percentage = 0;
else
    percentage = ((value - scale_min) / (scale_max - scale_min)) * 100;

// HTML
var s = "";

s += "<div style='";
s += "position:relative;";
s += "width:" + gallon_width + "px;";
s += "height:" + gallon_height + "px;";
s += "margin:auto;";
s += "'>";

// Corpo do galão
s += "<div style='";
s += "position:absolute;";
s += "left:10px;";
s += "top:20px;";
s += "width:150px;";
s += "height:220px;";
s += "border-radius:20px 20px 12px 12px;";
s += "background:linear-gradient(90deg,#6d6d6d 0%,#dcdcdc 20%,#f8f8f8 50%,#c5c5c5 80%,#707070 100%);";
s += "border:2px solid #555;";
s += "box-shadow:inset 0 0 20px rgba(255,255,255,.7), inset 0 0 40px rgba(0,0,0,.25);";
s += "'>";

// Gargalo
s += "<div style='";
s += "position:absolute;";
s += "left:55px;";
s += "top:-18px;";
s += "width:40px;";
s += "height:25px;";
s += "background:linear-gradient(90deg,#707070,#f2f2f2,#707070);";
s += "border:2px solid #555;";
s += "border-radius:8px 8px 0 0;";
s += "'></div>";

// Tampa
s += "<div style='";
s += "position:absolute;";
s += "left:48px;";
s += "top:-32px;";
s += "width:54px;";
s += "height:14px;";
s += "background:#3b3b3b;";
s += "border-radius:5px;";
s += "'></div>";

// Título
s += "<div style='";
s += "position:absolute;";
s += "left:45px;";
s += "top:2px;";
s += "width:60px;";
s += "text-align:center;";
s += "font-size:11px;";
s += "font-weight:bold;";
s += "font-family:Arial;";
s += "color:#444;";
s += "'>BAR</div>";

// Visor
s += "<div style='";
s += "position:absolute;";
s += "left:67px;";
s += "top:18px;";
s += "width:16px;";
s += "height:185px;";
s += "background:#FFFFFF;";
s += "border:2px solid #BBBBBB;";
s += "border-radius:8px;";
s += "overflow:hidden;";
s += "'>";

// Líquido
s += "<div style='";
s += "position:absolute;";
s += "left:0;";
s += "bottom:0;";
s += "width:100%;";
s += "height:" + percentage + "%;";
s += "background:" + liquid_color + ";";
s += "'></div>";

s += "</div>";

// Escala de 0 a 10 litros
for (var i = 0; i <= 10; i++) {

var y = 18 + (185 - (185 * i / 10));

// Número esquerdo
    s += "<div style='";
    s += "position:absolute;";
    s += "left:14px;";
    s += "top:" + (y - 7) + "px;";
    s += "width:18px;";
    s += "font-size:11px;";
    s += "font-family:Arial;";
    s += "color:#333;";
    s += "text-align:right;";
    s += "'>" + i + "</div>";

// Traço esquerdo
    s += "<div style='";
    s += "position:absolute;";
    s += "left:38px;";
    s += "top:" + y + "px;";
    s += "width:18px;";
    s += "border-top:1px solid #444;";
    s += "'></div>";

// Traço direito
    s += "<div style='";
    s += "position:absolute;";
    s += "left:94px;";
    s += "top:" + y + "px;";
    s += "width:18px;";
    s += "border-top:1px solid #444;";
    s += "'></div>";

// Número direito
    s += "<div style='";
    s += "position:absolute;";
    s += "left:118px;";
    s += "top:" + (y - 7) + "px;";
    s += "width:20px;";
    s += "font-size:11px;";
    s += "font-family:Arial;";
    s += "color:#333;";
    s += "'>" + i + "</div>";
}

s += "</div>";

return s;

Texto

Nível

// Personalizar estilo da barra
var altura_barra = 150;
var largura_barra = 30;
var cor_fundo_barra = "#E0E0E0";
var cor_preenchimento = "#4A90E2";
var cor_borda = "#CCCCCC";
var mostrar_valor = true;
var mostrar_porcentagem = true;
var nome_etiqueta = "Nível do Tanque"; // Nome da etiqueta

// Configurações da variável
var valor_minimo = 0;
var valor_maximo = 100;
var unidade = "%"; // Unidade de medida

// NÃO ALTERE A PARTIR DAQUI
var s = "";

// Calcular a porcentagem de preenchimento
var porcentagem = ((value - valor_minimo) / (valor_maximo - valor_minimo)) * 100;
porcentagem = Math.max(0, Math.min(100, porcentagem)); // Limitar entre 0-100%

// Determinar cor baseada no nível (opcional)
var cor_dinamica = cor_preenchimento;
if (porcentagem >= 80) {
    cor_dinamica = "#28a745"; // Verde para níveis altos
} else if (porcentagem >= 60) {
    cor_dinamica = "#ffc107"; // Amarelo para níveis médios
} else if (porcentagem < 30) {
    cor_dinamica = "#dc3545"; // Vermelho para níveis baixos
}

// Container principal
s += "<div style='display: flex; flex-direction: column; align-items: center; font-family: Arial, sans-serif;'>";

// Etiqueta
s += "<label style='margin-bottom: 8px; font-size: 14px; color: #444; font-weight: 600;'>";
s += nome_etiqueta + "</label>";

// Container da barra
s += "<div style='position: relative; width: " + largura_barra + "px; height: " + altura_barra + "px; border: 2px solid " + cor_borda + "; border-radius: 8px; background-color: " + cor_fundo_barra + "; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>";

// Preenchimento da barra (de baixo para cima)
s += "<div style='position: absolute; bottom: 0; left: 0; width: 100%; height: " + porcentagem + "%; background: linear-gradient(0deg, " + cor_dinamica + " 0%, " + cor_dinamica + "AA 100%); transition: all 0.5s ease; border-radius: 0 0 6px 6px;'></div>";

// Marcações de escala (opcional)
for (var i = 0; i <= 4; i++) {
    var posicao = (i * 25);
    s += "<div style='position: absolute; right: -20px; bottom: " + posicao + "%; transform: translateY(50%); font-size: 10px; color: #666;'>" + (valor_minimo + (valor_maximo - valor_minimo) * (i/4)) + "</div>";
}

s += "</div>"; // Fecha container da barra

// Exibir valor atual
if (mostrar_valor) {
    s += "<div style='margin-top: 8px; font-size: 16px; font-weight: bold; color: " + cor_dinamica + ";'>";
    s += value + " " + unidade;
    s += "</div>";
}

// Exibir porcentagem
if (mostrar_porcentagem && !unidade.includes("%")) {
    s += "<div style='margin-top: 4px; font-size: 12px; color: #666;'>";
    s += "(" + Math.round(porcentagem) + "%)";
    s += "</div>";
}

s += "</div>"; // Fecha container principal

return s;

Interruptor

//------ CONFIGURAÇÃO ESTILO BOTÃO 
var largura = "110px"; 
var cor_bg = "transparent"; 
 
var cor_borda = "#ae6b22"; 
var cor_texto = "#e18b2d"; 
var estilo_normal   = "background-color:"+cor_bg+"; color:"+cor_texto + "; font-weight: bold; padding: 5px; width: "+ largura +"; border: 2px solid "+ cor_borda +"; border-radius: 8px;"; 
 
var cor_borda_erro = "#ff4030"; 
var cor_texto_erro = "#ff4030"; 
var estilo_erro     = "background-color:"+cor_bg+"; color:"+cor_texto_erro + "; font-weight: bold; padding: 5px; width: "+ largura +"; border: 2px solid "+ cor_borda_erro +"; border-radius: 8px;"; 
 
//------- MONTAGEM DA STRING HTML COM CONDICIONAL DE FUNCIONAMENTO DO BOTÃO 
var s = ""; 
 
 
if (value){ 
 s += "<button style='"+ estilo_normal +"' onclick='mango.view.setPoint("+ point.id +", &quot;"+ pointComponent.id +"&quot;, &quot;false&quot;);return false;'> ESTEIRA LIGADA </button>"; 
} 
else{ 
 s += "<button style='"+ estilo_erro +"' onclick='mango.view.setPoint("+ point.id +", &quot;"+ pointComponent.id +"&quot;, &quot;true&quot;);return false;'> ESTEIRA DESLIGADA </button>"; 
}     
 
return s;

Set Point

// CONFIGURAÇÃO - ajuste conforme desejar
var tipo = "number"; // "select" ou "number"
var nome_etiqueta = "Temperatura de Saída";
var altura = 50;
var largura = 260;
var cor_fundo = "#FFFFFF";
var cor_texto = "#333333";
var cor_borda = "#4A90E2";
var espessura_borda = "2px";
var cor_borda_focus = "#007BFF";
var cor_sombra = "rgba(74, 144, 226, 0.18)";
var borda_raio = "10px";
var fonte_tamanho = "14px";
var restringir_valores = true;

// Para tipo = "number"
var multiplos_de = 0.1;
var minimo = 0;
var maximo = 100;

// Para tipo = "select": opções (label + value)
var opcoes = [
  { label: "Desligado", value: 0 },
  { label: "Baixo", value: 10 },
  { label: "Médio", value: 20 },
  { label: "Alto", value: 30 }
];

// --- CAPTURA IDs NO SERVIDOR (antes de gerar HTML) ---
var pointId = point.id;
var componentId = pointComponent.id;

// --- GERA HTML ---
var s = "";
var uid = "scada" + pointId + "_" + componentId;
var h = Math.max(32, altura - 8);
var w = Math.max(80, largura - 8);

s += "<div style='display:flex;flex-direction:column;align-items:center;font-family:Inter, system-ui, sans-serif;'>";
s += "<label style='margin-bottom:6px;font-size:15px;color:#444;font-weight:600;'>" + nome_etiqueta + "</label>";
s += "<div style='display:flex;gap:8px;align-items:center;'>";

if (tipo === "select") {
  s += "<select id='" + uid + "_sel' style='height:" + h + "px;width:" + w + "px;padding:8px;background:" + cor_fundo + ";color:" + cor_texto + ";border:" + espessura_borda + " solid " + cor_borda + ";border-radius:" + borda_raio + ";font-size:" + fonte_tamanho + ";outline:none;'>";
  for (var i = 0; i < opcoes.length; i++) {
    var opt = opcoes[i];
    var sel = (typeof value !== "undefined" && String(value) === String(opt.value)) ? " selected" : "";
    s += "<option value='" + opt.value + "'" + sel + ">" + opt.label + "</option>";
  }
  s += "</select>";
} else {
  var dv = (typeof value !== "undefined") ? value : "";
  s += "<input id='" + uid + "_num' type='number' value='" + dv + "' ";
  if (restringir_valores) {
    s += "step='" + multiplos_de + "' min='" + minimo + "' max='" + maximo + "' ";
  }
  s += "style='height:" + h + "px;width:120px;padding:8px;background:" + cor_fundo + ";color:" + cor_texto + ";border:" + espessura_borda + " solid " + cor_borda + ";border-radius:" + borda_raio + ";font-size:" + fonte_tamanho + ";text-align:center;outline:none;' />";
}

s += "<button id='" + uid + "_btn' style='height:" + h + "px;padding:8px 16px;background:#4A90E2;color:white;border:none;border-radius:" + borda_raio + ";font-size:" + fonte_tamanho + ";font-weight:500;cursor:pointer;'>OK</button>";
s += "</div>";
s += "</div>";

// Script cliente com IDs passados como literais
s += "<script>";
s += "(function(){";
s += "var uid = '" + uid + "';";
s += "var pointId = " + pointId + ";";
s += "var componentId = " + componentId + ";";
s += "var serverValue = " + (typeof value !== "undefined" ? value : "null") + ";";

// Inicializa estado global se não existir
s += "if(!window.scadaState) window.scadaState = {};";
s += "if(!window.scadaState[uid]) window.scadaState[uid] = { editing: false, lastValue: serverValue };";

s += "var btn = document.getElementById(uid + '_btn');";
s += "var inp = document.getElementById(uid + '" + (tipo === "select" ? "_sel" : "_num") + "');";

s += "if(btn && inp){";

// Atualiza o campo apenas se não estiver editando E o valor do servidor mudou
s += "if(!window.scadaState[uid].editing && serverValue !== window.scadaState[uid].lastValue){";
s += "inp.value = serverValue;";
s += "window.scadaState[uid].lastValue = serverValue;";
s += "}";

// Marca como editando quando usuário interage
s += "inp.onfocus = function(){ window.scadaState[uid].editing = true; this.style.borderColor = '" + cor_borda_focus + "'; this.style.boxShadow = '0 0 0 3px " + cor_sombra + "'; };";
s += "inp.onblur = function(){ window.scadaState[uid].editing = false; this.style.borderColor = '" + cor_borda + "'; this.style.boxShadow = 'none'; };";
s += "inp.oninput = function(){ window.scadaState[uid].editing = true; };";

// Botão OK envia o valor
s += "btn.onclick = function(){";
s += "var v = inp.value;";
s += "if(v !== '' && !isNaN(v)) v = Number(v);";
s += "console.log('Enviando valor:', v, 'para pointId:', pointId, 'componentId:', componentId);";
s += "try{";
if (restringir_valores) {
  s += "if(inp.checkValidity()){";
}
s += "mango.view.setPoint(pointId, componentId, v);";
s += "window.scadaState[uid].lastValue = v;";
s += "window.scadaState[uid].editing = false;";
s += "btn.style.background = '#28a745';";
s += "btn.textContent = '✓';";
s += "setTimeout(function(){ btn.style.background = '#4A90E2'; btn.textContent = 'OK'; }, 600);";
if (restringir_valores) {
  s += "}else{ alert('Valor fora dos limites: min=" + minimo + " max=" + maximo + "'); }";
}
s += "}catch(e){ console.error('Erro ao enviar:', e); alert('Erro ao enviar: ' + e.message); }";
s += "};";

// Estilos hover
s += "btn.onmouseover = function(){ if(this.style.background !== 'rgb(40, 167, 69)') this.style.background = '#357abd'; };";
s += "btn.onmouseout = function(){ if(this.style.background !== 'rgb(40, 167, 69)') this.style.background = '#4A90E2'; };";

s += "}else{ console.error('Elementos não encontrados: btn=', btn, 'inp=', inp); }";
s += "})();";
s += "</script>";

return s

Visor

var altura = 30;
var largura = 70;
var cor_fundo = "#FFFFFF";
var cor_texto = "#333333";
var cor_borda = "#4A90E2";
var espessura_borda = "2px";
var cor_borda_focus = "#007BFF";
var cor_sombra = "rgba(74, 144, 226, 0.3)";
var nome_etiqueta = "Temperatura de Saída";
var sufixo = "°C";
var restringir_valores = true;
var multiplos_de = 0.1; // ✅ MUDANÇA: permite decimais
var minimo = 0;
var maximo = 100;

// NÃO ALTERE DAQUI PRA BAIXO
var s = "";
altura -= 8;   
largura -= 8;

// Oculta as setas nativas do input number
s += "<style>";
s += "#debug::-webkit-inner-spin-button, #debug::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }";
s += "#debug { -moz-appearance: textfield; }";
s += "</style>";

// Container centralizado
s += "<div style='display:flex;flex-direction:column;align-items:center;gap:6px;'>";

// Label
s += "<label for='debug' style='font-size:14px;color:#555;font-weight:600;text-align:center;margin:0;'>";
s += nome_etiqueta + "</label>";

// Container principal do input
s += "<div style='position:relative;display:flex;align-items:center;height:" + (altura + 16) + "px;background:" + cor_fundo + ";border:" + espessura_borda + " solid " + cor_borda + ";border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:all 0.2s ease;overflow:hidden;'>";

// Input principal com data-original para guardar o valor anterior
s += "<input type='number' id='debug' value='" + value + "' data-original='" + value + "' ";
s += "style='width:" + largura + "px;height:100%;background:transparent;color:" + cor_texto + ";padding:0 8px;border:none;font-size:14px;font-weight:500;text-align:center;outline:none;flex:1;' ";
s += "onfocus='this.dataset.original=this.value;this.parentElement.style.borderColor=\"" + cor_borda_focus + "\";this.parentElement.style.boxShadow=\"0 0 0 3px " + cor_sombra + "\";' ";
s += "onblur='this.parentElement.style.borderColor=\"" + cor_borda + "\";this.parentElement.style.boxShadow=\"0 2px 4px rgba(0,0,0,0.1)\";' ";

// Comando onchange com confirmação - CORRIGIDO
s += "onchange='(function(){";
s += "var valorAnterior=parseFloat(this.dataset.original)||0;";
s += "var novoValor=parseFloat(this.value)||0;";
if (restringir_valores) {
    s += "if(novoValor<" + minimo + "){novoValor=" + minimo + ";}";
    s += "if(novoValor>" + maximo + "){novoValor=" + maximo + ";}";
}
s += "if(confirm(\\\"Confirma alteração da " + nome_etiqueta + " para \\\" + novoValor + \\\"" + sufixo + "?\\\")){"; // ✅ CORRIGIDO: aspas escapadas
s += "this.value=novoValor;";
s += "this.dataset.original=novoValor;";
s += "mango.view.setPoint(" + point.id + "," + pointComponent.id + ",novoValor);";
s += "}else{";
s += "this.value=valorAnterior;";
s += "}";
s += "}).call(this)' ";

if (restringir_valores) {
    s += "step='" + multiplos_de + "' min='" + minimo + "' max='" + maximo + "' ";
}
s += ">";

// Sufixo
s += "<span style='color:" + cor_texto + ";font-size:12px;font-weight:500;padding:0 8px;user-select:none;'>" + sufixo + "</span>";
s += "</div>"; // fecha container principal
s += "</div>"; // fecha container centralizado
return s;

Slider

Nível

// Personalizar estilo da barra
var altura_barra = 280;
var largura_barra = 15;
var cor_fundo_barra = "#E0E0E0";
var cor_preenchimento = "#4A90E2";
var cor_borda = "#CCCCCC";
var mostrar_valor = true;
var mostrar_porcentagem = true;
var nome_etiqueta = ""; // Nome da etiqueta

// Configurações da variável
var valor_minimo = 0;
var valor_maximo = 10000;
var unidade = "%"; // Unidade de medida

// NÃO ALTERE A PARTIR DAQUI
var s = "";

// Calcular a porcentagem de preenchimento
var porcentagem = ((value - valor_minimo) / (valor_maximo - valor_minimo)) * 100;
porcentagem = Math.max(0, Math.min(100, porcentagem)); // Limitar entre 0-100%

// Determinar cor baseada no nível (opcional)
var cor_dinamica = cor_preenchimento;
if (porcentagem >= 80) {
    cor_dinamica = "#1ad245"; // Verde claro
} else if (porcentagem >= 60) {
    cor_dinamica = "#ffc107"; // Amarelo para níveis médios
} else if (porcentagem < 30) {
    cor_dinamica = "#dc3545"; // Vermelho para níveis baixos
}

// Container principal sem fundo/moldura
s += "<div style='display:flex;flex-direction:row;align-items:center;font-family:Arial,sans-serif;'>";

// Coluna da barra (e, opcional, etiqueta)
s += "<div style='display:flex;flex-direction:column;align-items:center;height:" + altura_barra + "px;'>";

// Etiqueta, se quiser mostrar
if(nome_etiqueta && nome_etiqueta.trim().length > 0) {
  s += "<label style='margin-bottom:8px;font-size:14px;color:#444;font-weight:600;'>" + nome_etiqueta + "</label>";
}

// Barra vertical
s += "<div style='position:relative;width:" + largura_barra + "px;height:" + altura_barra + "px;border:2px solid " + cor_borda + ";border-radius:8px;background:" + cor_fundo_barra + ";overflow:hidden;'>";

// Preenchimento da barra (de baixo para cima)
s += "<div style='position:absolute;bottom:0;left:0;width:100%;height:" + porcentagem + "%;background:" + cor_dinamica + ";transition:all 0.5s;'></div>";

// Marcações de escala
for (var i = 0; i <= 4; i++) {
    var posicao = (i * 25);
    s += "<div style='position:absolute;right:-25px;bottom:" + posicao + "%;transform:translateY(50%);font-size:10px;color:#666;text-shadow:0 1px 1px #fff;'>";
    s += Math.round(valor_minimo + (valor_maximo - valor_minimo) * (i / 4));
    s += "</div>";
}
s += "</div>"; // Fecha container da barra

s += "</div>"; // Fecha coluna da barra

// Valor porcentual à direita da barra, centralizado verticalmente, destacado e COMPACTO!
if (mostrar_porcentagem) {
    s += "<div style='margin-left:6px;display:flex;align-items:center;height:" + altura_barra + "px;'>";
    s += "<div style=\"";
    s += "background:rgba(15,48,12,0.85);";                // Fundo verde-escuro translúcido para contraste
    s += "padding:2px 30px 1px 8px;border-radius:7px;";
    s += "box-shadow:0 2px 8px #0004,0 1px 4px #14893066;";
    s += "font-size:14px;font-weight:800;color:#fff;";
    s += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:38px;";
    s += "border:1.2px solid #b2ffbb77;";
    s += "text-shadow:0 1px 4px #063b0d,0 1px 0 #000a;";
    s += "\">";
    s += Math.round(porcentagem);
    s += "<span style='font-size:11px;font-weight:400;color:#caf6a6;letter-spacing:0.5px;margin-top:-1px;text-shadow:0 1px 4px #347d22;'>" + unidade + "</span>";
    s += "</div></div>";
}

s += "</div>"; // Fecha linha principal sem nenhum fundo/moldura

return s;

Gauge

/* Livre para uso sob a licença MIT  */

// ================================
// GAUGE CIRCULAR PARA SCADA-LTS
// ================================

// Personalizar estilo do gauge
var tamanho = 180;
var espessura = 18;

var cor_fundo = "#E0E0E0";
var cor_borda = "#CCCCCC";
var cor_texto = "#333333";

var mostrar_valor = true;
var mostrar_porcentagem = true;
var nome_etiqueta = "Nível do Tanque";

// Configuração da variável
var valor_minimo = 0;
var valor_maximo = 100;
var unidade = "%";

// NÃO ALTERE A PARTIR DAQUI
var s = "";

// Calcular porcentagem
var porcentagem = ((value - valor_minimo) / (valor_maximo - valor_minimo)) * 100;
porcentagem = Math.max(0, Math.min(100, porcentagem));

// Cor dinâmica
var cor_dinamica = "#4A90E2";

if (porcentagem >= 80) {
    cor_dinamica = "#28a745"; // Verde
} else if (porcentagem >= 60) {
    cor_dinamica = "#ffc107"; // Amarelo
} else if (porcentagem < 30) {
    cor_dinamica = "#dc3545"; // Vermelho
}

// Circunferência
var raio = (tamanho / 2) - espessura;
var circunferencia = 2 * Math.PI * raio;

// Offset do progresso
var offset = circunferencia - (porcentagem / 100) * circunferencia;

// Container principal
s += "<div style='display:flex; flex-direction:column; align-items:center; font-family:Arial,sans-serif;'>";

// Título
s += "<div style='margin-bottom:10px; font-size:16px; font-weight:bold; color:#444;'>";
s += nome_etiqueta;
s += "</div>";

// SVG Gauge
s += "<div style='position:relative; width:" + tamanho + "px; height:" + tamanho + "px;'>";

s += "<svg width='" + tamanho + "' height='" + tamanho + "' style='transform: rotate(-90deg);'>";

// Fundo do gauge
s += "<circle ";
s += "cx='" + (tamanho/2) + "' ";
s += "cy='" + (tamanho/2) + "' ";
s += "r='" + raio + "' ";
s += "stroke='" + cor_fundo + "' ";
s += "stroke-width='" + espessura + "' ";
s += "fill='none' />";

// Barra de progresso
s += "<circle ";
s += "cx='" + (tamanho/2) + "' ";
s += "cy='" + (tamanho/2) + "' ";
s += "r='" + raio + "' ";
s += "stroke='" + cor_dinamica + "' ";
s += "stroke-width='" + espessura + "' ";
s += "fill='none' ";
s += "stroke-linecap='round' ";
s += "stroke-dasharray='" + circunferencia + "' ";
s += "stroke-dashoffset='" + offset + "' ";
s += "style='transition: stroke-dashoffset 0.5s ease, stroke 0.5s ease;' />";

s += "</svg>";

// Texto central
s += "<div style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;'>";

if (mostrar_valor) {
    s += "<div style='font-size:28px; font-weight:bold; color:" + cor_texto + ";'>";
    s += value;
    s += "</div>";

s += "<div style='font-size:14px; color:#666;'>";
    s += unidade;
    s += "</div>";
}

if (mostrar_porcentagem && !unidade.includes('%')) {
    s += "<div style='font-size:12px; color:#888; margin-top:4px;'>";
    s += Math.round(porcentagem) + "%";
    s += "</div>";
}

s += "</div>"; // Fecha texto central

s += "</div>"; // Fecha gauge

s += "</div>"; // Fecha principal

return s;

Gauge

// ===================================================
// GAUGE INDUSTRIAL - SCADA-LTS (V4.2 - com transição suave)
// ===================================================

// ---------------------------
// CONFIGURAÇÕES
// ---------------------------

var titulo        = "";
var unidade       = "°C";

var valor_minimo  = 0;
var valor_maximo  = 100;

var casas         = 1;

// Limites de faixa (valores absolutos)
var faixa_ok_max  = 6;
var faixa_alerta  = 8;

// Duração da transição (ms). Deixe menor que o intervalo de leitura (2000ms)
var duracao_transicao_ms = 1400;

// IMPORTANTE: se você usar mais de um gauge na mesma tela,
// dê um valor DIFERENTE aqui para cada um (ex: "gauge1", "gauge2"...)
var gauge_instance_id = "principal";

// ---------------------------
// LEITURA E SANITIZAÇÃO
// ---------------------------

var v = parseFloat(value);
if (isNaN(v)) v = 0;
if (v < valor_minimo) v = valor_minimo;
if (v > valor_maximo) v = valor_maximo;

var pct = (v - valor_minimo) / (valor_maximo - valor_minimo);

// ---------------------------
// COR DINÂMICA
// ---------------------------

var cor_ativa;
var status_label;

if (v >= faixa_alerta) {
    cor_ativa    = "#ff3b30";
    status_label = "CRITICO";
} else if (v >= faixa_ok_max) {
    cor_ativa    = "#ffcc00";
    status_label = "ALERTA";
} else {
    cor_ativa    = "#00e676";
    status_label = "NORMAL";
}

// ---------------------------
// FUNÇÕES GEOMETRIA
// ---------------------------

function rad(d) {
    return d * Math.PI / 180;
}

function pt(cx, cy, r, graus) {
    return {
        x: cx + Math.cos(rad(graus)) * r,
        y: cy + Math.sin(rad(graus)) * r
    };
}

function arco(cx, cy, r, g_ini, g_fim, cor, sw) {
    var p1    = pt(cx, cy, r, g_ini);
    var p2    = pt(cx, cy, r, g_fim);
    var span  = g_fim - g_ini;
    var flag  = (Math.abs(span) > 180) ? 1 : 0;
    var sweep = (span >= 0) ? 1 : 0;
    return "<path d='M " + p1.x + " " + p1.y +
           " A " + r + " " + r + " 0 " + flag + " " + sweep + " " + p2.x + " " + p2.y + "'" +
           " fill='none' stroke='" + cor + "' stroke-width='" + sw + "' stroke-linecap='round' />";
}

// hash simples pra gerar um ID estável por gauge
function hashStr(str) {
    var h = 0;
    for (var i = 0; i < str.length; i++) {
        h = (h * 31 + str.charCodeAt(i)) | 0;
    }
    return Math.abs(h).toString(36);
}

// ---------------------------
// PARÂMETROS DO GAUGE
// ---------------------------

var W  = 260;
var H  = 300;
var cx = W / 2;
var cy = 150;
var r  = 115;

var ang_meio       = -90;
var ang_span_total = 260;
var ang_ini        = ang_meio - ang_span_total / 2;
var ang_fim        = ang_meio + ang_span_total / 2;

var ang_agulha = ang_ini + (ang_fim - ang_ini) * pct;

// delta em graus a partir da posição de referência (ang_ini) -> vai de 0 até ang_span_total
var delta_deg = ang_agulha - ang_ini;

// ---------------------------
// IDs ÚNICOS PARA ESTE GAUGE
// ---------------------------

var idBase       = gauge_instance_id + "|" + titulo + "|" + unidade + "|" + valor_minimo + "|" + valor_maximo;
var gaugeId      = "gauge_" + hashStr(idBase);
var needleId     = gaugeId + "_needle";
var valorTextId  = gaugeId + "_valor";

// ---------------------------
// MONTAGEM HTML / SVG
// ---------------------------

var s = "";

s += "<div style='" +
     "display:inline-block;" +
     "background:transparent;" +
     "font-family:Arial, Helvetica, sans-serif;" +
     "text-align:center;" +
     "transform:scale(0.4);" +
     "transform-origin:top left;" +
     "'>";

// TÍTULO
s += "<div style='" +
     "color:#8fa3b8;" +
     "font-size:13px;" +
     "font-weight:bold;" +
     "letter-spacing:3px;" +
     "text-transform:uppercase;" +
     "margin-bottom:6px;" +
     "'>" + titulo + "</div>";

s += "<svg width='" + W + "' height='" + H + "' viewBox='0 0 " + W + " " + H + "'>";

// DEFS
s += "<defs>";

s += "<radialGradient id='g_bg' cx='50%' cy='50%' r='50%'>" +
     "<stop offset='0%'  style='stop-color:#161d27;stop-opacity:1'/>" +
     "<stop offset='100%' style='stop-color:#0a0d12;stop-opacity:1'/>" +
     "</radialGradient>";

s += "<filter id='glow' x='-40%' y='-40%' width='180%' height='180%'>" +
     "<feGaussianBlur stdDeviation='3' result='blur'/>" +
     "<feMerge><feMergeNode in='blur'/><feMergeNode in='SourceGraphic'/></feMerge>" +
     "</filter>";

s += "</defs>";

// FUNDO CIRCULAR
s += "<circle cx='" + cx + "' cy='" + cy + "' r='" + (r + 12) + "'" +
     " fill='url(#g_bg)' stroke='#1a2635' stroke-width='2' />";

s += "<circle cx='" + cx + "' cy='" + cy + "' r='" + (r + 18) + "'" +
     " fill='none' stroke='#131c27' stroke-width='6' />";

// TRILHA
s += arco(cx, cy, r, ang_ini, ang_fim, "#111d28", 18);

// FAIXAS
var pct_ok    = (faixa_ok_max - valor_minimo) / (valor_maximo - valor_minimo);
var pct_alert = (faixa_alerta - valor_minimo) / (valor_maximo - valor_minimo);

var ang_ok    = ang_ini + (ang_fim - ang_ini) * pct_ok;
var ang_alert = ang_ini + (ang_fim - ang_ini) * pct_alert;

s += arco(cx, cy, r, ang_ini,   ang_ok,    "#00e676", 10);
s += arco(cx, cy, r, ang_ok,    ang_alert, "#ffcc00", 10);
s += arco(cx, cy, r, ang_alert, ang_fim,   "#ff3b30", 10);

// ESCALA PRINCIPAL
var total_ticks = 10;

for (var i = 0; i <= total_ticks; i++) {
    var frac  = i / total_ticks;
    var ang_t = ang_ini + (ang_fim - ang_ini) * frac;

var p_ext = pt(cx, cy, r + 4,  ang_t);
    var p_int = pt(cx, cy, r - 10, ang_t);
    var p_num = pt(cx, cy, r - 26, ang_t);

var cor_tick;
    if (frac <= pct_ok)         cor_tick = "#00e676";
    else if (frac <= pct_alert) cor_tick = "#ffcc00";
    else                        cor_tick = "#ff3b30";

s += "<line x1='" + p_ext.x + "' y1='" + p_ext.y +
         "' x2='" + p_int.x + "' y2='" + p_int.y +
         "' stroke='" + cor_tick + "' stroke-width='2.5' stroke-linecap='round' />";

var num_val = valor_minimo + frac * (valor_maximo - valor_minimo);

s += "<text x='" + p_num.x + "' y='" + (p_num.y + 4) + "'" +
         " fill='#5a7a96' font-size='11' font-weight='bold' text-anchor='middle'>" +
         (Number.isInteger(num_val) ? num_val : num_val.toFixed(1)) +
         "</text>";
}

// TICKS MENORES
for (var j = 0; j < total_ticks; j++) {
    var f   = (j + 0.5) / total_ticks;
    var am  = ang_ini + (ang_fim - ang_ini) * f;
    var pm1 = pt(cx, cy, r + 2, am);
    var pm2 = pt(cx, cy, r - 5, am);

s += "<line x1='" + pm1.x + "' y1='" + pm1.y +
         "' x2='" + pm2.x + "' y2='" + pm2.y +
         "' stroke='#2a3d50' stroke-width='1.5' stroke-linecap='round' />";
}

// ---------------------------
// AGULHA (desenhada na posição de referência ang_ini,
// depois rotacionada via CSS/JS para uma transição suave)
// ---------------------------

var tip0    = pt(cx, cy, r - 18, ang_ini);
var base_l0 = pt(cx, cy, 18,     ang_ini + 90);
var base_r0 = pt(cx, cy, 18,     ang_ini - 90);

s += "<g id='" + needleId + "' style='transform-origin:" + cx + "px " + cy + "px; transform: rotate(" + delta_deg + "deg);'>";

// sombra
s += "<polygon points='" + tip0.x + "," + tip0.y + " " +
     base_l0.x + "," + base_l0.y + " " +
     base_r0.x + "," + base_r0.y + "'" +
     " fill='rgba(0,0,0,0.4)' transform='translate(3,3)' />";

// agulha
s += "<polygon points='" + tip0.x + "," + tip0.y + " " +
     base_l0.x + "," + base_l0.y + " " +
     base_r0.x + "," + base_r0.y + "'" +
     " fill='" + cor_ativa + "' filter='url(#glow)' />";

s += "<circle cx='" + tip0.x + "' cy='" + tip0.y + "' r='4'" +
     " fill='" + cor_ativa + "' filter='url(#glow)' />";

s += "</g>";

// PINO
s += "<circle cx='" + cx + "' cy='" + cy + "' r='14'" +
     " fill='#0a0d12' stroke='#1e2d3d' stroke-width='3' />";
s += "<circle cx='" + cx + "' cy='" + cy + "' r='6'" +
     " fill='" + cor_ativa + "' filter='url(#glow)' />";

// VALOR E UNIDADE
s += "<text id='" + valorTextId + "' x='" + cx + "' y='" + (cy + 42) + "'" +
     " fill='" + cor_ativa + "' font-size='28' font-weight='bold'" +
     " text-anchor='middle' filter='url(#glow)'>" +
     v.toFixed(casas) + "</text>";

s += "<text x='" + cx + "' y='" + (cy + 60) + "'" +
     " fill='#3a5570' font-size='12' font-weight='bold' text-anchor='middle'>" +
     unidade + "</text>";

// BADGE STATUS
var bx = cx;
var by = cy + 90;

s += "<rect x='" + (bx - 44) + "' y='" + (by - 11) + "'" +
     " width='88' height='20' rx='10' ry='10'" +
     " fill='" + cor_ativa + "' opacity='0.12' />";

s += "<rect x='" + (bx - 44) + "' y='" + (by - 11) + "'" +
     " width='88' height='20' rx='10' ry='10'" +
     " fill='none' stroke='" + cor_ativa + "' stroke-width='1' opacity='0.5' />";

s += "<text x='" + bx + "' y='" + (by + 4) + "'" +
     " fill='" + cor_ativa + "' font-size='11' font-weight='bold'" +
     " letter-spacing='2' text-anchor='middle'>" +
     status_label + "</text>";

s += "</svg>";
s += "</div>";

// ---------------------------
// SCRIPT DE ANIMAÇÃO (roda no navegador após inserir o HTML)
// ---------------------------

s += "<script>(function(){";
s += "try{";
s += "var id='" + gaugeId + "';";
s += "var novoDelta=" + delta_deg + ";";
s += "var novoValor=" + v + ";";
s += "var casasDec=" + casas + ";";
s += "var duracao=" + duracao_transicao_ms + ";";
s += "window.__gaugeAnim = window.__gaugeAnim || {};";
s += "var prev = window.__gaugeAnim[id];";
s += "if(!prev){ prev = {delta:novoDelta, valor:novoValor}; }";
s += "var needle = document.getElementById('" + needleId + "');";
s += "var valorEl = document.getElementById('" + valorTextId + "');";
s += "if(needle){";
s += "  needle.style.transition='none';";
s += "  needle.style.transform='rotate('+prev.delta+'deg)';";
s += "  needle.getBoundingClientRect();"; // força reflow
s += "  requestAnimationFrame(function(){";
s += "    requestAnimationFrame(function(){";
s += "      needle.style.transition='transform '+(duracao/1000)+'s cubic-bezier(0.22,1,0.36,1)';";
s += "      needle.style.transform='rotate('+novoDelta+'deg)';";
s += "    });";
s += "  });";
s += "}";
s += "var deValor=prev.valor, dvDelta=(novoValor-prev.valor);";
s += "var t0=null;";
s += "function passo(ts){";
s += "  if(!t0) t0=ts;";
s += "  var p=Math.min((ts-t0)/duracao,1);";
s += "  var pe=1-Math.pow(1-p,3);"; // easeOutCubic
s += "  if(valorEl) valorEl.textContent=(deValor+dvDelta*pe).toFixed(casasDec);";
s += "  if(p<1) requestAnimationFrame(passo);";
s += "  else if(valorEl) valorEl.textContent=novoValor.toFixed(casasDec);";
s += "}";
s += "requestAnimationFrame(passo);";
s += "window.__gaugeAnim[id]={delta:novoDelta, valor:novoValor};";
s += "}catch(e){}";
s += "})();</" + "script>";

return s;

Botão Circular

var estaLigado = (value === true || value === 1 || value == "true" || value == "1");
      var novoValor = !estaLigado;
      var comando = "mango.view.setPoint(" + point.id + ", " + pointComponent.id + ", " + novoValor + ");";
      
      // 2. Configurações de Design
      var corLed = estaLigado ? "#00FF41" : "#4A4A4A";
      var sombraLed = estaLigado ? "0 0 15px #00FF41" : "none";
      var infoLabel = estaLigado ? "LIGADO" : "DESLIGADO";
      
      // 3. Montagem do botão (Com as tags reais <> )
        var s = "";
        s += "<button style='" +
           "width: 90px; height: 90px; border-radius: 50%; " +
           "background: radial-gradient(circle at 30% 30%, #444, #1a1a1a); " +
           "border: 4px solid #000; " +
           "box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 2px 5px rgba(255,255,255,0.1); " +
           "cursor: pointer; outline: none; transition: all 0.2s ease; " +
           "display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;" +
           "' " +
           "onclick=\"" + comando + "\" " +
           "onmousedown=\"this.style.boxShadow='0 2px 5px rgba(0,0,0,0.8), inset 0 2px 5px rgba(0,0,0,0.5)'; this.style.transform='scale(0.98)';\" " +
           "onmouseup=\"this.style.boxShadow='0 5px 15px rgba(0,0,0,0.8), inset 0 2px 5px rgba(255,255,255,0.1)'; this.style.transform='scale(1)';\" " +
           "onmouseover=\"this.style.filter='brightness(1.2)';\" " +
           "onmouseout=\"this.style.filter='brightness(1)';\" " +
           ">" +
      
           // LED (Indicador de status)
           "<div style='" +
           "width: 30px; height: 30px; border-radius: 50%; " +
           "background: " + corLed + "; " +
           "box-shadow: " + sombraLed + "; " +
           "transition: all 0.3s ease; border: 2px solid rgba(0,0,0,0.3); " +
           "'></div>" +
      
           // Label
           "<span style='color: #ccc; font-family: Arial; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;'>" +
           infoLabel + "</span>" +
      
           "</button>";
      
        return s;

Interruptor Giratório

/* MIT License */
var altura = 80;               // diâmetro do ventilador (px)
var largura = 80;              // mantém o botão quadrado → círculo
var s = "";

// ------------------------------------------------------------------
// Estado do ponto (valor vindo do SCADA)
var estaLigado = false;
if (typeof value !== 'undefined') {
  estaLigado = (value === true || value === 1 || value == "true");
}

// ------------------------------------------------------------------
// Comando que será enviado ao CLP (toggle)
var novoValor = !estaLigado;
var comando = "mango.view.setPoint(" + point.id + ", " + pointComponent.id + ", " + novoValor + ");";

// ------------------------------------------------------------------
// Cores / animações dinâmicas
var corBorda   = estaLigado ? "#00FF88" : "#FF6B6B";          // verde neon / vermelho coral
var corFundo   = estaLigado ? "#064E3B" : "#4A2C2A";          // fundo escuro mais escuro quando ligado
var corIcone   = "#FFFFFF";
var animacao   = estaLigado ? "giraVentilador 0.6s linear infinite" : "none";
var glow       = "0 0 12px " + corBorda + "80";

// ------------------------------------------------------------------
// Estilo do botão (círculo completo)
var estiloBtn = 
  "position:relative;display:flex;align-items:center;justify-content:center;" +
  "width:" + largura + "px;height:" + altura + "px;" +
  "background:" + corFundo + ";" +
  "border:2px solid " + corBorda + ";" +
  "border-radius:50%;cursor:pointer;" +
  "box-shadow:" + glow + ", inset 0 4px 12px rgba(255,255,255,0.1);" +
  "transition:all 0.3s ease;outline:none;";

// ------------------------------------------------------------------
// Interatividade (hover / active)
var onHover = "this.style.transform='scale(1.05)';" +
              "this.style.boxShadow='0 0 20px " + corBorda + "80, inset 0 4px 12px rgba(255,255,255,0.2)';";

var onLeave = "this.style.transform='scale(1)';" +
              "this.style.boxShadow='" + glow + ", inset 0 4px 12px rgba(255,255,255,0.1)';";

var onActive = "this.style.transform='scale(0.95)';" +
               "this.style.boxShadow='0 0 8px " + corBorda + "60, inset 0 6px 15px rgba(0,0,0,0.6)';";

// ------------------------------------------------------------------
// SVG do ventilador (preenchido e animado)
var svgVent = 
  "<svg style=\"width:70%;height:70%;fill:" + corIcone + ";animation:" + animacao + ";\" viewBox=\"0 0 24 24\">" +
    "<style>@keyframes giraVentilador{to{transform:rotate(360deg);}}</style>" +
    "<g transform=\"translate(12,12)\">" +
      "<circle cx=\"0\" cy=\"0\" r=\"1.5\"/>" +                     // centro
      "<path d=\"M0,-8 L-2,-4 L2,-4 Z\"/>" +                     // hélice 1
      "<path d=\"M6.93,-4 L2.31,-1.15 L4.62,2.31 Z\"/>" +        // hélice 2
      "<path d=\"M6.93,4 L4.62,-2.31 L2.31,1.15 Z\"/>" +        // hélice 3
      "<path d=\"M0,8 L2,4 L-2,4 Z\"/>" +                       // hélice 4
      "<path d=\"M-6.93,4 L-2.31,1.15 L-4.62,-2.31 Z\"/>" +     // hélice 5
      "<path d=\"M-6.93,-4 L-4.62,2.31 L-2.31,-1.15 Z\"/>" +    // hélice 6
    "</g>" +
  "</svg>";

// ------------------------------------------------------------------
// Montagem final
s += "<button onclick=\"" + comando + "\" " +
     "onmouseover=\"" + onHover + "\" " +
     "onmouseout=\"" + onLeave + "\" " +
     "onmousedown=\"" + onActive + "\" " +
     "onmouseup=\"" + onHover + "\" " +
     "style=\"" + estiloBtn + "\">" +
     svgVent +
     "</button>";

return s;

Interruptor

Interruptor Retangular