B4R Tutorial B4R & B4J MQTT display DHT11 sensor data Google Line Chart

Hi,

as an example build a B4R & B4J solution to display DHT11 sensor data (Temperature & Humidity) in a google line chart created and refreshed by a B4J webserver.

Update 2016.05.24
There are two solutions developed with the same result:

• Post #1 uses MQTT to communicate between the Arduino and the Server.
• Post #5 uses Websockets for both Arduino and Server. This solution is simpler as using MQTT.

B4R MQTT Client

• DHT11 sensor connected to an Arduino. The Arduino has an Ethernet shield.
• Arduino to publish in regual interval (by a timer) the DHT11 sensor data via MQTT.
• Arduino to subscribe to the "interval" topic, which is published by the B4J server. If "interval" topic received, the timer interval is changed.

B4J MQTT Client & Server with Websocket

• Two servers are defined, one for the MQTT Broker (port 51043) and the other for the B4J webserver (port 51042).
• MQTT client receives the Arduino published payload and stores the values in a data file located in the dirapp folder (with a limited number of data entries).
  
• When a client connects via webbrowser to the B4J server, a timer is started to regular refresh the line chart.
• The webinterface has in addition to the line chart, a button to show an About modal dialog and a button to set the interval via a modal inputdialog - the interval is taken by the B4R program and changed accordingly.
• The footer of the webinterface shows the last update and the refresh interval.
• W3.CSS is used for the webinterface.

Read the project notes in the various project files. These are well documented.
See attached - which also includes a B4J datagenerator (used to test the server), a B4J MQTT non-UI client and an older B4J server handler version.
Again cool to see the B4X integration.

 

[Erel]

Great work!

It might have been simpler to directly connect the Arduino to the B4J web server with WebSockets: https://www.b4x.com/android/forum/threads/websocketclient.66212/#content

 

[rwblinn]

Thanks a lot and for the hint.

Will work next on a the direct connection as steered.

 

[inakigarm]

Waiting desesperately for the ESP8266 lib !!

 

[rwblinn]

Pls find attached a reworked version using Arduino to the B4J web server with WebSockets (see post #2)

B4R Client

• DHT11 sensor connected to an Arduino. The Arduino has an Ethernet shield.
• Arduino sends in regular intervals (defined by a timer) the DHT11 sensor data via an event to the B4J server.
• Arduino uses a new message function to set the interval time as given by the B4J server. If the "interval" function is received, the timer interval is changed.
• Requires rWebSocketClient library

B4J Server

• The B4J server (port 51042) uses two websockets, one for the Arduino connected (as sending the DhT11 sensor data) and the other for the webclients via browser.
• The Arduino class handles first the update of the chart data: stores the values in a data file located in the dirapp folder (with a limited number of data entries).
• Secondly the line charts for all connected browsers are updated (a great feature - tested on 3 clients simultanously including Raspberry Pi). This requires no extra timer for the clients.
• The webinterface has in addition to the line chart, a button to show an About modal dialog and a button to set the interval via a modal inputdialog - the interval is taken by the B4R program and changed accordingly.
• The footer of the webinterface shows the last update and the refresh interval.
• W3.CSS is used for the webinterface.

Read the project notes in the various project files. These are well documented. See attached.

Same output as post #1

 

[klaus]

One advice:
Instead of posting a new version in your last post, please update the first post with the new version.
This way it is much easier to find the last version. This has become the usage in this forum.
You can add there a list with the version evolution.

 

[rwblinn]

One advice:
Instead of posting a new version in your last post, please update the first post with the new version.

Thanks for the advice. Point taken and updated Post #1 accordingly. In essence two solutions developed with the same result:

• Post #1 uses MQTT to communicate between the Arduino and the Server.
• Post #5 uses Websockets for both Arduino and Server. This solution is simpler as using MQTT.