Implemented: [LVGL] Show "Code identifier" in Page and Widget propert…

…ies #633
eez-open · Nov 13, 2024 · 555f423 · 555f423
1 parent f2356a9
commit 555f423
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/packages/project-editor/features/page/page.tsx b/packages/project-editor/features/page/page.tsx
@@ -31,7 +31,12 @@ import {
     isDashboardProject,
     isLVGLProject
 } from "project-editor/project/project-type-traits";
-import { Project, findStyle } from "project-editor/project/project";
+import {
+    NamingConvention,
+    Project,
+    findStyle,
+    getName
+} from "project-editor/project/project";
 
 import type {
     IResizeHandler,
@@ -212,6 +217,20 @@ export class Page extends Flow {
     _lvglObj: number | undefined;
     _lvglUserWidgetOfPageCopy: LVGLUserWidgetWidget;
 
+    get codeIdentifier() {
+        const codeIdentifier = getName(
+            "",
+            this.name,
+            NamingConvention.UnderscoreLowerCase
+        );
+
+        if (codeIdentifier == this.name) {
+            return undefined;
+        }
+
+        return codeIdentifier;
+    }
+
     constructor() {
         super();
 
@@ -296,6 +315,14 @@ export class Page extends Flow {
                 },
                 propertyGridGroup: generalGroup
             },
+            {
+                name: "codeIdentifier",
+                type: PropertyType.String,
+                propertyGridGroup: generalGroup,
+                computed: true,
+                formText: `This identifier will be used in the generated source code in the "Objects" struct. It is different from the "Name" above because in the source code we are following "lowercase with underscore" naming convention.`,
+                disabled: (object: Page) => object.codeIdentifier == undefined
+            },
             {
                 name: "description",
                 type: PropertyType.MultilineText,

diff --git a/packages/project-editor/lvgl/widgets/Base.tsx b/packages/project-editor/lvgl/widgets/Base.tsx
@@ -36,7 +36,9 @@ import {
     ProjectType,
     findAction,
     findLvglStyle,
-    Project
+    Project,
+    NamingConvention,
+    getName
 } from "project-editor/project/project";
 
 import type {
@@ -527,6 +529,24 @@ export class LVGLWidget extends Widget {
     _xScroll2: number = 0;
     _yScroll2: number = 0;
 
+    get codeIdentifier() {
+        if (!this.identifier) {
+            return undefined;
+        }
+
+        const codeIdentifier = getName(
+            "",
+            this.identifier,
+            NamingConvention.UnderscoreLowerCase
+        );
+
+        if (codeIdentifier == this.identifier) {
+            return undefined;
+        }
+
+        return codeIdentifier;
+    }
+
     static classInfo = makeDerivedClassInfo(Widget.classInfo, {
         enabledInComponentPalette: (projectType: ProjectType) =>
             projectType === ProjectType.LVGL,
@@ -550,6 +570,15 @@ export class LVGLWidget extends Widget {
                 propertyGridGroup: generalGroup,
                 disabled: object => object instanceof LVGLScreenWidget // LVGLScreenWidget is using Page name as identifier
             },
+            {
+                name: "codeIdentifier",
+                type: PropertyType.String,
+                propertyGridGroup: generalGroup,
+                computed: true,
+                formText: `This identifier will be used in the generated source code in the "Objects" struct. It is different from the "Name" above because in the source code we are following "lowercase with underscore" naming convention.`,
+                disabled: (object: LVGLWidget) =>
+                    object.codeIdentifier == undefined
+            },
             {
                 name: "left",
                 type: PropertyType.Number,