Skip to content

Commit 438c7ec

Browse files
AriellaEurish
AriellaE
authored and
urish
committed
feat: add small sound sensor
1 parent 41e6914 commit 438c7ec

File tree

4 files changed

+291
-0
lines changed

4 files changed

+291
-0
lines changed

‎src/index.ts

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

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { FlameSensorElement } from './flame-sensor-element';
3535
import { GasSensorElement } from './gas-sensor-element';
3636
import { FranzininhoElement } from './franzininho-element';
3737
import { NanoRP2040ConnectElement } from './nano-rp2040-connect-element';
38+
import { SmallSoundSensorElement } from './small-sound-sensor-element';
3839

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

@@ -75,6 +76,7 @@ declare global {
7576
'wokwi-gas-sensor': WokwiElement<GasSensorElement>;
7677
'wokwi-franzininho': WokwiElement<FranzininhoElement>;
7778
'wokwi-nano-rp2040-connect': WokwiElement<NanoRP2040ConnectElement>;
79+
'wokwi-small-sound-sensor': WokwiElement<SmallSoundSensorElement>;
7880
}
7981
}
8082
}

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

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

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

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { ElementPin } from '.';
3+
import { VCC, GND } from './pin';
4+
5+
@customElement('wokwi-small-sound-sensor')
6+
export class SmallSoundSensorElement extends LitElement {
7+
@property() ledPower = false;
8+
@property() ledSignal = 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 { ledPower, ledSignal } = this;
19+
return html`
20+
<svg
21+
width="35.211mm"
22+
height="13.346mm"
23+
version="1.1"
24+
viewBox="0 0 133 50.4"
25+
xmlns="http://www.w3.org/2000/svg"
26+
>
27+
<defs>
28+
<pattern id="pin-pattern" height="3.6" width="14" patternUnits="userSpaceOnUse">
29+
<path
30+
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"
31+
fill="#eaecec"
32+
/>
33+
<path
34+
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"
35+
fill="#adafb0"
36+
/>
37+
</pattern>
38+
<g id="header-pin">
39+
<path d="m3.4 1.8v-6.55h-6.55v6.55z" fill="#433b38" />
40+
<path
41+
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"
42+
fill="#9f9f9f"
43+
/>
44+
</g>
45+
</defs>
46+
47+
<!-- Board -->
48+
<path
49+
d="m133 8.69v-8.69h-113v50.4h113v-8.69h-10.9c-0.444 0-0.804-0.36-0.804-0.804v-31.5c0-0.444 0.36-0.804 0.804-0.804zm-84.3 8.1c4.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"
50+
fill="#931917"
51+
/>
52+
53+
<!-- Chip -->
54+
<rect transform="translate(87,26)" width="5" height="14.5" fill="url(#pin-pattern)" />
55+
<rect
56+
transform="translate(74,40) rotate(180)"
57+
width="5"
58+
height="14.5"
59+
fill="url(#pin-pattern)"
60+
/>
61+
62+
<rect x="73.5" y="25.2" width="13.9" height="15.6" fill="#3b3838" />
63+
<path
64+
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"
65+
fill="none"
66+
stroke="#fff"
67+
stroke-width=".4px"
68+
/>
69+
<path d="m72.2 25.2v-1.74h16.5v1.74" fill="none" stroke="#fff" stroke-width=".4px" />
70+
71+
<!-- PCB pins -->
72+
<path d="m31 44.6v-38h-8.39v38z" fill="none" stroke="#fff" stroke-width=".4px" />
73+
<use xlink:href="#header-pin" x="26.6" y="12.4" />
74+
<use xlink:href="#header-pin" x="26.6" y="22.1" />
75+
<use xlink:href="#header-pin" x="26.6" y="31.9" />
76+
<use xlink:href="#header-pin" x="26.6" y="41.6" />
77+
78+
<path
79+
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"
80+
fill="#d6d6d2"
81+
/>
82+
<rect x="65.3" y="2.76" width="28.2" height="14.2" fill="#4875ce" />
83+
<path
84+
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"
85+
fill="#fff"
86+
/>
87+
<circle cx="69.9" cy="6.54" r="2.31" fill="#f1d99f" />
88+
<path
89+
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"
90+
fill="#a4987a"
91+
/>
92+
93+
<!-- LEDs -->
94+
<rect
95+
x="50.5"
96+
y="1.4"
97+
width="11.5"
98+
height="4.72"
99+
fill="#171514"
100+
stroke="#fff"
101+
stroke-width=".4px"
102+
/>
103+
<rect x="51.5" y="2.12" width="9.56" height="3.28" fill="#a19e9e" />
104+
<rect x="54.3" y="2.12" width="3.98" height="3.28" fill="#f1d99f" />
105+
106+
<filter id="ledFilter" x="-0.8" y="-0.8" height="5.2" width="5.8">
107+
<feGaussianBlur stdDeviation="2" />
108+
</filter>
109+
${ledPower && svg`<circle cx="56" cy="4" r="7" fill="#80ff80" filter="url(#ledFilter)" />`}
110+
111+
<rect
112+
x="50.5"
113+
y="44.4"
114+
width="11.5"
115+
height="4.72"
116+
fill="#171514"
117+
stroke="#fff"
118+
stroke-width=".4px"
119+
/>
120+
<rect x="51.5" y="45.1" width="9.56" height="3.28" fill="#a19e9e" />
121+
<rect x="54.3" y="45.1" width="3.98" height="3.28" fill="#f1d99f" />
122+
123+
${ledSignal &&
124+
svg`<circle cx="56" cy="47" r="7" fill="#80ff80" filter="url(#ledFilter)" />`}
125+
126+
<!-- Resistors -->
127+
<rect
128+
x="32.3"
129+
y="1.4"
130+
width="11.4"
131+
height="4.72"
132+
fill="#171514"
133+
stroke="#fff"
134+
stroke-width=".4px"
135+
/>
136+
<rect x="33.2" y="2.12" width="9.56" height="3.28" fill="#a19e9e" />
137+
<rect x="36" y="2.52" width="3.97" height="2.47" fill="#171514" />
138+
<rect
139+
x="97.1"
140+
y="1.92"
141+
width="11.4"
142+
height="4.72"
143+
fill="#171514"
144+
stroke="#fff"
145+
stroke-width=".4px"
146+
/>
147+
<rect x="98.1" y="2.64" width="9.56" height="3.28" fill="#a19e9e" />
148+
<rect x="101" y="3.05" width="3.97" height="2.47" fill="#171514" />
149+
<rect
150+
x="97.1"
151+
y="43.9"
152+
width="11.4"
153+
height="4.72"
154+
fill="#171514"
155+
stroke="#fff"
156+
stroke-width=".4px"
157+
/>
158+
<rect x="98.1" y="44.6" width="9.56" height="3.28" fill="#a19e9e" />
159+
<rect x="101" y="45" width="3.97" height="2.47" fill="#171514" />
160+
<rect
161+
x="97.1"
162+
y="9"
163+
width="11.4"
164+
height="4.72"
165+
fill="#171514"
166+
stroke="#fff"
167+
stroke-width=".4px"
168+
/>
169+
<rect x="98.1" y="9.72" width="9.56" height="3.28" fill="#a19e9e" />
170+
<rect x="101" y="10.1" width="3.97" height="2.47" fill="#171514" />
171+
<rect
172+
x="97.1"
173+
y="36.8"
174+
width="11.4"
175+
height="4.72"
176+
fill="#171514"
177+
stroke="#fff"
178+
stroke-width=".4px"
179+
/>
180+
<rect x="98.1" y="37.6" width="9.56" height="3.28" fill="#a19e9e" />
181+
<rect x="101" y="38" width="3.97" height="2.47" fill="#171514" />
182+
<rect
183+
x="32.3"
184+
y="44.4"
185+
width="11.4"
186+
height="4.72"
187+
fill="#171514"
188+
stroke="#fff"
189+
stroke-width=".4px"
190+
/>
191+
<rect x="33.2" y="45.1" width="9.56" height="3.28" fill="#a19e9e" />
192+
<rect x="36" y="45.5" width="3.97" height="2.47" fill="#171514" />
193+
194+
<text fill="#ffffff" font-family="sans-serif" font-size="3.72px">
195+
<tspan x="33.049" y="12.085">AO</tspan>
196+
<tspan x="33.049" y="41.951">DO</tspan>
197+
<tspan x="33.049" y="22.067">G</tspan>
198+
<tspan x="32.964001" y="32.418999" font-size="5.25px">
199+
+
200+
</tspan>
201+
<tspan x="52.675778" y="9.31008">
202+
PWR
203+
</tspan>
204+
<tspan x="52.675778" y="13.100851">
205+
LED
206+
</tspan>
207+
<tspan x="52.675778" y="40">
208+
DO
209+
</tspan>
210+
<tspan x="52.675778" y="43.4">
211+
LED
212+
</tspan>
213+
</text>
214+
215+
<path
216+
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"
217+
fill="#f8f3e9"
218+
/>
219+
<circle cx="108" cy="25.2" r="1.14" fill="#3b3838" />
220+
<path
221+
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"
222+
fill="#f8f3e9"
223+
/>
224+
<path
225+
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"
226+
fill="#3b3838"
227+
/>
228+
<path
229+
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"
230+
fill="#f8f3e9"
231+
/>
232+
<path
233+
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"
234+
fill="#3b3838"
235+
/>
236+
<path
237+
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"
238+
fill="#f8f3e9"
239+
/>
240+
<path
241+
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"
242+
fill="#3b3838"
243+
/>
244+
<path
245+
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"
246+
fill="#dddcdb"
247+
/>
248+
<path
249+
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"
250+
fill="#f8f3e9"
251+
/>
252+
<path
253+
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"
254+
fill="#3b3838"
255+
/>
256+
<circle cx="122" cy="23.7" r="11.3" fill="#d6d6d2" />
257+
<circle cx="122" cy="23.7" r="10.2" fill="#3b3838" />
258+
<path
259+
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"
260+
fill="#3b3838"
261+
/>
262+
</svg>
263+
`;
264+
}
265+
}

0 commit comments

Comments
 (0)