refactor(demo): use LED from @wokwi/elements

author: Uri Shaked 2019-12-07 13:13:16 +0200
committer: Uri Shaked 2019-12-07 13:13:16 +0200
commit: bf0dc3c9835eaec056f3f309728818429dede004 (patch)
tree: f61aa3f36e1a0bc0b9b2f09aceee86eff260044c
parent: feat(usart): add onLineTransmit callback (diff)
download: avr8js-bf0dc3c9835eaec056f3f309728818429dede004.tar.gz
avr8js-bf0dc3c9835eaec056f3f309728818429dede004.tar.bz2
avr8js-bf0dc3c9835eaec056f3f309728818429dede004.zip
5 files changed, 33 insertions, 108 deletions
diff --git a/demo/src/index.html b/demo/src/index.html
index 2a8e924..99b1c84 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -10,7 +10,10 @@
   <body>
     <h2>AVR8js LED Demo</h2>
     <div class="app-container">
-      <div class="leds"></div>
+      <div class="leds">
+        <wokwi-led color="green"></wokwi-led>
+        <wokwi-led color="red"></wokwi-led>
+      </div>
       <div class="toolbar">
         <button id="run-button">Run</button>
         <button id="stop-button" disabled>Stop</button>
diff --git a/demo/src/index.ts b/demo/src/index.ts
index a173f04..4b25626 100644
--- a/demo/src/index.ts
+++ b/demo/src/index.ts
@@ -1,9 +1,10 @@
+import '@wokwi/elements';
 import { buildHex } from './compile';
 import { AVRRunner } from './execute';
 import { formatTime } from './format-time';
 import './index.css';
-import { LED } from './led';
 import { CPUPerformance } from './cpu-performance';
