As a visual drag flow for the Internet of Things, Node-Red is really easy to get started with. For those of you who haven’t started yet, take a look at my previous articles

  • Internet of Things platform Node-RED series (1) : Introduction and installation of Node-Red

  • Internet of Things platform Node-RED series (2) : The operation of node-Red panel

  • Internet of Things platform Node-RED series (3) : The use of Node-Red public nodes

  • Internet of Things platform Node-RED series (4) : The use of Node-Red function nodes

  • Internet of Things platform Node-RED series (5) : the use of Node-Red sequence nodes

  • Internet of Things platform Node-RED series (6) : Use of Node-Red parsing nodes

  • Internet of Things platform Node-RED Series (7) : Use of Node-Red storage nodes

  • Internet of Things platform Node-RED Series (8) : Use of Node-Red network nodes

  • Node-red series (9) : The use of dashboard nodes in node-red panel

Last time I introduced you to the dashboard installation and a button configuration, this time we will learn the Dashboard node configuration in a more systematic way.

As we learned in the last installment, the Dashboard library has 16 nodes, respectively

  • Button Button node
  • Dropdown Select a node from the drop-down list
  • Switch Switch node
  • The slider round figure
  • Numeric numeric slider
  • Text Input Indicates the text input
  • Date picker Date picker
  • Colour picker Colour picker
  • Form form
  • Text Text display
  • The gauge dashboards
  • The chart shows that
  • Audio out Indicates the audio output
  • Notification notice
  • UI Control UI control
  • Template template

This article I will give you more on the use and configuration of a few nodes.

We must first understand the dashboard this library, library, flows.nodered.org/node/node-r… Github library source github.com/node-red/no… So far 899 stars, that’s pretty good. The layout of Dashboard can be seen as a grid layout. Each group (group) has a default width of 6 units (each unit is 48px with 6px intervals), and each component must be in a group. The component here refers to a UI element, such as buttons, input boxes, selection boxes, Number slider. The default width for each widget is Auto. This means that it will cover the entire group and will adapt to units.

Given a group of width 6, if you add six widgets, each of width 2, they will be arranged in two rows – three widgets per row.

If you add two sets of widths 6, they will sit side by side as long as your browser window is wide enough. If you zoom out the browser, the second group in a column will sometimes move below the first group.

It is recommended to use as many groups as possible, rather than one large group, so that pages can be dynamically resized on a smaller screen.

In the layout, the largest layout units are tabs, followed by groups, and then widget widgets. You can click on a bar chart chart in the upper right corner to see the Dashboard action panel

Site configuration

Theme color configuration

Themes can be customized

Style Select Custom to select a Custom color.

In terms of ICONS, Dashboard has four built-in sets of ICONS. , respectively,

  • Angular Material ICONS: Angular Material ICONSsend
  • Font Awesome 4.7fa-fire fa-2x
  • Weather Icons Lite: Weather Icons Litewi-wu-sunny
  • Material Design Iconfont ; Material Design ICONS are as followsmi-alarm_on

With all the UI components configured into the flow,As long as UI components do not involve data flow, they can be displayed on the page without wires. The flow configuration above shows a page like this

Since the group defaults to 6 units, it’s a little small. We can click here to adjust the width

The adjusted renderings

It’s not that small. It looks a little bit better.

Finally, let’s take a look at the library of ICONS that Dashboard supports.

angular-material-icons


The Font Awesome 4.7

Weather Icons Lite