diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js index 30c09f0..a8e7c74 100644 --- a/src/canvas/toolbar.js +++ b/src/canvas/toolbar.js @@ -99,7 +99,6 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { const renderUploadDropDown = (val, filter) => { - let uploadOptions = [...uploadItems] if (filter){ @@ -115,6 +114,8 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { placeholder="select content" showSearch className="tw-w-full" + value={val.value} + onChange={(value) => handleChange(value, val.onChange)} filterOption={(input, option) => (option?.value ?? '').toLowerCase().includes(input.toLowerCase()) } @@ -283,7 +284,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { } { val.tool === Tools.UPLOADED_LIST && ( - renderUploadDropDown(val.value, val?.toolProps?.filterOptions || null) + renderUploadDropDown(val, val?.toolProps?.filterOptions || null) ) } diff --git a/src/frameworks/tkinter/engine/code.js b/src/frameworks/tkinter/engine/code.js index 3f6257c..14554a1 100644 --- a/src/frameworks/tkinter/engine/code.js +++ b/src/frameworks/tkinter/engine/code.js @@ -18,8 +18,8 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl let varName = widgetRef.getVariableName() // Add imports and requirements to sets - widgetRef.getImports().forEach(importItem => imports.add(importItem)); - widgetRef.getRequirements().forEach(requirementItem => requirements.add(requirementItem)); + widgetRef.getImports().forEach(importItem => imports.add(importItem)) + widgetRef.getRequirements().forEach(requirementItem => requirements.add(requirementItem)) // Set main variable if the widget is MainWindow if (widget.widgetType === MainWindow) { @@ -126,7 +126,7 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as `${mainVariable}.mainloop()`, ] - console.log("Code: ", code.join(""), "\n", requirements.join("\n")) + console.log("Code: ", code.join(""), "\n\n requirements:", requirements.join("\n")) message.info("starting zipping files, download will start in a few seconds") diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js index 6ac87d9..62bc838 100644 --- a/src/frameworks/tkinter/plugins/analogTimepicker.js +++ b/src/frameworks/tkinter/plugins/analogTimepicker.js @@ -10,13 +10,20 @@ import { TkinterBase } from "../widgets/base" import "./styles/timepickerStyle.css" +const Themes = { + NAVY_BLUE: "Navy Blue", + DRACULA: "Dracula", + PURPLE: "Purple", + NONE: "" +} + class AnalogTimePicker extends TkinterBase{ static widgetType = "analogue_timepicker" static requiredImports = [ ...TkinterBase.requiredImports, - 'from tktimepicker import AnalogPicker, AnalogThemes' + 'from tktimepicker import AnalogPicker, AnalogThemes, constants' ] static requirements = ["tkTimePicker"] @@ -43,7 +50,7 @@ class AnalogTimePicker extends TkinterBase{ tool: Tools.SELECT_DROPDOWN, toolProps: {placeholder: "select theme"}, value: "", - options: ["Dracula", "Navy blue", "Purple"].map(val => ({value: val, label: val})), + options: Object.values(Themes).map(val => ({value: val, label: val})), onChange: (value) => this.handleThemeChange(value) }, ...newAttrs.styling, @@ -130,19 +137,19 @@ class AnalogTimePicker extends TkinterBase{ handleThemeChange(value){ this.setAttrValue("styling.theme", value) - if (value === "Navy blue"){ + if (value === Themes.NAVY_BLUE){ this.setAttrValue("styling.handleColor", "#009688") this.setAttrValue("styling.displayColor", "#009688") this.setAttrValue("styling.backgroundColor", "#fff") this.setAttrValue("styling.clockColor", "#EEEEEE") this.setAttrValue("styling.numberColor", "#000") - }else if (value === "Dracula"){ + }else if (value === Themes.DRACULA){ this.setAttrValue("styling.handleColor", "#863434") this.setAttrValue("styling.displayColor", "#404040") this.setAttrValue("styling.backgroundColor", "#404040") this.setAttrValue("styling.clockColor", "#363636") this.setAttrValue("styling.numberColor", "#fff") - }else if (value === "Purple"){ + }else if (value === Themes.PURPLE){ this.setAttrValue("styling.handleColor", "#EE333D") this.setAttrValue("styling.displayColor", "#71135C") this.setAttrValue("styling.backgroundColor", "#4E0D3A") @@ -163,11 +170,47 @@ class AnalogTimePicker extends TkinterBase{ const numColor = this.getAttrValue("styling.numberColor") const handleColor = this.getAttrValue("styling.handleColor") - const config = convertObjectToKeyValueString(this.getConfigCode()) + const code = [ + `${variableName} = AnalogPicker(master=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`, + ] + + if (theme){ + + code.push(`${variableName}_theme = AnalogThemes(${variableName})`) + if (theme === Themes.NAVY_BLUE){ + code.push(`${variableName}_theme.setNavyBlue()`) + }else if (theme === Themes.DRACULA){ + code.push(`${variableName}_theme.setDracula()`) + }else if (theme === Themes.PURPLE){ + code.push(`${variableName}_theme.setPurple()`) + } + + }else{ + + const configAnalog = { + "canvas_bg": `"${bgColor}"`, + "textcolor": `"${numColor}"`, + "bg": `"${clockColor}"`, + "handlecolor": `"${handleColor}"`, + "headcolor": `"${handleColor}"` + } + + const displayConfig = { + bg: `"${displayColor}"` + } + + code.push(`${variableName}.configAnalog(${convertObjectToKeyValueString(configAnalog)})`) + code.push(`${variableName}.configSpin(${convertObjectToKeyValueString(displayConfig)})`) + + + // code.push(`configAnalog(canvas_bg="${bgColor}", textcolor="${numColor}", + // bg="${clockColor}", handcolor="${handleColor}", headcolor="${handleColor}")`) + + // code.push(`configSpin(bg="${displayColor}"`) + } return [ - `${variableName} = AnalogPicker(master=${parent})`, - `${variableName}.config(${config})`, + ...code, `${variableName}.${this.getLayoutCode()}` ] } diff --git a/src/frameworks/tkinter/plugins/videoPlayer.js b/src/frameworks/tkinter/plugins/videoPlayer.js index ef0623d..889dada 100644 --- a/src/frameworks/tkinter/plugins/videoPlayer.js +++ b/src/frameworks/tkinter/plugins/videoPlayer.js @@ -1,17 +1,25 @@ import React from "react" -import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" import VideoImage from "./assets/video.jpg" import { PlayCircleFilled } from "@ant-design/icons" +import { TkinterBase } from "../widgets/base" -class VideoPlayer extends Widget{ +class VideoPlayer extends TkinterBase{ static widgetType = "video_player" + static requiredImports = [ + ...TkinterBase.requiredImports, + 'from tkVideoPlayer import TkinterVideo' + ] + + static requirements = ["tkvideoplayer"] + + constructor(props) { super(props) @@ -22,6 +30,25 @@ class VideoPlayer extends Widget{ this.state = { ...this.state, size: { width: 'fit', height: 'fit' }, + attrs: { + ...newAttrs, + play: { + label: "Start playing", + tool: Tools.CHECK_BUTTON, + value: false, + onChange: (value) => { + this.setAttrValue("play", value) + } + + }, + defaultVideo: { + label: "Video", + tool: Tools.UPLOADED_LIST, + toolProps: {filterOptions: ["video/mp4", "video/webm", "video/m4v"]}, + value: "", + onChange: (value) => {console.log("Value: ", value);this.setAttrValue("defaultVideo", value)} + }, + } } } @@ -31,6 +58,31 @@ class VideoPlayer extends Widget{ this.setAttrValue("styling.backgroundColor", "#E4E2E2") } + generateCode(variableName, parent){ + + + const defaultVideo = this.getAttrValue("defaultVideo") + const play = this.getAttrValue("play") + + const code = [ + `${variableName} = TkinterVideo(master=${parent}, scaled=True)`, + ] + + // FIXME: correct the asset path (windows and unix are different paths) + if (defaultVideo){ + code.push(`${variableName}.load("${defaultVideo}")`) + } + + if (play){ + code.push(`${variableName}.play()`) + } + + return [ + ...code, + `${variableName}.${this.getLayoutCode()}` + ] + } + getToolbarAttrs(){ const toolBarAttrs = super.getToolbarAttrs()