+import { LEDElement } from '@wokwi/elements';
 
 let editor: any;
 const BLINK_CODE = `
@@ -38,11 +39,8 @@ window.require(['vs/editor/editor.main'], () => {
 });
 
 // Set up LEDs
-const leds = document.querySelector('.leds');
-const led13 = new LED({ color: 'green', lightColor: '#80ff80' });
-const led12 = new LED({ color: 'red', lightColor: '#ff8080' });
-leds.appendChild(led13.el);
-leds.appendChild(led12.el);
+const led13 = document.querySelector<LEDElement>('wokwi-led[color=green]');
+const led12 = document.querySelector<LEDElement>('wokwi-led[color=red]');
 
 // Set up toolbar
 let runner: AVRRunner;
diff --git a/demo/src/led.ts b/demo/src/led.ts
deleted file mode 100644
index 8b44f16..0000000
--- a/demo/src/led.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-const led = `<svg
-width="40"
-height="50"
-version="1.2"
-viewBox="-10 -5 35.456 39.618"
-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" />
-</filter>
-<filter id="light2" x="-0.8" y="-0.8" height="2.2" width="2.8">
-  <feGaussianBlur stdDeviation="4" />
-</filter>
-<rect x="3.451" y="19.379" width="2.1514" height="9.8273" fill="#8c8c8c" />
-<path
-  d="m12.608 29.618c0-1.1736-0.86844-2.5132-1.8916-3.4024-0.41616-0.3672-1.1995-1.0015-1.1995-1.4249v-5.4706h-2.1614v5.7802c0 1.0584 0.94752 1.8785 1.9462 2.7482 0.44424 0.37584 1.3486 1.2496 1.3486 1.7694"
-  fill="#8c8c8c"
-/>
-<path
-  d="m14.173 13.001v-5.9126c0-3.9132-3.168-7.0884-7.0855-7.0884-3.9125 0-7.0877 3.1694-7.0877 7.0884v13.649c1.4738 1.651 4.0968 2.7526 7.0877 2.7526 4.6195 0 8.3686-2.6179 8.3686-5.8594v-1.5235c-7.4e-4 -1.1426-0.47444-2.2039-1.283-3.1061z"
-  opacity=".3"
-/>
-<path
-  d="m14.173 13.001v-5.9126c0-3.9132-3.168-7.0884-7.0855-7.0884-3.9125 0-7.0877 3.1694-7.0877 7.0884v13.649c1.4738 1.651 4.0968 2.7526 7.0877 2.7526 4.6195 0 8.3686-2.6179 8.3686-5.8594v-1.5235c-7.4e-4 -1.1426-0.47444-2.2039-1.283-3.1061z"
-  fill="#e6e6e6"
-  opacity=".5"
-/>
-<path
-  d="m14.173 13.001v3.1054c0 2.7389-3.1658 4.9651-7.0855 4.9651-3.9125 2e-5 -7.0877-2.219-7.0877-4.9651v4.6296c1.4738 1.6517 4.0968 2.7526 7.0877 2.7526 4.6195 0 8.3686-2.6179 8.3686-5.8586l-4e-5 -1.5235c-7e-4 -1.1419-0.4744-2.2032-1.283-3.1054z"
-  fill="#d1d1d1"
-  opacity=".9"
-/>
-<g>
-  <path
-    d="m14.173 13.001v3.1054c0 2.7389-3.1658 4.9651-7.0855 4.9651-3.9125 2e-5 -7.0877-2.219-7.0877-4.9651v4.6296c1.4738 1.6517 4.0968 2.7526 7.0877 2.7526 4.6195 0 8.3686-2.6179 8.3686-5.8586l-4e-5 -1.5235c-7e-4 -1.1419-0.4744-2.2032-1.283-3.1054z"
-    opacity=".7"
-  />
-  <path
-    d="m14.173 13.001v3.1054c0 2.7389-3.1658 4.9651-7.0855 4.9651-3.9125 2e-5 -7.0877-2.219-7.0877-4.9651v3.1054c1.4738 1.6502 4.0968 2.7526 7.0877 2.7526 4.6195 0 8.3686-2.6179 8.3686-5.8586-7.4e-4 -1.1412-0.47444-2.2025-1.283-3.1047z"
-    opacity=".25"
-  />
-  <ellipse cx="7.0877" cy="16.106" rx="7.087" ry="4.9608" opacity=".25" />
-</g>
-<polygon
-  points="2.2032 16.107 3.1961 16.107 3.1961 13.095 6.0156 13.095 10.012 8.8049 3.407 8.8049 2.2032 9.648"
-  fill="#666666"
-/>
-<polygon
-  points="11.215 9.0338 7.4117 13.095 11.06 13.095 11.06 16.107 11.974 16.107 11.974 8.5241 10.778 8.5241"
-  fill="#666666"
-/>
-<path
-  d="m14.173 13.001v-5.9126c0-3.9132-3.168-7.0884-7.0855-7.0884-3.9125 0-7.0877 3.1694-7.0877 7.0884v13.649c1.4738 1.651 4.0968 2.7526 7.0877 2.7526 4.6195 0 8.3686-2.6179 8.3686-5.8594v-1.5235c-7.4e-4 -1.1426-0.47444-2.2039-1.283-3.1061z"
-  fill="{{color}}"
-  opacity=".65"
-/>
-<g fill="#ffffff">
-  <path
-    d="m10.388 3.7541 1.4364-0.2736c-0.84168-1.1318-2.0822-1.9577-3.5417-2.2385l0.25416 1.0807c0.76388 0.27072 1.4068 0.78048 1.8511 1.4314z"
-    opacity=".5"
-  />
-  <path
-    d="m0.76824 19.926v1.5199c0.64872 0.5292 1.4335 0.97632 2.3076 1.3169v-1.525c-0.8784-0.33624-1.6567-0.78194-2.3076-1.3118z"
-    opacity=".5"
-  />
-  <path
-    d="m11.073 20.21c-0.2556 0.1224-0.52992 0.22968-0.80568 0.32976-0.05832 0.01944-0.11736 0.04032-0.17784 0.05832-0.56376 0.17928-1.1614 0.31896-1.795 0.39456-0.07488 0.0094-0.1512 0.01872-0.22464 0.01944-0.3204 0.03024-0.64368 0.05832-0.97056 0.05832-0.14832 0-0.30744-0.01512-0.4716-0.02376-1.2002-0.05688-2.3306-0.31464-3.2976-0.73944l-2e-5 -8.3895v-4.8254c0-1.471 0.84816-2.7295 2.0736-3.3494l-0.02232-0.05328-1.2478-1.512c-1.6697 1.003-2.79 2.8224-2.79 4.9118v11.905c-0.04968-0.04968-0.30816-0.30888-0.48024-0.52992l-0.30744 0.6876c1.4011 1.4818 3.8088 2.4617 6.5426 2.4617 1.6798 0 3.2371-0.37368 4.5115-1.0022l-0.52704-0.40896-0.01006 0.0072z"
-    opacity=".5"
-  />
-</g>
-<g class="light">
-  <ellipse cx="8" cy="10" rx="10" ry="10" fill="{{lightColor}}" filter="url(#light2)"></ellipse>
-  <ellipse cx="8" cy="10" rx="3" ry="3" fill="white" filter="url(#light1)"></ellipse>
-</g>
-</svg>
-`;
-
-export interface ILEDOptions {
-  color: string;
-  lightColor?: string;
-}
-
-export class LED {
-  readonly el = document.createElement('span');
-  private readonly lightEl: SVGElement;
-  constructor({ color, lightColor }: ILEDOptions) {
-    this.el.innerHTML = led
-      .replace('{{color}}', color)
-      .replace('{{lightColor}}', lightColor || color);
-    this.lightEl = this.el.querySelector('.light');
-    this.lightEl.style.display = 'none';
-  }
-
-  get value() {
-    return this.lightEl.style.display !== 'none';
-  }
-
-  set value(value: boolean) {
-    this.lightEl.style.display = value ? '' : 'none';
-  }
-}
diff --git a/package-lock.json b/package-lock.json
index 0eef142..0530bd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1476,6 +1476,15 @@
       "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
       "dev": true
     },
+    "@wokwi/elements": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@wokwi/elements/-/elements-0.1.0.tgz",
+      "integrity": "sha512-qXZhbmmzXIN7B4dRbLzNKGWe7qC/bzY6S6PXbUjAeYF/xNXfMBVb4JVYXWO1xkeT/1A1VV03u3ARlHqqYD2XKA==",
+      "dev": true,
+      "requires": {
+        "lit-element": "^2.2.1"
+      }
+    },
     "abab": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz",
@@ -6315,6 +6324,21 @@
         }
       }
     },
+    "lit-element": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz",
+      "integrity": "sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==",
+      "dev": true,
+      "requires": {
+        "lit-html": "^1.0.0"
+      }
+    },
+    "lit-html": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz",
+      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==",
+      "dev": true
+    },
     "load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
diff --git a/package.json b/package.json
index 2112003..b1c206a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@types/jest": "^24.0.23",
     "@types/node": "^12.12.7",
     "@types/prettier": "^1.19.0",
+    "@wokwi/elements": "^0.1.0",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
     "lint-staged": "^9.4.2",
author	Uri Shaked	2019-12-07 13:13:16 +0200
committer	Uri Shaked	2019-12-07 13:13:16 +0200
commit	bf0dc3c9835eaec056f3f309728818429dede004 (patch)
tree	f61aa3f36e1a0bc0b9b2f09aceee86eff260044c
parent	feat(usart): add onLineTransmit callback (diff)
download	avr8js-bf0dc3c9835eaec056f3f309728818429dede004.tar.gz avr8js-bf0dc3c9835eaec056f3f309728818429dede004.tar.bz2 avr8js-bf0dc3c9835eaec056f3f309728818429dede004.zip