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

fixed code generation for custom tkinter

Browse Source
This commit is contained in:
paul
2024-09-30 22:18:08 +05:30
parent af0ac90499
commit 10b6e2872a
21 changed files with 80 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_coverpage.md
View File

@@ -6,7 +6,7 @@
- Simple and powerful
- Do more with plugins
- Generate code in multiple frameworks
- Framework independent, Generate code in multiple frameworks
[GitHub](https://github.com/PaulleDemon/PyUIBuilder)
[Get Started](#pyuibuilder-documentation)

5
docs/intro.md
View File

@@ -66,6 +66,11 @@ or right-click -> delete
![deleted widget](./assets/delete.gif)
### Resizing widgets
You can resize the widgets by dragging the widgets. If the fit-width/fit-height is set to true, make sure to uncheck it before resizing.
### Variable names
To modify variable name, change the widget name attributes, if there are duplicate names,

796
landingpages/tailwind/tailwind-runtime.css
View File

File diff suppressed because it is too large Load Diff

2
src/canvas/canvas.js
View File

@@ -779,7 +779,7 @@ class Canvas extends React.Component {
*/
handleAddWidgetChild = ({event, parentWidgetId, dragElementID, swap = false }) => {
console.log("event: ", event)
// console.log("event: ", event)
// widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" }
const dropWidgetObj = this.findWidgetFromListById(parentWidgetId)
// Find the dragged widget object

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

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

@@ -130,8 +130,6 @@ async function generateCustomTkCode(projectName, widgetList=[], widgetRefs=[], a
message.info("starting zipping files, download will start in a few seconds")
return
const createFileList = [
{
fileData: code.join(""),

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

@@ -12,10 +12,10 @@ import { Input, Text } from "./widgets/input"
import SpinBox from "./widgets/spinBox"
import MainWindowImage from "./assets/widgets/main/mainwindow2.png"
import TopLevelImage from "./assets/widgets/main/Toplevel.png"
import TopLevelImage from "./assets/widgets/main/Toplevel2.png"
import FrameImage from "./assets/widgets/main/frame2.png"
import LabelImage from "./assets/widgets/main/label.png"
import ButtonImage from "./assets/widgets/main/button.png"
import ButtonImage from "./assets/widgets/main/button2.png"
import InputImage from "./assets/widgets/main/input.png"
import TextAreaImage from "./assets/widgets/main/textarea.png"
import SliderImage from "./assets/widgets/main/slider.png"

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

@@ -62,11 +62,11 @@ export class CheckBox extends CustomTkWidgetBase{
generateCode(variableName, parent){
const labelText = this.getAttrValue("checkLabel")
const config = convertObjectToKeyValueString(this.getConfigCode())
const config = this.getConfigCode()
const code = [
`${variableName} = ctk.CTkCheckBox(master=${parent}, text="${labelText}")`,
`${variableName}.configure(${config})`,
`${variableName}.configure(${convertObjectToKeyValueString(config)})`,
]
if (this.getAttrValue("defaultChecked")){
@@ -158,20 +158,26 @@ export class RadioButton extends CustomTkWidgetBase{
generateCode(variableName, parent){
const config = convertObjectToKeyValueString(this.getConfigCode())
const {border_width, ...config} = this.getConfigCode()
if (border_width){
// there is no border width in RadioButton
config["border_width_checked"] = border_width
}
const code = [
`${variableName}_var = ctk.IntVar()`,
]
const radios = this.getAttrValue("radios")
// FIXME: Error: ValueError: ['value'] are not supported arguments. Look at the documentation for supported arguments.
radios.inputs.forEach((radio_text, idx) => {
const radioBtnVariable = `${variableName}_${idx}`
code.push(`\n`)
code.push(`${radioBtnVariable} = ctk.CTkRadioButton(master=${parent}, variable=${variableName}_var, text="${radio_text}")`)
code.push(`${radioBtnVariable}.configure(${config}, value=${idx})`)
code.push(`${radioBtnVariable} = ctk.CTkRadioButton(master=${parent}, variable=${variableName}_var, text="${radio_text}", value=${idx})`)
code.push(`${radioBtnVariable}.configure(${convertObjectToKeyValueString(config)})`)
code.push(`${radioBtnVariable}.${this.getLayoutCode()}`)
})

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

@@ -573,7 +573,10 @@ export class CustomTkWidgetBase extends CustomTkBase{
const config = {
fg_color: `"${this.getAttrValue("styling.backgroundColor")}"`,
text_color: `"${this.getAttrValue("styling.foregroundColor")}"`,
}
if (this.getAttrValue("styling.foregroundColor")){
config["text_color"] = `"${this.getAttrValue("styling.foregroundColor")}"`
}
if (this.getAttrValue("styling.borderRadius")){

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

@@ -31,7 +31,8 @@ class Button extends CustomTkWidgetBase{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setAttrValue("styling.backgroundColor", "#029CFF")
this.setAttrValue("styling.foregroundColor", "#fff")
}
generateCode(variableName, parent){
@@ -42,7 +43,7 @@ class Button extends CustomTkWidgetBase{
return [
`${variableName} = ctk.CTkButton(master=${parent}, text="${labelText}")`,
`${variableName}.config(${config})`,
`${variableName}.configure(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}

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

@@ -32,7 +32,7 @@ class Frame extends CustomTkBase{
return [
`${variableName} = ctk.CTkFrame(master=${parent})`,
`${variableName}.configure(bg="${bg}")`,
`${variableName}.configure(fg_color="${bg}")`,
`${variableName}.${this.getLayoutCode()}`
]
}

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

@@ -40,7 +40,7 @@ export class Input extends CustomTkWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = ctk.CTkEntry(master=${parent}, text="${placeHolderText}")`,
`${variableName} = ctk.CTkEntry(master=${parent}, placeholder_text="${placeHolderText}")`,
`${variableName}.configure(${config})`,
`${variableName}.${this.getLayoutCode()}`
]

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

@@ -79,7 +79,7 @@ class Label extends CustomTkWidgetBase{
const {border_color, border_width, ...config} = this.getConfigCode()
const image = this.getAttrValue("imageUpload")
console.log("Object: ", config)
// console.log("Object: ", config)
let labelInitialization = `${variableName} = ctk.CTkLabel(master=${parent}, text="${labelText}")`

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

@@ -35,7 +35,7 @@ class MainWindow extends CustomTkBase{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setAttrValue("styling.backgroundColor", "#23272D")
// this.setWidgetName("main") // Don't do this as this will cause conflicts while loading names
}
@@ -45,7 +45,7 @@ class MainWindow extends CustomTkBase{
return [
`${variableName} = ctk.CTk()`,
`${variableName}.configure(bg="${backgroundColor}")`,
`${variableName}.configure(fg_color="${backgroundColor}")`,
`${variableName}.title("${this.getAttrValue("title")}")`
]
}

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

@@ -1,7 +1,7 @@
import Tools from "../../../canvas/constants/tools"
import { DownOutlined } from "@ant-design/icons"
import { CustomTkWidgetBase} from "./base"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
class OptionMenu extends CustomTkWidgetBase{
@@ -14,14 +14,18 @@ class OptionMenu extends CustomTkWidgetBase{
// const {layout, ...newAttrs} = this.state.attrs // Removes the layout attribute
this.minSize = {width: 50, height: 30}
let newAttrs = removeKeyFromObject("styling.borderColor", this.state.attrs)
newAttrs = removeKeyFromObject("styling.borderWidth", newAttrs)
this.state = {
...this.state,
isDropDownOpen: false,
widgetName: "Option menu",
size: { width: 120, height: 'fit' },
size: { width: 120, height: 30 },
fitContent: { width: true, height: true },
attrs: {
...this.state.attrs,
...newAttrs,
defaultValue: {
label: "Default Value",
tool: Tools.INPUT,
@@ -52,21 +56,21 @@ class OptionMenu extends CustomTkWidgetBase{
generateCode(variableName, parent){
const config = convertObjectToKeyValueString(this.getConfigCode())
const config = this.getConfigCode()
const defaultValue = this.getAttrValue("defaultValue")
const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs)
const options = this.getAttrValue("widgetOptions").inputs
const code = [
`${variableName}_options = ${options}`,
`${variableName}_var = ctk.StringVar(value="${defaultValue || options.at(1) || ""}")`,
`${variableName} = ctk.CTkOptionMenu(${parent}, ${variableName}_var, *${variableName}_options)`
`${variableName}_options = ${JSON.stringify(options)}`,
`${variableName}_var = ctk.StringVar(value="${options.at(1) || defaultValue || ''}")`,
`${variableName} = ctk.CTkOptionMenu(${parent}, variable=${variableName}_var, values=${variableName}_options)`
]
return [
...code,
`${variableName}.configure(${config})`,
`${variableName}.configure(${convertObjectToKeyValueString(config)})`,
`${variableName}.${this.getLayoutCode()}`
]
}

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

@@ -11,22 +11,26 @@ class Slider extends CustomTkWidgetBase{
constructor(props) {
super(props)
let newAttrs = removeKeyFromObject("styling.foregroundColor", this.state.attrs)
this.state = {
...this.state,
widgetName: "Scale",
size: { width: 'fit', height: 'fit' },
size: { width: 120, height: 10 },
fitContent: {width: true, height: true},
attrs: {
...this.state.attrs,
...newAttrs,
styling: {
...this.state.attrs.styling,
...newAttrs.styling,
// TODO: trough color
troughColor: {
label: "Trough Color",
progressColor: {
label: "Progress Color",
tool: Tools.COLOR_PICKER,
value: "#fff",
value: "#029CFF",
onChange: (value) => {
// this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.troughColor", value)
this.setAttrValue("styling.progressColor", value)
}
}
},
@@ -100,7 +104,9 @@ class Slider extends CustomTkWidgetBase{
config["from_"] = this.getAttrValue("scale.min")
config["to"] = this.getAttrValue("scale.max")
config["resolution"] = this.getAttrValue("scale.step")
config["number_of_steps"] = this.getAttrValue("scale.step")
config["progress_color"] = `"${this.getAttrValue("styling.progressColor")}"`
if (this.getAttrValue("orientation")){
config["orientation"] = this.getAttrValue("orientation")

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

@@ -34,7 +34,7 @@ class TopLevel extends Widget{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setAttrValue("styling.backgroundColor", "#23272D")
}
generateCode(variableName, parent){
@@ -43,7 +43,7 @@ class TopLevel extends Widget{
return [
`${variableName} = ctk.CTkToplevel(master=${parent})`,
`${variableName}.configure(bg="${backgroundColor}")`,
`${variableName}.configure(fg_color="${backgroundColor}")`,
`${variableName}.title("${this.getAttrValue("title")}")`
]
}

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

@@ -85,7 +85,7 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
async function generateTkinterCode(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

9
src/frameworks/tkinter/widgets/optionMenu.js
View File

@@ -19,7 +19,8 @@ class OptionMenu extends TkinterWidgetBase{
...this.state,
isDropDownOpen: false,
widgetName: "Option menu",
size: { width: 120, height: 'fit' },
size: { width: 120, height: 30 },
fitContent: { width: true, height: true },
attrs: {
...this.state.attrs,
defaultValue: {
@@ -55,11 +56,11 @@ class OptionMenu extends TkinterWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
const defaultValue = this.getAttrValue("defaultValue")
const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs)
const options = this.getAttrValue("widgetOptions").inputs
const code = [
`${variableName}_options = ${options}`,
`${variableName}_var = tk.StringVar(value="${defaultValue || options.at(1) || ""}")`,
`${variableName}_options = ${JSON.stringify(options)}`,
`${variableName}_var = tk.StringVar(value="${options.at(1) || defaultValue || ''}")`,
`${variableName} = tk.OptionMenu(${parent}, ${variableName}_var, *${variableName}_options)`
]

3
src/frameworks/tkinter/widgets/slider.js
View File

@@ -14,7 +14,8 @@ class Slider extends TkinterWidgetBase{
this.state = {
...this.state,
widgetName: "Scale",
size: { width: 'fit', height: 'fit' },
size: { width: 120, height: 10 },
fitContent: {width: true, height: true},
attrs: {
...this.state.attrs,
styling: {