Go Down

Topic: Angular e Chart JS com arduino  (Read 2158 times) previous topic - next topic

Gibbasun

#15
Nov 11, 2017, 03:36 pm Last Edit: Nov 12, 2017, 02:32 am by Gibbasun
Bom dia pessoal.
Em fim, cheguei a uma solução que me agradou muito e estou satisfeito.
Obrigado pela ajuda e estou a disposição para compartilhar o pouco que venho aprendendo neste mundo IoT.

Com relação a página e o código do dispositivo anexados anteriormente, foram feitas as seguintes alterações, e com sucesso.

Na página:  Angular e html:

Code: [Select]
<!DOCTYPE html>
<html  ng-app="readArduinoApp">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Solicitar informações do Arduíno</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link href="mycss/energy.css" rel="stylesheet"/>
    <script type="text/javascript">
var app = angular.module('readArduinoApp', []);
app.controller('ReadArduinoController', function($scope, $http, $interval) {

                              [b]// atualiza as informações a cada 5 segundos, com requisições ao Arduíno.[/b]
                                this.interval = $interval(function()
{
$http.get('http://zzz.zzz.zz.z:pppp).then(function(response) {
    $scope.acumuladores = response.data;
    });
}, 5000);
                                             [b] // Substitui a tentativa do "refresh = 5" tentado na montagem do cabeçalho do JSON  no
                                              //  Arduínio, que não funcionou.[/b]
});
</script>
</head>

...

    <article>
        <header align="center">
            <h2 aling="left">Consumo em tempo real</h2>
        </header>
<div align="center" ng-controller="ReadArduinoController"> 
<table aling="left" ng-repeat="d in acumuladores">
      <tr><td>WBSERVER:       </td><td>{{webservice}} </td></tr>
              <tr><td>Leitura anterior:   </td><td>{{d.contadoranterior}} </td></tr>
              <tr><td>Leitura atual:       </td><td>{{d.contador}} </td></tr>
</table>
</div>
    </article>


No Arduíno:

Code: [Select]
// Biblioteca utilizada
#include <ESP8266WiFi.h>

void setup(){

  //  Configurações conforme o código anexado anteriormente ...

}

void  loop () {
      ...
      ...
    //Verifica se há cliente conectado e envia requisição
    //===================================================
      EnviaRequisicao();
    //===================================================
   ...
   ...

}

void EnviaRequisicao()
{
    WiFiClient client = server.available();
    // Verifica se há client (web browser) conectado
    if (client)
    {
        Serial.println("\n[Client conectado]");
        while (client.connected())
        {
         
          if (client.available())
          {
            Serial.println("\n[Cliente disponível]");

            // Lê cada linha do cabeçalho, enviadas pela requisição do Browser do Client
            req = client.readStringUntil('\r');
            Serial.println ("Requisição = " + req + " tamanho = " + String(req.length()) + " Posição 0 = " +  req[0] + "\r");
           
            [b]// Verifica se acabou a leitura do cabeçalho da requisição. Se acabou, está na hora de enviar o JSON[/b]
            if (req.length() == 1) //  && req[0] == '\n')
            {
              //Serial.println ("Leitura da Requisição Finalizada = " + req + "\r");
              client.println(MontarJson());
              Serial.println(json);
              delay(1); // Calma!Tem que esperar mais um pouquinho
              contadorAnterior = contador;
              break;
            }
          }
        }
        client.flush();
        delay(1);
        client.stop();
        Serial.println("[Client disonnected]");
    }   
    else
        Serial.println("[Não houve requisiçãp]");
}


Go Up