Skip to content

Commit 59dc4ef

Browse files
urishurish
committed
feat(microsd-card): add element
1 parent 8e14246 commit 59dc4ef

File tree

4 files changed

+114
-0
lines changed

4 files changed

+114
-0
lines changed

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ export { PhotoresistorSensorElement } from './photoresistor-sensor-element';
4545
export { RGBLedElement } from './rgb-led-element';
4646
export { ILI9341Element } from './ili9341-element';
4747
export { LedBarGraphElement } from './led-bar-graph-element';
48+
export { MicrosdCardElement } from './microsd-card-element';

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

‎src/microsd-card-element.ts

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { customElement, html, LitElement } from 'lit-element';
2+
import { ElementPin } from '.';
3+
import { spi } from './pin';
4+
5+
@customElement('wokwi-microsd-card')
6+
export class MicrosdCardElement extends LitElement {
7+
readonly pinInfo: ElementPin[] = [
8+
{ name: 'CD', x: 76.734, y: 9.3744, signals: [] },
9+
{ name: 'DO', x: 76.734, y: 18.8622, signals: [spi('MISO')] },
10+
{ name: 'GND', x: 76.734, y: 28.4634, signals: [{ type: 'power', signal: 'GND' }] },
11+
{ name: 'SCK', x: 76.734, y: 38.178, signals: [spi('SCK')] },
12+
{ name: 'VCC', x: 76.734, y: 47.628, signals: [{ type: 'power', signal: 'VCC' }] },
13+
{ name: 'DI', x: 76.734, y: 57.456, signals: [spi('MOSI')] },
14+
{ name: 'CS', x: 76.734, y: 66.906, signals: [spi('SS')] },
15+
];
16+
17+
render() {
18+
return html`
19+
<svg
20+
width="21.6mm"
21+
height="20.4mm"
22+
version="1.1"
23+
viewBox="0 0 21.6 20.4"
24+
xmlns="http://www.w3.org/2000/svg"
25+
>
26+
<!-- Board -->
27+
<rect width="21.6" height="20.4" fill="#a1111b" />
28+
29+
<!-- Card and socket -->
30+
<rect
31+
x="1.32"
32+
y="4.59"
33+
width="3.13"
34+
height="8.06"
35+
fill="#262626"
36+
stroke="#d5b7b5"
37+
stroke-width=".232"
38+
/>
39+
<rect x="4.08" y=".0367" width="10.7" height="17.8" rx=".772" ry=".772" fill="#262626" />
40+
<path
41+
d="m3.79 2.49-1.62 0.0292v1.38c0.474 0.0438 0.486 0.0027 0.489 0.197 0.0026 0.194-0.0698 0.237-1.2 0.257v0.939c0.388 0.0184 0.665-0.0702 0.679 0.211l0.176 3.66-0.413 0.434 0.0207 0.733 0.103 0.114 1.15 0.031 0.114-0.114-0.031-0.764-0.361-0.403 0.0413-3.62c0.0103-0.258 0.176-0.283 0.176-0.283h0.34c0.109 0 0.197 0.0689 0.197 0.154v5.29c0 0.0856-0.088 0.154-0.197 0.154h-1.99v6.96h5.2c-0.0402-1.41-0.191-5.31-0.0968-6 0.0155-0.114 0.263-0.0662 0.272-0.0303 0.0551 0.222 0.0216 2.55 0.234 5.65 0.431 0.234 0.17-0.655 0.423-0.635 0.242 0.0186-0.0802 0.81 0.394 0.635 0.384-4 0.0656-5.8 0.365-5.71 0.299 0.0904-0.204 5.36 0.0438 6.09h4.18s-0.17-4.16-0.285-5.96c-0.0099-0.155 0.473-0.156 0.467 0-0.0653 1.63 0.0803 5.67 0.0803 5.67 0.533 0.0657 0.168-0.755 0.46-0.745 0.279 0.0104-0.0511 0.854 0.387 0.745 0 0 0.218-4.08 0.226-5.69 7.07e-4 -0.146 0.375-0.139 0.372 0.0073-0.0227 1.42-0.131 5.97-0.131 5.97h1.01l-0.0656-14.3s-0.24-0.0383-0.352 0.0012c-3.96 1.4-7.81 1.06-10.7-0.0304-0.175-0.212-0.146-0.993-0.146-0.993z"
42+
fill="#dbded9"
43+
/>
44+
<rect
45+
x="5.84"
46+
y="6.42"
47+
width="3.97"
48+
height="1.97"
49+
rx=".3"
50+
ry=".3"
51+
fill="#262626"
52+
stroke="#ebebeb"
53+
stroke-width=".08"
54+
/>
55+
<rect
56+
x="10.4"
57+
y="6.42"
58+
width="3.97"
59+
height="1.97"
60+
rx=".3"
61+
ry=".3"
62+
fill="#262626"
63+
stroke="#ebebeb"
64+
stroke-width=".08"
65+
/>
66+
<path
67+
d="m4.08 1.21s2.37 0.327 5.27 0.327c2.9 0 5.42-0.327 5.42-0.327v0.57s-0.949 0.331-5.42 0.327c-4.47-0.0037-5.27-0.327-5.27-0.327z"
68+
fill="#020202"
69+
stroke="#000"
70+
stroke-width=".027"
71+
/>
72+
<g fill="#fcfff9">
73+
<rect x="1.19" y="10.9" width=".275" height="6.95" />
74+
<rect x="1.19" y="4.36" width=".275" height=".945" />
75+
<rect x="1.84" y="2.52" width=".33" height="1.38" />
76+
</g>
77+
78+
<!-- Pins & labels -->
79+
<text font-family="sans-serif" fill="#ffffff" font-size="1.6px" stroke-width=".0327">
80+
<tspan x="16.61" y="2.90">CD</tspan>
81+
<tspan x="16.45" y="5.45">DO</tspan>
82+
<tspan x="15.39" y="7.98">GND</tspan>
83+
<tspan x="15.65" y="10.62">SCK</tspan>
84+
<tspan x="15.68" y="13.06">VCC</tspan>
85+
<tspan x="16.88" y="15.57">DI</tspan>
86+
<tspan x="16.67" y="18.24">CS</tspan>
87+
</text>
88+
<g fill="#fff" stroke="#d9cb97" stroke-width=".381">
89+
<ellipse cx="20.3" cy="2.48" rx=".814" ry=".814" />
90+
<ellipse cx="20.3" cy="4.99" rx=".814" ry=".814" />
91+
<ellipse cx="20.3" cy="7.53" rx=".814" ry=".814" />
92+
<ellipse cx="20.3" cy="10.1" rx=".814" ry=".814" />
93+
<ellipse cx="20.3" cy="12.6" rx=".814" ry=".814" />
94+
<ellipse cx="20.3" cy="15.2" rx=".814" ry=".814" />
95+
<ellipse cx="20.3" cy="17.7" rx=".814" ry=".814" />
96+
</g>
97+
</svg>
98+
`;
99+
}
100+
}

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import { PhotoresistorSensorElement } from './photoresistor-sensor-element';
4444
import { RGBLedElement } from './rgb-led-element';
4545
import { ILI9341Element } from './ili9341-element';
4646
import { LedBarGraphElement } from './led-bar-graph-element';
47+
import { MicrosdCardElement } from './microsd-card-element';
4748

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

@@ -93,6 +94,7 @@ declare global {
9394
'wokwi-rgb-led': WokwiElement<RGBLedElement>;
9495
'wokwi-ili9341': WokwiElement<ILI9341Element>;
9596
'wokwi-led-bar-graph': WokwiElement<LedBarGraphElement>;
97+
'wokwi-microsd-card': WokwiElement<MicrosdCardElement>;
9698
}
9799
}
98100
}

0 commit comments

Comments
 (0)