+
+ )
+ }
+
+}
+
+
+export default AnalogTimePicker
\ No newline at end of file
diff --git a/src/frameworks/tkinter/plugins/assets/map.png b/src/frameworks/tkinter/plugins/assets/map.png
new file mode 100644
index 0000000..fcfd2c0
Binary files /dev/null and b/src/frameworks/tkinter/plugins/assets/map.png differ
diff --git a/src/frameworks/tkinter/plugins/assets/video.jpg b/src/frameworks/tkinter/plugins/assets/video.jpg
new file mode 100644
index 0000000..d0692e6
Binary files /dev/null and b/src/frameworks/tkinter/plugins/assets/video.jpg differ
diff --git a/src/frameworks/tkinter/plugins/mapview.js b/src/frameworks/tkinter/plugins/mapview.js
new file mode 100644
index 0000000..bd6ddf4
--- /dev/null
+++ b/src/frameworks/tkinter/plugins/mapview.js
@@ -0,0 +1,79 @@
+import React from "react"
+
+
+import Widget from "../../../canvas/widgets/base"
+import Tools from "../../../canvas/constants/tools"
+import { removeKeyFromObject } from "../../../utils/common"
+
+import MapImage from "./assets/map.png"
+import { MinusOutlined, PlayCircleFilled, PlusOutlined } from "@ant-design/icons"
+
+
+class MapView extends Widget{
+
+ static widgetType = "map_view"
+
+ constructor(props) {
+ super(props)
+
+ this.droppableTags = null
+
+ const newAttrs = removeKeyFromObject("layout", this.state.attrs)
+
+ this.state = {
+ ...this.state,
+ size: { width: 400, height: 250 },
+ }
+ }
+
+ componentDidMount(){
+ super.componentDidMount()
+ this.setWidgetName("Map viewer")
+ this.setAttrValue("styling.backgroundColor", "#E4E2E2")
+ }
+
+ getToolbarAttrs(){
+
+ const toolBarAttrs = super.getToolbarAttrs()
+
+
+ return ({
+ id: this.__id,
+ widgetName: toolBarAttrs.widgetName,
+ size: toolBarAttrs.size,
+
+ ...this.state.attrs,
+
+ })
+ }
+
+ renderContent(){
+ return (
+
+
+
+
+
+ )
+ }
+
+}
+
+
+export default MapView
\ No newline at end of file
diff --git a/src/frameworks/tkinter/plugins/pandasTable.js b/src/frameworks/tkinter/plugins/pandasTable.js
new file mode 100644
index 0000000..6c90c3b
--- /dev/null
+++ b/src/frameworks/tkinter/plugins/pandasTable.js
@@ -0,0 +1,139 @@
+
+
+
+
+import React, { useEffect, useRef, useState } from "react"
+
+import Widget from "../../../canvas/widgets/base"
+import { removeKeyFromObject } from "../../../utils/common"
+
+import MapImage from "./assets/map.png"
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons"
+
+
+const ResizableTable = ({minRows=5, minCols=5}) => {
+ const [rows, setRows] = useState(minRows)
+ const [cols, setCols] = useState(minCols)
+ const containerRef = useRef(null)
+
+
+
+ useEffect(() => {
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ const { width, height } = entry.contentRect
+
+ // Set number of columns and rows based on widget width and height
+ const newCols = Math.max(minCols, Math.floor(width / 100)) // each column is 100px wide
+ const newRows = Math.max(minRows, Math.floor(height / 50)) // each row is 50px high
+
+ setCols(newCols)
+ setRows(newRows)
+ }
+ })
+
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current); // Start observing the widget
+ }
+
+ return () => {
+ if (containerRef.current) {
+ resizeObserver.unobserve(containerRef.current); // Stop observing when component unmounts
+ }
+ }
+ }, [containerRef])
+
+
+ return (
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: rows }).map((_, rowIndex) => (
+
+
+ )
+}
+
+
+class PandasTable extends Widget{
+
+ static widgetType = "pandas_table"
+
+ constructor(props) {
+ super(props)
+
+ this.droppableTags = null
+
+ const newAttrs = removeKeyFromObject("layout", this.state.attrs)
+
+ this.state = {
+ ...this.state,
+ size: { width: 400, height: 250 },
+ }
+ }
+
+ componentDidMount(){
+ super.componentDidMount()
+ this.setWidgetName("Pandas Table")
+ this.setAttrValue("styling.backgroundColor", "#E4E2E2")
+ }
+
+ getToolbarAttrs(){
+
+ const toolBarAttrs = super.getToolbarAttrs()
+
+
+ return ({
+ id: this.__id,
+ widgetName: toolBarAttrs.widgetName,
+ size: toolBarAttrs.size,
+
+ ...this.state.attrs,
+
+ })
+ }
+
+ renderContent(){
+ return (
+ | + {/* Row {rowIndex + 1}, Col {colIndex + 1} */} + | + ))} +
+
+ )
+ }
+
+}
+
+
+export default PandasTable
+
+
+
+
+/**
+ * {'align': 'w',
+ 'cellbackgr': '#F4F4F3',
+ 'cellwidth': 80,
+ 'floatprecision': 2,
+ 'thousandseparator': '',
+ 'font': 'Arial',
+ 'fontsize': 12,
+ 'fontstyle': '',
+ 'grid_color': '#ABB1AD',
+ 'linewidth': 1,
+ 'rowheight': 22,
+ 'rowselectedcolor': '#E4DED4',
+ 'textcolor': 'black'}
+ */
\ No newline at end of file
diff --git a/src/frameworks/tkinter/plugins/videoPlayer.js b/src/frameworks/tkinter/plugins/videoPlayer.js
new file mode 100644
index 0000000..5225e75
--- /dev/null
+++ b/src/frameworks/tkinter/plugins/videoPlayer.js
@@ -0,0 +1,70 @@
+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"
+
+
+class VideoPlayer extends Widget{
+
+ static widgetType = "video_player"
+
+ constructor(props) {
+ super(props)
+
+ this.droppableTags = null
+
+ const newAttrs = removeKeyFromObject("layout", this.state.attrs)
+
+ this.state = {
+ ...this.state,
+ size: { width: 'fit', height: 'fit' },
+ }
+ }
+
+ componentDidMount(){
+ super.componentDidMount()
+ this.setWidgetName("Video Player")
+ this.setAttrValue("styling.backgroundColor", "#E4E2E2")
+ }
+
+ getToolbarAttrs(){
+
+ const toolBarAttrs = super.getToolbarAttrs()
+
+
+ return ({
+ id: this.__id,
+ widgetName: toolBarAttrs.widgetName,
+ size: toolBarAttrs.size,
+
+ ...this.state.attrs,
+
+ })
+ }
+
+ renderContent(){
+ return (
+
+
+
+
+ )
+ }
+
+}
+
+
+export default VideoPlayer
\ No newline at end of file
diff --git a/src/frameworks/tkinter/sidebarPlugins.js b/src/frameworks/tkinter/sidebarPlugins.js
new file mode 100644
index 0000000..a14ff56
--- /dev/null
+++ b/src/frameworks/tkinter/sidebarPlugins.js
@@ -0,0 +1,42 @@
+
+import ClockImage from "./assets/widgets/plugins/clock.png"
+import VideoImage from "./assets/widgets/plugins/video.png"
+import MapImage from "./assets/widgets/plugins/map.png"
+import DataTableImage from "./assets/widgets/plugins/tables.png"
+
+import AnalogTimePicker from "./plugins/analogTimepicker"
+import VideoPlayer from "./plugins/videoPlayer"
+import MapView from "./plugins/mapview"
+import PandasTable from "./plugins/pandasTable"
+
+
+const TkinterPluginWidgets = [
+ {
+ name: "Analog TimePicker",
+ img: ClockImage,
+ link: "https://github.com",
+ widgetClass: AnalogTimePicker
+ },
+ {
+ name: "Video Player",
+ img: VideoImage,
+ link: "https://github.com/PaulleDemon/tkVideoPlayer",
+ widgetClass: VideoPlayer
+ },
+ {
+ name: "Map viewer",
+ img: MapImage,
+ link: "https://github.com/TomSchimansky/TkinterMapView",
+ widgetClass: MapView
+ },
+ {
+ name: "Pandas Table",
+ img: DataTableImage,
+ link: "https://github.com/dmnfarrell/pandastable",
+ widgetClass: PandasTable
+ },
+
+]
+
+
+export default TkinterPluginWidgets
diff --git a/src/frameworks/tkinter/sidebarWidgets.js b/src/frameworks/tkinter/sidebarWidgets.js
index b1c861e..2a36fae 100644
--- a/src/frameworks/tkinter/sidebarWidgets.js
+++ b/src/frameworks/tkinter/sidebarWidgets.js
@@ -1,31 +1,31 @@
-import { CheckBox, RadioButton } from "./widgets/ checkButton"
-import Button from "./widgets/button"
-import Frame from "./widgets/frame"
-import { Input, Text } from "./widgets/input"
-import Label from "./widgets/label"
import MainWindow from "./widgets/mainWindow"
+import TopLevel from "./widgets/toplevel"
+import Frame from "./widgets/frame"
+import Label from "./widgets/label"
+import Button from "./widgets/button"
import OptionMenu from "./widgets/optionMenu"
import Slider from "./widgets/slider"
-import TopLevel from "./widgets/toplevel"
+import { CheckBox, RadioButton } from "./widgets/ checkButton"
+import { Input, Text } from "./widgets/input"
import SpinBox from "./widgets/spinBox"
-import MainWindowImage from "./assets/widgets/mainwindow.png"
-import TopLevelImage from "./assets/widgets/Toplevel.png"
-import FrameImage from "./assets/widgets/frame2.png"
-import LabelImage from "./assets/widgets/label.png"
-import ButtonImage from "./assets/widgets/button.png"
-import InputImage from "./assets/widgets/input.png"
-import TextAreaImage from "./assets/widgets/textarea.png"
-import SliderImage from "./assets/widgets/slider.png"
-import DropDownImage from "./assets/widgets/dropdown.png"
-import CheckButtonImage from "./assets/widgets/check.png"
-import RadioButtonImage from "./assets/widgets/radio.png"
-import SpinBoxImage from "./assets/widgets/spinbox.png"
+import MainWindowImage from "./assets/widgets/main/mainwindow.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"
+import ButtonImage from "./assets/widgets/main/button.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"
+import DropDownImage from "./assets/widgets/main/dropdown.png"
+import CheckButtonImage from "./assets/widgets/main/check.png"
+import RadioButtonImage from "./assets/widgets/main/radio.png"
+import SpinBoxImage from "./assets/widgets/main/spinbox.png"
-const TkinterSidebar = [
+const TkinterWidgets = [
{
name: "Main window",
img: MainWindowImage,
@@ -102,7 +102,7 @@ const TkinterSidebar = [
]
-export default TkinterSidebar
+export default TkinterWidgets
/**
diff --git a/src/frameworks/tkinter/widgets/button.js b/src/frameworks/tkinter/widgets/button.js
index 8b0d41a..f1b49b8 100644
--- a/src/frameworks/tkinter/widgets/button.js
+++ b/src/frameworks/tkinter/widgets/button.js
@@ -10,12 +10,7 @@ class Button extends Widget{
constructor(props) {
super(props)
- // TODO: disable drop
-
- this.droppableTags = {
- // TODO: exclude all
- exclude: ["image", "video", "media", "main_window", "toplevel"]
- }
+ this.droppableTags = null
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
diff --git a/src/sidebar/pluginsContainer.js b/src/sidebar/pluginsContainer.js
new file mode 100644
index 0000000..cf2e031
--- /dev/null
+++ b/src/sidebar/pluginsContainer.js
@@ -0,0 +1,90 @@
+import { useEffect, useMemo, useState } from "react"
+
+import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons"
+
+import {SidebarWidgetCard} from "../components/cards"
+
+import ButtonWidget from "../assets/widgets/button.png"
+
+import { filterObjectListStartingWith } from "../utils/filter"
+import Widget from "../canvas/widgets/base"
+
+
+/**
+ *
+ * @param {function} onWidgetsUpdate - this is a callback that will be called once the sidebar is populated with widgets
+ * @returns
+ */
+function PluginsContainer({sidebarContent, onWidgetsUpdate}){
+
+
+ const [searchValue, setSearchValue] = useState("")
+ const [widgetData, setWidgetData] = useState(sidebarContent)
+
+ useEffect(() => {
+
+ setWidgetData(sidebarContent)
+ // if (onWidgetsUpdate){
+ // onWidgetsUpdate(widgets)
+ // }
+
+ }, [sidebarContent])
+
+
+
+ useEffect(() => {
+
+ if (searchValue.length > 0){
+ const searchData = filterObjectListStartingWith(sidebarContent, "name", searchValue)
+ setWidgetData(searchData)
+ }else{
+ setWidgetData(sidebarContent)
+ }
+
+ }, [searchValue])
+
+ function onSearch(event){
+
+ setSearchValue(event.target.value)
+
+ }
+
+ return (
+
+
+
+ 
+
+
+
+
+
+
+ )
+
+}
+
+
+export default PluginsContainer
\ No newline at end of file
+
+
+ {
+ searchValue.length > 0 &&
+
+ setSearchValue("")}>
+
+ }
+
+
+ {
+ widgetData.map((widget, index) => {
+ return (
+
+