Skip to content

Commit de73d33

Browse files
AriellaEAriellaE
committed
feat: add dip switch 8
wokwi#106
1 parent 6f7acef commit de73d33

File tree

4 files changed

+183
-0
lines changed

4 files changed

+183
-0
lines changed

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

‎src/dip-switch-8-element.ts

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { html, LitElement, svg } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
import { ElementPin } from '.';
4+
5+
@customElement('wokwi-dip-switch-8')
6+
export class DipSwitch8Element extends LitElement {
7+
@property({ type: Array }) values = [0, 0, 0, 0, 0, 0, 0, 0];
8+
9+
readonly pinInfo: ElementPin[] = [
10+
{ name: '1a', number: 1, y: 55, x: 7.5, signals: [] },
11+
{ name: '2a', number: 2, y: 55, x: 17.2, signals: [] },
12+
{ name: '3a', number: 3, y: 55, x: 26.7, signals: [] },
13+
{ name: '4a', number: 4, y: 55, x: 36.5, signals: [] },
14+
{ name: '5a', number: 5, y: 55, x: 45.9, signals: [] },
15+
{ name: '6a', number: 6, y: 55, x: 55.6, signals: [] },
16+
{ name: '7a', number: 7, y: 55, x: 65.2, signals: [] },
17+
{ name: '8a', number: 8, y: 55, x: 74.8, signals: [] },
18+
19+
{ name: '8b', number: 9, y: 0.8, x: 74.8, signals: [] },
20+
{ name: '7b', number: 10, y: 0.8, x: 65.2, signals: [] },
21+
{ name: '6b', number: 11, y: 0.8, x: 55.6, signals: [] },
22+
{ name: '5b', number: 12, y: 0.8, x: 45.9, signals: [] },
23+
{ name: '4b', number: 13, y: 0.8, x: 36.5, signals: [] },
24+
{ name: '3b', number: 14, y: 0.8, x: 26.7, signals: [] },
25+
{ name: '2b', number: 15, y: 0.8, x: 17.2, signals: [] },
26+
{ name: '1b', number: 16, y: 0.8, x: 7.5, signals: [] },
27+
];
28+
29+
/**
30+
* Change switch state
31+
* @param index Which switch to change
32+
*/
33+
private toggleSwitch(index: number) {
34+
this.values[index] = this.values[index] ? 0 : 1;
35+
this.requestUpdate(); // force lit to render again
36+
}
37+
38+
/** Change switch state by keyboard 1-8 press */
39+
private onKeyDown(e: KeyboardEvent) {
40+
e.stopPropagation(); // stop storybook reacting to the key press
41+
const keys = ['1', '2', '3', '4', '5', '6', '7', '8'];
42+
const keyIndex = keys.indexOf(e.key);
43+
if (keyIndex !== -1) {
44+
this.toggleSwitch(keyIndex);
45+
}
46+
}
47+
48+
private drawSwitch(index: number, x: number) {
49+
return svg`
50+
<rect
51+
@click=${() => this.toggleSwitch(index)}
52+
x="${x + 4.693}"
53+
y="21.2"
54+
width="5.8168"
55+
height="13"
56+
/>
57+
<use
58+
@click=${() => this.toggleSwitch(index)}
59+
xlink:href="#switch"
60+
x="${x}"
61+
y=${this.values[index] ? -7.2 : 0}
62+
/>`;
63+
}
64+
65+
private preventTextSelection(e: MouseEvent) {
66+
if (e.detail > 1) {
67+
// On double click
68+
e.preventDefault();
69+
}
70+
}
71+
72+
render() {
73+
return html`
74+
<svg
75+
tabindex="0"
76+
@keydown=${this.onKeyDown}
77+
@mousedown=${this.preventTextSelection}
78+
width="82.87"
79+
height="55.355"
80+
version="1.1"
81+
viewBox="0 0 82.87 55.355"
82+
xmlns="http://www.w3.org/2000/svg"
83+
>
84+
<defs>
85+
<path
86+
id="switch"
87+
transform="translate(-66.856 -41.367)"
88+
fill="#fffef4"
89+
stroke-linecap="round"
90+
stroke-linejoin="round"
91+
stroke-width=".77094"
92+
d="m72.096 69.764s1.3376 0.38247 2.1066 0.39196c0.76893 0.0095 2.44-0.39196 2.44-0.39196 0.39596-0.06361 0.72389 0.32286 0.72389 0.72389v4.3678c0 0.40104-0.52337 0.72389-0.72389 0.72389s-1.6592-0.41225-2.4288-0.40316c-0.76958 0.0091-2.1177 0.40316-2.1177 0.40316-0.39396 0.075-0.72389-0.32286-0.72389-0.72389v-4.3678c0-0.40104 0.32286-0.72389 0.72389-0.72389z"
93+
/>
94+
</defs>
95+
96+
<!-- Pins -->
97+
<g
98+
transform="translate(-66.856 -41.367)"
99+
fill="#454837"
100+
fill-opacity=".49194"
101+
stroke-linecap="round"
102+
stroke-linejoin="round"
103+
stroke-width=".76744"
104+
>
105+
<rect x="73.181" y="87.634" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
106+
<rect x="83.135" y="87.455" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
107+
<rect x="92.424" y="87.639" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
108+
<rect x="102.45" y="87.639" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
109+
<rect
110+
transform="scale(1,-1)"
111+
x="111.55"
112+
y="-96.722"
113+
width="1.4382"
114+
height="9.0831"
115+
rx=".7206"
116+
ry=".7206"
117+
/>
118+
<rect x="121.12" y="87.639" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
119+
<rect x="130.78" y="87.547" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
120+
<rect x="140.62" y="87.547" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
121+
<rect x="73.516" y="41.546" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
122+
<rect x="83.469" y="41.367" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
123+
<rect x="92.758" y="41.551" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
124+
<rect x="102.78" y="41.551" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
125+
<rect
126+
transform="scale(1,-1)"
127+
x="111.89"
128+
y="-50.634"
129+
width="1.4382"
130+
height="9.0831"
131+
rx=".7206"
132+
ry=".7206"
133+
/>
134+
<rect x="121.45" y="41.551" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
135+
<rect x="131.11" y="41.459" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
136+
<rect x="140.95" y="41.459" width="1.4382" height="9.0831" rx=".7206" ry=".7206" />
137+
</g>
138+
139+
<!-- Board -->
140+
<rect x="0" y="8.5" width="90.5" height="38.0831" fill="#d72c2c" />
141+
142+
<!-- Text -->
143+
<text fill="#fffef4" font-family="sans-serif" font-size="7.66px" style="line-height:1.25">
144+
<tspan x="6.340" y="18.03">ON</tspan>
145+
<tspan x="4.35" y="43.28">1</tspan>
146+
<tspan x="14.485" y="43.28">2</tspan>
147+
<tspan x="23.956" y="43.28">3</tspan>
148+
<tspan x="33.57" y="43.28">4</tspan>
149+
<tspan x="43.05" y="43.28">5</tspan>
150+
<tspan x="52.36" y="43.28">6</tspan>
151+
<tspan x="62.45" y="43.28">7</tspan>
152+
<tspan x="71.92" y="43.28">8</tspan>
153+
</text>
154+
155+
<!-- Switches -->
156+
<g fill="#917c6f" stroke-width=".77094">
157+
${this.drawSwitch(0, 0)}<!-- -->
158+
${this.drawSwitch(1, 9.6)}<!-- -->
159+
${this.drawSwitch(2, 19.4)}<!-- -->
160+
${this.drawSwitch(3, 29.1)}<!-- -->
161+
${this.drawSwitch(4, 38.5)}<!-- -->
162+
${this.drawSwitch(5, 48.1)}<!-- -->
163+
${this.drawSwitch(6, 57.7)}<!-- -->
164+
${this.drawSwitch(7, 67.3)}<!-- -->
165+
</g>
166+
</svg>
167+
`;
168+
}
169+
}

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,4 @@ export { RGBLedElement } from './rgb-led-element';
4646
export { ILI9341Element } from './ili9341-element';
4747
export { LedBarGraphElement } from './led-bar-graph-element';
4848
export { MicrosdCardElement } from './microsd-card-element';
49+
export { DipSwitch8Element } from './dip-switch-8-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { RGBLedElement } from './rgb-led-element';
4545
import { ILI9341Element } from './ili9341-element';
4646
import { LedBarGraphElement } from './led-bar-graph-element';
4747
import { MicrosdCardElement } from './microsd-card-element';
48+
import { DipSwitch8Element } from './dip-switch-8-element';
4849

4950
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
5051

@@ -95,6 +96,7 @@ declare global {
9596
'wokwi-ili9341': WokwiElement<ILI9341Element>;
9697
'wokwi-led-bar-graph': WokwiElement<LedBarGraphElement>;
9798
'wokwi-microsd-card': WokwiElement<MicrosdCardElement>;
99+
'wokwi-dip-switch-8': WokwiElement<DipSwitch8Element>;
98100
}
99101
}
100102
}

0 commit comments

Comments
 (0)