Skip to content

Commit 9c8453b

Browse files
urishurish
committed
feat: add ili9341
1 parent 7faa4dc commit 9c8453b

File tree

5 files changed

+221
-0
lines changed

5 files changed

+221
-0
lines changed

‎src/ili9341-element.stories.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { html } from 'lit-html';
2+
import { drawWokwiW } from './utils/logo';
3+
import './ili9341-element';
4+
5+
export default {
6+
title: 'ILI9341',
7+
component: 'wokwi-ili9341',
8+
};
9+
10+
function drawLogo(canvas: HTMLCanvasElement) {
11+
const ctx = canvas.getContext('2d');
12+
if (!ctx) {
13+
return;
14+
}
15+
setInterval(() => {
16+
ctx.fillStyle = '#ddd';
17+
ctx.fillRect(0, 0, canvas.width, canvas.height);
18+
drawWokwiW(ctx, 6, 120 * Math.random(), 220 * Math.random());
19+
}, 1000);
20+
}
21+
22+
export const Default = () => html` <wokwi-ili9341></wokwi-ili9341> `;
23+
24+
export const Logo = () =>
25+
html` <wokwi-ili9341 @canvas-ready=${(e) => drawLogo(e.target.canvas)}></wokwi-ili9341> `;

‎src/ili9341-element.ts

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { css, customElement, html, LitElement } from 'lit-element';
2+
import { ElementPin, spi } from './pin';
3+
4+
@customElement('wokwi-ili9341')
5+
export class ILI9341Element extends LitElement {
6+
readonly screenWidth = 240;
7+
readonly screenHeight = 320;
8+
9+
readonly pinInfo: ElementPin[] = [
10+
{ name: 'VCC', x: 48.3, y: 287.2, signals: [{ type: 'power', signal: 'VCC' }] },
11+
{ name: 'GND', x: 57.9012, y: 287.2, signals: [{ type: 'power', signal: 'GND' }] },
12+
{ name: 'CS', x: 67.5024, y: 287.2, signals: [spi('SS')] },
13+
{ name: 'RST', x: 77.1036, y: 287.2, signals: [] },
14+
{ name: 'D/C', x: 86.7048, y: 287.2, signals: [] },
15+
{ name: 'MOSI', x: 96.306, y: 287.2, signals: [spi('MOSI')] },
16+
{ name: 'SCK', x: 105.9072, y: 287.2, signals: [spi('SCK')] },
17+
{ name: 'LED', x: 115.5084, y: 287.2, signals: [] },
18+
{ name: 'MISO', x: 125.1096, y: 287.2, signals: [spi('MISO')] },
19+
];
20+
21+
static get styles() {
22+
return css`
23+
.container {
24+
position: relative;
25+
}
26+
27+
.container > canvas {
28+
position: absolute;
29+
left: 8px;
30+
top: 28px;
31+
width: 159px;
32+
height: 212px;
33+
}
34+
35+
.pixelated {
36+
image-rendering: crisp-edges; /* firefox */
37+
image-rendering: pixelated; /* chrome/webkit */
38+
}
39+
`;
40+
}
41+
42+
get canvas() {
43+
return this.shadowRoot?.querySelector('canvas');
44+
}
45+
46+
firstUpdated() {
47+
this.dispatchEvent(new CustomEvent('canvas-ready'));
48+
}
49+
50+
render() {
51+
const { screenWidth, screenHeight } = this;
52+
return html`
53+
<div class="container">
54+
<svg
55+
width="46.5mm"
56+
height="77.6mm"
57+
version="1.1"
58+
viewBox="0 0 46.5 77.6"
59+
xmlns="http://www.w3.org/2000/svg"
60+
>
61+
<!-- Board -->
62+
<path
63+
d="m8.8e-7 3.37e-6v77.6h46.5v-77.6zm43.1 1.78a1.8 1.8 0 0 1 1.8 1.8 1.8 1.8 0 0 1-1.8 1.8 1.8 1.8 0 0 1-1.8-1.8 1.8 1.8 0 0 1 1.8-1.8zm-39.4 0.0946a1.8 1.8 0 0 1 1.8 1.8 1.8 1.8 0 0 1-1.8 1.8 1.8 1.8 0 0 1-1.8-1.8 1.8 1.8 0 0 1 1.8-1.8zm0 70.7a1.8 1.8 0 0 1 1.8 1.8 1.8 1.8 0 0 1-1.8 1.8 1.8 1.8 0 0 1-1.8-1.8 1.8 1.8 0 0 1 1.8-1.8zm39.4 0.0946a1.8 1.8 0 0 1 1.8 1.8 1.8 1.8 0 0 1-1.8 1.8 1.8 1.8 0 0 1-1.8-1.8 1.8 1.8 0 0 1 1.8-1.8zm-31 2.68h1.41v1.34h-1.41zm2.53 0h1.41v1.34h-1.41zm2.56 0h1.41v1.34h-1.41zm2.54 0h1.41v1.34h-1.41zm12.7 0h1.41v1.34h-1.41zm-10.1 0.0119h1.41v1.34h-1.41zm2.54 0.0119h1.41v1.34h-1.41zm5.08 0h1.41v1.34h-1.41zm-2.53 0.0114h1.41v1.34h-1.41z"
64+
fill="#931917"
65+
stroke-width="0"
66+
/>
67+
68+
<!-- LCD Panel -->
69+
<path d="m0.17 5.65v64.6h46.1v-64.6zm6.46 62.9h34.7v1.7h-34.7z" fill="#f6e1f1" />
70+
<rect
71+
x="11.2"
72+
y="66.7"
73+
width="24.2"
74+
height="6.24"
75+
rx="1"
76+
ry="1"
77+
fill="#bdab16"
78+
opacity=".4"
79+
/>
80+
<rect x="1.62" y="6.79" width="43.3" height="61.9" />
81+
<rect
82+
x="10.8"
83+
y="74.6"
84+
width="24.2"
85+
height="2.83"
86+
fill="none"
87+
stroke="#fff"
88+
stroke-width=".27"
89+
/>
90+
91+
<!-- Pins -->
92+
<g fill="#ccc">
93+
<path
94+
d="m11.8 75v1.99h1.98v-1.99zm0.988 0.397a0.6 0.6 0 0 1 0.0041 0 0.6 0.6 0 0 1 0.6 0.6 0.6 0.6 0 0 1-0.6 0.6 0.6 0.6 0 0 1-0.6-0.6 0.6 0.6 0 0 1 0.596-0.6z"
95+
/>
96+
<path
97+
id="round-pin"
98+
d="m15.3 75a1 1 0 0 0-0.987 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-0.0134 0zm0.0093 0.4a0.6 0.6 0 0 1 0.0041 0 0.6 0.6 0 0 1 0.6 0.6 0.6 0.6 0 0 1-0.6 0.6 0.6 0.6 0 0 1-0.6-0.6 0.6 0.6 0 0 1 0.596-0.6z"
99+
/>
100+
<use xlink:href="#round-pin" x="2.54" />
101+
<use xlink:href="#round-pin" x="5.08" />
102+
<use xlink:href="#round-pin" x="7.62" />
103+
<use xlink:href="#round-pin" x="10.16" />
104+
<use xlink:href="#round-pin" x="12.7" />
105+
<use xlink:href="#round-pin" x="15.24" />
106+
<use xlink:href="#round-pin" x="17.78" />
107+
</g>
108+
<text font-family="monospace" font-size="3.5px" fill="#fff">
109+
<tspan x="8.2" y="76.9">1</tspan>
110+
<tspan x="35.6" y="76.9">9</tspan>
111+
<tspan x="14.2" y="4.3" font-size="4.6px">ILI9431</tspan>
112+
</text>
113+
</svg>
114+
<canvas width="${screenWidth}" height="${screenHeight}" class="pixelated"></canvas>
115+
</div>
116+
`;
117+
}
118+
}

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ export { ESP32DevkitV1Element } from './esp32-devkit-v1-element';
4343
export { KY040Element } from './ky-040-element';
4444
export { PhotoresistorSensorElement } from './photoresistor-sensor-element';
4545
export { RGBLedElement } from './rgb-led-element';
46+
export { ILI9341Element } from './ili9341-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import { ESP32DevkitV1Element } from './esp32-devkit-v1-element';
4242
import { KY040Element } from './ky-040-element';
4343
import { PhotoresistorSensorElement } from './photoresistor-sensor-element';
4444
import { RGBLedElement } from './rgb-led-element';
45+
import { ILI9341Element } from './ILI9341-element';
4546

