B4J Library HMITilesIO

HMITilesIO
An Open-Source HMI (Human-Machine Interface) Tile Library for Small IIoT (Industrial Internet of Things) Dashboards

---

Overview

HMITilesIO brings structured, industry-inspired high-performance HMI design principles directly into the B4X ecosystem.
It combines highly optimized vector graphics with native input tracking for microcontrollers and IIoT applications.

---

Technical Engineering Challenges

Developing a single CustomView codebase that renders identically and handles real-time user inputs seamlessly across different platform engines presented several complex development challenges:

• Cross-Platform Touch Parity (B4J vs. B4A): Mobile Android WebViews do not expose mouse and drag clicks the same way desktop environments do. To solve continuous slider tracking without lagging the interface or losing events, the library utilizes a transparent native B4XView Panel overlay. This layer intercepts multi-state finger movements natively and maps physical pixel ratios directly to internal grid units.
• Dynamic JavaScript & Style Execution: Achieving high-frequency visual updates requires direct interaction with embedded assets. The framework uses native Android WebKit asynchronous execution loops (evaluateJavascript) through JavaObject, bypassing heavy URL reloading schemes. This allows real-time modifications of vector colors, labels, and drop shadows without screen flickering.
• Strict SVG Matrix Constraints: To build an easily arranged dashboard grid, every asset is restricted to a mandatory, non-resizable 120x120px bounding box layout. Overcoming sub-pixel font clipping on high-DPI screens required implementing custom typography properties (such as removing absolute baselines) and ensuring all borders scale perfectly to the component edge.

---

Design Goals

• Lightweight tiles rendering completely offline-safe, self-contained SVG graphics.​
• Seamless dual-platform operation across desktop and mobile devices.​
• Hardware-isolated native touch event tracking to ensure zero interface input lag.​

---

Platform Support

Platform	Status	Notes
B4J	Supported	Primary target (full-screen desktop HMIs)
B4A	Supported	Full mobile support (Phone/Tablet field controllers)
B4i	Not Supported	iOS deployment is not currently planned

---

HMITilesIO Overview

