GUI Guider Knowledge Base

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

GUI Guider Knowledge Base

Discussions

Sort by:
The following document describes the migration process of a GUI Guider project based on the older LVGL library 8.3.10, to the newer LVGL library 9.2.1 that is supported on GUI Guider v1.9.0+. We will take the CoffeePourAnimation example project as a basis to illustrate this process. For demonstrative purposes, we will create the project on GUI Guider 1.8.0, which was the last GUI Guider version that only supported LVGL 8.3.10, and migrate it to GUI Guider 1.10.0, currently the latest version of GUI Guider, that supports LVGL 9.2.1. In this case, we will use a MIMXRT1060-EVKC with a RK043FN66HS-CTG display. With the project created, the very first thing we have to make sure to do is generate the GUI C code using the ‘Generate Code’ button: Note that the project created will be based on the SDK version 2.16.000: This SDK version is what contains the LVGL libraries, which are v8.3.10. If we want to upgrade the LVGL libraries to the latest v9.2.1, we need to update the SDK as well. But simply importing the project to a newer GUI Guider version will not update the SDK. This will just update the project file, without changing any of the underlying software package. In order to make sure both the SDK and the LVGL libraries get updated, we will use MCUXpresso IDE. Here, we can create a new base project that uses the SDK version 25.06.00 and replace only the GUI with the one of the older projects. This will ensure we have a v9.2.1 LVGL based project, with the GUI from the previous project. Why use specifically v25.06.00 of the SDK? Because this is the version of SDK that the latest GUI Guider (v1.10.0) uses to create projects based on LVGL v9.2.1. In order to do this, first import the LVGL example for the board we are using (in this case, the MIMXRT1060-EVKC). This new project will be used to ensure the newest LVGL library is in place: Make sure to import the example project named: "lvgl_guider". The resulting project will be created, along with the following folders and files. The actual GUI, is stored on the “custom” and “generated” folders, so these are the folders that have to be replaced to bring the old GUI on the new project: In order to replace them, navigate to both the original GUI Guider project folder, as well as the MCUXpresso lvgl_guider example project folder. Delete the ‘custom’ and ‘generated’ folders from the lvgl_guider example, and drag-and-drop these same folders from the GUI Guider project into the MCUXpresso example project: After doing this, the new ‘generated’ and ‘custom’ folders will not be detected as source folders for the project, since they were copied from an external project. In order to add them as source folders, navigate to Project Properties > C/C++ General > Paths and Symbols, click on ‘Add Folder…’ and select both ‘custom’ and ‘generated’ folders before clicking OK: After following either of these two processes, the old GUI Guider project will have been updated to the new SDK, which also has the new LVGL 9.2.1 libraries. That said, due to major changes on the APIs of LVGL v8 and v9, building the project will most likely result in compilation errors. Most changes of the LVGL libraries are addressed on the official LVGL documentation, specifically the following migration guide from v8 to v9: Changelog — LVGL documentation The following section will describe the process to address the specific changes from the CoffeePourAnimation example project from LVGL v8.3.10 to v9.2.1.   Adjusting for 9.2.1 LVGL library changes: First of all, if after compiling the project, the following error shows up: fatal error: gui_guider.h: No such file or directory It means that the code generated by GUI Guider was not done correctly. If that is the case, one must repeat the whole process described earlier, making sure to click on the “Generate Code” in C, as mentioned previously. Specifically for this example  CoffeePourAnimation GUI, we get an error stating: fatal error: extra/widgets/animimg/lv_animimg.h: No such file or directory This is because the path to the “lv_animimg.h” header file was changed on LVGL v9. In fact, that LVGL file was also renamed to “lv_animimage.h”. Therefore, we have to change the following line in “gui_guider.h”. From: #include "extra/widgets/animimg/lv_animimg.h" To: #include "src/widgets/animimage/lv_animimage.h"   The next error that shows up is one that is present for all of the image files: fatal error: lvgl/lvgl.h: No such file or directory This is because previously, on LVGL v8, the include path was set to the parent directory of the “lvgl.h” file (meaning that the inclusion of this header file had to be “lvgl/lvgl.h”). This is no longer the case, so we can define the following macro in order to fix the inclusion issue and simplify it to: #include “lvgl.h”. The macro to be defined is LV_LVGL_H_INCLUDE_SIMPLE. In project properties, under C/C++ Build > Settings > Tool Settings > MCU C Compiler> Preprocessor, click on the “Add…” button, and add that macro: After completing this, the next errors that are shown after a compilation are all related to the images of the GUI. There were several format changes on the image headers from LVGL v8 to v9. This means that the “.c” array files that were generated on GUI Guider will no longer be compatible with the new LVGL libraries. Because of this, the images have to be re-converted for LVGL v9.2.1. This can be achieved by using the official LVGL image converter tool, either online here: Image Converter — LVGL, or via a python script found here: lvgl/scripts/LVGLImage.py at master · lvgl/lvgl · GitHub. All of the images used on the GUI should be located under the “import” folder of the main project’s folder location. Once all of the images from the project have been converted to the LVGL v9 format, simply replace the .c array files located under the project folder > generated > images, with the newly generated ones: Although several changes were made to the API of the LVGL library between v8.x and v9.x, LVGL comes with an API map file, that maps new API functions to older ones for retroactive compatibility. As stated on the aforementioned Changelog — LVGL documentation, for example, “lv_disp_... is renamed to lv_display_...”, and the “lv_api_map_v8.h” file addresses this change, so that the old v8 function calls that our GUI uses, will still work on the new v9 LVGL: That said, there might be some exceptions that fly under the radar. In the specific case that we are looking at, it happens on the following line under the “events_init.c” file: lv_animimg_del(guider_ui.coffeePour_animimg_coffee); In this case, the API map file does not currently contain an alias for the new function call of LVGL v9, therefore we have to adjust it manually. This might happen on other functions for specific GUIs being imported. Thankfully MCUXpresso does provide suggestions that might point to the right function to replace them with: Also, the next change is necessary on the “events_init.c” file, which instead of doing a direct call to “animimg1->dsc”, we do it through the following call. From: const void **coffee_imgs = animimg1->dsc; To: const void **coffee_imgs = lv_animimg_get_src(guider_ui.coffeePour_animimg_coffee); Finally, the lv_line_set_points() was changed from using the following arguments on v8: void lv_line_set_points(lv_obj_t *obj, const lv_point_t points[], uint16_t point_num) To these arguments on v9: void lv_line_set_points(lv_obj_t *obj, const lv_point_precise_t points[], uint32_t point_num)​ Therefore, the following change has to be made on “setup_scr_coffeePour.c”. From: static lv_point_t coffeePour_line_right[] = {{0, 0},{0, 180},{0, 90},{120, 90},}; static lv_point_t coffeePour_line_left[] = {{120, 0},{120, 180},{120, 90},{0, 90},}; To: static lv_point_precise_t coffeePour_line_right[] = {{0, 0},{0, 180},{0, 90},{120, 90},}; static lv_point_precise_t coffeePour_line_left[] = {{120, 0},{120, 180},{120, 90},{0, 90},}; With these changes, the CoffePourAnimation GUI Guider project has been migrated from using LVGL v8.3.10 to v9.2.1. Happy migrating!
View full article
GUI Guider v2.0.0 Is Here: Build Embedded UIs Faster   GUI Guider v2.0.0 improves the embedded UI development workflow with a redesigned editor, real-time rendering, updated project structure, and broader platform support. It helps developers move from layout design to integration faster, with fewer context switches along the way.   🚀 Key Enhancements in This Release ✅ A redesigned IDE UI with a more professional look and flexible layout options ✅ A new real-time rendering mechanism for a true what-you-see-is-what-you-get editing experience ✅ A flowchart-style event system designed for complex interaction logic ✅ Figma-to-GUI Guider project import to bridge design and development   1. Redesigned IDE UI The redesigned interface introduces a cleaner, more consistent visual style, making the editor easier to navigate and more comfortable to use during day-to-day development. Customizable layouts let developers organize the workspace around their preferred workflow, helping them access frequently used tools more quickly and edit interfaces more efficiently. Resource management, property configuration, and editing interactions have been streamlined to make common UI development tasks easier to complete.   2. Real-Time Rendering and Instant Simulation GUI Guider v2.0.0 integrates a new rendering mechanism that enables real-time rendering directly in the GUI editor. After modifying the interface, developers can preview the results immediately, reducing the time spent repeatedly generating code and switching contexts. This capability significantly accelerates UI prototyping and interaction validation, especially during fast iteration cycles. 3. Upgraded Property and Style System This release expands property and style configuration, giving developers more control over widget behavior, visual states, and appearance. Developers can enable, adjust, and manage properties, styles, and state settings based on the needs of each project. At the same time, the generated code structure has been further optimized, making it easier to integrate, read, and maintain. 4. New Project Structure GUI Guider v2.0.0 introduces a new folder organization model and project JSON configuration. The project directory is easier to understand, and project metadata is managed in a more consistent way. This structure makes projects easier to maintain as teams collaborate, add features, and expand the UI over time. 5. UI Design in the JSON Editor In addition to visual editing, the new version also supports UI design directly in the JSON editor. This is useful for automated builds, template-based configuration, and advanced engineering workflows where project files need to be reviewed, generated, or updated directly.   6. Visual Event System The event system now uses a flowchart-style visual representation. Conditions and animations can be reused, making the system better suited for building complex UI interaction logic. This approach is more intuitive and also makes debugging and maintenance easier.   7. Figma Design Import GUI Guider v2.0.0 supports converting Figma designs directly into GUI Guider projects. This further connects the workflow from design mockups to editable GUI projects, helping shorten the path between design and development.   8. Graphics Library Upgrade The new version upgrades to LVGL v9.4.0 and supports System Layer, Top Layer, and Bottom Layer capabilities, making it easier to organize UI elements across different layers. 9. Platform and Development Ecosystem Support While maintaining compatibility with existing platforms and development ecosystems, GUI Guider v2.0.0 further improves the project integration experience. It keeps pace with the latest Zephyr 4.4 release, strengthening project integration and version adaptation capabilities. The tool continues to support mainstream NXP embedded product families, including MCX, RW, i.MX RT, and i.MX. It can be seamlessly integrated into existing MCU and MPU projects to meet GUI development needs across a wide range of scenarios. With more stable ecosystem support, developers can spend more time on UI design and feature implementation and less time on integration work.   🚀 Try GUI Guider v2.0.0 and explore a faster workflow for developing embedded UIs. 📥 Resources Download GUI Guider 2.0.0   Visit the NXP website 💬 Community Forum: Join the discussion Follow us for more embedded GUI development tips and product updates!  
View full article
Designing modern, responsive embedded graphical interfaces has never been easier. In this article, we share the complete set of resources from our hands‑on lab focused on building GUIs with NXP GUI Guider and the LVGL graphics engine, using the FRDM‑MCXN947 development board. This guide will help you import the E‑Bike demo, customize screens and events, simulate your UI, and deploy it directly on hardware. 
View full article
HO! HO! HO! GUI Guider 1.10.1 is out now! This version comes with significant ecosystem update including LVGL 9.3.0 and G2D graphics acceleration support for Application processors. Stability and performance were improved also as more platforms integrated. Check out major improvements: - G2D acceleration - multi-touch support including demo - i.MX RT700-EVK - Zephyr 4.2 Try it on your own! http://nxp.com/gui-guider
View full article
The latest version introduces an enhanced project creator, unlocking new possibilities for seamlessly combining boards and predefined templates making application creation easier and more intuitive than ever before. Exciting news also for motor-control enthusiasts - GUI Guider now features advanced motor parameter configuration options, bringing greater flexibility and precision to your development workflow. - New demo - Heterogenous multicore for Real-Time Edge framework - FRDM-IMX91S, i.MX943, i.MX95 - Terminal debug support - GUI xTurbo performance optimizations Try it on your own! https://www.nxp.com/GUI-GUIDER
View full article
GUI Guider 1.8.1 Just released!   This version integrates your NXP account to enhance user experience in content delivery. The new version also improves FreeMASTER integration enabling variable binging to the widgets, and much more:   - EV Charger example application - Widgets and screen statistics - Video player for i.MXRT1160/70 - Yocto Linux BSP upgrade to 6.6.23-2.0.0   Try it on your own https://www.nxp.com/GUI-GUIDER     New IDE function NXP SSO login Seamless simulator run in FreeMASTER Unify generated code style EV charger demo Widgets and screens statistic License change   UX/DX improvement Retry mechanism of read FreeMASTER variable Update the widgets search window expand style Highlight selected image in image window Add the copy event target Add the event trigger editor   SDK and targets Add 800x400 resolution for MultiLanguage and Aircon. Enable video for I.MX RT1160/70 i.MX91 11x11 Upgrade toolchain Upgraded to Linux BSP to 6.6.23-2.0.0 Remove landscape mode of 1280x720 for I.MXRT 1160/11170 Allow input details for ‘other’ option for Survey
View full article
Dear developers, GUI Guider has new version now! In this version, we’ve introduced major updates designed to deliver a more powerful and efficient development experience. Whether you’re working in industrial control, smart home or consumer electronics, these updates will breathe new life into your projects! Key Updates: Support more characters in project name hyphens (-) and at signs (@) are supported in project names from this version. Currently the allowed characters include letters, numbers, underscores (_), hyphens (-), and at signs (@). Custom folder path for code generation Support customizing the path of generated directory, eliminating manual copying operations and improving project development efficiency. Code editor autosave custom code Don't worry about forgetting to save custom code anymore! The new version automatically saves custom code for you. Image converter supports more functions (LVGL v9) Dither mode and stride automatic alignment functions are supported in LVGL v9 image conversion tool. dither mode optimizes the display effect of images, The combination of stride automatic alignment and VGLite GPU further enhances application performance. Industrial demo on MCX: agriculture control Add agricultural control templates that can run smoothly on the FRDM-MCXN947 target board, helping you quickly build a professional industrial control interface. Add Camera and Video support for i.MX 93 (LVGL v9) Camera and Video are supported for i.MX 93 EVK and FRDM-IMX 93 boards. users can develop their multimedia applications refer to the provided demos. New Target boards The version has added support for development boards such as FRDM-IMX91 (LVGL v9) and FRDM-RW612 (LVGL v9), expanding hardware compatibility and meeting more development needs. Add benchmarking demos (LVGL v9) Smart clock demo is added for i.MX RT700 to showcase the powerful graphics acceleration capabilities of VGLite GPU. FlashingImages and LVGLBenchmark demos are added for i.MX RT1060-EVKC to demonstrate the optimization of rendering speed. Why do you choose GUI Guider? Minimalist design and efficient development GUI Guider offers an intuitive drag-and-drop interface design tool, enabling rapid generation of high-quality LVGL code without complex programming. This significantly boosts development efficiency, allowing you to focus on creativity and functional implementation. Keeping up with the latest technology and strong compatibility We continuously add support for the latest hardware platforms and operating systems, ensuring your projects remain at the forefront of technology while effortlessly addressing diverse requirements. Rich examples and templates Whether for industrial applications, smart home appliances, or IoT devices, GUI Guider provides a variety of demos and templates to help you get started quickly, shortening the development cycle from concept to finished product. Get the new version now! Let’s download the latest GUI Guider now and experience these powerful new features! Whether you are a novice or a seasoned developer, GUI Guider will be your reliable assistant on the path of HMI development. Download link:Get GUI Guider 1.9.1 now Video tutorials:GUI Guider Academy Official website:Visit NXP official website Feedback:Community forum Follow us for more development tips and the latest news! GUI Guider, Make graphical interface development easier!
View full article
GUI Guider 1.8.0 is out now! This version comes with the new UI visualizer for Events creation that brings better events flow in your application! Stability, widgets and tool appearance were improved also and much more: - Project export to HTML - Updated example applications - Improved code editor - Added FRDM-MCXN236 - Portrait mode for MCX-FRDM - Removed LVGL v7 Try it on your own https://www.nxp.com/GUI-GUIDER
View full article
The newest version comes with a video converter tool that easily converts video to animation. Now you can play videos on low-resource devices. Also as UI was significantly improved to bring better user experience and ease of use. Among other improvements, GUI Guider comes with a new demo application covering very popular two-wheelers.   Try it on your own at https://www.nxp.com/GUI-GUIDER
View full article
GUI Guider 1.7.0 is out now!   This version brings many changes. One of them is the collaboration of the two most popular MCU tools. GUI Guider now integrates FreeMASTER support. Real-time tuning, especially of motor control applications, is now much more user-friendly. Next, the GUI Guider is expanded to support the latest FRDM-MCXN947 development kits along with the new IPS display from NXP LCD-PAR-S035.     Try it on your own at https://www.nxp.com/GUI-GUIDER   https://www.nxp.com/FRDM-MCXN947 https://www.nxp.com/FREEMASTER https://www.nxp.com/design/design-center/development-boards/...
View full article
  Do you want to try a bigger screen? The new version supports the RPi 7" panel directly connected to i.MX RT1170-EVKB. MPU fans will be also satisfied by adding the QNX operating system for i.MX93 platform! Don't miss major updates: - Smart Watch Demo - enhanced support for round displays - new platforms added - more widget customization options - and much more Try it on your own at https://www.nxp.com/GUI-GUIDER
