Eigen Animaties Maken op 16x2 LCD Displays met Arduino

Onderdelen en benodigdheden

Apps en online diensten

• Arduino IDE
• Custom Glyph Generator (webtool)

Over dit project

De LiquidCrystal-bibliotheek maakt het eenvoudig om LCD's met Arduino te gebruiken. Een bijzonder interessante functie uit die bibliotheek is de createChar()-functie: u kunt aangepaste glyphs (tekens) maken, elk beschreven door een array van acht bytes, één voor elke rij. De vijf minst significante bits van elke byte bepalen de pixels in die rij. Bytes van hand schrijven om kunst te maken is niet precies het ideale proces voor een kunstenaar, dus heb ik een webtool gemaakt waarin u de glyphs kunt tekenen, en de code voor u wordt gegenereerd.

In dit artikel laat ik zien hoe u aangepaste animaties kunt maken met slechts een Arduino-bord en een LCD - wat u kunt gebruiken voor een heleboel projecten: u kunt een spel maken, een kort verhaal, een muziekvideo, of een statuspaneel versieren.

Het LCD aansluiten op de Arduino

Sluit het LCD aan op de Arduino - afhankelijk van het model van uw scherm, kunnen verschillende aansluitingen beter werken. Voor een van mijn schermen werkte het onderstaande schema goed - maar voor een ander moest ik een potentiometer gebruiken (zoals in de tutorial onder deze link) en de waarde van de weerstand aanpassen om de beste contrast te krijgen.

Zie de simulatie op TinkerCad via deze link.

Kunst maken

Ga naar de tool op https://tusindfryd.github.io/screenduino/ en maak uw kunst. Maximaal 8 secties kunnen tegelijkertijd worden gebruikt, dus als u geen nieuw vierkant kunt selecteren, controleer dan of u niet al 8 secties gebruikt.

Code genereren

Wanneer u klaar bent met uw eerste afbeelding, vink het vakje "alleen de functie" uit. Kopieer de code naar het klembord en upload deze naar uw Arduino. Op dit moment zou u uw afbeelding op het LCD moeten zien.

Meer frames maken

Zorg ervoor dat uw code bewaard is. U kunt nu het tweede frame maken. Teken gewoon een andere afbeelding. Wanneer u klaar bent, vink het vakje "alleen de functie" aan. Kopieer de functie en plak deze aan het einde van uw code. Hernoem de nieuwe functie naar iets anders - zoals image01() - zodat u de overzicht behoudt. Nu moet u de aanroep naar image() verplaatsen uit de setup()-functie naar de loop()-functie, een vertraging toevoegen, image01() aanroepen, en weer een vertraging toevoegen. Overweeg image() te hernoemen naar image00() voor consistentie. Uw loop()-functie zou er ongeveer zo uit moeten zien:

void loop() { 
  image00(); 
  delay(250); 
  image01(); 
  delay(250); 
}

Upload de sketch naar uw Arduino. Probeer meer frames toe te voegen of de vertragingstijd te wijzigen.

Code

Vlinder Metamorfose Animatie

Dit is voorbeeldcode (de code achter de vlindermetamorfose-animatie uit de gif).

/* vlinder metamorfose animatie 2021 ~ by tusindfryd deze code is in het publieke domein */
#include <LiquidCrystal.h>
LiquidCrystal lcd(12, 11, 5, 4, 3, 2); // RS, E, D4, D5, D6, D7

void setup() {
  lcd.begin(16, 2);
}

void loop() {
  image00(); delay(250);
  image01(); delay(250);
  image02(); delay(250);
  image03(); delay(700);
  image04(); delay(250);
  image05(); delay(250);
  image06(); delay(700);
  image07(); delay(1250);
}

void image00() {
  lcd.clear();
  byte image22[8] = {B00110, B01101, B11011, B10011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11000};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.setCursor(5, 1); lcd.write(byte(0));
  lcd.setCursor(6, 1); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(7, 0); lcd.write(byte(3));
  lcd.setCursor(8, 0); lcd.write(byte(4));
}

void image01() {
  lcd.clear();
  byte image22[8] = {B00110, B00101, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B11001, B10111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11000};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  byte image06[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00000, B00011};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.createChar(5, image06);
  lcd.setCursor(5, 1); lcd.write(byte(0));
  lcd.setCursor(6, 1); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(7, 0); lcd.write(byte(3));
  lcd.setCursor(8, 0); lcd.write(byte(4));
  lcd.setCursor(5, 0); lcd.write(byte(5));
}

