Weather Dashboard

Samples & Hints for the ABMaterial framework, which combines a tuned Materialize CSS with the free programming tool B4J.
Site Admin
Posts: 224
Joined: 07 Oct 2017, 12:16

Weather Dashboard

Postby rwblinn » 03 Dec 2017, 09:49

ABMaterial Sample Project Weather Dashboard
v1.0.0 (Build (20171203)

To create a real-time Weather Dashboard, accessed via browser, showing the humidity, temperature, air pressure in gages & charts.
The server is running on a Raspberry Pi. All connected clients to be updated automatically.
The solution must be flexible to accommodate additional devices, sensors, store & retrieve data from external sources like database or flat files, manage configuration.


Solution Overview
The solution runs on a Raspberry Pi with a TinkerForge master brick connected. The master brick has the bricklets humidity, temperature and barometer attached. The server is developed with B4J and the ABMaterial framework enabling web browser access. The weather data is displayed in gages & trend graphs. The sampling interval & scaling can be changed via settings.

Development Tools
  • B4J v6.00
  • ABMaterial v4.03
  • ABMaterial Gage custom component justGage plugin (v1.2.9).
  • ABMaterial Chart custom component Chart.js plugin (v2.7.1).
  • TinkerForge Brick Daemon 2.3.1, Brick Viewer 2.3.12, Java Binding 2.1.16

B4J Source Code.
The archive does not contain the full ABM folder structure, but only what is required for the examples (in the www custom folders).
To test the application, copy in addition the www folder (and only that folder) from the ABM Template folder.

Parts Used
  • 1x Raspberry Pi 3 Model B v1.2 (based on NOOBS 2.4.5 Release date: 2017-11-29)
  • 1x TinkerForge Master Brick (v2.0)
  • 1x TinkerForge Humidity Bricklet (v1)
  • 1x TinkerForge Temperature Bricklet (v1)
  • 1x TinkerForge Barometer Bricklet (v1)

TinkerForge: The 3 bricklets are connected to the master brick. The master brick is connected to the Raspberry Pi USB port.
The Raspberry Pi has the TinkerForge Brick Daemon running and is connected to a local to be able to access the application.
To access use http://ip-address:51050/WeatherDashboard.

In this example, the Master Brick is connected via USB to the Raspberry Pi. On the Raspberry Pi, the TinkerForge Brick Daemon has to be installed, which acts as a translator between TCP/IP and USB.
It is planned to use the Master Brick WIFI Extension, to have a direct TCP/IP connection without the need of the Raspberry Pi.

Application Concept
  • The data sampler requests data in regular intervals from the TinkerForge bricklets.
  • The data is kept in a list with maps. The list has a maximum size (LIFO principle). Not implemented is storing the data to a database or flat file.
  • To update any connected web clients, the data is prepared per device/sensor as required by the gages & line chart displayed in each local browser. Each new client or manually refreshing the webpage ensures all data is displayed.
  • The gages are updated by taking the last value from the data.
  • The charts require data in JSON format which is generated from the data.
  • The data sampler handles errors from the samplers (stops sampling, log message)
  • A settings page enables to view the sampling status, start & stop sampling, set TinkerForge parameter, ranges. In case of fixing an error, sampling to be started from this page.

For now, the data points are not stored, means that every restart of the application starts with new data.

  • Clicking in a chart on a data point shows time stamp and value.
  • Comprehensive tutorial how to create an ABMaterial custom component.

The settings are stored in map format in the text file WeatherDashboard.set, located in the application folder.


Example settingsfile

Code: Select all


Run the application, access via browser http://ip-address:51050/WeatherDashboard.

  • Ambient light sensor connected to an Arduino, which is connected to the Raspberry Pi. Data transfer using the B4XSerializer.
  • Gage & Chart dynamic y-axis min / max scaling.
  • TinkerForge Master Brick WIFI Extension, to have a direct TCP/IP connection without the need of the Raspberry Pi.
  • ABM Custom Component MinMaxInput.

Installation Raspberry Pi
See Raspberry Pi Service Setup.

Return to “ABMaterial”

Who is online