feat: Support setting LED brightness

close #1

Author: urish

src/led-element.stories.ts

@@ -1,15 +1,26 @@
 import { storiesOf } from '@storybook/polymer';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
 import { html } from 'lit-html';
 import './led-element';
 
+const brightnessOptions = {
+  range: true,
+  min: 0,
+  max: 1.0,
+  step: 0.05
+};
+
 storiesOf('LED', module)
   .addDecorator(withKnobs)
   .add(
     'Red',
     () =>
       html`
-        <wokwi-led color="red" .value=${boolean('value', false)}></wokwi-led>
+        <wokwi-led
+          color="red"
+          .value=${boolean('value', false)}
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
+        ></wokwi-led>
       `
   )
   .add(
@@ -20,41 +31,74 @@ storiesOf('LED', module)
           color="red"
           .value=${boolean('value', false)}
           label="${text('label', '12')}"
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
         ></wokwi-led>
       `
   )
   .add(
     'Green',
     () =>
       html`
-        <wokwi-led color="green" .value=${boolean('value', false)}></wokwi-led>
+        <wokwi-led
+          color="green"
+          .value=${boolean('value', false)}
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
+        ></wokwi-led>
       `
   )
   .add(
     'Yellow',
     () =>
       html`
-        <wokwi-led color="yellow" .value=${boolean('value', false)}></wokwi-led>
+        <wokwi-led
+          color="yellow"
+          .value=${boolean('value', false)}
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
+        ></wokwi-led>
       `
   )
   .add(
     'Blue',
     () =>
       html`
-        <wokwi-led color="blue" .value=${boolean('value', false)}></wokwi-led>
+        <wokwi-led
+          color="blue"
+          .value=${boolean('value', false)}
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
+        ></wokwi-led>
       `
   )
   .add(
     'Orange',
     () =>
       html`
-        <wokwi-led color="orange" .value=${boolean('value', false)}></wokwi-led>
+        <wokwi-led
+          color="orange"
+          .value=${boolean('value', false)}
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
+        ></wokwi-led>
       `
   )
   .add(
     'White',
     () =>
       html`
-        <wokwi-led color="white" .value=${boolean('value', false)}></wokwi-led>
+        <wokwi-led
+          color="white"
+          .value=${boolean('value', false)}
+          .brightness=${number('brightness', 1.0, brightnessOptions)}
+        ></wokwi-led>
+      `
+  )
+  .add(
+    'Brightness Levels',
+    () =>
+      html`
+        <wokwi-led color="red" label="0" .value=${true} brightness="0"></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>
+        <wokwi-led color="red" label="75%" .value=${true} brightness="0.75"></wokwi-led>
+        <wokwi-led color="red" label="100%" .value=${true}></wokwi-led>
       `
   );

src/led-element.ts

@@ -12,6 +12,7 @@ const lightColors: { [key: string]: string } = {
 @customElement('wokwi-led')
 export class LEDElement extends LitElement {
   @property() value = false;
+  @property() brightness = 1.0;
   @property() color = 'red';
   @property() lightColor: string | null = null;
   @property() label = '';
@@ -42,6 +43,7 @@ export class LEDElement extends LitElement {
   render() {
     const { color, lightColor } = this;
     const lightColorActual = lightColor || lightColors[color] || '#ff8080';
+    const opacity = this.brightness ? 0.3 + this.brightness / 0.7 : 0;
     return html`
       <div class="led-container">
         <svg
@@ -117,7 +119,7 @@ export class LEDElement extends LitElement {
           <g
             class="light"
             xmlns="http://www.w3.org/2000/svg"
-            style="display: ${this.value ? '' : 'none'}"
+            style="display: ${this.value ? '' : 'none'}; opacity: ${opacity}"
           >
             <ellipse
               cx="8"