From ecdf74a4836a87d180551861481b5dd572b780c5 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Wed, 27 Mar 2024 19:20:10 -0700
Subject: [PATCH] Fill chip media propotationally to confidence value (#156)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: https://gitea.azgeorgis.net/ALVINN/ALVINN_f7/pulls/156
---
 src/css/detect.css   | 3 ++-
 src/pages/detect.vue | 3 ++-
 src/pages/help.vue   | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/css/detect.css b/src/css/detect.css
index 6b83363..b462e0b 100644
--- a/src/css/detect.css
+++ b/src/css/detect.css
@@ -39,7 +39,8 @@
 }
 
 .chip-media {
-  background-color: var(--chip-media-background) !important;
+  /*background-color: var(--chip-media-background) !important;*/
+  background: var(--chip-media-gradient) !important;
 }
 
 .chip-results {
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index dd48488..a38057b 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -258,7 +258,8 @@
     },
     methods: {
       chipGradient (confVal) {
-        return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
+        let confFactor = confVal / 100
+        return `--chip-media-gradient: conic-gradient(from ${270 - (confFactor * 360 / 2)}deg, hsl(${confFactor * 120}deg, 100%, 50%) ${confFactor}turn, hsl(${confFactor * 120}deg, 50%, 66%) ${confFactor}turn)`
       },
       async setData () {
         if (this.reloadModel) {
diff --git a/src/pages/help.vue b/src/pages/help.vue
index a63b323..cb1531a 100644
--- a/src/pages/help.vue
+++ b/src/pages/help.vue
@@ -74,7 +74,7 @@
   }
 
   .demo-chip .chip-media {
-    background: conic-gradient(from 180deg, #00cc00 .75turn, #00000000 .75turn);
+    background: conic-gradient(from 135deg, #00cc00 .75turn, #00cc0088 .75turn) !important;
   }
 </style>