M5StackUIFlowCode

Code to get humidity, pressure and temperature from an ENV II sensor using M5Stack and publishing the data to AWS over MQTT Developing a Environment Monitor using M5Stack, AWS and Grafana

CPSC-8810 Building a Environment Monitor Using M5Stack, AWS and Grafana

Developing a Environment Monitor using M5Stack, AWS and Grafana

Objectives:

In this lab you will:

• Learn how to setup the M5Stack
• Register a thing in AWS IoT Core
• Publish data to AWS over MQTT

Requirements:

• An AWS account

https://aws.amazon.com/

• M5 Stack device https://devices.amazonaws.com/detail/a3G0h000007djMLEAY/M5Stack-Core2-ESP32-IoT-Development-Kit-for-AWS

or

optionally any IOT device that can communicate over MQTT protocol and send data to AWS

• ENV II Sensor

https://m5stack.hackster.io/products/env-ii-unit-with-temperature-humidity-pressure-sensor-sht30-bmp280

CHAPTER 1: Setting up the device

Pre-requisites for configuring the M5Stack

1. Download and Install the CP210x USB to UART Bridge VPC Driver

Steps to install the driver: https://m5stack.github.io/UIFlow_doc/en/en/base/Update.html

Links to download the required software:

1. https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers

2. https://shop.m5stack.com/pages/download

3. Download and Install the M5 Burner: https://shop.m5stack.com/pages/download

Burning the UIFlow Firmware onto the M5Stack

• Double-click to open the M5Burner
• ① Select the corresponding device type in the left menu
• ② Select the firmware version you want
• ③ Click the download button to download.

In our case we will be downloading the UIFlow_Core2 latest version to burn onto the M5Stack

2. Then connect the M5 device to the computer through the Type-C cable, select the corresponding COM port (For MAC devices the port may read something like /dev/tty.SLAB_USBtoUART), the baud rate can use the default configuration in M5Burner,

   • ④ Click Erase on the right to erase Flash, close the current page when finished.
   • ⑤ Click "Burn" to start burning, you can input WIFI configuration information during burning.

3. When the burning log prompts Burn Successfully , it means that the firmware has been burned.

Configuring the WIFI on the M5Stack

1. Click the power button on the left side of the device to turn it on. The UIFlow Logo appears on the screen.

2. After entering the main page, press the Setup button on the screen.

3. In the WiFi option, press the start button of the config Wi-Fi by web option, and the device will automatically restart, where selected Wi-Fi is the last connected WiFi.

4. After the device jumps, the WiFi Config page will be displayed.

5. Follow the prompts to connect to the SSID hotspot through the WiFi of the mobile phone or computer.
6. Open the browser to visit 192.168.4.1 and enter the WiFi information in the pop-up page to configure the network successfully.
7. After the configuration is successful, the device will automatically restart. And enter the programming mode.

Connect to the SSID shown on the M5Stack through your computer or Mobile

Enter the SSID (Name of the WIFI) and password of the Wifi you want to connect your M5Stack to. (Note: The M5Stack may not allow you to connect to public WIFI's such as EduRoam or Clemson Guest, or even any 5Ghz networks. You may connect to your mobile hotspot or any private 2.4 Ghz Wifi such as your home WIFI).

Connecting the M5Stack to UIFlow

1. The device automatically restarts on a successful WIFI Connection and display the following screen:

Note: Network programming mode is a docking mode between M5 device and UIFlow web programming platform. The screen will show the current network connection status of the device. When the indicator is green, it means that you can receive program push at any time. Under default situation, after the first successful WiFi network configuration, the device will automatically restart and enter the network programming mode

2. Follow the instructions displayed on the device and go to flow.m5stack.com on your computer

3. Type in the matching API Key into UIFlow and select the device type.

Note: API KEY is the communication credential for M5 devices when using UIFlow web programming. By configuring the corresponding API KEY on the UIFlow side, the program can be pushed for the specific device. The user needs to visit flow.m5stack.com in the computer web browser to enter the UIFlow programming page. Click the setting button in the menu bar at the upper right corner of the page, enter the API Key on the corresponding device, select the hardware used, click OK to save and wait till it prompts successfully connecting or displays connected in the bottom left on the status bar.

References links for setting up the M5Stack

1. https://docs.m5stack.com/en/quick_start/core2/m5stack_core2_get_started_MicroPython

CHAPTER 2: SETTING UP THE DEVICE IN AWS

Registering a Thing in AWS

1. After you create your account in AWS, login to the console and navigate to the AWS IOT Core Dashboard.

2. In the AWS IoT console, in the side navigation pane, choose Manage , and then choose Things.

3. If a You don't have any things yet dialog box is displayed, choose Register a thing. Otherwise, choose Create.

4. On the Creating AWS IoT things page, choose Create a single thing.

5. On the Add your device to the device registry page, enter a name for your IoT thing (for this example enter the following as your device name, " EnvThing" ), and then choose Next.

You can't change the name of a thing after you create it. To change a thing's name, you must create a new thing, give it the new name, and then delete the old thing.

1. On the Add a certificate for your thing page, choose Create certificate.

2. Choose the Download links to download the certificate for the thing with the extension ******.cert.pem, and the private key. We will be using these certificates later.

Important: This is the only time you can download your certificate and private key.

1. Choose Activate.

2. Choose Attach a policy.

3. For now, we will not attach any policy and Choose Register a thing.

Reference link for Registering a thing

1. https://docs.aws.amazon.com/iot/latest/developerguide/iot-moisture-create-thing.html

Creating a policy

In the project we will create a policy that allows us to connect with AWS, and publish and subscribe to messages.

1. In the AWS IoT console, in the side navigation pane, choose Secure , and then choose Policies.
2. Enter the following name to your policy "M5ToAWSPolicy"
3. Since we will be writing our own policy in the Add Statements section Choose Advanced Mode and copy/paste the code give below.
4. Replace <Region-Name> with the name of the region in which you are working such as "us-east-1"
5. Replace <Account-No> with your AWS account number which can be found on the Top right of the AWS Console by clicking on your account name
6. Replace <ThingName> with the name you gave your thing while registering it in the previous step (In our case the name is EnvThing).

Code to Copy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "iot:Connect",
      "Resource": "arn:aws:iot:<Region-Name>:<Account-No>:client/<ThingName>"
    },
    {
      "Effect": "Allow",
      "Action": "iot:Subscribe",
      "Resource": "arn:aws:iot: :<Region-Name>:<Account-No>:topicfilter/<ThingName>/sub"
    },
    {
      "Effect": "Allow",
      "Action": "iot:Receive",
      "Resource": "arn:aws:iot: :<Region-Name>:<Account-No>:topic/<ThingName>/sub"
    },
    {
      "Effect": "Allow",
      "Action": "iot:Publish",
      "Resource": [
        "arn:aws:iot: :<Region-Name>:<Account-No>:topic/<ThingName>/env/pub"
      ]
    }
  ]
}