4647
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
4748

@@ -89,6 +90,7 @@ declare global {
8990
'wokwi-ky-040': WokwiElement<KY040Element>;
9091
'wokwi-photoresistor-sensor': WokwiElement<PhotoresistorSensorElement>;
9192
'wokwi-rgb-led': WokwiElement<RGBLedElement>;
93+
'wokwi-ili9341': WokwiElement<ILI9341Element>;
9294
}
9395
}
9496
}

‎src/utils/logo.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
export function drawWokwiW(ctx: CanvasRenderingContext2D, scale = 1, x = 0, y = 0) {
2+
ctx.save();
3+
ctx.transform(scale, 0, 0, scale, x, y);
4+
5+
ctx.fillStyle = '#000';
6+
ctx.beginPath();
7+
ctx.moveTo(4.19, 15.53);
8+
ctx.bezierCurveTo(3.56, 14.79, 3.43, 13.67, 3.87, 12.85);
9+
ctx.bezierCurveTo(4.28, 12.1, 4.22, 11.71, 3.29, 9);
10+
ctx.bezierCurveTo(2.35, 6.27, 2.17, 5.96, 1.35, 5.55);
11+
ctx.bezierCurveTo(-0.56, 4.6, -0.41, 2.1, 1.6, 1.55);
12+
ctx.bezierCurveTo(3.49, 1.03, 4.97, 2.94, 4.01, 4.65);
13+
ctx.bezierCurveTo(3.6, 5.4, 3.65, 5.77, 4.61, 8.52);
14+
ctx.bezierCurveTo(5.58, 11.32, 5.73, 11.59, 6.57, 11.98);
15+
ctx.bezierCurveTo(7.76, 12.52, 8.19, 13.86, 7.54, 15);
16+
ctx.bezierCurveTo(6.89, 16.14, 4.97, 16.44, 4.19, 15.53);
17+
ctx.moveTo(6.1, 14.53);
18+
ctx.bezierCurveTo(6.57, 14.15, 6.53, 13.73, 6, 13.43);
19+
ctx.bezierCurveTo(5.76, 13.29, 5.46, 13.24, 5.32, 13.32);
20+
ctx.bezierCurveTo(4.9, 13.55, 4.91, 14.33, 5.34, 14.58);
21+
ctx.bezierCurveTo(5.57, 14.71, 5.91, 14.68, 6.1, 14.53);
22+
ctx.moveTo(2.61, 4.17);
23+
ctx.bezierCurveTo(2.96, 3.98, 2.84, 3.09, 2.43, 2.86);
24+
ctx.bezierCurveTo(2.09, 2.67, 1.44, 3.13, 1.45, 3.55);
25+
ctx.bezierCurveTo(1.47, 3.93, 2.26, 4.36, 2.61, 4.17);
26+
ctx.moveTo(11.94, 14.99);
27+
ctx.bezierCurveTo(11.31, 14.26, 11.18, 13.13, 11.62, 12.31);
28+
ctx.bezierCurveTo(12.03, 11.56, 11.97, 11.17, 11.04, 8.47);
29+
ctx.bezierCurveTo(10.1, 5.74, 9.92, 5.42, 9.11, 5.02);
30+
ctx.bezierCurveTo(7.19, 4.07, 7.34, 1.56, 9.35, 1.01);
31+
ctx.bezierCurveTo(11.24, 0.5, 12.72, 2.4, 11.76, 4.12);
32+
ctx.bezierCurveTo(11.35, 4.87, 11.4, 5.23, 12.36, 7.99);
33+
ctx.bezierCurveTo(13.33, 10.78, 13.48, 11.06, 14.32, 11.44);
34+
ctx.bezierCurveTo(15.51, 11.99, 15.94, 13.33, 15.29, 14.47);
35+
ctx.bezierCurveTo(14.64, 15.61, 12.72, 15.91, 11.94, 14.99);
36+
ctx.moveTo(13.86, 13.99);
37+
ctx.bezierCurveTo(14.32, 13.61, 14.28, 13.2, 13.75, 12.89);
38+
ctx.bezierCurveTo(13.51, 12.76, 13.21, 12.71, 13.07, 12.78);
39+
ctx.bezierCurveTo(12.65, 13.01, 12.66, 13.8, 13.1, 14.04);
40+
ctx.bezierCurveTo(13.32, 14.17, 13.66, 14.15, 13.86, 13.99);
41+
ctx.moveTo(10.36, 3.63);
42+
ctx.bezierCurveTo(10.71, 3.45, 10.59, 2.56, 10.18, 2.33);
43+
ctx.bezierCurveTo(9.85, 2.13, 9.19, 2.59, 9.2, 3.01);
44+
ctx.bezierCurveTo(9.22, 3.4, 10.01, 3.83, 10.36, 3.63);
45+
ctx.moveTo(4.54, 16.22);
46+
ctx.bezierCurveTo(2.52, 15.03, 3.24, 12.04, 5.56, 12.04);
47+
ctx.bezierCurveTo(6.31, 12.04, 6.38, 11.86, 7.42, 10.87);
48+
ctx.bezierCurveTo(8.47, 9.88, 10.26, 8.24, 11.46, 7.65);
49+
ctx.bezierCurveTo(11.78, 8.1, 12.03, 9.26, 12.07, 9.39);
50+
ctx.bezierCurveTo(11.29, 9.39, 9.31, 10.91, 8.48, 11.93);
51+
ctx.bezierCurveTo(7.67, 12.92, 7.49, 13.33, 7.55, 14.12);
52+
ctx.bezierCurveTo(7.6, 14.85, 7.47, 15.23, 7.01, 15.66);
53+
ctx.bezierCurveTo(6.23, 16.39, 5.22, 16.62, 4.54, 16.22);
54+
ctx.moveTo(6.1, 14.53);
55+
ctx.bezierCurveTo(6.32, 13.97, 6.08, 13.62, 5.47, 13.62);
56+
ctx.bezierCurveTo(4.88, 13.62, 4.57, 14.03, 4.78, 14.56);
57+
ctx.bezierCurveTo(4.97, 15.08, 5.9, 15.05, 6.1, 14.53);
58+
ctx.moveTo(13.19, 12.05);
59+
ctx.bezierCurveTo(13.19, 12.05, 13.47, 11.49, 14.58, 8.34);
60+
ctx.bezierCurveTo(16.02, 4.26, 16.09, 3.93, 15.67, 3.07);
61+
ctx.bezierCurveTo(14.79, 1.23, 16.51, -0.61, 18.37, 0.19);
62+
ctx.bezierCurveTo(19.06, 0.49, 19.3, 0.78, 19.6, 1.68);
63+
ctx.bezierCurveTo(19.93, 2.67, 19.9, 2.87, 19.36, 3.4);
64+
ctx.bezierCurveTo(19.02, 3.73, 18.46, 4.12, 18.13, 4.26);
65+
ctx.bezierCurveTo(17.66, 4.46, 17.15, 5.51, 15.94, 8.88);
66+
ctx.bezierCurveTo(14.5, 12.87, 14.88, 11.69, 15.27, 12.42);
67+
ctx.bezierCurveTo(16.23, 14.21, 15.01, 12.91, 13.19, 12.05);
68+
ctx.moveTo(18.25, 2.2);
69+
ctx.bezierCurveTo(18.25, 1.6, 17.9, 1.37, 17.33, 1.6);
70+
ctx.bezierCurveTo(17.08, 1.7, 16.85, 1.91, 16.82, 2.06);
71+
ctx.bezierCurveTo(16.73, 2.53, 17.36, 3.01, 17.82, 2.83);
72+
ctx.bezierCurveTo(18.06, 2.73, 18.26, 2.45, 18.25, 2.2);
73+
ctx.fill();
74+
ctx.restore();
75+
}

0 commit comments

Comments
 (0)