[LVGL] ImgButton, This widget type is not supported in LVLG 9.0 #606

Author: mvladic

packages/project-editor/features/bitmap/BitmapsNavigation.tsx

@@ -6,7 +6,7 @@ import { ListNavigation } from "project-editor/ui-components/ListNavigation";
 import { FlexLayoutContainer } from "eez-studio-ui/FlexLayout";
 import { isObjectExists } from "project-editor/store";
 import { ProjectContext } from "project-editor/project/context";
-import { Bitmap, createBitmap } from "./bitmap";
+import { Bitmap, createBitmapFromFile } from "./bitmap";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -53,10 +53,9 @@ export const BitmapsTab = observer(
 
                             for (const file of files) {
                                 if (file.type.startsWith("image/")) {
-                                    const bitmap = await createBitmap(
+                                    const bitmap = await createBitmapFromFile(
                                         this.context,
-                                        file.path,
-                                        file.type
+                                        file
                                     );
                                     if (bitmap) {
                                         this.context.addObject(

packages/project-editor/features/bitmap/bitmap.tsx

@@ -602,6 +602,55 @@ export async function createBitmap(
     }
 }
 
+export async function createBitmapFromFile(
+    projectStore: ProjectStore,
+    file: File
+) {
+    let fileType = file.type;
+
+    if (file.type == undefined) {
+        const ext = path.extname(file.name).toLowerCase();
+        if (ext == ".jpg" || ext == ".jpeg") {
+            fileType = "image/jpg";
+        } else {
+            fileType = "image/png";
+        }
+    }
+
+    let bpp = projectStore.projectTypeTraits.isLVGL ? CF_TRUE_COLOR_ALPHA : 32;
+
+    let name = getUniquePropertyValue(
+        projectStore.project.bitmaps,
+        "name",
+        path.parse(file.name).name
+    ) as string;
+
+    try {
+        const arrayBuffer = await file.arrayBuffer();
+        const base64 = btoa(
+            String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))
+        );
+
+        const bitmapProperties: Partial<Bitmap> = {
+            name,
+            image: `data:${fileType};base64,` + base64,
+            bpp,
+            alwaysBuild: false
+        };
+
+        const bitmap = createObject<Bitmap>(
+            projectStore,
+            bitmapProperties,
+            Bitmap
+        );
+
+        return bitmap;
+    } catch (err) {
+        notification.error(err);
+        return undefined;
+    }
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 
 export interface BitmapData {

packages/project-editor/features/style/StylesTreeNavigation.tsx

@@ -30,7 +30,7 @@ import { DragAndDropManagerClass } from "project-editor/core/dd";
 
 import { ProjectContext } from "project-editor/project/context";
 import { ProjectEditor } from "project-editor/project-editor-interface";
-import { DropFile, Tree } from "project-editor/ui-components/Tree";
+import { Tree } from "project-editor/ui-components/Tree";
 import { SortControl } from "project-editor/ui-components/ListNavigation";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -124,7 +124,7 @@ interface StylesTreeNavigationProps {
     dragAndDropManager?: DragAndDropManagerClass;
     searchInput?: boolean;
     editable?: boolean;
-    onFilesDrop?: (files: DropFile[]) => void;
+    onFilesDrop?: (files: File[]) => void;
 }
 
 export const StylesTreeNavigation = observer(

packages/project-editor/lvgl/LVGLStylesTreeNavigation.tsx

@@ -30,7 +30,7 @@ import { DragAndDropManagerClass } from "project-editor/core/dd";
 
 import { ProjectContext } from "project-editor/project/context";
 import { ProjectEditor } from "project-editor/project-editor-interface";
-import { DropFile, Tree } from "project-editor/ui-components/Tree";
+import { Tree } from "project-editor/ui-components/Tree";
 import { SortControl } from "project-editor/ui-components/ListNavigation";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -121,7 +121,7 @@ interface LVGLStylesTreeNavigationProps {
     dragAndDropManager?: DragAndDropManagerClass;
     searchInput?: boolean;
     editable?: boolean;
-    onFilesDrop?: (files: DropFile[]) => void;
+    onFilesDrop?: (files: File[]) => void;
 }
 
 export const LVGLStylesTreeNavigation = observer(

packages/project-editor/lvgl/widgets/Imgbutton.tsx

@@ -16,7 +16,6 @@ import type { LVGLBuild } from "project-editor/lvgl/build";
 import { ImgbuttonStates } from "project-editor/lvgl/lvgl-constants";
 
 import { LVGLWidget } from "./internal";
-import { checkWidgetTypeLvglVersion } from "../widget-common";
 import { ProjectEditor } from "project-editor/project-editor-interface";
 import { propertyNotFoundMessage } from "project-editor/store";
 
@@ -108,7 +107,7 @@ export class LVGLImgbuttonWidget extends LVGLWidget {
         ),
 
         check: (widget: LVGLImgbuttonWidget, messages: IMessage[]) => {
-            checkWidgetTypeLvglVersion(widget, messages, "8.3");
+            // checkWidgetTypeLvglVersion(widget, messages, "8.3");
 
             if (widget.imageReleased) {
                 const bitmap = findBitmap(

packages/project-editor/ui-components/List.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { observer } from "mobx-react";
 
 import { TreeAdapter } from "project-editor/core/objectAdapter";
-import { Tree, DropFile } from "project-editor/ui-components/Tree";
+import { Tree } from "project-editor/ui-components/Tree";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -12,7 +12,7 @@ interface ListProps {
     onFocus?: () => void;
     onEditItem?: (itemId: string) => void;
     renderItem?: (itemId: string) => React.ReactNode;
-    onFilesDrop?: (files: DropFile[]) => void;
+    onFilesDrop?: (files: File[]) => void;
 }
 
 export const List = observer(

packages/project-editor/ui-components/ListNavigation.tsx

@@ -31,7 +31,6 @@ import { List } from "project-editor/ui-components/List";
 import { ProjectContext } from "project-editor/project/context";
 import classNames from "classnames";
 import { ProjectEditor } from "project-editor/project-editor-interface";
-import { DropFile } from "project-editor/ui-components/Tree";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -157,7 +156,7 @@ interface ListNavigationProps {
     dragAndDropManager?: DragAndDropManagerClass;
     searchInput?: boolean;
     editable?: boolean;
-    onFilesDrop?: (files: DropFile[]) => void;
+    onFilesDrop?: (files: File[]) => void;
 }
 
 export const ListNavigation = observer(

packages/project-editor/ui-components/Tree.tsx

@@ -171,18 +171,13 @@ const TreeRow = observer(
 
 ////////////////////////////////////////////////////////////////////////////////
 
-export interface DropFile {
-    path: string;
-    type: string;
-}
-
 interface TreeProps {
     treeAdapter: TreeAdapter;
     tabIndex?: number;
     onFocus?: () => void;
     onEditItem?: (itemId: string) => void;
     renderItem?: (itemId: string) => React.ReactNode;
-    onFilesDrop?: (files: DropFile[]) => void;
+    onFilesDrop?: (files: File[]) => void;
 }
 
 export const Tree = observer(
@@ -642,17 +637,19 @@ export const Tree = observer(
             this.props.treeAdapter.draggableAdapter!.onDragLeave(event);
         }
 
-        onDrop(event: any) {
+        onDrop(event: React.DragEvent) {
             event.stopPropagation();
             event.preventDefault();
 
             if (isFileData(event)) {
                 if (this.props.onFilesDrop) {
-                    const files: DropFile[] = [];
+                    const files: File[] = [];
                     for (let i = 0; i < event.dataTransfer.items.length; i++) {
                         const item = event.dataTransfer.items[i];
                         const file = item.getAsFile();
-                        files.push(file);
+                        if (file) {
+                            files.push(file);
+                        }
                     }
                     this.props.onFilesDrop(files);
                 }