From af0ac904994093690f56473fcc9ff020175928cc Mon Sep 17 00:00:00 2001 From: paul Date: Mon, 30 Sep 2024 19:13:26 +0530 Subject: [PATCH] fixing code output for customtkinter --- src/App.js | 33 ++++++++++++---- src/canvas/canvas.js | 9 +++++ .../assets/widgets/main/mainwindow.jpg | Bin 3943 -> 0 bytes .../assets/widgets/main/mainwindow2.png | Bin 0 -> 7029 bytes src/frameworks/customtk/engine/code.js | 13 ++++--- .../customtk/plugins/analogTimepicker.js | 6 +-- src/frameworks/customtk/plugins/mapview.js | 6 +-- .../customtk/plugins/pandasTable.js | 8 ++-- .../customtk/plugins/videoPlayer.js | 6 +-- src/frameworks/customtk/sidebarPlugins.js | 5 +-- src/frameworks/customtk/sidebarWidgets.js | 18 ++++----- .../customtk/widgets/ checkButton.js | 16 ++++---- src/frameworks/customtk/widgets/base.js | 36 +++++++++++++----- src/frameworks/customtk/widgets/button.js | 6 +-- src/frameworks/customtk/widgets/frame.js | 8 ++-- src/frameworks/customtk/widgets/input.js | 14 +++---- src/frameworks/customtk/widgets/label.js | 24 ++++++++---- src/frameworks/customtk/widgets/mainWindow.js | 4 +- src/frameworks/customtk/widgets/optionMenu.js | 10 ++--- src/frameworks/customtk/widgets/slider.js | 10 ++--- src/frameworks/customtk/widgets/spinBox.js | 8 ++-- src/frameworks/customtk/widgets/toplevel.js | 4 +- 22 files changed, 149 insertions(+), 95 deletions(-) delete mode 100644 src/frameworks/customtk/assets/widgets/main/mainwindow.jpg create mode 100644 src/frameworks/customtk/assets/widgets/main/mainwindow2.png 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 72a62a0bbe7f008e9e5866cde6c2db9dbb22af08..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3943 zcmeHI4OCP275~3{liFbyt?QuN|Y`%DbS7X^R=R6xQszEC89>gRL_I{|ENT)^i; zwmAef5Ukn5V_A5@2(dNmqdAjD`^0wOV7eATl<4-fAu+ zZPxrX1s0Rub%{2M2kYT{*npTZB7#LxYO|z>4$;G2fye0)FGR1ynMn0&LynAXV9CHY3e+YuoKai=%h>6#*=R9k!JZx9 zb{KDh)d;MW3;DuGE?>eGieh+PTk}PXac?NCNQzdzK1w7KY9j^QD1n;Kjm(y0b2ZuO zXs$>YEsEl=7i-jN&AhL{P{Dk%?FNT7%f@3I4!ww z-f{t3F#m=!FHYBes*BV5A1ZW#$FFM9Zx-9Y>ML4QUksDRS&&?#NuG-JZVb-@@FMl^ zw;(ns7WLl))5Nn;Fk`8!ON^!rqfsx9R~z=ILpbTMK?|E;Q+N!|+v3~ey+47xY_M76 z(Z#&^Stdt61Mz@DB2&mD3WZFeQYke0ays3|htB+g@3Q5A%%Gq^WvkXNi0 z#8Ldx)YQ;Irm(WUkruY$&5Qo&-J@$n8q;1MdO%>%%HXw6vN_@FBE?bB>m}0o1Z84U za>~Z78QU_qKm8L`7B=T{a&>uT#ImQzT3k}~{J!d%pTAJsaPZK}zxd@Vzk1c)bnN(v zlc!!g{nl^Kw*2ng+vnfu_~X0p{ptPAOCR)nboJwFy`S`bI`G%)H@><#IP|yS+hgMs zlXt$pJ2j2-f&g)j7WVy6UJQ&EfkYybs5mc(P=pDQK_agfP*%jHQPqWhp~6ZUb3=XO zn-_h;MCqgc8dEntU`^z}+S@oa7qfqk*xv8NY@XNxuTQ};B7_x>$N&m3z_HhY|BX13 zPJaGD<@K{~BZl~=HpR_y2o8Vqy$BRIOAYO}{#?F~)mMaq@#_{8{A|Yzhj94&-EYnY zbyGVy2qORmCpJ5o(2r|5HbU!X38Qx$^12iKsyySebk&ATS>xWS;GFh*is~&6>*lhp z1FR|L#IEVFDikOk!2FSQ_xAcm_32G-?B5$3l+|ELEbRB~s4tbAsn&@1+!%c2(DYAx z3zbB^^J3xbMHH0L<@c3-d&U17Dj7K}9DaID!qm!YBIWUI4BIf+kv-6E`MS;6dZl;t zOxuA8@!@r8$2a%9ba}jVwrEQKOx{MZ|F%}g*n~W}HR!@`N|L|$uy$v>Q}Ormk=M&b z%G~Vj&8JJlP!M`#KMI~rEgx!We);v`qcjwBp0uN&_YiBEn@dz-#ZfDnsnAlAToSB` z@9LsnlGeBvEz_H_?a@4ry>cIRDS0VbJ*3n5#>cYO413;jRdL-p=zQngcw}m5t5=hj zI=l$S2478666qX!#gY==)zh=8x60CbvGAex$*-u+ z{i-RI7u5>!DSIu2nWh9wN=@VOW3op<>A?m6O{plTyLWVY_=~@E$JS0xDysT+bd*HU z6ho;mDf<1#-it~8^0^;DlQ!QoW3t@N$>#c)KE+^@6DfYH{7TZy&=Xf4jz4mA=Z%u? z`jK6sZo_dc3XarGbp^_Q-#OV7cC9VJjdb6z^Vi%uheg#eQ&mG1poj5 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 0000000000000000000000000000000000000000..b8a581ea51730b8bcc7ac2847c752fa75a91cc32 GIT binary patch literal 7029 zcmeHLdpOkVzJHg(N*Ae6a%s^@sWHa=HZ!#%-K69)Ld=X&7{-_xCb!XDSnN(q39+$L z7`KMVWw2c4lqE|t$gM@Oh71yu+|D~zt5vPD&v~A`&ma3dyWjKtp83u9{r(k^um$KCs`y761vH`2Jc7Qn;Q8-SB6H|9&SL0Bh>R_gC>d*K7u0`5P}g z935wU*px`|)y8{J2qbN$uRr7lz?^9cAAL!5{1&D!*^g$*L~AZ_n8If<8L5ep+4BA} z5Ag6bwYAvyo)!K>Yo4al{Y{a`pr9b_AU$nLz$qlk#KZ)tql?tlML-S&?TjBC&qVmq zG@ztUMOlz&!~idUx);T7i&!+CKw;3)nwlTDepAVV_+cA=MgVzf6AvPiL?-!?{OB|! zN*ncwmL5b?x)+^H`b_aXWcp_mvX|HrQ!?J~6k3ys@F02O8DzR9=I9wKhSzrtFR}+I zU<+c4HQvi_i=&sH2PMcHDb|zh^^u?@%BQlC|BVJqY#$l?5Bg#cogUyt_}~venl^rk z!Vo)A8^#xj_YiwT=M#_o_Lk`$586kHi!C`$qJBn!J`peY;{#|UyEFbIw5BbIMqvaH zNgpS|dx3icNO(HQ1EZ^>tB=qzLFnn2BR^aE5KHs-3zkg!0S}CxAqh`J>FFYfx_A^q z-^3V?AQ<625W09{JtMp>BoaJ6$olP-KS|n0fPxHk4Rj3+Oi=nLBNGGTKlWc*{L?FT z6bA9M*es0h2kC#%{$T$*VgA%zznl80TmO#&?f+46iKDz!wc_}~1sGqwPvQ${rh6Fl z)06M&6s%qKV=?dHeJdRN`M`OLdNXH`vu~+Y_}!( z!P+7P>@Y`u&hbC#`+Fn$j0d))kFpr~p`~G#XG_Blsi1klVvij&`Bjhg>12j#^+cb( zb>Ne2*2$SWi*w=$S~y8sf!sF+GX0Ig+aGB$zb-%bSD|Hv{n6lc9y?MtnA5|~%Y;l6 zISbOJpKq4$K1aT-AZTzu@l?MHb!Ct-eN?aO>5a#S!w<9yhiJhm4<}g*tl)RAQw5V7 zwBiqb3&4KPFaZg`^8k$k0RCgeE)d}%u@Y>#SuFwfZ~H>}*YrdVa$4fi%Yc}en7Wd_ z@XZ<;8Yoj!rHqUWlz{=G@P-s%yIWgZw{&)Hx^26IpYNsyf6B_r((SZdU)@Hq+*hw& zUB41pv36E87FSbKlW^;ns}SbGjl%EJ);gX%LwYkcRe#(DEnm_T*!4O;%{I&KIx+oJ zYM9})uxGQTO^Qpb004FM^o$G*)zI;p4$dhXdSIY-WAY(YTpW5DS25ABx$13v-*8(_ z#)AhYCr+G5$L-ozh>Mw?o<8mEec}=6D{!Oq;O%t-0|O`&O77aVYw%p&)Y{rw)uEi@ zkQ-G##x)b~wb{te|YQ`*rfdn`$K`r6?|!yHQ!$#rRm-T31(B>SU9V6}$$2 z00293SuH$L!z#9JeBA%1rY6K&XSh-^`Phs)l3SA5oTP-CogR&b0wu97$PF@uq{i#N z3Iq=mrNCePQdtXUl+nTZo}QlBsq!)xnZgG{1d*^Oi*{R*-)e(ZL2}>rpKIplIxCt5 zzKSFiCZHrib$X?!H-tL;G)pqIhtcjzeO`UG$i!A+q{T|@dq=mhDV7mpLw{zHUsSGh ziS{%f0Kuipmj^Q9Fek=~@isO#p|2lm?hv`r-O;cAQ)7bfOtEiHN=h1dY&ItLu_ba1 zaL+nyZCzh;UYbZIv)?&6cp$V2R9SNq%$MQty0+-5 zm)D*9$A77fE<05_rXIR5Go)B&@9dmZDgm@jg1V`^b3=r%xd|RhN2lO!h+)xrMt|Lv zQeoLhcAxY8;^KO=sGD>5A^tW$?X583&b@AoG@ji$ zeakG!P~QYpAH2s}T-d0l78l8}*=tN2JiJ$wHM{di*YZI70WEa`FIHu>^(s*Cy&II_cMC=`lI*i;+C zrsM9z@4NbwLV}F+r-NAYdtKX`i+m%;f>om+osj9fcWRPfQ`-{wMr|VL+M@Sqm7!Ui zu~b42c2OZGv*EZ<8oV$Ldq-C`XBGr6{Bl{1KlS*>#Grx{X8)C8s*lgey@s{`r7>Y# ze$c|V4dt`Y*%o!8q!ONyNEq9~#qwMlpIJ8Pwch`x;eL-Iu`9gl?koT^2XEWLYIA5# zg-KA>(5{Rda_D~fu77YsxRBT{c*U5S-J$cl^BF49z(o!e|UW|;6=Blch1pF

>CrVOa^ja z5x%N^M6X?KWEWTUZa62A=c-e%M%j2Rhr@vyXN}eq3eUdG4W%J`l$4CR7P`vvuq=^x zit8?byE)i($2O~OB){rpYr;w?J~wPOo9F04wLE`FqkkwUf3UM&A|l>v{@qmD0BoG) znJC3o>9bX5Gt;QnePOPX#Z^Ti2F=PnIB86ebpZLUh+_PwJBrR&YGyb5%)6SL2#%ECI#P{IB=QJ_SC|a z_-tWHl$c-nv#`y)90v;SCC{$UqLu&JKBox4;^M2G%7ZS)Hbk^!tk*xbKTY;8Z)$XH zuJZ339Imh^;3!<68)jwdUUV=d5W|1|I#UU?mM(?aL&_ai2zma4T8O9cfl+~HkSr#s z@dlPR*voq`)V@ZM+V#;U#wHI`v- zEUE#=oijM8sunXfHoJ2Eq|epSwx7t+Q}4QNT*OEN^O%Po0h~%xG`dn0$2!ywub|az zHoM#98mF>SMP)sBF6ij#QBhP>B*vgJTLoC;mig2N$Pg*ujuC?pG5#R@FAw*BcD-O` zW+uy610qh~q@;oOAbk;*)d(-_Z@Y5HTe;2<< zyl<+M@5j`tCu~yp7YjI-EjApGmfK3Ws)O5jq3}x0)+~1&)H(tIrEZXQPktdTa$;HH{qt>Nbz>0J>UKatkH?YloaiT z(a}*_3igyc!nLeuh=U0NMAZ8b2*s^WG8$jaB-bQrn(9v2}2<{9zML^GNdc1~`e?AC`p%?ub8F z&s19iX6&%;(<>Z=E(9y*{?bjKuor{*G zL1VpyIcST_(k2xlqP)l)#t1)N#ZgXvxdV&EdiwOKg+(1NPHjGYEqI$#88&-=qg$ze zTDni;8a6!YI=EpW)VbF$8>3X0g902x;fkBtK@5f^gteCKH&k$Pa_#wUNN#;%LPCOl zAONiMSy@?5jcM8^D{vENEgAOINIUQBGU=!R$k)}Q0ykN;YSjjou!1_!V9XqMuNQ5f zb-aLuq0;8NBb@GS4Gs=Y&&$i}zq}009k_Jq5&^nRUESNqXF$+;M;_sqdaT6=r{~wl zb*<1!PEL+F)tq8a+YBPG`?Bn``nA;ip|#sh(a^V&vCb;iPP2WMmZ-RAS%+s?{h^L#SxffOV2#{dsBG@ELBEGW5*lH7Zd) z?RoM%n6E7mo4_%;D%b}^(A~J9S737SIy!I@op6{N=&cOdA+lM)j*Ntew*K~^8=hhO zwl;Y47*pbQPUA+}&*27u8{*-}%0rlM*fp{z$=GZRVsowwanr0zX&ndcosT$Hb z96eK0Q+Bfi2#*#B1l!{eqRh?bS_gmi_4TEW@N=D5k_q3U3p|t2A%>4{nHi0Au{Xh` zmS@kDnwpx9IXkxB~7Oxi7SDcTs*mQrnGdPH9dpsZOMhKd&i; z!N*>5u&_9O{J6fpzC~DAWrqaF)6^bB_&plj*fIXy$&W`%YD|FmldB@qhH|67l8J6 bfUAVoz3C0rjvFAN1>k_?5sSR<+|T_N1e_bb literal 0 HcmV?d00001 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")}")` ] }