Como faço para guardar em uma variável o maior e o menor valor de um sensor de temperatura?

Front-end JavaScript
,
#1

Estou tentando mostrar o valor máximo alcançado e o valor mínimo de um sensor de temperatura conectado no Arduino, assim deve ser mostrado no site essas informações. Porém as variáveis não guardam os valores, e sempre trocam à medida que os dados do sensor vão chegando.

Fiz a mesma lógica no programa do Arduino em C++ e funcionou perfeitamente, somente no javascript que não estou conseguindo e a variável dadoRecebido, sempre fica recebendo os dados do sensor.

var dadoRecebido = parseInt(data.data);

var dadoMax = 0;
var resultadoMax = document.getElementById("tempMax");

var dadoMin = 30;
var resultadoMin = document.getElementById("tempMin");
  
var dadoAtual = dadoRecebido;
var resultadoAtual = document.getElementById("tempAtual");

if(dadoMax < dadoRecebido) {
  dadoMax = dadoRecebido
} 

if(dadoMin > dadoRecebido) {
  dadoMin = dadoRecebido
} 

resultadoMax.innerHTML   = `Temperatura Máxima: ${dadoMax}°C`
resultadoMin.innerHTML   = `Temperatura Mínima: ${dadoMin}°C`
#2

Esse é todo o código? De onde vem a variável data, no início do código?

Quando você faz var dadoRecebido = parseInt(data.data), está redeclarando a variável dadoRecebido e passando o valor pra ela, não apenas atualizando o valor. Imagino que você queira algo similar a uma classe ou struct como “global” no seu código javascript. Nesse caso, acredito que precise modificar um pouco seu código. Bem resumidamente, seria algo como:

<script>
  let dadoMax, dadoMin;
  const resultadoMax = document.getElementById("tempMax");
  const resultadoMin = document.getElementById("tempMin");

  function atualizarView(){
    resultadoMax.innerHTML   = `Temperatura Máxima: ${dadoMax}°C`
    resultadoMin.innerHTML   = `Temperatura Mínima: ${dadoMin}°C`
  }

  function processarDados(data){
    dadoRecebido = data.data;

    if(dadoMax < dadoRecebido ){
        dadoMax = dadoRecebido
    } 

    if(dadoMin > dadoRecebido ){
        dadoMin = dadoRecebido
    }

    atualizarView();
  }
</script>

Seu código que vem do Arduino chamaria a função processarDados, passando o valor lido como parâmetro em data. Veja se isso clareia suas ideias. Se não conhece muito de js, recomendo dar uma estudada em como estruturar seu código em js, a “mesma lógica em C++” pode precisar de ajustes, pois são linguagens e ambientes diferentes.

Abraço.

1 curtida
#3

Muito obrigado. Mas ainda depois de entrar pela primeira vez na condição, as variáveis dadoMax e dadoMin não param de trocar os valores.
Eu faço a seguinte inicialização para não aparecerem no site como undefined:

 let dadoMax = 0, dadoMin = 30;

Esse é o script completo:

<div class="row">
        <div class="column"  id=text></div>
        <div class="column"  id="chart_div"></div>
        <script type="text/javascript" 
            src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
            var chart;
            var data;
            var dados = 0;
            let index = 0;

            google.charts.load("current", {
                packages: ["corechart", "line"]
            });
            // set a callback quando a api for carregada

            google.charts.setOnLoadCallback(drawChart);
            function drawChart(){
                data = google.visualization.arrayToDataTable([
                    ["tempo","Temperatura"],
                    [0,0]
                ]);
                let options = {
                    title: "Temperatura",
                    hAxis:{
                        title:"Tempo"
                    },
                    vAxis:{
                        title:"Temperatura"
                    }
                };
                // desenha o grafico quando carregado
                chart = new google.visualization.LineChart(
                    document.getElementById("chart_div")
                );
                chart.draw(data,options);
                setInterval(function(){
                   // let random = Math.random() * 30 + 20;

                    data.addRow([index, dados ]);
                    chart.draw(data, options);

                    index++;
                }, 250);
            }

        </script>    
    </div>
    
    <script>
        function zerofill(i){return (i< 10? '0': '')+i}
        function now(){
            var d = new Date()
            return d.getFullYear()+'_'
              + zerofill((d.getMonth())+1) + "-"
              + zerofill((d.getDate())) + "-"
              + zerofill((d.getHours())) + ":"
              + zerofill((d.getMinutes())) + ":"
              + zerofill((d.getSeconds()))+ " "
        }

        var texto = document.getElementById('text');

        var socket = io.connect('http://localhost:8888');
        socket.on('data', function(data){
            var msgs = document.getElementById("text");
            var txt  = msgs.innerHTML;
            var oldData = dados;
            dados = parseInt(data.data.replace(/\x0D\x0A/g,""));
            if (isNaN(dados))
            {
                dados = oldData;
            }
            var rep  = data.data.replace(/\x0D\x0A/g,"<br>");
            txt = txt + "<br>" + now() + rep;
            msgs.innerHTML = txt;
            msgs.scrollTop = msgs.scrollHeight;
            
           // chart.draw(data,options);
          //  index++;

          let dadoMax = 0, dadoMin = 30;
          const resultadoMax   = document.getElementById("tempMax");
          const resultadoMin   = document.getElementById("tempMin");
          const resultadoAtual = document.getElementById("tempAtual");
          
          function atualizarView(){
            resultadoMax.innerHTML = `Temperatura Máxima: ${dadoMax}`
            resultadoMin.innerHTML = `Temperatura Mínima: ${dadoMin}`
          }

        function processarDados(data){
            dadoRecebido = data.data

            if(dadoMax < dadoRecebido ){
                dadoMax = dadoRecebido
            } 

            if(dadoMin > dadoRecebido ){
                dadoMin = dadoRecebido
            }

            atualizarView();
        }
        processarDados(data);

        resultadoAtual.innerHTML = `Temperatura Atual: ${dados}`

        });

    </script>
  
    <div id="textTemp">
        <h3 id="tempMax"  ></h3>
        <h3 id="tempMin"  ></h3>
        <h3 id="tempAtual"></h3>
    </div>

</body>
</html>

rodando
rodando1920×907 65.6 KB

#4

Isso está acontecendo porque a todo dado novo de temperatura as variáveis são definidas com os valores padrões:

let dadoMax = 0, dadoMin = 30;

Você precisa salvar globalmente esses valores na sua aplicação para ter o registro das temperaturas passadas.

1 curtida
#5

Muito obrigado, deu certo, também consegui entender as variáveis locais e globais.