Skip to content

Commit 7e424ab

Browse files
AriellaEAriellaE
committed
feat: add heart beat sensor
1 parent 05dd2ef commit 7e424ab

File tree

4 files changed

+204
-0
lines changed

4 files changed

+204
-0
lines changed

‎src/heart-beat-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 './heart-beat-sensor-element';
3+
4+
export default {
5+
title: 'Heart Beat Sensor',
6+
component: 'wokwi-heart-beat-sensor',
7+
};
8+
9+
const Template = () => html`<wokwi-heart-beat-sensor></wokwi-heart-beat-sensor>`;
10+
11+
export const Default = Template.bind({});

‎src/heart-beat-sensor-element.ts

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import { customElement, html, LitElement } from 'lit-element';
2+
import { ElementPin, GND, VCC } from './pin';
3+
4+
@customElement('wokwi-heart-beat-sensor')
5+
export class HeartBeatSensorElement extends LitElement {
6+
readonly pinInfo: ElementPin[] = [
7+
{ name: 'GND', y: 17.8, x: 87, number: 1, signals: [GND()] },
8+
{ name: 'VCC', y: 27.5, x: 87, number: 2, signals: [VCC()] },
9+
{ name: 'OUT', y: 37.5, x: 87, number: 3, signals: [] },
10+
];
11+
12+
render() {
13+
return html`
14+
<svg
15+
width="23.4mm"
16+
height="20.943mm"
17+
version="1.1"
18+
viewBox="0 0 88.4 79.2"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<path
22+
d="m71.2 0h-71.2v55.6h71.2zm-62.6 41.4c2.65 0 4.79 2.15 4.79 4.79 0 2.64-2.15 4.79-4.79 4.79-2.64 0-4.79-2.15-4.79-4.79 0-2.65 2.15-4.79 4.79-4.79zm0-36.7c2.65 0 4.79 2.15 4.79 4.79 0 2.64-2.15 4.79-4.79 4.79-2.64 0-4.79-2.15-4.79-4.79 0-2.65 2.15-4.79 4.79-4.79z"
23+
fill="#19365e"
24+
/>
25+
<g transform="rotate(-90 31 151)">
26+
<text
27+
x="132.20599"
28+
y="184.995"
29+
fill="#fffefe"
30+
font-family="sans-serif"
31+
font-size="10.3px"
32+
>
33+
s
34+
</text>
35+
</g>
36+
<circle cx="22.6" cy="46.9" r="3.23" fill="#bbb9b9" />
37+
<circle cx="33.4" cy="46.9" r="3.23" fill="#bbb9b9" />
38+
<path d="m57.5 13.5v28.6h8.39v-28.6z" fill="none" stroke="#fff" stroke-width=".9px" />
39+
<g fill="#29261c">
40+
<path d="m58.4 34.2v6.55h6.55v-6.55z" />
41+
<path d="m58.4 24.5v6.55h6.55v-6.55z" />
42+
<path d="m58.4 14.8v6.56h6.55v-6.56z" />
43+
</g>
44+
<g fill="#9f9f9f">
45+
<path
46+
d="m61.9 36.1c-0.382 0-0.748 0.152-1.02 0.422s-0.422 0.637-0.422 1.02 0.152 0.748 0.422 1.02c0.27 0.27 0.636 0.422 1.02 0.422h26.1c0.234 0 0.423-0.19 0.423-0.424v-2.04c0-0.233-0.189-0.423-0.423-0.423h-26.1z"
47+
/>
48+
<path
49+
d="m61.9 26.3c-0.382 0-0.748 0.152-1.02 0.422s-0.422 0.637-0.422 1.02 0.152 0.748 0.422 1.02c0.27 0.27 0.636 0.422 1.02 0.422h26.1c0.234 0 0.423-0.19 0.423-0.424v-2.04c0-0.233-0.189-0.423-0.423-0.423h-26.1z"
50+
/>
51+
<path
52+
d="m61.9 16.6c-0.382 0-0.748 0.152-1.02 0.422s-0.422 0.636-0.422 1.02v1e-3c0 0.382 0.152 0.748 0.422 1.02s0.636 0.422 1.02 0.422h26.1c0.234 0 0.423-0.189 0.423-0.423v-2.04c0-0.234-0.189-0.423-0.423-0.423h-26.1z"
53+
/>
54+
</g>
55+
<g
56+
transform="translate(-6.88 -4.2)"
57+
fill="#0e0f0d"
58+
stroke="#bbb9b9"
59+
stroke-linejoin="miter"
60+
stroke-width="1.83px"
61+
>
62+
<circle cx="29.8" cy="22.6" r="2.59" />
63+
<circle cx="29.8" cy="12.2" r="2.59" />
64+
<circle cx="29.8" cy="41.3" r="2.59" />
65+
<circle cx="39.9" cy="22.6" r="2.59" />
66+
<circle cx="39.9" cy="12.2" r="2.59" />
67+
<circle cx="39.9" cy="41.3" r="2.59" />
68+
</g>
69+
<circle
70+
cx="8.58"
71+
cy="9.42"
72+
r="4.79"
73+
fill="none"
74+
stroke="#bbb9b9"
75+
stroke-linejoin="miter"
76+
stroke-width="1.1px"
77+
/>
78+
<circle
79+
cx="8.58"
80+
cy="46.2"
81+
r="4.79"
82+
fill="none"
83+
stroke="#bbb9b9"
84+
stroke-linejoin="miter"
85+
stroke-width="1.1px"
86+
/>
87+
<g transform="translate(-6.88 -4.2)">
88+
<rect x="26.5" y="59.8" width="16.4" height="20.9" fill="#d3d9de" />
89+
<circle cx="34.8" cy="64.3" r="2.37" fill="#a8b2c8" />
90+
<path
91+
d="m40.7 62.8h-2.75v19.2c0 0.364 0.145 0.713 0.403 0.971 0.257 0.258 0.607 0.402 0.971 0.402h1e-3c0.364 0 0.714-0.144 0.971-0.402 0.258-0.258 0.403-0.607 0.403-0.971v-19.2z"
92+
fill="#b9c5de"
93+
/>
94+
<rect x="37.9" y="62.8" width="2.75" height="17.9" fill="#a8b2c8" />
95+
<path
96+
d="m32.4 69.5h-2.75v12.5c0 0.364 0.145 0.713 0.402 0.971 0.258 0.258 0.607 0.402 0.972 0.402s0.714-0.144 0.972-0.402c0.257-0.258 0.402-0.607 0.402-0.971v-12.5z"
97+
fill="#b9c5de"
98+
/>
99+
<g fill="#a8b2c8">
100+
<rect x="29.6" y="69.5" width="2.75" height="11.2" />
101+
<path
102+
d="m35.5 72.2c0.142 0 0.277-0.056 0.377-0.156 0.101-0.1 0.157-0.236 0.157-0.377v-1.68c0-0.142-0.056-0.277-0.157-0.377-0.1-0.1-0.235-0.157-0.377-0.157h-3.97c-0.364 0-0.714 0.145-0.971 0.403-0.258 0.257-0.403 0.607-0.403 0.971v1e-3c0 0.364 0.145 0.713 0.403 0.971 0.257 0.258 0.607 0.402 0.971 0.402h3.97z"
103+
/>
104+
<path
105+
d="m38.8 65.5c0.141 0 0.277-0.056 0.377-0.156s0.157-0.236 0.157-0.377v-1.68c0-0.142-0.057-0.277-0.157-0.377-0.1-0.101-0.236-0.157-0.377-0.157h-3.97c-0.364 0-0.714 0.145-0.972 0.403-0.257 0.257-0.402 0.607-0.402 0.971v1e-3c0 0.364 0.145 0.713 0.402 0.971 0.258 0.258 0.608 0.402 0.972 0.402h3.97z"
106+
/>
107+
</g>
108+
</g>
109+
<path
110+
d="m31.8 15h2.49v-6.79c0-0.33-0.131-0.647-0.365-0.88-0.233-0.234-0.55-0.365-0.88-0.365h-1e-3c-0.33 0-0.647 0.131-0.88 0.365-0.234 0.233-0.365 0.55-0.365 0.88z"
111+
fill="#d2d2d2"
112+
/>
113+
<path
114+
d="m21.7 15h2.49v-6.79c0-0.33-0.131-0.647-0.365-0.88-0.233-0.234-0.55-0.365-0.88-0.365h-1e-3c-0.33 0-0.647 0.131-0.88 0.365-0.234 0.233-0.365 0.55-0.365 0.88z"
115+
fill="#d2d2d2"
116+
/>
117+
<g transform="translate(-6.88 -4.2)">
118+
<rect x="47" y="29.2" width="13.4" height="4.43" fill="#bbb9b9" />
119+
<rect x="50.3" y="29" width="6.77" height="4.74" fill="#29261c" />
120+
</g>
121+
<g transform="translate(-6.88 -4.2)">
122+
<rect x="47" y="20" width="13.4" height="4.43" fill="#bbb9b9" />
123+
<rect x="50.3" y="19.9" width="6.77" height="4.74" fill="#29261c" />
124+
</g>
125+
<path
126+
d="m38.9 23.3h15.9v7.76h-15.9z"
127+
fill="none"
128+
stroke="#fff"
129+
stroke-linejoin="miter"
130+
stroke-width=".6px"
131+
/>
132+
<path
133+
d="m38.9 14.1h15.9v7.76h-15.9z"
134+
fill="none"
135+
stroke="#fff"
136+
stroke-linejoin="miter"
137+
stroke-width=".6px"
138+
/>
139+
<path
140+
d="m37.4 15.4h-19v19.1c0 5.24 4.24 9.48 9.48 9.48 5.24 0 9.48-4.24 9.48-9.48z"
141+
fill="#fdfefe"
142+
/>
143+
<clipPath id="c">
144+
<path d="m44.3 19.6h-19v19.1c0 5.24 4.24 9.48 9.48 9.48 5.24 0 9.48-4.24 9.48-9.48z" />
145+
</clipPath>
146+
<g transform="translate(-6.88 -4.2)" clip-path="url(#c)">
147+
<path
148+
d="m30.6 18.1c0 8.12-1.48 16.2-0.263 24.3 0.388 2.58 1.14 4.94 2.59 7.11 0.478 0.718 0.956 1.5 1.51 2.16 0.201 0.236 0.416 0.375 0.672 0.529 0.102 0.061 0.438 0.157 0.319 0.157-3.1 0-5.53-2.5-7.49-4.64-4.21-4.59-5.36-8.3-5.88-14.5-0.078-0.921-0.402-1.9-0.353-2.81 0.073-1.36 0.578-2.79 0.921-4.11 0.564-2.16 1.08-4.18 2.51-5.92 0.417-0.508 0.545-1.27 1.08-1.69 0.624-0.494 2.43-0.722 3.1-0.28 0.189 0.124 0.829 0.279 0.829 0.56"
149+
fill="#fff"
150+
/>
151+
</g>
152+
<path
153+
d="m35.4 15.4h-15v18.8c0 1.98 0.789 3.89 2.19 5.29 1.4 1.4 3.31 2.19 5.29 2.19s3.89-0.788 5.29-2.19c1.4-1.4 2.19-3.31 2.19-5.29z"
154+
fill="#d5d5d5"
155+
/>
156+
<clipPath id="b">
157+
<path
158+
d="m42.3 19.6h-15v18.8c0 1.98 0.789 3.89 2.19 5.29 1.4 1.4 3.31 2.19 5.29 2.19s3.89-0.788 5.29-2.19c1.4-1.4 2.19-3.31 2.19-5.29z"
159+
/>
160+
</clipPath>
161+
<g transform="translate(-6.88 -4.2)" clip-path="url(#b)">
162+
<g fill="#b1b1b1">
163+
<path d="m31.4 29.6v-10h-3.02v13.7h12.9l-3.67-3.65z" />
164+
<path d="m41.3 30.4-3.18-3.2v-7.56h3.18z" />
165+
</g>
166+
<path
167+
d="m30.6 18.1c0 8.12-1.48 16.2-0.263 24.3 0.388 2.58 1.14 4.94 2.59 7.11 0.478 0.718 0.956 1.5 1.51 2.16 0.201 0.236 0.416 0.375 0.672 0.529 0.102 0.061 0.438 0.157 0.319 0.157-3.1 0-5.53-2.5-7.49-4.64-4.21-4.59-5.36-8.3-5.88-14.5-0.078-0.921-0.402-1.9-0.353-2.81 0.073-1.36 0.578-2.79 0.921-4.11 0.564-2.16 1.08-4.18 2.51-5.92 0.417-0.508 0.545-1.27 1.08-1.69 0.624-0.494 2.43-0.722 3.1-0.28 0.189 0.124 0.829 0.279 0.829 0.56"
168+
fill="#e2e2e2"
169+
/>
170+
<clipPath id="a">
171+
<path
172+
d="m30.6 18.1c0 8.12-1.48 16.2-0.263 24.3 0.388 2.58 1.14 4.94 2.59 7.11 0.478 0.718 0.956 1.5 1.51 2.16 0.201 0.236 0.416 0.375 0.672 0.529 0.102 0.061 0.438 0.157 0.319 0.157-3.1 0-5.53-2.5-7.49-4.64-4.21-4.59-5.36-8.3-5.88-14.5-0.078-0.921-0.402-1.9-0.353-2.81 0.073-1.36 0.578-2.79 0.921-4.11 0.564-2.16 1.08-4.18 2.51-5.92 0.417-0.508 0.545-1.27 1.08-1.69 0.624-0.494 2.43-0.722 3.1-0.28 0.189 0.124 0.829 0.279 0.829 0.56"
173+
/>
174+
</clipPath>
175+
<g clip-path="url(#a)">
176+
<path d="m31.4 29.6v-10h-3.02v13.7h12.9l-3.67-3.65z" fill="#c7c7c7" />
177+
</g>
178+
</g>
179+
<rect x="17.3" y="11.7" width="21.3" height="3.68" fill="#fdfefe" />
180+
<path
181+
d="m64 9.39h-4.68"
182+
fill="none"
183+
stroke="#fffefe"
184+
stroke-linejoin="miter"
185+
stroke-width=".85px"
186+
/>
187+
</svg>
188+
`;
189+
}
190+
}

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ export { IRReceiverElement } from './ir-receiver-element';
3030
export { IRRemoteElement } from './ir-remote-element';
3131
export { PIRMotionSensorElement } from './pir-motion-sensor-element';
3232
export { NTCTemperatureSensorElement } from './ntc-temperature-sensor-element';
33+
export { HeartBeatSensorElement } from './heart-beat-sensor-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { IRReceiverElement } from './ir-receiver-element';
2929
import { IRRemoteElement } from './ir-remote-element';
3030
import { PIRMotionSensorElement } from './pir-motion-sensor-element';
3131
import { NTCTemperatureSensorElement } from './ntc-temperature-sensor-element';
32+
import { HeartBeatSensorElement } from './heart-beat-sensor-element';
3233

3334
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
3435

@@ -63,6 +64,7 @@ declare global {
6364
'wokwi-ir-remote': WokwiElement<IRRemoteElement>;
6465
'wokwi-pir-motion-sensor': WokwiElement<PIRMotionSensorElement>;
6566
'wokwi-ntc-temperature-sensor': WokwiElement<NTCTemperatureSensorElement>;
67+
'wokwi-heart-beat-sensor': WokwiElement<HeartBeatSensorElement>;
6668
}
6769
}
6870
}

0 commit comments

Comments
 (0)