A classic style multi-needle gauge for the flowfuse Node-RED Dashboard 2.0
The usual method of installing is to use Manage Palette in the node red editor and search for @colinl/node-red-dashboard-2-ui-gauge-classic and install it.
Using npm
directly, cd
into your node red user directory (usually .node-red in your home folder) and from there run
npm install @colinl/node-red-dashboard-2-ui-gauge-classic
For a gauge configured to have a single needle, pass in the value in msg.payload
. This may be a Number or a string that represents a number.
For a gauge with multiple needles, each will be configured with an associated topic value. To pass in a value set msg.topic
to select the needle, and put the value in msg.payload.
By default, the value of the first needle is automatically displayed as text in the Gauge. However, if a string is provided in msg.formattedValue
then this will be shown instead. This allows the user to format the value as desired.
Certain configuration values can be overridden dynamically be passing in an object in msg.ui_update
. See Dynamic Properties below. If both msg.ui_update
and msg.payload
are present then the message will both override the properties and provide a needle value. To avoid this make sure that there is no msg.payload
property in the message. Once a property has been overridden it will stay at the new value unless a new value is provided via msg.ui_update.
#AEEA00
. The set of named colours can be found here.msg.payload
passed in will be used. If more than one needle is configured then a topic string must be provided for each one. The topic is used in the input messages to define which needle to address, as described earlier.Certain properties can be overridden by passing an object in msg.ui_update
. The name of the item in msg.ui_update
is generally the name of the propety being overridden. For example, the Sectors definitions may be changed by passing in array in msg.ui_update.sectors
. If msg.payload
is also present then the payload will be interpreted as a needle value, as normal. Once a property has been overridden it will stay at the new value unless a new value is provided via msg.ui_update.
Details of the dynamic properties available are as follows:
msg.ui_update.sectors
is present contains an array then that will be used to override the current sector data. The array must contain properties containing the sector start value and the colour. It must be in order of increasing start value. For example, the array might consist of
[{ "start": 0, "color": "green"}, { "start": 5, "color": "skyblue"}]
msg.ui_update.measurement
is present and contains a string then that string will be displayed in the measurement field in the gauge.msg.ui_update.units
is present and contains a string then that string will be displayed in the units field in the gauge.Display elements my be overriden in the normal way using a ui-template node. In particular:
Needle Rotation transition time - The default transition for needle rotation is 0.5 seconds, which gives a realistic impression of needle movement. If, however, the gauge is being updated rapidly, for example at 10 times a second, then it is desirable to reduce this. This can be achieved by setting a class on the gauge, such as myclass
then in a ui-template node in CSS mode specify something like
.myclass .cl-gauge .o-needle{
transition: 0.1s;
}
Which will cause the needles to transition in 0.1 seconds allowing them to track the input accurately.
Needle Hub Colour - The hub colour can be changed by specifying, for example
.myclass .cl-gauge .hub{
fill:red;
}
Or leave off the .myclass
to affect all gauges.
Below are images from the included example flows, which can be downloaded by going to Import, selecting Examples, then this node.
Thanks go to @HotNipi who provided the original code on which this node is based.