Fixed: [LVGL] Keyboard and Textarea association doesn't work when Tex…

…tarea is inside User Widget and Keyboard is not
eez-open · Nov 15, 2024 · 5f4a0ea · 5f4a0ea
1 parent b29516d
commit 5f4a0ea
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 42 deletions.
diff --git a/packages/eez-studio-types/index.d.ts b/packages/eez-studio-types/index.d.ts
@@ -737,7 +737,7 @@ export interface IWasmFlowRuntime {
     _lvglFreeFont(font_ptr: number): void;
     _lvglAddObjectFlowCallback(obj: number, filter: number, flow_state: number, component_index: number, output_or_property_index: number, userDataValuePtr: number): void;
     _lvglSetImgbuttonImageSrc(obj: number, statE: number, img_src: number): void;
-    _lvglSetKeyboardTextarea(obj: number, textarea: number): void;
+    _lvglSetKeyboardTextarea(obj: number, textareaIndex: number): void;
 
     _lvglMeterAddScale(obj: number,
         minorTickCount: number, minorTickLineWidth: number, minorTickLength: number, minorTickColor: number,

diff --git a/packages/project-editor/flow/runtime/cpp/lvgl-runtime/common/src/flow.cpp b/packages/project-editor/flow/runtime/cpp/lvgl-runtime/common/src/flow.cpp
@@ -914,7 +914,7 @@ void setObjectIndex(lv_obj_t *obj, int32_t index) {
     indexToObject.insert(std::make_pair(index, obj));
 }
 
-static lv_obj_t *getLvglObjectFromIndex(int32_t index) {
+lv_obj_t *getLvglObjectFromIndex(int32_t index) {
     auto it = indexToObject.find(index);
     if (it == indexToObject.end()) {
         return nullptr;

diff --git a/packages/project-editor/flow/runtime/cpp/lvgl-runtime/common/src/flow.h b/packages/project-editor/flow/runtime/cpp/lvgl-runtime/common/src/flow.h
@@ -108,3 +108,4 @@ enum UpdateTaskType {
 void addUpdateTask(enum UpdateTaskType updateTaskType, lv_obj_t *obj, void *flow_state, unsigned component_index, unsigned property_index, void *subobj, int param);
 
 void setObjectIndex(lv_obj_t *obj, int32_t index);
+lv_obj_t *getLvglObjectFromIndex(int32_t index);
diff --git a/packages/project-editor/flow/runtime/cpp/lvgl-runtime/common/src/studio_api.cpp b/packages/project-editor/flow/runtime/cpp/lvgl-runtime/common/src/studio_api.cpp
@@ -930,9 +930,12 @@ EM_PORT_API(void) lvglSetImgbuttonImageSrc(lv_obj_t *obj, lv_imgbtn_state_t stat
     lv_obj_update_layout(obj);
 }
 
-EM_PORT_API(void) lvglSetKeyboardTextarea(lv_obj_t *obj, lv_obj_t *textarea) {
-    lv_keyboard_set_textarea(obj, textarea);
-    lv_obj_update_layout(obj);
+EM_PORT_API(void) lvglSetKeyboardTextarea(lv_obj_t *obj, int32_t textareaIndex) {
+    lv_obj_t *textarea = getLvglObjectFromIndex(textareaIndex);
+    if (textarea) {
+        lv_keyboard_set_textarea(obj, textarea);
+        lv_obj_update_layout(obj);
+    }
 }
 
 #if LVGL_VERSION_MAJOR >= 9

diff --git a/packages/project-editor/flow/runtime/lvgl_runtime_v8.3.wasm b/packages/project-editor/flow/runtime/lvgl_runtime_v8.3.wasm
diff --git a/packages/project-editor/flow/runtime/lvgl_runtime_v9.0.wasm b/packages/project-editor/flow/runtime/lvgl_runtime_v9.0.wasm
diff --git a/packages/project-editor/flow/runtime/wasm-runtime.tsx b/packages/project-editor/flow/runtime/wasm-runtime.tsx
@@ -395,7 +395,8 @@ export class WasmRuntime extends RemoteRuntime {
             );
         } else if (workerToRenderMessage.getLvglObjectByName) {
             return this.lgvlPageRuntime?.getLvglObjectByName(
-                workerToRenderMessage.getLvglObjectByName.name
+                workerToRenderMessage.getLvglObjectByName.name,
+                []
             );
         } else if (workerToRenderMessage.getLvglGroupByName) {
             return this.lgvlPageRuntime?.getLvglGroupByName(

diff --git a/packages/project-editor/lvgl/build.ts b/packages/project-editor/lvgl/build.ts
@@ -588,7 +588,7 @@ export class LVGLBuild extends Build {
 
         const pageIdentifiers = this.getPageIdentifiers(widget);
         if (!pageIdentifiers) {
-            return 0;
+            return "0";
         }
 
         const accessor = pageIdentifiers.widgetToAccessor.get(widget);

diff --git a/packages/project-editor/lvgl/page-runtime.ts b/packages/project-editor/lvgl/page-runtime.ts
@@ -1196,8 +1196,32 @@ export class LVGLPageViewerRuntime extends LVGLPageRuntime {
         return this.nextWidgetIndex++;
     }
 
-    getLvglObjectByName(objectName: string) {
-        return this.runtime.assetsMap.lvglWidgetIndexes[objectName];
+    getLvglObjectByName(
+        objectName: string,
+        userWidgetsStack: LVGLUserWidgetWidget[]
+    ) {
+        const identifier = [
+            ...userWidgetsStack.map(
+                widget =>
+                    widget.identifier ||
+                    this.runtime.assetsMap.lvglWidgetGeneratedIdentifiers[
+                        widget.objID
+                    ]
+            ),
+            objectName
+        ]
+            .map(identifier =>
+                identifier
+                    ? getName(
+                          "",
+                          identifier,
+                          NamingConvention.UnderscoreLowerCase
+                      )
+                    : "?"
+            )
+            .join(USER_WIDGET_IDENTIFIER_SEPARATOR);
+
+        return this.runtime.assetsMap.lvglWidgetIndexes[identifier];
     }
 }
 

diff --git a/packages/project-editor/lvgl/widgets/Imgbutton.tsx b/packages/project-editor/lvgl/widgets/Imgbutton.tsx
@@ -359,32 +359,44 @@ export class LVGLImgbuttonWidget extends LVGLWidget {
 
         if (this.imageReleased) {
             build.line(
-                `${setSrcFuncName}(obj, ${prefix}RELEASED, NULL, &img_${this.imageReleased}, NULL);`
+                `${setSrcFuncName}(obj, ${prefix}RELEASED, NULL, &${build.getImageVariableName(
+                    this.imageReleased
+                )}, NULL);`
             );
         }
         if (this.imagePressed) {
             build.line(
-                `${setSrcFuncName}(obj, ${prefix}PRESSED, NULL, &img_${this.imagePressed}, NULL);`
+                `${setSrcFuncName}(obj, ${prefix}PRESSED, NULL, &${build.getImageVariableName(
+                    this.imagePressed
+                )}, NULL);`
             );
         }
         if (this.imageDisabled) {
             build.line(
-                `${setSrcFuncName}(obj, ${prefix}DISABLED, NULL, &img_${this.imageDisabled}, NULL);`
+                `${setSrcFuncName}(obj, ${prefix}DISABLED, NULL, &${build.getImageVariableName(
+                    this.imageDisabled
+                )}, NULL);`
             );
         }
         if (this.imageCheckedReleased) {
             build.line(
-                `${setSrcFuncName}(obj, ${prefix}CHECKED_PRESSED, NULL, &img_${this.imageCheckedReleased}, NULL);`
+                `${setSrcFuncName}(obj, ${prefix}CHECKED_PRESSED, NULL, &${build.getImageVariableName(
+                    this.imageCheckedReleased
+                )}, NULL);`
             );
         }
         if (this.imageCheckedPressed) {
             build.line(
-                `${setSrcFuncName}(obj, ${prefix}CHECKED_RELEASED, NULL, &img_${this.imageCheckedPressed}, NULL);`
+                `${setSrcFuncName}(obj, ${prefix}CHECKED_RELEASED, NULL, &${build.getImageVariableName(
+                    this.imageCheckedPressed
+                )}, NULL);`
             );
         }
         if (this.imageCheckedDisabled) {
             build.line(
-                `${setSrcFuncName}(obj, ${prefix}CHECKED_DISABLED, NULL, &img_${this.imageCheckedDisabled}, NULL);`
+                `${setSrcFuncName}(obj, ${prefix}CHECKED_DISABLED, NULL, &${build.getImageVariableName(
+                    this.imageCheckedDisabled
+                )}, NULL);`
             );
         }
     }

diff --git a/packages/project-editor/lvgl/widgets/Keyboard.tsx b/packages/project-editor/lvgl/widgets/Keyboard.tsx
@@ -13,7 +13,6 @@ import { ProjectType } from "project-editor/project/project";
 import { specificGroup } from "project-editor/ui-components/PropertyGrid/groups";
 
 import {
-    LVGLNonActivePageViewerRuntime,
     LVGLPageRuntime,
     LVGLPageViewerRuntime
 } from "project-editor/lvgl/page-runtime";
@@ -225,39 +224,39 @@ export class LVGLKeyboardWidget extends LVGLWidget {
             KEYBOARD_MODES[this.mode]
         );
 
-        runtime.addPostCreateCallback(() => {
-            if (this.textarea) {
-                const lvglIdentifier = ProjectEditor.getProjectStore(
-                    this
-                ).lvglIdentifiers.getIdentifierByName(
-                    ProjectEditor.getFlow(this),
-                    this.textarea
-                );
+        const textarea = this.textarea;
+
+        if (runtime instanceof LVGLPageViewerRuntime && textarea) {
+            const lvglIdentifier = ProjectEditor.getProjectStore(
+                this
+            ).lvglIdentifiers.getIdentifierByName(
+                ProjectEditor.getFlow(this),
+                textarea
+            );
+            if (lvglIdentifier && lvglIdentifier.widgets.length == 1) {
+                const textareaWidget = lvglIdentifier.widgets[0];
+
+                if (textareaWidget instanceof LVGLTextareaWidget) {
+                    const textareaWidgetIndex = runtime.getLvglObjectByName(
+                        textarea,
+                        runtime.userWidgetsStack
+                    );
 
-                if (lvglIdentifier && lvglIdentifier.widgets.length == 1) {
-                    const textareaWidget = lvglIdentifier.widgets[0];
+                    console.log(textarea, textareaWidgetIndex);
 
-                    if (
-                        textareaWidget instanceof LVGLTextareaWidget &&
-                        (runtime instanceof LVGLPageViewerRuntime ||
-                            runtime instanceof LVGLNonActivePageViewerRuntime)
-                    ) {
+                    runtime.addPostCreateCallback(() => {
                         setTimeout(() => {
-                            if (
-                                this._lvglObj &&
-                                textareaWidget._lvglObj &&
-                                runtime.isMounted
-                            ) {
+                            if (this._lvglObj && runtime.isMounted) {
                                 runtime.wasm._lvglSetKeyboardTextarea(
                                     this._lvglObj,
-                                    textareaWidget._lvglObj
+                                    textareaWidgetIndex
                                 );
                             }
                         });
-                    }
+                    });
                 }
             }
-        });
+        }
 
         return obj;
     }
@@ -287,10 +286,27 @@ export class LVGLKeyboardWidget extends LVGLWidget {
                 lvglIdentifier.widgets.length == 1
             ) {
                 const textareaWidget = lvglIdentifier.widgets[0];
+
+                let keyboardAccessor = build.getLvglObjectAccessor(this);
+
+                let textareaAccessor =
+                    build.getLvglObjectAccessor(textareaWidget);
+
+                if (textareaAccessor.indexOf("startWidgetIndex +") != -1) {
+                    let index = build.getWidgetObjectIndexByName(
+                        this,
+                        this.textarea
+                    );
+
+                    if (keyboardAccessor.indexOf("startWidgetIndex +") != -1) {
+                        textareaAccessor = `((lv_obj_t **)&objects)[startWidgetIndex + ${index}]`;
+                    } else {
+                        textareaAccessor = `((lv_obj_t **)&objects)[${index}]`;
+                    }
+                }
+
                 build.line(
-                    `lv_keyboard_set_textarea(${build.getLvglObjectAccessor(
-                        this
-                    )}, ${build.getLvglObjectAccessor(textareaWidget)});`
+                    `lv_keyboard_set_textarea(${keyboardAccessor}, ${textareaAccessor});`
                 );
             }
         }