Skip to content

Commit 44785fd

Browse files
urishurish
committed
fix(ssd1306): image blurry when zoomed-in
we now make it pixelated, which is way more cool 😎
1 parent 2a5d791 commit 44785fd

File tree

2 files changed

+60
-3
lines changed

2 files changed

+60
-3
lines changed

‎src/ssd1306-element.stories.ts‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,55 @@ import { storiesOf } from '@storybook/web-components';
33
import { html } from 'lit-html';
44
import './ssd1306-element';
55

6+
// prettier-ignore
7+
const logoBitmap = new Uint8Array([
8+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
9+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
10+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
11+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
12+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,252,63,255,255,255,255,255,255,255,255,255,255,
13+
255,255,255,255,248,31,255,255,255,255,255,255,255,255,255,255,143,255,255,159,240,31,252,63,255,127,255,255,255,255,255,191,7,231,254,7,240,
14+
15,240,7,254,63,243,195,255,207,255,14,3,195,254,7,241,143,192,3,254,31,225,195,255,143,254,14,35,129,252,3,241,143,128,1,254,31,225,195,255,
15+
135,254,14,51,0,252,99,241,143,0,1,254,31,195,225,255,7,254,30,51,24,252,99,240,15,3,224,254,31,131,225,255,7,254,62,35,24,252,99,248,30,15,
16+
240,254,31,131,225,255,7,252,62,3,24,252,3,248,30,31,248,254,63,7,225,254,7,252,63,3,8,254,3,248,60,31,248,126,63,7,241,254,7,252,63,7,129,255,
17+
7,240,252,127,252,126,62,31,240,254,7,252,127,255,193,255,135,240,252,127,252,126,60,31,240,254,3,252,127,223,225,255,199,241,248,127,252,126,
18+
56,63,240,252,3,248,127,159,241,255,195,241,248,255,252,126,48,127,248,252,3,248,127,31,241,255,227,241,248,255,252,126,16,127,248,124,35,248,
19+
255,31,248,255,227,227,240,255,252,126,0,255,248,124,99,240,254,31,248,255,227,227,240,255,252,126,1,255,248,120,99,240,254,31,248,255,243,227,
20+
240,255,252,126,3,255,252,120,99,241,254,31,248,255,225,227,241,255,252,124,99,255,252,120,99,241,254,31,248,255,225,199,241,255,252,124,99,
21+
255,252,120,99,225,254,31,252,127,193,199,241,255,252,124,99,255,252,56,225,227,254,31,252,127,129,199,241,255,252,124,3,255,252,48,225,227,
22+
254,63,252,127,0,199,241,255,252,126,3,255,252,48,241,227,254,63,252,126,8,143,241,255,252,126,1,255,254,48,241,195,254,63,254,60,24,143,241,
23+
255,252,126,1,255,254,49,241,199,254,63,254,60,56,15,241,255,248,126,32,255,254,33,241,199,254,63,254,56,124,15,240,255,248,126,48,127,254,1,
24+
241,135,254,63,254,16,252,31,240,255,248,254,56,63,254,3,240,143,254,63,254,1,248,15,248,255,240,254,56,63,254,3,240,143,254,63,254,1,248,15,
25+
248,127,225,254,60,31,254,3,240,15,254,63,254,3,248,15,248,63,225,254,62,15,255,7,248,15,254,63,254,3,249,143,252,31,193,254,63,7,255,7,248,31,
26+
254,63,252,3,249,207,252,15,131,254,63,3,255,7,248,31,254,63,252,99,248,143,254,0,3,254,63,129,255,7,248,31,254,63,252,99,248,15,254,0,7,254,63,
27+
192,255,7,248,63,254,63,252,35,248,15,255,0,15,254,63,224,255,7,248,63,254,63,252,3,252,31,255,128,31,254,63,240,255,135,252,63,254,63,254,7,254,
28+
63,255,224,127,254,63,253,255,143,252,63,254,63,254,7,255,255,255,255,255,255,63,255,255,255,254,127,254,63,255,31,255,255,255,255,255,255,255,
29+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
30+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
31+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
32+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
33+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
34+
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255]);
35+
36+
function toImageData(bitmap: Uint8Array, width: number, height: number) {
37+
const result = new ImageData(width, height);
38+
for (let y = 0; y < height; y++) {
39+
for (let x = 0; x < width; x++) {
40+
const pixIndex = Math.floor((y * width + x) / 8);
41+
const pixValue = bitmap[pixIndex] & (1 << (7 - (x % 8))) ? 0xff : 0;
42+
const pixOffset = (y * width + x) * 4;
43+
result.data.fill(pixValue, pixOffset, pixOffset + 3);
44+
result.data[pixOffset + 3] = 0xff;
45+
}
46+
}
47+
return result;
48+
}
49+
650
storiesOf('SSD1306', module)
751
.addParameters({ component: 'wokwi-ssd1306' })
852
.addDecorator(withKnobs)
9-
.add('Default', () => html`<wokwi-ssd1306></wokwi-ssd1306>`);
53+
.add('Default', () => html`<wokwi-ssd1306></wokwi-ssd1306>`)
54+
.add(
55+
'Wokwi logo',
56+
() => html`<wokwi-ssd1306 .imageData=${toImageData(logoBitmap, 128, 64)}></wokwi-ssd1306>`
57+
);

‎src/ssd1306-element.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Reference: https://cdn-learn.adafruit.com/assets/assets/000/036/494/original/lcds___displays_fabprint.png?1476374574
2-
import { customElement, html, LitElement, property, SVGTemplateResult } from 'lit-element';
2+
import { customElement, html, LitElement, property, SVGTemplateResult, css } from 'lit-element';
33
import { ElementPin, i2c } from './pin';
44

55
type CanvasContext = CanvasRenderingContext2D | null | undefined;
@@ -31,6 +31,15 @@ export class SSD1306Element extends LitElement {
3131
{ name: 'GND', x: 103.5, y: 12, signals: [{ type: 'power', signal: 'GND' }] },
3232
];
3333

34+
static get styles() {
35+
return css`
36+
.pixelated {
37+
image-rendering: crisp-edges; /* firefox */
38+
image-rendering: pixelated; /* chrome/webkit */
39+
}
40+
`;
41+
}
42+
3443
constructor() {
3544
super();
3645
this.imageData = new ImageData(this.screenWidth, this.screenHeight);
@@ -83,7 +92,7 @@ export class SSD1306Element extends LitElement {
8392
width="${screenWidth}"
8493
height="${screenHeight}"
8594
>
86-
<canvas width="${screenWidth}" height="${screenHeight}"></canvas>
95+
<canvas width="${screenWidth}" height="${screenHeight}" class="pixelated"></canvas>
8796
</foreignObject>
8897
</g>
8998

0 commit comments

Comments
 (0)