fix: Low LED brightness levels are indistinguishable #4

Author: urish

src/led-element.stories.ts

@@ -95,6 +95,7 @@ storiesOf('LED', module)
     () =>
       html`
         <wokwi-led color="red" label="0" .value=${true} brightness="0"></wokwi-led>
+        <wokwi-led color="red" label="1%" .value=${true} brightness="0.01"></wokwi-led>
         <wokwi-led color="red" label="10%" .value=${true} brightness="0.1"></wokwi-led>
         <wokwi-led color="red" label="25%" .value=${true} brightness="0.25"></wokwi-led>
         <wokwi-led color="red" label="50%" .value=${true} brightness="0.5"></wokwi-led>

src/led-element.ts

@@ -44,6 +44,7 @@ export class LEDElement extends LitElement {
     const { color, lightColor } = this;
     const lightColorActual = lightColor || lightColors[color] || '#ff8080';
     const opacity = this.brightness ? 0.3 + this.brightness * 0.7 : 0;
+    const lightOn = this.value && this.brightness > Number.EPSILON;
     return html`
       <div class="led-container">
         <svg
@@ -54,7 +55,7 @@ export class LEDElement extends LitElement {
           xmlns="http://www.w3.org/2000/svg"
         >
           <filter id="light1" x="-0.8" y="-0.8" height="2.2" width="2.8">
-            <feGaussianBlur stdDeviation="2.6" />
+            <feGaussianBlur stdDeviation="2" />
           </filter>
           <filter id="light2" x="-0.8" y="-0.8" height="2.2" width="2.8">
             <feGaussianBlur stdDeviation="4" />
@@ -116,20 +117,26 @@ export class LEDElement extends LitElement {
               opacity=".5"
             />
           </g>
-          <g
-            class="light"
-            xmlns="http://www.w3.org/2000/svg"
-            style="display: ${this.value ? '' : 'none'}; opacity: ${opacity}"
-          >
+          <g class="light" style="display: ${lightOn ? '' : 'none'}">
             <ellipse
               cx="8"
               cy="10"
               rx="10"
               ry="10"
               fill="${lightColorActual}"
               filter="url(#light2)"
+              style="opacity: ${opacity}"
+            ></ellipse>
+            <ellipse cx="8" cy="10" rx="2" ry="2" fill="white" filter="url(#light1)"></ellipse>
+            <ellipse
+              cx="8"
+              cy="10"
+              rx="3"
+              ry="3"
+              fill="white"
+              filter="url(#light1)"
+              style="opacity: ${opacity}"
             ></ellipse>
-            <ellipse cx="8" cy="10" rx="3" ry="3" fill="white" filter="url(#light1)"></ellipse>
           </g>
         </svg>
         <span class="led-label">${this.label}</span>