[Tutorial] Building a simple UI with Squareline Studio to use on a microcontroller

in this video I want to show you how you can build a simple UI using Square line studio and upload it to an esp32 or any other capable microcontroller to use it on a display I will use a round gc9 a01 display as it is the one I was using for my project I initially never intended to do tutorials on YouTube but because it took me this long to figure everything out due to the lack of proper tutorials on the matter I have decided to make an exception squareline studio is a simple UI editor based on the lvgl graphics library that can autogenerate boilerplate code for you and makes UI creation a lot simpler in my opinion first of all download Square line Studio from the link in the description it's free for personal use but you will need to create an account create a new project and choose AO as your platform in my case I will choose 240x 240 pixels a round display and 16 bits of color depth this one took me a while to figure out as I initially had a depth of 32 bits which caused the display to just show wide keep in mind that these settings May differ depending on the display you are using next create your youri in my case I will just do the simple Gorge consisting of two images to keep things short and did not include the design process as you will probably want to design your own UI anyways once this is done go to export and click on create template project as destination choose your aino folder which is typically located in your documents you can of course also choose any other destination but I like to keep everything together this will also set a path for your export so every time you change something in your UI you can just hit export UI files and don't have to reexport the whole project together with libraries in order for the code to work correctly with your chosen microcontroller you will have to adjust some settings go to the folder you just exported then to libraries and then to TFT espi there are two possible approaches to configure the library correctly you can either open user setup. with a text editor of your choice comment out the standard driver and select the driver you are using in my case gc9 a01 search for the correct pin out of your microcontroller and uncomment that section or you can open user setup select. comment out the standard user setup. and search for the correct combination of your microcontroller and display in my case it's this line here that needs to be uncommented in the folder user setups you can now search for the file name that you just uncommented and look at the standard configuration for the pins in the case of this specific display that I'm using the Miso pin is not needed so I commented it out the pin naming might differ from what is written on your display but that's not a problem muzi is the same as SDA andk is the same as SC the rest should be named the same way here you can also o see a wiring diagram of an esp32 devkit V1 in combination with the display to interact with the UI I also wired up a potentiometer as input now it's finally time to open your Rd first of all you will need to change your Sketchbook location so that the libraries from Square line Studio are imported correctly for that go to file then preferences and change the SK Sketchbook location to the previously exported project folder in your Sketchbook there should now only be one sketch visible called UI open the Sketchbook up and you will see the autogenerated code from squareline Studio that you can now add your own features to in my case I also removed the touch input function as my display does not support touch but you can leave it in as well to interact with the images we added in the UI you will need the following code change the name to whatever you called your asset and put R UI uncore in front of it now we can change the rotation of the pointer in relation to the connected [Music] potentiometer I hope this video was helpful to you some things may differ in your setup but I'm confident that this example should be easy to expand on the code will be available in a GitHub reposit that you can find in the description below see you in the next [Music] one

Channel: Philipp Thalhammer

Views: 7,706

Keywords: ESP32, SquarelineStudio, LVGL, GC9A01, UIDesign, ESP32Tutorial, SquarelineStudioTutorial, ESP32DisplayProject, RoundDisplayESP32, GC9A01Tutorial, LVGLTutorial, ArduinoIDE, ESP32Programming, GraphicalUserInterface, IoTProjects, ESP32LVGL, UIDevelopment, ESP32TouchDisplay, SquarelineLVGL, ArduinoGraphics, ESP32GUI, IoTInterfaceDesign, MicrocontrollerProjects, ESP32Development, ESP32ScreenTutorial, SquarelineStudioLVGL, ESP32IoTProjects, ArduinoDisplayProject, ESP32EmbeddedDesign

Id: erAK6WZFebs

Length: 5min 15sec (315 seconds)

Published: Tue Feb 20 2024