added plugins, updated image paths
This commit is contained in:
paul
105
src/frameworks/tkinter/plugins/analogTimepicker.js
Normal file
105
src/frameworks/tkinter/plugins/analogTimepicker.js
Normal file
@@ -0,0 +1,105 @@
|
||||
import React from "react"
|
||||
|
||||
import { timePicker, timePickerInput } from 'analogue-time-picker'
|
||||
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
import { removeKeyFromObject } from "../../../utils/common"
|
||||
|
||||
|
||||
class AnalogTimePicker extends Widget{
|
||||
|
||||
static widgetType = "analogue_timepicker"
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.droppableTags = null
|
||||
|
||||
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
|
||||
|
||||
this.timePicker = null
|
||||
|
||||
this.timePickerRef = React.createRef()
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 'fit', height: 'fit' },
|
||||
attrs: {
|
||||
...newAttrs,
|
||||
styling: {
|
||||
...newAttrs.styling,
|
||||
foregroundColor: {
|
||||
label: "Foreground Color",
|
||||
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
|
||||
value: "#000",
|
||||
onChange: (value) => {
|
||||
this.setWidgetStyling("color", value)
|
||||
this.setAttrValue("styling.foregroundColor", value)
|
||||
}
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.setWidgetName("Time picker")
|
||||
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
|
||||
this.timePicker = timePicker({
|
||||
element: this.timePickerRef.current,
|
||||
mode: "12"
|
||||
})
|
||||
|
||||
const timePickerBtns = this.timePickerRef.current.getElementsByClassName("atp-clock-btn")
|
||||
for (let i = 0; i < timePickerBtns.length; i++) {
|
||||
timePickerBtns[i].remove()
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
this.timePicker.dispose()
|
||||
}
|
||||
|
||||
getToolbarAttrs(){
|
||||
|
||||
const toolBarAttrs = super.getToolbarAttrs()
|
||||
|
||||
|
||||
return ({
|
||||
id: this.__id,
|
||||
widgetName: toolBarAttrs.widgetName,
|
||||
buttonLabel: this.state.attrs.buttonLabel,
|
||||
size: toolBarAttrs.size,
|
||||
|
||||
...this.state.attrs,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
renderContent(){
|
||||
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.widgetStyling} ref={this.timePickerRef}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default AnalogTimePicker
|
||||
BIN
src/frameworks/tkinter/plugins/assets/map.png
Normal file
BIN
src/frameworks/tkinter/plugins/assets/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
src/frameworks/tkinter/plugins/assets/video.jpg
Normal file
BIN
src/frameworks/tkinter/plugins/assets/video.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
79
src/frameworks/tkinter/plugins/mapview.js
Normal file
79
src/frameworks/tkinter/plugins/mapview.js
Normal file
@@ -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 (
|
||||
<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.widgetStyling}>
|
||||
<div className="tw-relative tw-w-full tw-h-full">
|
||||
<div className="tw-absolute tw-left-5 tw-top-3 tw-flex tw-flex-col tw-gap-2">
|
||||
<div className="tw-text-white tw-bg-black tw-text-center
|
||||
tw-p-[2px]
|
||||
tw-w-[25px] tw-h-[25px] tw-rounded-md">
|
||||
<PlusOutlined className="tw-text-xl"/>
|
||||
</div>
|
||||
<div className="tw-text-white tw-bg-black tw-text-center
|
||||
tw-p-1
|
||||
tw-w-[25px] tw-h-[25px] tw-rounded-md">
|
||||
<MinusOutlined className="tw-text-xl"/>
|
||||
</div>
|
||||
</div>
|
||||
<img src={MapImage} className="tw-w-full tw-h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default MapView
|
||||
139
src/frameworks/tkinter/plugins/pandasTable.js
Normal file
139
src/frameworks/tkinter/plugins/pandasTable.js
Normal file
@@ -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 (
|
||||
<div ref={containerRef} className="tw-w-full tw-h-full tw-rounded-md tw-border tw-border-solid tw-overflow-hidden">
|
||||
<table className="tw-w-full tw-h-full">
|
||||
<tbody className="">
|
||||
{Array.from({ length: rows }).map((_, rowIndex) => (
|
||||
<tr key={rowIndex} className="">
|
||||
{Array.from({ length: cols }).map((_, colIndex) => (
|
||||
<td key={colIndex} className="tw-border tw-border-solid tw-border-gray-400 tw-p-2">
|
||||
{/* Row {rowIndex + 1}, Col {colIndex + 1} */}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
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 (
|
||||
<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.widgetStyling}>
|
||||
<ResizableTable />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
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'}
|
||||
*/
|
||||
70
src/frameworks/tkinter/plugins/videoPlayer.js
Normal file
70
src/frameworks/tkinter/plugins/videoPlayer.js
Normal file
@@ -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 (
|
||||
<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.widgetStyling}>
|
||||
<div className="tw-relative tw-w-full tw-h-full">
|
||||
<div className="tw-absolute tw-text-white tw-left-1/2 tw-top-1/2
|
||||
tw--translate-x-1/2 tw--translate-y-1/2">
|
||||
<PlayCircleFilled className="tw-text-4xl"/>
|
||||
</div>
|
||||
<img src={VideoImage} className="tw-w-full tw-h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default VideoPlayer
|
||||
Reference in New Issue
Block a user