Tile Type	Brief Description	Primary IoT / HMI Use Case
Alarm	Alarm Tile - An annunciation component utilizing subtle outer border-stroke color signaling to isolate critical process alerts while preserving dashboard grid visual aesthetics.	Discrete output: Status indicator, adhoc warnings.
BatteryIndicator	Battery Indicator: Smart, low-footprint charge level layout displaying a responsive 4-segment vertical vector cell. Automatically transitions through visibility and warning color profiles based on raw 0-100% capacity data blocks.	Power Supply Monitoring: Live tracking for remote battery nodes, solar charging configurations, UPS backup cells, or low-power ESP32/Pico field telemetry loops.
Button	Push Button: Multi-layered bezel with high-contrast borders and an offset shadow to give it strong physical depth.	Discrete Input: Momentary engine starts, manual horn triggers, or tactile latch reset commands.
ByteStatus	Byte Bit Matrix: An 8-bit digital register status word display mapping a raw byte (0-255) into a high-visibility 2x4 diagnostic grid matrix with real-time hexadecimal footer logging.	Discrete Output: Real-time CAN-Bus frame analysis, GPIO expander debugging, or low-level register tracking.
Compass	Compass: A simplified 360° directional tracking tool mapping singular degree vector variables straight to a sleek orientation wedge arrow layout.	Process Lifecycles: Environmental weather wind tracking, factory ventilation flow vectors, automated guided vehicle (AGV) travel heading, or material mixer rotational paths.
DualReadOut	Dual Read Out: High-density, twin-column telemetry layout with independent value nodes and dedicated unit frames for dense cluster environments (e.g., "23 °C" | "68 %").	Dual Sensor Arrays: Simultaneous localized parameter tracking (Temperature/Humidity, Voltage/Current, or dual-zone status updates).
Gauge	180° Gauge: Beautiful, perfectly mapped left-to-right neon tracking arc.	Analog Readout: High-visibility analog readouts like Engine RPM, Vehicle Speed, or active Pump Pressure.
Horizon	Horizon: An avionics-grade flight attitude indicator translating combined pitch and roll vector metrics seamlessly onto a high-visibility, responsive gauge matrix layout.	Basically bit-of-fun showing what can be done with SVG images.
IconIndicator	Icon Indicator: High-visibility visual alert interface rendering a scalable 48x48px vector symbol frame. Dynamically handles inline status updates (e.g., "OK", "WARNING", "ERROR", "INFO") using low-latency embedded strings.	System Health Diagnostics: State-machine fault monitoring, critical hardware overrides, connection status flags, or process validation warnings.
IOPanel	IO Panel: Up-to 8 rectangles to set multiple states ON / OFF.	Discrete Input: Multi-relay smart home control, zone lighting management, or individual valve line triggers.
LEDPanel	LED Panel: Flat, flush pilot light embedded smoothly into the dashboard surface.	Discrete Output: Passive system notifications such as Overheat Alerts, Connectivity Pings, or Safe Run indicators.
LoadingIndicator	An progress layout component utilizing sub-pixel balanced vector geometries and strict layout symmetry to track active processes without adding visual distraction to the HMI grid matrix.	Discrete Output: Indicator for task-in-progress.
MultiState	Multi State: Up-to 8 rectangles to set a single state ON / OFF.	Discrete Input: Interlocked control patterns like Fan Speeds (Low/Med/High) or Machine Mode options.
ReadOut	Read Out: Crisp telemetry display that cleanly outputs dynamic process numbers or operational status string values (e.g., "23.5 °C", "1013 hPa", "RUNNING").	Analog Readout: Environmental sensor arrays (DHT22/BME280) or text-based state machines.
QuadReadOut	An ultra-high-density 2x2 variable monitoring component featuring dynamic grid geometry handling. Automatically hides unused quadrants and layout axis lines when strings are null, keeping high-performance light themes perfectly clear of empty artifact paths.	Digital Output: Monitor state up-to 4 sensors.
Selector	Selector: Select an item from list of items via touch.	Analog Control: Changing dynamic setpoint parameters or choosing target device profiles on the fly.
SevenSegment	7-Segment Display: 40px zero-padded local font that is completely visually centered to display 1-4 digits.	Analog Readout: Authentic dashboard instrumentation readouts like active Transmission Gear or Digital Odometers.
SignalStrength	Signal Strength: Robust infrastructure diagnostics tile displaying an ascending 4-bar vector staircase. Features built-in string parsing that auto-detects and processes raw whole percentages ("50%"), decimal ratios (".50"), or negative RSSI dBm telemetry ("-65").	Network Node Health: Live link tracking for localized Wi-Fi access points, remote cellular modems, or low-power ESP32/Pico mesh field nodes.
Slider	Technical Slider: Symmetrical control groove rail with flawless cursor mapping.	Analog Control: Continuous range modulation, such as adjusting LED Dimmer Levels or Motor Throttle bounds.
Spinner	Spinner: High-precision directional increment control featuring clear high-contrast tactile action touch targets for exact setpoint calibration.	Analog Control: Fine-tuning targeted temperature settings or adjusting calibration offset parameters step-by-step.
Switch	Rocker Switch: Crisp, tactile 3D effect with clear status symbols.	Discrete Input: Main system Power Toggles, isolated battery disconnects, or Cruise Control activation.
TiltGauge	TiltGauge: A specialized quadrant-type gauge designed specifically for angular positions, tilt monitoring, incline tracking, or physical gate/valve status visualization (sweeping a tight 90° arc from vertical to horizontal).	Process Lifecycles: Angular opening sequences for flap or sluice gates, heavy equipment boom-angle lifting phases, physical safety barrier deployment stages, or liquid flow diverting valve states.
Timer	Timer: Production-cycle tracking interface rendering a sharp monospace duration string. Features an active vector progress ring that automatically scales and alters color profiles based on fractional runtime datasets ("CurrentSeconds;TotalSeconds").	Process Lifecycles: Countdown metrics for valve flushing operations, automated irrigation windows, thermal dwell intervals, or hardware watchdog tracking loops.
TrendChart	TrendChart: Precise, low-overhead graph tile displaying live trend profiles. Features trend data as sparkline, automatic Min/Max scale labeling and an integrated X/Y reference grid layout designed for compact historical overview.	Historical Tracking: Real-time trending datasets (e.g., "10;20;30;25;20;0") for observing thermal gradients, pressure stability profiles, or voltage load patterns over time.
VerticalMeter	Vertical Meter: Simplified scale column with an aligned reference tracking arrow.	Analog Readout: Linear volumetric calculations like Fuel Tank Capacity, Water Levels, or Battery Charge (SoC).
WatchdogTile	WatchdogTile: A rugged, instrumentation-bezel telemetry health monitor displaying real-time node latency diagnostics and connection safety timeouts.	Process Lifecycles: MQTT broker heartbeat checks, remote field-transmitter polling loops, server network latency tracking, or hardware watchdog trip states.

