waverleysoftware / robo-perception Goto Github PK

Robot settings and widgets should be fetched from BE. Endpoints are already in #47 branch + FE API. It's the matter of changing the Settings and all the relative components.

Would be great to update versions of installed packages for FE in order to reduce sequrity vulnerabilities

Note: this ticket requires the design for the warning popup.

When the user selects another robot Y in the header
And there is already active connection to the current robot
Then the warning popup should be opened with the msg that the connection with robot X will be interrupted and smth like 'Are you sure?'
When the user clicks on 'Yes'
Then the current connection is closed
And the dashboard page opens with the widgets view for the chosen robot - #67
And the robot Y is connected

we need to update the structure of web application to match draft design so that it would be easier later to split the tasks and implement new features

Branch: main
Mode: simulator

STR:

1. Open app in the browser
2. Click on 'Play' icon to start streaming
3. Pressing Shift + any key that mapped to the movement

Actual result: nothing has happened.
Expected result: the associated movement should be initialized.

create UI for keyboard guide following design in figma (https://www.figma.com/file/KT1vLyYfL28NZDdNeopdNj/re-design-hitt?node-id=737%3A3706&t=PFbmT1Bze64UWvXj-0)

STR:

1. Open an app in the browser.
   Note: the stream hasn't been started, and now the page is opened in the initial state.
2. Enable 'Detect objects' by clicking on toggle

Actual result: the streaming has started
Expected result:

• the streaming shouldn't be started by enabling 'detect objects'.
• the streaming should be started only by clicking on 'Play' icon.
• if the user enables 'detect objects' mode and then clicks on 'Play', the streaming should be started in the detect objects mode.

add logo, robot name and guide button

Resolution 1920, need to create keyboard guide for white& black theme without svg animation. Link for design below
https://www.figma.com/file/KT1vLyYfL28NZDdNeopdNj/re-design-hitt?node-id=1893%3A37722&t=Pty9n0qORHhd6C48-1

Need to fix shadows only on this cards, white theme
https://www.figma.com/file/KT1vLyYfL28NZDdNeopdNj/re-design-hitt?node-id=1893%3A37722&t=MuGXJ7malHWmKfVt-1

controls design should match

the goal of the issue is to give the opportunity for user to operate robot via keyboard

Design: coming soon...

Header UI should be implemented via using theme config

Light theme examle

• delete serviceworker
• delete useClickPreventionOnDoubleClick custom hook

Need to edit Keyboard & Joystic white & blck theme such as size, icons etc
https://www.figma.com/file/KT1vLyYfL28NZDdNeopdNj/re-design-hitt?node-id=1893%3A37722&t=MuGXJ7malHWmKfVt-1

now keyboard events are being lestened on the whole application - it leads to some errors and unpredictable behaviour for a user

widgets must be compatible with settings in the store and match current color theme

Push sources from the personal repo: https://github.com/sskorol/minipupper-teleop.git

STR:

1. Run the project: robo part, BE and FE
2. Open an application in the browser
3. Click on 'Play' icon to start streaming
4. Stop BE in the terminal
5. Return to the browser's tab.

Actual result: the stream process is still visually in progress, but in fact the connection with the server was interrupted.
Expected result: TBD show the spinner with attempts to reconnect and stop the process after N attempts.

Need to investigate how we can detect the activated / deactivated Caps lock mode on the keyboard and sync states when a user returns to the application tab.
STR:

1. Open an app in the browser
2. Enable Caps lock mode on the keyboard
3. Switch to any other application to make our robo app inactive
4. Press Caps lock on the keyboard
5. Return to the browser tab with our app
6. Press navigation key on the keyboard

Actual result: the Caps lock mode is still highlighted on the UI keyboard, but it's already disabled on the real keyboard. As a result, when the user presses any mapped key on the keyboard, there is a collision in the movements.
Expected result: the caps lock UI state should be sync with the current state on the keyboard when a user returns to the application tab and press the mapped key on the keyboard.

Create a form for the "Settings" page. Figma reference

Branch: GH-47-add-missing-ros-events
Mode: simulator

STR:

1. Open FE app in the browser app
2. Close video widget
3. Switch to Settings tab
4. Enable video widget by clicking on the 'Screen' toggle
5. Click on 'Play' icon

Actual result: video stream hasn't started and there are no errors in the console.
Expected result: it should be possible to start stream.

STR:

1. 1Open FE app in the browser app
2. Start streaming by clicking on 'Play' icon
3. Close video widget
4. Pay attention to the console logs
5. Switch to Settings tab
6. Enable video widget by clicking on the 'Screen' toggle
7. Click on 'Play' icon

Actual result: video stream hasn't started and the following errors've appeared in the console:

Uncaught TypeError: Cannot set properties of null (setting 'srcObject') index.js:108 
    at VideoPlayer.<anonymous> (index.js:108:1)
    at executeAction (action.ts:68:1)
    at VideoPlayer.setVideoSource (action.ts:49:1)
    at index.js:92:1

Expected result: the playback should continue.

Branch: GH-47-add-missing-ros-events

STR:

1. Open app in the browser (Chrome)
2. Resize the browser window to less than 1390px in width
3. Scroll right horizontally

Actual result: background doesn't cover the whole body.
Expected result: background should stretch accordingly to the width of the browser tab

it would be great to have such data as colors, font-sizes, shadows etc in a theme

we need to implement tabs so that user could see different content when they click on navigation items

we need to split storage up because now it so quite big, contain several logical entities and it is complicated to maintain it

This feature is for testing purposes.

Currently, if the robot is turned upside down, you need to restart robotics server to reset the robot's pose.

It'd be nice to have a functionality of resetting robot's pose directly from UI.

Call 'exit full screen' event, if the 'Esc' key is pressed.

Create UI and listener for joystick so that user could operate robot not only via keyboard

Currently, the settings of the 1st robot from the list are always open by default. It would be better to expand the settings of the selected robot when a user opens the Settings tab.

STR:

1. Open an app in the browser
2. Select any robot except the 1st one in the header's list
3. Switch to the Settings tab

Actual result: the settings of the 1st robot from the list are open, but at the same time another robot is active.
Expected result: the settings of the chosen (active) robot should be expanded.

Note: Need to also discuss the behaviour if the settings tab is already open and a user switches to another robot in the header:

• smooth animation of collapsing / expanding?
• there are unsaved changes in the current expanded robot's settings?

Branch: GH-47-add-missing-ros-events
Mode: simulator

STR:

1. Switch to the Settings tab
2. Edit robot's name by pressing any character on the keyboard or delete key

Actual result: it's impossible to edit the name
Expected result: it should be possible to rename the robot.

It'd be nice to have tooltips for all icons in the fullscreen mode as we have in the usual mode.

it's a good idea to move all storages to one folder for easier maintaining

Add more detailed instructions based on the recent updates.

Theme settings like colors, fonts, etc. must be used for UI development

we need a new command without opening web page to start it on robot

Detect objects feature is available only for RGB mode.

• if RGB isn't available, 'Detect object's toggle should be hidden.
• since there is no RGB support in the simulator mode, the toggle should be hidden.

Currently, the user can customize widgets in general and that view state is displayed for all robots.
However, some robots may not have Video camera and as a result, the Screen widget is unnecessary. Or another example, the user don't want to see 'Robot's speed' widget on the main page for one robot, but it's required for another one.

Thus, it should be possible to configure widgets for each robot separately.

Note: it may require updates on UI and in designs by merging Widgets settings with the main robot's settings.

As we already have the main widgets implemented, it's required to add the following ROS event handlers:

• battery state
• CPU state
• RAM state
• pose changes: sit/stand

video player component on Dashboard tab should match the design

BE_URL has the wrong value, cuz REACT_APP_BE_URL might be imported with one extra space in the end of the string.

Branch: GH-47-add-missing-ros-events

STR:

1. Open FE app in the browser
2. Click on 'Play' icon

Actual result: the following request is failed:

method: POST
url: `${BE_URL}/offer`

Expected result: URL should be valid and request should pass successfully

we need to add UI for the keyboard according to the draft design

There is no need to show 'SIM' mode checkbox when a user runs an application in the simulator.

See the following videos to get the idea of what's going on at the moment:

Here are the issues:

• [6] should look down
• [d-f] should be on [a-s] place, and [d-f] should have icons that reflect head/tail movement up and down
• It's not clear what's the difference between [3-4] and [d-f] icons (see the second video for details).

That's how it works on a hardware level:

• [3-4] moves the body horizontally while the legs are moved diagonally to the left and right
• [a-s] moves the body around the X-axis while the legs aren't moved.

So the fact that we don't display legs on the icons leads to confusion.