working on analogue time picker component

src/frameworks/tkinter/engine/code.js

@@ -138,8 +138,6 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
         }
     ]
 
-    // TODO: Zip asset files
-
     if (requirements.length > 0){
         createFileList.push({
             fileData: requirements.join("\n"),

src/frameworks/tkinter/plugins/analogTimepicker.js

@@ -1,16 +1,26 @@
 import React from "react"
 
-import { timePicker, timePickerInput } from 'analogue-time-picker'
+import { timePicker } from 'analogue-time-picker'
 
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
-import { removeKeyFromObject } from "../../../utils/common"
+import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
+import { TkinterBase } from "../widgets/base"
+
+import "./styles/timepickerStyle.css"
 
 
-class AnalogTimePicker extends Widget{
+class AnalogTimePicker extends TkinterBase{
 
     static widgetType = "analogue_timepicker"
 
+    static requiredImports = [
+                                ...TkinterBase.requiredImports, 
+                                'from tktimepicker import AnalogPicker, AnalogThemes'
+                            ]
+    
+    static requirements = ["tkTimePicker"]
+
     constructor(props) {
         super(props)
 
@@ -28,27 +38,72 @@ class AnalogTimePicker extends Widget{
             attrs: {
                 ...newAttrs,
                 styling: {
+                    theme:{
+                        label: "Theme",
+                        tool: Tools.SELECT_DROPDOWN, 
+                        toolProps: {placeholder: "select theme"},
+                        value: "",
+                        options: ["Dracula", "Navy blue", "Purple"].map(val => ({value: val, label: val})),
+                        onChange: (value) => this.handleThemeChange(value)
+                    },
                     ...newAttrs.styling,
-                    foregroundColor: {
-                        label: "Foreground Color",
+                    clockColor: {
+                        label: "Clock Color",
+                        tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
+                        value: "#EEEEEE",
+                        onChange: (value) => {
+                            this.setAttrValue("styling.clockColor", value)
+                        }
+                    },
+                    displayColor: {
+                        label: "Display Color",
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetInnerStyle("color", value)
-                            this.setAttrValue("styling.foregroundColor", value)
+                            this.setAttrValue("styling.displayColor", value)
+                        }
+                    },
+                    numberColor: {
+                        label: "Numbers Color",
+                        tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
+                        value: "#000",
+                        onChange: (value) => {
+                            this.setAttrValue("styling.numberColor", value)
+                        }
+                    },
+                    handleColor: {
+                        label: "Handle Color",
+                        tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
+                        value: "#000000c0",
+                        onChange: (value) => {
+                            this.setAttrValue("styling.handleColor", value)
+                        }
+                    },
+                    
+                },
+                clockMode:{
+                    label: "Clock Mode",
+                    tool: Tools.SELECT_DROPDOWN, 
+                    toolProps: {placeholder: "select mode", defaultValue: 12},
+                    value: 12,
+                    options: [12, 24].map(val => ({value: val, label: val})),
+                    onChange: (value) => {
+                        this.setAttrValue("clockMode", value)
+                        if (value === 24){
+                            // FIXME: the timepicker for 24 hrs also shows 12 hrs time
+                            
+                            this.timePicker.set24h()
+
+                        }else{
+                            this.timePicker.set12h()
                         }
                     }
                 },
-                buttonLabel: {
-                    label: "Button Label",
-                    tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
-                    toolProps: {placeholder: "Button label", maxLength: 100}, 
-                    value: "Button",
-                    onChange: (value) => this.setAttrValue("buttonLabel", value)
-                }
 
             }
         }
+
+        this.handleThemeChange = this.handleThemeChange.bind(this)
     }
 
     componentDidMount(){
@@ -61,6 +116,7 @@ class AnalogTimePicker extends Widget{
                                 mode: "12"
                             })
         
+        // used to remove ok and cancel buttons
         const timePickerBtns = this.timePickerRef.current.getElementsByClassName("atp-clock-btn")
         for (let i = 0; i < timePickerBtns.length; i++) {
             timePickerBtns[i].remove()
@@ -71,6 +127,51 @@ class AnalogTimePicker extends Widget{
         this.timePicker.dispose()
     }
 
+    handleThemeChange(value){
+        this.setAttrValue("styling.theme", value)
+
+        if (value === "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"){
+            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"){
+            this.setAttrValue("styling.handleColor", "#EE333D")
+            this.setAttrValue("styling.displayColor", "#71135C")
+            this.setAttrValue("styling.backgroundColor", "#4E0D3A")
+            this.setAttrValue("styling.clockColor", "#71135C")
+            this.setAttrValue("styling.numberColor", "#fff")
+        }
+
+    }
+
+    generateCode(variableName, parent){
+
+        const theme = this.getAttrValue("styling.theme")
+
+        const mode = this.getAttrValue("clockMode")
+        const bgColor = this.getAttrValue("styling.backgroundColor")
+        const clockColor = this.getAttrValue("styling.clockColor")
+        const displayColor = this.getAttrValue("styling.displayColor")
+        const numColor = this.getAttrValue("styling.numberColor")
+        const handleColor = this.getAttrValue("styling.handleColor")
+
+        const config = convertObjectToKeyValueString(this.getConfigCode())
+
+        return [
+                `${variableName} = AnalogPicker(master=${parent})`,
+                `${variableName}.config(${config})`,
+                `${variableName}.${this.getLayoutCode()}`
+            ]
+    }
+
     getToolbarAttrs(){
 
         const toolBarAttrs = super.getToolbarAttrs()
@@ -79,7 +180,6 @@ class AnalogTimePicker extends Widget{
         return ({
             id: this.__id,
             widgetName: toolBarAttrs.widgetName,
-            buttonLabel: this.state.attrs.buttonLabel,
             size: toolBarAttrs.size,
 
             ...this.state.attrs,
@@ -87,12 +187,22 @@ class AnalogTimePicker extends Widget{
         })
     }
 
+    
     renderContent(){
+        const timePickerStyling = { 
+                '--bg': this.getAttrValue("styling.backgroundColor"), 
+                '--clock-color': this.getAttrValue("styling.clockColor"), 
+                '--number-color': this.getAttrValue("styling.numberColor"), 
+                '--time-display': this.getAttrValue("styling.displayColor"), 
+                '--main-handle-color': this.getAttrValue("styling.handleColor"), 
+            }
+
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
-                        style={this.state.widgetInnerStyling} ref={this.timePickerRef}>
+                        style={timePickerStyling} 
+                        ref={this.timePickerRef}>
                     
                 </div>
             </div>

src/frameworks/tkinter/plugins/styles/timepickerStyle.css

@@ -0,0 +1,28 @@
+
+.atp-time {
+    background-color:  var(--time-display, black) !important;
+    text-align: center !important;
+    font-size: 35px;
+}
+
+.atp-clock-cnt {
+	background-color: var(--bg, white) !important;
+}
+
+.atp-face-color {
+	background-color: var(--clock-color, #EEEEEE) !important;
+}
+
+.atp-n {
+	color: var(--number-color, #000) !important;
+}
+
+/* .atp-color--primary {
+	background-color: var(--main-handle-color, #000000c0) !important;
+} */
+
+
+.atp-h-cnt-cnt .atp-h-ctn, .atp-h, .atp-b, .atp-h-dot{
+	/* affects only the handle*/
+	background-color: var(--main-handle-color, #000000c0) !important;
+}