feat(lcd1602): fonts from the HD44780 datasheet

Added A00 and A02 fonts

Author: urish

src/font8x5.ts

@@ -3,3 +3,5 @@ export { PushbuttonElement } from './pushbutton-element';
 export { ResistorElement } from './resistor-element';
 export { SevenSegmentElement } from './7segment-element';
 export { LCD1602Element, ICursorType } from './lcd1602-element';
+export { fontA00 } from './lcd1602-font-a00';
+export { fontA02 } from './lcd1602-font-a02';

src/index.ts

@@ -1,10 +1,12 @@
 import { withKnobs, text, select, number } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { fontA02 } from './lcd1602-font-a02';
 import './lcd1602-element';
 
 const encode = (s: string) => new Uint8Array(s.split('').map(c => c.charCodeAt(0)));
 const helloWorld = 'Hello,           World!';
+const symbols = '\x10 I \x9d Symbols! \x11\xab \x14\x18\x17\x1e \x91\x98\x96 \x93\x97\xa9 \xbb';
 
 storiesOf('LCD1602', module)
   .addDecorator(withKnobs)
@@ -51,4 +53,16 @@ storiesOf('LCD1602', module)
         cursorY="1"
       ></wokwi-lcd1602>
     `
+  )
+  .add(
+    'Font A02',
+    () => html`
+      <wokwi-lcd1602
+        .characters="${encode(text('value', symbols))}"
+        .font=${fontA02}
+        cursor=${select('cursor', ['off', 'blink', 'underline'], 'off')}
+        cursorX=${number('cursorX', 0, { min: 0, max: 15 })}
+        cursorY=${number('cursorY', 0, { min: 0, max: 1 })}
+      ></wokwi-lcd1602>
+    `
   );

src/lcd1602-element.stories.ts

@@ -1,5 +1,5 @@
 import { customElement, html, LitElement, property, css, svg } from 'lit-element';
-import { font8x5 } from './font8x5';
+import { fontA00 } from './lcd1602-font-a00';
 
 export type ICursorType = 'off' | 'blink' | 'underline';
 
@@ -16,7 +16,7 @@ export class LCD1602Element extends LitElement {
   @property() color = 'black';
   @property() background = 'green';
   @property({ type: Array }) characters: number[] | Uint8Array = new Uint8Array(32);
-  @property() font = font8x5;
+  @property() font = fontA00;
   @property() cursor: ICursorType = 'off';
   @property() cursorX = 0;
   @property() cursorY = 0;
@@ -55,7 +55,7 @@ export class LCD1602Element extends LitElement {
       for (let py = 0; py < 8; py++) {
         const row = this.font[characters[i] * 8 + py];
         for (let px = 0; px < 5; px++) {
-          if (row & (1 << (7 - px))) {
+          if (row & (1 << px)) {
             const x = (charX + px * xSpacing).toFixed(2);
             const y = (charY + py * ySpacing).toFixed(2);
             result.push(`M ${x} ${y}h0.55v0.65h-0.55Z`);