6.4 Frontend Nodes
      Back to home
      1. Home
      2. 6: Nodes Reference Guide
      3. 6.4 Frontend Nodes

      Tank Level Widget Node Configuration Guide

      The Tank Level Widget Node is used to visually represent a scalar value (e.g., volume, percentage, or fill level) as a vertical fill bar. It is commonly used in industrial or environmental monitoring contexts to track tank capacities, fluid levels.

       

      What It Does

      This widget reads a numeric field from the incoming payload and renders a vertical tank-style visual based on its value, relative to a defined maximum. You can customize thresholds (color-coded ranges), units, and display format. Grouping options enable per-device visualization.

      Step-by-Step: How to Configure the Tank Level Widget Node

      1. Add the node

        • Drag the Tank Level Widget from the Widgets section onto the canvas.

      2. Connect a data source

        • Link a node that outputs the value to be displayed (e.g., flow rate, fluid level).

      3. Open the configuration panel


         

        • Double-click the node to access and configure display and behavior settings.

      4. Set the JSON key, max value, and ranges

        • Define the key from the incoming payload, set a maximum limit, and define optional colored ranges.

      5. Attach to an interface

        • Assign the widget to one or more interfaces for live visualization.

       Configuration Fields

      Field Requirement Description
      Widget Name* Required Label for the widget in the interface.
      Widget Subtitle Optional Additional text displayed below the main widget name.
      Show UID / Label Name Optional Choose whether to display the UID or label name in the widget.
      Calculation Optional Method for interpreting the data (e.g., Last value received).
      Unit Symbol Optional Add a symbol such as %, L, or m³ to clarify the value.
      Decimal Places Optional Set the number of decimal places to show.
      Thousands Comma Separator Optional Toggle to include commas in large numbers (e.g., 1,000).
      JSON Key to Display* Required Field in the incoming JSON payload used as the tank value.
      Maximum Value* Required Defines the 100% fill level of the tank.
      Color Optional Default tank fill color.
      Ranges Optional Configure one or more thresholds for color-based fill behavior.
       

       Range Configuration (Optional)

      Define visual thresholds to represent status levels (e.g., low, warning, full).

      Field Requirement Description
      Min* Required Minimum value for this range.
      Max* Required Maximum value for this range.
      Hex Color Required Color for the fill when within this range.
       

       Interface Assignment

      Field Requirement Description
      Add to Interface* Required Select one or more interfaces to display the widget on.
      Tooltip Optional Add custom help text shown on hover.
      Number of Widgets to Display Optional Choose whether to group by device label.
      Select Label Optional If grouping, choose which label to use (e.g., Tank ID, Zone).
       

       Example: Track Water Storage Tank Fill Level

      Configuration

      Field Value
      Widget Name Water Tank Fill Level
      JSON Key to Display water_level_percent
      Maximum Value 100
      Unit Symbol %
      Range 1 0–30, Color: Red
      Range 2 30–70, Color: Yellow
      Range 3 70–100, Color: Blue
      Interfaces interface2, energy dashboard
      Number of Widgets One per label (e.g., Tank ID)
       

      Result

      Each widget displays the current fill level of a tank as a vertical bar. Color changes dynamically depending on the defined thresholds. Each tank (by label) appears as a separate widget in the selected interface.

       Best Practices

      • Use meaningful widget names (e.g., Tank 01 – Chemical A) for clarity.

      • Keep the max value consistent with engineering units (e.g., %, liters).

      • Use color-coded ranges to indicate safe, warning, or critical thresholds.

      • Avoid sending negative values or values over the max — the widget only displays between 0 and the max.

       Use Cases

      • Show live fluid levels in water tanks, fuel cells, or chemical reservoirs

      • Monitor battery state-of-charge in energy systems

      • Track waste bin fill levels in smart city applications

      • Visualize temperature range status using scalar color thresholds

       FAQ

      Q: Can I use real-world units (e.g., L, kWh)?

      A: Yes. Use the Unit Symbol field to append units to the display value.

      Q: What if my payload exceeds the maximum value?

      A: The widget will cap the display at 100% of the configured maximum.

      Q: Can I apply logic to calculate the value?

      A: Pre-calculate it upstream in the workflow or use a Function/Advanced node.