https://pme.haelb.com.br/

Scan ID:: 1db7d1ec-6aa0-427f-bd01-d90eca8fe96bFinished
Submitted URL:: https://pme.haelb.com.br/
Report Finished:: Sep 25, 2024, 02:39:02
Links · 0 foundThe outgoing links identified from the page
JavaScript Variables · 11 foundGlobal JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
NameType
onbeforetogglestring
documentPictureInPicturestring
onscrollendstring
BaseGaugestring
gaugesstring
RadialGaugestring
portastring
conectaWebSocketstring
buscaDadosstring
gTensaostring
Page 1 of 2
Console log messages · 1 foundMessages logged to the web console
TypeCategoryLog
logotherURLhttps://pme.haelb.com.br/
TextConectado ao WebSocket
HTMLThe raw HTML body of the page
<!DOCTYPE html><html lang="pt-BR"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:,">
    <title>PME</title>
    <link type="text/css" rel="stylesheet" media="screen" href="estilos.css">   
    <script src="gauge.min.js"></script>
    
<script>
    let socket;
    var porta = window.location.port;
    async function conectaWebSocket() {
        // Criando uma nova WebSocket.
        //if(porta === "80"){
            //socket = new WebSocket('ws://' + window.location.hostname + '/ws');
      //  }
       // if(porta === "443"){
          socket = new WebSocket('wss://' + window.location.hostname + '/ws');
      //  }
        

        socket.onopen = function(event) {
            console.log('Conectado ao WebSocket');
            buscaDados();
        };

        // Pegando as mensagens enviadas pelo servidor.
        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            gTensao.value = data.tensao;
            gPotenciaAtiva.value = data.potenciaAtiva;
            
            //gTensao.draw();
            //gPotenciaAtiva.draw();
          
            document.getElementById('estadoMqtt').innerText = data.estadoMqtt;
            document.getElementById('estadoPZEM').innerText = data.estadoPZEM;
            document.getElementById('tensao').innerText = data.tensao;
            document.getElementById('corrente').innerText = data.corrente;
            document.getElementById('potenciaAtiva').innerText = data.potenciaAtiva;
            document.getElementById('potenciaAparente').innerText = data.potenciaAparente;
            document.getElementById('consumo').innerText = data.consumo;
            document.getElementById('consumoDiario').innerText = data.consumoDiario;
            document.getElementById('frequencia').innerText = data.frequencia;
            document.getElementById('pf').innerText = data.pf; 
            document.getElementById('dataHora').innerText = data.dataHora;  
            document.getElementById('leituras').innerText = data.leituras;
                
        };

        socket.onclose = function() {
            console.log('Desconectado do WebSocket');
            // Tentar reconectar após 15 segundos
            setTimeout(conectaWebSocket, 15000);
        };

        socket.onerror = function(error) {
            console.error('Erro no WebSocket:', error);
        };
    }

    function buscaDados() {
        if (socket.readyState === WebSocket.OPEN) {
            socket.send('buscaDados'); // Envia uma mensagem para buscar dados
        }
    }

    // Conecta ao WebSocket ao carregar a página
    conectaWebSocket();

    // Atualiza os dados a cada 1 minuto
    //setInterval(buscaDados, 3000);
    setInterval(function(){}, 1000);


