Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 17 additions & 20 deletions docs/how-to/turn-the-speed-blue.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ We'll run the `replay` tool with the demo route to get data streaming for testin
tools/replay/replay --demo

# in terminal 2
selfdrive/ui/ui
./selfdrive/ui/ui.py
```

The openpilot UI should launch and show a replay of the demo route.
Expand All @@ -43,39 +43,36 @@ If you have your own comma device, you can replace `--demo` with one of your own

Now let’s update the speed display color in the UI.

Search for the function responsible for rendering UI text:
Search for the function responsible for rendering the current speed:
```bash
git grep "drawText" selfdrive/ui/qt/onroad/hud.cc
git grep "_draw_current_speed" selfdrive/ui/onroad/hud_renderer.py
```

Youll find the relevant code inside `selfdrive/ui/qt/onroad/hud.cc`, in this function:
You'll find the relevant code inside `selfdrive/ui/onroad/hud_renderer.py`, in this function:

```cpp
void HudRenderer::drawText(QPainter &p, int x, int y, const QString &text, int alpha) {
QRect real_rect = p.fontMetrics().boundingRect(text);
real_rect.moveCenter({x, y - real_rect.height() / 2});

p.setPen(QColor(0xff, 0xff, 0xff, alpha)); // <- this sets the speed text color
p.drawText(real_rect.x(), real_rect.bottom(), text);
}
```python
def _draw_current_speed(self, rect: rl.Rectangle) -> None:
"""Draw the current vehicle speed and unit."""
speed_text = str(round(self.speed))
speed_text_size = measure_text_cached(self._font_bold, speed_text, FONT_SIZES.current_speed)
speed_pos = rl.Vector2(rect.x + rect.width / 2 - speed_text_size.x / 2, 180 - speed_text_size.y / 2)
rl.draw_text_ex(self._font_bold, speed_text, speed_pos, FONT_SIZES.current_speed, 0, COLORS.white) # <- this sets the speed text color
```

Change the `QColor(...)` line to make it **blue** instead of white. A nice soft blue is `#8080FF`, which translates to:
Change `COLORS.white` to make it **blue** instead of white. A nice soft blue is `#8080FF`, which you can change inline:

```diff
- p.setPen(QColor(0xff, 0xff, 0xff, alpha));
+ p.setPen(QColor(0x80, 0x80, 0xFF, alpha));
- rl.draw_text_ex(self._font_bold, speed_text, speed_pos, FONT_SIZES.current_speed, 0, COLORS.white)
+ rl.draw_text_ex(self._font_bold, speed_text, speed_pos, FONT_SIZES.current_speed, 0, rl.Color(0x80, 0x80, 0xFF, 255))
```

This change will tint all speed-related UI text to blue with the same transparency (`alpha`).

---

## 4. Rebuild the UI
## 4. Re-run the UI

After making changes, rebuild Openpilot so your new UI is compiled:
After making changes, re-run the UI to see your new UI:
```bash
scons -j$(nproc) && selfdrive/ui/ui
./selfdrive/ui/ui.py
```
![](https://blog.comma.ai/img/blue_speed_ui.png)

Expand Down
Loading