Skip to content

Commit 39f9eb0

Browse files
AriellaEAriellaE
committed
feat: add tilt switch element
1 parent 7e424ab commit 39f9eb0

File tree

4 files changed

+236
-0
lines changed

4 files changed

+236
-0
lines changed

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ export { IRRemoteElement } from './ir-remote-element';
3131
export { PIRMotionSensorElement } from './pir-motion-sensor-element';
3232
export { NTCTemperatureSensorElement } from './ntc-temperature-sensor-element';
3333
export { HeartBeatSensorElement } from './heart-beat-sensor-element';
34+
export { TiltSwitchElement } from './tilt-switch-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { IRRemoteElement } from './ir-remote-element';
3030
import { PIRMotionSensorElement } from './pir-motion-sensor-element';
3131
import { NTCTemperatureSensorElement } from './ntc-temperature-sensor-element';
3232
import { HeartBeatSensorElement } from './heart-beat-sensor-element';
33+
import { TiltSwitchElement } from './tilt-switch-element';
3334

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

@@ -65,6 +66,7 @@ declare global {
6566
'wokwi-pir-motion-sensor': WokwiElement<PIRMotionSensorElement>;
6667
'wokwi-ntc-temperature-sensor': WokwiElement<NTCTemperatureSensorElement>;
6768
'wokwi-heart-beat-sensor': WokwiElement<HeartBeatSensorElement>;
69+
'wokwi-tilt-switch': WokwiElement<TiltSwitchElement>;
6870
}
6971
}
7072
}

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