</script>
</head><body>
    <header class="header">
        <div id="titulo">Power Monitor Energy</div>
    </header>
    <div class="container">
        <div class="sidebar">
            <h2>Menu</h2>
            <ul>
                <li><a href="#Medições">Home</a></li>
                <li><a href="#services">Serviços</a></li>
                <li><a href="#about">Sobre</a></li>
                <li><a href="#update">Update</a></li>
            </ul>
        </div>
        <div class="site"> 
            
            <div id="valores">       
                <p>Tensão: <span id="tensao">219.4</span> V</p>
                <p>Corrente: <span id="corrente">0.479</span> A</p>
                <p>Potência Ativa: <span id="potenciaAtiva">48.5</span> W</p>
                <p>Potência Aparente: <span id="potenciaAparente">105.1</span> VA</p>
                <p>Consumo Diário: <span id="consumoDiario">79.07</span> kWh</p>
                <p>Consumo: <span id="consumo">79.07</span> kWh</p>
                <p>Frequência: <span id="frequencia">60.00</span> Hz</p>
                <p>Fator de potência: <span id="pf">0.46</span></p>
                <p>Data e hora: <span id="dataHora">24/9/2024 - 23:39:14</span></p>
                <p>Leituras pzem: <span id="leituras">9616</span></p>
                <p>MQTT: <span id="estadoMqtt">MQTT conetado!</span></p>
                <p>PZEM: <span id="estadoPZEM">OK</span></p>   
            </div>  
            <div id="gauges">
                <canvas id="gTensao" width="240" height="240" style="width: 240px; height: 240px;"></canvas>
                <canvas id="gPotenciaAtiva" width="240" height="240" style="width: 240px; height: 240px;"></canvas>
                
            </div>  
           
            <div id=" upload">
                <form id="uploadForm" enctype="multipart/form-data">
                    <input type="file" id="fileInput" name="file">
                    <button type="submit">Enviar</button>
                </form>
                <div id="status">Status</div>
                <script src="upload_script.js"></script>
            </div>   
        </div>
    </div>

    <script>
        var gTensao = new RadialGauge({
            renderTo: 'gTensao',
            width: 240,
            height: 240,
            units: "V",
            minValue: 0,
            startAngle: 90,
            ticksAngle: 180,
            valueBox: true,
            maxValue: 250,
            majorTicks: [ "0","50","100", "150", "200", "250"],
            minorTicks: 3,
            strokeTicks: true,
            highlights: [
                {"from": 0, "to": 200, "color": "rgba(230, 0, 0, .5)"},
                {"from": 200, "to": 210, "color": "rgba(255, 127, 0, .75)"},
                {"from": 210, "to": 230, "color": "rgba(0, 255, 50, .9)"},
                {"from": 230, "to": 240, "color": "rgba(255, 127, 0, .75)"},
                {"from": 240, "to": 250, "color": "rgba(255, 0, 0, .5)"}],
            colorPlate: "#fff",
            borderShadowWidth: 0,
            borders: false,
            needleType: "arrow",
            needleWidth: 7,
            needleCircleSize: 7,
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: 1000,
            animationRule: "linear"
        }).draw();

        var gPotenciaAtiva = new RadialGauge({
            renderTo: 'gPotenciaAtiva',
            width: 240,
            height: 240,
            units: "W",
            minValue: 0,
            startAngle: 90,
            ticksAngle: 180,
            valueBox: true,
            maxValue: 2500,
            majorTicks: [ "0","500","1000", "1500", "2000", "2500"],
            minorTicks: 3,
            strokeTicks: true,
            highlights: [
                
                {"from": 0, "to": 250, "color": "rgba(0, 255, 50, .9)"},
                {"from": 250, "to": 1000, "color": "rgba(255, 127, 0, .75)"},
                {"from": 1000, "to": 2500, "color": "rgba(255, 0, 0, .5)"}],
            colorPlate: "#fff",
            borderShadowWidth: 0,
            borders: false,
            needleType: "arrow",
            needleWidth: 7,
            needleCircleSize: 7,
            needleCircleOuter: true,
            needleCircleInner: false,
            animationDuration: 1000,
            animationRule: "linear",
            colorValueBoxShadow: false,
            colorValueText: "#000",
            colorValueBoxRect: "#fff",
            colorValueBoxRectEnd: "#fff",
            colorValueBoxBackground: "#fff",
            colorValueBoxShadow: false,
            colorValueTextShadow: false
        }).draw();
    
    </script>


</body></html>
Name	Type
onbeforetoggle	string
documentPictureInPicture	string
onscrollend	string
BaseGauge	string
gauges	string
RadialGauge	string
porta	string
conectaWebSocket	string
buscaDados	string
gTensao	string