1
Table of contents Introduction... 4 IoT Gateway controllers... 4 The History of Node-RED... 5 Node-RED and the IoT... 5 Geting started... 6 Start Node-Red... 6 Login with local user acoont... 6 Working from remote PC... 6 Node-Red user interface... 7 Connect nodes together... 8 Key Concepts... 8 Flows... 8 Messages... 8 Standard Nodes... 9 Function Nodes... 9 Writing Function Nodes... 9 Creating and returning a new message in a function node... 10 Creating and returning multiple messages... 10 Array messages... 11 Object message... 12 Object message with arrays... 12 Convert XML and JSON to Javascript objects... 13 Extract property values from objects... 14 Node-Red Dashboard nodes Versjon 2.7.0... 15 Create Tabs... 16 Dashboard input nodes... 18 Button... 18 Dropdown (list of choice)... 19 Switch... 20 Slider... 21 Numeric field... 21 Text field... 22 2
Text... 22 email... 22 Password... 22 Telephone entery... 22 Color picker... 22 Time picker... 22 Week picker... 22 Month picker... 22 Form... 23 Dashboard output nodes... 24 Text... 24 Gauge... 24 Notification node... 25 Chart node... 25 Bonus: create an event log... 26 References... 28 3
Introduction Node-RED is a powerful tool for building internet of things (IoT) applications focusing on simplifying "wiring together" of code blocks to perform tasks. Node-Red uses a visual programming approach that allows developers to connect predefined code blocks known as "nodes" together to perform a task. The connected nodes, usually a combination of input nodes, handle nodes and output nodes, when connected, constitute a "flow". IoT Gateway controllers Our IIoT Gateway controllers are configured with Node-Red, in addition to that, they are slightly different in relation to which model. The most powerful comes with a fully configured and tested MySQL database that is ready for use. Sensor to web Do you have sensor data and want to show it on the internet, then it can be done in a short period of time. Finished web interface nodes provide you with simple text, graphical view or chart. Configured in minutes and ready for use. Sharing data You can easily share data between our IoT Gateway controllers, Web servers or other online services such as thingsboard.io, freeboard.io, Microsoft Azure, or just save directly to a DropBox account that you share. Remember if data is shared on open-ended online solutions, these are visible to everyone, so do not share sensitive information! Large protocol support Our IoT Gateway controllers complete Modbus-TCP, Modbus-RTU, MQTT, REST, OPCUA support, and support for multiple protocols. 4
The History of Node-RED As the examples in the previous section have shown, Node-RED is a powerful tool for building IoT applications and services. Its genesis was triggered exactly by this need to rapidly prototype IoT applications and Node-RED was created as an open source project by the IBM Emerging Technologies group, in particular by two researchers, Nick O Leary and Dave Conway-Jones. They created Node-RED initially as a tool for themselves as they were working on IoT projects and were looking for a way to simplify the process of hooking together systems and sensors when building proof-of-concept technologies for customers. An initial version of Node-RED was released as an open source project in late 2013 and built up a small but active user and developer group during 2014. At the time of writing, Node-RED is still an emerging technology, but has already seen significant adoption by makers, experimentalists and a number of large and small companies experimenting with using it for their needs. Today there is a vibrant user and developer community, with a core group working on the Node-RED code itself and most developers contributing nodes or flows to the flow library. You can check out the mailing list and github repositories using the links provided in Appendix A or just google them. Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to processing and processing to devices. As a tool for rapid application development for the IoT, Node-RED is both powerful and flexible. Its power comes from a combination of two factors: Node-RED is an example of a flow-based programming model messages representing events flow between nodes, triggering processing that results in output. The flow-based programming model maps well to typical IoT applications which are characterised by real-world events that trigger some sort of processing which in turn results in real-world actions. Node-RED packages these events as messages which offer a simple and uniform model for events as they flow between nodes that make up the flows. The set of built-in nodes is the second part of the Node-RED story. By building a set of powerful input and output nodes, each of which hides much of the complexity of interacting with the real world, Node-RED offers developers powerful building blocks to allow them to quickly put together flows that accomplish a lot, without having to worry about the programming details. These two factors make Node-RED a powerful tool for IoT application development. When combined with the flexibility to create and use nodes such as the function node, which allows the developer to quickly write arbitrary JavaScript, plus the Node-RED community, who are constantly creating and sharing new nodes, Node-RED is likely to be one of the main tools in the IoT developers toolbox. 5
Geting started Start Node-Red Login with local user acoont Default password and username and password is unoroot:4520 Start Node-Red user interface with double clicking on the Node-Red icon on the desktop Login to Node-Red Default password and username and password is root:00000000 Working from remote PC Connection from Remote PC, From your web-browser go to http: // Gateway-IP: 1880 Default password and username and password is root:00000000 6
Node-Red user interface Below you will see the Node-Red user interface. On the left you have all your nodes. A node is a bulding block with codes that you can use in you flow (Program). You can wire nodes tougeter to make things happend In the middle you have Flows. you can have many flows on the same time and it's a god way to separate code from each other. On the right you have info, debug and settings information. 7
Connect nodes together Start by adding the nodes and a into a new flow. You press the desired node and hold the left-hand mouse button and move it to the Flow. Draw a link between the nodes Deploy you new code with the Deploy button If you select the debug window on the right side and then tap timestamp, you will see the result displayed in the debug window. You have now made your first Node-Red program :D Key Concepts As you ve learned so far, when you program with Node-RED, you create flows that are networks of lightweight components, called nodes, that exchange messages along pre-defined connections or wires. Let s look at these concepts in a bit more detail. Flows Node-RED programs or flows are a collection of nodes wired together to exchange messages. Under the hood, a flow consists of a list of JavaScript objects that describe the nodes and their configurations, as well as the list of downstream nodes they are connected to, the wires. Messages Messages passed between nodes in Node-RED are, by convention, JavaScript Objects called msg, consisting of a set of named properties. These messages often contain a msg.payload property with, you guessed it, the payload of the message. Nodes may attach other properties to a message, which can be used to carry other information onto the next node in the flow. When this happens, these extra properties will be documented in the node documentation that appears in the node info pane when you select a node in the Node-RED workspace. Messages are the primary data structure used in Node-RED and are, in most cases, the only data that a node has to work with when it is activated. This ensures that a Node-RED flow is conceptually clean and stateless each node is self-contained, working with input messages and creating output messages. 8
Standard Nodes Quick review of different standard nodes that come with Nod-Red Function Nodes The function node is the Swiss Army knife of nodes that you can use when there is no existing node dedicated to your task at hand. It s great for doing specialized data processing or formatting for example. As the name implies, a function node exposes a single JavaScript function. Using the function node, you can write your own JavaScript code that runs against the messages passed in and returns zero or more messages to downstream nodes for processing. To write function nodes, you write a JavaScript function using the built-in code editor as shown in the figure on the right. Writing Function Nodes Let s get started writing function nodes. To test these out, you ll create a simple flow with an inject and a debug node as shown in the figure under. Simple flow to test our function nodes. The most simple function node just returns null. When you return null, no message is passed on to downstream nodes and the flow ends here. To create a node that passes the message as is, you can simply return the message itself. This is the default code in a function node. 1. return msg; Deploy and test and you will see the timestamp is outputted in the debug pane thru the function node. Not very interesting, so let s add some content to the payload. In this example, an "world" string. 1 msg.payload += " world"; 2 return msg; A simple string concatenation operator is used to add the string world to the incoming message payload (line 1). This updated payload is then sent, using return, as the output message (line 2) to the next node in the flow. If you add the new code and deploy it, you will see in the debug pane the timestamp for the inject node and the text " world" appended. Obviously, if you now edit the inject node to inject a string instead of the timestamp, and set the injected string to hello,you will see hello world in the debug pane, when you deploy and test. 9
Creating and returning a new message in a function node You can create your own message by defining a new message. If we make a new message variable called "newmsg", and assigning the string new payload to the property payload (line 1) and then returning the new message at line 2. Creating and returning a new message 1 var newmsg = { payload: "new payload" }; 2 return newmsg; When you deploy the flow and hit the inject button, the new message you created is output when it arrives at the debug node. Creating and returning multiple messages The function node also allows you to configure it with multiple outputs. Once you ve configured multiple outputs, you can send multiple messages, one to each output, using an array. First, let s edit the function node to tell Node-RED that the node will have three outputs, using the node configuration window Lets make the code to send a message to one of three different outputs based on a message payload value high, med or low : 1. if (msg.payload == "high") { 2. return [ msg, null, null ]; 3. } else if (msg.payload == "med") { 4. return [ null, msg, null ]; 5. } else { 6. return [null, null, msg]; 7. } Line 1 checks the incoming payload to see if it is set as high. If yes, then it passes on the message on the first output and null messages on the 2nd and 3rd output at line 2 by returning an array with three elements, [msg, null, null]. A med message causes a message to be returned on output 2 (line 4). Anything else returns a message on output 3 (line 6). To try it out, wire it up to three inject nodes and three output nodes as shown in the figure on the right. Set the different inject nodes to inject a text string of either low, med, high. Edit the test function and then deploy. As you select the different inject nodes, you will see the appropriate debug node fire in the debug pane. 10
Array messages An array is a special variable, which can hold more than one value at a time. If you have a list of temprature values, and storing the values in array variable could look like this: Use the same nodes as before. 1. var temp = [23.5, 24, 24.8]; 2. msg.payload = temp; 3. return msg; Arrays use numbers to access its "elements". If we change the 2 line from msg.payload = Temp; to msg.payload = Temp[0]; 1. var temp = [23.5, 24, 24.8]; 2. msg.payload = temp[0]; 3. return msg; We only get the first value of the array out. Temp[0] returns 23.5: We can also count how many elements the array have. 1. var temp = [23.5, 24, 24.8]; 2. msg.payload = temp.length; 3. return msg; 11
Object message If you going to work with Node-Red you wil have to learn to use Objects. Objects are king, and if you understand Objects is't all going to be so much easier. XML, and JSON can easy be converted to Javascript objects and the opposite. In an Object's you have properties, and the properties have a value. Use the same nodes as before. In the code below the "message" is the object. Tagname, Temp, and Door open are the properties. 1. var message = { 2. "tagname": "Freze-124", 3. "temp": 23.5, 4. "door-open": false 5. } 6. msg.payload = message 7. return msg; Object message with arrays A objects can alsow have properties with array values. 1. var message = { 2. "tagname": "Freze-124", 3. "temp": [23.5, 24, 24.8], 4. "door-open": false 5. } 6. msg.payload = message 7. return msg; 12
Convert XML and JSON to Javascript objects The json node, and the xml node is used to convert JSON and XML into javascript objects, and the odder way around. They are used is in the same way so we just is showing the use of the XML node. XML code to use in this exsemple. <?xml version="1.0" encoding="utf-8" standalone="yes"?><root><tagname>freze- 124</tagname><temp>23.5</temp><temp>24</temp><tem p>24.8</temp><door-open>false</door-open></root> Under we are sending an XML string from the inject node that you can see in the debug window from the "XML String" debug node. The XML string is also sent to the XML node and is been converted to a Object as we can see in the debug window from the "Javascript object" node. 13
Extract property values from objects Objects is easy to work with and Node-Red have a nice feature that make its easer to use. Start with the same example as above, just remove the "XML string debug node. The output in the debug window of this you se below. If you hold your mouse over the firs icon on the right of the first value of the temp property and click, you get notification of path copied. Now insert a function node between the xml node and the debug node. past the path we copied above into the Function. "payload.root.temp[0]" The value from this path we insert directly to the msg variable and return it. "msg.payload = msg.payload.root.temp[0]" Deploy and inject the XML string, to see the output in the debug window. Just the first value of the temp property is displayed. 14
Node-Red Dashboard nodes Versjon 2.7.0 Node-RED Dashboard module allows you to very easily add a (very nice) graphic interface to a Node-RED project. The Dashboard module succeeds UI module. With this module you can add displays to view various forms of action: gauges, chart, text, notification, or the free HTML code. You can also add fields to interactions: button, switch, slider (slider), input field (text or digital), list of choice and forms. The Dashboard module offers the following graphics commands (entered): Button (button) List of choices (dropdown) Switch 2 States (switch) Horizontal slider (slider) Digital selector (numeric) Input field for text (text input) date picker (date) colour picker (hex color) Form (form) As well as the following displays (outputs) : Text (text) Gauge (gauge) Graphic (chart) Audio out (TS Voice output) Notification (notification) Change of page (tab) (ui control) Display of HTML (template) 15
Create Tabs It is possible to create groups and pages directly from the control panel of each Node of the dashboard. When the module is discovered, it is much easier and clearer to go through the range of configuration which is added next to the console (debug). If the Panel is not visible (or if you closed it), go to the View menu then and finally dashboard. Choose a title. It will be displayed as the title of the page in the header of the Web browser. You can choose between two themes, dark with a black background (Dark) or clear with a white background, the graphic elements in blue (Light). click + tab to add a page. Open the editing window by pressing edit. Give a name and possibly one icon (see before how to do). Save with Done or Update. Here we give the main screen name and the home icon. Add now 3 groups And open the editing window Give the following names to groups: Input elements Form Dashboard Event log 16
Leaving the size of each widget is set automatically but in some cases you will need to change it by hand with the parameter Width. You can reorder the groups in a Tab, move them one tab to another and reorder the Tab and using the handle. The group is now ready. Now, let s add one control items proposed by the module and find out what they allow and available parameters. You will assign each element to the group Elements of entry, except the form that you will assign to the group form. 17
Dashboard input nodes Button Button settings Group: display group. Size : size of the element. Auto default Icon : displays an icon to the left of the text Label : the button Colour : color of the text (in hexa, for example #8000ff) Payload : output value when you press on the button (true, false) Topic : label Name : name of the Node that is displayed on the Node-RED flow Example of button 18
Dropdown (list of choice) The Dropdown (choice list) element allows the user to return 3 types of data: A string A whole digital value A Boolean The Node can also be transparent and let an incoming message. For this, you must check the box If msg can we input, pass trough to output. The choice list obtained 19
Switch the horizontal switch allows to return a Boolean when it changes state. It is possible to reverse the Boolean value by selecting by inverting the output value depending on the State On and Off. It is also possible to have other types of output (other than the payload): A Flow Store the State in a global variable (Global) A string of characters (String) A number (Number) A JSON object the date and time of the action (timestamp) The switch ui displayed 20
Slider As well as the switch, the slider can pass an incoming transparent message (check if msg come ). The slider takes as a parameter the minimum value (min), maximum (max) and not (step). The slider ui Numeric field Must be defined a range of entry (min, max). The resulting numeric field 21
Text field This field offers 8 input masks. If a delay (delay) is specified (default 300ms), the Node reference value entered automatically. It is convenient for use on tablet. If period is zero (0), then confirm the entry by pressing the Enter key. Text Nothing more to say about it. email The email mode will color in red if it is not a valid address and will return undefined. Password In this case the characters are masked. Telephone entery For telephone numbers (Not any info yet) Color picker It return the color in hexadecimal format code. It uses the color selector of the system. Time picker The time input type returns a number of milliseconds from midnight. Week picker Output exsemple: Month picker output exsemple: 2018-01-04T13:59:00.000Z. 2018-01-31T23:00:00.000Z Not all browsers support the week and month input types, and may return undefined. Please test your target browser(s) before use. 22
Form Last big piece of the Dashbord, the form. It is a component really very powerful and very simple to implement. As usual, denominated one (Label) can give a type that will be displayed in the header. Are stacked then the elements in the form (Form elements). It for the following choices: Text Number Email Password Checkbox Switch You can make each mandatory element (Required) before the release of the form. Here is the resulting form. 23
Dashboard output nodes Text Will display a non-editable text field on the user interface. The Value Format field can be used to change the displayed format and can contain valid HTML and Angular filters. For example: {{value uppercase}} will uppercase the payload text and add the degree symbol. The label can also be set by a message property by setting the field to the name of the property, for example {{msg.topic}}. The Text output node displayed Gauge Adds a gauge type widget to the user interface.the gauge has several modes. Regular gauge, donut, compass and wave.the msg.payload is searched for a numeric value and is formatted in accordance with the defined Value Format, which can then be formatted using Angular filters. For example : {{value number:1}}% will round the value to one decimal place and append a % sign. 4 different gauge type 24
Notification node Shows msg.payload as a popup notification or OK / Cancel dialog message on the user interface. If a msg.topic is available it will be used as the title. If you do not set an optional border highlight colour, then it can be set dynamically by msg.highlight. You may also configure the position and duration of the notification. Exsemple of the notification output node Chart node Plots the input values on a chart. This can either be a time based line chart, a bar chart (vertical or horizontal), or a pie chart. Each input msg.payload value will be converted to a number. If the conversion fails, the message is ignored. Minimum and Maximum Y axis values are optional. The graph will auto-scale to any values received. Multiple series can be shown on the same chart by using a different msg.topic value on each input message. Multiple bars of the same series can be shown by using the msg.label property. Exsemple of chart output node 25
Bonus: create an event log Now let s see what it looks like. I offer you a small piece of code that stores all events and posters in the form of an event log (log) in a global variable. Add a function Node and paste this code. Events on the interface is stored in a global variable. We delete messages beyond 20 records. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // initialise the counter to 0 if it doesn't exist already var dashboardlog = context.get('dashboardlog') []; dashboardlog.push(msg); if (dashboardlog.length > 20){ // Delete oldest message if > 20 dashboardlog.shift(); dashboardlog.length = 20; } // store the value back context.set('dashboardlog',dashboardlog); // make it part of the outgoing msg object msg = {}; msg.payload = dashboardlog; return msg; Add an HTML Node and paste this code. AngularJS ng-repeat class is used to browse the array returned by the previous function. We created a label in red with the topic. Next to a chip (ul), it displays the value returned by the event of the Dashboard. 1 2 3 4 5 6 7 8 <ul> <li ng-repeat="x in msg.payload"> <font color="red">{{x.topic}}</font> <ul> <li>{{x.payload}}</li> </ul> </li> </ul> Now, you can go to the Dashboard by typing the address http://ip_nodered:1880 / ui For you to test now! 26
Code of the flow [{"id":"4cfaf9fa.a30168","type":"ui_button","z":"e9d1fff8.ab495","name":"boutton","group":"a0b774ba.296d38","order":1,"width":0,"height":0,"label":"boutton","color":"#fffff","icon":"fastar","payload":"true","payloadtype":"bool","topic":"button","x":354,"y":47,"wires":[["87a0631d.38e72"]]},{"id":"6a67cde0.403404","type":"ui_dropdown","z":"e9d1fff8.ab495","name":"list of choice","label":"choose what you want","place":"","group":"a0b774ba.296d38","order":2,"width":0,"height":0,"passthru":true,"options":[{"label":"choce 1: string","value":"choice 1","type":"str"},{"label":"Choice 2 : number","value":4,"type":"num"},{"label":"choice 2: bool","value":true,"type":"bool"}],"payload":"","topic":"list of choice","x":324,"y":87,"wires":[["87a0631d.38e72","7e1c5b34.3eaa44"]]},{"id":"da093a4f.e11508","type":"debug","z":"e9d1fff8.ab495","name":"dashboard Log","active":true,"console":"false","complete":"payload","x":873,"y":172,"wires":[]},{"id":"7ccd781e.ab69a8","type":"ui_switch","z":"e9d1fff8.ab495","name":"Switch","label":"switch","group":"a0b774ba.296d38","order":3,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"Switch","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":324,"y":127,"wires":[["87a06 31d.38e72","15e7c194.6a563e"]]},{"id":"4ae37ac8.ee65d4","type":"ui_slider","z":"e9d1fff8.ab495","name":"Slider","label":"slider","group":"a0b774ba.296d38","order":4,"width":0,"height":0,"passthru":true,"topic":"Slider","min":0," max":10,"step":1,"x":364,"y":167,"wires":[["87a0631d.38e72","e61b1f71.32d16","1bd8fec.19bd801"]]},{"id":"6e76a5be.7a216c","type":"ui_numeric","z":"e9d1fff8.ab495","name":"","label":"numeric","group":"a0b774ba.296d38","o rder":5,"width":0,"height":0,"passthru":true,"topic":"numeric","format":"{{value}}","min":0,"max":10,"step":"","x":354,"y":207,"wires":[["87a0631d.38e72"]]},{"id":"6c1cad76.edaae4","type":"ui_text_input","z":"e9d1fff8.ab495","name ":"","label":"text entry field","group":"a0b774ba.296d38","order":6,"width":0,"height":0,"passthru":true,"mode":"text","delay":"0","topic":"text entry field","x":172,"y":180,"wires":[["87a0631d.38e72","ac714be1.528678"]]},{"id":"8a63e0f0.a2895","type":"ui_form","z":"e9d1fff8.ab495","name":"","label":"a Node-RED form","group":"75e875ea.3bc9ac","order":0,"width":0,"height":0,"options":[{"label":"a text ","value":"text","type":"text","required":true},{"label":"a number","value":"number","type":"number","required":false},{"label":"a email","value":"email","type":"email","required":false},{"label":"a password","value":"a password","type":"password","required":false},{"label":"a check box","value":"check box","type":"checkbox","required":false},{"label":"a switch","value":"interrupteur","type":"switch","required":false}],"formvalue":{"text":"","number":"","email":"","a password":"","check box":false,"interrupteur":false},"payload":"","topic":"form","x":120,"y":612,"wires":[["87a0631d.38e72"]]},{"id":"87a0631d.38e72","type":"function","z":"e9d1fff8.ab495","name":"saves events","func":"// initialise the counter to 0 if it doesn't exist already\nvar dashboardlog = context.get('dashboardlog') [];\n\ndashboardlog.push(msg);\nif (dashboardlog.length > 15){\n // Delete oldest message if > 15\n dashboardlog.shift();\n dashboardlog.length = 15;\n} \n\n// store the value back\ncontext.set('dashboardlog',dashboardlog);\n\n// make it part of the outgoing msg object\nmsg = {};\nmsg.payload = dashboardlog;\nreturn msg;\n","outputs":1,"noerr":0,"x":596,"y":246,"wires":[["da093a4f.e11508","c6653090.a967"]]},{"id":"c6653090.a967","type":"ui_template","z":"e9d1fff8.ab495","group":"6b4d489b.6cdea8","name":"dashboard Event Log","order":1,"width":"8","height":"15","format":"<ul>\n <li ng-repeat=\"x in msg.payload\">\n <font color=\"red\">{{x.topic}}</font>\n <ul>\n <li>{{x.payload}}</li>\n </ul>\n </li>\n</ul>","storeoutmessages":true,"fwdinmessages":true,"templatescope":"local","x":903,"y":286,"wires":[[]]},{"id":"ffc23d7b.03145","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"email entry field","group":"a0b774ba.296d38","order":7,"width":0,"height":0,"passthru":true,"mode":"email","delay":300,"topic":"email entry field","x":192,"y":220,"wires":[["87a0631d.38e72"]]},{"id":"8d07df52.67852","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"password entry field","group":"a0b774ba.296d38","order":8,"width":0,"height":0,"passthru":true,"mode":"password","delay":300,"topic":"password entry field","x":152,"y":260,"wires":[["87a0631d.38e72"]]},{"id":"f3f3f12e.dabca","type":"ui_date_picker","z":"e9d1fff8.ab495","name":"","label":"date","group":"a0b774ba.296d38","order":14,"width":0,"height":0,"passthru":true,"topic":"d ate","x":106,"y":524,"wires":[["87a0631d.38e72"]]},{"id":"5147aa1a.401194","type":"ui_colour_picker","z":"e9d1fff8.ab495","name":"","label":"color picker","group":"a0b774ba.296d38","format":"hex","outformat":"string","showswatch":true,"showpicker":false,"showvalue":true,"showalpha":false,"showlightness":true,"order":15,"width":0,"height":0,"passthru":true,"topic":"colo r picker","x":120,"y":563,"wires":[["87a0631d.38e72"]]},{"id":"83781b3d.b30df8","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"telephone entery","group":"a0b774ba.296d38","order":9,"width":0,"height":0,"passthru":true,"mode":"tel","delay":300,"topic":"telephone entery","x":126,"y":306,"wires":[["87a0631d.38e72"]]},{"id":"300c3e9.4f957c2","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"color Picker","group":"a0b774ba.296d38","order":10,"width":0,"height":0,"passthru":true,"mode":"color","delay":300,"topic":"Color Picker (text field)","x":104,"y":347,"wires":[["87a0631d.38e72"]]},{"id":"44704fdd.f3cf4","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"time picker","group":"a0b774ba.296d38","order":11,"width":0,"height":0,"passthru":true,"mode":"time","delay":300,"topic":"time picker","x":101,"y":392,"wires":[["87a0631d.38e72"]]},{"id":"e4265151.44308","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"week picker","group":"a0b774ba.296d38","order":12,"width":0,"height":0,"passthru":true,"mode":"week","delay":300,"topic":"week picker","x":108,"y":439,"wires":[["87a0631d.38e72"]]},{"id":"18e309bd.60d026","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"month picker","group":"a0b774ba.296d38","order":13,"width":0,"height":0,"passthru":true,"mode":"month","delay":300,"topic":"month picker","x":116,"y":481,"wires":[["87a0631d.38e72"]]},{"id":"ac714be1.528678","type":"ui_text","z":"e9d1fff8.ab495","group":"73a8aee4.cd88a","order":0,"width":0,"height":0,"name":"text","label":"text","format":"{{msg.payload}}","layout":"rowspread","x":644,"y":478,"wires":[]},{"id":"e61b1f71.32d16","type":"ui_gauge","z":"e9d1fff8.ab495","name":"gauge","group":"73a8aee4.cd88a","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{v alue}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":639,"y":538,"wires":[]},{"id":"1bd8fec.19bd801","type":"ui_chart","z":"e9d1fff8.ab495","name":"chart","group":"73a8aee4.cd88a","order":0,"width":0,"height":0,"label":"chart","charttype":"line","legend":"false","xformat":"hh:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeolder":1,"removeolderpoints":"","removeolderunit":"60","c utout":0,"useonecolor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useoldstyle":false,"x":636,"y":602,"wires":[[],[]]},{"id":"7e1c5b34.3eaa44","type":"ui_toast"," z":"e9d1fff8.ab495","position":"top right","displaytime":"3","highlight":"","outputs":0,"ok":"ok","cancel":"","topic":"","name":"","x":598,"y":670,"wires":[]},{"id":"15e7c194.6a563e","type":"ui_template","z":"e9d1fff8.ab495","group":"73a8aee4.cd88a","name":"templat e","order":0,"width":"5","height":"6","format":"<!doctype html>\n<style>\n:focus {\noutline: 5;\n}\nmd-led-index01{\n display: block;\n\tborder-radius:80px;\n\tborder:2px solid #666666;\n\twidth: 20px; \n\theight:20px;\n\tfloat: right;\n\tbackground: -webkit-radial-gradient(#9af589, #42B821);\n \n }\n\n\n</style>\n\n<p style=\"font-size:120%;text-align:center\" >Template</p> \n\n<span style=\"font-size:100%;text-align:left;margin: 2px\">\nSwitch status\n<md-led-index01\n ng-style=\"{background: msg.payload=='1'?'transparrent':'#424c3f'}\"\n\n>\n{{msg.payload == '0'? '' : ''}}\n</md-ledindex01>\n\n</span>\n\n","storeoutmessages":true,"fwdinmessages":true,"templatescope":"local","x":567,"y":722,"wires":[[]]},{"id":"a0b774ba.296d38","type":"ui_group","z":"","name":"input elements","tab":"d01a8f33.8299d","order":1,"disp":true,"width":"8"},{"id":"75e875ea.3bc9ac","type":"ui_group","z":"","name":"form","tab":"d01a8f33.8299d","order":3,"disp":true,"width":"8"},{"id":"6b4d489b.6cdea8","type":"ui_gro up","z":"e9d1fff8.ab495","name":"dashboard Event Log","tab":"d01a8f33.8299d","order":4,"disp":true,"width":"8"},{"id":"73a8aee4.cd88a","type":"ui_group","z":"","name":"Output elements","tab":"d01a8f33.8299d","order":2,"disp":true,"width":"6"},{"id":"d01a8f33.8299d","type":"ui_tab","z":"","name":"main Screen","icon":"home","order":2}] 27
References http://noderedguide.com/ https://diyprojects.io https://nodered.org/docs/ 28