Introducing LVGL's UI Editor (Preview of v0.1)

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ม.ค. 2025

ความคิดเห็น • 83

  • @iliasalaur
    @iliasalaur 23 วันที่ผ่านมา +8

    Very good job guys, been waiting for this moment for couple of years. Incredible that such a wonder as LVGL still remains free and open source.
    Thanks to all collaborators 😊

    • @lvgl
      @lvgl  23 วันที่ผ่านมา +2

      Thank you so much! Trying our best! 😊

  • @MCervi42
    @MCervi42 23 วันที่ผ่านมา +3

    incredible job guys, thank you for providing community with such a great tool like lvgl! we all appreciate your work and truly wish you all the best! thank you!

    • @lvgl
      @lvgl  23 วันที่ผ่านมา

      Thank you! ^^

  • @James-z6x3u
    @James-z6x3u 10 วันที่ผ่านมา +3

    Dear LVGL developers, I've been programming 25 years, and the problem that causes me the most headaches is good UI. Have never found anything that hits that sweet spot across all platforms, from embedded, to the browser. But this actually does! I wanted to say thank you for everything you've done, this is truly amazing.

    • @lvgl
      @lvgl  7 วันที่ผ่านมา

      Thank you for the kind words! :)
      In your sentence "across all platforms, from embedded, to the browser" I understand the "embedded" part but I'm very curious how you mean the "browser" part, as this is an area which we are not focusing actively on. So what is your browser related use case with LVGL?

  • @KrantzThe
    @KrantzThe หลายเดือนก่อน +6

    Very impressed, looking forward starting to play around with it!

    • @lvgl
      @lvgl  หลายเดือนก่อน +1

      Thank you! ^^

  • @simaesthesia
    @simaesthesia 5 วันที่ผ่านมา

    Awesome! Sterling effort. I understand some of the comments about it basically being an XML to C converter (ish) but as a developer I consider the XML approach clean and easily maintainable by people of all levels. Thanks for all your hard work.

    • @lvgl
      @lvgl  9 ชั่วโมงที่ผ่านมา

      Thank yo for the feedback! We feel the same way! 😊

  • @eskibrew
    @eskibrew 29 วันที่ผ่านมา +1

    This looks really interesting! - will look forward to trying it out.

  • @deancleavesmith
    @deancleavesmith หลายเดือนก่อน +1

    Very impressive addition to a great framework

  • @harshitdev546
    @harshitdev546 หลายเดือนก่อน +1

    That's amazing! I had a similar idea to create something like this and was even working on it. I'll try to contribute if I can. Thank you for bringing this tool to life!

    • @kisvegabor
      @kisvegabor หลายเดือนก่อน

      Amazing! Thank you for offering you help! I'm sure that there will be many ways to contribute in the near future ❤

  • @MH-GoL
    @MH-GoL 9 วันที่ผ่านมา

    That is amazing! As a coding guy this is the perfect way for me to get to my ui! What does the "This Widgets are very similar" at 5:50 mean? Can you describe the difference between self made Widgets and the LVGL Widgets?

    • @lvgl
      @lvgl  8 วันที่ผ่านมา +1

      Happy to hear it! ^^ It means that the generated widget also uses LVGL classes, they have a constructor, destructor, event handler, and a struct (e.g. lv_slider_t) where you can store widget specific data.

  • @itsbppradhan
    @itsbppradhan หลายเดือนก่อน +1

    Looks great! But I’m curious, why isn’t there a 60Hz preview option? It would be super helpful for designing smooth animations and transitions. Any plans to add that?

    • @lvgl
      @lvgl  หลายเดือนก่อน

      Of course, animation support is also on the roadmap, but to be honest we are still not sure how to approach them in the best way. We have a few ideas in mind, but nothing is decided yet. What do you exactly mean by 60Hz preview option?

  • @hulryung
    @hulryung หลายเดือนก่อน +1

    It looks very nice. I hope this can work together with coding assistance tools like Cursor and Copilot.

    • @kisvegabor
      @kisvegabor หลายเดือนก่อน +1

      Actually having a textual representation of the UI makes it quite straightforward to use AI tools with it. Even normal chatgpt when it learns our XML.

  • @AndyCheng1017
    @AndyCheng1017 21 วันที่ผ่านมา +1

    I am so curious about XML, Why don't use HTML which is friendly for UI desinger, If I hire a web UI desinger for LVGL project, most of time they only know HTLM

    • @lvgl
      @lvgl  12 วันที่ผ่านมา

      LVGL supports a lot of HTML/CSS like features but there are some differences too. In order to don't limit ourselves to the HTML standard, we have created a HTML-ish XML syntax which has a smooth learning curve for web developers too.
      Although it cannot be seen this video yet, but the XML editor will have a lot of auto complete features to make the development intuitive.

  • @andrewfraser2760
    @andrewfraser2760 หลายเดือนก่อน +1

    I am interested in how many LVGL customers have separate UI design teams. Several companies have tried to go down the route of separating UI design from coding and I can't think of many (any) that still do this.

    • @lvgl
      @lvgl  หลายเดือนก่อน +1

      We have the opposite experience. Even small companies without designers are creating designs in Figma. Maybe these designs are done by engineers or managers, but it's still easier for them to use a tool where there are no technical limitation and they can explore freely.
      So we clearly the emerging trend of using Figma for design.

  • @wizarddrongo
    @wizarddrongo หลายเดือนก่อน +2

    Just adding in again but I think you may wish to give serious consideration to either making a separate UI designer, or incorporating that into this.
    What you’ve effectively done here is build an xml editor that will let coders use xml instead of C to make lvgl UIs.
    That great but that’s NOT what the community is really looking for, nor is it a replacement for square line now you’ve parted ways.
    What pretty much everyone I’ve chatted with has said is “a WYSIWYG editor would be great”. Something with an animation editor/timeline creator cos animating by hand in code is just horrible, a full on point-and-click ui designer so I can see in real time where my widgets are, not need to change the code, recompile, load onto the device/simulator, look at it, go back to the code, move 2 pixels up, etc etc
    I’m not being critical of the work done here. It’s very good for what it is. But it’s not what is needed. An xml-to-c bridge is possibly what some companies would like for their pipeline, but a lot of actual users would love a UI editor, like square line tried and failed to be. Something that can read your code, display the UI on screen, and turn that UI into new code once you’re done moving stuff around.

  • @i-yangh1384
    @i-yangh1384 16 วันที่ผ่านมา

    thank you so much and again this is amazing! do you consider adding micropython support?

    • @lvgl
      @lvgl  12 วันที่ผ่านมา +1

      Yes! ^^ We are contact with core Micropython developers who will helps us with the Micropython code export part.

    • @i-yangh1384
      @i-yangh1384 11 วันที่ผ่านมา

      @@lvgl fantastic!

  • @juliangonzalez9501
    @juliangonzalez9501 6 วันที่ผ่านมา

    where can I download and try the editor?

    • @lvgl
      @lvgl  9 ชั่วโมงที่ผ่านมา

      We have published v0.1 yesterday. See here: th-cam.com/video/gCxBAK9EByA/w-d-xo.html

  • @vics-videos
    @vics-videos หลายเดือนก่อน

    Wow, Gábor! That's pretty impressive! What is it that is displaying the application window? An executable or browser?

    • @lvgl
      @lvgl  หลายเดือนก่อน

      Thank you Vic :)
      It's Electron + Node.JS based.

  • @unknowndiver1855
    @unknowndiver1855 26 วันที่ผ่านมา +1

    I see a lot of uncertainty about the business model on the forums, hopefully the free version will be good enough for small businesses, or you can allow a low cost monthly subscription. The Squareline studio comes up to like 700$ USD (Paid at once) for a year which is pretty hard to justify when trying to develop a product, theres a thousand other things to pay for, such as real physical hardware, production tooling , labor etc. My subscription is ending in 3 months and i really really dont want to be hostage to a high-cost software.

    • @lvgl
      @lvgl  25 วันที่ผ่านมา

      We have added a description about the planned business model here: github.com/lvgl/lvgl_editor?tab=readme-ov-file#business-model
      So basically what SquareLine knows now should be included in the free version. We would like to ask a licensing fee for high-end features such as collaboration features, multi-language support, etc. These are typically required for larger companies where a few thousand USD is not an issue.

  • @Oshan_Dissanayaka
    @Oshan_Dissanayaka 28 วันที่ผ่านมา

    Wooah, that's Great! Can we create TFT display UIs with this IDE easily? I couldn't create my TFT Display UIs easily with Squareline Studio. It always gives legal library compatibility issues.

    • @lvgl
      @lvgl  27 วันที่ผ่านมา

      > Can we create TFT display UIs with this IDE easily?
      That's the goal 😊
      What was the exact problem with SquareLine? I'd like to make sure that we don't do the same mistake. 😀

  • @AnothersProject
    @AnothersProject 10 วันที่ผ่านมา +1

    Its good to see we have new ui editor but im preferre squarline studio more, for example im a professional game developer that works with unity engine and for ui i can make whole a ui pagr under 5 minute, i think its better to instead of code we have professional drag and drop editors to make ui, although im conider to make one for my self that generates lvgl code, i gonna happy if i can help lvgl team

    • @lvgl
      @lvgl  7 วันที่ผ่านมา +1

      Thank you for sharing your honest opinion! We needed to realize that there is no one size fit all solution. That is we can't create a tool which fits for everyone. As SquareLine is already a low code/no code tool, we wanted to address a different market.
      Also thank you for offering your help. In few days we will release v0.1. It'd be amazing if you could try it out and tell us what about think. The more feedback we hear the better the tool we can develop. :)

  • @MrZANE42
    @MrZANE42 หลายเดือนก่อน

    I think it would be valuable if there was a objects area with each possible object (widget type, style etc.) was available as a list with some description,
    with the built in widgets there could also be a small example preview and small descriptive text (What it's used for etc.).
    Make it searchable and context aware, ie. shows only relevant objects depending on where you are in the xml file.
    If you drag the object into the xml area the basic XML tag could be created.
    This would make it A LOT more easier for new users and also easy the mental load on more experienced users.
    A nice compromise when not doing full WYSIWYG IMHO.

    • @lvgl
      @lvgl  หลายเดือนก่อน

      We are thinking about something similar too. However a context sensitive menu might work better. If you click inside the tag you will be prompted with the possible widgets/components that you can create. If you click inside e.g. a slider you will see the possible slider properties. Same for the styles.
      Regarding the description, we are perfectly on the the same page. Help description should be built in to the editor. E.g. if you hover on a slider tag a style property a description tool tip should appear.

    • @MrZANE42
      @MrZANE42 หลายเดือนก่อน

      @@lvgl I think you ideas are fine, and would make coding a lot more efficient, but they don't solve the main problem for newbies, simply not knowing what widgets are available and what is possible with them.
      Examples of course helps to a degree, but going back and forth isn't very effective. So I still think that a side pane with widgets and information might have a value.
      What do you think?

    • @kisvegabor
      @kisvegabor หลายเดือนก่อน

      I think we are on the same page. I hope we can add something like this in the next release.

  • @Zero-oq1jk
    @Zero-oq1jk หลายเดือนก่อน

    So is LVGL ready for build also Desktop apps for Linux/Windows not just embedded? I want to consider it as lightweight alternative for Gnome.

    • @lvgl
      @lvgl  หลายเดือนก่อน

      It's certainly doable. LVGL has a lot drivers built in (DRM, Wayland, Windows, etc.) It's not as complete as Gnome for desktop development, but for embedded-like application LVGL's is definitely a good choice.

    • @Zero-oq1jk
      @Zero-oq1jk 28 วันที่ผ่านมา

      @@lvgl I understood it this way, that LVGL was primary created for embedded applications. Few years back, when I was searching for desktop GUI and LVGL didn't support desktop very well. But know I see this is changing. Gnome is heavy. I prefer something lightweight. LVGL seems to be perfect. Now I saw, that even you yourself build desktop apps with LVGL. Am I right? In any way, Thank you!

    • @lvgl
      @lvgl  28 วันที่ผ่านมา +1

      @@Zero-oq1jk I see now! We definitly planning to add some more desktop features, such as feature rich text editor. with hot key support, but it's for 2025 or 2026.
      Note that the editor is not created with LVGL but with Electron, Node.JS and React. The preview part is compiled to WebAssembly using Emscripten, so it's really LVGL but running as part of a webpage. github.com/lvgl/lv_web_emscripten/

  • @wizarddrongo
    @wizarddrongo หลายเดือนก่อน +1

    UI editor is great, but really, the biggest problem with LVGL is the lack of docs. I just spent 3 days coding a custom widget and it's insanely hard when there's no docs, no examples, no emo code, and no support for C at all.
    If anyone else reads this and is also stuck, the lvgl_conf.h file needs the "allow private api" setting enabled, or custom widgets don't work.

    • @lvgl
      @lvgl  หลายเดือนก่อน +4

      Thank you for the quick feedback!
      I think you are right. Now we don't have a dedicated docs to create a new widget. My approach was that the existing widgets serve as good examples to get started, but it's definitely not replacing a detailed docs. We will prioritize it!

    • @wizarddrongo
      @wizarddrongo หลายเดือนก่อน

      @@lvgl thanks; my example was just an example tho of the state of the lvgl documentation - what is there is good, but the docs are missing in places and the examples code is quite often not well documented either so you're left to sort of try everything until you stumble upon what works. More examples, better code documentation and maybe even detailed example projects would be helpful. Eg. here's how to draw things, here's how you create a custom widget, here's how a full example project looks - Adafruit do this really well and I se in LVGL so much potential, and better docs are at the heart of that.
      Also, I'm going to released my widget code onto the forums once I've got it working better. I can see (after exhaustive searching) only TWO other custom widgets with actual code for any version of LVGL. Mine is a circular keyboard, since so many LVGL uses will use a circular display, like smartwatches and gauges, having a radial keyboard seems like a no brainer...

    • @kisvegabor
      @kisvegabor หลายเดือนก่อน +1

      ​@@wizarddrongo
      Docs: Noted, thank you.
      Your widgets: I'd love to see your circular keyboard! 😍

    • @Zero-oq1jk
      @Zero-oq1jk 28 วันที่ผ่านมา +1

      What do you mean by "no support for C at all"? Isn't LVGL all C?

    • @wizarddrongo
      @wizarddrongo 23 วันที่ผ่านมา +1

      @@Zero-oq1jk I meant there's no support for custom widgets in C in teh docs - the micropython docs have an example code but there's nothing in the C.

  • @plainoldcheese
    @plainoldcheese 28 วันที่ผ่านมา

    Is this opem source?

    • @lvgl
      @lvgl  28 วันที่ผ่านมา

      Nope, the editor itself is closed, however the XML loading is already part of LVGL: docs.lvgl.io/master/details/other-components/xml.html

  • @johnrichardson1949
    @johnrichardson1949 หลายเดือนก่อน

    I’m new but don’t understand the difference and relationship between this and squareline studio…

    • @lvgl
      @lvgl  หลายเดือนก่อน +1

      Amazing question: at the beginning of 2024 we have decided the part our ways with SquareLine because we couldn't agree on some conceptual and business related matter. However, we didn't want to let you without an official LVGL editor tool so we started to explore the possibilities and eventually begun the development.
      It seems we need to create a follow up video to answer the great questions that you have asked here :)

  • @yaghiyahbrenner8902
    @yaghiyahbrenner8902 หลายเดือนก่อน

    Yes a breakaway from Squareline studio.

    • @kisvegabor
      @kisvegabor หลายเดือนก่อน

      In a good or bad way? 😄

  • @kevinschlossser7858
    @kevinschlossser7858 หลายเดือนก่อน +1

    You make this statement.. " You can recompile the editor to make it contain the new widgets' code." No I can't because it is closed source. so that's not an option.

    • @lvgl
      @lvgl  หลายเดือนก่อน +1

      The part you can recompile is LVGL + Your widgets + A few internal helper functions. The word "Editor" was really inaccurate here. "Preview" or "Engine" could have been better. Sorry the confusion.

    • @penguin1714
      @penguin1714 8 วันที่ผ่านมา

      Wait its not OSS? Thats disappointing to see. Not because I need it to be free but because it now means I must rely on upstream bugfixes and support. Lame

  • @kevinschlossser7858
    @kevinschlossser7858 หลายเดือนก่อน +5

    UI editors are supposed to be mostly point and click to change things. This seems like it's mostly typing xml code with a preview window and not a whole lot of point and click.
    Your largest user base is going to be people that are not experienced in writing a whole lot of code. This is why the point and click needs to be first and foremost and the code editor should be second. It looks like you are placing priority on the code editor which is basically making an LVGL specific IDE at this point and not really a UI editor.

    • @carlosdiaz4535
      @carlosdiaz4535 หลายเดือนก่อน +2

      As far as I understood this tool is intended for developers (who can code), and figma is meant for UI designers.

    • @lvgl
      @lvgl  หลายเดือนก่อน +2

      We might add a basic mouse handling to reposition and resize the widgets, however priority is clearly not this.
      While we were developing LVGL UI's we have faced the limitations of writing code (you need to re-compile/re-flash to see the result) and the drag-and-drop UI editors (not developer friendly and limited features).
      These are some of the issues that we wanted to solve. Having a textual editing with good auto completion to create widgets and adjust properties is not that different form a property panel in other tools, but it gives you a lot more freedom:
      - Simple version tracking
      - Easily adjustable hierarchy
      - Simple AI integration
      - Use of already existing tooling (XML libs)

    • @wizarddrongo
      @wizarddrongo หลายเดือนก่อน

      @@lvgl visual code studio does all of that pretty well.
      What suqareline did was provide a UI editor where I could see my widgets, move them around whenever necessary, add screens and make simple code functions and export it all ready to actually code in a proper IDE.
      What utility does this offer any lvgl user who doesn’t need or care about xml, but needs a replacement for squareline?

    • @iliasalaur
      @iliasalaur 23 วันที่ผ่านมา +6

      You are wrong. LVGL by it's very concept requires you to be able to code. And LVGL is mostly used by developers, to make their lives easier when creating embedded UIs. The guys from LVGL did a great job

    • @lvgl
      @lvgl  23 วันที่ผ่านมา +1

      @iliasalaur We also think that there is no one size fit all. It seems to us there are these categories of users:
      1. Designer: They have nothing to do with LVGL -> Use Figma
      2. Hobbyist without developer skills: Need no-code/low-code tools -> Use SquareLine or EEZ Studio.
      3. Hobbyist with technical skills: Use LVGL as it is or the free version of our tool to speed up up the development
      4. Small companies: Use LVGL and the free version of our tool to speed up up the development
      5. Larger companies with designers: Use LVGL and buy a licence for this tool for better collaboration features
      6. Enterprise companies: Use LVGL and plugin-able version of our tool for deep customization
      I think most of questions are about group #2. In short
      - To be honest we don't see a big business value in this group
      - We are good at understanding and serving developers needs, so this group would be a new and somewhat unknown to us
      Therefore our focus in mostly on #3-6, and providing a best effort level support for #2.

  • @marcbotnope1728
    @marcbotnope1728 หลายเดือนก่อน

    looks to me that someone recently invested in LVGL and my question is how the "cash grab" is going to look.

    • @lvgl
      @lvgl  หลายเดือนก่อน +1

      Not at all!
      We really got some money but not an investment. In exchange for their money a few chip vendor and OEM companies could request features in the tool. We think that it's the best possible scenario: we got financial support + feedback from industry leading companies.
      FYI, one of these partners requested the free version too.

    • @wizarddrongo
      @wizarddrongo หลายเดือนก่อน +1

      I’m guessing a company who have a design team that use figma, and have existing products using an XML pipeline for their UI implementation. Nice that they’ve invested to get their tool built, but the community would much prefer a WYSIWYG UI editor.

    • @ugetridofit
      @ugetridofit 10 วันที่ผ่านมา

      @@lvgl I agree with @wizarddrongo. The community would much prefer a WYSIWYG UI editor. To not have that is just plain silly, and will dramatically slow down development.