Dashboard Nodes

the flows dashboard palette includes nodes, which when dragged onto a canvas, become widgets in a dashboard these nodes enable you to build a dashboard with common elements, such as buttons, drop down lists, and charts when you combine these nodes with data collection flows, you can monitor sensor data in a single view add dashboard nodes to the canvas you can add dashboard nodes to the canvas in an existing flow the process of adding dashboard nodes will be demonstrated by way of an example example add dashboard nodes to the canvas for this example, a button, text, gauge, and chart are added to the first group a dropdown is added to the second group note when you add dashboard nodes to another existing flow, the nodes are added to the layout under the first group you can select which group the node belongs to from the edit \<groupname> node dialog box caution adding the same node to another flow in the same flow view adopts the same configuration to add dashboard nodes to the canvas from the navigation panel, select flows manager click the expand icon next to a selected flow the flow opens in a new tab click the menu icon, select view > dashboard , and then drag the sidebar up from the bottom of the canvas from an existing flow tab in the flow view, drag the following nodes to the canvas button text gauge chart dropdown the nodes appear on the canvas double click one of the added dashboard nodes enter a name for the node in the name field, and then click done repeat steps 5 6 as needed, entering names for all the dashboard nodes on the canvas double click the dropdown node select the second group from the group drop down list, and then click done if necessary, choose the add new dashboard group option and create a second dashboard group and then add the dropdown node to this newly created group click deploy configure a dashboard node you can configure a node you have added to the canvas each node allows for the configuration of various options when you add a dashboard node to the canvas, you must double click it to configure its settings most of the dashboard nodes must be assigned to a dashboard group caution adding the same node to another flow in the same flow view adopts the same configuration example dashboard node configuration for this example, a dashboard switch node is configured to configure a switch node from the navigation panel, select flows manager click the expand icon next to a selected flow click the menu icon, select view > dashboard , and then drag the sidebar up from the bottom of the canvas from an existing flow tab in the flow view, drag a switch node from the dashboard category to the canvas double click the switch node the edit switch node dialog box appears configure all fields as desired click done on the top right corner of the edit switch node dialog box click deploy customize message text colors you can customize the message text colors there may be times when you want to assign colors to displayed messages, particularly when monitoring device status the following example illustrates how to configure a flow and dashboard to change the message color based on the device status ready, rebooting, warning, or error for your convenience, the following code can be copied and imported into flows so that you can explore the configuration \[{"id" "7b889445 29cbfc","type" "ui text","z" "21b9c2dc 7bf46e","group" "f7e07b80 a8b2c8","order" 0,"width" "0","height" "0","name" "","label" "","format" "\<font color= {{msg color}} > {{msg payload}} \</font>", "layout" "col center","x" 640,"y" 220,"wires" \[]}, {"id" "4b8181b0 ec8ab","type" "inject","z" "21b9c2dc 7bf46e","name" "","topic" "","payload" "ready","payloadtype" "str","repeat" "","crontab" "","once"\ false,"x" 340,"y" 140,"wires" \[\["435cd506 e398bc"]]},{"id" "435cd506 e398bc","type" "function","z" "21b9c2dc 7bf46e","name" "color assignments","func" "switch (msg payload) {\n\ncase \\"ready\\" \n msg color = \\"lime\\";\n break;\n \ncase \\"warning\\" \n msg color = \\"orange\\";\n break;\n \ncase \\"rebooting \\" \n msg color = \\"blue\\";\n break;\n \ndefault \n msg color = \\"red\\";\n break;\n}\n\nreturn msg;","outputs" 1,"noerr" 0,"x" 465,"y" 220,"wires" \[\["7b889445 29cbfc"]]}, {"id" "f3fc7605 077428","type" "inject","z" "21b9c2dc 7bf46e", "name" "","topic" "","payload" "warning","payloadtype" "str","repeat" "","crontab" "","once"\ false,"x" 220,"y" 280,"wires" \[\["435cd506 e398bc"]]},{"id" "37d6f0de eb7e9","type" "inject","z" "21b9c2dc 7bf46e","name" "","topic" "","payload" "rebooting ", "payloadtype" "str","repeat" "","crontab" "","once"\ false,"x" 220, "y" 180,"wires" \[\["435cd506 e398bc"]]},{"id" "29b7a81c d345c8", "type" "inject","z" "21b9c2dc 7bf46e","name" "","topic" "","payload" "error","payloadtype" "str","repeat" "","crontab" "","once" \ false,"x" 340,"y" 340,"wires" \[\["435cd506 e398bc"]]}, {"id" "f7e07b80 a8b2c8","type" "ui group","z" "","name" "show colored status","tab" "55213901 3e2a88","disp" \ false,"width" "6","collapse"\ false},{"id" "55213901 3e2a88","type" "ui tab","z" "","name" "alert colors","icon" "dashboard"}] to import the example flow from the navigation panel, select flows manager click the expand icon next to a selected flow copy the code sample above click the menu icon and select import paste the code sample in the clipboard box select new flow from the import to section, and then click import you can configure the inject, function and text nodes as follows node steps to configure the nodes and dashboard inject this node can be found in the input list this node is used primarily to demonstrate this functionality in a production environment, device messages would need to be parsed to extract status values drag an inject node onto the canvas for every status message to be displayed set the payload to text and enter the status, such as warning click function this node can be found in the function list use this example function node to assign a color to each status message drag a function node onto the canvas and wire it to the inject node enter code for the function for this status message use case, the following code was used switch (msg payload) { case "ready" msg color = "lime"; break; case "warning" msg color = "orange"; break; case "rebooting " msg color = "blue"; break; default msg color = "red"; break; } return msg; text this ui text node can be found in the dashboard list note that there are two text nodes in the dashboard list this is not the text input field v value format, enter drag the ui text node onto the canvas and wire it to the function node in the value format field, enter \<font color= {{msg color}} > {{msg payload}} \</font> an example of how these nodes appear in the flows canvas is shown below the resulting node can be viewed in the dashboard tab remove a dashboard node you can remove a dashboard node from the dashboard layout tab by removing it from the flow canvas to remove a dashboard node from the navigation panel, select flows manager click the expand icon next to a selected flow click the menu icon, select view > dashboard , and then drag the sidebar up from the bottom of the canvas select the flow containing the dashboard node to be removed select the dashboard node on the flow and press the delete key alternatively, you can hover over dashboard node in the layout, click edit , and then click delete the selected node is removed on both the canvas and the layout click deploy