Lines Matching full:the
11 Similar to many other parts of LVGL, the concept of setting the
21 - x=0; y=0 coordinate means the top-left corner of the parent plus the left/top padding plus border…
22 - width/height means the full size, the "content area" is smaller with padding and border width
40 :percentage: Specify size as a percentage of the size of the Widget's
41 parent or of itself, depending on the property.
44 to avoid the overhead of the call to :cpp:func:`lv_pct`, you can
45 also use the macro :cpp:expr:`LV_PCT(x)` to mean the same thing.
47 percent* so that if/when the size of the parent container (or
51 :contained content: Specify size as a function of the Widget's children. The macro
53 meaning: it means to set the width and/or height of a Widget
85 model. A Widget's "box" is built from the following parts:
87 :bounding box: the width/height of the elements.
88 :border width: the width of the border.
89 :padding: space between the sides of the Widget and its children.
90 :margin: space outside of the Widget (considered only by some layouts)
91 :content: the content area which is the size of the bounding box reduced by the border width …
94 …:alt: The box models of LVGL: The content area is smaller than the bounding box with the padding a…
96 The border is drawn inside the bounding box. Inside the border LVGL
99 The outline is drawn outside the bounding box.
116 LVGL doesn't recalculate all the coordinate changes immediately. This is
117 done to improve performance. Instead, the Widgets are marked as "dirty"
118 and before redrawing the screen LVGL checks if there are any "dirty"
121 In other words, if you need to get the coordinate of a Widget and the
123 the coordinates. To do this call :cpp:func:`lv_obj_update_layout`.
125 The size and position might depend on the parent or layout. Therefore
126 :cpp:func:`lv_obj_update_layout` recalculates the coordinates of all Widgets on
127 the screen of ``obj``.
136 As it's described in the :ref:`coord_using_styles` section,
138 under the hood every style coordinate related property is stored as a
140 in the local style of the Widget.
143 However, there is one case in which you need to be aware of the
144 implementation. If the style(s) of a Widget are removed by
156 the earlier set coordinates will be removed as well.
162 /* The size of obj1 will be set back to the default in the end */
164 lv_obj_remove_style_all(widget1); /* It removes the set sizes */
167 /* widget2 will have 200;100 size in the end */
182 To simply set the x and y coordinates of a Widget use:
190 By default, the x and y coordinates are measured from the top left
191 corner of the parent's content area. For example if the parent has five
192 pixels of padding on every side the above code will place ``obj`` at
193 (15, 25) because the content area starts after the padding.
195 Percentage values are calculated from the parent's content area size.
212 In other words, every futire x and y setting for that Widget will be relative to the
215 Example: Position Widget (10,20) px relative to the center of its parent:
222 /* Or combine the above in one function... */
239 It's quite common to align a child to the center of its parent,
246 //Has the same effect
249 If the parent's size changes, the set alignment and position of the
261 where ``align`` can be done of the following:
283 does not remember the "anchor" used, and so will not automatically reposition
284 the aligned widget if the reference widget later moves.
286 The following illustration shows the meaning of each "anchor" mentioned above.
297 Sizing the simple way
300 The width and the height of a Widget can be set easily as well:
308 Percentage values are calculated based on the parent's content area
309 size. For example to set the Widget's height to the screen height:
315 The size settings support a special value: :c:macro:`LV_SIZE_CONTENT`. It means
316 the Widget's size in the respective direction will be set to the size of
317 its children. Note that only children on the right and bottom sides will
318 be considered and children on the top and left remain cropped. This
319 limitation makes the behavior more predictable.
322 ignored by the :c:macro:`LV_SIZE_CONTENT` calculation.
324 The above functions set the size of a Widget's bounding box but the
325 size of the content area can be set as well. This means a Widget's
326 bounding box will be enlarged with the addition of padding.
330 lv_obj_set_content_width(widget, 50); /* The actual width: padding left + 50 + padding right */
331 lv_obj_set_content_height(widget, 30); /* The actual width: padding top + 30 + padding bottom */
333 The size of the bounding box and the content area can be retrieved with
334 the following functions:
346 Extending the click area
360 Under the hood the position, size and alignment properties are style
361 properties. The above described "simple functions" hide the style
362 related code for the sake of simplicity and set the position, size, and
363 alignment properties in the :ref:`local styles <style_local>` of the Widget.
365 However, using styles to set the coordinates has some great advantages:
367 - It makes it easy to set the width/height/etc. for several Widgets
368 together. E.g. make all the sliders 100x10 pixels sized.
369 - It also makes possible to modify the values in one place.
370 - The values can be partially overwritten by other styles. For example
371 ``style_btn`` makes the Widget ``100x50`` by default but adding
372 ``style_full_width`` overwrites only the width of the Widget.
373 - The Widget can have different position or size depending on state.
376 - Style transitions can be used to make the coordinate changes smooth.
390 position setting. However, to keep the LVGL API lean, only the most
391 common coordinate setting features have a "simple" version and the more
401 Let's say the there are 3 buttons next to each other. Their position is
405 One way to achieve this is by setting a new Y coordinate for the pressed
427 This works, but it's not really flexible because the pressed coordinate
428 is hard-coded. If the buttons are not at y=100, ``style_pressed`` won't
450 Translation is applied from the current position of the Widget.
452 Percentage values can be used in translations as well. The percentage is
453 relative to the size of the Widget (and not to the size of the parent).
454 For example :cpp:expr:`lv_pct(50)` will move the Widget with half of its
457 The translation is applied after the layouts are calculated. Therefore,
460 The translation actually moves the Widget. That means it makes the
461 scrollbars and :c:macro:`LV_SIZE_CONTENT` sized Widgets react to the position
471 Similarly to position, a Widget's size can be changed relative to the
472 current size as well. The transformed width and height are added on both
473 sides of the Widget. This means a 10 px transformed width makes the
476 Unlike position translation, the size transformation doesn't make the
478 :c:macro:`LV_SIZE_CONTENT` will not react to the transformed size. Hence, size
500 especially useful if the size is set by percentage or
510 lv_obj_add_style(widget, &style_max_height, LV_STATE_DEFAULT); //Limit the height to 200 px
512 Percentage values can be used as well which are relative to the size of
513 the parent's content area.
522 …lv_obj_add_style(widget, &style_max_height, LV_STATE_DEFAULT); //Limit the height to half parent h…
535 Layouts can update the position and size of a Widget's children. They
536 can be used to automatically arrange the children into a line or column,
539 The position and size set by the layout overwrites the "normal" x, y,
542 There is only one function that is the same for every layout:
543 :cpp:func:`lv_obj_set_layout` ``(widget, <LAYOUT_NAME>)`` sets the layout on a Widget.
544 For further settings of the parent and children see the documentation of
545 the given layout.
556 Both are heavily inspired by the CSS layouts with the same name.
567 - :cpp:enumerator:`LV_OBJ_FLAG_IGNORE_LAYOUT` The Widget is simply ignored by the layouts. Its coor…
568 …OBJ_FLAG_FLOATING` Same as :cpp:enumerator:`LV_OBJ_FLAG_IGNORE_LAYOUT` but the Widget with :cpp:en…
590 … /* Will be called automatically if it's required to reposition/resize the children of "obj" */
594 the update callback. For example: