ESP32-S3 AMOLED Smartwatch UI | Digital + Analog Clock using SquareLine Studio & LVGL Arduino IDE

Video Description

ESP32-S3 AMOLED Smartwatch UI | Digital + Analog Clock using SquareLine Studio & LVGL Arduino Download the code, project template folder, and other resources: Early access available for patrons. https://www.patreon.com/posts/esp32-s3-amoled-130341471 Read the Article: https://www.electroniclinic.com/how-to-make-digital-analog-watch-using-squareline-studio-and-lvgl-arduino/ Related Videos: Part1: ESP32-S3 AMOLED Touch Display Unboxing & Setup with LVGL + SquareLine Studio https://youtu.be/qk07w-M2Fus Part3: ESP32-S3 Touchscreen GUI Project with SquareLine Studio | Control Loads & Monitor Temperature https://youtu.be/0gjDKmbgJfs Smart bracelet for couples https://youtu.be/uGiCRqA0f0I Andonstar Digital Microscope: https://youtu.be/KOa9TGLLyL8 MaTouch ESP32-S3 AMOLED with Touch 1.8” FT3168 "Product Official Link" https://www.makerfabs.com/matouch-esp32-s3-amoled-with-touch-1-8-ft3168.html Support me on Patreon and get access to hundreds of projects: https://www.patreon.com/ElectroniClinic Project Description: ***** This is Part 2 of my ESP32-S3 AMOLED Watch series, where I continue working with the MaTouch ESP32-S3 board and its 1.8” FT3168 touch display. In this in-depth tutorial, you will learn how to build both digital and analog watches from scratch using SquareLine Studio and LVGL (Light and Versatile Graphics Library); all without using an external RTC module. What You will Learn in This Video: How to display real-time date and time by syncing your ESP32-S3 with the NTP server (pool.ntp.org), including setting time zones and handling UTC offsets without Daylight Saving Time. How to break down the time into hours, minutes, seconds, and the date (day, month, year), then display it on screen using LVGL labels. Design and implement multiple interactive screens (e.g., a main screen, digital watch screen, and analog watch screen) and navigate between them using swipe gestures. Create a digital watch UI with custom seven-segment fonts. Learn how to import fonts, create multiple font styles (e.g., large font for hours, medium for minutes, small for seconds), and apply them to different labels. Add a separate date label using a built-in font to demonstrate how to mix and match font types in the same screen. How to design an analog clock using Photoshop-created PNG assets. Learn to layer the background watch face image with rotating hour, minute, and second hands using LVGL image widgets and animation. Implement gesture-based screen switching in SquareLine Studio for a seamless user experience; e.g., swipe left to go to the next screen, swipe right to return. Modify and extend the Arduino code to sync time, handle string formatting with sprintf, and update label values in real time. All visual components, including fonts and images, are imported and managed using SquareLine Studio, while the logic and real-time functionality are handled through Arduino programming and LVGL widget updates. Whether you are building your first custom watch interface or leveling up your ESP32-S3 display projects, this tutorial gives you everything you need from UI design to code implementation. ***** Product Links: ***************** MaTouch ESP32-S3 AMOLED with Touch 1.8” FT3168 https://amzn.to/45lyQMd Andonstar AD407 Pro Digital Microscope https://amzn.to/3Wypi9P DISCLAIMER: This video and description contain affiliate links, which means that if you click on one of the product links, I will receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for your support! **************** For more Projects and tutorials, visit my Websites https://www.electroniclinic.com/ Follow me on Instagram: https://www.instagram.com/electroniclinic/ Follow my Facebook Page, Electronic Clinic: https://web.facebook.com/profile.php?id=100063900156958 Follow my Facebook Group, Arduino Projects: https://web.facebook.com/groups/190031841821771 Email: [email protected] #esp32project #squarelineStudio #lvgl