M5Stack Core ESP32 - Get Time and Date From the Internet

by RonFrtek in Circuits > Arduino

342 Views, 0 Favorites, 0 Comments

M5Stack Core ESP32 - Get Time and Date From the Internet

M5Stack Core ESP32 - Get Time and Date From the Internet

In this tutorial we will learn how to get the date and time from NIST TIME server using M5Stack Core ESP32 and Visuino,

Watch the video!

What You Will Need

2023-04-22_10-13-47.jpg
VisuinoAdvrtisemenESPNowESP32C3-1.jpg
Wifi-1-icon.png


Start Visuino, and Select the M5 Stack Core Board Type

select-board-uno.jpg
M5 Stack Core.jpg

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 Core" as shown on Picture 2

WiFi Setup

2023-04-22_10-18-32.jpg
2023-04-22_10-19-15.jpg
2023-04-22_10-20-00.jpg
2023-04-22_10-21-09.jpg
2023-04-22_10-21-35.jpg
2023-04-22_10-21-56.jpg

Select M5 Stack Core and in the editor Modules>WiFi>Access Points, click on [...] button, so that "Access points " window will open.In this editor drag the WiFi access point to the left side.

  • In the properties window Under "SSID" put the name of your WiFi Network
  • Under "Password" put the access password for your WiFi network
  • Close the "Access points" window
  • On the left in editor select Modules>Wifi>Sockets, click on [...] button, so that "Sockets" window will open Drag the TCP/IP Client from right to the left side, then Under Properties window set port: 37 and host: time-c-g.nist.gov
  • Close the "Sockets" window


In Visuino Add Components

2023-04-22_10-23-28.jpg
FW3BZGYK5YP43JG.jpg
F503IBZK5YP43JI.jpg
2023-04-22_10-25-33.jpg
2023-04-22_10-26-03.jpg
  • Add "Pulse Generator" component
  • Add "Internet Time Protocol" component
  • Add "Delete Right Sub Text" component
  • Add "Delete Left Sub Text" component
  • Add "Split/Parse Text" component


If you want to learn more about the "Split/Parse Text" component, checkout this amazing Tutorial The magic of Split Parse Text Component

In Visuino Set Components

2023-04-22_10-36-11.jpg
2023-04-22_10-36-37.jpg
2023-04-22_10-28-56.jpg
2023-04-22_10-30-55.jpg
2023-04-22_10-33-05.jpg
2023-04-22_11-13-32.jpg
2023-04-22_11-15-23.jpg
2023-04-22_11-18-19.jpg
2023-04-22_11-18-41.jpg
2023-04-22_11-18-55.jpg
2023-04-22_11-20-51.jpg
  • Select "PulseGenerator1" and in the properties window set frequency to 0.1166667
  • Select "DeleteRightText1" and in the properties window set Length to 8
  • Select "SplitText1" and in the properties window set "Text" to: %0  %1 <<There are 2 spaces


  • Double click on the "SplitText1" and in the Elements window Drag 2X "Text Element" to the left side
  • Close the Elements window

Select M5 Stack Core and in the editor Modules>TFT Display>Elements, click on [...] button, so that "Elements" window will open.

  • In the Elements window drag "Text Field" to the left side and in the properties window set "Fill Color" to clBlack, "Horizontal Align" to thaCenter, "Size" to 12, "X" to 20
  • Select "Elements" and click on the 3 dots button, in the New Elements window drag "Font" to the left side and in the properties window set "Font" to Adafruit\Org_01
  • Close the Elements window


  • In the Elements window drag another "Text Field" to the left side and in the properties window set "Fill Color" to clBlack, "Horizontal Align" to thaCenter, "Size" to 5, "X" to 20 and "Y" to 100
  • Select "Elements" and click on the 3 dots button, in the New Elements window drag "Font" to the left side and in the properties window set "Font" to Adafruit\Org_01
  • Close all the Elements windows

In Visuino Connect Components

2023-04-22_11-24-12.jpg
Core-internet-time.png
  • Connect "PulseGenerator1" pin [Out] to "InternetTime1" pin [In]
  • Connect "InternetTime1" pin [Socket] to "M5 Stack Core" >TCP Client1 pin [In]
  • Connect "InternetTime1" pin [Out] to "DeleteRightText1" pin [In]
  • Connect "DeleteRightText1" pin [Out] to "DeleteLeftText1" pin [In]
  • Connect "DeleteLeftText1" pin [Out] to "SplitText1" pin [In]
  • Connect "SplitText1" > Text Element1 pin [Out] to "M5 Stack Core" > TFT Display > Text Field1 pin [In]
  • Connect "SplitText1" > Text Element1 pin [Out] to "M5 Stack Core" > TFT Display > Text Field1 pin [Clock]
  • Connect "SplitText1" > Text Element2 pin [Out] to "M5 Stack Core" > TFT Display > Text Field2 pin [In]
  • Connect "SplitText1" > Text Element2 pin [Out] to "M5 Stack Core" > TFT Display > Text Field2 pin [Clock]



Generate, Compile, and Upload the Code

core-compile.png

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.

Play

If you power the M5 Stack Core, it will connect to the internet and the display should start showing the date and time from the NIST server

.You can also experiment with other servers that you can find here https://tf.nist.gov/tf-cgi/servers.cgi

Congratulations! You have completed your Internet Time project with Visuino. Also attached is the Visuino project, that I created for this Tutorial. You can download and open it in Visuino: https://www.visuino.eu