diff --git a/docs/docs/how-to/first-pr.md b/docs/docs/how-to/first-pr.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/docs/how-to/turn-the-speed-blue.md b/docs/docs/how-to/turn-the-speed-blue.md new file mode 100644 index 0000000000..28e1a376ac --- /dev/null +++ b/docs/docs/how-to/turn-the-speed-blue.md @@ -0,0 +1,93 @@ +# Turn the speed blue +*A getting started guide for openpilot development* + +In 30 minutes, we'll get an openpilot development environment setup on your computer and make some changes to openpilot's UI. + +And if you have a comma 3/3X, we'll deploy the change to your device for testing. + +## 1. Setup your development environment + +Run this to clone openpilot and install all the dependencies: +```bash +curl -fsSL openpilot.comma.ai | bash +``` + +Then, compile openpilot: +```bash +cd openpilot +scons -j8 +``` + +## 2. Run replay + +We'll run the `replay` tool with the demo route to get data streaming for testing our UI changes. +```bash +# in terminal 1 +tools/replay/replay --demo + +# in terminal 2 +selfdrive/ui/ui +``` + +The openpilot UI should launch and show a replay of the demo route. + +If you have your own comma device, you can replace `--demo` with one of your own routes from comma connect. + +## 3. Make the speed blue + +Search for “mph” with git grep in the `ui` folder. +```bash +$ git grep "mph" selfdrive/ui/ +paint.cc: ui_draw_text(s, s->fb_w/2, 290, s->scene.is_metric ? "km/h" : "mph", 36 * 2.5, COLOR_WHITE_ALPHA(200), "sans-regular"); +``` + +The line right above contains the actual speed. Unfortunately, COLOR_BLUE isn’t defined, but a git grep of COLOR_WHITE shows it’s nvgRGBA(255, 255, 255, 255). Personally, I like a lighter blue, so I went with #8080FF. +```bash +$ git diff +diff --git a/selfdrive/ui/paint.cc b/selfdrive/ui/paint.cc +index 821d95115..cc996eaa1 100644 +--- a/selfdrive/ui/paint.cc ++++ b/selfdrive/ui/paint.cc +@@ -175,8 +175,8 @@ static void ui_draw_vision_speed(UIState *s) { + const float speed = std::max(0.0, (*s->sm)["carState"].getCarState().getVEgo() * (s->scene.is_metric ? 3.6 : 2.2369363)); + const std::string speed_str = std::to_string((int)std::nearbyint(speed)); + nvgTextAlign(s->vg, NVG_ALIGN_CENTER | NVG_ALIGN_BASELINE); +- ui_draw_text(s, s->fb_w/2, 210, speed_str.c_str(), 96 * 2.5, COLOR_WHITE, "sans-bold"); +- ui_draw_text(s, s->fb_w/2, 290, s->scene.is_metric ? "km/h" : "mph", 36 * 2.5, COLOR_WHITE_ALPHA(200), "sans-regular"); ++ ui_draw_text(s, s->fb_w/2, 210, speed_str.c_str(), 96 * 2.5, nvgRGBA(128, 128, 255, 255), "sans-bold"); ++ ui_draw_text(s, s->fb_w/2, 290, s->scene.is_metric ? "km/h" : "mph", 36 * 2.5, nvgRGBA(128, 128, 255, 200), "sans-regular"); + } + + static void ui_draw_vision_event(UIState *s) { +``` + + +## 4. Rebuild UI, and admire your work + +``` +scons -j8 && selfdrive/ui/ui +``` + +![](https://blog.comma.ai/img/blue_speed_ui.png) + +## 5. Push your fork to GitHub + +Click fork on GitHub. Then, push with: +```bash +git remote rm origin +git remote add origin git@github.com:/openpilot.git +git add . +git commit -m "Make the speed blue." +git push --set-upstream origin master +``` + +### 6. Run your fork on device in your car! + +Uninstall openpilot from your device through the settings. Then, enter the URL for your very own installer: +``` +installer.comma.ai//master +``` + +### 7. Admire your work IRL + +![](https://blog.comma.ai/img/c3_blue_ui.jpg) diff --git a/docs/docs/how-to/turning-the-speed-blue.md b/docs/docs/how-to/turning-the-speed-blue.md deleted file mode 100644 index f68faa7b9f..0000000000 --- a/docs/docs/how-to/turning-the-speed-blue.md +++ /dev/null @@ -1,4 +0,0 @@ -This section is for how-to's on common workflows. - -They'll be like this blog post we wrote: -https://blog.comma.ai/turning-the-speed-blue/ diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 92cb501b8b..1e19d286a1 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -17,7 +17,7 @@ nav: - Getting Started: - What is openpilot?: getting-started/what-is-openpilot.md - How-to: - #- Make my first pull request: how-to/first-pr.md + - Turn the speed blue: how-to/turn-the-speed-blue.md - Connect to a comma 3/3X: how-to/connect-to-comma.md - Car Porting: - What is a car port?: car-porting/what-is-a-car-port.md