lvgl · fbiego · Mar 31, 2026 · Mar 31, 2026 · Apr 1, 2026
diff --git a/tutorials/9_new_widget/.gitignore b/tutorials/9_new_widget/.gitignore
@@ -0,0 +1 @@
+preview-build
diff --git a/tutorials/9_new_widget/CMakeLists.txt b/tutorials/9_new_widget/CMakeLists.txt
@@ -0,0 +1,41 @@
+# This basic file is used to compile the runtime for the Editor preview.
+# Generated file, do not edit.
+
+# Only set project if this is the top-level CMakeLists.txt
+if (CMAKE_SOURCE_DIR STREQUAL CMAKE_CURRENT_SOURCE_DIR)
+  cmake_minimum_required(VERSION 3.10)
+  # can be customized
+  project(LVGLProject)
+  set(IS_TOP_LEVEL TRUE)
+else()
+  set(IS_TOP_LEVEL FALSE)
+endif()
+
+# Handles giving component libraries unique names when included as subprojects.
+if (DEFINED LVGL_COMPONENT_LIB_NAME)
+  set(LIB_NAME ${LVGL_COMPONENT_LIB_NAME})
+else()
+  set(LIB_NAME lib-ui)
+endif()
+
+# This includes the generated list of .c files
+include(${CMAKE_CURRENT_LIST_DIR}/file_list_gen.cmake)
+# Include any component libraries
+include(${CMAKE_CURRENT_LIST_DIR}/component_lib_list_gen.cmake)
+
+# Create the UI sources as a library
+add_library(${LIB_NAME} ${LV_EDITOR_PROJECT_SOURCES})
+if (DEFINED LV_EDITOR_COMPONENT_LIB_LIST)
+  target_link_libraries(${LIB_NAME} PUBLIC ${LV_EDITOR_COMPONENT_LIB_LIST})
+endif ()
+
+if(TARGET lvgl)
+  target_link_libraries(${LIB_NAME} PUBLIC lvgl)
+endif()
+
+# Add the project folder as include folder
+target_include_directories(${LIB_NAME} PUBLIC ${CMAKE_CURRENT_SOURCE_DIR})
+
+# Set include directories for the project
+# This will include the LVGL includes
+target_include_directories(${LIB_NAME} PRIVATE ${COMMON_INCLUDE_DIRS})
diff --git a/tutorials/9_new_widget/component_lib_list_gen.cmake b/tutorials/9_new_widget/component_lib_list_gen.cmake
@@ -0,0 +1,3 @@
+
+
+
diff --git a/tutorials/9_new_widget/components/README.md b/tutorials/9_new_widget/components/README.md
@@ -0,0 +1 @@
+Create XML files here that start with a `<component>` tag
diff --git a/tutorials/9_new_widget/components/segment_item/segment_item.xml b/tutorials/9_new_widget/components/segment_item/segment_item.xml
@@ -0,0 +1,29 @@
+<component>
+	<previews>
+		<preview width="320" height="40" style_bg_color="0x383838" />
+	</previews>
+
+	<api>
+		<prop name="text" type="string" default="Segment" />
+	</api>
+
+	<styles>
+		<style
+			name="style_base"
+			width="100"
+			height="100%"
+			bg_color="0x545454"
+			border_width="0"
+			text_color="0xffffff"
+			radius="0"
+		/>
+		<style name="style_checked" bg_color="0xd3d3d3" text_color="0x000000" />
+	</styles>
+
+	<view extends="lv_obj" scrollable="false">
+		<!-- Add widgets/components here -->
+		<style name="style_base" />
+		<style name="style_checked" selector="checked" />
+		<lv_label text="$text" align="center" />
+	</view>
+</component>
diff --git a/tutorials/9_new_widget/components/segment_item/segment_item_gen.c b/tutorials/9_new_widget/components/segment_item/segment_item_gen.c
@@ -0,0 +1,76 @@
+/**
+ * @file segment_item_gen.c
+ * @brief Template source file for LVGL objects
+ */
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+#include "segment_item_gen.h"
+#include "../../ui_new_widget.h"
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/***********************
+ *  STATIC VARIABLES
+ **********************/
+
+/***********************
+ *  STATIC PROTOTYPES
+ **********************/
+
+/**********************
+ *   GLOBAL FUNCTIONS
+ **********************/
+
+lv_obj_t * segment_item_create(lv_obj_t * parent, const char * text)
+{
+    LV_TRACE_OBJ_CREATE("begin");
+
+    static lv_style_t style_base;
+    static lv_style_t style_checked;
+
+    static bool style_inited = false;
+
+    if (!style_inited) {
+        lv_style_init(&style_base);
+        lv_style_set_width(&style_base, 100);
+        lv_style_set_height(&style_base, lv_pct(100));
+        lv_style_set_bg_color(&style_base, lv_color_hex(0x545454));
+        lv_style_set_border_width(&style_base, 0);
+        lv_style_set_text_color(&style_base, lv_color_hex(0xffffff));
+        lv_style_set_radius(&style_base, 0);
+
+        lv_style_init(&style_checked);
+        lv_style_set_bg_color(&style_checked, lv_color_hex(0xd3d3d3));
+        lv_style_set_text_color(&style_checked, lv_color_hex(0x000000));
+
+        style_inited = true;
+    }
+
+    lv_obj_t * lv_obj_0 = lv_obj_create(parent);
+    lv_obj_set_name_static(lv_obj_0, "segment_item_#");
+    lv_obj_set_flag(lv_obj_0, LV_OBJ_FLAG_SCROLLABLE, false);
+
+    lv_obj_add_style(lv_obj_0, &style_base, 0);
+    lv_obj_add_style(lv_obj_0, &style_checked, LV_STATE_CHECKED);
+    lv_obj_t * lv_label_0 = lv_label_create(lv_obj_0);
+    lv_label_set_text(lv_label_0, text);
+    lv_obj_set_align(lv_label_0, LV_ALIGN_CENTER);
+
+    LV_TRACE_OBJ_CREATE("finished");
+
+    return lv_obj_0;
+}
+
+/**********************
+ *   STATIC FUNCTIONS
+ **********************/
+
diff --git a/tutorials/9_new_widget/components/segment_item/segment_item_gen.h b/tutorials/9_new_widget/components/segment_item/segment_item_gen.h
@@ -0,0 +1,46 @@
+/**
+ * @file segment_item_gen.h
+ */
+
+#ifndef SEGMENT_ITEM_H
+#define SEGMENT_ITEM_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+#ifdef LV_LVGL_H_INCLUDE_SIMPLE
+    #include "lvgl.h"
+    #include "src/core/lv_obj_class_private.h"
+#else
+    #include "lvgl/lvgl.h"
+    #include "lvgl/src/core/lv_obj_class_private.h"
+#endif
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+
+lv_obj_t * segment_item_create(lv_obj_t * parent, const char * text);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*SEGMENT_ITEM_H*/
diff --git a/tutorials/9_new_widget/file_list_gen.cmake b/tutorials/9_new_widget/file_list_gen.cmake
@@ -0,0 +1,10 @@
+list(
+  APPEND
+  LV_EDITOR_PROJECT_SOURCES
+  ${CMAKE_CURRENT_LIST_DIR}/components/segment_item/segment_item_gen.c
+  ${CMAKE_CURRENT_LIST_DIR}/screens/screen_widgets/screen_widgets_gen.c
+  ${CMAKE_CURRENT_LIST_DIR}/ui_new_widget_gen.c
+  ${CMAKE_CURRENT_LIST_DIR}/ui_new_widget.c
+  ${CMAKE_CURRENT_LIST_DIR}/widgets/wd_segment/wd_segment_gen.c
+  ${CMAKE_CURRENT_LIST_DIR}/widgets/wd_segment/wd_segment_xml_parser.c
+  ${CMAKE_CURRENT_LIST_DIR}/widgets/wd_segment/wd_segment.c)
diff --git a/tutorials/9_new_widget/fonts/README.md b/tutorials/9_new_widget/fonts/README.md
@@ -0,0 +1 @@
+Place ttf or woff files here
diff --git a/tutorials/9_new_widget/globals.xml b/tutorials/9_new_widget/globals.xml
@@ -0,0 +1,26 @@
+<globals>
+	<api>
+		<!-- Add <enumdefs> here -->
+	</api>
+
+	<consts>
+		<!-- Add <px>, <int>, <color> etc here -->
+	</consts>
+
+	<styles>
+		<!-- Add <style> tags here -->
+	</styles>
+
+	<subjects>
+		<!-- Add <int>, <string>, or <float> subjects here -->
+		<int name="subject_segment" value="0" />
+	</subjects>
+
+	<images>
+		<!-- Add <file> or <data> tags here -->
+	</images>
+
+	<fonts>
+		<!-- Add <bin> , <tiny_ttf>, <freetype> tags here -->
+	</fonts>
+</globals>
diff --git a/tutorials/9_new_widget/images/README.md b/tutorials/9_new_widget/images/README.md
@@ -0,0 +1 @@
+Place PNG images here
diff --git a/tutorials/9_new_widget/preview-bin/.lvgl-version b/tutorials/9_new_widget/preview-bin/.lvgl-version
@@ -0,0 +1 @@
+9.4.0
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Create XML files here that start with a `<component>` tag