Skip to content

Commit 4d4d3be

Browse files
AriellaEAriellaE
committed
feat(pir-motion-sensor): add element
1 parent 8719ac7 commit 4d4d3be

File tree

4 files changed

+126
-0
lines changed

4 files changed

+126
-0
lines changed

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@ export { LCD2004Element } from './lcd2004-element';
2727
export { AnalogJoystickElement } from './analog-joystick-element';
2828
export { IRReceiverElement } from './ir-receiver-element';
2929
export { IRRemoteElement } from './ir-remote-element';
30+
export { PIRMotionSensorElement } from './pir-motion-sensor-element';

‎src/pir-motion-sensor-element.stories.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { html } from 'lit-html';
2+
import './pir-motion-sensor-element';
3+
4+
export default {
5+
title: 'PIR Motion Sensor',
6+
component: 'wokwi-pir-motion-sensor',
7+
};
8+
9+
const Template = () => html` <wokwi-pir-motion-sensor></wokwi-pir-motion-sensor> `;
10+
11+
export const Default = Template.bind({});

‎src/pir-motion-sensor-element.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { customElement, html, LitElement } from 'lit-element';
2+
import { ElementPin, GND, VCC } from './pin';
3+
4+
@customElement('wokwi-pir-motion-sensor')
5+
export class PIRMotionSensorElement extends LitElement {
6+
readonly pinInfo: ElementPin[] = [
7+
{ name: 'VCC', y: 92, x: 36.178, number: 1, signals: [VCC()] },
8+
{ name: 'OUT', y: 92, x: 45.9175, number: 2, signals: [] },
9+
{ name: 'GND', y: 92, x: 55.6415, number: 3, signals: [GND()] },
10+
];
11+
12+
render() {
13+
return html`
14+
<svg
15+
width="24mm"
16+
height="24.448mm"
17+
version="1.1"
18+
viewBox="0 0 90.7 92.4"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<g fill="#c6bf95">
22+
<path
23+
d="m54.2 91c0 0.383 0.151 0.749 0.422 1.02 0.27 0.27 0.636 0.422 1.02 0.422h1e-3c0.382 0 0.748-0.152 1.02-0.422s0.422-0.636 0.422-1.02v-26.1c0-0.234-0.189-0.423-0.423-0.423h-2.04c-0.234 0-0.423 0.189-0.423 0.423v26.1z"
24+
/>
25+
<path
26+
d="m44.5 91c0 0.383 0.151 0.749 0.422 1.02 0.27 0.27 0.636 0.422 1.02 0.422h1e-3c0.382 0 0.748-0.152 1.02-0.422s0.422-0.636 0.422-1.02v-26.1c0-0.234-0.189-0.423-0.423-0.423h-2.04c-0.234 0-0.423 0.189-0.423 0.423v26.1z"
27+
/>
28+
<path
29+
d="m34.7 91c0 0.383 0.152 0.749 0.422 1.02s0.637 0.422 1.02 0.422 0.749-0.152 1.02-0.422 0.422-0.636 0.422-1.02v-26.1c0-0.234-0.19-0.423-0.424-0.423h-2.03c-0.234 0-0.424 0.189-0.424 0.423v26.1z"
30+
/>
31+
</g>
32+
<path
33+
d="m90.7 0h-90.7v74.3h90.7zm-5.38 32.1c2.09 0 3.78 1.7 3.78 3.78s-1.7 3.78-3.78 3.78c-2.09 0-3.78-1.7-3.78-3.78s1.7-3.78 3.78-3.78zm-77.1 0c2.09 0 3.78 1.7 3.78 3.78s-1.7 3.78-3.78 3.78c-2.09 0-3.78-1.7-3.78-3.78s1.7-3.78 3.78-3.78z"
34+
fill="#253674"
35+
/>
36+
<rect x="14.3" y="1.28" width="65.5" height="65.5" fill="#dde5e3" />
37+
<rect x="17.1" y="4.14" width="59.8" height="59.8" fill="#d1dfe1" />
38+
<circle cx="46.7" cy="33.8" r="31" fill="#d3d5d6" />
39+
<circle cx="46.7" cy="33.8" r="28.2" fill="#d9e1e1" />
40+
<clipPath id="a">
41+
<circle cx="52.5" cy="39.2" r="28.2" />
42+
</clipPath>
43+
<g transform="translate(-5.81 -5.45)" clip-path="url(#a)" fill="#fbfcfb">
44+
<path
45+
d="m52.8 13.7c11.2 2.94 21.3 18.3 21.8 30.5 0 0 6.16-8.84-2.25-20.6-7.05-9.89-19.5-9.87-19.5-9.87z"
46+
/>
47+
<path
48+
d="m52.2 64.8c-7.37 0.013-19.8-6.53-22.1-14 0 0-0.102 4.33 6.99 10.2 5.95 4.94 15.1 3.75 15.1 3.75z"
49+
/>
50+
<g fill="none" stroke="#d2d8d8" stroke-width=".4px">
51+
<path d="m32.9 18-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
52+
<path d="m32.9 27.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
53+
<path d="m32.9 36.9-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
54+
<path d="m32.9 46.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
55+
<path d="m32.9 55.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
56+
<path d="m32.9 65.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
57+
<path d="m41.1 13.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
58+
<path d="m41.1 22.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
59+
<path d="m41.1 32.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
60+
<path d="m41.1 41.6-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
61+
<path d="m41.1 51-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
62+
<path d="m41.1 60.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
63+
64+
<path d="m49.3 18-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
65+
<path d="m49.3 27.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
66+
<path d="m49.3 36.9-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
67+
<path d="m49.3 46.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
68+
<path d="m49.3 55.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
69+
<path d="m49.3 65.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
70+
<path d="m57.4 13.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
71+
<path d="m57.4 22.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
72+
<path d="m57.4 32.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
73+
<path d="m57.4 41.6-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
74+
<path d="m57.4 51-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
75+
<path d="m57.4 60.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
76+
77+
<path d="m65.6 18-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
78+
<path d="m65.6 27.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
79+
<path d="m65.6 36.9-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
80+
<path d="m65.6 46.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
81+
<path d="m65.6 55.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
82+
<path d="m65.6 65.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
83+
<path d="m73.8 13.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
84+
<path d="m73.8 22.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
85+
<path d="m73.8 32.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
86+
<path d="m73.8 41.6-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
87+
<path d="m73.8 51-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
88+
<path d="m73.8 60.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
89+
90+
<path d="m81.9 18-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
91+
<path d="m81.9 27.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
92+
<path d="m81.9 36.9-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
93+
<path d="m81.9 46.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
94+
<path d="m81.9 55.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
95+
<path d="m81.9 65.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
96+
<path d="m90.1 13.3-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
97+
<path d="m90.1 22.7-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
98+
<path d="m90.1 32.1-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
99+
<path d="m90.1 41.6-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
100+
<path d="m90.1 51-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
101+
<path d="m90.1 60.4-2.72 4.71h-5.44l-2.72-4.71 2.72-4.71h5.44z" />
102+
</g>
103+
</g>
104+
<text fill="#ffffff" font-family="sans-serif">
105+
<tspan x="33.293" y="73.864" font-size="9.88px">+</tspan>
106+
<tspan x="43.531" y="72.609" font-size="6.38px">D</tspan>
107+
</text>
108+
<path d="m57.9 70.8h-4.67v-0.81h4.67z" fill="#fff" />
109+
</svg>
110+
`;
111+
}
112+
}

‎src/react-types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { LCD2004Element } from './lcd2004-element';
2626
import { AnalogJoystickElement } from './analog-joystick-element';
2727
import { IRReceiverElement } from './ir-receiver-element';
2828
import { IRRemoteElement } from './ir-remote-element';
29+
import { PIRMotionSensorElement } from './pir-motion-sensor-element';
2930

3031
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
3132

@@ -57,6 +58,7 @@ declare global {
5758
'wokwi-analog-joystick': WokwiElement<AnalogJoystickElement>;
5859
'wokwi-ir-receiver': WokwiElement<IRReceiverElement>;
5960
'wokwi-ir-remote': WokwiElement<IRRemoteElement>;
61+
'wokwi-pir-motion-sensor': WokwiElement<PIRMotionSensorElement>;
6062
}
6163
}
6264
}

0 commit comments

Comments
 (0)