Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added pandatable and map viewer attributes

Browse Source
This commit is contained in:
paul
2024-09-28 19:14:24 +05:30
parent 75dc3d7ae2
commit e12d76a7bc
7 changed files with 161 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frameworks/tkinter/engine/code.js
View File

@@ -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"
})
}

4
src/frameworks/tkinter/plugins/analogTimepicker.js
View File

@@ -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"

29
src/frameworks/tkinter/plugins/mapview.js
View File

@@ -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()

106
src/frameworks/tkinter/plugins/pandasTable.js
View File

@@ -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(){

13
src/frameworks/tkinter/plugins/videoPlayer.js
View File

@@ -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){

4
src/frameworks/tkinter/sidebarPlugins.js
View File

@@ -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"
}
},
{

26
src/frameworks/utils/pythonFilePath.js Normal file
View File

@@ -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}")`
}