added code generation for videoplayer and timepicker

src/frameworks/tkinter/engine/code.js

@@ -18,8 +18,8 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
         let varName = widgetRef.getVariableName()
 
         // Add imports and requirements to sets
-        widgetRef.getImports().forEach(importItem => imports.add(importItem));
-        widgetRef.getRequirements().forEach(requirementItem => requirements.add(requirementItem));
+        widgetRef.getImports().forEach(importItem => imports.add(importItem))
+        widgetRef.getRequirements().forEach(requirementItem => requirements.add(requirementItem))
 
         // Set main variable if the widget is MainWindow
         if (widget.widgetType === MainWindow) {
@@ -126,7 +126,7 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
         `${mainVariable}.mainloop()`,
     ]
 
-    console.log("Code: ", code.join(""), "\n", requirements.join("\n"))
+    console.log("Code: ", code.join(""), "\n\n requirements:", requirements.join("\n"))
 
     message.info("starting zipping files, download will start in a few seconds")
 

src/frameworks/tkinter/plugins/analogTimepicker.js

@@ -10,13 +10,20 @@ import { TkinterBase } from "../widgets/base"
 import "./styles/timepickerStyle.css"
 
 
+const Themes = {
+    NAVY_BLUE: "Navy Blue",
+    DRACULA: "Dracula",
+    PURPLE: "Purple",
+    NONE: ""
+}
+
 class AnalogTimePicker extends TkinterBase{
 
     static widgetType = "analogue_timepicker"
 
     static requiredImports = [
                                 ...TkinterBase.requiredImports, 
-                                'from tktimepicker import AnalogPicker, AnalogThemes'
+                                'from tktimepicker import AnalogPicker, AnalogThemes, constants'
                             ]
     
     static requirements = ["tkTimePicker"]
@@ -43,7 +50,7 @@ class AnalogTimePicker extends TkinterBase{
                         tool: Tools.SELECT_DROPDOWN, 
                         toolProps: {placeholder: "select theme"},
                         value: "",
-                        options: ["Dracula", "Navy blue", "Purple"].map(val => ({value: val, label: val})),
+                        options: Object.values(Themes).map(val => ({value: val, label: val})),
                         onChange: (value) => this.handleThemeChange(value)
                     },
                     ...newAttrs.styling,
@@ -130,19 +137,19 @@ class AnalogTimePicker extends TkinterBase{
     handleThemeChange(value){
         this.setAttrValue("styling.theme", value)
 
-        if (value === "Navy blue"){
+        if (value === Themes.NAVY_BLUE){
             this.setAttrValue("styling.handleColor", "#009688")
             this.setAttrValue("styling.displayColor", "#009688")
             this.setAttrValue("styling.backgroundColor", "#fff")
             this.setAttrValue("styling.clockColor", "#EEEEEE")
             this.setAttrValue("styling.numberColor", "#000")
-        }else if (value === "Dracula"){
+        }else if (value === Themes.DRACULA){
             this.setAttrValue("styling.handleColor", "#863434")
             this.setAttrValue("styling.displayColor", "#404040")
             this.setAttrValue("styling.backgroundColor", "#404040")
             this.setAttrValue("styling.clockColor", "#363636")
             this.setAttrValue("styling.numberColor", "#fff")
-        }else if (value === "Purple"){
+        }else if (value === Themes.PURPLE){
             this.setAttrValue("styling.handleColor", "#EE333D")
             this.setAttrValue("styling.displayColor", "#71135C")
             this.setAttrValue("styling.backgroundColor", "#4E0D3A")
@@ -163,11 +170,47 @@ class AnalogTimePicker extends TkinterBase{
         const numColor = this.getAttrValue("styling.numberColor")
         const handleColor = this.getAttrValue("styling.handleColor")
 
-        const config = convertObjectToKeyValueString(this.getConfigCode())
+        const code = [
+            `${variableName} = AnalogPicker(master=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`,
+        ]
+
+        if (theme){
+
+            code.push(`${variableName}_theme = AnalogThemes(${variableName})`)
+            if (theme === Themes.NAVY_BLUE){
+                code.push(`${variableName}_theme.setNavyBlue()`)
+            }else if (theme === Themes.DRACULA){
+                code.push(`${variableName}_theme.setDracula()`)
+            }else if (theme === Themes.PURPLE){
+                code.push(`${variableName}_theme.setPurple()`)
+            }
+
+        }else{
+
+            const configAnalog = {
+                "canvas_bg": `"${bgColor}"`,
+                "textcolor": `"${numColor}"`,
+                "bg": `"${clockColor}"`,
+                "handlecolor": `"${handleColor}"`,
+                "headcolor": `"${handleColor}"`
+            }
+
+            const displayConfig = {
+                bg: `"${displayColor}"`
+            }
+
+            code.push(`${variableName}.configAnalog(${convertObjectToKeyValueString(configAnalog)})`)
+            code.push(`${variableName}.configSpin(${convertObjectToKeyValueString(displayConfig)})`)
+
+
+            // code.push(`configAnalog(canvas_bg="${bgColor}", textcolor="${numColor}", 
+            //                         bg="${clockColor}", handcolor="${handleColor}", headcolor="${handleColor}")`)
+
+            // code.push(`configSpin(bg="${displayColor}"`)
+        }
 
         return [
-                `${variableName} = AnalogPicker(master=${parent})`,
-                `${variableName}.config(${config})`,
+                ...code,
                 `${variableName}.${this.getLayoutCode()}`
             ]
     }

src/frameworks/tkinter/plugins/videoPlayer.js

@@ -1,17 +1,25 @@
 import React from "react"
 
-import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
 
 import VideoImage from "./assets/video.jpg"
 import { PlayCircleFilled } from "@ant-design/icons"
+import { TkinterBase } from "../widgets/base"
 
 
-class VideoPlayer extends Widget{
+class VideoPlayer extends TkinterBase{
 
     static widgetType = "video_player"
 
+    static requiredImports = [
+        ...TkinterBase.requiredImports, 
+        'from tkVideoPlayer import TkinterVideo'
+    ]
+
+    static requirements = ["tkvideoplayer"]
+
+
     constructor(props) {
         super(props)
 
@@ -22,6 +30,25 @@ class VideoPlayer extends Widget{
         this.state = {
             ...this.state,
             size: { width: 'fit', height: 'fit' },
+            attrs: {
+                ...newAttrs,
+                play: {
+                    label: "Start playing",
+                    tool: Tools.CHECK_BUTTON,
+                    value: false,
+                    onChange: (value) => {
+                        this.setAttrValue("play", value)
+                    }
+                        
+                },
+                defaultVideo: {
+                    label: "Video",
+                    tool: Tools.UPLOADED_LIST, 
+                    toolProps: {filterOptions: ["video/mp4", "video/webm", "video/m4v"]}, 
+                    value: "",
+                    onChange: (value) => {console.log("Value: ", value);this.setAttrValue("defaultVideo", value)}
+                },
+            }
         }
     }
 
@@ -31,6 +58,31 @@ class VideoPlayer extends Widget{
         this.setAttrValue("styling.backgroundColor", "#E4E2E2")
     }
 
+    generateCode(variableName, parent){
+
+
+        const defaultVideo = this.getAttrValue("defaultVideo")
+        const play = this.getAttrValue("play")
+        
+        const code = [
+            `${variableName} = TkinterVideo(master=${parent}, scaled=True)`,
+        ]
+
+        // FIXME: correct the asset path (windows and unix are different paths)
+        if (defaultVideo){
+            code.push(`${variableName}.load("${defaultVideo}")`)
+        }
+
+        if (play){
+            code.push(`${variableName}.play()`)
+        }
+
+        return [
+                ...code,
+                `${variableName}.${this.getLayoutCode()}`
+            ]
+    }
+
     getToolbarAttrs(){
 
         const toolBarAttrs = super.getToolbarAttrs()