ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-07 14:00:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: adding first version of Image component

Browse Source
This commit is contained in:
Mose Müller 2023-08-09 17:47:55 +02:00
parent 4d66b6b27c
commit 8d55f3b853
10 changed files with 87 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/GenericComponent.tsx
View File

@ -8,6 +8,7 @@ import { AsyncMethodComponent } from './AsyncMethodComponent';
import { StringComponent } from './StringComponent'; import { StringComponent } from './StringComponent';
import { ListComponent } from './ListComponent'; import { ListComponent } from './ListComponent';
import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent'; import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
import { ImageComponent } from './ImageComponent';
type AttributeType = type AttributeType =
| 'str' | 'str'
@ -19,7 +20,8 @@ type AttributeType =
| 'method' | 'method'
| 'DataService' | 'DataService'
| 'Enum' | 'Enum'
| 'NumberSlider'; | 'NumberSlider'
| 'Image';
type ValueType = boolean | string | number | object; type ValueType = boolean | string | number | object;
export interface Attribute { export interface Attribute {
@ -149,6 +151,17 @@ export const GenericComponent = React.memo(
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
/> />
); );
} else if (attribute.type === 'Image') {
return (
<ImageComponent
name={name}
parentPath={parentPath}
value={attribute.value['value']['value'] as string}
readOnly={attribute.readonly}
docString={attribute.doc}
// Add any other specific props for the ImageComponent here
/>
);
} else { } else {
return <div key={name}>{name}</div>; return <div key={name}>{name}</div>;
} }

42
frontend/src/components/ImageComponent.tsx Normal file
View File

@ -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 (
<div className={'imageComponent'} id={parentPath.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}
<DocStringComponent docString={docString} />
{/* Your component JSX here */}
<Card>
<Card.Header
style={{ cursor: 'pointer' }} // Change cursor style on hover
>
{name}
</Card.Header>
<Image src={`data:image/jpeg;base64,${value}`}></Image>
</Card>
</div>
);
});

6
src/pydase/components/__init__.py
View File

@ -27,6 +27,10 @@ print(my_service.voltage.value) # Output: 5
``` ```
""" """
from pydase.components.image import Image
from pydase.components.number_slider import NumberSlider from pydase.components.number_slider import NumberSlider
__all__ = ["NumberSlider"] __all__ = [
"NumberSlider",
"Image",
]

18
src/pydase/components/image.py Normal file
View File

@ -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)

6
src/pydase/frontend/asset-manifest.json
View File

@ -1,13 +1,13 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.398bc7f8.css", "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", "index.html": "/index.html",
"main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map", "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": [ "entrypoints": [
"static/css/main.398bc7f8.css", "static/css/main.398bc7f8.css",
"static/js/main.fe08055a.js" "static/js/main.44c6c71b.js"
] ]
} }

2
src/pydase/frontend/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.fe08055a.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.44c6c71b.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

6
src/pydase/frontend/static/js/main.fe08055a.js → src/pydase/frontend/static/js/main.44c6c71b.js
View File

File diff suppressed because one or more lines are too long

0
src/pydase/frontend/static/js/main.fe08055a.js.LICENSE.txt → src/pydase/frontend/static/js/main.44c6c71b.js.LICENSE.txt
View File

1
src/pydase/frontend/static/js/main.44c6c71b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
src/pydase/frontend/static/js/main.fe08055a.js.map
View File

File diff suppressed because one or more lines are too long