B4J Code Snippet [ABMaterial] Custom Component Linear Gauge

Whilst working on an IoT Learning Case simulating an Oil Tank Farm (Lego, Tinkerforge sensors, B4J + ABMaterial to Control), been searching for Meter type gauges used to show flows and levels.

Found the Canvas Gauges Project (Many thanks to the author) from which this ABMaterial Linear Gauge Custom Component is created. Notes: The linear gauge is only a subset of the many gauges available. The custom component has (again) only a few properties exposed. So, open for enhancing.

Example Project simulates flow in & flow out & level update via timers

The source code of the example and the custom component attached (Note: only the code and the custom js, not the full ABMaterial files).
Versions used: B4J 6.30, ABMaterial 4.30 donator version.

 

[rwblinn]

Following Up from first post
To share the draft status of the web-based UI for IoT Learning Case, now called OilTank60.

The flowsheet has been developed with the Engineering Toolbox drawing online with Google Docs.
The flowsheet is placed as a background image on a grid cell.
On the flowsheet, switches (developed an ABMaterial Custom Control "custControlSwitch") enable to open/close valves or start/stop pumps.
The gauges are indicating according pumps state.
In addition, the level is shown textual via (developed an ABMaterial Custom Control "custControlText")

Whats Next: MQTT to communicate with the TinkerForge devices, page with Charts for the Flows and Level (either Frappe Charting or develop a rather simple line chart custom component - just to indicate trends), page with settings, setup TinkerForge devices and the Raspberry Pi ... and then (fun) build the OilTank with Lego.
BTW: my first IoT Learning Case, using Node-RED, is published here.

Webbrowser Screenshot with both pumps running, indicated by flow gauges and level.

 

[Mashiane]

Thank you so much, ive been looking for this functionality for water tank based systems..

 

[rwblinn]

Thank you so much, ive been looking for this functionality for water tank based systems..

Thanks (and share your solution when ready).

Update: making progress on the OilTank60 show case - see screenshot post #2 ... still a long way to go ... focus for now mainly on the ABMaterial UI.
Several custom components developed: custCanvasStatus, custCanvasSwitch, custCanvasText, custLinearGauge, custChartJS.
For text using Digital-7 font (from this example - thanks to @Descartex).

 

[CGP]

Following Up from first post
To share the draft status of the web-based UI for IoT Learning Case, now called OilTank60.

The flowsheet has been developed with the Engineering Toolbox drawing online with Google Docs.
The flowsheet is placed as a background image on a grid cell.
On the flowsheet, switches (developed an ABMaterial Custom Control "custControlSwitch") enable to open/close valves or start/stop pumps.
The gauges are indicating according pumps state.
In addition, the level is shown textual via (developed an ABMaterial Custom Control "custControlText")

Whats Next: MQTT to communicate with the TinkerForge devices, page with Charts for the Flows and Level (either Frappe Charting or develop a rather simple line chart custom component - just to indicate trends), page with settings, setup TinkerForge devices and the Raspberry Pi ... and then (fun) build the OilTank with Lego.
BTW: my first IoT Learning Case, using Node-RED, is published here.

Webbrowser Screenshot with both pumps running, indicated by flow gauges and level.
View attachment 70427

Hi @rwblinn can you share the code?

Thanks

 

[rwblinn]

can you share the code?

Sure = find attached. Not the full ABM files are included, only the custom ones.

Please Note: Due to other committments, this project is put on hold.