connect icon indicating copy to clipboard operation
connect copied to clipboard

Dashboard UI overhaul

Open vishalkrishnads opened this issue 1 year ago • 2 comments

This is the implementation of a new dashboard UI for connect. It takes inspiration from messaging apps like Discord, Telegram, WhatsApp, etc.

⚠️ initially, you might have to refresh a couple of times and/or switch devices for the routes to load

https://github.com/commaai/new-connect/assets/50231856/d87917bd-abac-4c9d-ad90-1aedc161122d

Features

  • 70/30 split view in larger screens for routes/drive. The view itself is resizable, simply drag to resize.
  • Search by place
  • Basically everything from the old UI design

Motivation

The current design seems to be wasting some space on larger screens.

Status

This is a proof of concept of this UI design. I'm open to feedback and suggestions.

vishalkrishnads avatar Jun 26 '24 14:06 vishalkrishnads

looks great! can we also overlay the probability numbers on the picture? it would be better to use the driver monitor api to determine and print the distraction states (can be found in one/selfdrive/controls/lib/driver_monitor.py. i can send the details in slack). e.g. Screenshot from 2019-09-09 17-22-44

ZwX1616 avatar Sep 10 '19 00:09 ZwX1616

The numbers themselves might be a bit much, but fades based on probs are nice. Can we add the eyes too?

geohot avatar Sep 10 '19 00:09 geohot

I think the only eye data i have is the probability each given eye is shut, i can always display that with a circle in hardcoded offsets from the nose

chrisinajar avatar Sep 10 '19 00:09 chrisinajar

The numbers themselves might be a bit much, but fades based on probs are nice. Can we add the eyes too?

the eye positions are outputed by the model but not written to the log in current version

ZwX1616 avatar Sep 10 '19 00:09 ZwX1616

Made the black nose circle either red or green based on if the driver is distracted or not

chrisinajar avatar Sep 10 '19 01:09 chrisinajar