LCD 20x4 Display with Arduino: Hello World in Velxio

Introduction

Welcome to another Velxio tutorial! Today we’re going to build a classic Hello World project using a 20x4 LCD display and an Arduino Uno. This is a perfect project for beginners who want to learn how to interface character LCDs with microcontrollers. We’ll use the popular LiquidCrystal library, which makes controlling the display a breeze.

By the end of this post, you’ll be able to wire up a 20x4 LCD, write code to display text on multiple lines, and even show dynamic data like uptime. Let’s dive in!

Circuit Walkthrough

Our circuit consists of two main components: an Arduino Uno and a 20x4 LCD (model wokwi-lcd2004). The LCD has 16 pins, but we only need 6 of them for data and control. Here’s the wiring:

• RS (Register Select) – connected to Arduino pin 12 (green wire)
• E (Enable) – connected to Arduino pin 11 (green wire)
• D4 – connected to Arduino pin 5 (blue wire)
• D5 – connected to Arduino pin 4 (blue wire)
• D6 – connected to Arduino pin 3 (blue wire)
• D7 – connected to Arduino pin 2 (blue wire)

We’re using 4-bit mode, which only requires four data lines (D4–D7) instead of eight. This saves precious I/O pins. The LCD also needs power (5V) and ground, but in Velxio these are automatically connected when you place the components.

To build this circuit in Velxio:

1. Open the LCD Hello World example or start a new project.
2. Use the component picker to add an Arduino Uno and a 20x4 LCD.
3. Click on the pins and drag wires to match the connections above. You can change wire colors by clicking the color swatch.
4. Your canvas should look like the circuit diagram above.

Code Walkthrough

Now let’s look at the code. Open the code editor in Velxio (you’ll see the Monaco editor with syntax highlighting). Here’s the full sketch:

// LiquidCrystal Library - Hello World
// Demonstrates the use a 20x4 LCD display

#include <LiquidCrystal.h>

// initialize the library by associating any needed LCD interface pin
// with the arduino pin number it is connected to
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {
  // set up the LCD's number of columns and rows:
  lcd.begin(20, 4);
  // Print a message to the LCD.
  lcd.print("Hello, Arduino!");
  lcd.setCursor(0, 1);
  lcd.print("Velxio Emulator");
  lcd.setCursor(0, 2);
  lcd.print("LCD 2004 Test");
}

void loop() {
  // set the cursor to column 0, line 3
  lcd.setCursor(0, 3);
  // print the number of seconds since reset:
  lcd.print("Uptime: ");
  lcd.print(millis() / 1000);
}

How it works

1. Include the library: #include <LiquidCrystal.h> gives us access to all the LCD functions.
2. Define pins: We create constants for the pin numbers: rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2. These match our wiring.
3. Create LCD object: LiquidCrystal lcd(rs, en, d4, d5, d6, d7); tells the library which pins are connected.
4. In setup():
   • lcd.begin(20, 4); initializes the display with 20 columns and 4 rows.
   • lcd.print() writes text at the current cursor position.
   • lcd.setCursor(col, row) moves the cursor to a specific position (0-indexed).
5. In loop():
   • We move the cursor to row 3, column 0.
   • Print “Uptime: ” followed by millis() / 1000 (seconds since reset).

To run the code, click the Compile button in the toolbar, then Run.

Key Concepts

• 4-bit vs 8-bit mode: Using only 4 data lines (D4–D7) saves pins. The LiquidCrystal library handles the protocol.
• Cursor positioning: setCursor(col, row) – remember rows and columns start at 0.
• millis(): Returns milliseconds since the program started. Dividing by 1000 gives seconds.
• Library management: Velxio includes the LiquidCrystal library by default. You can add more libraries via the Library Manager.

Common Pitfalls & Debugging Tips

• Wiring errors: Double-check that each wire connects the correct pins. A swapped D4 and D5 will cause garbled characters.
• Wrong begin() dimensions: If you use lcd.begin(16, 2) with a 20x4 display, text may appear truncated or misaligned.
• Missing library: If you get a compile error about LiquidCrystal.h, make sure the library is installed (it should be by default).
• Cursor not visible: The cursor is invisible by default. Use lcd.cursor() to show an underscore cursor.
• Text not updating: In the loop, you may need to clear the line before printing new data. Use lcd.setCursor(0, 3); lcd.print(" "); to clear the line.

Suggested Extensions

Once you have the basic Hello World working, try these enhancements:

1. Scroll text: Use lcd.scrollDisplayLeft() or lcd.scrollDisplayRight() to create scrolling messages.
2. Display sensor data: Read an analog sensor (e.g., potentiometer) and display its value on the LCD.
3. Custom characters: Create your own symbols using lcd.createChar().
4. Button input: Add a button to change the displayed message.
5. Multiple screens: Use a state machine to cycle through different information pages.

Try It Yourself!

Ready to build your own LCD project? Open the LCD Hello World example in Velxio and start experimenting. You can modify the code, change the wiring, or add new components – all in your browser, no hardware required.

Happy making!