mawei/sunnypilot
1
0
Fork 0
mirror of https://github.com/sunnypilot/sunnypilot.git synced 2026-02-18 16:33:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Fix "Turn the speed blue" tutorial for Raylib UI (#36591)

Browse Source 
* docs: Fix "Turn the speed blue" tutorial for Raylib UI

* just

* obv

* not replay

---------

Co-authored-by: Shane Smiskol <shane@smiskol.com>
This commit is contained in:
Logesh R
2025-11-27 02:07:56 -08:00
committed by GitHub
parent ae6ada4162
commit ae534ddeab
1 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/how-to/turn-the-speed-blue.md
View File

@@ -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.
@@ -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
```
You’ll 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)