---

Screenshots

---

Installation

1. Download the attached release HMITilesIO.b4xlib.
2. Copy the file into the B4J Additional Libraries and/or B4A Additional Libraries folder.
3. Open a project in the IDE and check the box next to HMITilesIO in the Libraries Manager tab.

---

Examples Included

• Basic Layout: Easy-to-follow example demonstrating rendering configuration loops for every component type.

---

Quick Start
HMITilesIO is a standard B4X CustomView and can be added directly via the Visual Designer.

1. Configure the Visual Designer

• Open the Visual Designer tool.
• Add a CustomView to your layout pane canvas.
• Set the Selected Type to: HMITilesIO
• Name the view object variable: TileIOSwitch
• Change the custom property drop-down Component Type to: Switch
• Set base dimensions to a fixed bounding square layout: 120 x 120 px

2. Implement the Control Logic

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private TileIOSwitch As HMITilesIO
End Sub

Public Sub Initialize
    B4XPages.GetManager.LogEvents = True
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("mainpage")
    ' Establish default visual startup state parameters smoothly
    Sleep(100)
    TileIOSwitch.State = False
End Sub

' Fires instantly when an operator touches the component area
Private Sub TileIOSwitch_Click(State As Boolean, Value As String)
    Log($"[TileIOSwitch_Click] State changed to: ${State}, Value: ${Value}"$)
End Sub

---

Versioning

This project does not follow strict semantic versioning. Updates are published iteratively when performance enhancements or feature additions become available.

---

Acknowledgments

• Anywhere Software for building the excellent cross-platform B4X development suite.
• The B4X Community Forum for sharing the invaluable feedback, solutions, and ideas that made this library possible.
• AI Collaboration: Built with the collaborative assistance of an AI coding partner, helping to optimize cross-platform event math, refine embedded SVG assets, and resolve mobile WebView rendering performance bottlenecks.

---

Disclaimer & Project Scope

This library was created primarily to explore vector-based HMI layouts for personal use, education, and open sharing within the developer community.
This is a hobby project and is provided entirely as-is.

Intended Use
This library is not intended for deployment in production-critical or high-risk safety industrial systems.

Support Policy

Issue tracking and bug submissions are not actively monitored or guaranteed.
You are highly encouraged to fork, modify, and optimize the code to fit your custom field hardware parameters.

Warranty & Liability

This software is provided "as is", without warranty of any kind, express or implied. Use it at your own risk. For full legal terms, see the accompanying LICENSE file.

License

HMITilesIO – MIT License © 2026 Robert W. B. Linn
See the LICENSE file in the root repository folder for detailed terms.

---

 

[rwblinn]

