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

fixing code output for customtkinter

Browse Source
This commit is contained in:
paul
2024-09-30 19:13:26 +05:30
parent b2b6eb0b75
commit af0ac90499
22 changed files with 149 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/frameworks/customtk/widgets/ checkButton.js
View File

@@ -2,10 +2,10 @@
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { CheckSquareFilled } from "@ant-design/icons"
import { TkinterWidgetBase } from "./base"
import { CustomTkWidgetBase } from "./base"
export class CheckBox extends TkinterWidgetBase{
export class CheckBox extends CustomTkWidgetBase{
static widgetType = "check_button"
constructor(props) {
@@ -65,8 +65,8 @@ export class CheckBox extends TkinterWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
const code = [
`${variableName} = tk.Checkbutton(master=${parent}, text="${labelText}")`,
`${variableName}.config(${config})`,
`${variableName} = ctk.CTkCheckBox(master=${parent}, text="${labelText}")`,
`${variableName}.configure(${config})`,
]
if (this.getAttrValue("defaultChecked")){
@@ -120,7 +120,7 @@ export class CheckBox extends TkinterWidgetBase{
}
export class RadioButton extends TkinterWidgetBase{
export class RadioButton extends CustomTkWidgetBase{
// FIXME: the radio buttons are not visible because of the default heigh provided
static widgetType = "radio_button"
@@ -162,7 +162,7 @@ export class RadioButton extends TkinterWidgetBase{
const code = [
`${variableName}_var = tk.IntVar()`,
`${variableName}_var = ctk.IntVar()`,
]
const radios = this.getAttrValue("radios")
@@ -170,8 +170,8 @@ export class RadioButton extends TkinterWidgetBase{
const radioBtnVariable = `${variableName}_${idx}`
code.push(`\n`)
code.push(`${radioBtnVariable} = tk.Radiobutton(master=${parent}, variable=${variableName}_var, text="${radio_text}")`)
code.push(`${radioBtnVariable}.config(${config}, value=${idx})`)
code.push(`${radioBtnVariable} = ctk.CTkRadioButton(master=${parent}, variable=${variableName}_var, text="${radio_text}")`)
code.push(`${radioBtnVariable}.configure(${config}, value=${idx})`)
code.push(`${radioBtnVariable}.${this.getLayoutCode()}`)
})

36
src/frameworks/customtk/widgets/base.js
View File

@@ -10,7 +10,7 @@ import { JUSTIFY, RELIEF } from "../constants/styling"
export class CustomTkBase extends Widget {
static requiredImports = ['import tkinter as tk']
static requiredImports = ['import customtkinter as ctk']
static requirements = ['customtkinter']
@@ -51,7 +51,7 @@ export class CustomTkBase extends Widget {
}else if (parentLayout === Layouts.FLEX){
const config = {
side: direction === "row" ? "tk.LEFT" : "tk.TOP",
side: direction === "row" ? "ctk.LEFT" : "ctk.TOP",
}
if (gap > 0){
@@ -445,6 +445,15 @@ export class CustomTkWidgetBase extends CustomTkBase{
this.setAttrValue("styling.foregroundColor", value)
}
},
borderColor: {
label: "Border Color",
tool: Tools.COLOR_PICKER,
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("borderColor", value)
this.setAttrValue("styling.borderColor", value)
}
},
borderWidth: {
label: "Border thickness",
tool: Tools.NUMBER_INPUT,
@@ -464,7 +473,7 @@ export class CustomTkWidgetBase extends CustomTkBase{
this.setWidgetInnerStyle("borderRadius", `${value}px`)
this.setAttrValue("styling.borderRadius", value)
}
}
},
// justify: {
// label: "Justify",
// tool: Tools.SELECT_DROPDOWN,
@@ -567,6 +576,15 @@ export class CustomTkWidgetBase extends CustomTkBase{
text_color: `"${this.getAttrValue("styling.foregroundColor")}"`,
}
if (this.getAttrValue("styling.borderRadius")){
config["corner_radius"] = this.getAttrValue("styling.borderRadius")
}
if (this.getAttrValue("styling.borderColor")){
config["border_color"] = `"${this.getAttrValue("styling.borderColor")}"`
}
if (this.getAttrValue("styling.borderWidth"))
config["border_width"] = this.getAttrValue("styling.borderWidth")
@@ -587,12 +605,12 @@ export class CustomTkWidgetBase extends CustomTkBase{
// FIXME: add width and height, the scales may not be correct as the width and height are based on characters in pack and grid not pixels
// if (!this.state.fitContent.width){
// config["width"] = this.state.size.width
// }
// if (!this.state.fitContent.height){
// config["height"] = this.state.size.height
// }
if (!this.state.fitContent.width){
config["width"] = this.state.size.width
}
if (!this.state.fitContent.height){
config["height"] = this.state.size.height
}
return config

6
src/frameworks/customtk/widgets/button.js
View File

@@ -1,9 +1,9 @@
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { TkinterWidgetBase } from "./base"
import { CustomTkWidgetBase } from "./base"
class Button extends TkinterWidgetBase{
class Button extends CustomTkWidgetBase{
static widgetType = "button"
@@ -41,7 +41,7 @@ class Button extends TkinterWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Button(master=${parent}, text="${labelText}")`,
`${variableName} = ctk.CTkButton(master=${parent}, text="${labelText}")`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]

8
src/frameworks/customtk/widgets/frame.js
View File

@@ -1,8 +1,8 @@
import Widget from "../../../canvas/widgets/base"
import {TkinterBase} from "./base"
import { CustomTkBase } from "./base"
class Frame extends TkinterBase{
class Frame extends CustomTkBase{
static widgetType = "frame"
@@ -31,8 +31,8 @@ class Frame extends TkinterBase{
const bg = this.getAttrValue("styling.backgroundColor")
return [
`${variableName} = tk.Frame(master=${parent})`,
`${variableName}.config(bg="${bg}")`,
`${variableName} = ctk.CTkFrame(master=${parent})`,
`${variableName}.configure(bg="${bg}")`,
`${variableName}.${this.getLayoutCode()}`
]
}

14
src/frameworks/customtk/widgets/input.js
View File

@@ -1,9 +1,9 @@
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { TkinterWidgetBase } from "./base"
import { CustomTkWidgetBase } from "./base"
export class Input extends TkinterWidgetBase{
export class Input extends CustomTkWidgetBase{
static widgetType = "entry"
@@ -40,8 +40,8 @@ export class Input extends TkinterWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Entry(master=${parent}, text="${placeHolderText}")`,
`${variableName}.config(${config})`,
`${variableName} = ctk.CTkEntry(master=${parent}, text="${placeHolderText}")`,
`${variableName}.configure(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}
@@ -77,7 +77,7 @@ export class Input extends TkinterWidgetBase{
}
export class Text extends TkinterWidgetBase{
export class Text extends CustomTkWidgetBase{
static widgetType = "Text"
@@ -114,8 +114,8 @@ export class Text extends TkinterWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Text(master=${parent})`,
`${variableName}.config(${config})`,
`${variableName} = ctk.CTkTextbox(master=${parent})`,
`${variableName}.configure(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}

24
src/frameworks/customtk/widgets/label.js
View File

@@ -1,10 +1,10 @@
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { getPythonAssetPath } from "../../utils/pythonFilePath"
import { TkinterWidgetBase } from "./base"
import { CustomTkWidgetBase } from "./base"
class Label extends TkinterWidgetBase{
class Label extends CustomTkWidgetBase{
static widgetType = "label"
@@ -12,13 +12,17 @@ class Label extends TkinterWidgetBase{
constructor(props) {
super(props)
// border color and width is not available for label in customtkinter
let newAttrs = removeKeyFromObject("styling.borderColor", this.state.attrs)
newAttrs = removeKeyFromObject("styling.borderWidth", newAttrs)
this.state = {
...this.state,
widgetName: "Label",
size: { width: 80, height: 40 },
attrs: {
...this.state.attrs,
...newAttrs,
labelWidget: {
label: "Text",
tool: Tools.INPUT,
@@ -43,6 +47,7 @@ class Label extends TkinterWidgetBase{
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
// this.setWidgetName("label") // Don't do this this causes issues while loading data
}
@@ -70,10 +75,13 @@ class Label extends TkinterWidgetBase{
const labelText = this.getAttrValue("labelWidget")
const config = convertObjectToKeyValueString(this.getConfigCode())
// Border color and border width are not implemented for label
const {border_color, border_width, ...config} = this.getConfigCode()
const image = this.getAttrValue("imageUpload")
let labelInitialization = `${variableName} = tk.Label(master=${parent}, text="${labelText}")`
console.log("Object: ", config)
let labelInitialization = `${variableName} = ctk.CTkLabel(master=${parent}, text="${labelText}")`
const code = []
@@ -81,14 +89,14 @@ class Label extends TkinterWidgetBase{
code.push(`${variableName}_img = Image.open(${getPythonAssetPath(image.name, "image")})`)
code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
// code.push("\n")
labelInitialization = `${variableName} = tk.Label(master=${parent}, image=${variableName}_img, text="${labelText}", compound=tk.TOP)`
labelInitialization = `${variableName} = ctk.CTkLabel(master=${parent}, image=${variableName}_img, text="${labelText}", compound=ctk.TOP)`
}
// code.push("\n")
code.push(labelInitialization)
return [
...code,
`${variableName}.config(${config})`,
`${variableName}.configure(${convertObjectToKeyValueString(config)})`,
`${variableName}.${this.getLayoutCode()}`
]
}

4
src/frameworks/customtk/widgets/mainWindow.js
View File

@@ -44,8 +44,8 @@ class MainWindow extends CustomTkBase{
const backgroundColor = this.getAttrValue("styling.backgroundColor")
return [
`${variableName} = tk.Tk()`,
`${variableName}.config(bg="${backgroundColor}")`,
`${variableName} = ctk.CTk()`,
`${variableName}.configure(bg="${backgroundColor}")`,
`${variableName}.title("${this.getAttrValue("title")}")`
]
}

10
src/frameworks/customtk/widgets/optionMenu.js
View File

@@ -1,10 +1,10 @@
import Tools from "../../../canvas/constants/tools"
import { DownOutlined } from "@ant-design/icons"
import { TkinterWidgetBase} from "./base"
import { CustomTkWidgetBase} from "./base"
import { convertObjectToKeyValueString } from "../../../utils/common"
class OptionMenu extends TkinterWidgetBase{
class OptionMenu extends CustomTkWidgetBase{
static widgetType = "option_menu"
@@ -59,14 +59,14 @@ class OptionMenu extends TkinterWidgetBase{
const code = [
`${variableName}_options = ${options}`,
`${variableName}_var = tk.StringVar(value="${defaultValue || options.at(1) || ""}")`,
`${variableName} = tk.OptionMenu(${parent}, ${variableName}_var, *${variableName}_options)`
`${variableName}_var = ctk.StringVar(value="${defaultValue || options.at(1) || ""}")`,
`${variableName} = ctk.CTkOptionMenu(${parent}, ${variableName}_var, *${variableName}_options)`
]
return [
...code,
`${variableName}.config(${config})`,
`${variableName}.configure(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}

10
src/frameworks/customtk/widgets/slider.js
View File

@@ -1,10 +1,10 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import {TkinterBase, TkinterWidgetBase} from "./base"
import { CustomTkWidgetBase } from "./base"
class Slider extends TkinterWidgetBase{
class Slider extends CustomTkWidgetBase{
static widgetType = "scale"
// FIXME: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use
@@ -109,9 +109,9 @@ class Slider extends TkinterWidgetBase{
const defaultValue = this.getAttrValue("scale.default")
return [
`${variableName}_var = tk.DoubleVar(value=${defaultValue})`,
`${variableName} = tk.Scale(master=${parent}, variable=${variableName}_var)`,
`${variableName}.config(${convertObjectToKeyValueString(config)})`,
`${variableName}_var = ctk.DoubleVar(value=${defaultValue})`,
`${variableName} = ctk.CTkSlider(master=${parent}, variable=${variableName}_var)`,
`${variableName}.configure(${convertObjectToKeyValueString(config)})`,
`${variableName}.${this.getLayoutCode()}`
]
}

8
src/frameworks/customtk/widgets/spinBox.js
View File

@@ -2,10 +2,10 @@ import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { DownOutlined, UpOutlined } from "@ant-design/icons"
import {TkinterBase, TkinterWidgetBase} from "./base"
import { CustomTkWidgetBase } from "./base"
class SpinBox extends TkinterWidgetBase{
// TODO: https://github.com/TomSchimansky/CustomTkinter/wiki/Create-new-widgets-(Spinbox)
class SpinBox extends CustomTkWidgetBase{
static widgetType = "spin_box"
@@ -85,7 +85,7 @@ class SpinBox extends TkinterWidgetBase{
return [
...code,
`${variableName}.config(${convertObjectToKeyValueString(config)})`,
`${variableName}.configure(${convertObjectToKeyValueString(config)})`,
`${variableName}.${this.getLayoutCode()}`
]
}

4
src/frameworks/customtk/widgets/toplevel.js
View File

@@ -42,8 +42,8 @@ class TopLevel extends Widget{
const backgroundColor = this.getAttrValue("styling.backgroundColor")
return [
`${variableName} = tk.Toplevel(master=${parent})`,
`${variableName}.config(bg="${backgroundColor}")`,
`${variableName} = ctk.CTkToplevel(master=${parent})`,
`${variableName}.configure(bg="${backgroundColor}")`,
`${variableName}.title("${this.getAttrValue("title")}")`
]
}