feat(lcd1602): blink+underline cursor

support for display blinking + underline cursor together

Author: urish

src/index.ts

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

src/lcd1602-element.stories.ts

@@ -1,4 +1,4 @@
-import { withKnobs, text, select, number, boolean } from '@storybook/addon-knobs';
+import { withKnobs, text, number, boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { fontA02 } from './lcd1602-font-a02';
@@ -15,7 +15,8 @@ storiesOf('LCD1602', module)
     () => html`
       <wokwi-lcd1602
         .characters="${encode(text('value', helloWorld))}"
-        cursor=${select('cursor', ['off', 'blink', 'underline'], 'off')}
+        .cursor=${boolean('cursor', false)}
+        .blink=${boolean('blink', false)}
         cursorX=${number('cursorX', 0, { min: 0, max: 15 })}
         cursorY=${number('cursorY', 0, { min: 0, max: 1 })}
         .backlight=${boolean('backlight', true)}
@@ -28,8 +29,8 @@ storiesOf('LCD1602', module)
       <wokwi-lcd1602
         color="white"
         background="blue"
+        blink="true"
         .characters="${encode(helloWorld)}"
-        cursor="blink"
       ></wokwi-lcd1602>
     `
   )
@@ -38,18 +39,18 @@ storiesOf('LCD1602', module)
     () => html`
       <wokwi-lcd1602
         .characters="${encode(helloWorld)}"
-        cursor="blink"
+        blink="true"
         cursorX="7"
         cursorY="1"
       ></wokwi-lcd1602>
     `
   )
   .add(
-    'Underline cursor',
+    'Cursor',
     () => html`
       <wokwi-lcd1602
         .characters="${encode(helloWorld)}"
-        cursor="underline"
+        cursor="true"
         cursorX="7"
         cursorY="1"
       ></wokwi-lcd1602>
@@ -73,7 +74,8 @@ storiesOf('LCD1602', module)
       <wokwi-lcd1602
         .characters="${encode(text('value', symbols))}"
         .font=${fontA02}
-        cursor=${select('cursor', ['off', 'blink', 'underline'], 'off')}
+        .cursor=${boolean('cursor', false)}
+        .blink=${boolean('blink', false)}
         cursorX=${number('cursorX', 0, { min: 0, max: 15 })}
         cursorY=${number('cursorY', 0, { min: 0, max: 1 })}
       ></wokwi-lcd1602>

src/lcd1602-element.ts

@@ -1,8 +1,6 @@
 import { customElement, html, LitElement, property, css, svg } from 'lit-element';
 import { fontA00 } from './lcd1602-font-a00';
 
-export type ICursorType = 'off' | 'blink' | 'underline';
-
 const ROWS = 2;
 const COLS = 16;
 
@@ -20,7 +18,8 @@ export class LCD1602Element extends LitElement {
   @property() background = 'green';
   @property({ type: Array }) characters: number[] | Uint8Array = new Uint8Array(32);
   @property() font = fontA00;
-  @property() cursor: ICursorType = 'off';
+  @property() cursor = false;
+  @property() blink = false;
   @property() cursorX = 0;
   @property() cursorY = 0;
   @property() backlight = true;
@@ -77,9 +76,10 @@ export class LCD1602Element extends LitElement {
       return null;
     }
 
-    switch (this.cursor) {
-      case 'blink':
-        return svg`
+    const result = [];
+
+    if (this.blink) {
+      result.push(svg`
         <rect x="${xOffset}" y="${yOffset}" width="2.95" height="5.55" fill="${this.color}">
           <animate
             attributeName="opacity"
@@ -89,16 +89,17 @@ export class LCD1602Element extends LitElement {
             repeatCount="indefinite"
           />
         </rect>
-      `;
-
-      case 'underline': {
-        const y = yOffset + 0.7 * 7;
-        return svg`<rect x="${xOffset}" y="${y}" width="2.95" height="0.65" fill="${this.color}" />`;
-      }
+      `);
+    }
 
-      default:
-        return null;
+    if (this.cursor) {
+      const y = yOffset + 0.7 * 7;
+      result.push(
+        svg`<rect x="${xOffset}" y="${y}" width="2.95" height="0.65" fill="${this.color}" />`
+      );
     }
+
+    return result;
   }
 
   render() {