Tablet and Phone Interface Improvements

[hello-vinitha]

Description

This PR makes a series of changes to improve the tablet and phone view for the interface made in the temp/deployment branch. The tablet view should appear as a scaled down view from the desktop version and the mobile interface has a different layout to make the best use of space.

Currently there are some known issues that need be resolved:

• In the tablet customization mode some components disappear when another component is added or a component is moved.
• Button pad buttons sometimes overflow out of the panel depending on the size of the screen.

Testing procedure

• Test that components can be successfully added, removed and rearranged (desktop, tablet)
• Verify mobile responsiveness on different screen sizes (tablet & mobile)
• Verify the correct buttons are being highlighted blue/green when the joint is moving
• Verify the correct buttons are highlighted red when the respective joint is at it's limit
• Verify click-to-pregrasp works on (desktop & tablet)
• Verify that cameras and buttons are sized appropriately for the screen (i.e. buttons/camera are not overflowing or too small, etc.)
• Verify that all action modes work across desktop and mobile

Before opening a pull request

From the top-level of this repository, run:

• pre-commit run --all-files

To merge

• Squash & Merge

[hello-vinitha]

• Fix aspect ratio for camera views on tablet (@hello-william)
  • Follow up with @mintyfreshv to investigate if Tablet and Phone Interface Improvements #135 (comment) is due to not being able to solve IK or input issue on tablet vs. desktop. If due to former, open issue to track separately (@hello-vinitha)
• Fix elements disappearing when rearranging components in customization mode (@hello-vinitha)
• Make sure onLeave function is disabled for click-click on tablet/mobile (@hello-vinitha)
• Change onClick event handler to onPointerDown (@hello-vinitha @hello-william)
• Fix z-index of button controls on mobile -- Tablet and Phone Interface Improvements #135 (comment) (@hello-william)

[mintyfreshv]

Issue: Remove green highlight box
Solution: Make individual icons upon clicking them, 'glow' or be 'highlighted' instead
Device used: iPad, iPhone
Browser: Chrome

[mintyfreshv]

Issue: Mobile interface starts up like this. No camera views are shown until the camera icon is clicked again.
Solution: Once the camera icon is clicked, the mobile interface acts in its typical fashion
Device used: iPhone
Browser: Chrome

[wle8300]

Issue: Mobile interface starts up like this. No camera views are shown until the camera icon is clicked again. Solution: Once the camera icon is clicked, the mobile interface acts in its typical fashion Device used: iPhone Browser: Chrome

@mintyfreshv huh.... i don't can't replicate this bug with the reproduction steps you gave

it seems to work fine for me

[mintyfreshv]

Issue: X on click to pregrasp not working.
Solution: TBD
Device used: Macbook Air
Browser: Safari (Chrome doesn't work at this time)

Click.to.Pregrasp.X.not.initiating.mov

[hello-vinitha]

Issue: Mobile interface starts up like this. No camera views are shown until the camera icon is clicked again.
Solution: Once the camera icon is clicked, the mobile interface acts in its typical fashion
Device used: iPhone
Browser: Chrome

This issue was resolved in #152

[hello-william]

@hello-vinitha Oooooo Is this ready to merge?!

[hello-vinitha]

New errors uncovered on 3030 that need to be resolved:

• Click-to-pregrasp alerts are appearing incorrectly or pre-maturely. E.g. the failed alert appears when click-to-pregrasp succeeded or succeeded appears but before the movement is complete (@hello-vinitha) video
• The Cancel button appears to be hidden behind the Align Gripper to Object button when in motion. (@hello-william)

[wle8300]

• The Cancel button appears to be hidden behind the Align Gripper to Object button when in motion. (@hello-william)

I'll work on this today!