From 0b3a1ed24402bee9b2e5c242ea79cb51cfafd4a0 Mon Sep 17 00:00:00 2001
From: Tom Hodson <thomas.c.hodson@gmail.com>
Date: Tue, 22 Nov 2022 14:30:24 +0100
Subject: [PATCH 1/2] WIP: Add support for bicolor led in the simulator

I noticed that the bicolor led isn't supported in the simulator. Here is a quick mockup of how I would add support for it.

I added an SVG filter to the #light rectangle in the SVG which lets us multiply the colours by a matrix in code. I then insert values so that the original green colour gets mixed into the combination of red and green requested by `watch_set_led_color`

# Testing
So far I've only tested this with the standard firmware build but it seems to work.

# Possible issues
I wasn't 100% sure what to do when red + green > 255, current behaviour is that it gets clamped to 255 in the simulator.
---
 watch-library/simulator/shell.html        | 10 +++++++++-
 watch-library/simulator/watch/watch_led.c | 11 ++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/watch-library/simulator/shell.html b/watch-library/simulator/shell.html
index 80e1e2e..7b38a9a 100644
--- a/watch-library/simulator/shell.html
+++ b/watch-library/simulator/shell.html
@@ -51,6 +51,14 @@
         <stop offset="0.94" stop-color="#000d00" stop-opacity="0.05"/>
         <stop offset="1" stop-opacity="0"/>
       </radialGradient>
+      <filter id="ledcolor">
+        <feColorMatrix in="SourceGraphic" type="matrix"
+                       values=" 0      0      0      0 0
+                                0      1      0      0 0 
+                                0      0      0      0 0 
+                                0      0      0      1 0  "/>
+     
+      </filter>
     </defs>
     <g id="Calque">
       <g id="Contours">
@@ -71,7 +79,7 @@
           <rect x="293.5" y="520" width="683" height="334" rx="34.68" style="fill: #777b7a"/>
         </g>
         <g id="light" style="opacity: 0">
-          <rect x="293.5" y="520" width="683" height="334" rx="34.68" style="fill: url(#Dégradé_sans_nom_3)"/>
+          <rect x="293.5" y="520" width="683" height="334" rx="34.68" style="fill: url(#Dégradé_sans_nom_3)" filter="url(#ledcolor)"/>
         </g>
       </g>
       <g id="Textes">
diff --git a/watch-library/simulator/watch/watch_led.c b/watch-library/simulator/watch/watch_led.c
index 068da8b..249be05 100644
--- a/watch-library/simulator/watch/watch_led.c
+++ b/watch-library/simulator/watch/watch_led.c
@@ -32,7 +32,16 @@ void watch_disable_leds(void) {}
 
 void watch_set_led_color(uint8_t red, uint8_t green) {
     EM_ASM({
-        document.getElementById('light').style.opacity = $1 / 255;
+        // the watch svg contains an feColorMatrix filter with id ledcolor
+        // and a green svg gradient that mimics the led being on
+        // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
+        // this changes the color of the gradient to match the red+green combination
+        let filter = document.getElementById("ledcolor");
+        let color_matrix = filter.children[0].values.baseVal;
+        console.log($0, $1);
+        color_matrix[1].value = $0  / 255; // red value
+        color_matrix[6].value = $1 / 255; // green value
+        document.getElementById('light').style.opacity = Math.min(255, $0 + $1) / 255;
     }, red, green);
 }
 

From 3377b489c7a34d798321c8be2e32974145eb9c81 Mon Sep 17 00:00:00 2001
From: Tom Hodson <thomas.c.hodson@gmail.com>
Date: Tue, 22 Nov 2022 14:39:46 +0100
Subject: [PATCH 2/2] remove errant console.log

---
 watch-library/simulator/watch/watch_led.c | 1 -
 1 file changed, 1 deletion(-)

diff --git a/watch-library/simulator/watch/watch_led.c b/watch-library/simulator/watch/watch_led.c
index 249be05..636dc74 100644
--- a/watch-library/simulator/watch/watch_led.c
+++ b/watch-library/simulator/watch/watch_led.c
@@ -38,7 +38,6 @@ void watch_set_led_color(uint8_t red, uint8_t green) {
         // this changes the color of the gradient to match the red+green combination
         let filter = document.getElementById("ledcolor");
         let color_matrix = filter.children[0].values.baseVal;
-        console.log($0, $1);
         color_matrix[1].value = $0  / 255; // red value
         color_matrix[6].value = $1 / 255; // green value
         document.getElementById('light').style.opacity = Math.min(255, $0 + $1) / 255;