---
title: M5Stack UIFlow Integration with Blues Notecard
description: A guide on how to use the Blues Notecard within the M5Stack UIFlow ecosystem.
source_url: https://dev.blues.io/blog/m5stack-uiflow-integration-with-blues/
canonical_url: https://dev.blues.io/blog/m5stack-uiflow-integration-with-blues/
markdown_url: https://dev.blues.io/blog/m5stack-uiflow-integration-with-blues.md
---

# M5Stack UIFlow Integration with Blues Notecard

![M5Stack UIFlow Integration with Blues Notecard banner](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/banner.png?v=33a26f4d)

January 16, 2024

## A guide on how to use the Blues Notecard within the M5Stack UIFlow ecosystem.

- [Integration](https://dev.blues.io/blog/tag/integration)

[![Pradeep](https://dev.blues.io/images/blog/authors/pradeep.jpg?v=e589f9e0)](https://dev.blues.io/blog/author/pradeep/)

[PradeepVLSI Chip Testing Engineer](https://dev.blues.io/blog/author/pradeep/)

[**M5Stack UIFlow**](https://m5stack.com/uiflow) is a graphical programming language developed by M5Stack. It’s designed to make programming more accessible and fun for beginners, while still being powerful enough for experienced programmers. This blog will show you how to integrate and program the [Blues Notecard](https://blues.com/products/notecard/) with M5Stack hardware via their UIFlow interface.

## Features

UIFlow has several key features that make it stand out:

- **Graphical Interface**: UIFlow uses a block-based interface, similar to Scratch. This allows users to drag and drop blocks of code, making it easier to understand the flow of the program.
- **Compatibility**: UIFlow is compatible with M5Stack’s range of IoT development boards. This means you can easily program devices to interact with the physical world.
- **Online IDE**: UIFlow can be accessed through a web browser, making it platform-independent. You can program your M5Stack devices from anywhere, without installing any software.
- **Python Support**: In addition to its graphical interface, UIFlow also supports Python. This allows more experienced programmers to write complex programs using a familiar language.

## Applications

M5Stack UIFlow can be used in a variety of applications, including:

- **Education**: UIFlow’s simple, intuitive interface makes it an excellent tool for teaching programming concepts.
- **Rapid Prototyping**: With UIFlow, you can quickly prototype IoT devices using M5Stack’s development boards.
- **Home Automation**: You can use UIFlow to program M5Stack devices to automate tasks around your home.

## Getting started

Getting started with M5Stack UIFlow involves a few steps:

1. Download the [M5Burner firmware burning tool](https://docs.m5stack.switch-science.com/en/download): This tool is used to flash the UIFlow MicroPython-based firmware onto the M5Stack device. ![The M5Burner firmware burning tool](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/firmware-burner.png?v=da29fa12)

2. Firmware Installation: Use M5Burner to flash the UIFlow MicroPython-based firmware onto your M5Stack device. ![The M5Burner firmware burning tool](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/firmware-installation.png?v=5e4ab509)

3. Configure WiFi: After downloading the firmware configure the WiFi details before uploading to the board. ![Entering WiFi credentials](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/wifi-details.png?v=057a6c02)

4. Network Programming Mode and API KEY: Enter network programming mode and pair your API KEY. ![Finding your API key](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/api-key.png?v=046ed7e6)

5. UIFlow Setup: Connect and program the M5Stack device in UIFlow, whether you use the web-based version or the desktop version. ![Connecting to your device in UIFlow](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/uiflow-setup.png?v=c88b3f13)

For a more detailed guide, you can refer to the [UIFlow Quick Start guide](https://github.com/m5stack/m5-docs/blob/master/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md) on GitHub.

## Blues Notecard Hardware Integration

The Blues Notecard supports both I2C and UART communication, and in this tutorial we’ll use UART to integrate the Notecard with M5Stack Core 2. To do so simply connect the grove cables between Core2 and any [Notecarrier](https://blues.com/products/notecarrier/) with a Notecard attached. That’s all.

![Connecting the Core2 with a Notecarrier](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/hardware-setup.png?v=13a24a39)

## UIFlow Integration with Blues Notecard

First, let’s try to implement some basics in UIFlow. Connect your M5Stack device with UIFlow by entering the API KEY in the UIFlow settings interface, and also select the device type.

![UIFlow settings](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/uiflow-settings.png?v=5f7e8428)

Once the device is connected to UIFlow you can see the status on the bottom screen.

![UIFlow status bar with device connected](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/status-bar.png?v=ff38487c)

Next, open the UI tab and look for the screen background color menu.

![UIFlow screen background](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/screen-background.png?v=58778afc)

Here is my simple program that can change my M5Stack screen color.

![UIFlow simple program](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/simple-program.png?v=47fb46d1)

Next, click the run button.

![The background color change on the hardware](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/background-on-hardware.png?v=a471eda4)

That’s it, now you’re ready to integrate the Blues Notecard with UIFlow. Navigate to the Hardware tab and look for the UART menu.

![UIFlow UART menu](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/uart-menu.png?v=2cf5f4ce)

Select the UART block. In my M5Stack Core2 pin, 14 is tx and 13 is rx. Also, set the baud rate as 9600.

![UIFlow UART configuration settings](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/uart-config.png?v=4c92879c)

Here is my simple block program that can send and receive data from the Notecard.

![UIFlow simple block program](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/simple-block.png?v=0fdb1624)

Here is the serial terminal response.

![Terminal response from running the hub.sync request](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/serial-terminal-response.png?v=ee42c1fc)

This is what we expected from the Notecard, next, let’s try to connect with our AP.

![Block for connecting the Notecard to an access point](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/access-point-block.png?v=f7d289d8)

Here is the expected serial terminal response from the M5Stack Core2.

![Terminal response contents in UIFlow](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/expected-response.png?v=11ec7cd6)

Now we are done with the basic configuration. Next, let’s configure the Notecard with our demo project. For that first create a project on [Blues Notehub](https://notehub.io/create-project) and [copy the product UID](https://dev.blues.io/notehub/notehub-walkthrough.md#finding-a-productuid).

![Location of the ProductUID within Notehub](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/productuid.png?v=c8168f2c)

Then configure the UIFlow to connect with the demo project.

![UIFlow block to connect to a Notehub project](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/notehub-connection.png?v=9e772dd6)

Look at the Notehub project and look for the device connection.

![A device connected to Notehub](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/device-connection.png?v=f6014605)

Now, let’s try to send some dummy sensor values to the Notehub.

![UIFlow block for sending dummy sensor values to Notehub](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/dummy-sensor-values.png?v=62a6ab4e)

Here is our final Notehub response.

![Notehub project with data populated](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/final-notehub-response.png?v=81c9287a)

In addition to the simple data integration, I have added some UI and LED controls.

![Final UIBlock setup with UI and LED controls](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/final-block.png?v=64bb98d1)

Here is the Micropython code corresponding to the UIBlocks.

```python
from m5stack import *
from m5stack_ui import *
from uiflow import *
import time

screen = M5Screen()
screen.clean_screen()
screen.set_screen_bg_color(0xFFFFFF)

image0 = M5Img("res/10.png", x=-17, y=54, parent=None)

uart1 = machine.UART(1, tx=14, rx=13)
uart1.init(9600, bits=8, parity=None, stop=1)
uart1.write(' {"req":"hub.sync"}'+"\r\n")
wait(2)
print((uart1.read()).decode())
uart1.write('{"req":"card.wifi","ssid":"XXXX","password":"XXXXX"}'+"\r\n")
wait(2)
uart1.write('{"req":"hub.set", "product":"com.gmail.XXXXXXXX"}'+"\r\n")
wait(2)
print((uart1.read()).decode())

while True:
  rgb.setColorFrom(6, 10, 0xff0000)
  rgb.setColorFrom(1, 5, 0xff0000)
  uart1.write('{"req":"note.add","body":{"temp":35.5,"humid":56.23}}'+"\r\n")
  wait(1)
  print((uart1.read()).decode())
  uart1.write('{"req":"hub.sync"}'+"\r\n")
  wait(1)
  print((uart1.read()).decode())
  rgb.setColorFrom(6, 10, 0x33ff33)
  rgb.setColorFrom(1, 5, 0x33ff33)
  wait(2)
  wait_ms(2)
```

## Conclusion

![Final project hardware with Blues logo](https://dev.blues.io/images/blog/posts/m5stack-uiflow-integration-with-blues/final-project.gif?v=bd8bfa96)

The integration of UIFlow with the Blues Notecard provides a powerful, yet easy-to-use platform for IoT development. Whether you’re a seasoned developer or a beginner just getting started, this combination of tools can help you bring your ideas to life. Happy coding! 😊