Update v0.50 Built 2026-08-23 (see Post #1)

• NEW: ByteStatus Tile - An 8-bit digital register status word display mapping a raw byte (0-255) into a high-visibility 2x4 diagnostic grid matrix with real-time hexadecimal footer logging. Array-Based Configuration: Introduced a human-readable byte-array masking scheme (`PinsAttached`) to easily enable, disable, or gray out individual bit status slots.
• NEW: ReadOut Tile - Crisp telemetry display that cleanly outputs dynamic process numbers or operational status string values (e.g., "23.5 °C", "1013 hPa", "RUNNING").
• NEW: Spinner Tile - High-precision directional increment control featuring clear high-contrast tactile action touch targets for exact setpoint calibration.
• NEW: Cross-Platform Input Layer - Added a unified transparent panel system to handle touch and mouse events seamlessly and consistently between B4A and B4J.
• NEW: Vector Properties - Introduced `ValueFont` (text sizing) and `ValueFill` (vector hex coloring) APIs to dynamically manipulate SVG text elements safely post-render.
• UPD: Data Optimization - Altered core property `Value` from a Float type to a `String` to natively support text messages inside the new ReadOut tile.

 

[rwblinn]

Update v0.60 Built 2026-08-31 (see Post #1)

• NEW: All tile type code modules changed to classes to enable multiple tiles of the same type with own property settings (breaking change).
• NEW: All tile type classes reworked and enhanced with touch handling, state management and other methods.
• NEW: HMITilesIOUtils - Helper code module with methods used by all tile classes.
• NEW: Button Tile - Multi-layered bezel with high-contrast borders and an offset shadow to give it strong physical depth.
• NEW: IOPanel Tile - Up-to 8 rectangles to set multiple states ON / OFF.
• NEW: MultiState Tile - Up-to 8 rectangles to set a single state ON / OFF.
• NEW: Selector Tile - Select an item from list of items via touch.
• UPD: Basic example.

Note
Currently developing a B4R library rCANBus using the Arduino UNO R4.
Created a just-for-fun test application to simulate a CAR: B4R sends serialized to a B4J Dashboard with HMITilesIO.

1. Edge Engine (B4R): Runs a 5Hz master clock simulation loop managing acceleration, braking, gear shifting, fuel consumption, and thermal curves.
2. Network Layer: Pushes raw data onto a local CAN network interface via CAR_MCU_CAN_ID (0x100) and intercepts loopback packets.
3. Pipeline Layer: Uses B4RSerializator to pack primitive instrumentation fields into an aligned byte stream passed over an asynchronous serial connection (AsyncStreamsPrefix).
4. Presentation Layer (B4J): Unpacks data instantly, applies auto-scaling range boundaries, checks safety interlocks, and drives high-performance SVG UI elements.

 

[rwblinn]

Update v0.70 Built 2026-09-06 (see Post #1)

• NEW: HMITilesIO - Tile Header/Footer set font size and color.
• NEW: Battery Indicator Tile - A high-visibility, 4-segment vertical charge monitor featuring active threshold-based color changing states (Green, Amber, Red) mapped dynamically from 0-100% microcontroller parameters.
• NEW: DualReadOut Tile - High-density split grid display designed for multi-sensor clusters (e.g., DHT22/BME280) that natively isolates separate telemetry fields, units, and structural baselines without layout overlap.
• NEW: IconIndicator Tile - Clean status tracking display featuring standalone 48x48px embedded vector shapes (OK, Warn, Error, Info) that maximize visual dominance and empty space usage without external image dependencies.
• NEW: Signal Tile - An ascending 4-bar staircase network monitor featuring intelligent format auto-detection (accepts whole percentages, decimal fractions, and negative RSSI dBm values) with active multi-state threshold coloring.
• NEW: Timer Tile - A high-visibility clock and execution tracker featuring a centered monospace layout and a dynamic circular progress ring with integrated multi-state warning colors.
• NEW: TrendChart Tile - High-utility engineering telemetry layout complete with native X/Y grid axes, dynamic auto-scaling boundary labels, and clean vector path tracking for historical process overview.
• UPD: All tiles - Header/footer same SVG font and position; Execute JavaScript method moved from main class to each tile class; Minor updates.

 

[rwblinn]

Update v0.71 Built 2026-09-15 (see Post #1)

• FIX: HMITilesIO - Initialize instances ensure method SetTile called consistently.
• FIX: HMITilesIO - Improved timing in method UpdateTile to ensure JavaScript run complete.
• FIX: TrendChart Tile - Handle empty value > show white tile.
• FIX: Signal Tile - Handle value missing > set default 0.

 

[rwblinn]

Update v0.80 Built 2026-09-25 (see Post #1)

• FIX: HMITilesIO class - Resolved an issue in `ExecuteJS` by adding a DOM readiness check to ensure SVG icons are fully rendered before execution.
• NEW: Compass Tile - A simplified 360° directional tracking tool mapping singular degree vector variables straight to a sleek orientation wedge arrow layout.
• NEW: TiltGauge Tile - A specialized quadrant-type gauge designed for 90° process status tracking.
• NEW: Timer Tile - Click event which can be used to start or reset the timer.
• NEW: Watchdog Tile - An instrumentation-bezel telemetry health monitor displaying real-time node latency diagnostics and connection safety timeouts.
• NEW: Tested on a Raspberry Pi 5 with OS Trixie via the B4J-Bridge with openJDK 21.0.6.
• UPD: Basic example.

 

[rwblinn]

Update v1.00 Built 2026-10-18 (see Post #1)

• NEW: Alarm Tile - An annunciation component utilizing subtle outer border-stroke color signaling to isolate critical process alerts while preserving dashboard grid visual aesthetics.
• NEW: Horizon Tile - An avionics-grade flight attitude indicator translating combined pitch and roll vector metrics seamlessly onto a high-visibility, responsive gauge matrix layout.
• NEW: LoadingIndicator - An progress layout component utilizing sub-pixel balanced vector geometries and strict layout symmetry to track active processes without adding visual distraction to the HMI grid matrix.
• NEW: QuadReadout - An ultra-high-density 2x2 variable monitoring component featuring dynamic grid geometry handling. Automatically hides unused quadrants and layout axis lines when strings are null, keeping high-performance light themes perfectly clear of empty artifact paths.
• NEW: Spinner - Set stepsize. Minimum is 1.
• UPD: Various minor fixes and changes.

 

[rwblinn]

NEW: Example HomeEnergy
Created a simple, dark-theme example called HomeEnergy to showcase the HMITilesIO library.
It displays real-time utilities (Solar, House load, Grid, Battery, Gas, and Water) using data from Home Assistant.

---

EDIT 20261020
- FIX: B4A log entry screen dimensions
- FIX: Button fetch data state depending app state foreground, background, resume.
- NEW: Global constants for the Dark theme colors; Color conversion helpers
- NEW: Global constants for Units

---

Key Highlights:

• B4XPages Power Saving: Uses page lifecycle events to pause data updates when backgrounded, ensuring zero battery drain.
• Ultra-Light Network Traffic: Polls the Home Assistant template API to pull a single, pre-formatted CSV string. This eliminates complex device-side parsing.
• WYSIWYG Layout Alignment: All 120x120px tiles are custom-drawn and positioned directly to fit the phone's grid layout symmetrically.
• Live Control Toggle: Features an interactive "Live Stream" tile with a dynamic red/green LED indicator to turn the live data feed on and off.

B4A Screenshot
(in the evening with no Solar Power produced)

 

[GMan]

This line throws an error:

Log($"Width: ${GetDeviceLayoutValues.Width} px, Height: ${GetDeviceLayoutValues.Height} px, Scale: ${GetDeviceLayoutValues.Scale}"$)

Fehlerbeschreibung: Undeklarierte Variable wird verwendet, bevor ihr ein Wert zugewiesen wurde.
Fehler in Zeile: 65 (B4XMainPage)
Log($"Width: ${GetDeviceLayoutValues.Width} px, Height: ${GetDeviceLayoutValues.Height} px, Scale: ${GetDeviceLayoutValues.Scale}"$)

After comenting out, it works (fine)

 

[rwblinn]

Thanks for reporting and trying out.

Error
"Fehlerbeschreibung: Undeklarierte Variable wird verwendet, bevor ihr ein Wert zugewiesen wurde."
That is a B4A specific debug line, which gives error with B4J.

Why that line?
Exploring an example to auto arrange tiles in the layout loaded.

Updated the post #8 attachment.

 

[GMan]

This works now.
In fact i have no server to connect to the following line appears in the log

[FetchData][E] java.net.UnknownHostException: Der angegebene Host ist unbekannt (nnn.nnn.nnn.nnn)

What is that for a kind of Home Auomation server ?

 

[rwblinn]

What is that for a kind of Home Automation server ?

Hi,

using Home Assistant since many years.
Integrated are many devices from different systems, i.e., HomeMatic, Hue, Somfy, Ring, RFXTrx, several ESP32 based solutions (developed with B4R), SMA Solar, external data gathering via REST-API, Node-RED etc.

>>> If you want more info, happy to discuss via PM instead using this thread which is for this library.