Developing Embedded GUI with SquareLine Studio [2/2]
Ғылым және технология
ESP32-S3 GPS Speedometer with BN-880Q
In the previous video, we finished the basic hardware configuration with the ESP32-S3-based WT32-SC01 PLUS and BN-880Q GPS module.
This video explains in detail how to complete an embedded GUI using Square Line Studio. After working on the UI through SquareLineStudio, you can export it as a c-type code. You can take this and add it to your source code to complete the overall screen configuration. Even in resource-poor MCUs, we can create very good graphics. If you need an embedded GUI, I think this will be very important.
*Timestamps
0:00 - Developing Embedded GUI
1:26 - MCU Application Design
2:59 - SquareLine Studio Tutorial
25:00 - Using Exported UI Code
29:56 - Outro: The future of embedded GUIs?
[Let's build a GPS Speedometer with ESP32-S3 and BN-880Q(GPS, Compass) [1/2]]
• Let's build a GPS Spee...
[How good is it? "WT32-SC01 Plus" with ESP32-S3!]
• How good is it? "WT32-...
[SquareLine Studio]
squareline.io/
[WT32-SC01 Plus]
amzn.to/49kYcZg
[BN-880Q]
amzn.to/3FVuKxQ
[MX 1.25mm Male Female Connector Kit]
amzn.to/3Wo5bv1
[Project GitHub]
github.com/0015/ThatProject/t...
OLD GPS Project with NodeMCU
[Part 1. NodeMCU(ESP8266) | GPS | ILI9488 - Showing the Latitude and Longitude on Display]
• NodeMCU(ESP8266) | GPS...
[Part 2. NodeMCU(ESP8266) | GPS | ILI9488 - Showing Google Map with Device Position on Display🗺️]
• NodeMCU(ESP8266) | GPS...
[Part 3. NodeMCU(ESP8266) | GPS | CSV Data Logging - GPS Tracker (feat. GPS Visualizer)🛰️]
• NodeMCU(ESP8266) | GPS...
#LVGL #Squareline #GUI #ESP32S3 #GPS #Speedometer #BN880Q #ThatProject
Пікірлер: 78
For more projects - youtube.com/@ThatProject That Project Github Repository - github.com/0015/ThatProject Join FB Group - facebook.com/groups/138965931539175
Always appreciate your LVGL tutorials. There is not much over the KZread on this topic. Thanks for uploading.
Amazing tutorial! I hope we will see similar high quality videos in the future too. :)
Great video but got a bit rushed at the end when bringing the code across to the IDE and changing the code to actually make it work.
Love the OC map background! Thanks for this video.. helped me a lot on my latest project
Thanks for uploading such a good LVGL tutorial post
Congratulations on the video, I loved the content and used it as a reference to do my own project here.
Thank you for this!! Amazing stuff. I accidentally order the SC01 without know the Plus was available 😂
Excellent. keep up the good work 👍
@ThatProject
Жыл бұрын
Hey Liam, thanks for your support!
Thank you so much for this instruction. It really helped me out to get my project working.
@ThatProject
Жыл бұрын
I'm happy to hear that.
That is so cool
Really cool
Very nice video,THX.
nice tutorial
Excellent
Axcellent
Thank you!
@williangomesarruda2972
Жыл бұрын
Would be very interesting if you could post a vídeo with more details with the way that the data is send to the UI, for example how to read an value and show in the screen, for begginers.
If you can do a quick tutorial how to read data from analogique and add timer or counter down with LVGL squareline software that will be very very helpful 🙏
Congratulations, you are the only source of information regarding the programming of this display. One piece of advice: I have a WT32-SC01 (V3.3), what should I change in the .ino file?
@ThatProject
Жыл бұрын
I have read your email and have sent you the graphic part of WT32-SC01.
Valeu!
Excellent demo!! Thank you. Would you consider also showing building and running this on the esp-idf?
@ThatProject
Жыл бұрын
You can use the UI code from Square Line studio on both Arduino IDE and ESP-IDF. Just make sure other components like GPS should be rewritten for ESP-IDF.
What an awesome video! Super helpful! Thank you so much for putting in the time. I'm using this little board as a custom wall mounted robotic arm controller, and I've got it just about working! Quick question for you, where in the world did you find the pinout for the available GPIO pins and other breakout pins? I've looked everywhere! Any chance you could post a link?
@ThatProject
Жыл бұрын
Hey Matt, Thank you for your support. Are you looking for a datasheet of WT32-SC01 Plus? This is the only document they have released. (Chinese) doc.smartpanle.cn/_static/espboard/ESP32S3/ZX3D50CE02S-USRC-4832/ZX3D50CE02S-USRC-4832.pdf
@scarabe-ing
Жыл бұрын
Hello Matt, there is an EN version there : www.wireless-tag.com/wp-content/uploads/2022/11/WT32-SC01-Plus-V1.3-EN.pdf
Interesting project, but it's a bit too complicated to follow once you ported the code over to the ESP32. Maybe a simpler project with more emphasis on porting the code and explaining all the functions and classes... Thanks..
@ThatProject
Жыл бұрын
I agree with you. This first focused on GUI creation with SquareLine Studio. I think the code part of LVGL needs to be dealt with in more detail.
For the love of God, how did your Arduino compilation go so quickly? Was this video edited? Or is there some technique?
@ThatProject
8 ай бұрын
haha. It's just an edited video. It's sloooooow.
Hi, thank you very much for the content, I'm having a issue with my st7796 touchscreen, the Y coordinates seems to be swaped, for example, if I do have two buttons, one in the top left and botton lef, when I touch the screen the oposite button that activates , it Seems that the Y min and max is swapped.
@ThatProject
Жыл бұрын
Try this way, data->point.x = y; data->point.y = tft.height() - x;
@williangomesarruda2972
Жыл бұрын
@@ThatProject thank you very much, I was able to invert in the touch config files!
I was wondering where from did you get those gui asset file? Did you design those for yourself or from online resources? Can you link down some resources?
@ThatProject
Жыл бұрын
I made it by my self and you can download it from my project Github.
@muhammadshahzaib3813
Жыл бұрын
@@ThatProject can i ask which tools did you use? Is there any place to download premade gauge with all of their components, like background and foreground. I am working on my own GUI for Indoor Air quality monitor and your videos are helping lot. Keep up the good work. Thanks
@ThatProject
Жыл бұрын
@@muhammadshahzaib3813 I just created the necessary graphic assets using photoshop. I think googling is the best way to find the images you need. Thank you.
Hello, thank you for your video. I have a question. you have placed two labels on top of each other at mph. if I e.g. If you leave the display at 000 mph and 111 mph, then the numbers will no longer fit on top of each other. How can I correct this? The width of 1 and 0 is different. Thank you very much.
@ThatProject
3 ай бұрын
I don't get your situation. kzread.info/dash/bejne/lJNoz5N6Y6SYqdo.htmlsi=xKg3yJrMV4k7Xnhz&t=880 As you can see in my video, I duplicated the 000 label to create the same label. In this case, because all properties are the same, a 100% identical label is added and thus overlaps the existing label. width, height 1 content is automatically sized according to the length of the content. Therefore, if you use the same font, it will be the same size.
wow
While trying to compile SC01Plus_BN880Q_GPS_App_Part2, I keep getting Compilation error: conflicting type qualifiers for 'ui_font_Display24' line 621 of the corresponding sketch, and for the rest of the font sizes (16, 40, 90) also
@ThatProject
Жыл бұрын
It seems to be an error about the font. Are you using the Arduino IDE like in my video? Please check again about the Display Font 16, 24, 40, 90 I used.
@MrOsola
Жыл бұрын
I'm using Arduino IDE 2.0.2
@MrOsola
Жыл бұрын
I'm trying to run the progam referred on Github
@ThatProject
Жыл бұрын
@@MrOsola It's really weird. If you are using LVGL 8.3.3 I think you can use my code without problems.
Hello, Eric. Thanks for your tutorial.i download your full code.but I have compile error ( " LV_COLOR DEPTH SHOULD BE 16-BIT TO MATCH SCOTLAND STUDIOS").Can you please help me fix it ?
@ThatProject
Жыл бұрын
If you see my tutorial video in detail, you'll know I set the Color Depth to 16-bit. kzread.info/dash/bejne/lJNoz5N6Y6SYqdo.html so, your LVGL configuration should also be set to the same 16-bit color depth.
@annoorkhan4219
Жыл бұрын
@@ThatProject hello Eric , thanks for your quick response.actully I downloaded your project from GitHub.so do I have it open it in square line and make it 16 bit colour?
@ThatProject
Жыл бұрын
@@annoorkhan4219 Well, you don't have to because it's already under 16-bit color depth. All my code is using 16-bit color depth. Check your LVGL config.
@annoorkhan4219
Жыл бұрын
@@ThatProject can you please specify what I have to change in config?
@ThatProject
Жыл бұрын
@@annoorkhan4219 Just check the lvgl/src/lv_conf.h if you're working on Arduino IDE.
Is this possible with a rasberrypi as well?
@ThatProject
Жыл бұрын
As far as I know, LVGL can be used on RPI, but there are many more graphics tools available. What project are you going to do with this?
@thekashifkhan
Жыл бұрын
@@ThatProject We are running a UPS Monitoring and Management system which takes the input from a custom design STM board and then uses RPI as a computer. Any recommendation for other tools?
@ThatProject
Жыл бұрын
@@thekashifkhan Mainly RPI-based works in Python or C++, so wouldn't it be better to use a GUI tool like Qt or tkinter? It is also possible to create web-based GUIs if it works as a server.
how to you create new font text ? help me please
@ThatProject
5 ай бұрын
kzread.info/dash/bejne/lJNoz5N6Y6SYqdo.htmlsi=WM-kl7-4DQVjSFiw&t=383 Have you checked this part?
Would a project made with SquareLine be Opensource? Assuming i want to sell an opensource machine programmed with Arduino IDE, where users can edit the code and possibly the GUI as well. Can they do so without the use of the software?
@ThatProject
11 ай бұрын
I'm not sure about the sales part. The code exported from Squareline Studio versions so far is a 100% readable version. Therefore, modifications and additions can be made at the code level without Squareline Studio. But I think this could become impossible at any time depending on their policy. Anyway, I think that projects based on the results of Squareline studio can be opensource projects. (until now)
@UnknownDiver
11 ай бұрын
@@ThatProject So there is nothing in the code actually tying it back to them, nothing obfuscated or using libraries that they own? Interesting. im looking to make an opensource project with advanced GUI but every single options i used in the past like Nextion displays were not opensource and defeats the purpose of the project
@ThatProject
11 ай бұрын
@@UnknownDiver How about discussing this again on the LVGL forum? I think this will be of great help not only to me but also to others. forum.lvgl.io/
How to change button state in arduino ide? Your video is very good and useful, thanks for your interest?
@ThatProject
Жыл бұрын
button state in Arduino IDE? is this for LVGL button or a real hardware button?
@vietle-cf1ue
Жыл бұрын
@@ThatProject i want when real hardware button is pressed, the button in lvgl is also updated according to that button -thank you for replying me 🥰🥰
worth paying for squareline studio?
@ThatProject
Жыл бұрын
It depends on how you use it. You can definitely create a great UI with ease. Why don't you try it with the free version first, unless it's for commercial use?
Hi; ui.c: In function 'ui_Screen1_screen_init': ui.c:88:52: error: 'ui_font_Display24pt' undeclared (first use in this function) ui.c:88:52: note: each undeclared identifier is reported only once for each function it appears in exit status 1 Compilation error: 'ui_font_Display24pt' undeclared (first use in this function) I encountered such an error. I changed the values to 1 for font usage from lv_conf.h, unfortunately it didn't work. #define LV_FONT_MONTSERRAT_24 1 Then I tried adding the font in your example via assets. It gave the same error. I really appreciate you. Thank you for helping me develop my electronics hobby. I will be glad if you help me.
@ThatProject
Жыл бұрын
You don't have to enable "LV_FONT_MONTSERRAT_24" because I don't use it. Please check there is the file ui_font_Display24pt in your project folder. Everything works fine.
@mustafadut8430
Жыл бұрын
@@ThatProject I tried what you said. I may not have expressed it correctly :) " In function 'ui_Screen1_screen_init': error: 'ui_font_Display24pt' undeclared (first use in this function) note: each undeclared identifier is reported only once for each function it appears in " The error points to the following line. " lv_obj_set_style_text_font(ui_Screen1_Label4, &ui_font_Display24pt, LV_PART_MAIN | LV_STATE_DEFAULT); " It gives an error in this part of the code. Help me :)
I saw fps is slow up to 10 It feels that ESP32 just not a good fit to create apps with smooth animations
@ThatProject
5 ай бұрын
That's true. Several attempts were made to increase FPS, but no significant improvement was achieved. How about looking forward to Slint? kzread.info/dash/bejne/rKuOzcWsccy0m5M.htmlsi=1VQGXN2lCLDcxkTt
There is no simple external keystroke tutorial
@ThatProject
Жыл бұрын
Relevance to this project???
It was a good video until you started woeking on the code. Copy and pasting is awful, it would have been better to make another part and type the code if you think it will take more than a few minute. If you are copying and pasting might as well just now show them in the code video at all and just show the final code.