Feature: New example project updates

examples/CMakeLists copy.txt

@@ -0,0 +1,34 @@
+# This basic file is used to compile the runtime for the Editor preview.
+# It is also intended for you to customize it for your own target/project.
+
+# 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()
+
+# This includes the generated list of .c files
+include(${CMAKE_CURRENT_LIST_DIR}/file_list_gen.cmake)
+
+# Create the UI sources as a library
+add_library(lib-ui ${PROJECT_SOURCES})
+
+# You may use this check to add configuration when compiling for the Editor preview,
+# or for your target.
+if (LV_EDITOR_PREVIEW)
+    # things for the Preview
+else ()
+    # things for your target
+
+    # set your include directories here, don't forget LVGL!
+endif ()
+
+if (IS_TOP_LEVEL)
+  # Do something when this is your top level cmakelists.txt
+else()
+  # Do something else if it's not your top level cmakelists.txt
+endif()

examples/CMakeLists.txt

@@ -17,8 +17,8 @@ include(${CMAKE_CURRENT_LIST_DIR}/file_list_gen.cmake)
 # Create the UI sources as a library
 add_library(lib-ui ${PROJECT_SOURCES})
 
-# You may use this check to add configuration when compiling for the Editor
-# preview, or for your target.
+# You may use this check to add configuration when compiling for the Editor preview,
+# or for your target.
 if (LV_EDITOR_PREVIEW)
     # things for the Preview
 else ()

examples/components/README.md

@@ -1 +1 @@
-Create XML files here that start with a `<component>` tag
+Create XML files here that start with a `<component>` tag.

examples/components/basic/bar/bar.xml

@@ -0,0 +1,19 @@
+<component>
+	<previews>
+		<preview style_pad_all="20" />
+	</previews>
+
+	<styles>
+		<style name="style_main" bg_color="#surface_primary_light" bg_opa="#opa_muted" radius="20" height="#unit_sm" />
+		<style name="style_indicator" bg_color="#surface_primary_light" bg_opa="100%" radius="20" />
+		<style name="style_dark" bg_color="#surface_primary_dark" />
+	</styles>
+
+	<view extends="lv_bar">
+		<remove_style_all />
+		<style name="style_main" />
+		<style name="style_indicator" selector="indicator" />
+		<bind_style subject="dark_theme" ref_value="1" name="style_dark" />
+		<bind_style subject="dark_theme" ref_value="1" name="style_dark" selector="indicator" />
+	</view>
+</component>

examples/components/basic/bar/bar_gen.c

@@ -0,0 +1,85 @@
+/**
+ * @file bar_gen.c
+ * @description Template source file for LVGL objects
+ */
+
+/*********************
+ *      INCLUDES
+ *********************/
+#include "bar_gen.h"
+#include "ui.h"
+
+/*********************
+ *      DEFINES
+ *********************/
+
+
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/***********************
+ *  STATIC VARIABLES
+ **********************/
+
+/***********************
+ *  STATIC PROTOTYPES
+ **********************/
+
+
+
+/**********************
+ *   GLOBAL FUNCTIONS
+ **********************/
+
+lv_obj_t * bar_create(lv_obj_t * parent)
+{
+    LV_TRACE_OBJ_CREATE("begin");
+
+    static lv_style_t style_main;
+    static lv_style_t style_indicator;
+    static lv_style_t style_dark;
+
+    static bool style_inited = false;
+
+    if (!style_inited) {
+        lv_style_init(&style_main);
+        lv_style_set_bg_color(&style_main, SURFACE_PRIMARY_LIGHT);
+        lv_style_set_bg_opa(&style_main, OPA_MUTED);
+        lv_style_set_radius(&style_main, 20);
+        lv_style_set_height(&style_main, UNIT_SM);
+
+        lv_style_init(&style_indicator);
+        lv_style_set_bg_color(&style_indicator, SURFACE_PRIMARY_LIGHT);
+        lv_style_set_bg_opa(&style_indicator, (255 * 100 / 100));
+        lv_style_set_radius(&style_indicator, 20);
+
+        lv_style_init(&style_dark);
+        lv_style_set_bg_color(&style_dark, SURFACE_PRIMARY_DARK);
+
+        style_inited = true;
+    }
+
+    lv_obj_t * lv_bar_0 = lv_bar_create(parent);
+
+    lv_obj_remove_style_all(lv_bar_0);
+    lv_obj_add_style(lv_bar_0, &style_main, 0);
+    lv_obj_add_style(lv_bar_0, &style_indicator, LV_PART_INDICATOR);
+    lv_obj_bind_style(lv_bar_0, &style_dark, 0, &dark_theme, 1);
+    lv_obj_bind_style(lv_bar_0, &style_dark, LV_PART_INDICATOR, &dark_theme, 1);
+
+
+    LV_TRACE_OBJ_CREATE("finished");
+
+    lv_obj_set_name(lv_bar_0, "bar_#");
+
+    return lv_bar_0;
+}
+
+
+
+/**********************
+ *   STATIC FUNCTIONS
+ **********************/
+

