0
0
mirror of https://github.com/bec-project/bec_widgets.git synced 2025-07-13 19:21:50 +02:00

docs: replaces instances of QtDesigner with BEC Designer for improved clarity

This commit is contained in:
2025-04-27 12:44:46 +02:00
parent b3dbe922de
commit 60852e228f
25 changed files with 69 additions and 69 deletions

View File

@ -16,7 +16,7 @@ Below is a list of useful links to help you start developing with Qt and QtDesig
- [PySide6 Quick Start Guide](https://doc.qt.io/qtforpython-6/index.html): The official documentation for PySide6, - [PySide6 Quick Start Guide](https://doc.qt.io/qtforpython-6/index.html): The official documentation for PySide6,
including quick start guides and tutorials. including quick start guides and tutorials.
- [Qt Designer Official Documentation](https://doc.qt.io/qt-6/qtdesigner-manual.html): Comprehensive documentation for - [Qt Designer Official Documentation](https://doc.qt.io/qt-6/qtdesigner-manual.html): Comprehensive documentation for
QtDesigner. Qt Designer, the underlying tool for BEC Designer.
- [Simple PyQt Tutorial from RealPython](https://realpython.com/python-pyqt-gui-calculator/): A beginner-friendly - [Simple PyQt Tutorial from RealPython](https://realpython.com/python-pyqt-gui-calculator/): A beginner-friendly
tutorial on creating your first GUI application with PyQt. tutorial on creating your first GUI application with PyQt.
- [PyQtGraph Documentation](https://pyqtgraph.readthedocs.io/en/latest/): BEC Widgets relies on PyQtGraph for plotting; - [PyQtGraph Documentation](https://pyqtgraph.readthedocs.io/en/latest/): BEC Widgets relies on PyQtGraph for plotting;

View File

@ -110,14 +110,14 @@ window.show()
sys.exit(app.exec()) sys.exit(app.exec())
``` ```
## Writing applications using Qt Designer ## Writing applications using BEC Designer
BEC Widgets are designed to be used with QtDesigner to quickly design GUI. BEC Widgets are designed to be used with BEC Designer to quickly design GUI.
## Example of promoting widgets in Qt Designer ## Example of promoting widgets in BEC Designer
_Work in progress_ _Work in progress_
## Implementation of plugins into Qt Designer ## Implementation of plugins into BEC Designer
_Work in progress_ _Work in progress_

View File

@ -28,5 +28,5 @@ pip cache purge
This can resolve conflicts or issues with package installations. This can resolve conflicts or issues with package installations.
```{warning} ```{warning}
At the moment PyQt6 is no longer officially supported by BEC Widgets due to incompatibilities with Qt Designer. Please use PySide6 instead. At the moment PyQt6 is no longer officially supported by BEC Widgets due to incompatibilities with BEC Designer. Please use PySide6 instead.
``` ```

View File

@ -44,7 +44,7 @@ class TestWidget(BECWidget, QWidget):
### Generating the plugin files and RPC client template ### Generating the plugin files and RPC client template
To allow the BEC client to communicate with the GUI server and to know which widgets are available, To allow the BEC client to communicate with the GUI server and to know which widgets are available,
as well as to allow the Qt Designer to find the available widgets, a code generation tool should be as well as to allow the BEC Designer to find the available widgets, a code generation tool should be
run to prepare a client file which lists all the available widget classes and functions. Make sure run to prepare a client file which lists all the available widget classes and functions. Make sure
you are in the BEC python environment where your plugin repository is also installed, and run: you are in the BEC python environment where your plugin repository is also installed, and run:

View File

@ -48,7 +48,7 @@ The `Colormap Button` is a custom widget that displays the current colormap and,
- **Current Colormap Display**: Shows the name and a gradient icon of the current colormap directly on the button. - **Current Colormap Display**: Shows the name and a gradient icon of the current colormap directly on the button.
- **Nested Menu Selection**: Offers a nested menu with categorized colormaps, making it easy to find and select the desired colormap. - **Nested Menu Selection**: Offers a nested menu with categorized colormaps, making it easy to find and select the desired colormap.
- **Signal Emission**: Emits a signal when the colormap changes, providing the new colormap name as a string. - **Signal Emission**: Emits a signal when the colormap changes, providing the new colormap name as a string.
- **Qt Designer Integration**: Exposes properties and signals to be used within Qt Designer, allowing for customization within the designer interface. - **BEC Designer Integration**: Exposes properties and signals to be used within BEC Designer, allowing for customization within the designer interface.
- **Resizable and Styled**: Features adjustable size policies and styles to match the look and feel of standard `QPushButton` widgets, including rounded edges. - **Resizable and Styled**: Features adjustable size policies and styles to match the look and feel of standard `QPushButton` widgets, including rounded edges.
````` `````

View File

@ -4,7 +4,7 @@
````{tab} Overview ````{tab} Overview
The `Device Input Widgets` consist of two primary widgets: `DeviceLineEdit` and `DeviceComboBox`. Both widgets are designed to facilitate the selection of devices within the BEC environment, allowing users to filter, search, and select devices dynamically. These widgets are highly customizable and can be integrated into a GUI either through direct code instantiation or by using `QtDesigner`. The `Device Input Widgets` consist of two primary widgets: `DeviceLineEdit` and `DeviceComboBox`. Both widgets are designed to facilitate the selection of devices within the BEC environment, allowing users to filter, search, and select devices dynamically. These widgets are highly customizable and can be integrated into a GUI either through direct code instantiation or by using `BEC Designer`.
## DeviceLineEdit ## DeviceLineEdit
The `DeviceLineEdit` widget provides a line edit interface with autocomplete functionality for device names, making it easier for users to quickly search and select devices. The `DeviceLineEdit` widget provides a line edit interface with autocomplete functionality for device names, making it easier for users to quickly search and select devices.
@ -19,7 +19,7 @@ The `DeviceComboBox` widget offers a dropdown interface for device selection, pr
- **Real-Time Autocomplete (LineEdit)**: The `DeviceLineEdit` widget supports real-time autocomplete, helping users find devices faster. - **Real-Time Autocomplete (LineEdit)**: The `DeviceLineEdit` widget supports real-time autocomplete, helping users find devices faster.
- **Real-Time Input Validation (LineEdit)**: User input is validated in real-time with a red border around the `DeviceLineEdit` indicating an invalid input. - **Real-Time Input Validation (LineEdit)**: User input is validated in real-time with a red border around the `DeviceLineEdit` indicating an invalid input.
- **Dropdown Selection (ComboBox)**: The `DeviceComboBox` widget displays devices in a dropdown list, making selection straightforward. - **Dropdown Selection (ComboBox)**: The `DeviceComboBox` widget displays devices in a dropdown list, making selection straightforward.
- **QtDesigner Integration**: Both widgets can be added as custom widgets in `QtDesigner` or instantiated directly in code. - **BEC Designer Integration**: Both widgets can be added as custom widgets in `BEC Designer` or instantiated directly in code.
## Screenshot ## Screenshot
```{figure} /assets/widget_screenshots/device_inputs.png ```{figure} /assets/widget_screenshots/device_inputs.png
@ -29,7 +29,7 @@ The `DeviceComboBox` widget offers a dropdown interface for device selection, pr
````{tab} Examples ````{tab} Examples
Both `DeviceLineEdit` and `DeviceComboBox` can be integrated within a GUI application through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and use these widgets. Both `DeviceLineEdit` and `DeviceComboBox` can be integrated within a GUI application through direct code instantiation or by using `BEC Designer`. Below are examples demonstrating how to create and use these widgets.
## Example 1 - Creating a DeviceLineEdit in Code ## Example 1 - Creating a DeviceLineEdit in Code

View File

@ -4,7 +4,7 @@
````{tab} Overview ````{tab} Overview
The [`PositionIndicator`](/api_reference/_autosummary/bec_widgets.cli.client.PositionIndicator) widget is a simple yet effective tool for visually indicating the position of a motor within its set limits. This widget is particularly useful in applications where it is important to provide a visual clue of the motor's current position relative to its minimum and maximum values. The `PositionIndicator` can be easily integrated into your GUI application either through direct code instantiation or by using `QtDesigner`. The [`PositionIndicator`](/api_reference/_autosummary/bec_widgets.cli.client.PositionIndicator) widget is a simple yet effective tool for visually indicating the position of a motor within its set limits. This widget is particularly useful in applications where it is important to provide a visual clue of the motor's current position relative to its minimum and maximum values. The `PositionIndicator` can be easily integrated into your GUI application either through direct code instantiation or by using `BEC Designer`.
## Key Features: ## Key Features:
- **Position Visualization**: Displays the current position of a motor on a linear scale, showing its location relative to the defined limits. - **Position Visualization**: Displays the current position of a motor on a linear scale, showing its location relative to the defined limits.
@ -12,7 +12,7 @@ The [`PositionIndicator`](/api_reference/_autosummary/bec_widgets.cli.client.Pos
- **Real-Time Updates**: Responds to real-time updates, allowing the position indicator to move dynamically as the motor's position changes. - **Real-Time Updates**: Responds to real-time updates, allowing the position indicator to move dynamically as the motor's position changes.
- **Compact Design**: The widget is designed to be compact and visually appealing, making it suitable for various GUI applications. - **Compact Design**: The widget is designed to be compact and visually appealing, making it suitable for various GUI applications.
- **Customizable Appearance**: The appearance of the position indicator can be customized to match the overall design of your application, including colors, orientation, and size. - **Customizable Appearance**: The appearance of the position indicator can be customized to match the overall design of your application, including colors, orientation, and size.
- **QtDesigner Integration**: Can be added directly in code or through `QtDesigner`, making it adaptable to various use cases. - **BEC Designer Integration**: Can be added directly in code or through `BEC Designer`, making it adaptable to various use cases.
## BEC Designer Customization ## BEC Designer Customization
@ -36,7 +36,7 @@ Within the BECDesigner's [property editor](https://doc.qt.io/qt-6/designer-widge
````{tab} Examples ````{tab} Examples
The `PositionIndicator` widget can be embedded in a [`BECDockArea`](#user.widgets.bec_dock_area) or used as an individual component in your application through `QtDesigner`. Below are examples demonstrating how to create and use the `PositionIndicator` from the CLI and also directly within Code. The `PositionIndicator` widget can be embedded in a [`BECDockArea`](#user.widgets.bec_dock_area) or used as an individual component in your application through `BEC Designer`. Below are examples demonstrating how to create and use the `PositionIndicator` from the CLI and also directly within Code.
## Example 1 - Creating a Position Indicator in Code ## Example 1 - Creating a Position Indicator in Code
@ -82,12 +82,12 @@ position_indicator = dock_area.new("position_indicator").new(gui.available_widge
position_indicator.set_range(min_value=0, max_value=200) position_indicator.set_range(min_value=0, max_value=200)
``` ```
## Example 3 - Integrating the Position Indicator in QtDesigner ## Example 3 - Integrating the Position Indicator in BEC Designer
The `PositionIndicator` can be added to your GUI layout using `QtDesigner`. Once added, you can connect it to the motor's position updates using the `on_position_update` slot. The `PositionIndicator` can be added to your GUI layout using `BEC Designer`. Once added, you can connect it to the motor's position updates using the `on_position_update` slot.
```python ```python
# Example: Updating the position in a QtDesigner-based application # Example: Updating the position in a BEC Designer-based application
self.position_indicator.set_value(new_position_value) self.position_indicator.set_value(new_position_value)
``` ```

View File

@ -4,19 +4,19 @@
````{tab} Overview ````{tab} Overview
The [`PositionerBox`](/api_reference/_autosummary/bec_widgets.cli.client.PositionerBox) widget provides a graphical user interface to control a positioner device within the BEC environment. This widget allows users to interact with a positioner by setting setpoints, tweaking the motor position, and stopping motion. The device selection can be done via a small button under the device label, through `QtDesigner`, or by using the command line interface (CLI). This flexibility makes the `PositionerBox` an essential tool for tasks involving precise position control. The [`PositionerBox`](/api_reference/_autosummary/bec_widgets.cli.client.PositionerBox) widget provides a graphical user interface to control a positioner device within the BEC environment. This widget allows users to interact with a positioner by setting setpoints, tweaking the motor position, and stopping motion. The device selection can be done via a small button under the device label, through `BEC Designer`, or by using the command line interface (CLI). This flexibility makes the `PositionerBox` an essential tool for tasks involving precise position control.
## Key Features: ## Key Features:
- **Device Selection**: Easily select a positioner device by clicking the button under the device label or by configuring the widget in `QtDesigner`. - **Device Selection**: Easily select a positioner device by clicking the button under the device label or by configuring the widget in `BEC Designer`.
- **Setpoint Control**: Directly set the positioners target setpoint and issue movement commands. - **Setpoint Control**: Directly set the positioners target setpoint and issue movement commands.
- **Tweak Controls**: Adjust the motor position incrementally using the tweak left/right buttons. - **Tweak Controls**: Adjust the motor position incrementally using the tweak left/right buttons.
- **Real-Time Feedback**: Monitor the devices current position and status, with live updates on whether the device is moving or idle. - **Real-Time Feedback**: Monitor the devices current position and status, with live updates on whether the device is moving or idle.
- **Flexible Integration**: Can be integrated into a GUI through `BECDockArea` or used as a standalone component in `QtDesigner`. - **Flexible Integration**: Can be integrated into a GUI through `BECDockArea` or used as a standalone component in `BEC Designer`.
```` ````
````{tab} Examples ````{tab} Examples
The `PositionerBox` widget can be integrated within a GUI application either through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and use the `PositionerBox` widget. The `PositionerBox` widget can be integrated within a GUI application either through direct code instantiation or by using `BEC Designer`. Below are examples demonstrating how to create and use the `PositionerBox` widget.
## Example 1 - Creating a PositionerBox in Code ## Example 1 - Creating a PositionerBox in Code
@ -46,12 +46,12 @@ app.exec_()
Users can select the positioner device by clicking the button under the device label, which opens a dialog for device selection. Users can select the positioner device by clicking the button under the device label, which opens a dialog for device selection.
## Example 3 - Customizing PositionerBox in QtDesigner ## Example 3 - Customizing PositionerBox in BEC Designer
The `PositionerBox` widget can be added to a GUI through `QtDesigner`. Once integrated, you can configure the default device and customize the widgets appearance and behavior directly within the designer. The `PositionerBox` widget can be added to a GUI through `BEC Designer`. Once integrated, you can configure the default device and customize the widgets appearance and behavior directly within the designer.
```python ```python
# After adding the widget to a form in QtDesigner, you can configure the device: # After adding the widget to a form in BEC Designer, you can configure the device:
self.positioner_box.set_positioner("motor2") self.positioner_box.set_positioner("motor2")
``` ```
```` ````

View File

@ -12,7 +12,7 @@ The `PositionerBox2D` has the same features as the standard `PositionerBox`, but
````{tab} Examples ````{tab} Examples
The `PositionerBox2D` widget can be integrated within a GUI application either through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and use the `PositionerBox2D` widget. The `PositionerBox2D` widget can be integrated within a GUI application either through direct code instantiation or by using `BEC Designer`. Below are examples demonstrating how to create and use the `PositionerBox2D` widget.
## Example 1 - Creating a PositionerBox in Code ## Example 1 - Creating a PositionerBox in Code
@ -42,12 +42,12 @@ app.exec_()
Users can select the positioner device by clicking the button under the device label, which opens a dialog for device selection. Users can select the positioner device by clicking the button under the device label, which opens a dialog for device selection.
## Example 3 - Customizing PositionerBox in QtDesigner ## Example 3 - Customizing PositionerBox in BEC Designer
The `PositionerBox2D` widget can be added to a GUI through `QtDesigner`. Once integrated, you can configure the default device and customize the widgets appearance and behavior directly within the designer. The `PositionerBox2D` widget can be added to a GUI through `BEC Designer`. Once integrated, you can configure the default device and customize the widgets appearance and behavior directly within the designer.
```python ```python
# After adding the widget to a form in QtDesigner, you can configure the device: # After adding the widget to a form in BEC Designer, you can configure the device:
self.positioner_box.set_positioner_hor("samx") self.positioner_box.set_positioner_hor("samx")
self.positioner_box.set_positioner_verr("samy") self.positioner_box.set_positioner_verr("samy")
``` ```

View File

@ -11,13 +11,13 @@ The [`BEC Queue`](/api_reference/_autosummary/bec_widgets.cli.client.BECQueue) w
- **Detailed Scan Information**: Provides a clear view of scan numbers, types, and statuses, helping users track the progress and state of each scan. - **Detailed Scan Information**: Provides a clear view of scan numbers, types, and statuses, helping users track the progress and state of each scan.
- **Queue Control**: Allows users to stop specific scans, stop the entire queue, resume paused scans, and reset the queue. - **Queue Control**: Allows users to stop specific scans, stop the entire queue, resume paused scans, and reset the queue.
- **Interactive Table Layout**: The queue is presented in a table format, with customizable columns that stretch to fit the available space. - **Interactive Table Layout**: The queue is presented in a table format, with customizable columns that stretch to fit the available space.
- **Flexible Integration**: The widget can be integrated into both [`BECDockArea`](user.widgets.bec_dock_area) and used as an individual component in your application through `QtDesigner`. - **Flexible Integration**: The widget can be integrated into both [`BECDockArea`](user.widgets.bec_dock_area) and used as an individual component in your application through `BEC Designer`.
```` ````
````{tab} Examples ````{tab} Examples
The `BEC Queue Widget` can be embedded within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `QtDesigner`. Below are examples demonstrating how to create and use the `BEC Queue Widget`. The `BEC Queue Widget` can be embedded within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `BEC Designer`. Below are examples demonstrating how to create and use the `BEC Queue Widget`.
## Example 1 - Adding BEC Queue Widget to BECDockArea ## Example 1 - Adding BEC Queue Widget to BECDockArea

View File

@ -3,7 +3,7 @@
# Signal Input Widgets # Signal Input Widgets
````{tab} Overview ````{tab} Overview
The `Signal Input Widgets` consist of two primary widgets: `SignalLineEdit` and `SignalComboBox`. Both widgets are designed to facilitate the selection of the available signals for a selected device within the current BEC session. These widgets allow users to filter, search, and select signals dynamically. The widgets can either be integrated into a GUI through direct code instantiation or by using `QtDesigner`. The `Signal Input Widgets` consist of two primary widgets: `SignalLineEdit` and `SignalComboBox`. Both widgets are designed to facilitate the selection of the available signals for a selected device within the current BEC session. These widgets allow users to filter, search, and select signals dynamically. The widgets can either be integrated into a GUI through direct code instantiation or by using `BEC Designer`.
## SignalLineEdit ## SignalLineEdit
The `SignalLineEdit` widget provides a line edit interface with autocomplete functionality for the available of signals associated with the selected device. This widget is ideal for users who prefer to type in the signal name directly. If no device is selected, the autocomplete will be empty. In addition, the widget will display a red border around the line edit if the input signal is invalid. The `SignalLineEdit` widget provides a line edit interface with autocomplete functionality for the available of signals associated with the selected device. This widget is ideal for users who prefer to type in the signal name directly. If no device is selected, the autocomplete will be empty. In addition, the widget will display a red border around the line edit if the input signal is invalid.
@ -16,7 +16,7 @@ The `SignalComboBox` widget offers a dropdown interface for choosing a signal fr
- **Real-Time Autocomplete (LineEdit)**: The `SignalLineEdit` widget supports real-time autocomplete, helping users find devices faster. - **Real-Time Autocomplete (LineEdit)**: The `SignalLineEdit` widget supports real-time autocomplete, helping users find devices faster.
- **Real-Time Input Validation (LineEdit)**: User input is validated in real-time with a red border around the `SignalLineEdit` indicating an invalid input. - **Real-Time Input Validation (LineEdit)**: User input is validated in real-time with a red border around the `SignalLineEdit` indicating an invalid input.
- **Dropdown Selection (SignalComboBox)**: The `SignalComboBox` widget displays the sorted signals of the device - **Dropdown Selection (SignalComboBox)**: The `SignalComboBox` widget displays the sorted signals of the device
- **QtDesigner Integration**: Both widgets can be added as custom widgets in `QtDesigner` or instantiated directly in code. - **BEC Designer Integration**: Both widgets can be added as custom widgets in `BEC Designer` or instantiated directly in code.
## Screenshot ## Screenshot
@ -27,7 +27,7 @@ The `SignalComboBox` widget offers a dropdown interface for choosing a signal fr
````{tab} Examples ````{tab} Examples
Both `SignalLineEdit` and `SignalComboBox` can be integrated within a GUI application through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and use these widgets. Both `SignalLineEdit` and `SignalComboBox` can be integrated within a GUI application through direct code instantiation or by using `BEC Designer`. Below are examples demonstrating how to create and use these widgets.
## Example 1 - Creating a SignalLineEdit in Code ## Example 1 - Creating a SignalLineEdit in Code

View File

@ -4,19 +4,19 @@
````{tab} Overview ````{tab} Overview
The [`SpinnerWidget`](/api_reference/_autosummary/bec_widgets.utility.spinner.spinner.SpinnerWidget) is a simple and versatile widget designed to indicate loading or movement within an application. It is commonly used to show that a device is in motion or that an operation is ongoing. The `SpinnerWidget` can be easily integrated into your GUI application either through direct code instantiation or by using `QtDesigner`. The [`SpinnerWidget`](/api_reference/_autosummary/bec_widgets.utility.spinner.spinner.SpinnerWidget) is a simple and versatile widget designed to indicate loading or movement within an application. It is commonly used to show that a device is in motion or that an operation is ongoing. The `SpinnerWidget` can be easily integrated into your GUI application either through direct code instantiation or by using `BEC Designer`.
## Key Features: ## Key Features:
- **Loading Indicator**: Provides a visual indication of ongoing operations or device movement. - **Loading Indicator**: Provides a visual indication of ongoing operations or device movement.
- **Smooth Animation**: Features a smooth, continuous spinning animation to catch the user's attention. - **Smooth Animation**: Features a smooth, continuous spinning animation to catch the user's attention.
- **Easy Integration**: Can be added directly in code or through `QtDesigner`, making it adaptable to various use cases. - **Easy Integration**: Can be added directly in code or through `BEC Designer`, making it adaptable to various use cases.
- **Customizable Appearance**: Automatically adapts to the application's theme, ensuring visual consistency. - **Customizable Appearance**: Automatically adapts to the application's theme, ensuring visual consistency.
```` ````
````{tab} Examples ````{tab} Examples
The `SpinnerWidget` can be embedded within a GUI application through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and use the `SpinnerWidget`. The `SpinnerWidget` can be embedded within a GUI application through direct code instantiation or by using `BEC Designer`. Below are examples demonstrating how to create and use the `SpinnerWidget`.
## Example 1 - Creating a Spinner Widget in Code ## Example 1 - Creating a Spinner Widget in Code
@ -53,15 +53,15 @@ You can stop the spinner to indicate that an operation has completed.
spinner.stop() spinner.stop()
``` ```
## Example 3 - Integrating the Spinner Widget in QtDesigner ## Example 3 - Integrating the Spinner Widget in BEC Designer
The `SpinnerWidget` can be added to your GUI layout using `QtDesigner`. Once added, you can assign the spinner to an attribute of your application, and then control the spinner using the `start` and `stop` methods, similar to the code examples above. The `SpinnerWidget` can be added to your GUI layout using `BEC Designer`. Once added, you can assign the spinner to an attribute of your application, and then control the spinner using the `start` and `stop` methods, similar to the code examples above.
```python ```python
# Example: Start the spinner in a QtDesigner-based application # Example: Start the spinner in a BEC Designer-based application
self.spinner_widget.start() self.spinner_widget.start()
# Example: Stop the spinner in a QtDesigner-based application # Example: Stop the spinner in a BEC Designer-based application
self.spinner_widget.stop() self.spinner_widget.stop()
``` ```

View File

@ -18,7 +18,7 @@ The [`Text Box Widget`](/api_reference/_autosummary/bec_widgets.cli.client.TextB
````{tab} Examples - CLI ````{tab} Examples - CLI
The `TextBox` widget can be integrated within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `QtDesigner`. The following examples demonstrate how to create and customize the `TextBox` widget in various scenarios. The `TextBox` widget can be integrated within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `BEC Designer`. The following examples demonstrate how to create and customize the `TextBox` widget in various scenarios.
## Example 1 - Adding Text Box Widget to BECDockArea ## Example 1 - Adding Text Box Widget to BECDockArea

View File

@ -4,19 +4,19 @@
````{tab} Overview ````{tab} Overview
The [`Toggle Switch`](/api_reference/_autosummary/bec_widgets.cli.client.ToggleSwitch) widget provides a simple, customizable toggle switch that can be used to represent binary states (e.g., on/off, true/false) within a GUI. This widget is designed to be used directly in code or added through `QtDesigner`, making it versatile for various applications where a user-friendly switch is needed. The [`Toggle Switch`](/api_reference/_autosummary/bec_widgets.cli.client.ToggleSwitch) widget provides a simple, customizable toggle switch that can be used to represent binary states (e.g., on/off, true/false) within a GUI. This widget is designed to be used directly in code or added through `BEC Designer`, making it versatile for various applications where a user-friendly switch is needed.
## Key Features: ## Key Features:
- **Binary State Representation**: Represents a simple on/off state with a smooth toggle animation. - **Binary State Representation**: Represents a simple on/off state with a smooth toggle animation.
- **Customizable Appearance**: Allows customization of track and thumb colors for both active and inactive states. - **Customizable Appearance**: Allows customization of track and thumb colors for both active and inactive states.
- **Smooth Animation**: Includes a smooth animation when toggling between states, enhancing user interaction. - **Smooth Animation**: Includes a smooth animation when toggling between states, enhancing user interaction.
- **QtDesigner Integration**: Can be added directly through `QtDesigner` or instantiated in code. - **BEC Designer Integration**: Can be added directly through `BEC Designer` or instantiated in code.
```` ````
````{tab} Examples ````{tab} Examples
The `Toggle Switch` widget can be integrated within a GUI application either through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and customize the `Toggle Switch` widget. The `Toggle Switch` widget can be integrated within a GUI application either through direct code instantiation or by using `BEC Designer`. Below are examples demonstrating how to create and customize the `Toggle Switch` widget.
## Example 1 - Creating a Toggle Switch in Code ## Example 1 - Creating a Toggle Switch in Code
@ -54,9 +54,9 @@ self.toggle_switch.active_thumb_color = QColor(255, 255, 255) # Active state th
self.toggle_switch.inactive_thumb_color = QColor(255, 255, 255) # Inactive state thumb color (white) self.toggle_switch.inactive_thumb_color = QColor(255, 255, 255) # Inactive state thumb color (white)
``` ```
## Example 3 - Integrating the Toggle Switch in QtDesigner ## Example 3 - Integrating the Toggle Switch in BEC Designer
The `ToggleSwitch` can be added as a custom widget in `QtDesigner`. Once integrated, you can configure its properties through the designer's property editor. After adding the widget to a form in QtDesigner, you can manipulate it in your PyQt/PySide application: The `ToggleSwitch` can be added as a custom widget in `BEC Designer`. Once integrated, you can configure its properties through the designer's property editor. After adding the widget to a form in BEC Designer, you can manipulate it in your PyQt/PySide application:
```python ```python
# For instance: # For instance:

View File

@ -4,7 +4,7 @@
````{tab} Overview ````{tab} Overview
The [`Website Widget`](/api_reference/_autosummary/bec_widgets.cli.client.WebsiteWidget) is a versatile tool that allows users to display websites directly within the BEC GUI. This widget is useful for embedding documentation, dashboards, or any web-based tools within the application interface. It is designed to be integrated within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `QtDesigner`. The [`Website Widget`](/api_reference/_autosummary/bec_widgets.cli.client.WebsiteWidget) is a versatile tool that allows users to display websites directly within the BEC GUI. This widget is useful for embedding documentation, dashboards, or any web-based tools within the application interface. It is designed to be integrated within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `BEC Designer`.
## Key Features: ## Key Features:
- **URL Display**: Set and display any website URL within the widget. - **URL Display**: Set and display any website URL within the widget.
@ -15,7 +15,7 @@ The [`Website Widget`](/api_reference/_autosummary/bec_widgets.cli.client.Websit
````{tab} Examples - CLI ````{tab} Examples - CLI
The `WebsiteWidget` can be embedded within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `QtDesigner`. The following examples demonstrate how to create and use the `WebsiteWidget` in different scenarios. The `WebsiteWidget` can be embedded within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `BEC Designer`. The following examples demonstrate how to create and use the `WebsiteWidget` in different scenarios.
## Example 1 - Adding Website Widget to BECDockArea ## Example 1 - Adding Website Widget to BECDockArea