feat: add buzzer element (#25)

Author: gfeun

src/buzzer-element.stories.ts

@@ -0,0 +1,14 @@
+import { storiesOf } from '@storybook/web-components';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { html } from 'lit-html';
+import './buzzer-element';
+
+storiesOf('Buzzer', module)
+  .addParameters({ component: 'wokwi-buzzer' })
+  .addDecorator(withKnobs)
+  .add(
+    'Buzzer',
+    () =>
+      html`<div style="height: 20px"></div>
+        <wokwi-buzzer .hasSignal=${boolean('hasSignal', false)}></wokwi-buzzer>`
+  );

src/buzzer-element.ts

@@ -0,0 +1,114 @@
+import { css, customElement, html, LitElement, property } from 'lit-element';
+
+/**
+ * Renders a piezo electric buzzer.
+ */
+@customElement('wokwi-buzzer')
+export class BuzzerElement extends LitElement {
+  /**
+   * Boolean representing if an electric signal is coming in the buzzer
+   * If true a music note will be displayed on top of the buzzer
+   */
+  @property() hasSignal = false;
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+
+      .buzzer-container {
+        display: flex;
+        flex-direction: column;
+        width: 75px;
+      }
+
+      .music-note {
+        position: relative;
+        left: 40px;
+        animation-duration: 1.5s;
+        animation-name: animate-note;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        transform: scale(1.5);
+        fill: blue;
+        offset-path: path(
+          'm0 0c-0.9-0.92-1.8-1.8-2.4-2.8-0.56-0.92-0.78-1.8-0.58-2.8 0.2-0.92 0.82-1.8 1.6-2.8 0.81-0.92 1.8-1.8 2.6-2.8 0.81-0.92 1.4-1.8 1.6-2.8 0.2-0.92-0.02-1.8-0.58-2.8-0.56-0.92-1.5-1.8-2.4-2.8'
+        );
+        offset-rotate: 0deg;
+      }
+
+      @keyframes animate-note {
+        0% {
+          offset-distance: 0%;
+          opacity: 0;
+        }
+        10% {
+          offset-distance: 10%;
+          opacity: 1;
+        }
+        75% {
+          offset-distance: 75%;
+          opacity: 1;
+        }
+        100% {
+          offset-distance: 100%;
+          opacity: 0;
+        }
+      }
+    `;
+  }
+
+  render() {
+    const buzzerOn = this.hasSignal;
+    return html`
+      <div class="buzzer-container">
+        <svg
+          class="music-note"
+          style="visibility: ${buzzerOn ? '' : 'hidden'}"
+          xmlns="http://www.w3.org/2000/svg"
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+        >
+          <path
+            d="M8 0c-5 0-6 1-6 1v4.09c-.15-.05-.33-.09-.5-.09-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5v-3.97c.73-.23 1.99-.44 4-.5v2.06c-.15-.05-.33-.09-.5-.09-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5v-5.5z"
+          />
+        </svg>
+
+        <svg
+          width="17mm"
+          height="20mm"
+          version="1.1"
+          viewBox="0 0 17 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="m8 16.5v3.5" fill="none" stroke="#000" stroke-width=".5" />
+          <path d="m9 16.5v3.5" fill="#f00" stroke="#f00" stroke-width=".5" />
+          <g stroke="#000">
+            <g>
+              <ellipse cx="8.5" cy="8.5" rx="8.15" ry="8.15" fill="#1a1a1a" stroke-width=".7" />
+              <circle
+                cx="8.5"
+                cy="8.5"
+                r="6.3472"
+                fill="none"
+                stroke-width=".3"
+                style="paint-order:normal"
+              />
+              <circle
+                cx="8.5"
+                cy="8.5"
+                r="4.3488"
+                fill="none"
+                stroke-width=".3"
+                style="paint-order:normal"
+              />
+            </g>
+            <circle cx="8.5" cy="8.5" r="1.3744" fill="#ccc" stroke-width=".25" />
+          </g>
+        </svg>
+      </div>
+    `;
+  }
+}

src/index.ts

@@ -11,3 +11,4 @@ export { MembraneKeypadElement } from './membrane-keypad-element';
 export { PotentiometerElement } from './potentiometer-element';
 export { NeopixelMatrixElement } from './neopixel-matrix-element';
 export { SSD1306Element } from './ssd1306-element';
+export { BuzzerElement } from './buzzer-element';