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

  • @ThatProject
    @ThatProject Жыл бұрын

    For more projects - youtube.com/@ThatProject That Project Github Repository - github.com/0015/ThatProject Join FB Group - facebook.com/groups/138965931539175

  • @muhammadshahzaib3813
    @muhammadshahzaib3813 Жыл бұрын

    Always appreciate your LVGL tutorials. There is not much over the KZread on this topic. Thanks for uploading.

  • @squarelinestudio
    @squarelinestudio Жыл бұрын

    Amazing tutorial! I hope we will see similar high quality videos in the future too. :)

  • @marcop3517
    @marcop35172 ай бұрын

    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.

  • @inventorj
    @inventorj8 ай бұрын

    Love the OC map background! Thanks for this video.. helped me a lot on my latest project

  • @bahmanniknam1856
    @bahmanniknam1856 Жыл бұрын

    Thanks for uploading such a good LVGL tutorial post

  • @allacmc
    @allacmc8 ай бұрын

    Congratulations on the video, I loved the content and used it as a reference to do my own project here.

  • @VehanLandman
    @VehanLandman Жыл бұрын

    Thank you for this!! Amazing stuff. I accidentally order the SC01 without know the Plus was available 😂

  • @Rees3901Gmail
    @Rees3901Gmail Жыл бұрын

    Excellent. keep up the good work 👍

  • @ThatProject

    @ThatProject

    Жыл бұрын

    Hey Liam, thanks for your support!

  • @MrJoelLive
    @MrJoelLive Жыл бұрын

    Thank you so much for this instruction. It really helped me out to get my project working.

  • @ThatProject

    @ThatProject

    Жыл бұрын

    I'm happy to hear that.

  • @sylvance_theone5738
    @sylvance_theone5738 Жыл бұрын

    That is so cool

  • @bardenegri21
    @bardenegri21 Жыл бұрын

    Really cool

  • @nicoladellino8124
    @nicoladellino8124 Жыл бұрын

    Very nice video,THX.

  • @jlcamry
    @jlcamry Жыл бұрын

    nice tutorial

  • @deanstarman1694
    @deanstarman1694 Жыл бұрын

    Excellent

  • @armanfarzin6989
    @armanfarzin6989 Жыл бұрын

    Axcellent

  • @williangomesarruda2972
    @williangomesarruda2972 Жыл бұрын

    Thank you!

  • @williangomesarruda2972

    @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.

  • @abdelnacer7721
    @abdelnacer7721 Жыл бұрын

    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 🙏

  • @samuelesandrini4787
    @samuelesandrini4787 Жыл бұрын

    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

    @ThatProject

    Жыл бұрын

    I have read your email and have sent you the graphic part of WT32-SC01.

  • @marcelo329524
    @marcelo3295245 ай бұрын

    Valeu!

  • @bobbygintz3305
    @bobbygintz3305 Жыл бұрын

    Excellent demo!! Thank you. Would you consider also showing building and running this on the esp-idf?

  • @ThatProject

    @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.

  • @matteaton9566
    @matteaton9566 Жыл бұрын

    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

    @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

    @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

  • @Tony770jr
    @Tony770jr Жыл бұрын

    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

    @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.

  • @allacmc
    @allacmc8 ай бұрын

    For the love of God, how did your Arduino compilation go so quickly? Was this video edited? Or is there some technique?

  • @ThatProject

    @ThatProject

    8 ай бұрын

    haha. It's just an edited video. It's sloooooow.

  • @williangomesarruda2972
    @williangomesarruda2972 Жыл бұрын

    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

    @ThatProject

    Жыл бұрын

    Try this way, data->point.x = y; data->point.y = tft.height() - x;

  • @williangomesarruda2972

    @williangomesarruda2972

    Жыл бұрын

    @@ThatProject thank you very much, I was able to invert in the touch config files!

  • @muhammadshahzaib3813
    @muhammadshahzaib3813 Жыл бұрын

    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

    @ThatProject

    Жыл бұрын

    I made it by my self and you can download it from my project Github.

  • @muhammadshahzaib3813

    @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

    @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.

  • @hilfsbereit1437
    @hilfsbereit14373 ай бұрын

    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

    @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.

  • @akrommuhammad4028
    @akrommuhammad40283 ай бұрын

    wow

  • @MrOsola
    @MrOsola Жыл бұрын

    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

    @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

    @MrOsola

    Жыл бұрын

    I'm using Arduino IDE 2.0.2

  • @MrOsola

    @MrOsola

    Жыл бұрын

    I'm trying to run the progam referred on Github

  • @ThatProject

    @ThatProject

    Жыл бұрын

    @@MrOsola It's really weird. If you are using LVGL 8.3.3 I think you can use my code without problems.

  • @annoorkhan4219
    @annoorkhan4219 Жыл бұрын

    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

    @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

    @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

    @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

    @annoorkhan4219

    Жыл бұрын

    @@ThatProject can you please specify what I have to change in config?

  • @ThatProject

    @ThatProject

    Жыл бұрын

    @@annoorkhan4219 Just check the lvgl/src/lv_conf.h if you're working on Arduino IDE.

  • @thekashifkhan
    @thekashifkhan Жыл бұрын

    Is this possible with a rasberrypi as well?

  • @ThatProject

    @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

    @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

    @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.

  • @xuanphuho5174
    @xuanphuho51745 ай бұрын

    how to you create new font text ? help me please

  • @ThatProject

    @ThatProject

    5 ай бұрын

    kzread.info/dash/bejne/lJNoz5N6Y6SYqdo.htmlsi=WM-kl7-4DQVjSFiw&t=383 Have you checked this part?

  • @UnknownDiver
    @UnknownDiver11 ай бұрын

    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

    @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

    @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

    @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/

  • @vietle-cf1ue
    @vietle-cf1ue Жыл бұрын

    How to change button state in arduino ide? Your video is very good and useful, thanks for your interest?

  • @ThatProject

    @ThatProject

    Жыл бұрын

    button state in Arduino IDE? is this for LVGL button or a real hardware button?

  • @vietle-cf1ue

    @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 🥰🥰

  • @fadyfaheem
    @fadyfaheem Жыл бұрын

    worth paying for squareline studio?

  • @ThatProject

    @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?

  • @mustafadut8430
    @mustafadut8430 Жыл бұрын

    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

    @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

    @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 :)

  • @poclab
    @poclab5 ай бұрын

    I saw fps is slow up to 10 It feels that ESP32 just not a good fit to create apps with smooth animations

  • @ThatProject

    @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

  • @xce24
    @xce24 Жыл бұрын

    There is no simple external keystroke tutorial

  • @ThatProject

    @ThatProject

    Жыл бұрын

    Relevance to this project???

  • @theangelofspace155
    @theangelofspace1557 ай бұрын

    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.

Келесі