added image to label and duplicate names will be renamed on upload

This commit is contained in:
paul
2024-09-28 21:50:30 +05:30
parent e12d76a7bc
commit d5ba357265
6 changed files with 83 additions and 8 deletions

View File

@@ -1,5 +1,6 @@
import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { getPythonAssetPath } from "../../utils/pythonFilePath"
import { TkinterWidgetBase } from "./base"
@@ -7,6 +8,7 @@ class Label extends TkinterWidgetBase{
static widgetType = "label"
constructor(props) {
super(props)
@@ -45,14 +47,45 @@ class Label extends TkinterWidgetBase{
}
getImports(){
const imports = super.getImports()
if (this.getAttrValue("imageUpload"))
imports.push("import os", "from PIL import Image, ImageTk", )
return imports
}
getRequirements(){
const requirements = super.getImports()
if (this.getAttrValue("imageUpload"))
requirements.push(`pillow`)
return requirements
}
generateCode(variableName, parent){
const labelText = this.getAttrValue("labelWidget")
const config = convertObjectToKeyValueString(this.getConfigCode())
const image = this.getAttrValue("imageUpload")
let labelInitialization = `tk.Label(master=${parent}, text="${labelText}")`
const code = []
if (image.name){
code.push(`${variableName}_img = Image.open("${getPythonAssetPath(image.name, "image")}")`)
code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
labelInitialization = `tk.Label(master=${parent}, image="${variableName}_img", text="${labelText}")`
}
code.push("\n")
code.push(labelInitialization)
return [
`${variableName} = tk.Label(master=${parent}, text="${labelText}")`,
...code,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
@@ -74,11 +107,19 @@ class Label extends TkinterWidgetBase{
}
renderContent(){
const image = this.getAttrValue("imageUpload")
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-content-start tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center "
style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
{
image && (
<img src={image.previewUrl} className="tw-bg-contain tw-w-full tw-h-full" />
)
}
<div className="" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("labelWidget")}
</div>