Step
In this project you will learn how easy it is to send data between two ESP Boards using the ESPNOW β Peer to Peer Wireless Communication. We are going to use ATOM Matrix & Atom Lite, both are ESP32 boards from M5Stack to make a Countdown timer. If you do not have the Atom modules you can use any other ESP32 or ESP8266, but you will need to attach the button and the display, but the ESPNOW approach is the same.
Watch the video!
Step 1: What You Will Need
- ATOM Matrix ESP32 More info
- ATOM Lite ESP32 IoT Development Kit
- Visuino program: Download Visuino
Step 2: Getting the MAC Address
The Visuino: https://www.visuino.eu also needs to be installed. Download Free version or register for a Free Trial.
Repeat this step for both ESP boards:
- Start Visuino as shown in the first picture Click on the βToolsβ button on the Arduino component (Picture 1) in Visuino When the dialog appears, select βM5 Stack ATOM Liteβ or βM5 Stack ATOM Matrixβ Or any other ESP board that you use.
- Connect pin MAC Address to Serial Pin [0] as on (Picture 2)
- In Visuino, at the bottom click on the βBuildβ Tab, make sure the correct port is selected, then click on the βCompile/Build and Uploadβ button.
- Then click on the βSerialβ Tab and click on the button βConnectβ
- You should see the MAC Address as on (Picture 3) or (Picture 4), In case you do not see it, click the βResetβ button on the ESP Board
- Copy the MAC Addresses to your Notepad as you will need them later




Step 3: Sender ESP32: Start Visuino, and Select the M5 Stack ATOM Lite Board Type
The Visuino: https://www.visuino.eu also needs to be installed. Download Free version or register for a Free Trial.
Start Visuino as shown in the first picture Click on the βToolsβ button on the Arduino component (Picture 1) in Visuino When the dialog appears, select βM5 Stack ATOM Liteβ as shown on Picture 2


Step 4: For Sender M5 Stack ATOM Lite β in Visuino Add, Set & Connect Components
- Select the βM5 Stack ATOM Liteβ board and in the Properties window extend Modules>WiFi>ESP-NOW>Elements and click on the 3 dots Button
- In the Elements window Drag βDevice(Peer)β to the Left side and in the Properties window paste the MAC Address of the other Board in our case M5 Stack ATOM Matrix
- Close the Elements Window
- Add βMake Structureβ component
- Add βDebounce Buttonβ component
- Double click on the βMakeStructure1β and in the Elements window Drag βDigitalβ to the Left side
- Close the Elements Window
- Connect βM5 Stack ATOM Liteβ > βButtonβ Pin [Out] to βButton1β Pin [In]
- Connect βButton1β Pin [Out] to βMakeStructure1β > βDigital1β Pin [In]
- Connect βMakeStructure1β Pin [Out] to βM5 Stack ATOM Liteβ Pin [Sending]
Upload the Project to the Atom Board (see the Generate, Compile, and Upload the Arduino Code step)








Step 5: Receiver M5 Stack ATOM Matrix β in Visuino Add, Set & Connect Components
- Select the βM5 Stack ATOM Matrixβ board and in the Properties window extend Modules>WiFi>ESP-NOW>Elements and click on the 3 dots Button
- In the Elements window Drag βDevice(Peer)β to the Left side and in the Properties window paste the MAC Address of the other Board in our case M5 Stack ATOM Lite
- Close the Elements Window
- Select βM5 Stack ATOM Matrixβ board and in the properties window expand βModulesβ>βRGB Matrixβ>βElementsβ and click on the 3 dots button
- In the βElementsβ window drag βFill Screenβ to the left side
- In the βElementsβ window drag βText Fieldβ to the left side, and in the properties window set βColorβ to aclBlue and βXβ to 1, select βElementsβ and click on the 3 dots button, In the βElementsβ window drag βFontβ to the left side and in the properties window set βFontβ to Adafruit\Picopixel
- Close both βElementsβ window
- Add βSplit Structureβ component
- Double click on the βSplitStructure1β and in the Elements window Drag βDigitalβ to the Left side
- Close the Elements Window
- Add βDigital Multi Sourceβ component
- Add βToggle(T) Flip-Flopβ component
- Add βPulse Generatorβ component
- Select βPulseGenerator1β and in the properties window select βEnabledβ, click on the pin Icon and select βBoolean SinkPinβ
- Add βUp/Down Counterβ component
- Select βUpDownCounter1β and in the properties window set βInitial Valueβ to 9, βMaxβ > βRoll Overβ to False and βMaxβ > βValueβ to 9, βMinβ > βRoll Overβ to False and βMinβ > βValueβ to 0
- Add βInteger Multi Sourceβ component
- Select βIntegerMultiSource1β and in the properties window set βOutput Pinsβ to 3
- Connect βM5 Stack ATOM Matrixβ > βSendingβ Pin [Out] to βSplitStructure1β Pin [In]
- Connect βSplitStructure1β > βDigital1β Pin [Out] to βMultiSource1β Pin [In]
- Connect βMultiSource1β Pin [0] to βUpDownCounter1β Pin [Reset]
- Connect βMultiSource1β Pin [1] to βTFlipFlop1β Pin [Set]
- Connect βTFlipFlop1β pin [Out] to βPulseGenerator1β Pin [Enabled]
- Connect βPulseGenerator1β Pin [Out] to βUpDownCounter1β Pin [Down]
- Connect βUpDownCounter1β Pin [Min Reached] to βTFlipFlop1β pin [Reset]
- Connect βUpDownCounter1β Pin [Out] to βIntegerMultiSource1β Pin [In]
- Connect βIntegerMultiSource1β Pin [0] M5 Stack ATOM Matrix > βFill Screen1β Pin [Clock]
- Connect βIntegerMultiSource1β Pin [1] M5 Stack ATOM Matrix > βText Field1β Pin [In]
- Connect βIntegerMultiSource1β Pin [2] M5 Stack ATOM Matrix > βText Field1β Pin [Clock]



















Step 6: Generate, Compile, and Upload the Code
In Visuino, at the bottom click on the βBuildβ Tab, make sure the correct port is selected, then click on the βCompile/Build and Uploadβ button.

Step 7: Play
If you power the Atom ESP32 modules, and press Button on the Atom Lite then the Atom Matrix should start to Countdown.
Congratulations! You have completed your project with Visuino. Also attached are the Visuino project files for Sender and Receiver, that I created for this Tutorial, you can download it and open it in Visuino: https://www.visuino.eu