diff --git a/src/App.js b/src/App.js
index 1506574..783a937 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,13 +11,19 @@ import UploadsContainer from './sidebar/uploadsContainer'
import WidgetsContainer from './sidebar/widgetsContainer'
import { DragProvider } from './components/draggable/draggableContext'
-import TkinterWidgets from './frameworks/tkinter/sidebarWidgets'
import PluginsContainer from './sidebar/pluginsContainer'
-import TkinterPluginWidgets from './frameworks/tkinter/sidebarPlugins'
-import FrameWorks from './constants/frameworks'
-import generateTkinterCode from './frameworks/tkinter/engine/code'
+
import { FileUploadProvider, useFileUploadContext } from './contexts/fileUploadContext'
import TemplatesContainer from './sidebar/templatesContainer'
+import FrameWorks from './constants/frameworks'
+
+import CustomTkWidgets from './frameworks/customtk/sidebarWidgets'
+import CustomTkPluginWidgets from './frameworks/customtk/sidebarPlugins'
+import generateCustomTkCode from './frameworks/customtk/engine/code'
+
+import TkinterWidgets from './frameworks/tkinter/sidebarWidgets'
+import TkinterPluginWidgets from './frameworks/tkinter/sidebarPlugins'
+import generateTkinterCode from './frameworks/tkinter/engine/code'
function App() {
@@ -33,6 +39,7 @@ function App() {
// const [uploadedAssets, setUploadedAssets] = useState([]) // a global storage for assets, since redux can't store files(serialize files)
const [sidebarWidgets, setSidebarWidgets] = useState(TkinterWidgets || [])
+ const [sidebarPlugins, setSidebarPlugins] = useState(TkinterPluginWidgets || [])
const {uploadedAssets} = useFileUploadContext()
@@ -48,7 +55,7 @@ function App() {
{
name: "Plugins",
icon: ,
- content:
+ content:
},
{
name: "Uploads",
@@ -135,7 +142,6 @@ function App() {
// }
const handleWidgetAddedToCanvas = (widgets) => {
- console.log("canvas ref: ", canvasRef)
setCanvasWidgets(widgets)
}
@@ -144,15 +150,28 @@ function App() {
if (UIFramework === FrameWorks.TKINTER){
generateTkinterCode(projectName, canvasRef.current.getWidgets() || [], canvasRef.current.widgetRefs || [], uploadedAssets)
}
+ else if (UIFramework === FrameWorks.CUSTOMTK){
+ generateCustomTkCode(projectName, canvasRef.current.getWidgets() || [], canvasRef.current.widgetRefs || [], uploadedAssets)
+
+ }
}
const handleFrameworkChange = (framework) => {
if (framework === UIFramework) return
+ // canvasRef?.current?.closeToolBar()
+ canvasRef?.current?.clearSelections()
canvasRef?.current?.clearCanvas()
-
setUIFramework(framework)
+
+ if (framework === FrameWorks.TKINTER){
+ setSidebarPlugins(TkinterPluginWidgets)
+ setSidebarWidgets(TkinterWidgets)
+ }else if (framework === FrameWorks.CUSTOMTK){
+ setSidebarPlugins(CustomTkPluginWidgets)
+ setSidebarWidgets(CustomTkWidgets)
+ }
}
diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index 9a1b732..40bb385 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -112,6 +112,8 @@ class Canvas extends React.Component {
this.createWidget = this.createWidget.bind(this)
+ this.closeToolBar = this.closeToolBar.bind(this)
+
// this.updateCanvasDimensions = this.updateCanvasDimensions.bind(this)
}
@@ -153,6 +155,13 @@ class Canvas extends React.Component {
this.canvasRef.current.style.transform = `translate(${currentTranslate.x}px, ${currentTranslate.y}px) scale(${zoom})`
}
+ closeToolBar(){
+ this.setState({
+ toolbarAttrs: null,
+ toolbarOpen: false
+ })
+ }
+
/**
*
* @returns {import("./widgets/base").Widget[]}
diff --git a/src/frameworks/customtk/assets/widgets/main/mainwindow.jpg b/src/frameworks/customtk/assets/widgets/main/mainwindow.jpg
deleted file mode 100644
index 72a62a0..0000000
Binary files a/src/frameworks/customtk/assets/widgets/main/mainwindow.jpg and /dev/null differ
diff --git a/src/frameworks/customtk/assets/widgets/main/mainwindow2.png b/src/frameworks/customtk/assets/widgets/main/mainwindow2.png
new file mode 100644
index 0000000..b8a581e
Binary files /dev/null and b/src/frameworks/customtk/assets/widgets/main/mainwindow2.png differ
diff --git a/src/frameworks/customtk/engine/code.js b/src/frameworks/customtk/engine/code.js
index 76ad508..6568b1d 100644
--- a/src/frameworks/customtk/engine/code.js
+++ b/src/frameworks/customtk/engine/code.js
@@ -7,7 +7,7 @@ import TopLevel from "../widgets/toplevel"
// FIXME: if the toplevel comes first, before the MainWindow in widgetlist the root may become null
// Recursive function to generate the code list, imports, requirements, and track mainVariable
-function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariable = null, mainVariable = "", usedVariableNames = new Set()) {
+function generateCustomTkCodeList(widgetList = [], widgetRefs = [], parentVariable = null, mainVariable = "", usedVariableNames = new Set()) {
let variableMapping = new Map() // Map widget to variable { widgetId: variableName }
let imports = new Set([])
let requirements = new Set([])
@@ -63,7 +63,7 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
// Recursively handle child widgets
if (widget.children && widget.children.length > 0) {
// Pass down the unique names for children to prevent duplication
- const childResult = generateTkinterCodeList(widget.children, widgetRefs, varName, mainVariable, usedVariableNames)
+ const childResult = generateCustomTkCodeList(widget.children, widgetRefs, varName, mainVariable, usedVariableNames)
// Merge child imports, requirements, and code
imports = new Set([...imports, ...childResult.imports])
@@ -83,9 +83,9 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
}
-async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], assetFiles){
+async function generateCustomTkCode(projectName, widgetList=[], widgetRefs=[], assetFiles){
- console.log("widgetList and refs", projectName, widgetList, widgetRefs, assetFiles)
+ // console.log("widgetList and refs", projectName, widgetList, widgetRefs, assetFiles)
let mainWindowCount = 0
@@ -111,7 +111,7 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
// widget - {id, widgetType: widgetComponentType, children: [], parent: "", initialData: {}}
- const generatedObject = generateTkinterCodeList(filteredWidgetList, widgetRefs, "", "")
+ const generatedObject = generateCustomTkCodeList(filteredWidgetList, widgetRefs, "", "")
const {code: codeLines, imports, requirements, mainVariable} = generatedObject
@@ -130,6 +130,7 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
message.info("starting zipping files, download will start in a few seconds")
+ return
const createFileList = [
{
@@ -188,4 +189,4 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
}
-export default generateTkinterCode
\ No newline at end of file
+export default generateCustomTkCode
\ No newline at end of file
diff --git a/src/frameworks/customtk/plugins/analogTimepicker.js b/src/frameworks/customtk/plugins/analogTimepicker.js
index 41a30fc..f92f480 100644
--- a/src/frameworks/customtk/plugins/analogTimepicker.js
+++ b/src/frameworks/customtk/plugins/analogTimepicker.js
@@ -5,7 +5,7 @@ import { timePicker } from 'analogue-time-picker'
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
-import { TkinterBase } from "../widgets/base"
+import { CustomTkBase } from "../widgets/base"
import "./styles/timepickerStyle.css"
@@ -17,12 +17,12 @@ const Themes = {
NONE: ""
}
-class AnalogTimePicker extends TkinterBase{
+class AnalogTimePicker extends CustomTkBase{
static widgetType = "analog_timepicker"
static requiredImports = [
- ...TkinterBase.requiredImports,
+ ...CustomTkBase.requiredImports,
'from tktimepicker import AnalogPicker, AnalogThemes, constants'
]
diff --git a/src/frameworks/customtk/plugins/mapview.js b/src/frameworks/customtk/plugins/mapview.js
index a2cd063..1447aa9 100644
--- a/src/frameworks/customtk/plugins/mapview.js
+++ b/src/frameworks/customtk/plugins/mapview.js
@@ -7,15 +7,15 @@ import { removeKeyFromObject } from "../../../utils/common"
import MapImage from "./assets/map.png"
import { MinusOutlined, PlayCircleFilled, PlusOutlined } from "@ant-design/icons"
-import { TkinterBase } from "../widgets/base"
+import { CustomTkBase } from "../widgets/base"
-class MapView extends TkinterBase{
+class MapView extends CustomTkBase{
static widgetType = "map_view"
static requiredImports = [
- ...TkinterBase.requiredImports,
+ ...CustomTkBase.requiredImports,
"import tkintermapview"
]
diff --git a/src/frameworks/customtk/plugins/pandasTable.js b/src/frameworks/customtk/plugins/pandasTable.js
index 14ef746..c072805 100644
--- a/src/frameworks/customtk/plugins/pandasTable.js
+++ b/src/frameworks/customtk/plugins/pandasTable.js
@@ -9,7 +9,7 @@ import { removeKeyFromObject } from "../../../utils/common"
import MapImage from "./assets/map.png"
import { MinusOutlined, PlusOutlined } from "@ant-design/icons"
-import { TkinterBase } from "../widgets/base"
+import { CustomTkBase } from "../widgets/base"
import Tools from "../../../canvas/constants/tools"
import { getPythonAssetPath } from "../../utils/pythonFilePath"
@@ -67,12 +67,12 @@ const ResizableTable = ({minRows=5, minCols=5}) => {
}
-class PandasTable extends TkinterBase{
+class PandasTable extends CustomTkBase{
static widgetType = "pandas_table"
static requiredImports = [
- ...TkinterBase.requiredImports,
+ ...CustomTkBase.requiredImports,
"import os",
"from pandastable import Table",
]
@@ -157,7 +157,7 @@ class PandasTable extends TkinterBase{
const enableEdit = this.getAttrValue("enableEdit")
const code = [
- `${variableName}_table_frame = tk.Frame(master=${parent})`,
+ `${variableName}_table_frame = ctk.CTkFrame(master=${parent})`,
`${variableName}_table_frame.${this.getLayoutCode()}`,
`${variableName} = Table(parent=${variableName}_table_frame)`,
diff --git a/src/frameworks/customtk/plugins/videoPlayer.js b/src/frameworks/customtk/plugins/videoPlayer.js
index 15e2dcf..2dedb51 100644
--- a/src/frameworks/customtk/plugins/videoPlayer.js
+++ b/src/frameworks/customtk/plugins/videoPlayer.js
@@ -5,16 +5,16 @@ import { removeKeyFromObject } from "../../../utils/common"
import VideoImage from "./assets/video.jpg"
import { PlayCircleFilled } from "@ant-design/icons"
-import { TkinterBase } from "../widgets/base"
+import { CustomTkBase } from "../widgets/base"
import { getPythonAssetPath } from "../../utils/pythonFilePath"
-class VideoPlayer extends TkinterBase{
+class VideoPlayer extends CustomTkBase{
static widgetType = "video_player"
static requiredImports = [
- ...TkinterBase.requiredImports,
+ ...CustomTkBase.requiredImports,
"import os",
"from tkVideoPlayer import TkinterVideo"
]
diff --git a/src/frameworks/customtk/sidebarPlugins.js b/src/frameworks/customtk/sidebarPlugins.js
index 2c21077..53b9539 100644
--- a/src/frameworks/customtk/sidebarPlugins.js
+++ b/src/frameworks/customtk/sidebarPlugins.js
@@ -9,9 +9,8 @@ import VideoPlayer from "./plugins/videoPlayer"
import MapView from "./plugins/mapview"
import PandasTable from "./plugins/pandasTable"
-// TODO: add license for 3rd party plugins
-const TkinterPluginWidgets = [
+const CustomTkPluginWidgets = [
{
name: "Analog TimePicker",
img: ClockImage,
@@ -56,4 +55,4 @@ const TkinterPluginWidgets = [
]
-export default TkinterPluginWidgets
+export default CustomTkPluginWidgets
diff --git a/src/frameworks/customtk/sidebarWidgets.js b/src/frameworks/customtk/sidebarWidgets.js
index 2a36fae..dd0cd4a 100644
--- a/src/frameworks/customtk/sidebarWidgets.js
+++ b/src/frameworks/customtk/sidebarWidgets.js
@@ -11,7 +11,7 @@ import { CheckBox, RadioButton } from "./widgets/ checkButton"
import { Input, Text } from "./widgets/input"
import SpinBox from "./widgets/spinBox"
-import MainWindowImage from "./assets/widgets/main/mainwindow.png"
+import MainWindowImage from "./assets/widgets/main/mainwindow2.png"
import TopLevelImage from "./assets/widgets/main/Toplevel.png"
import FrameImage from "./assets/widgets/main/frame2.png"
import LabelImage from "./assets/widgets/main/label.png"
@@ -25,7 +25,7 @@ import RadioButtonImage from "./assets/widgets/main/radio.png"
import SpinBoxImage from "./assets/widgets/main/spinbox.png"
-const TkinterWidgets = [
+const CustomTkWidgets = [
{
name: "Main window",
img: MainWindowImage,
@@ -92,17 +92,17 @@ const TkinterWidgets = [
link: "https://github.com",
widgetClass: OptionMenu
},
- {
- name: "Spinbox",
- img: SpinBoxImage,
- link: "https://github.com",
- widgetClass: SpinBox
- },
+ // {
+ // name: "Spinbox",
+ // img: SpinBoxImage,
+ // link: "https://github.com",
+ // widgetClass: SpinBox
+ // },
]
-export default TkinterWidgets
+export default CustomTkWidgets
/**
diff --git a/src/frameworks/customtk/widgets/ checkButton.js b/src/frameworks/customtk/widgets/ checkButton.js
index 0b103bc..b1d3eeb 100644
--- a/src/frameworks/customtk/widgets/ checkButton.js
+++ b/src/frameworks/customtk/widgets/ checkButton.js
@@ -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()}`)
})
diff --git a/src/frameworks/customtk/widgets/base.js b/src/frameworks/customtk/widgets/base.js
index 9dc05d6..5091543 100644
--- a/src/frameworks/customtk/widgets/base.js
+++ b/src/frameworks/customtk/widgets/base.js
@@ -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
diff --git a/src/frameworks/customtk/widgets/button.js b/src/frameworks/customtk/widgets/button.js
index e5b6fb9..77f07dc 100644
--- a/src/frameworks/customtk/widgets/button.js
+++ b/src/frameworks/customtk/widgets/button.js
@@ -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()}`
]
diff --git a/src/frameworks/customtk/widgets/frame.js b/src/frameworks/customtk/widgets/frame.js
index adf6c21..c0174bc 100644
--- a/src/frameworks/customtk/widgets/frame.js
+++ b/src/frameworks/customtk/widgets/frame.js
@@ -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()}`
]
}
diff --git a/src/frameworks/customtk/widgets/input.js b/src/frameworks/customtk/widgets/input.js
index 1380204..f9ea82e 100644
--- a/src/frameworks/customtk/widgets/input.js
+++ b/src/frameworks/customtk/widgets/input.js
@@ -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()}`
]
}
diff --git a/src/frameworks/customtk/widgets/label.js b/src/frameworks/customtk/widgets/label.js
index 1a97c5a..1a4ae9c 100644
--- a/src/frameworks/customtk/widgets/label.js
+++ b/src/frameworks/customtk/widgets/label.js
@@ -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()}`
]
}
diff --git a/src/frameworks/customtk/widgets/mainWindow.js b/src/frameworks/customtk/widgets/mainWindow.js
index bc4075f..fa4ce86 100644
--- a/src/frameworks/customtk/widgets/mainWindow.js
+++ b/src/frameworks/customtk/widgets/mainWindow.js
@@ -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")}")`
]
}
diff --git a/src/frameworks/customtk/widgets/optionMenu.js b/src/frameworks/customtk/widgets/optionMenu.js
index 5bc0f1c..b135903 100644
--- a/src/frameworks/customtk/widgets/optionMenu.js
+++ b/src/frameworks/customtk/widgets/optionMenu.js
@@ -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()}`
]
}
diff --git a/src/frameworks/customtk/widgets/slider.js b/src/frameworks/customtk/widgets/slider.js
index 3c9da59..bb35870 100644
--- a/src/frameworks/customtk/widgets/slider.js
+++ b/src/frameworks/customtk/widgets/slider.js
@@ -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()}`
]
}
diff --git a/src/frameworks/customtk/widgets/spinBox.js b/src/frameworks/customtk/widgets/spinBox.js
index 56cdf6d..b333563 100644
--- a/src/frameworks/customtk/widgets/spinBox.js
+++ b/src/frameworks/customtk/widgets/spinBox.js
@@ -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()}`
]
}
diff --git a/src/frameworks/customtk/widgets/toplevel.js b/src/frameworks/customtk/widgets/toplevel.js
index e312b74..b0fa44f 100644
--- a/src/frameworks/customtk/widgets/toplevel.js
+++ b/src/frameworks/customtk/widgets/toplevel.js
@@ -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")}")`
]
}