Skip to content

Commit bcda8a5

Browse files
AriellaEAriellaE
committed
feat: add big-soung-sensor
1 parent 5353fe7 commit bcda8a5

File tree

4 files changed

+337
-0
lines changed

4 files changed

+337
-0
lines changed

‎src/big-sound-sensor-element.stories.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { html } from 'lit-html';
2+
import './big-sound-sensor-element';
3+
4+
export default {
5+
title: 'Big Sound Sensor',
6+
component: 'wokwi-big-sound-sensor',
7+
argTypes: {
8+
led1: { control: { type: 'boolean' } },
9+
led2: { control: { type: 'boolean' } },
10+
},
11+
args: {
12+
led1: false,
13+
led2: false,
14+
},
15+
};
16+
17+
const Template = ({ led1, led2 }) => html`<wokwi-big-sound-sensor
18+
.led1=${led1}
19+
.led2=${led2}
20+
></wokwi-big-sound-sensor>`;
21+
22+
export const Default = Template.bind({});

‎src/big-sound-sensor-element.ts

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { ElementPin } from '.';
3+
import { GND, VCC } from './pin';
4+
5+
@customElement('wokwi-big-sound-sensor')
6+
export class BigSoundSensorElement extends LitElement {
7+
@property() led1 = false;
8+
@property() led2 = false;
9+
10+
readonly pinInfo: ElementPin[] = [
11+
{ name: 'AOUT', y: 11, x: 0, number: 1, signals: [] },
12+
{ name: 'GND', y: 20.5, x: 0, number: 2, signals: [GND()] },
13+
{ name: 'VCC', y: 30.5, x: 0, number: 3, signals: [VCC()] },
14+
{ name: 'DOUT', y: 40.5, x: 0, number: 4, signals: [] },
15+
];
16+
17+
render() {
18+
const { led2, led1 } = this;
19+
return html`
20+
<svg
21+
width="37.056mm"
22+
height="13.346mm"
23+
clip-rule="evenodd"
24+
fill-rule="evenodd"
25+
version="1.1"
26+
viewBox="0 0 140 50.4"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<defs>
30+
<pattern id="pin-pattern" height="3.6" width="14" patternUnits="userSpaceOnUse">
31+
<path
32+
d="m5.09 1.3c0-0.618-0.502-1.12-1.12-1.12h-3.97v2.6h3.97c0.618 0 1.12-0.502 1.12-1.12z"
33+
fill="#eaecec"
34+
/>
35+
<path
36+
d="m5.09 1.3c0-0.297-0.118-0.582-0.328-0.792-0.211-0.21-0.496-0.328-0.793-0.328h-1.14v2.6h1.14c0.297 0 0.582-0.118 0.793-0.328 0.21-0.21 0.328-0.495 0.328-0.793z"
37+
fill="#adafb0"
38+
/>
39+
</pattern>
40+
<g id="header-pin">
41+
<path d="m3.4 1.8v-6.55h-6.55v6.55z" fill="#433b38" />
42+
<path
43+
d="m0 0c0.382 0 0.748-0.152 1.02-0.422 0.27-0.27 0.421-0.637 0.421-1.02s-0.151-0.748-0.421-1.02c-0.271-0.27-0.637-0.422-1.02-0.422h-26.1c-0.233 0-0.423 0.19-0.423 0.424v2.04c0 0.233 0.19 0.423 0.423 0.423h26.1z"
44+
fill="#9f9f9f"
45+
/>
46+
</g>
47+
</defs>
48+
49+
<!-- Board -->
50+
<path
51+
d="m133 0h-113v50.4h113zm-84.3 16.8c4.65 0 8.43 3.78 8.43 8.43 0 4.65-3.78 8.43-8.43 8.43s-8.43-3.78-8.43-8.43c0-4.65 3.78-8.43 8.43-8.43z"
52+
fill="#931917"
53+
/>
54+
<path
55+
d="m48.8 13.9c6.24 0 11.3 5.07 11.3 11.3 0 6.24-5.07 11.3-11.3 11.3s-11.3-5.07-11.3-11.3c0-6.24 5.07-11.3 11.3-11.3zm0 2.88c4.65 0 8.43 3.78 8.43 8.43 0 4.65-3.78 8.43-8.43 8.43s-8.43-3.78-8.43-8.43c0-4.65 3.78-8.43 8.43-8.43z"
56+
fill="#d6d6d2"
57+
/>
58+
59+
<!-- Chip -->
60+
<rect transform="translate(87,26)" width="5" height="14.5" fill="url(#pin-pattern)" />
61+
<rect
62+
transform="translate(74,40) rotate(180)"
63+
width="5"
64+
height="14.5"
65+
fill="url(#pin-pattern)"
66+
/>
67+
<rect x="73.5" y="25.2" width="13.9" height="15.6" fill="#3b3838" />
68+
<path
69+
d="m88.7 40.9v3.24h-6.63c0-1.02-0.721-1.85-1.61-1.85s-1.61 0.827-1.61 1.85h-6.62v-3.24"
70+
fill="none"
71+
stroke="#fff"
72+
stroke-width=".4px"
73+
/>
74+
<path d="m72.2 25.2v-1.74h16.5v1.74" fill="none" stroke="#fff" stroke-width=".4px" />
75+
76+
<!-- PCB pins -->
77+
<path d="m31 44.6v-38h-8.39v38z" fill="none" stroke="#fff" stroke-width=".4px" />
78+
<use xlink:href="#header-pin" x="26.6" y="12.4" />
79+
<use xlink:href="#header-pin" x="26.6" y="22.1" />
80+
<use xlink:href="#header-pin" x="26.6" y="31.9" />
81+
<use xlink:href="#header-pin" x="26.6" y="41.6" />
82+
83+
<!-- Potentiometer -->
84+
<rect x="65.3" y="2.76" width="28.2" height="14.2" fill="#4875ce" />
85+
<path
86+
d="m94.9 2.1c0-0.221-0.179-0.4-0.4-0.4h-30.1c-0.221 0-0.4 0.179-0.4 0.4v15.5c0 0.221 0.179 0.4 0.4 0.4h30.1c0.221 0 0.4-0.179 0.4-0.4zm-0.4 0h-30.1v15.5h30.1z"
87+
fill="#fff"
88+
/>
89+
<circle cx="69.9" cy="6.54" r="2.31" fill="#f1d99f" />
90+
<path
91+
d="m69.3 4.34c0.196-0.066 0.405-0.096 0.622-0.096 0.216 0 0.426 0.03 0.622 0.096v4.42c-0.196 0.066-0.406 0.096-0.622 0.096-0.217 0-0.426-0.03-0.622-0.096z"
92+
fill="#a4987a"
93+
/>
94+
95+
<!-- LED2 -->
96+
<rect
97+
x="50.5"
98+
y="1.4"
99+
width="11.5"
100+
height="4.72"
101+
fill="#171514"
102+
stroke="#fff"
103+
stroke-width=".4px"
104+
/>
105+
<rect x="51.5" y="2.12" width="9.56" height="3.28" fill="#a19e9e" />
106+
<rect x="54.3" y="2.12" width="3.98" height="3.28" fill="#f1d99f" />
107+
108+
<filter id="ledFilter" x="-0.8" y="-0.8" height="5.2" width="5.8">
109+
<feGaussianBlur stdDeviation="2" />
110+
</filter>
111+
${led2 && svg`<circle cx="56" cy="4" r="5" fill="#80ff80" filter="url(#ledFilter)" />`}
112+
113+
<!-- LED1 -->
114+
<rect
115+
x="50.5"
116+
y="44.4"
117+
width="11.5"
118+
height="4.72"
119+
fill="#171514"
120+
stroke="#fff"
121+
stroke-width=".4px"
122+
/>
123+
<rect x="51.5" y="45.1" width="9.56" height="3.28" fill="#a19e9e" />
124+
<rect x="54.3" y="45.1" width="3.98" height="3.28" fill="#f1d99f" />
125+
126+
${led1 && svg`<circle cx="56" cy="47" r="5" fill="#80ff80" filter="url(#ledFilter)" />`}
127+
128+
<!-- Resistors -->
129+
<rect
130+
x="32.3"
131+
y="1.4"
132+
width="11.4"
133+
height="4.72"
134+
fill="#171514"
135+
stroke="#fff"
136+
stroke-width=".4px"
137+
/>
138+
<rect x="33.2" y="2.12" width="9.56" height="3.28" fill="#a19e9e" />
139+
<rect x="36" y="2.52" width="3.97" height="2.47" fill="#171514" />
140+
<rect
141+
x="97.1"
142+
y="1.92"
143+
width="11.4"
144+
height="4.72"
145+
fill="#171514"
146+
stroke="#fff"
147+
stroke-width=".4px"
148+
/>
149+
<rect x="98.1" y="2.64" width="9.56" height="3.28" fill="#a19e9e" />
150+
<rect x="101" y="3.05" width="3.97" height="2.47" fill="#171514" />
151+
<rect
152+
x="97.1"
153+
y="43.9"
154+
width="11.4"
155+
height="4.72"
156+
fill="#171514"
157+
stroke="#fff"
158+
stroke-width=".4px"
159+
/>
160+
<rect x="98.1" y="44.6" width="9.56" height="3.28" fill="#a19e9e" />
161+
<rect x="101" y="45" width="3.97" height="2.47" fill="#171514" />
162+
<rect
163+
x="97.1"
164+
y="9"
165+
width="11.4"
166+
height="4.72"
167+
fill="#171514"
168+
stroke="#fff"
169+
stroke-width=".4px"
170+
/>
171+
<rect x="98.1" y="9.72" width="9.56" height="3.28" fill="#a19e9e" />
172+
<rect x="101" y="10.1" width="3.97" height="2.47" fill="#171514" />
173+
<rect
174+
x="97.1"
175+
y="36.8"
176+
width="11.4"
177+
height="4.72"
178+
fill="#171514"
179+
stroke="#fff"
180+
stroke-width=".4px"
181+
/>
182+
<rect x="98.1" y="37.6" width="9.56" height="3.28" fill="#a19e9e" />
183+
<rect x="101" y="38" width="3.97" height="2.47" fill="#171514" />
184+
<rect
185+
x="32.3"
186+
y="44.4"
187+
width="11.4"
188+
height="4.72"
189+
fill="#171514"
190+
stroke="#fff"
191+
stroke-width=".4px"
192+
/>
193+
<rect x="33.2" y="45.1" width="9.56" height="3.28" fill="#a19e9e" />
194+
<rect x="36" y="45.5" width="3.97" height="2.47" fill="#171514" />
195+
196+
<!-- Texts -->
197+
<text fill="#ffffff" font-family="sans-serif" font-size="3.72px">
198+
<tspan x="33.049" y="12.085">AO</tspan>
199+
<tspan x="33.049" y="41.951">DO</tspan>
200+
<tspan x="33.049" y="22.067">G</tspan>
201+
<tspan x="32.964001" y="32.418999" font-size="5.25px">
202+
+
203+
</tspan>
204+
</text>
205+
206+
<text
207+
transform="rotate(90 92.4 -43.2)"
208+
fill="#ffffff"
209+
font-family="sans-serif"
210+
font-size="3.72px"
211+
x="137.13"
212+
y="3.60"
213+
>
214+
L2
215+
</text>
216+
217+
<text
218+
transform="rotate(90 92.4 -.394)"
219+
fill="#ffffff"
220+
font-family="sans-serif"
221+
font-size="3.72px"
222+
x="137.13"
223+
y="46.38"
224+
>
225+
L1
226+
</text>
227+
228+
<!-- Microphone -->
229+
<path
230+
d="m110 24.7c0-1.29-1.05-2.34-2.34-2.34h-1e-3c-1.29 0-2.34 1.05-2.34 2.34v0.989c0 1.3 1.05 2.34 2.34 2.34h1e-3c1.29 0 2.34-1.05 2.34-2.34v-0.989z"
231+
fill="#f8f3e9"
232+
/>
233+
<circle cx="108" cy="25.2" r="1.14" fill="#3b3838" />
234+
<path
235+
d="m115 6.29c1.29 0 2.34-1.05 2.34-2.34v-1e-3c0-1.29-1.05-2.34-2.34-2.34h-0.99c-1.29 0-2.34 1.05-2.34 2.34v1e-3c0 1.29 1.05 2.34 2.34 2.34h0.99z"
236+
fill="#f8f3e9"
237+
/>
238+
<path
239+
d="m116 3.95c0 0.631-0.513 1.14-1.14 1.14s-1.14-0.512-1.14-1.14c0-0.632 0.512-1.14 1.14-1.14s1.14 0.512 1.14 1.14z"
240+
fill="#3b3838"
241+
/>
242+
<path
243+
d="m118 27.8c0-0.622-0.247-1.22-0.686-1.66-0.44-0.44-1.04-0.687-1.66-0.687-0.621 0-1.22 0.247-1.66 0.687-0.44 0.439-0.687 1.04-0.687 1.66v3.03c0 0.622 0.247 1.22 0.687 1.66 0.439 0.439 1.04 0.686 1.66 0.686 0.622 0 1.22-0.247 1.66-0.686 0.439-0.44 0.686-1.04 0.686-1.66z"
244+
fill="#f8f3e9"
245+
/>
246+
<circle cx="115" cy="29.3" r="1.14" fill="#3b3838" />
247+
<path
248+
d="m129 47.7c0.621 0 1.22-0.247 1.66-0.686 0.439-0.44 0.686-1.04 0.686-1.66 0-0.621-0.247-1.22-0.686-1.66-0.44-0.44-1.04-0.687-1.66-0.687h-3.03c-0.621 0-1.22 0.247-1.66 0.687-0.44 0.439-0.687 1.04-0.687 1.66 0 0.622 0.247 1.22 0.687 1.66 0.439 0.439 1.04 0.686 1.66 0.686z"
249+
fill="#f8f3e9"
250+
/>
251+
<path
252+
d="m128 45.4c0 0.631-0.513 1.14-1.14 1.14s-1.14-0.513-1.14-1.14 0.512-1.14 1.14-1.14 1.14 0.512 1.14 1.14z"
253+
fill="#3b3838"
254+
/>
255+
<path
256+
d="m129 6.29c0.621 0 1.22-0.247 1.66-0.687 0.439-0.439 0.686-1.04 0.686-1.66v-1e-3c0-0.621-0.247-1.22-0.686-1.66-0.44-0.439-1.04-0.686-1.66-0.686h-3.03c-0.621 0-1.22 0.247-1.66 0.686-0.44 0.44-0.687 1.04-0.687 1.66v1e-3c0 0.621 0.247 1.22 0.687 1.66 0.439 0.44 1.04 0.687 1.66 0.687z"
257+
fill="#f8f3e9"
258+
/>
259+
<path
260+
d="m128 3.95c0 0.631-0.513 1.14-1.14 1.14s-1.14-0.512-1.14-1.14c0-0.632 0.512-1.14 1.14-1.14s1.14 0.512 1.14 1.14z"
261+
fill="#3b3838"
262+
/>
263+
<path
264+
d="m117 41.4c0.621 0 1.22-0.247 1.66-0.686 0.439-0.44 0.686-1.04 0.686-1.66s-0.247-1.22-0.686-1.66c-0.44-0.44-1.04-0.687-1.66-0.687h-3.03c-0.621 0-1.22 0.247-1.66 0.687-0.44 0.439-0.687 1.04-0.687 1.66s0.247 1.22 0.687 1.66c0.439 0.439 1.04 0.686 1.66 0.686z"
265+
fill="#f8f3e9"
266+
/>
267+
<path
268+
d="m114 39.1c0 0.631-0.512 1.14-1.14 1.14-0.631 0-1.14-0.513-1.14-1.14s0.512-1.14 1.14-1.14c0.632 0 1.14 0.512 1.14 1.14z"
269+
fill="#3b3838"
270+
/>
271+
<path
272+
d="m117 9.6c0.621 0 1.22 0.247 1.66 0.686 0.439 0.44 0.686 1.04 0.686 1.66 0 0.621-0.247 1.22-0.686 1.66-0.44 0.44-1.04 0.687-1.66 0.687h-3.03c-0.621 0-1.22-0.247-1.66-0.687-0.44-0.439-0.687-1.04-0.687-1.66 0-0.622 0.247-1.22 0.687-1.66 0.439-0.439 1.04-0.686 1.66-0.686z"
273+
fill="#f8f3e9"
274+
/>
275+
<path
276+
d="m114 11.9c0-0.631-0.512-1.14-1.14-1.14-0.631 0-1.14 0.513-1.14 1.14s0.512 1.14 1.14 1.14c0.632 0 1.14-0.512 1.14-1.14z"
277+
fill="#3b3838"
278+
/>
279+
<path
280+
d="m118 19.2c0-0.621-0.247-1.22-0.686-1.66-0.44-0.44-1.04-0.687-1.66-0.687-0.621 0-1.22 0.247-1.66 0.687-0.44 0.439-0.687 1.04-0.687 1.66v3.03c0 0.621 0.247 1.22 0.687 1.66 0.439 0.439 1.04 0.686 1.66 0.686 0.622 0 1.22-0.247 1.66-0.686 0.439-0.44 0.686-1.04 0.686-1.66z"
281+
fill="#f8f3e9"
282+
/>
283+
<circle cx="115" cy="20.7" r="1.14" fill="#3b3838" />
284+
<path
285+
d="m139 9.6h-16.2c-0.391 0-0.766 0.155-1.04 0.431-0.277 0.277-0.432 0.652-0.432 1.04v28.8c0 0.391 0.155 0.766 0.432 1.04 0.276 0.277 0.651 0.432 1.04 0.432h16.2z"
286+
fill="#e1e0da"
287+
/>
288+
<rect x="139" y="9.6" width="1.55" height="31.8" fill="#3b3838" />
289+
<path
290+
d="m121 29.3 17.7-3.26v-16.5h-16.2c-0.391 0-0.766 0.155-1.04 0.431-0.277 0.277-0.432 0.652-0.432 1.04z"
291+
fill="#f3f0f4"
292+
/>
293+
<path
294+
d="m121 28.5h-4.93c-0.21 0-0.411 0.083-0.56 0.232-0.148 0.148-0.231 0.349-0.231 0.559v0.022c0 0.21 0.083 0.411 0.231 0.559 0.149 0.149 0.35 0.232 0.56 0.232h4.93z"
295+
fill="#afafaf"
296+
/>
297+
<path
298+
d="m121 20h-4.93c-0.21 0-0.411 0.084-0.56 0.232-0.148 0.148-0.231 0.35-0.231 0.559v0.022c0 0.21 0.083 0.411 0.231 0.559 0.149 0.149 0.35 0.232 0.56 0.232h4.93z"
299+
fill="#afafaf"
300+
/>
301+
<path
302+
d="m115 6.29c1.29 0 2.34-1.05 2.34-2.34v-1e-3c0-1.29-1.05-2.34-2.34-2.34h-0.99c-1.29 0-2.34 1.05-2.34 2.34v1e-3c0 1.29 1.05 2.34 2.34 2.34h0.99z"
303+
fill="#f8f3e9"
304+
/>
305+
<path
306+
d="m116 3.95c0 0.631-0.513 1.14-1.14 1.14s-1.14-0.512-1.14-1.14c0-0.632 0.512-1.14 1.14-1.14s1.14 0.512 1.14 1.14z"
307+
fill="#3b3838"
308+
/>
309+
</svg>
310+
`;
311+
}
312+
}

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,4 @@ export { GasSensorElement } from './gas-sensor-element';
3737
export { FranzininhoElement } from './franzininho-element';
3838
export { NanoRP2040ConnectElement } from './nano-rp2040-connect-element';
3939
export { SmallSoundSensorElement } from './small-sound-sensor-element';
40+
export { BigSoundSensorElement } from './big-sound-sensor-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { GasSensorElement } from './gas-sensor-element';
3636
import { FranzininhoElement } from './franzininho-element';
3737
import { NanoRP2040ConnectElement } from './nano-rp2040-connect-element';
3838
import { SmallSoundSensorElement } from './small-sound-sensor-element';
39+
import { BigSoundSensorElement } from './big-sound-sensor-element';
3940

4041
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
4142

@@ -77,6 +78,7 @@ declare global {
7778
'wokwi-franzininho': WokwiElement<FranzininhoElement>;
7879
'wokwi-nano-rp2040-connect': WokwiElement<NanoRP2040ConnectElement>;
7980
'wokwi-small-sound-sensor': WokwiElement<SmallSoundSensorElement>;
81+
'wokwi-big-sound-sensor': WokwiElement<BigSoundSensorElement>;
8082
}
8183
}
8284
}

0 commit comments

Comments
 (0)