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

33
src/App.js
View File

@@ -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: <ProductFilled />,
content: <PluginsContainer sidebarContent={TkinterPluginWidgets}/>
content: <PluginsContainer sidebarContent={sidebarPlugins}/>
},
{
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)
}
}

9
src/canvas/canvas.js
View File

@@ -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[]}

BIN
src/frameworks/customtk/assets/widgets/main/mainwindow.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/frameworks/customtk/assets/widgets/main/mainwindow2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

13
src/frameworks/customtk/engine/code.js
View File

@@ -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
export default generateCustomTkCode

6
src/frameworks/customtk/plugins/analogTimepicker.js
View File

@@ -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'
]

6
src/frameworks/customtk/plugins/mapview.js
View File

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

8
src/frameworks/customtk/plugins/pandasTable.js
View File

@@ -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)`,

6
src/frameworks/customtk/plugins/videoPlayer.js
View File

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

5
src/frameworks/customtk/sidebarPlugins.js
View File

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

18
src/frameworks/customtk/sidebarWidgets.js
View File

@@ -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
/**

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