‎src/tilt-switch-element.ts

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
import { customElement, html, LitElement } from 'lit-element';
2+
import { ElementPin } from '.';
3+
import { GND, VCC } from './pin';
4+
5+
@customElement('wokwi-tilt-switch')
6+
export class TiltSwitchElement extends LitElement {
7+
readonly pinInfo: ElementPin[] = [
8+
{ name: 'GND', y: 18, x: 88, number: 1, signals: [GND()] },
9+
{ name: 'VCC', y: 27.8, x: 88, number: 2, signals: [VCC()] },
10+
{ name: 'OUT', y: 37.5, x: 88, number: 3, signals: [] },
11+
];
12+
13+
render() {
14+
return html`
15+
<svg
16+
width="23.4mm"
17+
height="14.7mm"
18+
version="1.1"
19+
viewBox="0 0 88.4 55.6"
20+
font-family="sans-serif"
21+
xmlns="http://www.w3.org/2000/svg"
22+
>
23+
<path
24+
d="m71.2 0h-71.2v55.6h71.2zm-54.1 43.8c2.66 0 4.82 2.22 4.82 4.96s-2.16 4.96-4.82 4.96-4.82-2.22-4.82-4.96 2.16-4.96 4.82-4.96zm13.8-3.78c2.03 0 3.68 1.7 3.68 3.78s-1.65 3.78-3.68 3.78-3.68-1.7-3.68-3.78 1.65-3.78 3.68-3.78zm0-31.5c2.03 0 3.68 1.7 3.68 3.78 0 2.09-1.65 3.78-3.68 3.78s-3.68-1.7-3.68-3.78c0-2.09 1.65-3.78 3.68-3.78zm-13.8-6.6c2.66 0 4.82 2.22 4.82 4.96s-2.16 4.96-4.82 4.96-4.82-2.22-4.82-4.96 2.16-4.96 4.82-4.96z"
25+
fill="#19365e"
26+
/>
27+
<clipPath id="g">
28+
<path
29+
d="m78.1 4.2h-71.2v55.6h71.2zm-54.1 43.8c2.66 0 4.82 2.22 4.82 4.96s-2.16 4.96-4.82 4.96-4.82-2.22-4.82-4.96 2.16-4.96 4.82-4.96zm13.8-3.78c2.03 0 3.68 1.7 3.68 3.78s-1.65 3.78-3.68 3.78-3.68-1.7-3.68-3.78 1.65-3.78 3.68-3.78zm0-31.5c2.03 0 3.68 1.7 3.68 3.78 0 2.09-1.65 3.78-3.68 3.78s-3.68-1.7-3.68-3.78c0-2.09 1.65-3.78 3.68-3.78zm-13.8-6.6c2.66 0 4.82 2.22 4.82 4.96s-2.16 4.96-4.82 4.96-4.82-2.22-4.82-4.96 2.16-4.96 4.82-4.96z"
30+
/>
31+
</clipPath>
32+
<g transform="translate(-6.88 -4.2)" clip-path="url(#g)">
33+
<path
34+
d="m49.8 12.7c-0.256-0.299-0.705-0.334-1-0.078-3.3 2.82-20.7 17.7-24 20.5-0.299 0.255-0.334 0.705-0.078 1 1.83 2.14 8.55 9.99 10.4 12.1 0.255 0.299 0.705 0.334 1 0.078 3.3-2.82 20.7-17.7 24-20.5 0.299-0.255 0.334-0.705 0.079-1-1.83-2.14-8.55-9.99-10.4-12.1z"
35+
fill="#1b2f4c"
36+
/>
37+
</g>
38+
<text
39+
transform="rotate(-90 31 151)"
40+
x="132.20"
41+
y="184.995"
42+
fill="#fffefe"
43+
font-size="10.3px"
44+
>
45+
s
46+
</text>
47+
<text transform="rotate(90 37.9 -35.9)" fill="#fffefe" font-size="6.32px">
48+
<tspan x="97.97 102.499" y="-8.79">S1</tspan>
49+
</text>
50+
<g fill="#bbb9b9">
51+
<ellipse cx="18.5" cy="18.5" rx="5.21" ry="3.44" />
52+
<ellipse cx="42.3" cy="18.5" rx="5.21" ry="3.44" />
53+
<ellipse cx="18.5" cy="37.2" rx="5.21" ry="3.44" />
54+
<ellipse cx="42.3" cy="37.2" rx="5.21" ry="3.44" />
55+
</g>
56+
<path d="m57.5 13.5v28.6h8.39v-28.6z" fill="none" stroke="#fff" stroke-width=".9px" />
57+
<g fill="#29261c">
58+
<path d="m58.4 34.2v6.55h6.55v-6.55z" />
59+
<path d="m58.4 24.5v6.55h6.55v-6.55z" />
60+
<path d="m58.4 14.8v6.56h6.55v-6.56z" />
61+
</g>
62+
<g fill="#9f9f9f">
63+
<path
64+
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"
65+
/>
66+
<path
67+
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"
68+
/>
69+
<path
70+
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"
71+
/>
72+
</g>
73+
<g fill="#0e0f0d" stroke="#bbb9b9" stroke-linejoin="miter" stroke-width="1.83px" r="2.59">
74+
<circle cx="42.2" cy="18.4" />
75+
<circle cx="18.4" cy="18.4" />
76+
<circle cx="18.4" cy="37.1" />
77+
<circle cx="42.2" cy="37.1" />
78+
</g>
79+
<ellipse
80+
cx="17.1"
81+
cy="48.7"
82+
rx="4.82"
83+
ry="4.96"
84+
fill="none"
85+
stroke="#bbb9b9"
86+
stroke-linejoin="miter"
87+
stroke-width="1.12px"
88+
/>
89+
<path
90+
d="m30.8 39.6c-2.26 0-4.1 1.88-4.1 4.21 0 2.33 1.84 4.21 4.1 4.21s4.1-1.88 4.1-4.21c0-2.33-1.84-4.21-4.1-4.21zm0 0.855c1.8 0 3.25 1.51 3.25 3.36s-1.45 3.36-3.25 3.36-3.25-1.51-3.25-3.36 1.45-3.36 3.25-3.36z"
91+
fill="#bbb9b9"
92+
/>
93+
<clipPath id="f">
94+
<path
95+
d="m37.7 43.8c-2.26 0-4.1 1.88-4.1 4.21 0 2.33 1.84 4.21 4.1 4.21s4.1-1.88 4.1-4.21c0-2.33-1.84-4.21-4.1-4.21zm0 0.855c1.8 0 3.25 1.51 3.25 3.36s-1.45 3.36-3.25 3.36-3.25-1.51-3.25-3.36 1.45-3.36 3.25-3.36z"
96+
/>
97+
</clipPath>
98+
<g transform="translate(-6.88 -4.2)" clip-path="url(#f)">
99+
<path
100+
d="m49.8 12.7c-0.256-0.299-0.705-0.334-1-0.078-3.3 2.82-20.7 17.7-24 20.5-0.299 0.255-0.334 0.705-0.078 1 1.83 2.14 8.55 9.99 10.4 12.1 0.255 0.299 0.705 0.334 1 0.078 3.3-2.82 20.7-17.7 24-20.5 0.299-0.255 0.334-0.705 0.079-1-1.83-2.14-8.55-9.99-10.4-12.1z"
101+
fill="#8e8e8e"
102+
/>
103+
</g>
104+
<ellipse
105+
cx="30.8"
106+
cy="12.3"
107+
rx="3.68"
108+
ry="3.78"
109+
fill="none"
110+
stroke="#bbb9b9"
111+
stroke-linejoin="miter"
112+
stroke-width=".86px"
113+
/>
114+
<ellipse
115+
cx="17.1"
116+
cy="6.86"
117+
rx="4.82"
118+
ry="4.96"
119+
fill="none"
120+
stroke="#bbb9b9"
121+
stroke-linejoin="miter"
122+
stroke-width="1.12px"
123+
/>
124+
<path
125+
d="m24.6 33.6-1.62-1.89s-3.45 2.95-5.16 4.41c-0.251 0.215-0.407 0.521-0.432 0.85-0.026 0.329 0.08 0.655 0.295 0.906v1e-3c0.215 0.25 0.521 0.406 0.85 0.431 0.329 0.026 0.655-0.08 0.906-0.295 1.72-1.47 5.16-4.42 5.16-4.42z"
126+
fill="#d2d2d2"
127+
/>
128+
<clipPath id="e">
129+
<path
130+
d="m31.5 37.8-1.62-1.89s-3.45 2.95-5.16 4.41c-0.251 0.215-0.407 0.521-0.432 0.85-0.026 0.329 0.08 0.655 0.295 0.906v1e-3c0.215 0.25 0.521 0.406 0.85 0.431 0.329 0.026 0.655-0.08 0.906-0.295 1.72-1.47 5.16-4.42 5.16-4.42z"
131+
/>
132+
</clipPath>
133+
<g transform="translate(-6.88 -4.2)" clip-path="url(#e)">
134+
<path
135+
d="m31 36.9c-0.189 0.025-0.301 0.185-0.449 0.294-0.418 0.309-0.808 0.635-1.19 0.985-1 0.927-2.03 1.82-3.05 2.73-0.259 0.231-0.576 0.388-0.836 0.617-0.587 0.517-1.13 1.14-1.91 1.35-0.089 0.025-0.25 0.124-0.334 0.124-0.057 0 0.112-6e-3 0.168 0 0.093 9e-3 0.179 0.032 0.275 0.037 0.342 0.017 0.701 0.016 1.04-5e-3 0.994-0.062 2.05-0.419 3.01-0.675 1.54-0.411 2.9-1.01 4.09-2.12 0.52-0.486 0.938-1.08 1.38-1.64 0.582-0.723 1.1-1.47 1.41-2.35 0.018-0.052-0.326-0.106-0.365-0.114-0.472-0.095-0.911-0.123-1.4-0.123-0.655 0-1.44 0.626-2 0.894-0.412 0.196-1.25 0.443-1.56 0.866"
136+
fill="#ececec"
137+
/>
138+
</g>
139+
<g transform="translate(-6.88 -4.2)">
140+
<path d="m56.6 33.8v10.9h3.6v-10.9z" fill="#bbb9b9" />
141+
<path d="m56.5 36.5v5.5h3.85v-5.5z" fill="#29261c" />
142+
</g>
143+
<g transform="translate(-6.88 -4.2)">
144+
<path d="m56.6 19.7v10.9h3.6v-10.9z" fill="#bbb9b9" />
145+
<clipPath id="d">
146+
<path d="m56.6 19.7v10.9h3.6v-10.9z" />
147+
</clipPath>
148+
<g clip-path="url(#d)">
149+
<path
150+
d="m49.8 12.7c-0.256-0.299-0.705-0.334-1-0.078-3.3 2.82-20.7 17.7-24 20.5-0.299 0.255-0.334 0.705-0.078 1 1.83 2.14 8.55 9.99 10.4 12.1 0.255 0.299 0.705 0.334 1 0.078 3.3-2.82 20.7-17.7 24-20.5 0.299-0.255 0.334-0.705 0.079-1-1.83-2.14-8.55-9.99-10.4-12.1z"
151+
fill="#9c9b9b"
152+
/>
153+
</g>
154+
<path d="m56.5 22.4v5.5h3.85v-5.5z" fill="#29261c" />
155+
<clipPath id="c">
156+
<path d="m56.5 22.4v5.5h3.85v-5.5z" />
157+
</clipPath>
158+
<g clip-path="url(#c)">
159+
<path
160+
d="m49.8 12.7c-0.256-0.299-0.705-0.334-1-0.078-3.3 2.82-20.7 17.7-24 20.5-0.299 0.255-0.334 0.705-0.078 1 1.83 2.14 8.55 9.99 10.4 12.1 0.255 0.299 0.705 0.334 1 0.078 3.3-2.82 20.7-17.7 24-20.5 0.299-0.255 0.334-0.705 0.079-1-1.83-2.14-8.55-9.99-10.4-12.1z"
161+
/>
162+
</g>
163+
</g>
164+
<path
165+
d="m54.7 28.6v12.9h-6.3v-12.9z"
166+
fill="none"
167+
stroke="#fff"
168+
stroke-linejoin="miter"
169+
stroke-width=".49px"
170+
/>
171+
<path d="m48.2 14.3v13.4h6.79v-13.4zm0.489 5.11v-4.62h5.81v4.62 7.76h-5.81z" fill="#fff" />
172+
<clipPath id="b">
173+
<path d="m55 18.5v13.4h6.79v-13.4zm0.489 5.11v-4.62h5.81v4.62 7.76h-5.81z" />
174+
</clipPath>
175+
<g transform="translate(-6.88 -4.2)" clip-path="url(#b)">
176+
<path
177+
d="m49.8 12.7c-0.256-0.299-0.705-0.334-1-0.078-3.3 2.82-20.7 17.7-24 20.5-0.299 0.255-0.334 0.705-0.078 1 1.83 2.14 8.55 9.99 10.4 12.1 0.255 0.299 0.705 0.334 1 0.078 3.3-2.82 20.7-17.7 24-20.5 0.299-0.255 0.334-0.705 0.079-1-1.83-2.14-8.55-9.99-10.4-12.1z"
178+
fill="#d4d4d4"
179+
/>
180+
</g>
181+
<path
182+
d="m61.6 10.4v-4.68"
183+
fill="none"
184+
stroke="#fffefe"
185+
stroke-linejoin="miter"
186+
stroke-width=".85px"
187+
/>
188+
<g fill="#a19e9e">
189+
<circle cx="4.64" cy="41.4" r="2.88" />
190+
<circle cx="4.64" cy="14.2" r="2.88" />
191+
<circle cx="51.4" cy="8.74" r="2.88" />
192+
<circle cx="51.4" cy="45.6" r="2.88" />
193+
</g>
194+
<g fill="#29261c">
195+
<circle cx="51.4" cy="45.6" r="1.47" />
196+
<circle cx="4.64" cy="41.4" r="1.47" />
197+
<circle cx="4.64" cy="14.2" r="1.47" />
198+
<circle cx="51.4" cy="8.74" r="1.47" />
199+
</g>
200+
<path
201+
d="m45.4 12.3 1.65 1.86s3.4-3 5.09-4.5c0.247-0.219 0.397-0.527 0.417-0.857 0.02-0.329-0.091-0.653-0.31-0.901h-1e-3c-0.218-0.247-0.527-0.398-0.856-0.418-0.33-0.02-0.654 0.092-0.901 0.311-1.69 1.5-5.09 4.5-5.09 4.5z"
202+
fill="#d2d2d2"
203+
/>
204+
<clipPath id="a">
205+
<path
206+
d="m52.2 16.5 1.65 1.86s3.4-3 5.09-4.5c0.247-0.219 0.397-0.527 0.417-0.857 0.02-0.329-0.091-0.653-0.31-0.901h-1e-3c-0.218-0.247-0.527-0.398-0.856-0.418-0.33-0.02-0.654 0.092-0.901 0.311-1.69 1.5-5.09 4.5-5.09 4.5z"
207+
/>
208+
</clipPath>
209+
<g transform="translate(-6.88 -4.2)" clip-path="url(#a)">
210+
<path
211+
d="m52.8 17.4c0.188-0.028 0.297-0.19 0.444-0.302 0.413-0.316 0.797-0.648 1.17-1 0.986-0.943 2-1.86 3-2.78 0.255-0.235 0.569-0.398 0.825-0.63 0.579-0.527 1.11-1.16 1.89-1.38 0.088-0.026 0.248-0.127 0.332-0.129 0.057-1e-3 -0.112 8e-3 -0.168 3e-3 -0.093-7e-3 -0.18-0.03-0.276-0.033-0.342-0.011-0.701-4e-3 -1.04 0.023-0.993 0.079-2.04 0.453-2.99 0.725-1.53 0.437-2.89 1.06-4.05 2.19-0.512 0.494-0.92 1.1-1.36 1.66-0.569 0.733-1.08 1.49-1.37 2.37-0.017 0.053 0.328 0.101 0.367 0.108 0.474 0.088 0.913 0.107 1.4 0.099 0.654-0.011 1.42-0.649 1.98-0.927"
212+
fill="#ececec"
213+
/>
214+
</g>
215+
<path
216+
d="m42.2 6.32c-0.256-0.299-0.705-0.334-1-0.078-3.3 2.82-20.7 17.7-24 20.5-0.299 0.255-0.334 0.705-0.078 1 1.83 2.14 8.55 9.99 10.4 12.1 0.256 0.299 0.706 0.334 1 0.078 3.3-2.82 20.7-17.7 24-20.5 0.299-0.256 0.334-0.705 0.078-1-1.83-2.14-8.55-9.99-10.4-12.1z"
217+
fill="#4a91ce"
218+
/>
219+
</svg>
220+
`;
221+
}
222+
}

0 commit comments

Comments
 (0)