{"id":17308,"library":"node-red-contrib-ui-level","title":"Node-RED UI Level Indicator","description":"node-red-contrib-ui-level is a custom Node-RED node designed to provide a linear level indicator widget for the Node-RED Dashboard. It enables users to visually represent numerical data as a customizable bar graph. The current stable version provided is 0.1.46. This node is part of the Node-RED ecosystem, typically seeing updates driven by Node-RED and Node-RED Dashboard releases, and new feature additions. Key differentiators include its support for three layouts (Single Horizontal, Pair Horizontal, Single Vertical), extensive color customization options (multiple segments, single color, interpolated), an optional 'Peak mode' with adjustable hold times, and dynamic configuration of properties like min/max values, segments, and labels via `msg.control` inputs. It also offers multiple stripe resolutions and animation options, providing flexibility for various dashboard designs.","status":"active","version":"0.1.46","language":"javascript","source_language":"en","source_url":"https://github.com/hotNipi/node-red-contrib-ui-level","tags":["javascript","node-red","level","ui-level","dashboard","linear gauge","indicator"],"install":[{"cmd":"npm install node-red-contrib-ui-level","lang":"bash","label":"npm"},{"cmd":"yarn add node-red-contrib-ui-level","lang":"bash","label":"yarn"},{"cmd":"pnpm add node-red-contrib-ui-level","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required host environment for running custom nodes.","package":"node-red","optional":false},{"reason":"Provides the UI framework for the dashboard widget.","package":"node-red-dashboard","optional":false}],"imports":[{"note":"This package provides a custom Node-RED node for the UI Dashboard. It is consumed by the Node-RED runtime and made available in the editor palette, rather than being directly imported into JavaScript code.","wrong":"import { UILevel } from 'node-red-contrib-ui-level'","symbol":"UI Level Node","correct":"Install 'node-red-contrib-ui-level' via Node-RED's 'Manage palette' feature (Menu -> Manage palette -> Install tab). Alternatively, run 'npm install node-red-contrib-ui-level' in your Node-RED user directory (~/.node-red)."}],"quickstart":{"code":"// Conceptual JavaScript to simulate messages for the UI Level node\n// In Node-RED, you would use an Inject node connected to a UI Level node.\n\nfunction simulateFlow() {\n  // Scenario 1: Basic value update\n  let msg1 = { payload: 42 };\n  console.log('Sending basic value:', msg1.payload);\n  // In Node-RED, this 'msg1' would go to the 'ui-level' node's input.\n\n  // Scenario 2: Change min/max and segment values dynamically\n  let msg2 = {\n    payload: 75,\n    control: { min: 0, max: 100, seg1: 25, seg2: 50, seg3: 75 }\n  };\n  console.log('Sending value with dynamic control:', msg2.payload, msg2.control);\n  // This 'msg2' updates the level, its range, and segment thresholds.\n\n  // Scenario 3: Update label dynamically\n  let msg3 = {\n    payload: 12.3,\n    control: { label: 'Pressure (PSI)' }\n  };\n  console.log('Sending value with dynamic label:', msg3.payload, msg3.control.label);\n\n  // Scenario 4: Reset peak mode (if enabled)\n  let msg4 = {\n    payload: 90,\n    control: { peakreset: true }\n  };\n  console.log('Sending value and resetting peak:', msg4.payload);\n}\n\nsimulateFlow();","lang":"javascript","description":"This conceptual code demonstrates how `msg.payload` and `msg.control` properties are structured and sent to a Node-RED UI Level node to update its display, dynamically adjust parameters, and control features like peak mode."},"warnings":[{"fix":"Disable 'Animation of value text' in the node's configuration if performance issues are observed.","message":"Enabling text animation for the value display can significantly impact dashboard performance, especially on less powerful devices or with many widgets.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Configure individual channel labels within the node properties for 'Pair Horizontal' layout or use `msg.control = { label: 'New Label for channel X' }` for dynamic updates.","message":"When using the 'Pair Horizontal' layout, the main 'Label' field of the node is not displayed. Instead, labels for each channel must be configured independently within the node or dynamically via `msg.control`.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Increase the widget's size in the Node-RED Dashboard layout, or adjust text size options within the `ui-level` node configuration.","message":"The widget layout is optimized for Node-RED Dashboard's default `1x1` unit size (48px x 48px). While smaller sizes like 24px x 24px are supported, they may not display intermediate tick values along with the main value field due to space constraints.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `msg.control` is an object containing valid keys like `min`, `max`, `seg1`, `seg2`, `seg3`, `label`, or `peakreset`, as specified in the documentation.","message":"Dynamic updates to the widget's properties (min, max, segments, label, peakreset) require sending an object to the `msg.control` property of the incoming message. Incorrect property names or a malformed `msg.control` object will be ignored.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Install the package via 'Manage palette' in the Node-RED editor or run `npm install node-red-contrib-ui-level` in your Node-RED user directory and restart Node-RED.","cause":"The node-red-contrib-ui-level package is not installed or Node-RED has not been restarted after installation.","error":"Error: \"ui-level\" not found in palette."},{"fix":"Ensure `msg.payload` contains a number or a string representing a number (e.g., `msg.payload = 15` or `msg.payload = \"15\"`). Check the node's configuration for correct `min` and `max` settings.","cause":"The incoming `msg.payload` is not a valid numeric value or cannot be coerced into one, or `min`/`max` values are misconfigured.","error":"The level indicator does not update or shows incorrect values."},{"fix":"Increase the widget's size in the Node-RED Dashboard layout, or adjust text size options within the `ui-level` node configuration.","cause":"The widget's configured size (e.g., 1x1) is too small for the selected display options (e.g., showing tick values and the main value simultaneously), or font sizes are too large.","error":"Dashboard widget appears distorted or text is cut off."}],"ecosystem":"npm","meta_description":null}