Skip to content

Commit 5d13dc0

Browse files
AriellaEAriellaE
committed
feat: add photoresistor sensor element
1 parent eb00a97 commit 5d13dc0

File tree

4 files changed

+227
-0
lines changed

4 files changed

+227
-0
lines changed

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,4 @@ export { BigSoundSensorElement } from './big-sound-sensor-element';
4141
export { MPU6050Element } from './mpu6050-element';
4242
export { ESP32DevkitV1Element } from './esp32-devkit-v1-element';
4343
export { KY040Element } from './ky-040-element';
44+
export { PhotoresistorSensorElement } from './photoresistor-sensor-element';

‎src/photoresistor-sensor-element.ts‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { ElementPin } from '.';
3+
import { VCC, GND } from './pin';
4+
5+
@customElement('wokwi-photoresistor-sensor')
6+
export class PhotoresistorSensorElement extends LitElement {
7+
@property() ledDO = false;
8+
@property() ledPower = false;
9+
10+
readonly pinInfo: ElementPin[] = [
11+
{ name: 'VCC', x: 172, y: 16, signals: [VCC()] },
12+
{ name: 'GND', x: 172, y: 26, signals: [GND()] },
13+
{ name: 'DO', x: 172, y: 35.8, signals: [] },
14+
{ name: 'A0', x: 172, y: 45.5, signals: [] },
15+
];
16+
17+
render() {
18+
const { ledPower, ledDO } = this;
19+
return html`
20+
<svg
21+
width="45.95mm"
22+
height="16.267mm"
23+
version="1.1"
24+
viewBox="0 0 174 61.5"
25+
xmlns="http://www.w3.org/2000/svg"
26+
xmlns:xlink="http://www.w3.org/1999/xlink"
27+
>
28+
<!-- board -->
29+
<path
30+
d="m153 0h-136v61.5h136zm-129 52c1.9 0 3.44 1.5 3.44 3.34s-1.54 3.34-3.44 3.34-3.44-1.5-3.44-3.34 1.54-3.34 3.44-3.34zm98.3-29.8c4.17 0 7.55 3.38 7.55 7.55 0 4.17-3.38 7.55-7.55 7.55s-7.55-3.38-7.55-7.55c0-4.17 3.38-7.55 7.55-7.55zm-98.3-19.4c1.9 0 3.44 1.5 3.44 3.34 0 1.84-1.54 3.34-3.44 3.34s-3.44-1.5-3.44-3.34c0-1.84 1.54-3.34 3.44-3.34z"
31+
fill="#1c2546"
32+
/>
33+
34+
<!--Photo sensor-->
35+
<rect
36+
x="18.9"
37+
y="20.1"
38+
width="11.2"
39+
height="22.2"
40+
fill="none"
41+
stroke="#fff"
42+
stroke-width="1.08px"
43+
/>
44+
<circle cx="24.5" cy="25.6" r="3.14" fill="#dae3eb" />
45+
<circle cx="24.5" cy="36.8" r="3.14" fill="#dae3eb" />
46+
<path
47+
d="m24.5 25.7c0-0.199-0.079-0.39-0.22-0.53-0.14-0.141-0.331-0.22-0.529-0.22h-23c-0.199 0-0.389 0.079-0.53 0.22-0.14 0.14-0.219 0.331-0.219 0.53 0 0.198 0.079 0.389 0.219 0.53 0.141 0.14 0.331 0.219 0.53 0.219h23c0.198 0 0.389-0.079 0.529-0.219 0.141-0.141 0.22-0.332 0.22-0.53z"
48+
fill="#a8b6ba"
49+
/>
50+
<path
51+
d="m24.5 36.7c0-0.198-0.079-0.389-0.22-0.53-0.14-0.14-0.331-0.219-0.529-0.219h-23c-0.199 0-0.389 0.079-0.53 0.219-0.14 0.141-0.219 0.332-0.219 0.53 0 0.199 0.079 0.39 0.219 0.53 0.141 0.141 0.331 0.22 0.53 0.22h23c0.198 0 0.389-0.079 0.529-0.22 0.141-0.14 0.22-0.331 0.22-0.53z"
52+
fill="#a8b6ba"
53+
/>
54+
<path
55+
d="m8.64 22.8c0-0.375-0.304-0.679-0.679-0.679h-6.14c-0.375 0-0.679 0.304-0.679 0.679v16.8c0 0.375 0.304 0.679 0.679 0.679h6.14c0.375 0 0.679-0.304 0.679-0.679v-16.8z"
56+
fill="#cc4247"
57+
/>
58+
<clipPath>
59+
<path
60+
d="m27.9 29c0-0.375-0.304-0.679-0.679-0.679h-6.14c-0.375 0-0.679 0.304-0.679 0.679v16.8c0 0.375 0.304 0.679 0.679 0.679h6.14c0.375 0 0.679-0.304 0.679-0.679v-16.8z"
61+
/>
62+
</clipPath>
63+
64+
<!-- Holes -->
65+
<g fill="none" stroke-width="1.08px">
66+
<ellipse cx="24.5" cy="6.11" rx="3.43" ry="3.34" stroke="#a8b6ba" />
67+
<ellipse cx="24.5" cy="55.4" rx="3.43" ry="3.34" stroke="#a8b6ba" />
68+
69+
<!-- +/- -->
70+
<g stroke="#fff">
71+
<path d="m24 44.7v4.75" />
72+
<path d="m24 12.1v4.75" />
73+
<path d="m26.4 14.5h-4.75" />
74+
</g>
75+
</g>
76+
77+
<!-- Resistors -->
78+
<g fill="#dae3eb">
79+
<rect x="37.7" y="8.69" width="16.7" height="5.52" />
80+
<rect x="37.7" y="22" width="16.7" height="5.52" />
81+
<rect x="37.7" y="34.5" width="16.7" height="5.52" />
82+
</g>
83+
<rect x="41.9" y="34.3" width="8.43" height="5.9" fill="#29261c" />
84+
<path d="m108 21.2v-16.7h-5.52v16.7z" fill="#dae3eb" />
85+
<path d="m108 17v-8.43h-5.9v8.43z" fill="#29261c" />
86+
<path d="m108 53.8v-16.7h-5.52v16.7z" fill="#dae3eb" />
87+
<path d="m108 49.7v-8.43h-5.9v8.43z" fill="#29261c" />
88+
<rect x="37.7" y="47.5" width="16.7" height="5.52" fill="#dae3eb" />
89+
<rect x="41.9" y="8.5" width="8.43" height="5.9" fill="#907463" />
90+
<rect x="41.9" y="21.8" width="8.43" height="5.9" fill="#907463" />
91+
<rect x="41.9" y="47.3" width="8.43" height="5.9" fill="#29261c" />
92+
93+
<!-- LEDs -->
94+
<rect x="118" y="4.77" width="13" height="4.29" fill="#dae3eb" />
95+
<rect x="121" y="4.62" width="6.55" height="4.59" fill="#fffefe" />
96+
<filter id="ledFilter" x="-0.8" y="-0.8" height="5.2" width="5.8">
97+
<feGaussianBlur stdDeviation="2" />
98+
</filter>
99+
${ledPower && svg`<circle cx="124.5" cy="7" r="4" fill="green" filter="url(#ledFilter)" />`}
100+
101+
<rect x="118" y="52.6" width="13" height="4.29" fill="#dae3eb" />
102+
<rect x="121" y="52.5" width="6.55" height="4.59" fill="#fffefe" />
103+
${ledDO && svg`<circle cx="124.5" cy="55" r="4" fill="red" filter="url(#ledFilter)" />`}
104+
105+
<!-- Chip -->
106+
<g fill="#dae3eb">
107+
<path
108+
d="m72.7 34.6h-9.67c-0.407 0-0.796 0.162-1.08 0.449-0.287 0.287-0.448 0.677-0.448 1.08v1e-3c0 0.406 0.161 0.796 0.448 1.08 0.288 0.287 0.677 0.448 1.08 0.448h9.67z"
109+
/>
110+
<path
111+
d="m72.7 40.4h-9.67c-0.407 0-0.796 0.162-1.08 0.449-0.287 0.287-0.448 0.677-0.448 1.08v1e-3c0 0.406 0.161 0.796 0.448 1.08 0.288 0.287 0.677 0.448 1.08 0.448h9.67z"
112+
/>
113+
<path
114+
d="m72.7 46.2h-9.67c-0.407 0-0.796 0.162-1.08 0.449-0.287 0.287-0.448 0.677-0.448 1.08v1e-3c0 0.406 0.161 0.796 0.448 1.08 0.288 0.288 0.677 0.449 1.08 0.449h9.67z"
115+
/>
116+
<path
117+
d="m72.7 52h-9.67c-0.407 0-0.796 0.162-1.08 0.449-0.287 0.287-0.448 0.677-0.448 1.08v1e-3c0 0.406 0.161 0.796 0.448 1.08 0.288 0.288 0.677 0.449 1.08 0.449h9.67z"
118+
/>
119+
<path
120+
d="m84.4 55.1h9.67c0.406 0 0.796-0.161 1.08-0.449 0.288-0.287 0.449-0.677 0.449-1.08v-1e-3c0-0.406-0.161-0.796-0.449-1.08-0.287-0.287-0.677-0.449-1.08-0.449h-9.67z"
121+
/>
122+
<path
123+
d="m84.4 49.3h9.67c0.406 0 0.796-0.161 1.08-0.449 0.288-0.287 0.449-0.677 0.449-1.08v-1e-3c0-0.406-0.161-0.796-0.449-1.08-0.287-0.287-0.677-0.449-1.08-0.449h-9.67z"
124+
/>
125+
<path
126+
d="m84.4 43.5h9.67c0.406 0 0.796-0.161 1.08-0.448 0.288-0.288 0.449-0.678 0.449-1.08v-1e-3c0-0.406-0.161-0.796-0.449-1.08-0.287-0.287-0.677-0.449-1.08-0.449h-9.67z"
127+
/>
128+
<path
129+
d="m84.4 37.7h9.67c0.406 0 0.796-0.161 1.08-0.448 0.288-0.288 0.449-0.678 0.449-1.08v-1e-3c0-0.406-0.161-0.796-0.449-1.08-0.287-0.287-0.677-0.449-1.08-0.449h-9.67z"
130+
/>
131+
</g>
132+
<rect x="70.3" y="33.2" width="16.1" height="23.3" fill="#29261c" />
133+
134+
<!-- Decorations -->
135+
<rect x="62.8" y="7.63e-9" width="32.1" height="32.1" fill="#466fb5" />
136+
<circle cx="78.9" cy="16" r="6.56" fill="#bcc2d5" />
137+
<path d="m78.9 6.72v18.6" fill="none" stroke="#3f3c40" stroke-width="2.5px" />
138+
<path d="m88.2 16h-18.6" fill="none" stroke="#3f3c40" stroke-width="2.5px" />
139+
<path
140+
d="m123 19.8c5.5 0 9.96 4.46 9.96 9.96s-4.46 9.96-9.96 9.96-9.96-4.46-9.96-9.96 4.46-9.96 9.96-9.96zm0 2.4c4.17 0 7.55 3.38 7.55 7.55 0 4.17-3.38 7.55-7.55 7.55s-7.55-3.38-7.55-7.55c0-4.17 3.38-7.55 7.55-7.55z"
141+
fill="#d4d0d1"
142+
/>
143+
144+
<!-- Text -->
145+
<g fill="#fffefe" font-size="3.4px" font-family="sans-serif">
146+
<text x="117.46" y="14.90">
147+
PWR
148+
</text>
149+
<text x="117.46" y="18.41">
150+
LED
151+
</text>
152+
<text x="133.16" y="17.37">
153+
VCC
154+
</text>
155+
<text x="133.16" y="26.87">
156+
GND
157+
</text>
158+
<text x="135.42" y="36.55">
159+
DO
160+
</text>
161+
<text x="135.42" y="46.359">
162+
AO
163+
</text>
164+
<text x="117.44" y="45.53">
165+
DO
166+
</text>
167+
<text x="117.44" y="49.036">
168+
LED
169+
</text>
170+
</g>
171+
172+
<!-- Board pins -->
173+
<path
174+
d="m143 11.7v38h8.39v-38z"
175+
fill="none"
176+
stroke="#fff"
177+
stroke-linejoin="round"
178+
stroke-width=".4px"
179+
/>
180+
<g fill="#433b38">
181+
<path d="m144 42.1v6.55h6.55v-6.55z" />
182+
<path d="m144 32.3v6.55h6.55v-6.55z" />
183+
<path d="m144 22.6v6.55h6.55v-6.55z" />
184+
<path d="m144 12.9v6.55h6.55v-6.55z" />
185+
</g>
186+
<g fill="#9f9f9f">
187+
<path
188+
d="m147 43.9c-0.382 0-0.748 0.152-1.02 0.422-0.27 0.27-0.421 0.636-0.421 1.02v1e-3c0 0.382 0.151 0.748 0.421 1.02 0.271 0.271 0.637 0.422 1.02 0.422h26.1c0.233 0 0.423-0.189 0.423-0.423v-2.04c0-0.234-0.19-0.423-0.423-0.423h-26.1z"
189+
/>
190+
<path
191+
d="m147 34.2c-0.382 0-0.748 0.152-1.02 0.422-0.27 0.27-0.421 0.636-0.421 1.02v1e-3c0 0.382 0.151 0.748 0.421 1.02 0.271 0.271 0.637 0.422 1.02 0.422h26.1c0.233 0 0.423-0.189 0.423-0.423v-2.04c0-0.234-0.19-0.423-0.423-0.423h-26.1z"
192+
/>
193+
<path
194+
d="m147 24.4c-0.382 0-0.748 0.151-1.02 0.422-0.27 0.27-0.421 0.636-0.421 1.02v1e-3c0 0.382 0.151 0.748 0.421 1.02 0.271 0.27 0.637 0.422 1.02 0.422h26.1c0.233 0 0.423-0.19 0.423-0.423v-2.04c0-0.234-0.19-0.423-0.423-0.423h-26.1z"
195+
/>
196+
<path
197+
d="m147 14.7c-0.382 0-0.748 0.152-1.02 0.422-0.27 0.27-0.421 0.637-0.421 1.02s0.151 0.749 0.421 1.02c0.271 0.27 0.637 0.422 1.02 0.422h26.1c0.233 0 0.423-0.19 0.423-0.424v-2.03c0-0.234-0.19-0.424-0.423-0.424h-26.1z"
198+
/>
199+
</g>
200+
</svg>
201+
`;
202+
}
203+
}

‎src/photoresistor-sensor-sensor-element.stories.ts‎

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

‎src/react-types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { BigSoundSensorElement } from './big-sound-sensor-element';
4040
import { MPU6050Element } from './mpu6050-element';
4141
import { ESP32DevkitV1Element } from './esp32-devkit-v1-element';
4242
import { KY040Element } from './ky-040-element';
43+
import { PhotoresistorSensorElement } from './photoresistor-sensor-element';
4344

4445
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
4546

@@ -85,6 +86,7 @@ declare global {
8586
'wokwi-mpu6050': WokwiElement<MPU6050Element>;
8687
'wokwi-esp32-devkit-v1': WokwiElement<ESP32DevkitV1Element>;
8788
'wokwi-ky-040': WokwiElement<KY040Element>;
89+
'wokwi-photoresistor-sensor': WokwiElement<PhotoresistorSensorElement>;
8890
}
8991
}
9092
}

0 commit comments

Comments
 (0)