From 32fafe2a200e5caf0e1517f28e705833c7d0dd08 Mon Sep 17 00:00:00 2001 From: Enrico Eberhard Date: Thu, 13 Nov 2025 13:30:17 +0100 Subject: [PATCH] docs: start reworking core studio v5 --- docs/core/studio/studio.md | 30 +++++++++--------- docs/core/studio/studio/3d.md | 11 +++++++ docs/core/studio/studio/editor.md | 40 ++++++++++-------------- docs/core/studio/studio/live-views.md | 28 ----------------- docs/core/studio/studio/tab-views.md | 45 +++++++++++++++++++++++++++ 5 files changed, 86 insertions(+), 68 deletions(-) create mode 100644 docs/core/studio/studio/3d.md delete mode 100644 docs/core/studio/studio/live-views.md create mode 100644 docs/core/studio/studio/tab-views.md diff --git a/docs/core/studio/studio.md b/docs/core/studio/studio.md index 932d4e66f..3435f07ba 100644 --- a/docs/core/studio/studio.md +++ b/docs/core/studio/studio.md @@ -8,7 +8,11 @@ import DocCardList from '@theme/DocCardList'; # AICA Studio This section will give a brief, high-level tour of AICA Studio to help situate new users. Underlying concepts and -examples will be covered in more depth in later sections of this documentation. +examples are covered in more depth in later sections of this documentation. + +In short, AICA Studio is the graphical user interface layer to the AICA System to create, monitor and extend advanced +robotic applications. It features an interactive application editor with a dataflow graph builder, a 3D scene visualizer +and live data visualization. It also allows managing hardware configuration, user profiles and more. ## Application manager and editor @@ -27,7 +31,7 @@ elements of which are described in the following subsections. ## Hardware manager -The next top-level page is the hardware manager, available under the "Hardware" tab in the top navbar. +The other top-level page is the hardware manager, available under the "Hardware" tab in the top navbar. ![aica-studio-hardware-manager](./studio/assets/aica-studio-hardware-manager.png) @@ -38,16 +42,17 @@ name. Any hardware listed in the hardware manager can be loaded and used in an application. -## Docs +## Help -Under the "Docs" tab in the top navbar, reference documentation for installed components and controllers in the AICA -System configuration can be accessed. +The "Help" tab in the top right section of the navbar is used to access a help page with links to documentation and +learning resources. It also includes reference documentation for the installed components and controllers in the AICA +System configuration. ![aica-studio-docs-page](./studio/assets/aica-studio-docs-page.png) -## Users +## User -The user icon in the top right of the page is used to access and manage the currently logged-in user profile. +The "User" tab in the top right of the page is used to access and manage the currently logged-in user profile. ![aica-studio-user-page](./studio/assets/aica-studio-user-page.png) @@ -55,14 +60,7 @@ Read more about user scopes and API keys in [Users and authentication](/docs/get ## Settings -The settings page is accessed through the cogwheel icon on the top right of the page. It is only available to users with -the `admin` scope and can be used to administer other users as well as connect to cloud storage and services. +The settings page is accessed through the "Settings" tab on the top right of the page. It is only available to users +with the `admin` scope and can be used to administer other users as well as connect to cloud storage and services. ![aica-studio-settings-view](./studio/assets/aica-studio-settings-view.png) - -## Logs - -Finally, the last button on the top right accesses the logs viewer. This page shows log entries from the running system -and can be filtered and searched to find relevant entries. - -![aica-studio-logs-view](./studio/assets/aica-studio-logs-view.png) diff --git a/docs/core/studio/studio/3d.md b/docs/core/studio/studio/3d.md new file mode 100644 index 000000000..5311e9e5a --- /dev/null +++ b/docs/core/studio/studio/3d.md @@ -0,0 +1,11 @@ +--- +sidebar_position: 3 +title: 3D view +--- + +The 3D scene view shows hardware models and frames of the current application. When the application is running, the +hardware positions and frames update live according to the active control logic. + + + +![aica-studio-3d-view](./assets/aica-studio-3d-view.png) diff --git a/docs/core/studio/studio/editor.md b/docs/core/studio/studio/editor.md index 202f6397b..7bad4665f 100644 --- a/docs/core/studio/studio/editor.md +++ b/docs/core/studio/studio/editor.md @@ -9,32 +9,24 @@ When an application is created or selected for editing, the following applicatio ![aica-studio-application-editor](./assets/aica-studio-application-editor.png) -On the left of the screen is the YAML code representation of the application, which is how applications are stored and -parsed. On the right are visualization tools, including the unique application graph editor and the 3D scene viewer. +The editor features two panels on the left and right side of the main view. The main view shows the iconic AICA dataflow +graph by default, which is explained more in a following section. However, the main view can also be switched to render +the 3D scene of the application using the mini-view switcher in the bottom left of the page. The left panel is used for +managing application metadata with controls to rename, describe, and save the working version. The right panel is the +context-aware data and property manager for actual application content and behavior grouped in various tabs. -The white chevrons in the middle of the screen can be used to selectively expand the left or right portions of the -screen. + -Application controls are shown above the YAML code. +The left and right panels as well as the mini-view switcher can be minimized with the respective icon buttons to provide +more screen space for the main view. Additionally, the width of the right panel can be adjusted with drag interactions +to remain compact for normal usage or to take up more space for a split-screen effect with the main view. -Exit back to the application manager screen using the X button on the top left. It will prompt to save or discard -unsaved changes. Running applications will be stopped when closing the application. +On the top of the screen to the right of the left panel is the main runtime control button. The Start button starts +running the loaded application, which then changes into a Stop button to stop the running application. -Next to the X button, the cloud storage button can be used to upload and synchronize applications to cloud storage or -downloaded them locally. This option is disabled until a user with `admin` scope connects to cloud storage in the -[Settings](../studio.md#settings) page. +Exit back to the application manager screen using the "Close" button in the left panel. When the left panel is +minimized, the "X" button on the top left has the same function. Closing an application will prompt to save or discard +unsaved changes. Running applications must be stopped before closing the application. -Applications can be deleted, saved, or saved as a copy under a new name. - -The "Generate Graph" button is used to apply new code changes to the application graph. When editing the YAML code -manually, changes will not take effect until this button is pressed. - -The application can be renamed using the edit icon next to the application name. This also presents an option to add or -edit the application description, which can serve as a way of differentiating and describing the purpose of various -applications. - -In the top right of the application editor are the runtime controls. The Play button starts the loaded application, -which can then be stopped with the Stop button. - -Beneath the runtime controls are the view selections for the various visualization tools, starting with the application -graph. These views are presented in more detail in the next section. \ No newline at end of file +Read on to learn more about the [application graph editor](./graph.md), the [3D scene](./3d.md) and the +[right panel tabs](./tab-views.md). \ No newline at end of file diff --git a/docs/core/studio/studio/live-views.md b/docs/core/studio/studio/live-views.md deleted file mode 100644 index f3567e491..000000000 --- a/docs/core/studio/studio/live-views.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -sidebar_position: 3 -title: Live views ---- - -# Live views - -Monitor and visualize the state of a running application with the following live views. - -## 3D scene - -The 3D scene view shows hardware models and frames of the current application. When the application is running, the -hardware positions and frames update live according to the active control logic. - -![aica-studio-3d-view](./assets/aica-studio-3d-view.png) - -## ROS topics - -View the data running on signals and other background topics on the ROS 2 network. - -![aica-studio-live-topic-view](./assets/aica-studio-live-topic-view.png) - -## State table - -The state table gives a compact overview of which components and controllers are loaded, what state they are in, and -which predicates and conditions are true or false. - -![aica-studio-state-table-view](./assets/aica-studio-state-table-view.png) diff --git a/docs/core/studio/studio/tab-views.md b/docs/core/studio/studio/tab-views.md new file mode 100644 index 000000000..52f67fc8c --- /dev/null +++ b/docs/core/studio/studio/tab-views.md @@ -0,0 +1,45 @@ +--- +sidebar_position: 4 +title: Tab views +--- + +# Live views + +Monitor and visualize the state of a running application with the following live views. + +## Scene + + + +## Code + + + +## 3D view / Graph view + +Depending on whether the [application graph](./graph.md) or the [3D view](./3d.md) is active for the main view, this tab +will show the other view. The right panel mode of the graph view is non-interactive for modifying nodes, edges or +parameters but allows zooming, panning and pressing trigger buttons for configured events. When the 3D view is in the +right panel, the 3D view settings are accessed from a mini-panel rather than the Settings sub-tab of the Scene tab. + +## Live Data + +View the data running on signals and other background topics on the ROS 2 network. + +Selecting a signal edge in the graph view while the application is running will automatically select the appropriate +signal topic for visualization in this tab. + + + +## Logs + +The logs view shows log entries from the running system color-coded by severity level. + + + +## Live Table + +The live state table gives a compact overview of which components and controllers are loaded, what state they are in, +and which predicates and conditions are true or false. + +