Example Code:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "iot:Connect",
      "Resource": "arn:aws:iot:us-east-1:945484123456:client/EnvThing"
    },
    {
      "Effect": "Allow",
      "Action": "iot:Subscribe",
      "Resource": "arn:aws:iot:us-east-1: 945484123456:topicfilter/EnvThing/sub"
    },
    {
      "Effect": "Allow",
      "Action": "iot:Receive",
      "Resource": "arn:aws:iot:us-east-1: 945484123456:topic/EnvThing/sub"
    },
    {
      "Effect": "Allow",
      "Action": "iot:Publish",
      "Resource": [
        "arn:aws:iot:us-east-1: 945484123456:topic/EnvThing/env/pub"
      ]
    }
  ]
}

Attaching the created Policy to the certificate

1. In the AWS IoT console, in the side navigation pane, choose Secure , and then choose Certificates.
2. Click on the certificate you just created.
3. Then click on Actions and Click on Attach Policy from the drop-down menu.
4. Select the policy we just created and click Attach.

References links about AWS Policies

1. Attach a policy to a client certificate: https://docs.aws.amazon.com/iot/latest/developerguide/attach-to-cert.html
2. Publish/Subscribe Policy Examples: https://docs.aws.amazon.com/iot/latest/developerguide/pub-sub-policy.html

References

https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers

https://shop.m5stack.com/pages/download

Chapter 3: Programming and Publishing data to AWS

With the thing registered, certificates downloaded, and the relevant policies attached to the certificate we are now ready to program and publish data to AWS.

Setting up the coding environment

1. After connecting the M5Stack to UIFlow in chapter 1 we are now ready program, just hit the refresh device status button in the status bar on the bottom to verify that the device is still connected.

2. Connect the ENV II sensor to the Port A of the M5 Stack using the grove cable provided. (Port A is the port besides the charging port and it's the only Port the sensor will work on)

3. In the UI Flow screen click on the + sign below Units

Setting up the layout

1. We will first need 7 labels for this project. These labels can be easily added by dragging and drop the label component from the top left onto the M5Stack screen in the UIFlow editor.

The labels we need our as follows:

1. Label 0 - T:
2. Label 1 - P:
3. Label 2 - H:
4. Label 3 – 23 (Temperature value that will be dynamically populated)
5. Label 4 – 900 (Pressure value that will be dynamically populated)
6. Label 5 – 52.73 (Humidity value that will be dynamically populated)
7. Label 6 - 2021-04-26 16:53:14 Mon (Timestamp value that will be dynamically populated

2. Clone or download the file named GetSensorData.m5f
3. Click on the hamburger menu and hit open and choose the GetSensorData.m5f file.
4. Hit the run button on the top right of the UIFlow IDE.
5. You should be able to see the values for temperature, humidity, pressure and the time being constantly updated.

Checking to see if your device is publishing to AWS over MQTT

1. In the AWS IoT console, in the side navigation pane, choose Test, and then choose MQTT test client.

2. In the subscribe to a topic section, enter the topic filter from the code: “EnvThing/env/pub” and hit Subscribe.

3. You should be able to see data constantly being sent and the output should look like this: We have therefore successfully written our code, ran the code on the M5Stack and published data to AWS over MQTT.