.. |br| raw:: html

   <br/>

.. _lvgl-guide-gui-guider-index:

Using NXP GUI-Guider to build applications
==========================================


Introduction
------------

NXP provides the GUI Guider tool, which can also be used to create applications for i.MX91 and i.MX 95 modules. The GUI Guider is a graphical development tool for UI development, based on the LVGL library.



For more information, how to work with GUI Guider, please go to the  `NXP website <https://www.nxp.com/design/design-center/software/development-software/gui-guider:GUI-GUIDER>`_ .

The GUI Guider allows you edit and to simulate your UI and saves a lot of time that normally has to be spent in writing comlex UI-code.

The tool creates a custom Yocto layer that can be easily integrated into the Yocto build system.

Unfortunately, the generated code does not handle the touch screen. Therfore, before you start code export, please add the following function to /ports/linux/main.c:

.. code-block:: text

   #if LV_USE_EVDEV
   static void lv_linux_init_input_pointer(lv_display_t *disp)
   {
       /* Enables a pointer (touchscreen/mouse) input device
        * Use 'evtest' to find the correct input device. /dev/input/by-id/ is recommended if possible
        * Use /dev/input/by-id/my-mouse-or-touchscreen or /dev/input/eventX
        */
       const char *input_device = getenv("LV_LINUX_EVDEV_POINTER_DEVICE");

       if (input_device == NULL) {
         fprintf(stderr, "please set the LV_LINUX_EVDEV_POINTER_DEVICE environment variable\n");
         exit(1);
       }

       lv_indev_t *touch = lv_evdev_create(LV_INDEV_TYPE_POINTER, input_device);
       lv_indev_set_display(touch, disp);

       /* Set the cursor icon */
       LV_IMAGE_DECLARE(mouse_cursor_icon);
       lv_obj_t * cursor_obj = lv_image_create(lv_screen_active());
       lv_image_set_src(cursor_obj, &mouse_cursor_icon);
       // do not show cursor on touch screen lv_indev_set_cursor(touch, cursor_obj);
   }
   #endif

Insert a call to this function in hal_init(void):

.. code-block:: text

   #if LV_USE_EVDEV
       lv_linux_init_input_pointer(disp);
   #endif


Then do Project -> Export Code -> Yocto in the GUI Guider Tool 


The tool will provide a layer with name meta-gui-guider. Copy that into the sources folder of your Yocto installation.

To add this layer to your image build, open the file conf/bblayers.conf and add the line:

.. code-block:: text

   BBLAYERS += "${BSPDIR}/sources/meta-gui-guider"

in your local.conf, add the lines:


.. code-block:: text

   IMAGE_INSTALL:append = " \
       gui-guider \
   "

You can now build your image as usual with:

.. code-block:: text

   bitbake karo-image-weston


After you have build and downloaded the image to your target, you have to setup a few environment variables to get the application to work:

.. code-block:: text

   export XDG_RUNTIME_DIR=/run/user/1000
   export WAYLAND_DISPLAY=wayland-1
   export LV_LINUX_EVDEV_POINTER_DEVICE="/dev/input/touchscreen0"


The application can be simply started with:

.. prompt::
   :prompts: $

   gui_guider