Project 23：IoT Data Visualization Dashboard

The Internet of Things bridges physical and digital worlds, with data monitoring and visualization as its core application. In this lesson, we'll build an IoT data monitoring and visualization system. Using the UNIHIKER K10 and the SIoT platform, we'll collect, display and remotely control environmental data in real - time, and learn IoT system construction logic and multi - mode control methods. 

Project Objectives

Knowledge Objectives

1.Understand data visualization.
2.Learn the basic structure of loT system devices.
3.View and control data through visualization dashboards.

Practical Objective 

Display temperature and other environmental data on a visualization panel in real-time with images and text. Add control switch components for multi-mode control of the visualization platform (e.g.,using environmental humidity to control a humidifier's on/off). 

Materials List

Preparations

Hardware

(1) Insert the servo into servo port S1 with correct polarity: align the yellow signal wire with the green pin on the expansion board.

(2) Stand the UNIHIKER K10 upright, and insert it into the expansion board slot with the screen facing forward.

(3) Connect the UNIHIKER K10 to the computer with a USB cable, and connect the expansion board to the computer with its power cable separately (the UNIHIKER K10 only needs to connect to the computer when uploading programs). Then switch the power to ON.

Software

Open Mind+ , switch to“Upload Mode”, connect the UNIHIKER K10 as shown in the figure below, and load the UNIHIKER K10 library.

Hands-on Practice

Next, we'll design the IoT system's data monitoring and visualization interface via three tasks.
Task 1: Data Display
First, we'll learn to use the visualization panel to display environmental data on temperature, humidity and light.
Task 2: Controlling a Servo with Switch Components
Then, we'll use switch components on the visualization panel to send data and control servo rotation, simulating a humidifier's on/off button. 
Task 3: Multi-Mode Control of a Servo
Last, we'll set up a control mode input box on the visualization panel. Enter "Manual Control" to control the servo via the panel buttons; enter "Auto Control" to control the humidifier's on/off by checking if the environmental humidity hits the threshold. 

Task 1: Data Display

Network Configuration

First, check that your computer and the UNIHIKER K10 are connected to the same wireless network, to ensure they are on the same local area network.

Set up the server

Start the SIoT platform program
Download the Windows version of SIoT V2 and extract the SIoT_V2_Win.zip file.
After extraction, double-click start SIoT.bat to launch the new version of SIoT. Once launched, a small black command window pops up to start the server. Don't close it while the project is running, and note your computer's IP address.

Note: It's recommended to turn off all computer firewalls before starting, or external devices may not access.
After starting the server, open your browser, enter the local IP address followed by :8080 (e.g., 192.168.35.1:8080) to access the server login interface.

The login username is siot and password is dfrobot. Enter them to access the SIoT data management interface. The server setup is now complete.

Create a Topic

After successful login, create new topics related to the environment on the SIoT platform web page: temperature, humidity and light.
Note: After creation, double-click the topic name in the label (e.g., siot/temperature) to auto-copy the full topic name. The full topic name is in the siot/[topic name] format, with "siot/" added auto and no manual entry needed.

Code

  
First, we load the required graphical libraries. Click "Extensions", find the "MQTT" and "Wi-Fi" graphical libraries under "Network" in "Module", and then click to add them.

Next, we can refer to Project 20 and complete the code following the logic of:connect to the network→MQTT initialization→connect to the server→ subscribe to the topic→set up message reception control.

Design the visualization dashboard

After finishing the program, click the plus sign at the top to add an application tab and select dashboard (only available in Mind+ 2.0.5). Then enter the local IP address to enter the Dashboard interface.

Drag the "Image text" from the left "Display Components" to show temperature, humidity and other related data detected by the UNIHIKER K10 sensors.

Then, configure the settings in the "Component Properties" section on the right side of the interface to enable this component to display temperature. The specific operations are as follows:

Follow the prompts above to set up the corresponding components for humidity and light on your own. The overall dashboard design is as follows:

Run the Code

Click the“Upload”button.Wait for the upload to complete and then wait a moment. If the network and server connect successfully, the screen will show “Network connection successful”and”Server connection successful”in sequence.As shown below:

Next, open the dashboard to observe changes in the relevant data displayed. If the data does not update, the dashboard may not be properly connected to the SIoT platform. You can reconnect in the upper-right corner of the dashboards. The specific steps are as follows:

Task 2: Controlling a Servo with Switch Components

Servo Arm Installation

First, we need to load the required graphical library for the expansion board. Click "Extensions", find "motor:bit" under the "Expansion" module in "Module", and complete the loading.

Then, write a code to control the servo to rotate to a fixed angle. After running the code, install the servo arm and ensure that the servo angle meets your opening and closing requirements. The corresponding code is as follows:

Installation example is shown below:

Code 

Now, based on Task 1, we'll add a switch control function. Use the switch component to control servo angle rotation. When the switch is on, the servo rotates 90°. When it's off, the servo rotates 0°. 
First, create a new topic "siot/switch" on the SIoT platform to receive the relevant data of the switch component sent back from dashboards.

Then, modify the code: when an MQTT message from the topic "siot/switch" is received, the servo performs the corresponding action. At the same time, the current rotation angle of the servo is displayed on the screen. The corresponding code is as follows:

In addition, to ensure the servo is closed at the code's initial stage, use the earlier self-sending and self-receiving method to send an "off" command to the "siot/switch" topic once before the loop starts. The complete main code is shown below.

Design the visualization dashboard

After code design, open the dashboard interface from Task 1 for modification. Then, add the "Switch" from "Basic Components" to control servo rotation. Specific operations and property configurations are shown below.

Finally, make sure the dashboards are properly connected to the SIoT platform, as shown below:

Run the Code

Click the“Upload”button .Wait for the upload to finish and then wait a bit. If the network and server connect successfully, the screen will show "Network connection successful" and "Server connection successful" in order. 
Next, open the dashboards, click the switch button with the mouse to change its state, and observe the servo's rotation angle to complete the humidifier switch button simulation. Details are as follows:

At the same time, open the SIoT platform and go to "Details" page of "siot/switch". You can see the detailed information of the MQTT messages sent from the switch button to the UNIHIKER K10 on the visualization interface.

Task 3: Multi-Mode Control of a Servo

Code

In this task, we'll continue to modify the code to realize multi-mode control of the servo.
Before writing the code, create the topic "siot/control mode" on the SIoT platform first, as shown below:

Delete the other two topics which aren't used in this task and also delete the relevant blocks in code. Then, write the code according to the following logic.

The complete corresponding code is as follows:

Design the visualization dashboard

Open the dashboard file for Task 2, delete components related to temperature and light. Then, select the control mode via the "Input" under "Basic Components" to achieve multi-mode control of the servo. The specific components and property settings are as follows:

Finally, the complete visualization dashboard interface is shown below:

Run the Code

Click the“Upload”button .Wait for the upload to finish and then wait a bit. If the network and server connect successfully, the screen will show "Network connection successful" and "Server connection successful" in order. 
Next, open the dashboard. Enter "Auto Control" and "Manual Control" in the control module respectively, and observe the servo's rotation angle changes. In Manual Control mode, click the switch button with the mouse to change its state and observe the servo's rotation angle. 

Knowledge Base

Next, let's learn and summarize the hardware knowledge used in this lesson.

Data Visualization

The significance of data visualization is to help people obtain valid information from massive data efficiently and quickly. The quality of information depends on its presentation. Data visualization uses graphical methods to make data more intuitive.

Charts are a common data-visualization method, with line and bar charts most widely used. A line chart shows quantity and data's increase or decrease trend. A bar chart allows you to see data magnitude at a glance and compare proportional differences between datasets. There are other chart types for showing data characteristics. Do further research if interested.

Introduction to Mind+ Visualization Dashboards

The Mind+ visualization dashboard is an interface design tool for presenting SIoT-received data more conveniently and intuitively. You can design desired data display and control interfaces by dragging and dropping components. In the previous project, we learned about its composition and operation. Next, let's examine the functions of each interface area in detail.

Composition of the Internet of Things

The Internet of Things (IoT) refers to the interconnection of all things. It's a network that connects any object to the Internet via information sensing devices following agreed protocols for information exchange and communication, to achieve intelligent identification, positioning, tracking, monitoring and management. The compositional relationship of the IoT is shown below.

An IoT system mainly consists of four parts: perception terminals, network transmission, service platform, and application interaction, forming a complete closed loop of data collection, transmission, processing, and feedback.
- Perception terminals are centered on smart terminals, connecting sensors and actuators. Sensors collect physical information such as temperature, humidity, and location, and transmit it to smart terminals. Actuators receive commands to perform switching, driving, and other operations, acting as the "hands and feet" for the system to interact with the physical world.
- The network undertakes data transmission, acting as a bridge between smart, server, and mobile terminals. It enables perception data upload and control command issuance, ensuring information exchange among modules.
- The server is the system's core processing unit. It connects to the database for data storage and management, and provides a visualization interface via the page display module. It also communicates bidirectionally with smart and mobile terminals to implement core logic like data parsing and command distribution. 
- As a user interaction entry, mobile terminals link with servers via the network to realize remote monitoring, parameter configuration, and control of smart terminals. This allows users to conveniently participate in system management and complete the full closed loop from perception to application.

Challenge Task

Through today's lesson, you've gained a basic understanding of the Mind+ visualization dashboard. Now, explore and enrich your interface on your own. Try more components like charts to polish it.
Tip: Use components in the Graphical components to draw real-time line charts for temperature, humidity, and light to monitor environmental changes.