aboutsummaryrefslogtreecommitdiff
path: root/demo/src
diff options
context:
space:
mode:
authorUri Shaked2019-12-07 13:13:16 +0200
committerUri Shaked2019-12-07 13:13:16 +0200
commitbf0dc3c9835eaec056f3f309728818429dede004 (patch)
treef61aa3f36e1a0bc0b9b2f09aceee86eff260044c /demo/src
parentfeat(usart): add onLineTransmit callback (diff)
downloadavr8js-bf0dc3c9835eaec056f3f309728818429dede004.tar.gz
avr8js-bf0dc3c9835eaec056f3f309728818429dede004.tar.bz2
avr8js-bf0dc3c9835eaec056f3f309728818429dede004.zip
refactor(demo): use LED from @wokwi/elements
Diffstat (limited to '')
-rw-r--r--demo/src/index.html5
-rw-r--r--demo/src/index.ts10
-rw-r--r--demo/src/led.ts101
3 files changed, 8 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';
- }
-}
If you find this content useful please consider a small donation via bitcoin: bitcoin:1mxKyQsHHugqRxPKgwaA7wUwJEGCNthn2?amount=0.001&message=Donation Scraping git contents via cgit is very resource intensive. The continued hosting of these git repositories is entirely financed by your bitcoin contributions. For donations of a least 1 mBTC you include your IP address in the message of your bitcoin donation. This will remove this message in the future for requests from your IP, which will significantly reduce token usage. In any case, any contributions to bitcoin address 1mxKyQsHHugqRxPKgwaA7wUwJEGCNthn2 are very welcome. Thanks in advance for you contribution to a self-sustaining ecosystem.