Skip to content

Commit 09ef205

Browse files
urishurish
committed
feat(membrane-keypad): add connector #37 
1 parent 490f7fb commit 09ef205

File tree

4 files changed

+100
-37
lines changed

4 files changed

+100
-37
lines changed

‎src/arduino-uno-element.ts‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { pinsFemalePattern } from './patterns/pins-female';
23

34
@customElement('wokwi-arduino-uno')
45
export class ArduinoUnoElement extends LitElement {
@@ -29,30 +30,7 @@ export class ArduinoUnoElement extends LitElement {
2930
<feGaussianBlur stdDeviation="0.5" />
3031
</filter>
3132
32-
<pattern id="pins" width="2.54" height="2.54" patternUnits="userSpaceOnUse">
33-
<rect x="0" y="0" width="2.54" height="2.54" fill="#333"></rect>
34-
<rect x="1.079" y="0.896" width="0.762" height="0.762" style="fill: #191919"></rect>
35-
<path
36-
transform="translate(1.079, 1.658) rotate(180 0 0)"
37-
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
38-
style="opacity: 0.25"
39-
></path>
40-
<path
41-
transform="translate(1.841, 1.658) rotate(90 0 0)"
42-
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
43-
style="opacity: 0.3; fill: #fff"
44-
></path>
45-
<path
46-
transform="translate(1.841, 0.896)"
47-
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
48-
style="opacity: 0.15; fill: #fff"
49-
></path>
50-
<path
51-
transform="translate(1.079, 0.896) rotate(270 0 0)"
52-
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
53-
style="opacity: 0.35"
54-
></path>
55-
</pattern>
33+
${pinsFemalePattern}
5634
5735
<pattern id="pin-male" width="2.54" height="4.80" patternUnits="userSpaceOnUse">
5836
<rect ry="0.3" rx="0.3" width="2.12" height="4.80" fill="#565656" />
@@ -122,16 +100,16 @@ export class ArduinoUnoElement extends LitElement {
122100
123101
<!-- Pin Headers -->
124102
<g transform="translate(17.497 1.27)">
125-
<rect width="${0.38 + 2.54 * 10}" height="2.54" fill="url(#pins)"></rect>
103+
<rect width="${0.38 + 2.54 * 10}" height="2.54" fill="url(#pins-female)"></rect>
126104
</g>
127105
<g transform="translate(44.421 1.27)">
128-
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins)"></rect>
106+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
129107
</g>
130108
<g transform="translate(26.641 49.53)">
131-
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins)"></rect>
109+
<rect width="${0.38 + 2.54 * 8}" height="2.54" fill="url(#pins-female)"></rect>
132110
</g>
133111
<g transform="translate(49.501 49.53)">
134-
<rect width="${0.38 + 2.54 * 6}" height="2.54" fill="url(#pins)"></rect>
112+
<rect width="${0.38 + 2.54 * 6}" height="2.54" fill="url(#pins-female)"></rect>
135113
</g>
136114
137115
<!-- MCU -->

‎src/membrane-keypad-element.stories.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,33 @@ storiesOf('Membrane Keypad', module)
1515
`
1616
)
1717
.add(
18-
'Three Columns',
18+
'With connector',
1919
() => html`
2020
<wokwi-membrane-keypad
21-
.threeColumns="${true}"
2221
@button-press=${logEvent}
2322
@button-release=${logEvent}
23+
.connector=${true}
24+
></wokwi-membrane-keypad>
25+
`
26+
)
27+
.add(
28+
'Three columns',
29+
() => html`
30+
<wokwi-membrane-keypad
31+
columns="3"
32+
@button-press=${logEvent}
33+
@button-release=${logEvent}
34+
></wokwi-membrane-keypad>
35+
`
36+
)
37+
.add(
38+
'Three columns + connector',
39+
() => html`
40+
<wokwi-membrane-keypad
41+
columns="3"
42+
@button-press=${logEvent}
43+
@button-release=${logEvent}
44+
.connector=${true}
2445
></wokwi-membrane-keypad>
2546
`
2647
);

‎src/membrane-keypad-element.ts‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { customElement, html, LitElement, property, svg } from 'lit-element';
2+
import { pinsFemalePattern } from './patterns/pins-female';
23

34
const SPACE_KEY = 32;
45

@@ -8,7 +9,15 @@ function isNumeric(text: string) {
89

910
@customElement('wokwi-membrane-keypad')
1011
export class MembraneKeypadElement extends LitElement {
11-
@property() threeColumns = false;
12+
/**
13+
* Number of columns (3 or 4)
14+
*/
15+
@property() columns: '3' | '4' = '4';
16+
17+
/**
18+
* Whether to display a connector beneath the keypad
19+
*/
20+
@property() connector = false;
1221

1322
private pressedKeys = new Set<string>();
1423

@@ -39,9 +48,13 @@ export class MembraneKeypadElement extends LitElement {
3948
}
4049

4150
render() {
42-
const fourColumns = !this.threeColumns;
51+
const { connector } = this;
52+
const fourColumns = this.columns === '4';
4353
const columnWidth = 15;
54+
const pinWidth = 2.54;
4455
const width = fourColumns ? 70.336 : 70.336 - columnWidth;
56+
const connectorWidth = fourColumns ? pinWidth * 8 : pinWidth * 7;
57+
const height = 76 + (connector ? 15 : 0);
4558

4659
return html`
4760
<style>
@@ -89,9 +102,9 @@ export class MembraneKeypadElement extends LitElement {
89102
90103
<svg
91104
width="${width}mm"
92-
height="76mm"
105+
height="${height}mm"
93106
version="1.1"
94-
viewBox="0 0 ${width} 76"
107+
viewBox="0 0 ${width} ${height}"
95108
font-family="sans-serif"
96109
font-size="8.2px"
97110
text-anchor="middle"
@@ -109,7 +122,16 @@ export class MembraneKeypadElement extends LitElement {
109122
stroke="#b1b5b9"
110123
stroke-width=".75"
111124
/>
112-
125+
<pattern id="wires" width="2.54" height="8" patternUnits="userSpaceOnUse">
126+
<rect width="2.54" height="8" fill="#eee" />
127+
<rect x="0.77" width="1" height="6" fill="#d9d5bc" />
128+
<circle cx="1.27" cy="6" r="0.75" fill="#d9d5bc" />
129+
<rect x="0.52" y="6" width="1.5" height="2" fill="#d9d5bc" />
130+
</pattern>
131+
<pattern id="wires-marks" width="2.54" height="8" patternUnits="userSpaceOnUse">
132+
<rect x="0.52" y="6" width="1.5" height="2" fill="#746d41" />
133+
</pattern>
134+
${pinsFemalePattern}
113135
<filter id="shadow">
114136
<feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="#ffff99" />
115137
</filter>
@@ -129,6 +151,18 @@ export class MembraneKeypadElement extends LitElement {
129151
stroke-width="1"
130152
/>
131153
154+
<!-- Connector -->
155+
${connector
156+
? svg`
157+
<g transform="translate(${(width - connectorWidth) / 2}, 76)">
158+
<rect width="${connectorWidth}" height="8" fill="url(#wires)" />
159+
<rect width="10.16" height="8" fill="url(#wires-marks)" />
160+
<rect y="8" width="${connectorWidth}" height="7" fill="#333" />
161+
<rect transform="translate(0, 12)" width="${connectorWidth}" height="2.54" fill="url(#pins-female)" />
162+
</g>
163+
`
164+
: null}
165+
132166
<!-- Blue keys -->
133167
<g fill="#4e90d7">
134168
<g>${this.renderKey('1', 7, 10.7)}</g>
@@ -204,8 +238,10 @@ export class MembraneKeypadElement extends LitElement {
204238

205239
if (key === 'Shift') {
206240
pressedKeys?.forEach((pressedKey) => {
207-
const pressedText = pressedKey.dataset.keyName!;
208-
this.up(pressedText, pressedKey);
241+
const pressedText = pressedKey.dataset.keyName;
242+
if (pressedText) {
243+
this.up(pressedText, pressedKey);
244+
}
209245
});
210246
}
211247

‎src/patterns/pins-female.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { svg } from 'lit-element';
2+
3+
export const pinsFemalePattern = svg`
4+
<pattern id="pins-female" width="2.54" height="2.54" patternUnits="userSpaceOnUse">
5+
<rect x="0" y="0" width="2.54" height="2.54" fill="#333"></rect>
6+
<rect x="1.079" y="0.896" width="0.762" height="0.762" style="fill: #191919"></rect>
7+
<path
8+
transform="translate(1.079, 1.658) rotate(180 0 0)"
9+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
10+
style="opacity: 0.25"
11+
></path>
12+
<path
13+
transform="translate(1.841, 1.658) rotate(90 0 0)"
14+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
15+
style="opacity: 0.3; fill: #fff"
16+
></path>
17+
<path
18+
transform="translate(1.841, 0.896)"
19+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
20+
style="opacity: 0.15; fill: #fff"
21+
></path>
22+
<path
23+
transform="translate(1.079, 0.896) rotate(270 0 0)"
24+
d="m 0 0 v 0.762 l 0.433,0.433 c 0.046,-0.046 0.074,-0.109 0.074,-0.179 v -1.27 c 0,-0.070 -0.028,-0.133 -0.074,-0.179 z"
25+
style="opacity: 0.35"
26+
></path>
27+
</pattern>
28+
`;

0 commit comments

Comments
 (0)