feat(lcd1602): screen only render mode

Useful for taking screen shots during automated tests

Author: urish

src/lcd1602-element.stories.ts

@@ -16,6 +16,7 @@ interface LCD1602Args {
   cursorY: number;
   pins: string;
   text: string;
+  screenOnly: boolean;
 }
 
 const meta: Meta<LCD1602Args> = {
@@ -31,6 +32,7 @@ const meta: Meta<LCD1602Args> = {
     color: 'black',
     cursor: false,
     pins: 'full',
+    screenOnly: false,
   } satisfies LCD1602Args,
   parameters: {
     docs: {
@@ -55,6 +57,7 @@ const Template = (args: LCD1602Args) => html`
     .color=${args.color}
     .background=${args.background}
     .pins=${args.pins}
+    .screenOnly=${args.screenOnly}
   ></wokwi-lcd1602>
 `;
 
@@ -119,3 +122,9 @@ NoPins.args = {
   text: 'Look ma!           I got no pins',
   pins: 'none',
 };
+
+export const ScreenOnly: Story = Template.bind({});
+ScreenOnly.args = {
+  text: 'Screen Only',
+  screenOnly: true,
+};

src/lcd1602-element.ts

@@ -24,6 +24,7 @@ export class LCD1602Element extends LitElement {
   @property() cursorY = 0;
   @property() backlight = true;
   @property() pins: 'full' | 'i2c' | 'none' = 'full';
+  @property() screenOnly = false;
 
   protected numCols = 16;
   protected numRows = 2;
@@ -221,8 +222,14 @@ export class LCD1602Element extends LitElement {
       background in backgroundColors ? backgroundColors[background] : backgroundColors;
 
     const panelWidth = cols * 3.5125;
-    const width = panelWidth + 23.8;
-    const height = panelHeight + 24.5;
+    const width = this.screenOnly ? panelWidth : panelWidth + 23.8;
+    const height = this.screenOnly ? panelHeight : panelHeight + 24.5;
+
+    const panelX = 12.45;
+    const panelY = 12.55;
+    const viewBox = this.screenOnly
+      ? `${panelX} ${panelY} ${panelWidth} ${panelHeight}`
+      : `0 0 ${width} ${height}`;
 
     // Dimensions according to:
     // https://www.winstar.com.tw/products/character-lcd-display-module/16x2-lcd.html
@@ -231,7 +238,7 @@ export class LCD1602Element extends LitElement {
         width="${width}mm"
         height="${height}mm"
         version="1.1"
-        viewBox="0 0 ${width} ${height}"
+        viewBox="${viewBox}"
         style="font-size: 1.5px; font-family: monospace"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -277,13 +284,17 @@ export class LCD1602Element extends LitElement {
         ${pins === 'i2c' ? this.renderI2CPins() : null}
         ${pins === 'full' ? this.renderPins(panelHeight) : null}
         <rect
-          x="12.45"
-          y="12.55"
+          x="${panelX}"
+          y="${panelY}"
           width="${panelWidth}"
           height="${panelHeight}"
           fill="url(#characters)"
         />
-        <path d="${this.path(characters)}" transform="translate(12.45, 12.55)" fill="${color}" />
+        <path
+          d="${this.path(characters)}"
+          transform="translate(${panelX}, ${panelY})"
+          fill="${color}"
+        />
         ${this.renderCursor()}
       </svg>
     `;

src/lcd2004-element.stories.ts

@@ -20,3 +20,6 @@ export const BlueBackground = () =>
 export const I2cPins = () =>
   html`<wokwi-lcd2004 pins="i2c" text="I²C Pins" .font=${fontA02}></wokwi-lcd2004>`;
 I2cPins.storyName = 'I2C Pins';
+
+export const ScreenOnly = () =>
+  html`<wokwi-lcd2004 .screenOnly=${true} text="Screen Only"></wokwi-lcd2004>`;