Device Settings UI
WebXR work for Frame by Virbela, a US-based company (California, San Diego).
Iterating on the CONNECT/SPECTATE UI panel, we included the option for the users to change the device settings before connecting to and entering a Frame.
For this task, I worked on:
- Tweaking the spacing in the main UI panel to add the MIC/CAM SETTINGS text button
- Designing the layout of the new SETTINGS UI panel
- Styling the WebXR UI elements by editing the code in Babylon.js
- Coding the logic in Babylon.js to toggle the visibility of the two UI panels
- Reviewing, testing and validating the implemented designs in desktop and VR modes
The video below shows the new SETTINGS UI panel accessible through the MIC/CAM SETTINGS text button.
The Making Of
The hi-fi mockup below shows the design iteration on the previous version of the CONNECT/SPECTATE UI panel, which now accommodates the MIC/CAM SETTINGS text button, and the new SETTINGS UI panel.
Coded version of the updated CONNECT/SPECTATE UI panel.
Coded version of the new SETTINGS UI panel.
Check out more works for FRAME by Virbela: