Skip to content

Commit f2d3fde

Browse files
urishurish
committed
feat(uno): add Arduino Uno element
1 parent a498608 commit f2d3fde

File tree

2 files changed

+167
-0
lines changed

2 files changed

+167
-0
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { withKnobs, boolean } from '@storybook/addon-knobs';
2+
import { storiesOf } from '@storybook/web-components';
3+
import { html } from 'lit-html';
4+
import './arduino-uno-element';
5+
6+
storiesOf('Arduino Uno', module)
7+
.addDecorator(withKnobs)
8+
.add(
9+
'Uno R3',
10+
() => html`
11+
<wokwi-arduino-uno led=${boolean('LED', false)}></wokwi-7segment>
12+
`
13+
);

‎src/arduino-uno-element.ts‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { customElement, html, LitElement, property } from 'lit-element';
2+
3+
@customElement('wokwi-arduino-uno')
4+
export class ArduinoUnoElement extends LitElement {
5+
@property() led = false;
6+
7+
render() {
8+
return html`
9+
<svg
10+
width="72.58mm"
11+
height="53.34mm"
12+
clip-rule="evenodd"
13+
fill-rule="evenodd"
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
stroke-width="0"
17+
version="1.1"
18+
viewBox="-4 0 72.58 53.34"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<filter id="ledFilter" x="-0.8" y="-0.8" height="2.2" width="2.8">
22+
<feGaussianBlur stdDeviation="0.5" />
23+
</filter>
24+
25+
<pattern id="pins" width="2.54" height="2.54" patternUnits="userSpaceOnUse">
26+
<rect x="0" y="0" width="2.54" height="2.54" fill="#333"></rect>
27+
<rect x="1.079" y="0.896" width="0.762" height="0.762" style="fill: #191919"></rect>
28+
<path
29+
transform="translate(1.079, 1.658) rotate(180 0 0)"
30+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
31+
style="opacity: 0.25"
32+
></path>
33+
<path
34+
transform="translate(1.841, 1.658) rotate(90 0 0)"
35+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
36+
style="opacity: 0.3; fill: #fff"
37+
></path>
38+
<path
39+
transform="translate(1.841, 0.896)"
40+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
41+
style="opacity: 0.15; fill: #fff"
42+
></path>
43+
<path
44+
transform="translate(1.079, 0.896) rotate(270 0 0)"
45+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
46+
style="opacity: 0.35"
47+
></path>
48+
</pattern>
49+
50+
<pattern id="mcu-leads" width="2.54" height="0.508" patternUnits="userSpaceOnUse">
51+
<path
52+
d="M 0.254,0 C 0.114,0 0,0.114 0,0.254 v 0 c 0,0.139 0,0.253 0,0.253 h 1.523 c 0,0 0,-0.114 0,-0.253 v 0 C 1.523,0.114 1.409,0 1.269,0 Z"
53+
fill="#ddd"
54+
/>
55+
</pattern>
56+
57+
<!-- PCB -->
58+
<path
59+
d="m0.999 0a1 1 0 0 0-0.999 0.999v51.34a1 1 0 0 0 0.999 0.999h64.04a1 1 0 0 0 0.999-0.999v-1.54l2.539-2.539v-32.766l-2.539-2.539v-11.43l-1.524-1.523zm14.078 0.835h0.325l0.212 0.041h0l0.105 0.021 0.300 0.124 0.270 0.180 0.229 0.229 0.180 0.270 0.017 0.042 0.097 0.234 0.01 0.023 0.050 0.252 0.013 0.066v0.325l-0.063 0.318-0.040 0.097-0.083 0.202-0 0.001-0.180 0.270-0.229 0.229-0.270 0.180-0.300 0.124-0.106 0.020-0.212 0.042h-0.325l-0.212-0.042-0.106-0.020-0.300-0.124-0.270-0.180-0.229-0.229-0.180-0.270-0 -0.001-0.083-0.202-0.040-0.097-0.063-0.318v-0.325l0.013-0.066 0.050-0.252 0.01-0.023 0.097-0.234 0.017-0.042 0.180-0.270 0.229-0.229 0.270-0.180 0.300-0.124 0.105-0.021zm50.799 15.239h0.325l0.212 0.042 0.105 0.021 0.300 0.124 0.270 0.180 0.229 0.229 0.180 0.270 0.014 0.035 0.110 0.264 0.01 0.051 0.053 0.267v0.325l-0.03 0.152-0.033 0.166-0.037 0.089-0.079 0.191-0 0.020-0.180 0.270-0.229 0.229-0.270 0.180-0.071 0.029-0.228 0.094-0.106 0.021-0.212 0.042h-0.325l-0.212-0.042-0.106-0.021-0.228-0.094-0.071-0.029-0.270-0.180-0.229-0.229-0.180-0.270-0 -0.020-0.079-0.191-0.036-0.089-0.033-0.166-0.030-0.152v-0.325l0.053-0.267 0.010-0.051 0.109-0.264 0.014-0.035 0.180-0.270 0.229-0.229 0.270-0.180 0.300-0.124 0.105-0.021zm0 27.94h0.325l0.180 0.036 0.138 0.027 0.212 0.087 0.058 0.024 0.029 0.012 0.270 0.180 0.229 0.229 0.180 0.270 0.124 0.300 0.063 0.319v0.325l-0.063 0.318-0.124 0.300-0.180 0.270-0.229 0.229-0.270 0.180-0.300 0.124-0.106 0.021-0.212 0.042h-0.325l-0.212-0.042-0.105-0.021-0.300-0.124-0.270-0.180-0.229-0.229-0.180-0.270-0.124-0.300-0.063-0.318v-0.325l0.063-0.319 0.124-0.300 0.180-0.270 0.229-0.229 0.270-0.180 0.029-0.012 0.058-0.024 0.212-0.087 0.137-0.027zm-52.07 5.080h0.325l0.212 0.041 0.106 0.021 0.300 0.124 0.270 0.180 0.229 0.229 0.121 0.182 0.058 0.087h0l0.114 0.275 0.01 0.023 0.063 0.318v0.325l-0.035 0.179-0.027 0.139-0.01 0.023-0.114 0.275h-0l-0.180 0.270-0.229 0.229-0.270 0.180-0.300 0.124-0.106 0.020-0.212 0.042h-0.325l-0.212-0.042-0.105-0.020-0.300-0.124-0.270-0.180-0.229-0.229-0.180-0.270-0.114-0.275-0.01-0.023-0.027-0.139-0.036-0.179v-0.325l0.063-0.318 0.01-0.023 0.114-0.275 0.058-0.087 0.121-0.182 0.229-0.229 0.270-0.180 0.300-0.124 0.105-0.021z"
60+
fill="#2b6b99"
61+
/>
62+
63+
<!-- USB Connector -->
64+
<rect width="11" height="11.93" x="-0.05" y="9.72" rx="0.2" ry="0.2" opacity="0.235" />
65+
<g style="fill:#b3b2b2;stroke:#b3b2b2;stroke-width:0.010">
66+
<ellipse cx="3.84" cy="9.56" rx="1.12" ry="1.03" />
67+
<ellipse cx="3.84" cy="21.04" rx="1.12" ry="1.03" />
68+
<rect x="-4" y="9.37" height="11.85" width="14.46" />
69+
<rect x="-4" y="9.61" height="11.37" width="14.05" fill="#706f6f" />
70+
<rect x="-4" y="9.71" height="11.17" width="13.95" fill="#9d9d9c" />
71+
</g>
72+
73+
<!-- Power jack -->
74+
<g stroke-width=".254" fill="black">
75+
<path
76+
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"
77+
fill="#252728"
78+
opacity=".3"
79+
/>
80+
<path
81+
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"
82+
opacity=".3"
83+
/>
84+
<path
85+
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"
86+
/>
87+
<path
88+
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"
89+
opacity=".3"
90+
/>
91+
<path
92+
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"
93+
/>
94+
<path
95+
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"
96+
/>
97+
<path
98+
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"
99+
opacity=".3"
100+
/>
101+
<rect x="10.064" y="41.422" width=".254" height="8.382" fill="#ffffff" opacity=".2" />
102+
<path
103+
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"
104+
opacity=".3"
105+
/>
106+
</g>
107+
108+
<!-- Pin Headers -->
109+
<g transform="translate(17.497, 1.27)">
110+
<rect width="${0.38 + 2.54 * 10}" height="2.54" fill="url(#pins)"></rect>
111+
</g>
112+
<g transform="translate(44.421, 1.27)">
113+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins)"></rect>
114+
</g>
115+
<g transform="translate(26.641, 49.53)">
116+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins)"></rect>
117+
</g>
118+
<g transform="translate(49.501, 49.53)">
119+
<rect width="${0.38 + 2.54 * 6}" height="2.54" fill="url(#pins)"></rect>
120+
</g>
121+
122+
<!-- MCU -->
123+
<g>
124+
<path
125+
d="m64.932 41.627h-36.72c-0.209 0-0.379-0.170-0.379-0.379v-8.545c0-0.209 0.170-0.379 0.379-0.379h36.72c0.209 0 0.379 0.170 0.379 0.379v8.545c0 0.209-0.169 0.379-0.379 0.379z"
126+
fill="#292c2d"
127+
/>
128+
<path
129+
d="m65.019 40.397c0 0.279-0.228 0.508-0.508 0.508h-35.879c-0.279 0-0.507 0.025-0.507-0.254v-6.338c0-0.279 0.228-0.508 0.507-0.508h35.879c0.279 0 0.508 0.228 0.508 0.508z"
130+
opacity=".3"
131+
/>
132+
<path
133+
d="m65.019 40.016c0 0.279-0.228 0.508-0.508 0.508h-35.879c-0.279 0-0.507 0.448-0.507-0.508v-6.084c0-0.279 0.228-0.508 0.507-0.508h35.879c0.279 0 0.508 0.228 0.508 0.508z"
134+
fill="#3c4042"
135+
/>
136+
<rect
137+
transform="translate(29.205, 32.778)"
138+
fill="url(#mcu-leads)"
139+
height="0.508"
140+
width="35.56"
141+
></rect>
142+
<rect
143+
transform="translate(29.205, 41.159) scale(1 -1)"
144+
fill="url(#mcu-leads)"
145+
height="0.508"
146+
width="35.56"
147+
></rect>
148+
<circle cx="33.269" cy="36.847" r="1.016" fill="#252728" />
149+
<circle cx="59.939" cy="36.847" r="1.016" fill="#252728" />
150+
</g>
151+
</svg>
152+
`;
153+
}
154+
}

0 commit comments

Comments
 (0)