From f4cf371d187ba76ad6a19854a30ae6e2de0feabe Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Fri, 11 Oct 2024 15:42:24 +0200 Subject: [PATCH] #581 --- package.json | 2 +- packages/eez-studio-ui/_stylesheets/app.less | 18 -- .../_stylesheets/project-editor.less | 53 ++++- .../lvgl/build-image-info-dialog.tsx | 206 ++++++++++++++++++ packages/project-editor/lvgl/build.ts | 10 + .../project/ui/ProjectEditor.tsx | 2 +- .../project-editor/project/ui/Toolbar.tsx | 17 +- packages/project-editor/store/navigation.ts | 48 +++- 8 files changed, 319 insertions(+), 37 deletions(-) create mode 100644 packages/project-editor/lvgl/build-image-info-dialog.tsx diff --git a/package.json b/package.json index e8bf4712..ea2779db 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "author": "Envox ", "description": "Cross-platform visual development tool and SCPI instrument controller", "homepage": "https://www.envox.hr/eez/studio/studio-introduction.html", - "version": "0.18.2", + "version": "0.19.0", "revision": "1", "license": "GPL-3.0-only", "repository": "https://github.com/eez-open/studio", diff --git a/packages/eez-studio-ui/_stylesheets/app.less b/packages/eez-studio-ui/_stylesheets/app.less index 642b555d..116e8344 100644 --- a/packages/eez-studio-ui/_stylesheets/app.less +++ b/packages/eez-studio-ui/_stylesheets/app.less @@ -1168,24 +1168,6 @@ button.EezStudio_Action { padding-top: 15px; } -.EezStudio_ToolbarNav { - padding: 3px; - background-color: @panelHeaderColor; - border-bottom: 1px solid @borderColor; - - .btn { - padding: 0.25rem 0.75rem; - } - - .btn-group:not(:last-child) { - margin-right: 20px; - } - - select { - height: 36px; - } -} - .EezStudio_PanelHeader { border: 0 solid @borderColor; border-bottom-width: 1px; diff --git a/packages/eez-studio-ui/_stylesheets/project-editor.less b/packages/eez-studio-ui/_stylesheets/project-editor.less index 9b037ca4..6249dfdb 100644 --- a/packages/eez-studio-ui/_stylesheets/project-editor.less +++ b/packages/eez-studio-ui/_stylesheets/project-editor.less @@ -60,13 +60,47 @@ } } -.EezStudio_ProjectEditorMainContentWrapper { +.EezStudio_ProjectEditor_MainContentWrapper { flex-grow: 1; display: flex; flex-direction: column; - > .EezStudio_ToolbarNav { + > .EezStudio_ProjectEditor_ToolbarNav { + padding: 3px; + background-color: @panelHeaderColor; + border-bottom: 1px solid @borderColor; min-height: 45px; + + .btn { + padding: 0.25rem 0.75rem; + } + + .btn-group:not(:last-child) { + margin-right: 20px; + } + + select { + height: 36px; + } + + .EezStudio_ProjectEditor_ToolbarNav_EditorButtons { + @media (min-width: 1600px) { + width: 0; + } + justify-content: flex-start; + display: flex; + } + + .EezStudio_ProjectEditor_ToolbarNav_RunEditSwitchControls { + display: flex; + } + + .EezStudio_ProjectEditor_ToolbarNav_FlowRuntimeControls { + @media (min-width: 1600px) { + width: 0; + } + justify-content: "flex-end"; + } } } @@ -3691,3 +3725,18 @@ } } } + +.EezStudio_LVGLBuildImageInfoDialog { + .modal-body { + font-size: 120%; + + li { + margin-bottom: 20px; + } + + pre { + margin: 5px 0; + user-select: text !important; + } + } +} diff --git a/packages/project-editor/lvgl/build-image-info-dialog.tsx b/packages/project-editor/lvgl/build-image-info-dialog.tsx new file mode 100644 index 00000000..e366372c --- /dev/null +++ b/packages/project-editor/lvgl/build-image-info-dialog.tsx @@ -0,0 +1,206 @@ +import os from "os"; +import React from "react"; +import { observer } from "mobx-react"; + +import { Dialog, showDialog } from "eez-studio-ui/dialog"; +import { makeObservable } from "mobx"; + +export function showBuildImageInfoDialog() { + showDialog(); +} + +const BuildImageInfoDialog = observer( + class NewLVGLActionDialog extends React.Component { + constructor(props: any) { + super(props); + + makeObservable(this, {}); + } + + get isWindows() { + return os.platform() == "win32"; + } + + get isLinux() { + return os.platform() == "linux"; + } + + get isMac() { + return os.platform() == "darwin"; + } + + get pyhonInstallationInfo() { + if (this.isWindows) { + return ( +
  • +

    + Python 3 is installed on your system +

    +

    + You can install it from:{" "} + { + event.preventDefault(); + openLink( + "https://www.python.org/downloads/" + ); + }} + > + https://www.python.org/downloads/ + + . +

    +
    • + ); + } + + return ( +
  • +

    + Python 3 is installed on your system +

    +
    • + ); + } + + get pythonModulesInfo() { + if (this.isWindows) { + return ( +
  • +

    + Install pypng and lz4 Python modules: +

    + 
    python -m pip install pypng==0.20220715.0
    + 
    python -m pip install lz4
    +

    + To install lz4 module you will also need{" "} + { + event.preventDefault(); + openLink( + "https://visualstudio.microsoft.com/visual-cpp-build-tools/" + ); + }} + > + Microsoft Visual C++ Build Tools + + . +

    +
    • + ); + } + + if (this.isLinux) { + return ( +
  • +

    + Install pypng and lz4 Python modules: +

    + 
    python3 -m pip install pypng==0.20220715.0
    + 
    python3 -m pip install lz4
    +
    • + ); + } + + return ( +
  • +

    + Install pypng and lz4 Python modules: +

    + 
    python3 -m pip install pypng==0.20220715.0
    + 
    python3 -m pip install lz4
    +

    + { + event.preventDefault(); + openLink( + "https://github.com/eez-open/studio/issues/346" + ); + }} + > + Check this + {" "} + if Studio has trouble finding these modules. +

    +
    • + ); + } + + get pngquantInfo() { + if (this.isLinux) { + return ( +
  • +

    + Install pngquant tool: +

    + 
    sudo apt install pngquant
    +
    • + ); + } + + if (this.isMac) { + return ( +
  • +

    + Install pngquant tool: +

    + 
    brew install pngquant
    +
    • + ); + } + + return null; + } + + render() { + return ( + +

    + To convert images to C source files, EEZ Studio is using{" "} + { + event.preventDefault(); + openLink( + "https://github.com/lvgl/lvgl/blob/master/scripts/LVGLImage.py" + ); + }} + > + LVGLImage.py + {" "} + script provided by the LVGL team. +

    + +

    + To be able to execute this script the following + requirements must be fulfilled: +

    + +
      + {this.pyhonInstallationInfo} + {this.pythonModulesInfo} + {this.pngquantInfo} +
    + +
    +     + ); + } + } +); + +function openLink(url: string) { + const { shell } = require("electron"); + shell.openExternal(url); +} diff --git a/packages/project-editor/lvgl/build.ts b/packages/project-editor/lvgl/build.ts index 65716c51..490ea195 100644 --- a/packages/project-editor/lvgl/build.ts +++ b/packages/project-editor/lvgl/build.ts @@ -28,6 +28,7 @@ import { import { sourceRootDir } from "eez-studio-shared/util"; import { getSelectorBuildCode } from "project-editor/lvgl/style-helper"; import type { LVGLGroup } from "./groups"; +import { showBuildImageInfoDialog } from "./build-image-info-dialog"; export class LVGLBuild extends Build { project: Project; @@ -1371,6 +1372,8 @@ extern const ext_img_desc_t images[${this.bitmaps.length || 1}]; return; } + let showInfoDialog = false; + await Promise.all( this.bitmaps.map(bitmap => (async () => { @@ -1411,10 +1414,17 @@ ${source}`; MessageType.ERROR, `Error genereting bitmap file '${output}.c': ${err}` ); + if (this.isV9) { + showInfoDialog = true; + } } })() ) ); + + if (showInfoDialog) { + showBuildImageInfoDialog(); + } } async copyFontFiles() { diff --git a/packages/project-editor/project/ui/ProjectEditor.tsx b/packages/project-editor/project/ui/ProjectEditor.tsx index 85a85141..b2c4c7b9 100644 --- a/packages/project-editor/project/ui/ProjectEditor.tsx +++ b/packages/project-editor/project/ui/ProjectEditor.tsx @@ -79,7 +79,7 @@ export const ProjectEditorView = observer( return (
    -
    +
    {this.props.showToolbar && }
    diff --git a/packages/project-editor/project/ui/Toolbar.tsx b/packages/project-editor/project/ui/Toolbar.tsx index d9b08683..ff993b71 100644 --- a/packages/project-editor/project/ui/Toolbar.tsx +++ b/packages/project-editor/project/ui/Toolbar.tsx @@ -123,7 +123,7 @@ export const Toolbar = observer( } return ( -