void image02() {
  lcd.clear();
  byte image22[8] = {B00000, B00001, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00001, B00111, B00100, B11001, B10111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11000};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.setCursor(5, 1); lcd.write(byte(0));
  lcd.setCursor(6, 1); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(7, 0); lcd.write(byte(3));
  lcd.setCursor(8, 0); lcd.write(byte(4));
}

void image03() {
  lcd.clear();
  byte image22[8] = {B00000, B00001, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11010};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  byte image24[8] = {B00010, B00111, B00111, B00111, B00111, B00111, B00010, B00000};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.createChar(5, image24);
  lcd.setCursor(5, 1); lcd.write(byte(0));
  lcd.setCursor(6, 1); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(7, 0); lcd.write(byte(3));
  lcd.setCursor(8, 0); lcd.write(byte(4));
  lcd.setCursor(7, 1); lcd.write(byte(5));
}

void image04() {
  lcd.clear();
  byte image22[8] = {B00000, B00001, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10001, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11010};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  byte image24[8] = {B00010, B00100, B01011, B10101, B11010, B10101, B11010, B01110};
  byte image25[8] = {B00000, B00000, B00000, B10000, B10000, B00000, B00000, B00000};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.createChar(5, image24);
  lcd.createChar(6, image25);
  lcd.setCursor(5, 1); lcd.write(byte(0));
  lcd.setCursor(6, 1); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(7, 0); lcd.write(byte(3));
  lcd.setCursor(8, 0); lcd.write(byte(4));
  lcd.setCursor(7, 1); lcd.write(byte(5));
  lcd.setCursor(8, 1); lcd.write(byte(6));
}

void image05() {
  lcd.clear();
  byte image24[8] = {B01010, B10100, B01011, B10101, B11010, B10101, B11010, B01110};
  byte image25[8] = {B00000, B00000, B00000, B10000, B10000, B00000, B00000, B00000};
  byte image23[8] = {B01101, B01010, B01101, B00111, B00000, B00000, B00000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00011};
  byte image08[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00000, B10000};
  lcd.createChar(0, image24);
  lcd.createChar(1, image25);
  lcd.createChar(2, image23);
  lcd.createChar(3, image07);
  lcd.createChar(4, image08);
  lcd.setCursor(7, 1); lcd.write(byte(0));
  lcd.setCursor(8, 1); lcd.write(byte(1));
  lcd.setCursor(6, 1); lcd.write(byte(2));
  lcd.setCursor(6, 0); lcd.write(byte(3));
  lcd.setCursor(7, 0); lcd.write(byte(4));
}

void image06() {
  lcd.clear();
  byte image08[8] = {B00000, B00100, B01010, B01010, B10001, B00011, B00110, B01100};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00001, B00010, B00010, B00001};
  byte image09[8] = {B00000, B00000, B10000, B11000, B00000, B00000, B11000, B00100};
  byte image24[8] = {B00100, B00100, B00011, B00000, B00000, B00000, B00000, B00000};
  byte image25[8] = {B10000, B00000, B00000, B00000, B00000, B00000, B00000, B00000};
  lcd.createChar(0, image08);
  lcd.createChar(1, image07);
  lcd.createChar(2, image09);
  lcd.createChar(3, image24);
  lcd.createChar(4, image25);
  lcd.setCursor(7, 0); lcd.write(byte(0));
  lcd.setCursor(6, 0); lcd.write(byte(1));
  lcd.setCursor(8, 0); lcd.write(byte(2));
  lcd.setCursor(7, 1); lcd.write(byte(3));
  lcd.setCursor(8, 1); lcd.write(byte(4));
}

void image07() {
  lcd.clear();
  byte image24[8] = {B10101, B01110, B01110, B00100, B10101, B01110, B00100, B11111};
  byte image08[8] = {B00000, B00100, B01010, B01010, B10001, B00011, B00110, B01100};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00001, B00010, B00010, B00001};
  byte image09[8] = {B00000, B00000, B10000, B11000, B00000, B00000, B00000, B00000};
  lcd.createChar(0, image24);
  lcd.createChar(1, image08);
  lcd.createChar(2, image07);
  lcd.createChar(3, image09);
  lcd.setCursor(7, 1); lcd.write(byte(0));
  lcd.setCursor(7, 0); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(8, 0); lcd.write(byte(3));
}

Schema's