Merge pull request #103 from pjlao307/pjlao-update-ui

Update UI to make text more readable in all conditions as requested by community
old-commit-hash: 7fec3db1d6

selfdrive/ui/ui.c

@@ -607,6 +607,38 @@ static void draw_frame(UIState *s) {
   glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, &frame_indicies[0]);
 }
 
+/*
+ * Draw a rect at specific position with specific dimensions
+ */
+static void ui_draw_rounded_rect(
+    NVGcontext* c, 
+    int x,
+    int y,
+    int width,
+    int height,
+    int radius,
+    NVGcolor color
+) {
+
+  int bottom_x = x + width;
+  int bottom_y = y + height;
+
+  nvgBeginPath(c);
+
+  // Position the rect
+  nvgRoundedRect(c, x, y, bottom_x, bottom_y, radius);
+
+  // Color the rect
+  nvgFillColor(c, color);
+
+  // Draw the rect
+  nvgFill(c);
+
+  // Draw white border around rect
+  nvgStrokeColor(c, nvgRGBA(255,255,255,200));
+  nvgStroke(c);
+}
+
 // Draw all world space objects.
 static void ui_draw_world(UIState *s) {
   const UIScene *scene = &s->scene;
@@ -614,6 +646,19 @@ static void ui_draw_world(UIState *s) {
     return;
   }
 
+  /******************************************
+   * Add background rect so it's easier to see in 
+   * light background scenes 
+   ******************************************/
+  // Draw background around speed text
+
+  // Left side
+  ui_draw_rounded_rect(s->vg, -15, 0, 570, 180, 20, nvgRGBA(10,10,10,170));
+
+  // Right side
+  ui_draw_rounded_rect(s->vg, 1920-530, 0, 150, 180, 20, nvgRGBA(10,10,10,170));
+  /******************************************/
+
   draw_steering(s, scene->v_ego, scene->angle_steers);
 
   // draw paths
@@ -630,6 +675,15 @@ static void ui_draw_world(UIState *s) {
 
   if (scene->lead_status) {
     char radar_str[16];
+
+    /******************************************
+     * Add background rect so it's easier to see in 
+     * light background scenes 
+     ******************************************/
+    // Draw background for radar text
+    ui_draw_rounded_rect(s->vg, 578, 0, 195, 180, 20, nvgRGBA(10,10,10,170));
+    /******************************************/
+
     if (s->is_metric) {
       int lead_v_rel = (int)(3.6 * scene->lead_v_rel);
       snprintf(radar_str, sizeof(radar_str), "%3d m %+d kph",
@@ -640,9 +694,9 @@ static void ui_draw_world(UIState *s) {
                (int)(scene->lead_d_rel), lead_v_rel);
     }
     nvgFontSize(s->vg, 96.0f);
-    nvgFillColor(s->vg, nvgRGBA(128, 128, 0, 192));
+    nvgFillColor(s->vg, nvgRGBA(200, 200, 0, 192));
     nvgTextAlign(s->vg, NVG_ALIGN_CENTER | NVG_ALIGN_TOP);
-    nvgText(s->vg, 1920 / 2, 150, radar_str, NULL);
+    nvgText(s->vg, 1920 / 2 - 20, 40, radar_str, NULL);
 
     // 2.7 m fudge factor
     draw_cross(s, scene->lead_d_rel + 2.7, scene->lead_y_rel, 15,
@@ -677,13 +731,26 @@ static void ui_draw_vision(UIState *s) {
 
     // draw speed
     char speed_str[16];
-    nvgFontSize(s->vg, 128.0f);
+    float defaultfontsize = 128.0f;
+    float labelfontsize = 65.0f;
+
     if (scene->engaged) {
       nvgFillColor(s->vg, nvgRGBA(255, 128, 0, 192));
+
+      // Add label
+      nvgFontSize(s->vg, labelfontsize);
+      nvgTextAlign(s->vg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
+      nvgText(s->vg, 20, 175-30, "OpenPilot: On", NULL);
     } else {
-      nvgFillColor(s->vg, nvgRGBA(64, 64, 64, 192));
+      nvgFillColor(s->vg, nvgRGBA(195, 195, 195, 192));
+
+      // Add label
+      nvgFontSize(s->vg, labelfontsize);
+      nvgTextAlign(s->vg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
+      nvgText(s->vg, 20, 175-30, "OpenPilot: Off", NULL);
     }
 
+    nvgFontSize(s->vg, defaultfontsize);
     if (scene->v_cruise != 255 && scene->v_cruise != 0) {
       if (s->is_metric) {
         snprintf(speed_str, sizeof(speed_str), "%3d KPH",
@@ -694,9 +761,17 @@ static void ui_draw_vision(UIState *s) {
                  (int)(scene->v_cruise * 0.621371 + 0.5));
       }
       nvgTextAlign(s->vg, NVG_ALIGN_RIGHT | NVG_ALIGN_BASELINE);
-      nvgText(s->vg, 500, 150, speed_str, NULL);
+      nvgText(s->vg, 480, 95, speed_str, NULL);
     }
 
+    // Add label
+    nvgFontSize(s->vg, labelfontsize);
+    nvgFillColor(s->vg, nvgRGBA(255, 255, 255, 192));
+    nvgTextAlign(s->vg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
+    nvgText(s->vg, 1920 - 475, 175-30, "Current Speed", NULL);
+    /******************************************/
+
+    nvgFontSize(s->vg, defaultfontsize);
     nvgFillColor(s->vg, nvgRGBA(255, 255, 255, 192));
     if (s->is_metric) {
       snprintf(speed_str, sizeof(speed_str), "%3d KPH",
@@ -706,7 +781,7 @@ static void ui_draw_vision(UIState *s) {
                (int)(scene->v_ego * 2.237 + 0.5));
     }
     nvgTextAlign(s->vg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
-    nvgText(s->vg, 1920 - 500, 150, speed_str, NULL);
+    nvgText(s->vg, 1920 - 500, 95, speed_str, NULL);
 
     /*nvgFontSize(s->vg, 64.0f);
     nvgTextAlign(s->vg, NVG_ALIGN_RIGHT | NVG_ALIGN_BASELINE);