ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-22 09:10:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs: updates Adding_Components.md

Browse Source
This commit is contained in:
Mose Müller 2023-11-09 14:15:30 +01:00
parent 856f5d0c79
commit 4f7c6ccde4
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/dev-guide/Adding_Components.md
View File

@ -107,7 +107,8 @@ Write the React component code, following the structure and patterns used in exi
For example, for the `Image` component, a template could look like this: For example, for the `Image` component, a template could look like this:
```tsx ```tsx
import { emit_update } from '../socket'; // use this when your component should update values in the backend import { setAttribute, runMethod } from '../socket'; // use this when your component should sets values of attributes
// or runs a method, respectively
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Card, Collapse, Image } from 'react-bootstrap'; import { Card, Collapse, Image } from 'react-bootstrap';
@ -175,10 +176,10 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
Often, React components in the frontend will need to send updates to the backend, especially when user interactions result in a change of state or data. In `pydase`, we use `socketio` to seamlessly communicate these changes. Here's a detailed guide on how to emit update events from your frontend component: Often, React components in the frontend will need to send updates to the backend, especially when user interactions result in a change of state or data. In `pydase`, we use `socketio` to seamlessly communicate these changes. Here's a detailed guide on how to emit update events from your frontend component:
1. **Setting Up Emission**: Ensure you've imported the required functions and methods for emission. The main function we'll use for this is `emit_update` from the `socket` module: 1. **Setting Up Emission**: Ensure you've imported the required functions and methods for emission. The main function we'll use for this is `setAttribute` from the `socket` module:
```tsx ```tsx
import { emit_update } from '../socket'; import { setAttribute } from '../socket';
``` ```
2. **Understanding the Emission Parameters**: 2. **Understanding the Emission Parameters**:
@ -203,7 +204,7 @@ Often, React components in the frontend will need to send updates to the backend
const { name, parentPath, value } = props; const { name, parentPath, value } = props;
const setChecked = (checked: boolean) => { const setChecked = (checked: boolean) => {
emit_update(name, parentPath, checked); setAttribute(name, parentPath, checked);
}; };
return ( return (
@ -218,7 +219,7 @@ Often, React components in the frontend will need to send updates to the backend
}); });
``` ```
In this example, whenever the button's checked state changes (`onChange` event), we invoke the `setChecked` method, which in turn emits the new state to the backend using `emit_update`. In this example, whenever the button's checked state changes (`onChange` event), we invoke the `setChecked` method, which in turn emits the new state to the backend using `setAttribute`.
### Step 4: Add the New Component to the GenericComponent ### Step 4: Add the New Component to the GenericComponent