From 8d55f3b85367813e0d1af00c29db1860bcd4450c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Wed, 9 Aug 2023 17:47:55 +0200 Subject: [PATCH] feat: adding first version of Image component --- frontend/src/components/GenericComponent.tsx | 15 ++++++- frontend/src/components/ImageComponent.tsx | 42 +++++++++++++++++++ src/pydase/components/__init__.py | 6 ++- src/pydase/components/image.py | 18 ++++++++ src/pydase/frontend/asset-manifest.json | 6 +-- src/pydase/frontend/index.html | 2 +- .../js/{main.fe08055a.js => main.44c6c71b.js} | 6 +-- ...CENSE.txt => main.44c6c71b.js.LICENSE.txt} | 0 .../frontend/static/js/main.44c6c71b.js.map | 1 + .../frontend/static/js/main.fe08055a.js.map | 1 - 10 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 frontend/src/components/ImageComponent.tsx create mode 100644 src/pydase/components/image.py rename src/pydase/frontend/static/js/{main.fe08055a.js => main.44c6c71b.js} (90%) rename src/pydase/frontend/static/js/{main.fe08055a.js.LICENSE.txt => main.44c6c71b.js.LICENSE.txt} (100%) create mode 100644 src/pydase/frontend/static/js/main.44c6c71b.js.map delete mode 100644 src/pydase/frontend/static/js/main.fe08055a.js.map diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx index 5cc7428..38af0c6 100644 --- a/frontend/src/components/GenericComponent.tsx +++ b/frontend/src/components/GenericComponent.tsx @@ -8,6 +8,7 @@ import { AsyncMethodComponent } from './AsyncMethodComponent'; import { StringComponent } from './StringComponent'; import { ListComponent } from './ListComponent'; import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent'; +import { ImageComponent } from './ImageComponent'; type AttributeType = | 'str' @@ -19,7 +20,8 @@ type AttributeType = | 'method' | 'DataService' | 'Enum' - | 'NumberSlider'; + | 'NumberSlider' + | 'Image'; type ValueType = boolean | string | number | object; export interface Attribute { @@ -149,6 +151,17 @@ export const GenericComponent = React.memo( isInstantUpdate={isInstantUpdate} /> ); + } else if (attribute.type === 'Image') { + return ( + + ); } else { return
{name}
; } diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx new file mode 100644 index 0000000..61a1519 --- /dev/null +++ b/frontend/src/components/ImageComponent.tsx @@ -0,0 +1,42 @@ +import React, { useEffect, useRef } from 'react'; +import { emit_update } from '../socket'; +import { Card, Image } from 'react-bootstrap'; +import { DocStringComponent } from './DocStringComponent'; + +interface ImageComponentProps { + name: string; + parentPath: string; + value: string; + readOnly: boolean; + docString: string; + // Define your component specific props here +} + +export const ImageComponent = React.memo((props: ImageComponentProps) => { + const renderCount = useRef(0); + const { name, parentPath, value, docString } = props; + // Your component logic here + + useEffect(() => { + renderCount.current++; + console.log(value); + }); + + return ( +
+ {process.env.NODE_ENV === 'development' && ( +

Render count: {renderCount.current}

+ )} + + {/* Your component JSX here */} + + + {name} + + + +
+ ); +}); diff --git a/src/pydase/components/__init__.py b/src/pydase/components/__init__.py index d3b8ac7..dba223d 100644 --- a/src/pydase/components/__init__.py +++ b/src/pydase/components/__init__.py @@ -27,6 +27,10 @@ print(my_service.voltage.value) # Output: 5 ``` """ +from pydase.components.image import Image from pydase.components.number_slider import NumberSlider -__all__ = ["NumberSlider"] +__all__ = [ + "NumberSlider", + "Image", +] diff --git a/src/pydase/components/image.py b/src/pydase/components/image.py new file mode 100644 index 0000000..e170296 --- /dev/null +++ b/src/pydase/components/image.py @@ -0,0 +1,18 @@ +from typing import Any + +from pydase.data_service.data_service import DataService + + +class Image(DataService): + def __init__( + self, + value: bytes | str = "", + ) -> None: + self.value = value + super().__init__() + + def __setattr__(self, __name: str, __value: Any) -> None: + if __name == "value": + if isinstance(__value, bytes): + __value = __value.decode() + return super().__setattr__(__name, __value) diff --git a/src/pydase/frontend/asset-manifest.json b/src/pydase/frontend/asset-manifest.json index 581c388..51b7ded 100644 --- a/src/pydase/frontend/asset-manifest.json +++ b/src/pydase/frontend/asset-manifest.json @@ -1,13 +1,13 @@ { "files": { "main.css": "/static/css/main.398bc7f8.css", - "main.js": "/static/js/main.fe08055a.js", + "main.js": "/static/js/main.44c6c71b.js", "index.html": "/index.html", "main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map", - "main.fe08055a.js.map": "/static/js/main.fe08055a.js.map" + "main.44c6c71b.js.map": "/static/js/main.44c6c71b.js.map" }, "entrypoints": [ "static/css/main.398bc7f8.css", - "static/js/main.fe08055a.js" + "static/js/main.44c6c71b.js" ] } \ No newline at end of file diff --git a/src/pydase/frontend/index.html b/src/pydase/frontend/index.html index 0525d34..2efc98a 100644 --- a/src/pydase/frontend/index.html +++ b/src/pydase/frontend/index.html @@ -1 +1 @@ -pydase App
\ No newline at end of file +pydase App
\ No newline at end of file diff --git a/src/pydase/frontend/static/js/main.fe08055a.js b/src/pydase/frontend/static/js/main.44c6c71b.js similarity index 90% rename from src/pydase/frontend/static/js/main.fe08055a.js rename to src/pydase/frontend/static/js/main.44c6c71b.js index d2ebaf0..b118971 100644 --- a/src/pydase/frontend/static/js/main.fe08055a.js +++ b/src/pydase/frontend/static/js/main.44c6c71b.js @@ -1,3 +1,3 @@ -/*! For license information please see main.fe08055a.js.LICENSE.txt */ -!function(){var e={694:function(e,t){var n;!function(){"use strict";var r={}.hasOwnProperty;function a(){for(var e=[],t=0;t