{"id":15737,"date":"2023-09-06T10:22:25","date_gmt":"2023-09-06T04:52:25","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=15737"},"modified":"2023-09-06T10:24:04","modified_gmt":"2023-09-06T04:54:04","slug":"stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 55| LVGL object"},"content":{"rendered":"<div class=\"boldgrid-section color4-background-color color-4-text-contrast bg-background-color\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-lg-1 col-md-12 col-sm-12 col-xs-12\"><\/div>\n<div class=\"col-lg-9 col-md-12 col-xs-12 col-sm-12\">\n<p class=\"\" style=\"text-align: center;\">&nbsp;<\/p>\n<h1 class=\"\" style=\"text-align: center; font-size: 35px; line-height: 50px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000080;\"><strong>LVGL object<\/strong><\/span><\/h1>\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<div>\n<div class=\"bg-hr bg-hr-16 color2-color\" style=\"border-style: solid; border-width: 0px 0px 2px; box-shadow: #cecece 0px 0px 0px 0px inset;\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">LVGL is an open-source graphics library written in C that provides a set of functions and widgets to create user interfaces for various platforms, including microcontrollers, development boards, and other embedded systems.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">An &#8220;object&#8221; in LVGL refers to a graphical element or widget that can be displayed on the screen and interacted with by the user. LVGL provides a variety of pre-built objects\/widgets that can be used to create a wide range of UI elements.<\/span><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 25px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>LVGL object<\/b><\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">In LVGL, the basic building blocks of a user interface are the objects, also called Widgets.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">For example, a Button, Label, Image, List, Slider, Switch, Checkbox, Keyboard, Chart or Text area or just a base object.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">All objects are referenced using a lv_obj_t pointer as a handle.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">This pointer can later be used to set or get the object\u2019s attributes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">For example, button and label both are lvgl objects of type lv_obj_t, but button objects may carry some unique attributes that label objects may not have.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">\u2018Base object\u2019 is also a lvgl object or a widget that doesn\u2019t carry any special attributes.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">Please note that all the points discussed here are taken from the <\/span><a style=\"color: #000000;\" href=\"https:\/\/docs.lvgl.io\/latest\/en\/html\/index.html\"><span style=\"font-weight: 400;\">LVGL official documentation<\/span><\/a><span style=\"font-weight: 400;\">, specifically <\/span><a style=\"color: #000000;\" href=\"https:\/\/docs.lvgl.io\/8.3\/_downloads\/39cea4971f327964c804e4e6bc96bfb4\/LVGL.pdf\"><span style=\"font-weight: 400;\">version 8.3<\/span><\/a><span style=\"font-weight: 400;\">. For more detailed information, it is recommended to refer to the LVGL documentation.<\/span><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In LVGL, each object (widget) has a set of attributes that define its appearance, behavior, and other characteristics.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">These attributes can be divided into two main categories: Basic attributes and Special attributes.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<ul class=\"\" style=\"font-size: 20px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li><span style=\"color: #000080;\"><b>Basic Attributes:<\/b><\/span><\/li>\n<\/ul>\n<ol class=\"\">\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">Applies to all objects of types lv_obj_t<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">You can set\/get these attributes with lv_obj_set_.. And lv_obj_get_..functions.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li aria-level=\"2\"><span style=\"color: #000080;\"><b>Example:<\/b><\/span><\/li>\n<\/ul>\n<ol class=\"\">\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Position (x, y):<\/b><\/span><span style=\"font-weight: 400;\"> The x and y coordinates that define the object&#8217;s position on the screen relative to its parent. The top-left corner of the parent is the reference point (0,0).<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Size (width, height)<\/b><\/span><span style=\"font-weight: 400;\"><span style=\"color: #ff0000;\">: <\/span>The width and height of the object. It determines the object&#8217;s dimensions on the screen.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Style:<\/b><\/span><span style=\"font-weight: 400;\"> The visual appearance of the object, such as color, font, border, background, etc. LVGL allows you to customize the style of each object to match your desired design.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><b><span style=\"color: #ff0000;\">Parent:<\/span> <\/b><span style=\"font-weight: 400;\">Each object belongs to a parent container (such as a screen, window, or list). The parent-child relationship helps organize the objects in a hierarchical structure.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Event Handler:<\/b><\/span><span style=\"font-weight: 400;\"> Each object can have event handlers associated with it. These handlers are functions that get called when specific events occur on the object, such as a button press, slider value change, etc.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Hidden: <\/b><\/span><span style=\"font-weight: 400;\">A flag that determines whether the object is visible on the screen (true) or not (false). You can use this attribute to show or hide objects dynamically.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><b><span style=\"color: #ff0000;\">Clickable:<\/span> <\/b><span style=\"font-weight: 400;\">Determines whether the object can be clicked or interacted with by the user (true) or not (false).<\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li aria-level=\"1\"><span style=\"color: #000080;\"><b>Special Attributes:<\/b><\/span><\/li>\n<\/ul>\n<ol class=\"\">\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">The object types have special attributes too. For example, a slider has<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"font-weight: 400; color: #000000;\">Minimum and maximum values<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"font-weight: 400; color: #000000;\">Current value<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li aria-level=\"2\"><span style=\"color: #000080;\"><b>Example:<\/b><\/span><\/li>\n<\/ul>\n<ol class=\"\">\n<li style=\"list-style-type: none;\">\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"list-style-type: none;\">\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Text:<\/b><\/span><span style=\"font-weight: 400;\"> For text-based objects like labels, buttons, and text inputs, this attribute stores the content or label displayed on the object.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Value:<\/b><\/span><span style=\"font-weight: 400;\"> For objects like sliders, spin boxes, and other widgets that represent a value, this attribute stores the current value of the object.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Options:<\/b><\/span><span style=\"font-weight: 400;\"> For objects like dropdowns and lists, this attribute holds the list of available options that the user can choose from.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Checked:<\/b><\/span><span style=\"font-weight: 400;\"> For objects like checkboxes and switches, this attribute stores whether the object is currently checked (true) or unchecked (false).<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Image Source:<\/b><\/span><span style=\"font-weight: 400;\"> For image objects, this attribute contains the image data or path to the image file that should be displayed.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Action:<\/b><\/span><span style=\"font-weight: 400;\"> Some objects may have special actions associated with them, such as calling a function when the object is pressed or activated.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Range:<\/b><\/span><span style=\"font-weight: 400;\"> For objects like sliders, progress bars, and gauges, this attribute defines the minimum and maximum values allowed for the object.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Alignment:<\/b><\/span><span style=\"font-weight: 400;\"> For text-based objects, this attribute determines the alignment of the text within the object (e.g., left, center, right).<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"3\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><b>Scrollbar:<\/b><\/span><span style=\"font-weight: 400;\"> For scrollable objects, this attribute controls the visibility and behavior of the scrollbar.<\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">For these special attributes, every object type may have unique API functions.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<figure id=\"attachment_15740\" aria-describedby=\"caption-attachment-15740\" style=\"width: 453px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-15740\" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/09\/Figure-1.png\" alt=\"Figure 1.RGB Mixer - LVGL objects\" width=\"453\" height=\"390\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png 729w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1-300x258.png 300w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><figcaption id=\"caption-attachment-15740\" class=\"wp-caption-text\">Figure 1.RGB Mixer<\/figcaption><\/figure>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\"><span style=\"color: #000000;\">In Figure 1, we can observe three sliders. Sliders have special attributes such as range, starting value(0), ending value (here&nbsp; like 255)( also known as Max and Min values). These attributes are referred to as &#8216;special&#8217; because they provide unique functionalities specific to each object type.&nbsp;<\/span><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">For instance, buttons may have their own set of special attributes, while labels may have different ones. Each object type in LVGL has its own distinct special attributes. For instance, sliders have their specific API functions to manipulate these attributes. If you wish to modify these special attributes, you can refer to the widget section in the documentation. There, you will find the relevant APIs to change (i.e., set or get) the specific attributes for that particular object type.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>A screen object<\/b><\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">When you register a display driver with lvgl, lvgl creates a \u2018screen\u2019 object of type <\/span><span style=\"color: #993366;\"><b>lv_obj_t<\/b><\/span><span style=\"font-weight: 400;\">.<\/span><\/span><\/li>\n<li><span style=\"font-weight: 400; color: #000000;\">This screen object is a parent object to which you can add your application-specific child objects.<\/span><\/li>\n<li><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">The screen object is associated with the display object of type <\/span><span style=\"color: #993366;\"><b>lv_disp_t.<\/b><\/span><\/span><\/li>\n<li><span style=\"font-weight: 400; color: #000000;\">There will be one display object for each physical display. For example, if you are using 2 physical&nbsp; displays, there may be 2 display objects. LVGL provides dedicated APIs to change the properties of the display<\/span>\n<ul>\n<li><span style=\"color: #993366;\"><b>lv_disp_set_rotation()<\/b><\/span><\/li>\n<li aria-level=\"2\"><span style=\"color: #993366;\"><b>lv_disp_set_default()<\/b><\/span><\/li>\n<li><span style=\"color: #000000;\"><b><span style=\"color: #993366;\">lv_disp_get_default()<\/span> <\/b><span style=\"font-weight: 400;\">and many<\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">Each display can have many screen objects,&nbsp; and the current active one is accessed by the field <\/span><span style=\"color: #993366;\"><b>act_scr <\/b><\/span><span style=\"font-weight: 400;\">of the display object<\/span><b>.<\/b><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">You can manipulate screen objects by these APIs.<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">Get the active screen <\/span><span style=\"color: #993366;\"><b>lv_scr_act()<\/b><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">Load screen <\/span><span style=\"color: #993366;\"><b>lv_scr_load(scr1)&nbsp;<\/b><\/span><\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">In Figure 2, you&#8217;ll notice the <\/span><span style=\"color: #993366;\"><b>lv_disp_t<\/b><\/span><span style=\"font-weight: 400;\"> structure, which includes a field called <\/span><span style=\"color: #993366;\"><b>act_scr<\/b><\/span><span style=\"font-weight: 400;\"> (active screen). This field represents the currently displayed screen on this particular display. Additionally, you can attach multiple screens to a display, creating an array of screen objects. To switch to a new screen, you can utilize a specific function designed for this purpose.<\/span><\/span><\/p>\n<figure id=\"attachment_15741\" aria-describedby=\"caption-attachment-15741\" style=\"width: 708px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-15741\" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/09\/Figure-2.png\" alt=\"LVGL objects\" width=\"708\" height=\"393\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2.png 1820w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-300x166.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-1024x568.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-768x426.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-1536x852.png 1536w\" sizes=\"(max-width: 708px) 100vw, 708px\" \/><figcaption id=\"caption-attachment-15741\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Figure 2. Currently active screen<\/span><\/figcaption><\/figure>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Widgets&nbsp;<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">You can create many widgets for your application.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In the documentation, there are many Core widgets like button, canvas, checkbox, dropdown menus, images, label, line, sliders, switch, etc. All these are Core&nbsp; widgets and also there are some special widgets. You have to refer to the documentation to understand the APIs related to these widgets.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<figure id=\"attachment_15742\" aria-describedby=\"caption-attachment-15742\" style=\"width: 790px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-15742 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/09\/Figure-3.png\" alt=\"Figure 3. Widgets \" width=\"790\" height=\"445\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-3.png 1920w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-3-300x169.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-3-1024x576.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-3-768x432.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-3-1536x864.png 1536w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-3-800x450.png 800w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><figcaption id=\"caption-attachment-15742\" class=\"wp-caption-text\">Figure 3. Widgets<\/figcaption><\/figure>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">For example, if you want to understand how to create a button widget, you should refer to the &#8216;Button&#8217; section. In this section, they explain how a button looks, its properties, its parts, and the APIs used to handle buttons.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Widgets are nothing but lvgl objects of type lv_obj_t. A base object is also a widget, which only has basic properties like coordinates, parent, style, etc.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">In object-oriented thinking, a <\/span><span style=\"color: #993366;\"><b>base object<\/b><\/span><span style=\"font-weight: 400;\"> is like the base class from which all other objects in LVGL are inherited.<\/span><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">The <\/span><span style=\"color: #993366;\"><b>base object<\/b><\/span><span style=\"font-weight: 400;\"> can be directly used as a simple widget: it\u2019s nothing more than a rectangle.<\/span><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000080;\"><b>Exercise 003: RGB Mixer<\/b><\/span><\/p>\n<ol class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">Test using the simulator<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">Test on hardware<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">Create a new STM32CubeIDE<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">Add all the required peripherals using IDE\u2019s device configuration tool, LVGL and LVGL display, touchscreen drivers as explained in the previous exercise<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400; color: #000000;\">Copy simulator tested code and test on the hardware&nbsp;<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">&nbsp;Let\u2019s do this exercise in Following article.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 18px; line-height: 29px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000080;\"><strong>FastBit Embedded Brain Academy Courses<\/strong><\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/fastbitlab.com\/course1\">https:\/\/fastbitlab.com\/course1<\/a><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<\/div>\n<div class=\"col-lg-2 col-md-12 col-sm-12 col-xs-12\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; LVGL object &nbsp; LVGL is an open-source graphics library written in C that provides a set of functions and widgets to create user interfaces for various platforms, including microcontrollers, development boards, and other embedded systems. An &#8220;object&#8221; in LVGL refers to a graphical element or widget that can be displayed on the screen and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15740,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[],"class_list":["post-15737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>LVGL Objects: Widgets, Attributes, Screen object<\/title>\n<meta name=\"description\" content=\"Discover the world of LVGL objects and widgets, their basic and special attributes, screen objects, and how to create various UI elements\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LVGL Objects: Widgets, Attributes, Screen object\" \/>\n<meta property=\"og:description\" content=\"Discover the world of LVGL objects and widgets, their basic and special attributes, screen objects, and how to create various UI elements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/\" \/>\n<meta property=\"og:site_name\" content=\"FastBit EBA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/fastbiteba\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-06T04:52:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-06T04:54:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"729\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"FastBitLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:site\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"FastBitLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/\"},\"author\":{\"name\":\"FastBitLab\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\"},\"headline\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 55| LVGL object\",\"datePublished\":\"2023-09-06T04:52:25+00:00\",\"dateModified\":\"2023-09-06T04:54:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/\"},\"wordCount\":1294,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-1.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/\",\"name\":\"LVGL Objects: Widgets, Attributes, Screen object\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-1.png\",\"datePublished\":\"2023-09-06T04:52:25+00:00\",\"dateModified\":\"2023-09-06T04:54:04+00:00\",\"description\":\"Discover the world of LVGL objects and widgets, their basic and special attributes, screen objects, and how to create various UI elements\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-1.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-1.png\",\"width\":729,\"height\":627,\"caption\":\"Figure 1.RGB Mixer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 55| LVGL object\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"name\":\"FastBit EBA\",\"description\":\"Your Online Academy of Embedded Systems\",\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\",\"name\":\"FastBit EBA\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"width\":640,\"height\":640,\"caption\":\"FastBit EBA\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/fastbiteba\\\/\",\"https:\\\/\\\/x.com\\\/fastbiteba\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fastbit-embedded-brain-academy-b3167b124\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCa1REBV9hyrzGp2mjJCagBg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\",\"name\":\"FastBitLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"caption\":\"FastBitLab\"},\"description\":\"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"LVGL Objects: Widgets, Attributes, Screen object","description":"Discover the world of LVGL objects and widgets, their basic and special attributes, screen objects, and how to create various UI elements","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/","og_locale":"en_US","og_type":"article","og_title":"LVGL Objects: Widgets, Attributes, Screen object","og_description":"Discover the world of LVGL objects and widgets, their basic and special attributes, screen objects, and how to create various UI elements","og_url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/","og_site_name":"FastBit EBA","article_publisher":"https:\/\/www.facebook.com\/fastbiteba\/","article_published_time":"2023-09-06T04:52:25+00:00","article_modified_time":"2023-09-06T04:54:04+00:00","og_image":[{"width":729,"height":627,"url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png","type":"image\/png"}],"author":"FastBitLab","twitter_card":"summary_large_image","twitter_creator":"@fastbiteba","twitter_site":"@fastbiteba","twitter_misc":{"Written by":"FastBitLab","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#article","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/"},"author":{"name":"FastBitLab","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d"},"headline":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 55| LVGL object","datePublished":"2023-09-06T04:52:25+00:00","dateModified":"2023-09-06T04:54:04+00:00","mainEntityOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/"},"wordCount":1294,"commentCount":0,"publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/","url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/","name":"LVGL Objects: Widgets, Attributes, Screen object","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#primaryimage"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png","datePublished":"2023-09-06T04:52:25+00:00","dateModified":"2023-09-06T04:54:04+00:00","description":"Discover the world of LVGL objects and widgets, their basic and special attributes, screen objects, and how to create various UI elements","breadcrumb":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#primaryimage","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1.png","width":729,"height":627,"caption":"Figure 1.RGB Mixer"},{"@type":"BreadcrumbList","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-55-lvgl-objects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fastbitlab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 55| LVGL object"}]},{"@type":"WebSite","@id":"https:\/\/fastbitlab.com\/blog\/#website","url":"https:\/\/fastbitlab.com\/blog\/","name":"FastBit EBA","description":"Your Online Academy of Embedded Systems","publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fastbitlab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fastbitlab.com\/blog\/#organization","name":"FastBit EBA","url":"https:\/\/fastbitlab.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","width":640,"height":640,"caption":"FastBit EBA"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/fastbiteba\/","https:\/\/x.com\/fastbiteba","https:\/\/www.linkedin.com\/in\/fastbit-embedded-brain-academy-b3167b124\/","https:\/\/www.youtube.com\/channel\/UCa1REBV9hyrzGp2mjJCagBg"]},{"@type":"Person","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d","name":"FastBitLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","caption":"FastBitLab"},"description":"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries."}]}},"_links":{"self":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/15737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/comments?post=15737"}],"version-history":[{"count":5,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/15737\/revisions"}],"predecessor-version":[{"id":15794,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/15737\/revisions\/15794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media\/15740"}],"wp:attachment":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media?parent=15737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/categories?post=15737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/tags?post=15737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}