docs: further example fixes

Author: kisvegabor

docs/examples/fonts/font_large_data.c docs/examples/fonts/font_large.cdocs/examples/fonts/font_large_data.c renamed to docs/examples/fonts/font_large.c

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Size: 28 px
  * Bpp: 4
- * Opts: --font /fonts/Montserrat-Medium.ttf -o /fonts/font_large_data.c --size 28 --bpp 4 --format lvgl --no-compress --range 0x20-0x7F
+ * Opts: --font /fonts/Montserrat-Medium.ttf -o /fonts/font_large.c --size 28 --bpp 4 --format lvgl --no-compress --range 0x20-0x7F
  ******************************************************************************/
 
 #ifdef __has_include
@@ -2007,9 +2007,9 @@ static lv_font_fmt_txt_dsc_t font_dsc = {
 
 /*Initialize a public general font descriptor*/
 #if LVGL_VERSION_MAJOR >= 8
-const lv_font_t font_large_data = {
+const lv_font_t font_large = {
 #else
-lv_font_t font_large_data = {
+lv_font_t font_large = {
 #endif
     .get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt,    /*Function pointer to get glyph's data*/
     .get_glyph_bitmap = lv_font_get_bitmap_fmt_txt,    /*Function pointer to get glyph's bitmap*/

docs/examples/preview-bin/lved-runtime.js

@@ -42,8 +42,8 @@ void lv_example_button(void)
     lv_obj_t * screen = lv_screen_active();
     lv_obj_set_flex_flow(screen, LV_FLEX_FLOW_COLUMN);
     lv_obj_set_style_pad_row(screen, 14, 0);
-    lv_obj_set_style_pad_all(screen, 16, 0);
     lv_obj_set_style_flex_cross_place(screen, LV_FLEX_ALIGN_CENTER, 0);
+    lv_obj_set_style_flex_main_place(screen, LV_FLEX_ALIGN_CENTER, 0);
     lv_obj_set_style_flex_track_place(screen, LV_FLEX_ALIGN_CENTER, 0);
 
     /* Plain action button */

docs/examples/preview-bin/lved-runtime.wasm

@@ -28,8 +28,8 @@
 	<view
 		flex_flow="column"
 		style_pad_row="14"
-		style_pad_all="16"
 		style_flex_cross_place="center"
+		style_flex_main_place="center"
 		style_flex_track_place="center"
 	>
 		<!-- 💡 Tap the middle button: it keeps its checked colour until tapped again. -->

docs/examples/screens/lv_example_button.c

@@ -30,14 +30,13 @@ void lv_example_calendar(void)
     }
 
     lv_obj_t * screen = lv_screen_active();
-    lv_obj_set_style_flex_cross_place(screen, LV_FLEX_ALIGN_CENTER, 0);
-    lv_obj_set_style_pad_all(screen, 10, 0);
 
     /* 💡 Use the header dropdowns to change month or year. */
     lv_obj_t * lv_calendar_0 = lv_calendar_create(screen);
-    lv_obj_set_size(lv_calendar_0, 260, 210);
+    lv_obj_set_size(lv_calendar_0, 260, 280);
     lv_calendar_set_shown_year(lv_calendar_0, 2026);
     lv_calendar_set_shown_month(lv_calendar_0, 5);
+    lv_obj_set_align(lv_calendar_0, LV_ALIGN_CENTER);
     lv_calendar_set_today_year(lv_calendar_0, 2026);
     lv_calendar_set_today_month(lv_calendar_0, 5);
     lv_calendar_set_today_day(lv_calendar_0, 17);

docs/examples/screens/lv_example_button.xml

@@ -9,16 +9,21 @@
 -->
 <screen>
 	<styles>
-		<style name="style_cal"
-			bg_color="0x0f172a" bg_opa="100%" text_color="0xe2e8f0" radius="8" />
+		<style name="style_cal" bg_color="0x0f172a" bg_opa="100%" text_color="0xe2e8f0" radius="8" />
 	</styles>
 
-	<view style_flex_cross_place="center" style_pad_all="10">
-
+	<view>
 		<!-- 💡 Use the header dropdowns to change month or year. -->
-		<lv_calendar width="260" height="210"
-			shown_year="2026" shown_month="5"
-			today_year="2026" today_month="5" today_day="17">
+		<lv_calendar
+			width="260"
+			height="280"
+			shown_year="2026"
+			shown_month="5"
+			align="center"
+			today_year="2026"
+			today_month="5"
+			today_day="17"
+		>
 			<style name="style_cal" />
 			<lv_calendar-header_dropdown />
 		</lv_calendar>

docs/examples/screens/lv_example_calendar.c

@@ -27,6 +27,7 @@ void lv_example_chart(void)
         lv_style_set_radius(&style_chart, 8);
         lv_style_set_pad_all(&style_chart, 10);
         lv_style_set_line_color(&style_chart, lv_color_hex(0x334155));
+        lv_style_set_border_width(&style_chart, 0);
 
         lv_style_init(&style_chart_cursor);
         lv_style_set_line_dash_gap(&style_chart_cursor, 10);

docs/examples/screens/lv_example_calendar.xml

@@ -9,7 +9,15 @@
 -->
 <screen>
 	<styles>
-		<style name="style_chart" bg_color="0x0f172a" bg_opa="100%" radius="8" pad_all="10" line_color="0x334155" />
+		<style
+			name="style_chart"
+			bg_color="0x0f172a"
+			bg_opa="100%"
+			radius="8"
+			pad_all="10"
+			line_color="0x334155"
+			border_width="0"
+		/>
 		<style name="style_chart_cursor" line_dash_gap="10" line_dash_width="5" />
 	</styles>
 

docs/examples/screens/lv_example_chart.c

@@ -2,7 +2,7 @@
  * @file lv_example_imagebutton.c
  */
 
-#include "../lv_examples.h"
+#include <examples_ed/lv_examples.h>
 
 /**
  * @title Image button
@@ -15,6 +15,10 @@
  */
 void lv_example_imagebutton(void)
 {
+    LV_IMAGE_DECLARE(imgbtn_left);
+    LV_IMAGE_DECLARE(imgbtn_mid);
+    LV_IMAGE_DECLARE(imgbtn_right);
+
     static lv_style_t style_pressed;
 
     static bool inited = false;
@@ -28,6 +32,19 @@ void lv_example_imagebutton(void)
         inited = true;
     }
 
-    lv_screen_active();
+    lv_obj_t * screen = lv_screen_active();
+
+    lv_obj_t * lv_imagebutton_0 = lv_imagebutton_create(screen);
+    lv_obj_set_width(lv_imagebutton_0, 160);
+    lv_obj_set_align(lv_imagebutton_0, LV_ALIGN_CENTER);
+    lv_obj_add_style(lv_imagebutton_0, &style_pressed, LV_STATE_PRESSED);
+    lv_imagebutton_set_src_left(lv_imagebutton_0, LV_IMAGEBUTTON_STATE_RELEASED, &imgbtn_left);
+    lv_imagebutton_set_src_mid(lv_imagebutton_0, LV_IMAGEBUTTON_STATE_RELEASED, &imgbtn_mid);
+    lv_imagebutton_set_src_right(lv_imagebutton_0, LV_IMAGEBUTTON_STATE_RELEASED, &imgbtn_right);
+    lv_obj_t * lv_label_0 = lv_label_create(lv_imagebutton_0);
+    lv_obj_set_align(lv_label_0, LV_ALIGN_CENTER);
+    lv_label_set_text(lv_label_0, "Press");
+    lv_obj_set_style_text_color(lv_label_0, lv_color_hex(0xffffff), 0);
+    lv_obj_set_y(lv_label_0, -3);
 }