Vue LCD RGB

Vue.js RGB LCD Screen Component for Customizable Visuals

Explore the docs »

View Demo . Report Bug . Request Feature

Table Of Contents

• About the Project
  • Features
• Getting Started
• Usage
• License

About The Project

Customize visual displays in Vue.js effortlessly with the RGB LCD Screen Component. Perfect for dynamic user interfaces, it offers flexible options for color and pixel settings, enhancing your project with vibrant visuals and ease of integration. Ideal for diverse applications from dashboards to creative displays, it simplifies the process of creating engaging Vue.js interfaces.

Features

• Customizable Colors: Set background, border, and pixel colors to suit your design needs.
• Text Writing: Write text onto the LCD screen with adjustable row positioning.
• Blinking Effects: Create blinking animations for pixels or text to draw attention.
• Text Rotation: Rotate text within specified rows for dynamic display updates.
• Flexible Configuration: Options for adjusting pixel size, border size, and number of rows and columns.
• Text Centering: Center-align text within the LCD screen rows for balanced and visually appealing displays.

Getting Started

This is an example of how to list things you need to use the software and how to install them.

npm install npm@latest -g

npm run dev

Usage

<lcdRGB ref="lcdRGB" :options="options" />

  setup() {
    const lcdRGB: any = ref(null);

    /**
     * Options for the LCD screen
     */
    const options: Options = {
      backgroundColor: "#87ad34",
      borderColor: "#303030",
      borderSize: "10px",
      columns: 20,
      pixelOffColor: "#7b9f31",
      pixelOnColor: "#0b4233",
      pixelSize: 2,
      rows: 4,
    };

    onMounted(() => {
      if (lcdRGB.value) {
        lcdRGB.value.writeText("vue-lcdRGB", 0, true);
        lcdRGB.value.writeText("by Tony Myers", 2);
        lcdRGB.value.blink(true, 2, 13);
        lcdRGB.value.rotateRow("/~https://github.com/tony-nz ", 3, 500);
      }
    });

    return {
      lcdRGB,
      options,
    };
  },

License

Distributed under the MIT License. See LICENSE for more information.