Skip to content

Commit b56a79b

Browse files
urishurish
committed
feat(mega): add arduino mega element #7
close #7
1 parent 0195a66 commit b56a79b

File tree

4 files changed

+357
-0
lines changed

4 files changed

+357
-0
lines changed

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { boolean, withKnobs } from '@storybook/addon-knobs';
2+
import { storiesOf } from '@storybook/web-components';
3+
import { html } from 'lit-html';
4+
import './arduino-mega-element';
5+
6+
storiesOf('Arduino Mega', module)
7+
.addParameters({ component: 'wokwi-arduino-mega' })
8+
.addDecorator(withKnobs)
9+
.add(
10+
'Mega',
11+
() => html`
12+
<wokwi-arduino-mega
13+
.led13=${boolean('LED 13', false)}
14+
.ledTX=${boolean('TX LED', false)}
15+
.ledRX=${boolean('RX LED', false)}
16+
.ledPower=${boolean('Power LED', true)}
17+
></wokwi-arduino-mega>
18+
`
19+
);

‎src/arduino-mega-element.ts

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { pinsFemalePattern } from './patterns/pins-female';
3+
import { analog, ElementPin, i2c, spi, usart } from './pin';
4+
5+
@customElement('wokwi-arduino-mega')
6+
export class ArduinoMegaElement extends LitElement {
7+
@property() led13 = false;
8+
@property() ledRX = false;
9+
@property() ledTX = false;
10+
@property() ledPower = false;
11+
12+
readonly pinInfo: ElementPin[] = [
13+
{ name: 'SCL', x: 90, y: 9, signals: [i2c('SCL')] },
14+
{ name: 'SDA', x: 100, y: 9, signals: [i2c('SDA')] },
15+
{ name: 'AREF', x: 109, y: 9, signals: [] },
16+
{ name: 'GND.1', x: 119, y: 9, signals: [{ type: 'power', signal: 'GND' }] },
17+
{ name: '13', x: 129, y: 9, signals: [{ type: 'pwm' }] },
18+
{ name: '12', x: 138, y: 9, signals: [{ type: 'pwm' }] },
19+
{ name: '11', x: 148, y: 9, signals: [{ type: 'pwm' }] },
20+
{ name: '10', x: 157.5, y: 9, signals: [{ type: 'pwm' }] },
21+
{ name: '9', x: 167.5, y: 9, signals: [{ type: 'pwm' }] },
22+
{ name: '8', x: 177, y: 9, signals: [{ type: 'pwm' }] },
23+
{ name: '7', x: 190, y: 9, signals: [{ type: 'pwm' }] },
24+
{ name: '6', x: 200, y: 9, signals: [{ type: 'pwm' }] },
25+
{ name: '5', x: 209.5, y: 9, signals: [{ type: 'pwm' }] },
26+
{ name: '4', x: 219, y: 9, signals: [{ type: 'pwm' }] },
27+
{ name: '3', x: 228.5, y: 9, signals: [{ type: 'pwm' }] },
28+
{ name: '2', x: 238, y: 9, signals: [{ type: 'pwm' }] },
29+
{ name: '1', x: 247.5, y: 9, signals: [usart('TX')] },
30+
{ name: '0', x: 257.5, y: 9, signals: [usart('RX')] },
31+
{ name: '14', x: 270.5, y: 9, signals: [usart('TX', 3)] },
32+
{ name: '15', x: 280, y: 9, signals: [usart('RX', 3)] },
33+
{ name: '16', x: 289.5, y: 9, signals: [usart('TX', 2)] },
34+
{ name: '17', x: 299, y: 9, signals: [usart('RX', 2)] },
35+
{ name: '18', x: 308.5, y: 9, signals: [usart('TX', 1)] },
36+
{ name: '19', x: 318.5, y: 9, signals: [usart('RX', 1)] },
37+
{ name: '20', x: 328, y: 9, signals: [i2c('SDA')] },
38+
{ name: '21', x: 337.5, y: 9, signals: [i2c('SCL')] },
39+
40+
{ name: '5V.1', x: 361, y: 8, signals: [{ type: 'power', signal: 'VCC', voltage: 5 }] },
41+
{ name: '5V.2', x: 371, y: 8, signals: [{ type: 'power', signal: 'VCC', voltage: 5 }] },
42+
{ name: '22', x: 361, y: 17.5, signals: [] },
43+
{ name: '23', x: 371, y: 17.5, signals: [] },
44+
{ name: '24', x: 361, y: 27.25, signals: [] },
45+
{ name: '25', x: 371, y: 27.25, signals: [] },
46+
{ name: '26', x: 361, y: 36.75, signals: [] },
47+
{ name: '27', x: 371, y: 36.75, signals: [] },
48+
{ name: '28', x: 361, y: 46.25, signals: [] },
49+
{ name: '29', x: 371, y: 46.25, signals: [] },
50+
{ name: '30', x: 361, y: 56, signals: [] },
51+
{ name: '31', x: 371, y: 56, signals: [] },
52+
{ name: '32', x: 361, y: 65.5, signals: [] },
53+
{ name: '33', x: 371, y: 65.5, signals: [] },
54+
{ name: '34', x: 361, y: 75, signals: [] },
55+
{ name: '35', x: 371, y: 75, signals: [] },
56+
{ name: '36', x: 361, y: 84.5, signals: [] },
57+
{ name: '37', x: 371, y: 84.5, signals: [] },
58+
{ name: '38', x: 361, y: 94.25, signals: [] },
59+
{ name: '39', x: 371, y: 94.25, signals: [] },
60+
{ name: '40', x: 361, y: 103.75, signals: [] },
61+
{ name: '41', x: 371, y: 103.75, signals: [] },
62+
{ name: '42', x: 361, y: 113.5, signals: [] },
63+
{ name: '43', x: 371, y: 113.5, signals: [] },
64+
{ name: '44', x: 361, y: 123, signals: [{ type: 'pwm' }] },
65+
{ name: '45', x: 371, y: 123, signals: [{ type: 'pwm' }] },
66+
{ name: '46', x: 361, y: 132.75, signals: [{ type: 'pwm' }] },
67+
{ name: '47', x: 371, y: 132.75, signals: [] },
68+
{ name: '48', x: 361, y: 142.25, signals: [] },
69+
{ name: '49', x: 371, y: 142.25, signals: [] },
70+
{ name: '50', x: 361, y: 152, signals: [spi('MISO')] },
71+
{ name: '51', x: 371, y: 152, signals: [spi('MOSI')] },
72+
{ name: '52', x: 361, y: 161.5, signals: [spi('SCK')] },
73+
{ name: '53', x: 371, y: 161.5, signals: [spi('SS')] },
74+
{ name: 'GND.4', x: 361, y: 171.25, signals: [{ type: 'power', signal: 'GND' }] },
75+
{ name: 'GND.5', x: 371, y: 171.25, signals: [{ type: 'power', signal: 'GND' }] },
76+
77+
{ name: 'IOREF', x: 136, y: 184.5, signals: [] },
78+
{ name: 'RESET', x: 145.5, y: 184.5, signals: [] },
79+
{ name: '3.3V', x: 155, y: 184.5, signals: [{ type: 'power', signal: 'VCC', voltage: 3.3 }] },
80+
{ name: '5V', x: 164.5, y: 184.5, signals: [{ type: 'power', signal: 'VCC', voltage: 5 }] },
81+
{ name: 'GND.2', x: 174.25, y: 184.5, signals: [{ type: 'power', signal: 'GND' }] },
82+
{ name: 'GND.3', x: 183.75, y: 184.5, signals: [{ type: 'power', signal: 'GND' }] },
83+
{ name: 'VIN', x: 193.5, y: 184.5, signals: [{ type: 'power', signal: 'VCC' }] },
84+
{ name: 'A0', x: 208.5, y: 184.5, signals: [analog(0)] },
85+
{ name: 'A1', x: 218, y: 184.5, signals: [analog(1)] },
86+
{ name: 'A2', x: 227.5, y: 184.5, signals: [analog(2)] },
87+
{ name: 'A3', x: 237.25, y: 184.5, signals: [analog(3)] },
88+
{ name: 'A4', x: 246.75, y: 184.5, signals: [analog(4)] },
89+
{ name: 'A5', x: 256.25, y: 184.5, signals: [analog(5)] },
90+
{ name: 'A6', x: 266, y: 184.5, signals: [analog(6)] },
91+
{ name: 'A7', x: 275.5, y: 184.5, signals: [analog(7)] },
92+
{ name: 'A8', x: 290.25, y: 184.5, signals: [analog(8)] },
93+
{ name: 'A9', x: 300, y: 184.5, signals: [analog(9)] },
94+
{ name: 'A10', x: 309.5, y: 184.5, signals: [analog(10)] },
95+
{ name: 'A11', x: 319.25, y: 184.5, signals: [analog(11)] },
96+
{ name: 'A12', x: 328.75, y: 184.5, signals: [analog(12)] },
97+
{ name: 'A13', x: 338.5, y: 184.5, signals: [analog(13)] },
98+
{ name: 'A14', x: 348, y: 184.5, signals: [analog(14)] },
99+
{ name: 'A15', x: 357.75, y: 184.5, signals: [analog(15)] },
100+
];
101+
102+
render() {
103+
const { ledPower, led13, ledRX, ledTX } = this;
104+
return html`
105+
<svg
106+
width="102.66mm"
107+
height="50.80mm"
108+
version="1.1"
109+
viewBox="-4 0 102.66 50.80"
110+
style="font-size: 2px; font-family: monospace"
111+
xmlns="http://www.w3.org/2000/svg"
112+
>
113+
<defs>
114+
<g id="led-body" fill="#eee">
115+
<rect x="0" y="0" height="1.2" width="2.6" fill="#c6c6c6" />
116+
<rect x="0.6" y="-0.1" width="1.35" height="1.4" stroke="#aaa" stroke-width="0.05" />
117+
</g>
118+
</defs>
119+
120+
<filter id="ledFilter" x="-0.8" y="-0.8" height="2.2" width="2.8">
121+
<feGaussianBlur stdDeviation="0.5" />
122+
</filter>
123+
124+
${pinsFemalePattern}
125+
126+
<pattern id="pin-male" width="2.54" height="4.80" patternUnits="userSpaceOnUse">
127+
<rect ry="0.3" rx="0.3" width="2.12" height="4.80" fill="#565656" />
128+
<ellipse cx="1" cy="1.13" rx="0.5" ry="0.5" fill="#aaa"></ellipse>
129+
<ellipse cx="1" cy="3.67" rx="0.5" ry="0.5" fill="#aaa"></ellipse>
130+
</pattern>
131+
132+
<!-- PCB -->
133+
<path
134+
d="M2.105.075v50.653h94.068v-1.206l2.412-2.412V14.548l-2.412-2.413V2.487L93.785.075zm14.443.907a1.505 1.505 0 01.03 0 1.505 1.505 0 011.504 1.505 1.505 1.505 0 01-1.504 1.506 1.505 1.505 0 01-1.506-1.506A1.505 1.505 0 0116.548.982zm71.154 0a1.505 1.505 0 01.03 0 1.505 1.505 0 011.505 1.505 1.505 1.505 0 01-1.505 1.506 1.505 1.505 0 01-1.506-1.506A1.505 1.505 0 0187.702.982zM64.818 15.454a1.505 1.505 0 011.504 1.506 1.505 1.505 0 01-1.504 1.505 1.505 1.505 0 01-1.506-1.505 1.505 1.505 0 011.506-1.506zm0 26.532a1.505 1.505 0 011.504 1.506 1.505 1.505 0 01-1.504 1.505 1.505 1.505 0 01-1.506-1.505 1.505 1.505 0 011.506-1.506zm-49.476 4.825a1.505 1.505 0 01.03 0 1.505 1.505 0 011.505 1.504 1.505 1.505 0 01-1.506 1.506 1.505 1.505 0 01-1.505-1.506 1.505 1.505 0 011.476-1.504zm78.39 0a1.505 1.505 0 01.03 0 1.505 1.505 0 011.504 1.504 1.505 1.505 0 01-1.504 1.506 1.505 1.505 0 01-1.506-1.506 1.505 1.505 0 011.476-1.504z"
135+
fill="#2b6b99"
136+
/>
137+
138+
<!-- USB Connector -->
139+
<g style="fill:#b3b2b2;stroke:#b3b2b2;stroke-width:0.010">
140+
<ellipse cx="3.84" cy="9.56" rx="1.12" ry="1.03" />
141+
<ellipse cx="3.84" cy="21.04" rx="1.12" ry="1.03" />
142+
<g fill="#000">
143+
<rect width="11" height="11.93" x="-0.05" y="9.72" rx="0.2" ry="0.2" opacity="0.24" />
144+
</g>
145+
<rect x="-4" y="9.37" height="11.85" width="14.46" />
146+
<rect x="-4" y="9.61" height="11.37" width="14.05" fill="#706f6f" />
147+
<rect x="-4" y="9.71" height="11.17" width="13.95" fill="#9d9d9c" />
148+
</g>
149+
150+
<!-- Power jack -->
151+
<g stroke-width=".254" fill="black" transform="translate(0 -4)">
152+
<path
153+
d="m-2.58 48.53v2.289c0 0.279 0.228 0.508 0.508 0.508h1.722c0.279 0 0.508-0.228 0.508-0.508v-2.289z"
154+
fill="#252728"
155+
opacity=".3"
156+
/>
157+
<path
158+
d="m11.334 42.946c0-0.558-0.509-1.016-1.132-1.016h-10.043v9.652h10.043c0.622 0 1.132-0.457 1.132-1.016z"
159+
opacity=".3"
160+
/>
161+
<path
162+
d="m-2.072 40.914c-0.279 0-0.507 0.204-0.507 0.454v8.435c0 0.279 0.228 0.507 0.507 0.507h1.722c0.279 0 0.507-0.228 0.507-0.507v-8.435c0-0.249-0.228-0.454-0.507-0.454z"
163+
/>
164+
<path
165+
d="m-2.58 48.784v1.019c0 0.279 0.228 0.508 0.508 0.508h1.722c0.279 0 0.508-0.228 0.508-0.508v-1.019z"
166+
opacity=".3"
167+
/>
168+
<path
169+
d="m11.334 43.327c0.139 0 0.254 0.114 0.254 0.254v4.064c0 0.139-0.114 0.254-0.254 0.254"
170+
/>
171+
<path
172+
d="m11.334 42.438c0-0.558-0.457-1.016-1.016-1.016h-10.16v8.382h10.16c0.558 0 1.016-0.457 1.016-1.016z"
173+
/>
174+
<path
175+
d="m10.064 49.804h-9.906v-8.382h1.880c-1.107 0-1.363 1.825-1.363 3.826 0 1.765 1.147 3.496 3.014 3.496h6.374z"
176+
opacity=".3"
177+
/>
178+
<rect x="10.064" y="41.422" width=".254" height="8.382" fill="#ffffff" opacity=".2" />
179+
<path
180+
d="m10.318 48.744v1.059c0.558 0 1.016-0.457 1.016-1.016v-0.364c0 0.313-1.016 0.320-1.016 0.320z"
181+
opacity=".3"
182+
/>
183+
</g>
184+
185+
<!-- Pin Headers -->
186+
<g transform="translate(18.4 1.07)">
187+
<rect width="${0.38 + 2.54 * 10}" height="2.54" fill="url(#pins-female)"></rect>
188+
</g>
189+
<g transform="translate(44.81 1.07)">
190+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
191+
</g>
192+
<g transform="translate(66 1.07)">
193+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
194+
</g>
195+
<g transform="translate(27.93 47.5)">
196+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
197+
</g>
198+
<g transform="translate(49.63 47.5)">
199+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
200+
</g>
201+
<g transform="translate(71.34 47.5)">
202+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
203+
</g>
204+
<g transform="translate(90.1 0.8)">
205+
<rect width="${0.38 + 2.54 * 2}" height="${2.54 * 18}" fill="url(#pins-female)"></rect>
206+
</g>
207+
208+
<!-- MCU -->
209+
<rect x="43" y="17.55" fill="#000" width="13.5" height="13.5" rx="0.5" />
210+
211+
<!-- Programming Headers -->
212+
<g transform="translate(61.5 21.09)">
213+
<rect width="4.80" height="7" fill="url(#pin-male)" />
214+
</g>
215+
216+
<!-- LEDs -->
217+
<g transform="translate(72.20 15.58)">
218+
<use xlink:href="#led-body" />
219+
${ledPower &&
220+
svg`<circle cx="1.3" cy="0.55" r="1.3" fill="#80ff80" filter="url(#ledFilter)" />`}
221+
</g>
222+
223+
<text fill="#fff">
224+
<tspan x="68" y="16.75">PWR</tspan>
225+
</text>
226+
227+
<g transform="translate(26 13.86)">
228+
<use xlink:href="#led-body" />
229+
${led13 &&
230+
svg`<circle cx="1.3" cy="0.55" r="1.3" fill="#ff8080" filter="url(#ledFilter)" />`}
231+
</g>
232+
233+
<g transform="translate(26 18.52)">
234+
<use xlink:href="#led-body" />
235+
${ledTX &&
236+
svg`<circle cx="0.975" cy="0.55" r="1.3" fill="yellow" filter="url(#ledFilter)" />`}
237+
</g>
238+
239+
<g transform="translate(26 20.75)">
240+
<use xlink:href="#led-body" />
241+
${ledRX &&
242+
svg`<circle cx="0.975" cy="0.55" r="1.3" fill="yellow" filter="url(#ledFilter)" />`}
243+
</g>
244+
245+
<text fill="#fff">
246+
<tspan x="29.4" y="15">L</tspan>
247+
<tspan x="29.4" y="19.8">TX</tspan>
248+
<tspan x="29.4" y="22">RX</tspan>
249+
<tspan x="26.5" y="20">&nbsp;</tspan>
250+
</text>
251+
252+
<!-- Pin Labels -->
253+
<rect x="28.27" y="7.6" width="31.5" height="0.16" fill="#fff"></rect>
254+
<text fill="#fff" style="font-weight: 900">
255+
<tspan x="40.84" y="9.8">PWM</tspan>
256+
</text>
257+
258+
<rect x="60.5" y="11.8" width="25.4" height="0.16" fill="#fff"></rect>
259+
<text fill="#fff" style="font-weight: 900">
260+
<tspan x="65" y="14.2">COMMUNICATION</tspan>
261+
</text>
262+
263+
<text
264+
transform="translate(22.6 3.4) rotate(270 0 0)"
265+
fill="#fff"
266+
style="font-size: 2px; text-anchor: end; font-family: monospace"
267+
>
268+
<tspan x="0" dy="2.54">AREF</tspan>
269+
<tspan x="0" dy="2.54">GND</tspan>
270+
<tspan x="0" dy="2.54">13</tspan>
271+
<tspan x="0" dy="2.54">12</tspan>
272+
<tspan x="0" dy="2.54">11</tspan>
273+
<tspan x="0" dy="2.54">10</tspan>
274+
<tspan x="0" dy="2.54">9</tspan>
275+
<tspan x="0" dy="2.54">8</tspan>
276+
<tspan x="0" dy="4.08">7</tspan>
277+
<tspan x="0" dy="2.54">6</tspan>
278+
<tspan x="0" dy="2.54">5</tspan>
279+
<tspan x="0" dy="2.54">2</tspan>
280+
<tspan x="0" dy="2.54">3</tspan>
281+
<tspan x="0" dy="2.54">2</tspan>
282+
<tspan x="0" dy="2.54">TX→ 1</tspan>
283+
<tspan x="0" dy="2.54">RX← 0</tspan>
284+
<tspan x="0" dy="3.34">TX3 14</tspan>
285+
<tspan x="0" dy="2.54">RX3 15</tspan>
286+
<tspan x="0" dy="2.54">TX2 16</tspan>
287+
<tspan x="0" dy="2.54">RX2 17</tspan>
288+
<tspan x="0" dy="2.54">TX1 18</tspan>
289+
<tspan x="0" dy="2.54">RX1 19</tspan>
290+
<tspan x="0" dy="2.54">SCL 20</tspan>
291+
<tspan x="0" dy="2.54">SDA 21</tspan>
292+
<tspan x="0" dy="2.54">&nbsp;</tspan>
293+
</text>
294+
295+
<rect x="36" y="41.46" width="12.44" height="0.16" fill="#fff"></rect>
296+
<rect x="50" y="41.46" width="39" height="0.16" fill="#fff"></rect>
297+
<text fill="#fff" style="font-weight: 900">
298+
<tspan x="39" y="40.96">POWER</tspan>
299+
<tspan x="65" y="40.96">ANALOG IN</tspan>
300+
</text>
301+
<text transform="translate(30.19 47) rotate(270 0 0)" fill="#fff" style="font-weight: 700">
302+
<tspan x="0" dy="2.54">IOREF</tspan>
303+
<tspan x="0" dy="2.54">RESET</tspan>
304+
<tspan x="0" dy="2.54">3.3V</tspan>
305+
<tspan x="0" dy="2.54">5V</tspan>
306+
<tspan x="0" dy="2.54">GND</tspan>
307+
<tspan x="0" dy="2.54">GND</tspan>
308+
<tspan x="0" dy="2.54">Vin</tspan>
309+
<tspan x="0" dy="3.74">A0</tspan>
310+
<tspan x="0" dy="2.54">A1</tspan>
311+
<tspan x="0" dy="2.54">A2</tspan>
312+
<tspan x="0" dy="2.54">A3</tspan>
313+
<tspan x="0" dy="2.54">A4</tspan>
314+
<tspan x="0" dy="2.54">A5</tspan>
315+
<tspan x="0" dy="2.54">A6</tspan>
316+
<tspan x="0" dy="2.54">A7</tspan>
317+
<tspan x="0" dy="3.74">A8</tspan>
318+
<tspan x="0" dy="2.54">A9</tspan>
319+
<tspan x="0" dy="2.54">A10</tspan>
320+
<tspan x="0" dy="2.54">A11</tspan>
321+
<tspan x="0" dy="2.54">A12</tspan>
322+
<tspan x="0" dy="2.54">A13</tspan>
323+
<tspan x="0" dy="1.84">A14</tspan>
324+
<tspan x="0" dy="1.84">A15</tspan>
325+
<tspan x="0" dy="2.54">&nbsp;</tspan>
326+
</text>
327+
328+
<!-- Logo -->
329+
<text x="51.85" y="36" style="font-size:4px;font-weight:bold;line-height:1.25;fill:#fff">
330+
Arduino MEGA
331+
</text>
332+
</svg>
333+
`;
334+
}
335+
}

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@ export { BuzzerElement } from './buzzer-element';
1717
export { RotaryDialerElement } from './rotary-dialer-element';
1818
export { ServoElement } from './servo-element';
1919
export { DHT22Element as Dht22Element } from './dht22-element';
20+
export { ArduinoMegaElement } from './arduino-mega-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { RotaryDialerElement } from './rotary-dialer-element';
1616
import { SSD1306Element } from './ssd1306-element';
1717
import { ServoElement } from './servo-element';
1818
import { DHT22Element } from './dht22-element';
19+
import { ArduinoMegaElement } from './arduino-mega-element';
1920

2021
declare global {
2122
namespace JSX {
@@ -35,6 +36,7 @@ declare global {
3536
'wokwi-rotary-dialer': Partial<RotaryDialerElement>;
3637
'wokwi-servo': Partial<ServoElement>;
3738
'wokwi-dht22': Partial<DHT22Element>;
39+
'wokwi-arduino-mega': Partial<ArduinoMegaElement>;
3840
}
3941
}
4042
}

0 commit comments

Comments
 (0)