diff --git a/src/frameworks/tkinter/engine/code.js b/src/frameworks/tkinter/engine/code.js index 14554a1..9e94366 100644 --- a/src/frameworks/tkinter/engine/code.js +++ b/src/frameworks/tkinter/engine/code.js @@ -170,7 +170,7 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as createFileList.push({ fileData: asset.originFileObj, fileName: asset.name, - folder: "assets/media" + folder: "assets/others" }) } diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js index 62bc838..07610c3 100644 --- a/src/frameworks/tkinter/plugins/analogTimepicker.js +++ b/src/frameworks/tkinter/plugins/analogTimepicker.js @@ -41,6 +41,7 @@ class AnalogTimePicker extends TkinterBase{ this.state = { ...this.state, + widgetName: "Timepicker", size: { width: 'fit', height: 'fit' }, attrs: { ...newAttrs, @@ -115,9 +116,6 @@ class AnalogTimePicker extends TkinterBase{ componentDidMount(){ super.componentDidMount() - this.setWidgetName("Time picker") - this.setAttrValue("styling.backgroundColor", "#E4E2E2") - this.timePicker = timePicker({ element: this.timePickerRef.current, mode: "12" diff --git a/src/frameworks/tkinter/plugins/mapview.js b/src/frameworks/tkinter/plugins/mapview.js index 123edd8..a2cd063 100644 --- a/src/frameworks/tkinter/plugins/mapview.js +++ b/src/frameworks/tkinter/plugins/mapview.js @@ -7,12 +7,20 @@ import { removeKeyFromObject } from "../../../utils/common" import MapImage from "./assets/map.png" import { MinusOutlined, PlayCircleFilled, PlusOutlined } from "@ant-design/icons" +import { TkinterBase } from "../widgets/base" -class MapView extends Widget{ +class MapView extends TkinterBase{ static widgetType = "map_view" + static requiredImports = [ + ...TkinterBase.requiredImports, + "import tkintermapview" + ] + + static requirements = ["tkintermapview"] + constructor(props) { super(props) @@ -21,17 +29,26 @@ class MapView extends Widget{ const newAttrs = removeKeyFromObject("layout", this.state.attrs) this.state = { - ...this.state, + ...this.state, + widgetName: "Map viewer", size: { width: 400, height: 250 }, } } - componentDidMount(){ - super.componentDidMount() - this.setWidgetName("Map viewer") - this.setAttrValue("styling.backgroundColor", "#E4E2E2") + // componentDidMount(){ + // super.componentDidMount() + // } + + generateCode(variableName, parent){ + + + return [ + `${variableName} = tkintermapview.TkinterMapView(master=${parent})`, + `${variableName}.${this.getLayoutCode()}` + ] } + getToolbarAttrs(){ const toolBarAttrs = super.getToolbarAttrs() diff --git a/src/frameworks/tkinter/plugins/pandasTable.js b/src/frameworks/tkinter/plugins/pandasTable.js index 1b38cd5..36edeb2 100644 --- a/src/frameworks/tkinter/plugins/pandasTable.js +++ b/src/frameworks/tkinter/plugins/pandasTable.js @@ -9,6 +9,9 @@ import { removeKeyFromObject } from "../../../utils/common" import MapImage from "./assets/map.png" import { MinusOutlined, PlusOutlined } from "@ant-design/icons" +import { TkinterBase } from "../widgets/base" +import Tools from "../../../canvas/constants/tools" +import { getPythonAssetPath } from "../../utils/pythonFilePath" const ResizableTable = ({minRows=5, minCols=5}) => { @@ -64,10 +67,19 @@ const ResizableTable = ({minRows=5, minCols=5}) => { } -class PandasTable extends Widget{ +class PandasTable extends TkinterBase{ static widgetType = "pandas_table" + static requiredImports = [ + ...TkinterBase.requiredImports, + "import os", + "from pandastable import Table", + ] + + static requirements = ["pandastable"] + + constructor(props) { super(props) @@ -77,14 +89,98 @@ class PandasTable extends Widget{ this.state = { ...this.state, + widgetName: "Pandas Table", size: { width: 400, height: 250 }, + attrs: { + ...newAttrs, + styling: { + ...newAttrs.styling, + textColor: { + label: "Text Color", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "", + onChange: (value) => { + this.setAttrValue("styling.textColor", value) + } + }, + cellBg: { + label: "Cell background", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "", + onChange: (value) => { + this.setAttrValue("styling.textColor", value) + } + }, + outlineColor: { + label: "Box outline color", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "", + onChange: (value) => { + this.setAttrValue("styling.textColor", value) + } + }, + }, + defaultTable: { + label: "Default table", + tool: Tools.UPLOADED_LIST, + toolProps: {filterOptions: ["text/csv"]}, + value: "", + onChange: (value) => this.setAttrValue("defaultTable", value) + }, + enableEdit: { + label: "Enable editing", + tool: Tools.CHECK_BUTTON, + value: false, + onChange: (value) => { + this.setAttrValue("enableEdit", value) + } + + }, + } } } - componentDidMount(){ - super.componentDidMount() - this.setWidgetName("Pandas Table") - this.setAttrValue("styling.backgroundColor", "#E4E2E2") + // componentDidMount(){ + // super.componentDidMount() + // this.setWidgetName("Pandas Table") + // this.setAttrValue("styling.backgroundColor", "#E4E2E2") + // } + + generateCode(variableName, parent){ + + const defaultTable = this.getAttrValue("defaultTable") + + const textColor = this.getAttrValue("styling.textColor") + const cellBg = this.getAttrValue("styling.cellBg") + const outlineColor = this.getAttrValue("styling.outlineColor") + + const enableEdit = this.getAttrValue("enableEdit") + + const code = [ + `${variableName} = Table(master=${parent})`, + `${variableName}.editable = ${enableEdit ? "True" : "False"}`, + ] + + if (textColor){ + code.push(`${variableName}.textColor = "${textColor}"`) + } + if (cellBg){ + code.push(`${variableName}.cellbackgr = "${cellBg}"`) + } + + if (outlineColor){ + code.push(`${variableName}.boxoutlinecolor = "${outlineColor}"`) + } + + if (defaultTable){ + code.push(`${variableName}.importCSV(${getPythonAssetPath(defaultTable, "text/csv")})`) + } + + return [ + ...code, + `${variableName}.show()`, + `${variableName}.${this.getLayoutCode()}` + ] } getToolbarAttrs(){ diff --git a/src/frameworks/tkinter/plugins/videoPlayer.js b/src/frameworks/tkinter/plugins/videoPlayer.js index 889dada..ad012cc 100644 --- a/src/frameworks/tkinter/plugins/videoPlayer.js +++ b/src/frameworks/tkinter/plugins/videoPlayer.js @@ -6,6 +6,7 @@ import { removeKeyFromObject } from "../../../utils/common" import VideoImage from "./assets/video.jpg" import { PlayCircleFilled } from "@ant-design/icons" import { TkinterBase } from "../widgets/base" +import { getPythonAssetPath } from "../../utils/pythonFilePath" class VideoPlayer extends TkinterBase{ @@ -14,7 +15,8 @@ class VideoPlayer extends TkinterBase{ static requiredImports = [ ...TkinterBase.requiredImports, - 'from tkVideoPlayer import TkinterVideo' + "import os", + "from tkVideoPlayer import TkinterVideo" ] static requirements = ["tkvideoplayer"] @@ -30,6 +32,7 @@ class VideoPlayer extends TkinterBase{ this.state = { ...this.state, size: { width: 'fit', height: 'fit' }, + widgetName: "Video player", attrs: { ...newAttrs, play: { @@ -46,7 +49,7 @@ class VideoPlayer extends TkinterBase{ tool: Tools.UPLOADED_LIST, toolProps: {filterOptions: ["video/mp4", "video/webm", "video/m4v"]}, value: "", - onChange: (value) => {console.log("Value: ", value);this.setAttrValue("defaultVideo", value)} + onChange: (value) => this.setAttrValue("defaultVideo", value) }, } } @@ -54,8 +57,7 @@ class VideoPlayer extends TkinterBase{ componentDidMount(){ super.componentDidMount() - this.setWidgetName("Video Player") - this.setAttrValue("styling.backgroundColor", "#E4E2E2") + // this.setAttrValue("styling.backgroundColor", "#E4E2E2") } generateCode(variableName, parent){ @@ -68,9 +70,8 @@ class VideoPlayer extends TkinterBase{ `${variableName} = TkinterVideo(master=${parent}, scaled=True)`, ] - // FIXME: correct the asset path (windows and unix are different paths) if (defaultVideo){ - code.push(`${variableName}.load("${defaultVideo}")`) + code.push(`${variableName}.load(${getPythonAssetPath(defaultVideo, "video")})`) } if (play){ diff --git a/src/frameworks/tkinter/sidebarPlugins.js b/src/frameworks/tkinter/sidebarPlugins.js index aba361a..2c21077 100644 --- a/src/frameworks/tkinter/sidebarPlugins.js +++ b/src/frameworks/tkinter/sidebarPlugins.js @@ -38,8 +38,8 @@ const TkinterPluginWidgets = [ link: "https://github.com/TomSchimansky/TkinterMapView", widgetClass: MapView, license: { - name: "MIT", - url: "" + name: "CC0 1.0", + url: "https://github.com/TomSchimansky/TkinterMapView/blob/main/LICENSE.txt" } }, { diff --git a/src/frameworks/utils/pythonFilePath.js b/src/frameworks/utils/pythonFilePath.js new file mode 100644 index 0000000..b0cc512 --- /dev/null +++ b/src/frameworks/utils/pythonFilePath.js @@ -0,0 +1,26 @@ + + +export function getPythonAssetPath(fileName, fileType){ + + let assetPath = "others" + + switch (fileType) { + case "image": + assetPath = "images" + break + + case "video": + assetPath = "videos" + break + + case "audio": + assetPath = "audios" + break + + default: + break + } + + return `os.path.join("assets", "${assetPath}", "${fileName}")` + +} \ No newline at end of file