Skip to content

Commit 326ccd8

Browse files
AriellaEAriellaE
committed
feat: add flame sensor
1 parent 10b7c80 commit 326ccd8

File tree

4 files changed

+239
-0
lines changed

4 files changed

+239
-0
lines changed

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

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

‎src/flame-sensor-element.ts

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { ElementPin } from '.';
3+
import { GND, VCC } from './pin';
4+
5+
@customElement('wokwi-flame-sensor')
6+
export class FlameSensorElement extends LitElement {
7+
@property() ledPower = false;
8+
@property() ledSignal = false;
9+
10+
readonly pinInfo: ElementPin[] = [
11+
{ name: 'VCC', y: 19.5, x: 199, number: 1, signals: [VCC()] },
12+
{ name: 'GND', y: 29.5, x: 199, number: 2, signals: [GND()] },
13+
{ name: 'OUT', y: 39, x: 199, number: 3, signals: [] },
14+
];
15+
16+
render() {
17+
const { ledPower, ledSignal } = this;
18+
return html`
19+
<svg
20+
width="52.904mm"
21+
heigth="16.267mm"
22+
version="1.1"
23+
viewBox="0 0 200 61.5"
24+
xmlns="http://www.w3.org/2000/svg"
25+
>
26+
<path
27+
d="m180 1.49e-7h-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"
28+
fill="#1c2546"
29+
/>
30+
<rect
31+
x="45.5"
32+
y="20.1"
33+
width="11.2"
34+
height="22.2"
35+
fill="none"
36+
stroke="#fff"
37+
stroke-width="1.08px"
38+
/>
39+
<circle cx="51.1" cy="25.6" r="3.14" fill="#dae3eb" />
40+
<circle cx="51.1" cy="36.8" r="3.14" fill="#dae3eb" />
41+
<path
42+
d="m51.1 25.7c0-0.199-0.079-0.39-0.219-0.53-0.141-0.141-0.332-0.22-0.53-0.22h-13.2v1.5h13.2c0.198 0 0.389-0.079 0.53-0.219 0.14-0.141 0.219-0.332 0.219-0.53z"
43+
fill="#a8b6ba"
44+
/>
45+
<path
46+
d="m51.1 36.7c0-0.198-0.079-0.389-0.219-0.53-0.141-0.14-0.332-0.219-0.53-0.219h-13.2v1.5h13.2c0.198 0 0.389-0.079 0.53-0.22 0.14-0.14 0.219-0.331 0.219-0.53z"
47+
fill="#a8b6ba"
48+
/>
49+
<path
50+
d="m35.2 20.1h-25.2c-5.49 0-9.94 4.45-9.94 9.94v1e-3c0 5.49 4.45 9.94 9.94 9.94h25.2z"
51+
fill="#29261c"
52+
/>
53+
<clipPath id="c">
54+
<path
55+
d="m35.18 20.14h-25.2c-5.49 0-9.94 4.45-9.94 9.94v1e-3c0 5.49 4.45 9.94 9.94 9.94h25.2z"
56+
/>
57+
</clipPath>
58+
<g clip-path="url(#c)">
59+
<path
60+
d="m37.68 21.94c-12.6 0-25.1-0.227-37.7 0.917-0.196 0.018 0 4.25 0 4.25 12.8-1.41 25-1.08 37.7-0.669z"
61+
fill="#47434d"
62+
/>
63+
</g>
64+
<rect x="32.6" y="17.9" width="5.06" height="25.7" fill="#29261c" />
65+
<clipPath id="b">
66+
<rect x="32.68" y="17.94" width="5.06" height="25.7" />
67+
</clipPath>
68+
<g clip-path="url(#b)">
69+
<path
70+
d="m51.98 20.84c-12.6 0-25.1-0.228-37.7 0.916-0.195 0.018 0 4.25 0 4.25 12.8-1.41 25-1.08 37.7-0.669z"
71+
fill="#47434d"
72+
/>
73+
</g>
74+
<g fill="none" stroke-width="1.08px">
75+
<g stroke="#fff">
76+
<path d="m70.2 32.4h-7.47v9.67h7.47" />
77+
<path d="m136 10.4v-7.47h-9.67v7.47" />
78+
<path d="m155 12.8h7.47v-9.67h-7.47" />
79+
<path d="m155 55.8h7.47v-9.67h-7.47" />
80+
<path d="m136 43v-7.47h-9.67v7.47" />
81+
<path d="m70.2 45.2h-7.47v9.67h7.47" />
82+
<path d="m75.1 32.4h7.47v9.67h-7.47" />
83+
<path d="m136 15.2v7.47h-9.67v-7.47" />
84+
<path d="m151 12.8h-7.47v-9.67h7.47" />
85+
<path d="m151 55.8h-7.47v-9.67h7.47" />
86+
<path d="m136 47.9v7.47h-9.67v-7.47" />
87+
<path d="m75.1 45.2h7.47v9.67h-7.47" />
88+
<path
89+
d="m75.1 20h4.46c2.67 0 4.83 2.16 4.83 4.84v1e-3c0 2.67-2.16 4.84-4.83 4.84h-4.46"
90+
/>
91+
<path
92+
d="m75.1 6.62h4.46c2.67 0 4.83 2.16 4.83 4.83v1e-3c0 2.67-2.16 4.84-4.83 4.84h-4.46"
93+
/>
94+
<path
95+
d="m70.2 20h-4.46c-2.67 0-4.83 2.16-4.83 4.84v1e-3c0 2.67 2.16 4.84 4.83 4.84h4.46"
96+
/>
97+
<path
98+
d="m70.2 6.62h-4.46c-2.67 0-4.83 2.16-4.83 4.83v1e-3c0 2.67 2.16 4.84 4.83 4.84h4.46"
99+
/>
100+
</g>
101+
<ellipse cx="51.1" cy="6.11" rx="3.43" ry="3.34" stroke="#a8b6ba" />
102+
<ellipse cx="51.1" cy="55.4" rx="3.43" ry="3.34" stroke="#a8b6ba" />
103+
<g stroke="#fff">
104+
<path d="m50.6 44.7v4.75" />
105+
<path d="m50.6 12.1v4.75" />
106+
<path d="m53 14.5h-4.75" />
107+
</g>
108+
</g>
109+
<g fill="#dae3eb">
110+
<rect x="64.3" y="8.69" width="16.7" height="5.52" />
111+
<rect x="64.3" y="22" width="16.7" height="5.52" />
112+
<rect x="64.3" y="34.5" width="16.7" height="5.52" />
113+
</g>
114+
<rect x="68.4" y="34.3" width="8.43" height="5.9" fill="#29261c" />
115+
<path d="m134 21.2v-16.7h-5.52v16.7z" fill="#dae3eb" />
116+
<path d="m134 17v-8.43h-5.9v8.43z" fill="#29261c" />
117+
118+
<!-- LEDs -->
119+
<rect x="145" y="5.23" width="16.7" height="5.52" fill="#dae3eb" />
120+
<rect x="149" y="5.04" width="8.43" height="5.9" fill="#fffefe" />
121+
<filter id="ledFilter" x="-0.8" y="-0.8" height="5.2" width="5.8">
122+
<feGaussianBlur stdDeviation="2" />
123+
</filter>
124+
${ledPower &&
125+
svg`<circle cx="153.2" cy="7.5" r="7" fill="#80ff80" filter="url(#ledFilter)" />`}
126+
<rect x="145" y="48.3" width="16.7" height="5.52" fill="#dae3eb" />
127+
<rect x="149" y="48.1" width="8.43" height="5.9" fill="#fffefe" />
128+
${ledSignal &&
129+
svg`<circle cx="153.2" cy="51.3" r="7" fill="#80ff80" filter="url(#ledFilter)" />`}
130+
131+
<path d="m134 53.8v-16.7h-5.52v16.7z" fill="#dae3eb" />
132+
<path d="m134 49.7v-8.43h-5.9v8.43z" fill="#29261c" />
133+
<rect x="64.3" y="47.5" width="16.7" height="5.52" fill="#dae3eb" />
134+
<rect x="68.4" y="8.5" width="8.43" height="5.9" fill="#907463" />
135+
<rect x="68.4" y="21.8" width="8.43" height="5.9" fill="#907463" />
136+
<rect x="68.4" y="47.3" width="8.43" height="5.9" fill="#29261c" />
137+
<g fill="#dae3eb">
138+
<path
139+
d="m99.2 34.6h-9.67c-0.406 0-0.796 0.162-1.08 0.449-0.288 0.287-0.449 0.677-0.449 1.08v1e-3c0 0.406 0.161 0.796 0.449 1.08 0.287 0.287 0.677 0.448 1.08 0.448h9.67z"
140+
/>
141+
<path
142+
d="m99.2 40.4h-9.67c-0.406 0-0.796 0.162-1.08 0.449-0.288 0.287-0.449 0.677-0.449 1.08v1e-3c0 0.406 0.161 0.796 0.449 1.08 0.287 0.287 0.677 0.448 1.08 0.448h9.67z"
143+
/>
144+
<path
145+
d="m99.2 46.2h-9.67c-0.406 0-0.796 0.162-1.08 0.449-0.288 0.287-0.449 0.677-0.449 1.08v1e-3c0 0.406 0.161 0.796 0.449 1.08 0.287 0.287 0.677 0.448 1.08 0.448h9.67z"
146+
/>
147+
<path
148+
d="m99.2 52h-9.67c-0.406 0-0.796 0.162-1.08 0.449-0.288 0.287-0.449 0.677-0.449 1.08v1e-3c0 0.406 0.161 0.796 0.449 1.08 0.287 0.287 0.677 0.448 1.08 0.448h9.67z"
149+
/>
150+
<path
151+
d="m111 55.1h9.67c0.406 0 0.796-0.161 1.08-0.448 0.287-0.288 0.448-0.678 0.448-1.08v-1e-3c0-0.406-0.161-0.796-0.448-1.08-0.288-0.287-0.678-0.449-1.08-0.449h-9.67z"
152+
/>
153+
<path
154+
d="m111 49.3h9.67c0.406 0 0.796-0.161 1.08-0.448 0.287-0.288 0.448-0.678 0.448-1.08v-1e-3c0-0.406-0.161-0.796-0.448-1.08-0.288-0.287-0.678-0.449-1.08-0.449h-9.67z"
155+
/>
156+
<path
157+
d="m111 43.5h9.67c0.406 0 0.796-0.161 1.08-0.448 0.287-0.288 0.448-0.678 0.448-1.08v-1e-3c0-0.406-0.161-0.796-0.448-1.08-0.288-0.287-0.678-0.449-1.08-0.449h-9.67z"
158+
/>
159+
<path
160+
d="m111 37.7h9.67c0.406 0 0.796-0.161 1.08-0.448 0.287-0.288 0.448-0.678 0.448-1.08v-1e-3c0-0.406-0.161-0.796-0.448-1.08-0.288-0.287-0.678-0.449-1.08-0.449h-9.67z"
161+
/>
162+
</g>
163+
<rect x="97.6" y="33.2" width="16.1" height="23.3" fill="#29261c" />
164+
<rect x="89.4" width="32.1" height="32.1" fill="#466fb5" />
165+
<g fill="none" stroke="#2e60aa" stroke-width="1.63px">
166+
<path d="m95.6 7.35 13.9 17.1" />
167+
<path d="m112 8.62-14.9 13.2" />
168+
<path d="m114 12.7-19.2 5.13" />
169+
<path d="m114 17.3-19.5-4.06" />
170+
<path d="m113 21.8-5.14-4.58" />
171+
<path d="m105 27.6v-9.83" />
172+
<path d="m100 24.7 3.14-5.18" />
173+
</g>
174+
<circle cx="105" cy="16" r="6.56" fill="#bcc2d5" />
175+
<clipPath id="a">
176+
<circle cx="105.08" cy="16.04" r="6.56" />
177+
</clipPath>
178+
<g clip-path="url(#a)" fill="none" stroke="#3f3c40" stroke-width="2.5px">
179+
<path d="m105.08 6.74v18.6" />
180+
<path d="m115.08 16.04h-18.6" />
181+
</g>
182+
<path
183+
d="m149 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"
184+
fill="#d4d0d1"
185+
/>
186+
<path
187+
d="m169 15.2v28.6h8.39v-28.6z"
188+
fill="#1c2546"
189+
stroke="#fff"
190+
stroke-linejoin="round"
191+
stroke-width=".9px"
192+
/>
193+
<g fill="#29261c">
194+
<path d="m170 35.9v6.55h6.55v-6.55z" />
195+
<path d="m170 26.2v6.55h6.55v-6.55z" />
196+
<path d="m170 16.4v6.55h6.55v-6.55z" />
197+
</g>
198+
<g fill="#9f9f9f">
199+
<path
200+
d="m173 37.7c-0.382 0-0.748 0.152-1.02 0.422-0.271 0.271-0.422 0.637-0.422 1.02s0.151 0.749 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.423v-2.04c0-0.234-0.189-0.424-0.423-0.424h-26.1z"
201+
/>
202+
<path
203+
d="m173 28c-0.382 0-0.748 0.152-1.02 0.422-0.271 0.271-0.422 0.637-0.422 1.02s0.151 0.749 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.423v-2.04c0-0.234-0.189-0.424-0.423-0.424h-26.1z"
204+
/>
205+
<path
206+
d="m173 18.3c-0.382 0-0.748 0.152-1.02 0.422-0.271 0.27-0.422 0.637-0.422 1.02s0.151 0.749 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.03c0-0.234-0.189-0.424-0.423-0.424h-26.1z"
207+
/>
208+
</g>
209+
<text fill="#fffefe" font-family="sans-serif" font-size="9.43px">
210+
<tspan x="162.447" y="22.354">+</tspan>
211+
<tspan x="162.343" y="43.763">s</tspan>
212+
</text>
213+
</svg>
214+
`;
215+
}
216+
}

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ export { PIRMotionSensorElement } from './pir-motion-sensor-element';
3232
export { NTCTemperatureSensorElement } from './ntc-temperature-sensor-element';
3333
export { HeartBeatSensorElement } from './heart-beat-sensor-element';
3434
export { TiltSwitchElement } from './tilt-switch-element';
35+
export { FlameSensorElement } from './flame-sensor-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { PIRMotionSensorElement } from './pir-motion-sensor-element';
3131
import { NTCTemperatureSensorElement } from './ntc-temperature-sensor-element';
3232
import { HeartBeatSensorElement } from './heart-beat-sensor-element';
3333
import { TiltSwitchElement } from './tilt-switch-element';
34+
import { FlameSensorElement } from './flame-sensor-element';
3435

3536
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
3637

@@ -67,6 +68,7 @@ declare global {
6768
'wokwi-ntc-temperature-sensor': WokwiElement<NTCTemperatureSensorElement>;
6869
'wokwi-heart-beat-sensor': WokwiElement<HeartBeatSensorElement>;
6970
'wokwi-tilt-switch': WokwiElement<TiltSwitchElement>;
71+
'wokwi-flame-sensor': WokwiElement<FlameSensorElement>;
7072
}
7173
}
7274
}

0 commit comments

Comments
 (0)