examples/screens/about/about_gen.h → examples/components/basic/bar/bar_gen.h

@@ -1,9 +1,9 @@
 /**
- * @file about_gen.h
+ * @file bar_gen.h
  */
 
-#ifndef ABOUT_H
-#define ABOUT_H
+#ifndef BAR_H
+#define BAR_H
 
 #ifdef __cplusplus
 extern "C" {
@@ -31,9 +31,9 @@ extern "C" {
  **********************/
 
 
+lv_obj_t * bar_create(lv_obj_t * parent);
 
 
-lv_obj_t * about_create(void);
 
 /**********************
  *      MACROS
@@ -43,4 +43,4 @@ lv_obj_t * about_create(void);
 } /*extern "C"*/
 #endif
 
-#endif /*ABOUT_H*/
+#endif /*BAR_H*/

examples/components/basic/button/button.xml

@@ -0,0 +1,40 @@
+<component>
+	<previews>
+		<preview style_pad_all="4" />
+	</previews>
+
+	<api>
+		<prop name="label" type="string" default="Label" help="The text to be displayed on the button" />
+	</api>
+
+	<styles>
+		<!-- Styles added by default -->
+		<style
+			name="style_base"
+			radius="#unit_md"
+			bg_opa="100%"
+			width="100%"
+			pad_hor="#unit_lg"
+			pad_ver="#unit_md"
+			text_font="geist_bold_16"
+			bg_color="#surface_primary_light"
+			text_color="#text_on_surface_primary_light"
+		/>
+		<style name="style_pressed" recolor_opa="#opa_muted" recolor="#surface_primary_dark" />
+
+		<!-- Styles bound when the theme subject is 1 -->
+		<style name="style_dark" bg_color="#surface_primary_dark" text_color="#text_on_surface_primary_dark" />
+		<style name="style_pressed_dark" recolor="#surface_primary_light" />
+	</styles>
+
+	<view extends="lv_button">
+		<remove_style_all />
+		<!-- Remove the default LVGL styles -->
+		<style name="style_base" />
+		<style name="style_pressed" selector="pressed" />
+		<bind_style name="style_dark" subject="dark_theme" ref_value="1" />
+		<bind_style name="style_pressed_dark" subject="dark_theme" ref_value="1" selector="pressed" />
+
+		<lv_label text="$label" align="center" />
+	</view>
+</component>

examples/components/basic/button/button_gen.c

@@ -0,0 +1,97 @@
+/**
+ * @file button_gen.c
+ * @description Template source file for LVGL objects
+ */
+
+/*********************
+ *      INCLUDES
+ *********************/
+#include "button_gen.h"
+#include "ui.h"
+
+/*********************
+ *      DEFINES
+ *********************/
+
+
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/***********************
+ *  STATIC VARIABLES
+ **********************/
+
+/***********************
+ *  STATIC PROTOTYPES
+ **********************/
+
+
+
+/**********************
+ *   GLOBAL FUNCTIONS
+ **********************/
+
+lv_obj_t * button_create(lv_obj_t * parent, const char * label)
+{
+    LV_TRACE_OBJ_CREATE("begin");
+
+    static lv_style_t style_base;
+    static lv_style_t style_pressed;
+    static lv_style_t style_dark;
+    static lv_style_t style_pressed_dark;
+
+    static bool style_inited = false;
+
+    if (!style_inited) {
+        lv_style_init(&style_base);
+        lv_style_set_radius(&style_base, UNIT_MD);
+        lv_style_set_bg_opa(&style_base, (255 * 100 / 100));
+        lv_style_set_width(&style_base, lv_pct(100));
+        lv_style_set_pad_hor(&style_base, UNIT_LG);
+        lv_style_set_pad_ver(&style_base, UNIT_MD);
+        lv_style_set_text_font(&style_base, geist_bold_16);
+        lv_style_set_bg_color(&style_base, SURFACE_PRIMARY_LIGHT);
+        lv_style_set_text_color(&style_base, TEXT_ON_SURFACE_PRIMARY_LIGHT);
+
+        lv_style_init(&style_pressed);
+        lv_style_set_recolor_opa(&style_pressed, OPA_MUTED);
+        lv_style_set_recolor(&style_pressed, SURFACE_PRIMARY_DARK);
+
+        lv_style_init(&style_dark);
+        lv_style_set_bg_color(&style_dark, SURFACE_PRIMARY_DARK);
+        lv_style_set_text_color(&style_dark, TEXT_ON_SURFACE_PRIMARY_DARK);
+
+        lv_style_init(&style_pressed_dark);
+        lv_style_set_recolor(&style_pressed_dark, SURFACE_PRIMARY_LIGHT);
+
+        style_inited = true;
+    }
+
+    lv_obj_t * lv_button_0 = lv_button_create(parent);
+
+    lv_obj_remove_style_all(lv_button_0);
+    lv_obj_add_style(lv_button_0, &style_base, 0);
+    lv_obj_add_style(lv_button_0, &style_pressed, LV_STATE_PRESSED);
+    lv_obj_bind_style(lv_button_0, &style_dark, 0, &dark_theme, 1);
+    lv_obj_bind_style(lv_button_0, &style_pressed_dark, LV_STATE_PRESSED, &dark_theme, 1);
+    lv_obj_t * lv_label_0 = lv_label_create(lv_button_0);
+    lv_label_set_text(lv_label_0, label);
+    lv_obj_set_align(lv_label_0, LV_ALIGN_CENTER);
+
+
+
+    LV_TRACE_OBJ_CREATE("finished");
+
+    lv_obj_set_name(lv_button_0, "button_#");
+
+    return lv_button_0;
+}
+
+
+
+/**********************
+ *   STATIC FUNCTIONS
+ **********************/
+

examples/components/header/header_gen.h → examples/components/basic/button/button_gen.h

@@ -1,9 +1,9 @@
 /**
- * @file header_gen.h
+ * @file button_gen.h
  */
 
-#ifndef HEADER_H
-#define HEADER_H
+#ifndef BUTTON_H
+#define BUTTON_H
 
 #ifdef __cplusplus
 extern "C" {
@@ -31,7 +31,9 @@ extern "C" {
  **********************/
 
 
-lv_obj_t * header_create(lv_obj_t * parent, const char * title);
+lv_obj_t * button_create(lv_obj_t * parent, const char * label);
+
+
 
 /**********************
  *      MACROS
@@ -41,4 +43,4 @@ lv_obj_t * header_create(lv_obj_t * parent, const char * title);
 } /*extern "C"*/
 #endif
 
-#endif /*HEADER_H*/
+#endif /*BUTTON_H*/

examples/components/basic/card/card.xml

@@ -0,0 +1,29 @@
+<component>
+	<previews>
+		<!-- To see the panel on both with light and dark theme -->
+		<preview style_bg_color="0x888" />
+	</previews>
+
+	<styles>
+		<style
+			name="style_base"
+			width="300"
+			height="content"
+			pad_all="#unit_lg"
+			pad_row="#unit_xl"
+			bg_opa="100%"
+			bg_color="#bg_primary_light"
+			text_color="#surface_primary_light"
+			radius="#unit_xl"
+			layout="flex"
+			flex_flow="column"
+		/>
+
+		<style name="style_dark" bg_color="#bg_primary_dark" text_color="#surface_primary_dark" />
+	</styles>
+	<view>
+		<remove_style_all />
+		<style name="style_base" />
+		<bind_style subject="dark_theme" ref_value="1" name="style_dark" />
+	</view>
+</component>