View full article
📣 Try out the new GUI Guider 1.6.0 on i.MX93!     The new version has been released now, expanding to the world of MPUs! We also utilized new cloud functionality for demo examples. That means all demos are maintained and upgraded independently on application release. You can look forward to new demos during the year! It will pop out in GUI Guider instantly!     Explore the new functionality on your own https://www.nxp.com/GUI-GUIDER    
View full article
GUI Guider 1.5.1 is out now!   In this version, you can design your application much easier way by adding further features. User experience was significantly improved also as stability and performance. Checkout major updates: - Multiple instances of GUI Guider - Moving widgets between screens - 24-bit color depth for i.MX RT1170 - New demos included - and much more Try it on your own at https://www.nxp.com/GUI-GUIDER  
View full article
The newest version of GUI Guider comes with UI and functionality improvements. It is extended by new widgets and tuning options. Also, stability and performance were improved. Let's see the significant updates:   - LottieFiles animations (https://lottiefiles.com/) - MCX N and LPC5506 added - Resource manager utilized - Complex Image Tool - and much more   Try it on your own at https://www.nxp.com/GUI-GUIDER  
View full article
Hey guys   Are you interested to use RK055 LCD mounted on top of EVK? You can print LCD holders on your 3D printer, now. Only 6 screws needed. Check image and files attached.   Mike
View full article
We are pleased to announce that the v1.4.1-GA version of GUI Guider is now available! What is new   UI Development Tool Demo of video (SD) play: i.MX RT1050 Demo of runtime image (SD) decode: i.MX RT1064, LPC54S018M Non-deformation screen preview Display size of imported image Description, type, and doc link in attribute window Move editor's position with mouse Pixel scale in editor window Improved name, default value, and prompt for attributes Submenu of license Prompt of code override Auto focus on new widget in editor Improved mouse-based image rotation feature Auto-detect for custom.c and custom.h Improved robustness and stability Library Data text box widget Calendar: highlight selected date New NPI i.MX RT1040 Toolchain MCUXpresso IDE 11.6.1 MCUXpresso SDK 2.12.1 RTOS Zephyr   Installer & Documentation  https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER      
View full article
Newest release comes with many usability and performance improvements. Some highlights amongst the improvements include: LVGL supported updated to v8.2.0 RT-Thread RTOS support Custom GUI resizing Concept of design style Batch image import New themes Widget shadows Easy widget aligning Screen and image preview And much more… We’ve also added support for LPC54628 external flash storage, landscape mode for i.MX RT1170 and the RK055HDMIPI4MA0 display. https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER
View full article
GUI Guider 1.3.0 is now available for free use on desktop systems and NXP MCU targets at the NXP website: https://www.nxp.com/gui-guider. Now MacOS users can also enjoy the benefits of the tool, joining those on Windows and Linux. Also, developers who want to work in MicroPython can output code directly from the tool and/or run simulations with the push of a button. This release of GUI Guider supports both LVGL 7.10.1 and 8.0.2, includes project creation for MCUXpresso IDE and IAR 9.10.2 and also adds support for Keil development tools (version 5.35). (Note that we will be supporting later versions of LVGL 8.x but do have to follow a little after these releases to allow for testing by our developers.) We have also added a 3D graphics animation and drag-drop tile design widget support. Full details can be found in the Release notes. As always, we encourage you to take GUI Guider for a test drive and give us any feedback at the NXP GUI Guider community space.
View full article
GUI Guider v1.2.0 is released on July 30, this video introduces key new features of the release.  IDE UI: widget search, custom font size Widget: events for list buttons, memory leak check  MCUX SDK 2.10.0, LVGL 7.10.1  Toolchain: MCUX IDE 11.4.0, IAR 9.10.2 New platform: i.MX RT1010, LPC54S018M, LPC55S69 Image converter for VGLite performance improvement  More details is available in https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER. 
View full article
GUI Guider v1.2 released (link)   The latest version of GUI Guider was recently released by NXP. GUI Guider is a user-friendly graphical user interface development tool created by NXP that enables the rapid development of high quality displays with the open-source LVGL graphics library. GUI Guider's drag-and-drop editor makes it easy to utilize the many features of LVGL such as widgets, animations and styles to create a GUI with minimal or no coding at all.     This release of GUI Guider features: New Development Tool capabilities Search library of available LVGL widgets Specify customer font sizes Improved support and documentation of board support without relying on built-in templates New or improved Widgets Widgets and code base updated to work with LVGL 7.10.1 Improved event support Additional memory leak checking feature SDK and IDE Tool alignment Support added for direct programming and code generation for IAR Embedded Workbench Updated to align with MCUXpresso IDE 11.4.9 Updated to align with MCUXpresso SDK 2.10.x (which includes LVGL 7.10.1) HW Acceleration capabilities Image converter for VGLite performance improvement New Device Target Supported i.MX RT1010 LPC54S018M LPC55S69    
View full article