feat(lcd1602): backlight support

Author: urish

src/lcd1602-element.stories.ts

@@ -1,4 +1,4 @@
-import { withKnobs, text, select, number } from '@storybook/addon-knobs';
+import { withKnobs, text, select, number, boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { fontA02 } from './lcd1602-font-a02';
@@ -18,6 +18,7 @@ storiesOf('LCD1602', module)
         cursor=${select('cursor', ['off', 'blink', 'underline'], 'off')}
         cursorX=${number('cursorX', 0, { min: 0, max: 15 })}
         cursorY=${number('cursorY', 0, { min: 0, max: 1 })}
+        .backlight=${boolean('backlight', true)}
       ></wokwi-lcd1602>
     `
   )
@@ -54,6 +55,18 @@ storiesOf('LCD1602', module)
       ></wokwi-lcd1602>
     `
   )
+  .add(
+    'Display off (green)',
+    () => html`
+      <wokwi-lcd1602 .backlight=${false}></wokwi-lcd1602>
+    `
+  )
+  .add(
+    'Display off (blue)',
+    () => html`
+      <wokwi-lcd1602 .backlight=${false} color="white" background="blue"></wokwi-lcd1602>
+    `
+  )
   .add(
     'Font A02',
     () => html`

src/lcd1602-element.ts

@@ -20,6 +20,7 @@ export class LCD1602Element extends LitElement {
   @property() cursor: ICursorType = 'off';
   @property() cursorX = 0;
   @property() cursorY = 0;
+  @property() backlight = true;
 
   static get styles() {
     return css`
@@ -96,6 +97,7 @@ export class LCD1602Element extends LitElement {
   render() {
     const { color, characters, background } = this;
 
+    const darken = this.backlight ? 0 : 0.5;
     const actualBgColor =
       background in backgroundColors ? backgroundColors[background] : backgroundColors;
 
@@ -124,6 +126,7 @@ export class LCD1602Element extends LitElement {
         <rect width="80" height="36" fill="#087f45" />
         <rect x="4.95" y="5.7" width="71.2" height="25.2" />
         <rect x="7.55" y="10.3" width="66" height="16" rx="1.5" ry="1.5" fill="${actualBgColor}" />
+        <rect x="7.55" y="10.3" width="66" height="16" rx="1.5" ry="1.5" opacity="${darken}" />
         <rect x="12.45" y="12.55" width="56.2" height="11.5" fill="url(#characters)" />
         <path d="${this.path(characters)}" transform="translate(12.45, 12.55)" fill="${color}" />
         ${this.renderCursor()}