Skip to content

Commit 12cd209

Browse files
urishurish
committed
feat(uno): add LEDs, pin labels
1 parent f2d3fde commit 12cd209

File tree

2 files changed

+99
-7
lines changed

2 files changed

+99
-7
lines changed

‎src/arduino-uno-element.stories.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ storiesOf('Arduino Uno', module)
88
.add(
99
'Uno R3',
1010
() => html`
11-
<wokwi-arduino-uno led=${boolean('LED', false)}></wokwi-7segment>
11+
<wokwi-arduino-uno
12+
.led13=${boolean('LED 13', false)}
13+
.ledPower=${boolean('Power LED', true)}
14+
.ledRX=${boolean('RX LED', false)}
15+
.ledTX=${boolean('TX LED', false)}
16+
></wokwi-7segment>
1217
`
1318
);

‎src/arduino-uno-element.ts‎

Lines changed: 93 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { customElement, html, LitElement, property } from 'lit-element';
1+
import { customElement, html, LitElement, property, svg } from 'lit-element';
22

33
@customElement('wokwi-arduino-uno')
44
export class ArduinoUnoElement extends LitElement {
5-
@property() led = false;
5+
@property() led13 = false;
6+
@property() ledRX = false;
7+
@property() ledTX = false;
8+
@property() ledPower = false;
69

710
render() {
11+
const { ledPower, led13, ledRX, ledTX } = this;
812
return html`
913
<svg
1014
width="72.58mm"
@@ -18,6 +22,16 @@ export class ArduinoUnoElement extends LitElement {
1822
viewBox="-4 0 72.58 53.34"
1923
xmlns="http://www.w3.org/2000/svg"
2024
>
25+
<defs>
26+
<g id="led-body" fill="#eee">
27+
<path
28+
d="m1.995 0.024v0.289a0.217 0.239 0 0 0-0.178 0.235 0.217 0.239 0 0 0 0.178 0.235v0.282h-1.995v-0.29a0.217 0.239 0 0 0 0.198-0.238 0.217 0.239 0 0 0-0.198-0.238v-0.275z"
29+
fill="#c6c6c6"
30+
/>
31+
<rect x="0.3" y="-0.15" width="1.35" height="1.4" stroke="#aaa" stroke-width="0.05" />
32+
</g>
33+
</defs>
34+
2135
<filter id="ledFilter" x="-0.8" y="-0.8" height="2.2" width="2.8">
2236
<feGaussianBlur stdDeviation="0.5" />
2337
</filter>
@@ -106,16 +120,16 @@ export class ArduinoUnoElement extends LitElement {
106120
</g>
107121
108122
<!-- Pin Headers -->
109-
<g transform="translate(17.497, 1.27)">
123+
<g transform="translate(17.497 1.27)">
110124
<rect width="${0.38 + 2.54 * 10}" height="2.54" fill="url(#pins)"></rect>
111125
</g>
112-
<g transform="translate(44.421, 1.27)">
126+
<g transform="translate(44.421 1.27)">
113127
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins)"></rect>
114128
</g>
115-
<g transform="translate(26.641, 49.53)">
129+
<g transform="translate(26.641 49.53)">
116130
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins)"></rect>
117131
</g>
118-
<g transform="translate(49.501, 49.53)">
132+
<g transform="translate(49.501 49.53)">
119133
<rect width="${0.38 + 2.54 * 6}" height="2.54" fill="url(#pins)"></rect>
120134
</g>
121135
@@ -148,6 +162,79 @@ export class ArduinoUnoElement extends LitElement {
148162
<circle cx="33.269" cy="36.847" r="1.016" fill="#252728" />
149163
<circle cx="59.939" cy="36.847" r="1.016" fill="#252728" />
150164
</g>
165+
166+
<!-- LEDs -->
167+
<g transform="translate(57.3, 16.21)">
168+
<use xlink:href="#led-body" />
169+
${ledPower &&
170+
svg`<circle cx="0.975" cy="0.55" r="1.3" fill="#80ff80" filter="url(#ledFilter)" />`}
171+
</g>
172+
173+
<g transform="translate(26.9, 10.62)">
174+
<use xlink:href="#led-body" />
175+
${led13 &&
176+
svg`<circle cx="0.975" cy="0.55" r="1.3" fill="#ff8080" filter="url(#ledFilter)" />`}
177+
</g>
178+
179+
<g transform="translate(26.9, 16.2)">
180+
<use xlink:href="#led-body" />
181+
${ledRX &&
182+
svg`<circle cx="0.975" cy="0.55" r="1.3" fill="yellow" filter="url(#ledFilter)" />`}
183+
</g>
184+
185+
<g transform="translate(26.9, 18.5)">
186+
<use xlink:href="#led-body" />
187+
${ledTX &&
188+
svg`<circle cx="0.975" cy="0.55" r="1.3" fill="yellow" filter="url(#ledFilter)" />`}
189+
</g>
190+
191+
<!-- Labels -->
192+
<text
193+
transform="translate(22.6 4) rotate(270 0 0)"
194+
fill="#fff"
195+
style="font-size: 2px; text-anchor: end; font-family: sans-serif; font-weight: 800"
196+
>
197+
<tspan x="0" dy="2.54">AREF</tspan>
198+
<tspan x="0" dy="2.54">GND</tspan>
199+
<tspan x="0" dy="2.54">13</tspan>
200+
<tspan x="0" dy="2.54">12</tspan>
201+
<tspan x="0" dy="2.54">~11</tspan>
202+
<tspan x="0" dy="2.54">~10</tspan>
203+
<tspan x="0" dy="2.54">~9</tspan>
204+
<tspan x="0" dy="2.54">8</tspan>
205+
<tspan x="0" dy="4.08">~7</tspan>
206+
<tspan x="0" dy="2.54">~6</tspan>
207+
<tspan x="0" dy="2.54">~5</tspan>
208+
<tspan x="0" dy="2.54">4</tspan>
209+
<tspan x="0" dy="2.54">~3</tspan>
210+
<tspan x="0" dy="2.54">2</tspan>
211+
<tspan x="0" dy="2.54">TX→</tspan>
212+
<tspan dx="0.2">1</tspan>
213+
<tspan x="0" dy="2.54">RX←</tspan>
214+
<tspan dx="0.2">0</tspan>
215+
<tspan x="0" dy="2.54">&nbsp;</tspan>
216+
</text>
217+
218+
<text
219+
transform="translate(29.19 49) rotate(270 0 0)"
220+
fill="#fff"
221+
style="font-size: 2px; font-family: sans-serif; font-weight: 800"
222+
>
223+
<tspan x="0" dy="2.54">IOREF</tspan>
224+
<tspan x="0" dy="2.54">RESET</tspan>
225+
<tspan x="0" dy="2.54">3.3V</tspan>
226+
<tspan x="0" dy="2.54">5V</tspan>
227+
<tspan x="0" dy="2.54">GND</tspan>
228+
<tspan x="0" dy="2.54">GND</tspan>
229+
<tspan x="0" dy="2.54">Vin</tspan>
230+
<tspan x="0" dy="4.54">A0</tspan>
231+
<tspan x="0" dy="2.54">A1</tspan>
232+
<tspan x="0" dy="2.54">A2</tspan>
233+
<tspan x="0" dy="2.54">A3</tspan>
234+
<tspan x="0" dy="2.54">A4</tspan>
235+
<tspan x="0" dy="2.54">A5</tspan>
236+
<tspan x="0" dy="2.54">&nbsp;</tspan>
237+
</text>
151238
</svg>
152239
`;
153240
}

0 commit comments

Comments
 (0)