fw/apps/system/health: improved appearance for health screen

The rotated 4-point square now renders properly, and the heart icon
has a white background.

Co-Authored-By: Stasia Michalska <hel@lcp.world>
Signed-off-by: Dan Tilden <freakified@gmail.com>

Author: tilden

resources/normal/base/images/health_app_pulsing_heart.pdc

@@ -228,7 +228,7 @@ static void prv_draw_zones(HealthDetailCard *detail_card, GContext *ctx) {
   for (int i = 0; i < detail_card->num_zones; i++) {
     HealthDetailZone *zone = &detail_card->zones[i];
 
-    graphics_context_set_text_color(ctx, gcolor_legible_over(detail_card->bg_color));
+    graphics_context_set_text_color(ctx, PBL_IF_COLOR_ELSE(GColorWhite, GColorBlack));
     graphics_draw_text(ctx, zone->label, detail_card->subtitle_font, zone_rect,
                        GTextOverflowModeWordWrap, GTextAlignmentLeft, NULL);
 
@@ -285,7 +285,7 @@ static void prv_draw_row_callback(GContext *ctx, const Layer *cell_layer,
   if (!menu_layer_is_index_selected(&detail_card->menu_layer, cell_index)) {
     label_rect.origin.y = (cell_index->row < selected_index.row) ? 3 : 22;
 
-    graphics_context_set_text_color(ctx, gcolor_legible_over(detail_card->bg_color));
+    graphics_context_set_text_color(ctx, GColorWhite);
     graphics_draw_text(ctx, zone->label, detail_card->subtitle_font, label_rect,
                        GTextOverflowModeWordWrap, GTextAlignmentCenter, NULL);
   } else {

src/fw/apps/system_apps/health/health_detail_card.c

@@ -78,7 +78,7 @@ Window *health_hr_detail_card_create(HealthData *health_data) {
     /// Resting HR
     .primary_label = (char *)i18n_get("TIME IN ZONES", card_data),
     .primary_value = app_zalloc_check(buffer_size),
-    .fill_color = PBL_IF_COLOR_ELSE(GColorDarkCandyAppleRed, GColorWhite),
+    .fill_color = GColorWhite,
     .outline_color = PBL_IF_COLOR_ELSE(GColorClear, GColorBlack),
   };
 
@@ -89,7 +89,7 @@ Window *health_hr_detail_card_create(HealthData *health_data) {
     .num_headings = card_data->num_headings,
     .headings = card_data->headings,
     .weekly_max = max_progress,
-    .bg_color = GColorWhite,
+    .bg_color = PBL_IF_COLOR_ELSE(GColorBulgarianRose, GColorWhite),
     .num_zones = card_data->num_zones,
     .zones = card_data->zones,
     .data = card_data,

src/fw/apps/system_apps/health/health_hr_detail_card.c

@@ -2,10 +2,11 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 
 #include "health_hr_summary_card.h"
+#include "health_hr_summary_card_segments.h"
 #include "health_hr_detail_card.h"
+#include "health_progress.h"
 #include "services/normal/activity/health_util.h"
 
-#include "applib/graphics/graphics_circle.h"
 #include "applib/pbl_std/pbl_std.h"
 #include "applib/ui/kino/kino_reel.h"
 #include "applib/ui/text_layer.h"
@@ -18,14 +19,14 @@
 #include "system/logging.h"
 #include "util/size.h"
 #include "util/string.h"
-#include "util/trig.h"
 
 // Compile-time display offset calculations
 #define HEALTH_X_OFFSET ((DISP_COLS - LEGACY_2X_DISP_COLS) / 2)
 #define HEALTH_Y_OFFSET ((DISP_ROWS - LEGACY_2X_DISP_ROWS) / 2)
 
 typedef struct HealthHrSummaryCardData {
   HealthData *health_data;
+  HealthProgressBar progress_bar;
   GDrawCommandSequence *pulsing_heart;
   uint32_t pulsing_heart_frame_index;
   AppTimer *pulsing_heart_timer;
@@ -40,16 +41,11 @@ typedef struct HealthHrSummaryCardData {
 
 #define PULSING_HEART_TIMEOUT (30 * MS_PER_SECOND)
 
-#define CIRCLE_COLOR (PBL_IF_COLOR_ELSE(GColorDarkCandyAppleRed, GColorBlack))
-// Outer radius, inner radius and center of the ring around the heart icon.
-// The center is in layer coordinates (legacy 144x168 base, before display offset).
-#define CIRCLE_RADIUS_OUTER 43
-#define CIRCLE_RADIUS_INNER 33
-#define CIRCLE_CENTER_X (71 + HEALTH_X_OFFSET)
-#define CIRCLE_CENTER_Y (58 + HEALTH_Y_OFFSET)
+#define PROGRESS_BACKGROUND_COLOR (PBL_IF_COLOR_ELSE(GColorRoseVale, GColorBlack))
+#define PROGRESS_OUTLINE_COLOR (PBL_IF_COLOR_ELSE(GColorClear, GColorBlack))
 
-#define TEXT_COLOR (PBL_IF_COLOR_ELSE(GColorBulgarianRose, GColorBlack))
-#define CARD_BACKGROUND_COLOR (PBL_IF_COLOR_ELSE(GColorWhite, GColorWhite))
+#define TEXT_COLOR (PBL_IF_COLOR_ELSE(GColorSunsetOrange, GColorBlack))
+#define CARD_BACKGROUND_COLOR (PBL_IF_COLOR_ELSE(GColorBulgarianRose, GColorWhite))
 
 
 static void prv_pulsing_heart_timer_cb(void *context) {
@@ -77,12 +73,11 @@ static void prv_pulsing_heart_timer_cb(void *context) {
   layer_mark_dirty(base_layer);
 }
 
-static void prv_render_circle(GContext *ctx) {
-  graphics_context_set_fill_color(ctx, CIRCLE_COLOR);
-  graphics_fill_radial_internal(ctx,
-                                GPoint(CIRCLE_CENTER_X, CIRCLE_CENTER_Y),
-                                CIRCLE_RADIUS_INNER, CIRCLE_RADIUS_OUTER,
-                                0, TRIG_MAX_ANGLE);
+static void prv_render_progress_bar(GContext *ctx, Layer *base_layer) {
+  HealthHrSummaryCardData *data = layer_get_data(base_layer);
+
+  health_progress_bar_fill(ctx, &data->progress_bar, PROGRESS_BACKGROUND_COLOR,
+                           0, HEALTH_PROGRESS_BAR_MAX_VALUE);
 }
 
 static void prv_render_icon(GContext *ctx, Layer *base_layer) {
@@ -175,10 +170,10 @@ static void prv_base_layer_update_proc(Layer *base_layer, GContext *ctx) {
   data->now_bpm = health_data_hr_get_current_bpm(data->health_data);
   data->last_updated = health_data_hr_get_last_updated_timestamp(data->health_data);
 
-  prv_render_circle(ctx);
-
   prv_render_icon(ctx, base_layer);
 
+  prv_render_progress_bar(ctx, base_layer);
+
   if (!activity_prefs_heart_rate_is_enabled()) {
     prv_render_hrm_disabled(ctx, base_layer);
     return;
@@ -207,6 +202,10 @@ Layer *health_hr_summary_card_create(HealthData *health_data) {
     .health_data = health_data,
     .pulsing_heart =
         gdraw_command_sequence_create_with_resource(RESOURCE_ID_HEALTH_APP_PULSING_HEART),
+    .progress_bar = {
+      .num_segments = ARRAY_LENGTH(s_hr_summary_progress_segments),
+      .segments = s_hr_summary_progress_segments,
+    },
     .now_bpm = health_data_hr_get_current_bpm(health_data),
     .resting_bpm = health_data_hr_get_resting_bpm(health_data),
     .last_updated = health_data_hr_get_last_updated_timestamp(health_data),

src/fw/apps/system_apps/health/health_hr_summary_card.c

@@ -0,0 +1,72 @@
+/* SPDX-FileCopyrightText: 2024 Google LLC */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+#pragma once
+
+#include "board/display.h"
+#include "health_progress.h"
+
+//! 4 main segments + 4 real corners
+//! Each of the 4 non-corener segments get 25% of the total
+#define AMOUNT_PER_SEGMENT (HEALTH_PROGRESS_BAR_MAX_VALUE * 25 / 100)
+
+// The shape is the same, but the offsets are different
+// Dynamically center based on display size vs legacy 144x168 base
+// Round displays need additional adjustment for the bezel
+#define X_SHIFT (((DISP_COLS - LEGACY_2X_DISP_COLS) / 2) + PBL_IF_ROUND_ELSE(18, 0))
+#define Y_SHIFT (((DISP_ROWS - LEGACY_2X_DISP_ROWS) / 2) + PBL_IF_ROUND_ELSE(6, 0))
+
+static HealthProgressSegment s_hr_summary_progress_segments[] = {
+  {
+    // Bottom corner
+    .type = HealthProgressSegmentType_Corner,
+    .points = {{72 + X_SHIFT, 87 + Y_SHIFT}, {65 + X_SHIFT, 94 + Y_SHIFT},
+               {72 + X_SHIFT, 101 + Y_SHIFT}, {79 + X_SHIFT, 94 + Y_SHIFT}},
+  },
+  {
+    // Left side bottom
+    .amount_of_total = AMOUNT_PER_SEGMENT,
+    .type = HealthProgressSegmentType_Vertical,
+    .points = {{66 + X_SHIFT, 95 + Y_SHIFT}, {73 + X_SHIFT, 88 + Y_SHIFT},
+               {42 + X_SHIFT, 57 + Y_SHIFT}, {35 + X_SHIFT, 64 + Y_SHIFT}},
+  },
+  {
+    // Left corner
+    .type = HealthProgressSegmentType_Corner,
+    .points = {{43 + X_SHIFT, 58 + Y_SHIFT}, {36 + X_SHIFT, 51 + Y_SHIFT},
+               {29 + X_SHIFT, 58 + Y_SHIFT}, {36 + X_SHIFT, 65 + Y_SHIFT}},
+  },
+  {
+    // Left side top
+    .amount_of_total = AMOUNT_PER_SEGMENT,
+    .type = HealthProgressSegmentType_Vertical,
+    .points = {{35 + X_SHIFT, 52 + Y_SHIFT}, {42 + X_SHIFT, 59 + Y_SHIFT},
+               {73 + X_SHIFT, 28 + Y_SHIFT}, {66 + X_SHIFT, 21 + Y_SHIFT}},
+  },
+  {
+    // Top corner
+    .type = HealthProgressSegmentType_Corner,
+    .points = {{72 + X_SHIFT, 29 + Y_SHIFT}, {79 + X_SHIFT, 22 + Y_SHIFT},
+               {72 + X_SHIFT, 15 + Y_SHIFT}, {65 + X_SHIFT, 22 + Y_SHIFT}},
+  },
+  {
+    // Right side top
+    .amount_of_total = AMOUNT_PER_SEGMENT,
+    .type = HealthProgressSegmentType_Vertical,
+    .points = {{78 + X_SHIFT, 21 + Y_SHIFT}, {71 + X_SHIFT, 28 + Y_SHIFT},
+               {102 + X_SHIFT, 59 + Y_SHIFT}, {109 + X_SHIFT, 52 + Y_SHIFT}},
+  },
+  {
+    // Right corner
+    .type = HealthProgressSegmentType_Corner,
+    .points = {{101 + X_SHIFT, 58 + Y_SHIFT}, {108 + X_SHIFT, 65 + Y_SHIFT},
+               {115 + X_SHIFT, 58 + Y_SHIFT}, {108 + X_SHIFT, 51 + Y_SHIFT}},
+  },
+  {
+    // Right side bottom
+    .amount_of_total = AMOUNT_PER_SEGMENT,
+    .type = HealthProgressSegmentType_Vertical,
+    .points = {{102 + X_SHIFT, 57 + Y_SHIFT}, {109 + X_SHIFT, 64 + Y_SHIFT},
+               {78 + X_SHIFT, 95 + Y_SHIFT}, {71 + X_SHIFT, 88 + Y_SHIFT}},
+  },
+};