Web UI: Replace generic 3D board with SaltyLab robot model #37

Closed
opened 2026-02-28 21:16:07 -05:00 by seb · 0 comments
Owner

Request

The current web UI (ui/index.html) shows a generic flat board/rectangle in the Three.js viewport. Replace it with a 3D model of the actual SaltyLab robot based on the artist render.

Reference Image

Artist render saved at cad/photos/saltylab_render_v1.jpg — shows:

  • Two large black pneumatic wheels on either side
  • Compact matte black central body/platform
  • Vertical silver stem/pole rising from center
  • Dome-shaped sensor head on top (helmet with amber accent ring)
  • Orange/amber LED strip around the lower body
  • Overall stance: self-balancing two-wheeler

Implementation

  1. Model the robot in Three.js as a simplified but recognizable 3D object:
    • Base plate (270×240mm, dark grey)
    • Two cylindrical wheels (254mm dia, 54mm wide, black with tread texture)
    • Vertical square stem (40×40mm, silver/metallic)
    • Dome/hemisphere on top (sensor head, dark with orange ring)
    • Orange LED ring around base (emissive material, matches status color)
  2. The 3D model should rotate with IMU data exactly like the current board does (pitch/roll/yaw)
  3. LED ring color should reflect the robot state:
    • Green = disarmed OK
    • Orange = armed
    • Red = tilt fault
  4. Wheels should counter-rotate based on motor command (m field) — visual feedback of what the motors would do

Nice to have

  • Load a proper GLTF/GLB model instead of primitive geometry (can export from OpenSCAD or Blender later)
  • Shadow/ground plane for depth perception
  • Camera orbit controls (already have OrbitControls?)

The goal: when you open the web UI, you see Salty tilting and spinning, not a generic PCB rectangle.

## Request The current web UI (`ui/index.html`) shows a generic flat board/rectangle in the Three.js viewport. Replace it with a 3D model of the actual SaltyLab robot based on the artist render. ## Reference Image Artist render saved at `cad/photos/saltylab_render_v1.jpg` — shows: - Two large black pneumatic wheels on either side - Compact matte black central body/platform - Vertical silver stem/pole rising from center - Dome-shaped sensor head on top (helmet with amber accent ring) - Orange/amber LED strip around the lower body - Overall stance: self-balancing two-wheeler ## Implementation 1. **Model the robot in Three.js** as a simplified but recognizable 3D object: - Base plate (270×240mm, dark grey) - Two cylindrical wheels (254mm dia, 54mm wide, black with tread texture) - Vertical square stem (40×40mm, silver/metallic) - Dome/hemisphere on top (sensor head, dark with orange ring) - Orange LED ring around base (emissive material, matches status color) 2. **The 3D model should rotate with IMU data** exactly like the current board does (pitch/roll/yaw) 3. **LED ring color** should reflect the robot state: - Green = disarmed OK - Orange = armed - Red = tilt fault 4. **Wheels should counter-rotate** based on motor command (`m` field) — visual feedback of what the motors would do ## Nice to have - Load a proper GLTF/GLB model instead of primitive geometry (can export from OpenSCAD or Blender later) - Shadow/ground plane for depth perception - Camera orbit controls (already have OrbitControls?) The goal: when you open the web UI, you see **Salty** tilting and spinning, not a generic PCB rectangle.
seb closed this issue 2026-02-28 21:57:56 -05:00
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: seb/saltylab-firmware#37
No description provided.