*VISUALIZE ESTA DOCUMENTAÇÃO NO FORMATO CLICK-AND-SWIPE DOCS GALLERY

Thingspeak

Thingspeak é uma plataforma online para se integrar ferramentas matemáticas de alto nível como Matlab e Simulink, por exemplo, junto ao recebimentos de dados online para uma aplicação, por exemplo. Dentre as diversas maneiras de se integrar os dados com esta plataforma, esta documentação explorará a conexão via MQTT broker partindo de uma aplicação em que será efetuado um subscribe no servidor MQTT do NetworkServer e a parir disto, será executado um publish no MQTT broker do ThingSpeak.

Para a execução desta tarefa de se inscrever em um servidor MQTT e publicar o dado em outro servidor MQTT será utilizado o ambiente descrito anteriormente: Node-RED. Portanto, o Node-RED servirá como servidor intermediário.

É de extrema importância que se esteja com as aplicações sendo executadas corretamente para não se haver dúvidas de funcionamento ou não do sistema completo.

Nota: Para a execução de um subscribe e publish, deve-se estar com a porta 1883 do firewall, se existente, liberada tanto para a entrada quanto para saída de dados.

Sign up

Ao entrar pela primeira vez no site ThingSpeak (https://thingspeak.com/) será mostrada a página inicial do site da MathWorks para cadastro e acesso à conta de usuário. Primeiramente, para a criação de uma conta de usuário, deve-se clicar no canto superior da tela em Cadastro conforme a Figura 1 abaixo.

[

A Figura 2 a seguir exibe algumas informações para se efetuar o Cadastro de um novo usuário. Após o cadastro será necessário confirmar a conta através do email solicitado.

Sign up

Após ter confirmado a autenticidade da conta de usuário, deve-se acessar novamente o website para efetuar o acesso à área restrita do usuário. Esta área pode ser acessada clicando-se em Sign in no canto superior direito da tela ao lado de Cadastro.

Será necessário o preenchimento do campo do e-mail previamente cadastrado. Ver Figura 4.

Após inserido o e-mail será necessária a senha de acesso conforme a Figura 5.

Com o acesso bem sucedido à Área do Usuário pode-se notar algumas aplicações referentes ao usuário smartcampusmaua. Esta conta foi ativada pelo Centro de Pesquisas, entretanto os valores descritos aqui são apenas exemplos e não devem ser copiados pois são meramente ilustrativos, visto que cada aplicação é individual para cada usuário.

My Channels

Clicando-se no botão New Channel na Figura acima, será mostrado alguns Campos para configuração de um novo canal.

A este canal se é executado um publish através de um servidor MQTT. No caso, conforme descrito mais a frente, esta documentação evidenciará como executar o publish neste canal. Através deste canal poderá ser realizado a exibição das informações enviadas em um gráfico online, bem como a exportação de um banco de dados próprio com as informações úteis enviadas através do node-RED.

Pode-se publicar em um canal até oito diferentes informações enviadas em um mesmo procedimento de publish.

Nota: A partir do recebimento de uma mensagem conforme for executado um subscribe no Network Server, esta informação será tratada e formatada corretamente para ser publicada no ThingSpeak.

A Figura acima exemplifica o processo de criação de um novo canal (deve-se guardar a informação de ID Channel, ela será utilizada a frente) com apenas um campo de informação habilitado denominado Hidrometro - Bloco U. Habilitando-de o Campo 1, descreveu-se como unidades de vazão em litros por hora (l/h). Esta informação será a descrição do gráfico a ser criado conforme este canal for criado clicando-se em Save Channel conforme a Figura abaixo.

Para que o gráfico em tempo real a ser gerado se torne publico, deve-se ir na aba Sharing e escolher a opção Share channel view with everyone. A partir disto será gerado um link de uma página html a poder ser compartilhada, descrita a frente.

Para o permissionamento de publish, isto é escrita no servidor ThingSpeak, é necessário também que se tenha a Chave de Escrita referente a este canal. Com esta chave será possível inserir o tópico correto do processo de publish no MQTT deste servidor.

A Figura abaixo demonstra um gráfico de caráter publico criado e os valores sendo preencidos após um determinado tempo de amostragem.

Para configurar as características opcionais do gráfico pode-se clicar em Field Chart Options, na barra superior do gráfico. Características de cores,, numero de amostras, valor máximo e mínimo, entre outras características.

Também é possível espelhar o gráfico gerado em uma página html clicando-se no botão de iframe.  Esta característica será abordada para a exibição do gráfico no ambiente dashboard do Node-RED.

Os dados publicados no servidor ThingSpeak possuem um banco de dados próprio para cada canal separados pelos campos configurados anteriormente. Neste ponto, é possível executar uma requisição GET e realizar o download dos dados utilizados nesta aplicação como histórico de dados para análises tanto em Matlab local, planilhas ou outros softwares que suportam a importação de dados csv ou json, por exemplo.

Na Figura acima, além das possibilidades de Import/Export, pode-se observar uma aba selecinada: Account --> My Profile. Nas configurações de conta de usuário há uma chave descrita como MQTT API key,. Da mesma maneira para se conectar ao NetworkServer e efetuar uma conexão com segurança e permissionamento, deve-se ter uma senha para se conectar ao servidor MQTT. No caso do ThingSpeak, esta senha é exatamente os caracteres no campo citado acima como MQTT API key.

A seguir será evidenciado para a aplicação Hidrômetro – Bloco U, a partir de um subscribe no MQTT do Network Server, passando pelo tratamento e formatação dos dados e publicação no servidor ThingSpeak a partir do envio de um dado pelo end-node. E a seguir como exibir este dado de maneira online em um gráfico online MQTT do ThingSpeak no dashboard do Node-RED.

ThingSpeak + Node-RED

Tendo em vista que para a Integração por meio de MQTT tanto efetuando um subscribe no networkserver como um Publish no ThingSpeak, é necessário conhecer como é realizado o Acesso ao MQTT broker. Através deste documento, tem-se as informações necessárias para fazer ambas conexões:

CONEXÃO NETWORKSERVER

Com o cliente MQTT devidamente instalado, deve-se conectar através dos campos listados abaixo:

• Host: networkserver.maua.br
• Port: 1883
• Username: PUBLIC
• Password: public
• Client-ID: (não necessário)
• Topic : application/+/node/{dev_EUI}/rx

CONEXÃO THINGSPEAK

Com o cliente MQTT devidamente instalado, deve-se conectar através dos campos listados abaixo:

• Host: mqtt.thingspeak.com
• Port: 1883
• Username: (qualquer valor)
• Password: MQTT API key
• Client-ID: (não necessário)
• Topic : channels/{channelId}/publish/{WritingKey}

FORMATAÇÃO DE DADOS

Para se publicar um valor no ThingSpeak é necessário seguir o protocolo de formatação para que cada campo do canal a ser publicado esteja corretamente escrito.

A formatação de uma string para a publicação no tópico de cada canal conforme mencionado acima é dada por:

"field1=10&field2=35"

É importante se observar que é possível escrever até oito campos diferentes para cada canal. O caractere comercial & adiciona a possibilidade dos canais subsequentes. No caso do exemplo acima foram enviados através da mensagem dois campos. Neste caso, o primeiro, field1, com um valor numérico igual a 10 e o segundo campo com um valor numérico igual a 35. Caso se queira apenas enviar um ou outro campo, basta o nome do campo e o seu valor, como é evidenciado a seguir:

"field1=10"

Por sua vez, o campo 1 deste canal será atualizado com o valor enviado a partir da string acima.

NODE-RED

A documentação Exemplo Node-RED define como obter o dado publicado pelo end-node no Networkserver. Este dado é obtido pela inscrição de um cliente MQTT neste servidor.

A partir do tratamento dos dados é possível a visualização de um dado específico em um dashboard ou mesmo utilizá-lo para outros fins, como, por exemplo, publicá-lo em outro servidor MQTT.

A Figura abaixo mostra o flow completo desde a recepção do dado através de um subscribe no servidor NetworkServer como a publicação do dado no ThinSpeak server e exibição de dados no dashboard tanto da bilioteca de dashboards como também um template com o gráfico Node-Red.

[{"id":"90186ba6.d6a7b8","type":"comment","z":"2e333270.03a7ce","name":"DET 12 - Hidrometro 01","info":"","x":1827.0000610351562,"y":1037.9999961853027,"wires":[]},{"id":"df038445.ccce88","type":"comment","z":"2e333270.03a7ce","name":"Uplink","info":"","x":1790,"y":1080,"wires":[]},{"id":"3423b2bf.0606de","type":"comment","z":"2e333270.03a7ce","name":"Downlink","info":"","x":1759.837547302246,"y":1355.0624961853027,"wires":[]},{"id":"8b08068f.094f78","type":"mqtt in","z":"2e333270.03a7ce","name":"DET-12[Network Server-PUBLIC-Uplink]","topic":"application/+/node/0004a30b001a5ea1/rx","qos":"2","broker":"456108c5.a91fc8","x":1920,"y":1140,"wires":[["cf761cea.9cf0a"]]},{"id":"cf761cea.9cf0a","type":"json","z":"2e333270.03a7ce","name":"Format JSON str to Obect","pretty":false,"x":2020,"y":1200,"wires":[["d0ba032a.b0eca"]]},{"id":"d0ba032a.b0eca","type":"function","z":"2e333270.03a7ce","name":"Parse JSON.data field","func":"msg.payload = msg.payload.data;\nreturn msg;","outputs":1,"noerr":0,"x":2100,"y":1260,"wires":[["e89541e5.934c3"]]},{"id":"e89541e5.934c3","type":"decode","z":"2e333270.03a7ce","name":"Decode [Base64]","encode":"Base64","x":2330,"y":1200,"wires":[["3df1b7cd.ec4368"]]},{"id":"3df1b7cd.ec4368","type":"encode","z":"2e333270.03a7ce","name":"","encode":"Hex","x":2340,"y":1260,"wires":[["f9fc851c.dfe808","f07ca922.0f4398","1eb55e3d.78cfba"]]},{"id":"f9fc851c.dfe808","type":"function","z":"2e333270.03a7ce","name":"Voltage DET-11","func":"msg.payload = (parseInt(msg.payload.substr(10,4),16)/1000).toFixed(2);\nreturn msg;","outputs":1,"noerr":0,"x":2620.0001678466797,"y":1241.9999837875366,"wires":[["d1b5f522.4b3f18","7b901112.7f51f8"]]},{"id":"fafcc091.77eeb","type":"ui_gauge","z":"2e333270.03a7ce","name":"","group":"a438917d.04162","order":0,"width":"10","height":"8","gtype":"wave","title":"","label":" l/h","format":"{{value}}","min":0,"max":"15","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":2890,"y":1200,"wires":[]},{"id":"7bbe0ef4.cbe52","type":"ui_gauge","z":"2e333270.03a7ce","name":"","group":"a438917d.04162","order":0,"width":"5","height":"5","gtype":"donut","title":"Atualizado há","label":"min.","format":"{{value}}","min":"0","max":"20","colors":["#008000","#ffff00","#ff0000"],"seg1":"","seg2":"","x":2898.0001525878906,"y":1346.9999313354492,"wires":[]},{"id":"d1b5f522.4b3f18","type":"ui_gauge","z":"2e333270.03a7ce","name":"","group":"a438917d.04162","order":0,"width":"5","height":"5","gtype":"gage","title":" Bateria","label":"V","format":"{{value}}","min":"2.95","max":"3.4","colors":["#ff0000","#ffff00","#008000"],"seg1":"","seg2":"","x":2887.999954223633,"y":1267.999984741211,"wires":[]},{"id":"f07ca922.0f4398","type":"function","z":"2e333270.03a7ce","name":"Contagem Regressiva","func":"//call constructor Date() and pass to now\nvar now = new Date();\n//time_now receive current time\nvar time_now = now.getTime();\n\nif (typeof last_broker_time === 'undefined'){\n last_broker_time = time_now;\n}\n\nif (msg.payload){\n last_broker_time = time_now;\n } \n\n//1. diference between times\n//2. divide per 1000 to parse miliseconds to second\n//3. divide per 60 to parse second to minute\n//4. .toFixed(0) return an int value\n//5. parseInt(\"string\",10) --> returns a decimal value based on own string value\nvar difference_between_times = parseInt(((time_now - last_broker_time)/60000).toFixed(0),10);\n\n//pass to msg.payload the desire velue to show on gauge in dashboard\nmsg.payload = difference_between_times; \nreturn msg;","outputs":1,"noerr":0,"x":2624.0001678466797,"y":1320.9999313354492,"wires":[["7bbe0ef4.cbe52","6f79db18.48fd54"]]},{"id":"a6025d74.c1406","type":"inject","z":"2e333270.03a7ce","name":"","topic":"","payload":"msg.time_sample","payloadType":"global","repeat":"5","crontab":"","once":false,"x":2330,"y":1320,"wires":[["f07ca922.0f4398"]]},{"id":"d1da50bf.c77ac","type":"function","z":"2e333270.03a7ce","name":"Downlink JSON","func":"msg.payload = '{ \"reference\": \"test-node-red\", \"confirmed\": false, \"fPort\": 100, \"data\": \"AAE=\" }';\n\n\nreturn msg;","outputs":1,"noerr":0,"x":2059.8375549316406,"y":1431.062497138977,"wires":[["836bc9b2.2928c8"]]},{"id":"836bc9b2.2928c8","type":"json","z":"2e333270.03a7ce","name":"Format JSON str to Obect","pretty":false,"x":2312.8572578430176,"y":1429.3165645599365,"wires":[["3d050698.fce7ba"]]},{"id":"3d050698.fce7ba","type":"mqtt out","z":"2e333270.03a7ce","name":"DET-12[Network Server-PUBLIC-Downlink]","topic":"application/+/node/0004a30b001a5ea2/tx","qos":"0","retain":"","broker":"456108c5.a91fc8","x":2651.9999389648438,"y":1427.9999961853027,"wires":[]},{"id":"ea559f7.6fbe86","type":"comment","z":"2e333270.03a7ce","name":"IMT-CP-DET","info":"","x":2891.000244140625,"y":1131.000015258789,"wires":[]},{"id":"571d3feb.8a0a3","type":"comment","z":"2e333270.03a7ce","name":"IMT-CP-DET","info":"","x":1827.5234870910645,"y":1394.0389614105225,"wires":[]},{"id":"44945dd6.5dfa24","type":"comment","z":"2e333270.03a7ce","name":"hidrometros","info":"","x":3163.000129699707,"y":1134.999979019165,"wires":[]},{"id":"1eb55e3d.78cfba","type":"function","z":"2e333270.03a7ce","name":"difference_between_broker","func":"//--------------------------------------------------------\n//-----------CALCULATE DIFFERENCE BETWEEN COUNTERS--------\n//--------------------------------------------------------\n\n//new_msg receives parse counter value from \"data\":\"0bCCCCCC0cBBBB\"\nvar broker_msg = parseInt(msg.payload.substr(2,6),16);\n\n//declare last_msg null, last_msg receives new msg if last_msg is null\n\nif (typeof last_msg === 'undefined'){\n last_msg = broker_msg;\n} else {\n last_msg = new_msg;\n \n}\n\nif (typeof new_msg === 'undefined'){\n new_msg = broker_msg;\n} else {\n new_msg = broker_msg;\n\n}\n\n//difference_between_msg\nvar dbm = (new_msg - last_msg);\n\n\n//--------------------------------------------------------\n//------------CALCULATE DIFFERENCE BETWEEN TIMES----------\n//--------------------------------------------------------\n\n//call constructor Date() and pass to now\nvar now = new Date();\n\n//time_now receive current time\nvar time_now;\n\ntime_now = now.getTime();\n\nif (typeof last_broker_time === 'undefined'){\n last_broker_time = time_now;\n}\n\n//1. diference between times\n//2. divide per 1000 to parse miliseconds to second\n//3. divide per 60 to parse second to minute\n//4. .toFixed(0) return an int value\n//5. parseInt(\"string\",10) --> returns a decimal value based on own string value\n//difference_between_times\nvar dbt = parseInt((((time_now - last_broker_time))/1000),10);\n\n\n//--------------------------------------------------------\n//----------------CALCULATE FLOW (dbm/dbt)----------------\n//--------------------------------------------------------\n\n//pass to msg.payload the desire velue to show on gauge in dashboard\n//multiple 60 to turns minutes in ours\nmsg.payload = (dbm/dbt)*60*60; \n\n\nmsg.newm=new_msg;\nmsg.lastm=last_msg;\nmsg.dbm=dbm\nmsg.dbt=dbt;\n\nlast_broker_time = time_now;\n\n//--------------------------------------------------------\n//----------------RETURN MSG )MSG.PAYLOAD)----------------\n//--------------------------------------------------------\nreturn msg;\n\n","outputs":1,"noerr":0,"x":2620,"y":1160,"wires":[["fafcc091.77eeb","c257f682.f4586","5bb0d473.2cb8ec"]]},{"id":"5bb0d473.2cb8ec","type":"function","z":"2e333270.03a7ce","name":"Format to ThingSpeak MQTT","func":"msg.payload = \"field1=\" + msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":2906.999954223633,"y":1047.9999103546143,"wires":[["7a733215.1f0294"]]},{"id":"7a733215.1f0294","type":"mqtt out","z":"2e333270.03a7ce","name":"ThingSpeak CP-DET ACCOUNT","topic":"","qos":"0","retain":"","broker":"5b6bbc5a.91a354","x":3222.000030517578,"y":1047.9999103546143,"wires":[]},{"id":"c257f682.f4586","type":"ui_gauge","z":"2e333270.03a7ce","name":"","group":"30d5c8de.1dd96","order":0,"width":"12","height":"14","gtype":"wave","title":"","label":" l/h","format":"{{value}}","min":0,"max":"50000","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":3070,"y":1180,"wires":[]},{"id":"7b901112.7f51f8","type":"ui_gauge","z":"2e333270.03a7ce","name":"","group":"30d5c8de.1dd96","order":0,"width":"7","height":"7","gtype":"gage","title":" Bateria","label":"V","format":"{{value}}","min":"2.95","max":"3.4","colors":["#ff0000","#ffff00","#008000"],"seg1":"","seg2":"","x":3080,"y":1240,"wires":[]},{"id":"6f79db18.48fd54","type":"ui_gauge","z":"2e333270.03a7ce","name":"","group":"30d5c8de.1dd96","order":0,"width":"7","height":"7","gtype":"donut","title":"Atualizado há","label":"min.","format":"{{value}}","min":"0","max":"60","colors":["#008000","#ffff00","#ff0000"],"seg1":"","seg2":"","x":3100,"y":1320,"wires":[]},{"id":"88b8e326.32f68","type":"ui_button","z":"2e333270.03a7ce","name":"","group":"a438917d.04162","order":0,"width":"10","height":"2","passthru":false,"label":"Press DET-12","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":1825.837547302246,"y":1429.062497138977,"wires":[["d1da50bf.c77ac"]]},{"id":"63eeea03.267484","type":"ui_template","z":"2e333270.03a7ce","group":"53e7adc6.0ca864","name":"DET","order":0,"width":"70","height":"14","format":"<iframe width=\"1850\" height=\"350\" style=\"border: 1px solid #333333;\" src=\"https://thingspeak.com/channels/490486/charts/1?bgcolor=%23333333&color=%23007878&dynamic=true&results=1440&type=line&width=1850&height=350\"></iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":3250,"y":1180,"wires":[[]]},{"id":"456108c5.a91fc8","type":"mqtt-broker","z":"","broker":"networkserver.maua.br","port":"1883","tls":"d92daa44.cf322","clientid":"Node-RED from smartcampus","usetls":false,"compatmode":true,"keepalive":"200","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"a438917d.04162","type":"ui_group","z":"","name":"DET-12 - [Bloco U - Caixa]","tab":"8b72f879.1fd5a","disp":true,"width":"10"},{"id":"5b6bbc5a.91a354","type":"mqtt-broker","z":"","broker":"mqtt.thingspeak.com","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"30d5c8de.1dd96","type":"ui_group","z":"","name":"DET-12 - [Bloco U - Uso Geral]","tab":"22847821.d1732","disp":true,"width":"20"},{"id":"53e7adc6.0ca864","type":"ui_group","z":"","name":"DET-12 - [Bloco U - Uso Geral] [Gráfico]","tab":"22847821.d1732","disp":true,"width":"70"},{"id":"d92daa44.cf322","type":"tls-config","z":"","name":"","cert":"","key":"","ca":"","certname":"maua.br.crt","keyname":"maua.br.key ","caname":"intermediate.crt","verifyservercert":true},{"id":"8b72f879.1fd5a","type":"ui_tab","z":"","name":"IMT-CP-DET","icon":"dashboard"},{"id":"22847821.d1732","type":"ui_tab","z":"","name":"Hidrômetros","icon":"dashboard"}]

Como já antes visto em detalhes, grande parte deste flow representado na Figura acima está documentado em Exemplo de Node-RED. A Figura abaixo refere-se às principais mudanças, como a formatação dos dados para a publicação no thingSpak, e uma nova tela de dashboard para a visualização dos dados do Thingspeak no dashboard.

A formatação dos dados e publicação no servidor MQTT ThingSpeak é demonstrado segundo os blocos a seguir. Tendo a entrada do blovo “Format to ThingSpeak” como saída em paralelo da amostragem no dashboard do valor calculado para a amostragem. Neste ponto, pega-se o valor real de medição para publicar no ThingSpeak.

A implementação da formatação do dado é descrito por um bloco de function.

A partir do bloco acima é possível editá-lo inserindo como variável do flow, a saber esta é denomindada de msg.payload. Esta variável recebe uma string “field1=” e concatena com o valor que possuia anteriormente, conforme é possível visualizar a seguir:

msg.payload = "field1=" + msg.payload;
return msg;

A partir da correta formatação a informação deve ser publicada no servidor MQTT do ThingSpeak. Para isso é necessário o bloco de publish, como mostra a Figura a seguir.

Editando o bloco descrito acima, deve-se estabelecer a conexão ao servidor MQTT do ThingSpeak preenchendo-se os campos Topic conforme descrito acima e o campo QoS (Quality of Service) com valor igual a zero.

Editando a conexão com o servidor MQTT do ThingSpeak, o host e a port devem ser respectivamente:

• host: mqtt.thingspeak.com
• port: 1883

Para estabelecer uma conexão segura e autenticada restrita a cada usuário e publicar no servidor MQTT do ThingSpeak, deve-se preencher corretamente os capos de username e password:

• username: qualquer valor (é indicado preencher com o nome de usuário do thingspeak)
• password: valor da chave MQTT API key do ThingSpeak

A partir destas informações basta em clicar em deploy, no ambiente node-RED e executar as alterações e esperar para que seja recebido um pacote de informação do end-node. Após recebido este pacote, será publicado no servidor MQTT do ThingSpeak.

Estas recepções preencherão o gráfico criado anteriormente conforme a Figura a seguir:

É importante notar que este gráfico é de caráter público. Então qualquer um com o link do gráfico poderá visualizá-lo de qualquer parte em se tenha disponível uma conexão com a Internet. A partir deste momento, todos os dados enviados ao ThingSpeak são armazenados em um banco de dados próprio desta plataforma. Ao chegarem novos dados serão atualizados os valores do gráfico de maneira online e armazenados junto aos demais.

É interessante perceber, no gráfico da Figura abaixo um certo padrão de comportamento. Como o gráfico abaixo trata-se da aplicação de um hidrômetro instalado na entrada da caixa d’água do bloco U, tem-se o behavior of things (comportamento) deste dispositivo em função do tempo. Esta documentação não abordará algorítimos de comportamento das coisas, apenas como obter estes dados de maneira online e aconselhar que estes dados podem ser utilizados pelo Matlab online, bem como Matlab nativo instalado em máquina.

Como característica de gráficos Matlab, nota-se conforme a Figura abaixo, que ao se passar com o mouse por cima do gráfico, é possível visalzar os valores da variável obtida bem como informação do tempo de aquisição destes dados.

Tratando-de este gráfico de uma disponibilidade em html, é possível realizar um iframe. O iframe é um procedimeto para se incluir páginas em html dentro de outras aplicações.

Voltando-se ao ambiente node-RED, é possível escolher um bloco de dashboard denominado template. O template permite escrever páginas em html, e através deste bloco é possível a exibição do gráfico acima dentro também do ambiente node-RED.  Assim, além do node-RED publicar o dado no servidor thingSpeak é possível visualizá-lo também no dashboard, em companhia das outras variáveis desejadas.

A Figura a seguir demonstra o bloco de template (</>) uilizado para a exibição da página html espelhada.

Como descrito anteriormente, gerou-se o iframe através do gráfico na plataforma node-RED conforme o código abaixo:

E então inserido no código de template como demonstrado a seguir:

<iframe width="1850" height="350" style="border: 1px solid #333333;" src="https://thingspeak.com/channels/490486/charts/1?bgcolor=%23333333&color=%23007878&dynamic=true&results=1440&type=line&width=1850&height=350"></iframe>

Neste caso, para o número de reultados de 1440 amostras, sendo que abrangerá um gráfico de no mínimo de uma semana, visto que cada end-node envia um dado ao servidor de 7 em 7 minutos. A Figura abaixo representa a implementação do código do iframe modificado acima.

É possível visualizar o comportamento do hidrômetro ao longo do tempo e atualizado de maneira online.

Informações importantes do último valor transmitido também são importantes para a análise de health e status do end-node. A Figura abaixo mostra formatado algumas características do status do end-node em relação à ultima informação recebida, nível de bateria do end-node e tempo da última atualização de envio do end-node ao Network Server.

Com isso, é possível a integração da aplicação com um servidor externo e a visualização deste no dashboard. É interessantíssimo este fato, evidenciando a facilidade de integração co outras ferramentas de alto nível disponíveis para a pesquisa e desenvolvimento de internet das coisas.

O gráfico acima está instanciado na plataforma de exibição do smartcampus disponível em https://smartcampus.maua.br/dash/gms.

CLICK AND SWIPE DOCS GALLERY