Developing Embedded GUI with SquareLine Studio [2/2]

Подписаться 32 тыс.

Просмотров 57 тыс.

50% 1

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

Наука

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@ThatProject Год назад

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

@squarelinestudio Год назад

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

@muhammadshahzaib3813 Год назад

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

@allacmc 8 месяцев назад

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

@inventorj 8 месяцев назад

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

@bahmanniknam1856 Год назад

Thanks for uploading such a good LVGL tutorial post

@MrJoelLive Год назад

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

@ThatProject Год назад

I'm happy to hear that.

@Rees3901Gmail Год назад

Excellent. keep up the good work 👍

@ThatProject Год назад

Hey Liam, thanks for your support!

@VehanLandman Год назад

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

@nicoladellino8124 Год назад

Very nice video,THX.

@bardenegri21 Год назад

Really cool

@jlcamry Год назад

nice tutorial

@sylvance_theone5738 Год назад

That is so cool

@bobbygintz3305 Год назад

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.

@marcop3517 2 месяца назад

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.

@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 Год назад

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

@deanstarman1694 Год назад

Excellent

@armanfarzin6989 Год назад

Axcellent

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

@williangomesarruda2972 Год назад

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.

@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 Год назад

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

@marcelo329524 4 месяца назад

Valeu!

@allacmc 8 месяцев назад

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.

@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 Год назад

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.

@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 Год назад

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!

@hilfsbereit1437 3 месяца назад

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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-b_4m1A3A2yw.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.

@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 Год назад

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.

@akrommuhammad4028 3 месяца назад

wow

@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 Год назад

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.

@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 Год назад

If you see my tutorial video in detail, you'll know I set the Color Depth to 16-bit. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-b_4m1A3A2yw.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.

@UnknownDiver 11 месяцев назад

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/

@vietle-cf1ue Год назад

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

@xuanphuho5174 5 месяцев назад

how to you create new font text ? help me please

@ThatProject 5 месяцев назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-b_4m1A3A2yw.htmlsi=WM-kl7-4DQVjSFiw&t=383 Have you checked this part?

@thekashifkhan Год назад

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.

@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 Год назад

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

@fadyfaheem Год назад

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?

@poclab 5 месяцев назад

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? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zwZkcsAiNk0.htmlsi=1VQGXN2lCLDcxkTt

@xce24 Год назад

There is no simple external keystroke tutorial

@ThatProject Год назад

Relevance to this project???

@theangelofspace155 7 месяцев назад

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.