fern/sensor-watch
1
0
Fork 0
mirror of https://github.com/firewalkwithm3/Sensor-Watch.git synced 2024-11-22 11:10:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #141 from TomHodson/fix_simulated_led_color

Browse source 
Add support for bicolor led in the simulator
This commit is contained in:
joeycastillo 2022-11-22 08:43:12 -06:00 committed by GitHub
parent 8dbc00c56d 3377b489c7
commit a209178ac0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
watch-library/simulator/shell.html
View file

@ -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">

10
watch-library/simulator/watch/watch_led.c
View file

@ -32,7 +32,15 @@ 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;
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);
}