Les 16 (grafisch LCD)

Alleen lezen

Moderator: pe1br

Post Reply
pe1br
Posts: 66
Joined: Thu Apr 14, 2016 3:37 am

Les 16 (grafisch LCD)

Post by pe1br »

Les16-1:

Zorg er voor dat je alle voedingsspanningen los koppelt (usb niet aangesloten op de pc en geen power adapter aangesloten op de voedingsplug).

Monteer het grafisch display op de Arduino UNO zoals op onderstaande afbeelding:


Voor we de software gaan laden hebben we eerst een aantal bibliotheken nodig.
Adafruit-GFX-Library-master
mcufriends_kbv

Ga in het menu naar schets >> bibliotheek gebruiken >> bibliotheken beheren.
Er opent een scherm waar we bibliotheken kunnen toevoegen en updaten.

Vul in de zoekbalk de naam van de bibliotheek in, in dit geval beginnen we met Adafruit GFX Library.
klik de bibliotheek aan en klik op installeren.

Doe hetzelfde voor de bibliotheek met de naam mcufriend.

Start het Arduino programma en sluit de USB kabel aan.
Typ de volgende code over of kopieer deze naar de arduino ide:

Code: Select all

#include "Adafruit_GFX.h"// Algemene bibliotheek voor grafische lcd schermen
#include <MCUFRIEND_kbv.h> //specifieke bibliotheek voor dit type scherm

MCUFRIEND_kbv tft;  //koppel de functie tft aan de bibliotheek

//definieer de kleuren die we kunnen gebruiken 
#define black   0x0000
#define blue    0x001F
#define red     0xF800
#define green   0x07E0
#define cyan    0x07FF
#define magenta 0xF81F
#define yellow  0xFFE0
#define white   0xFFFF

#define LCD_CS A3 // Chip Select 
#define LCD_CD A2 // Command/Data 
#define LCD_WR A1 // LCD Write 
#define LCD_RD A0 // LCD Read 
#define LCD_RESET A4 // LCD Reset

void setup() {
  tft.reset();
  delay(1000);
  uint16_t identifier = tft.readID();
  tft.begin(identifier);                                     //Start het lcd scherm
  tft.fillScreen(black);                          //vul het scherm op in de kleur zwart
  tft.setRotation(3); //0-3                    //Stel het scherm in op horizontaal met de text boven de buttons
  tft.drawLine(10, 10, 310, 230, blue);    //teken een lijn in blauw van x10 y 10 naar x 310 y 230 in de kleur blauw
} 


void loop() {     //de loop doet in dit geval niets.
}

Als de bibliotheken goed toegevoegd zijn en de software goed geladen is zien we een blauwe lijn van coördinaten x=10 y=10 naar coordinaten x=310 y=230 over het scherm lopen.

Les16-2:

Start het Arduino programma en sluit de USB kabel aan.
Typ de volgende code over of kopieer deze naar de arduino ide:

Code: Select all

#include "Adafruit_GFX.h"// Algemene bibliotheek voor grafische lcd schermen
#include <MCUFRIEND_kbv.h> //specifieke bibliotheek voor dit type scherm

MCUFRIEND_kbv tft;  //koppel de functie tft aan de bibliotheek

//definieer de kleuren die we kunnen gebruiken 
#define black   0x0000
#define blue    0x001F
#define red     0xF800
#define green   0x07E0
#define cyan    0x07FF
#define magenta 0xF81F
#define yellow  0xFFE0
#define white   0xFFFF

#define LCD_CS A3 // Chip Select 
#define LCD_CD A2 // Command/Data 
#define LCD_WR A1 // LCD Write 
#define LCD_RD A0 // LCD Read 
#define LCD_RESET A4 // LCD Reset

void setup() {
  Serial.begin(9600);
  tft.reset();
  delay(1000);
  uint16_t identifier = tft.readID();
  tft.begin(identifier);                                     //Start het lcd scherm
  tft.fillScreen(black);                          //vul het scherm op in de kleur zwart
  tft.setRotation(3); //0-3                    //Stel het scherm in op horizontaal met de text boven de buttons
  tft.fillCircle(100, 100, 80, blue);          //vul een cirkel midden punt x 100 y 100 radius 80 in de kleur blauw
  tft.drawCircle(100, 100, 80, white);     //teken een cirkel midden punt x 100 y 100 radius 80 in de kleur wit
} 


void loop() {   //de loop doet in dit geval niets.
}
Vergelijkbare code alleen dit keer tekenen we een witte cirkel en vullen deze op met een blauw vlak. de coordinaten van het midden van de circel zijn x = 100 y = 100 radius = 80

Les16-3:

Start het Arduino programma en sluit de USB kabel aan.
Typ de volgende code over of kopieer deze naar de arduino ide:

Code: Select all

#include "Adafruit_GFX.h"// Algemene bibliotheek voor grafische lcd schermen
#include <MCUFRIEND_kbv.h> //specifieke bibliotheek voor dit type scherm

MCUFRIEND_kbv tft;  //koppel de functie tft aan de bibliotheek

//definieer de kleuren die we kunnen gebruiken 
#define black   0x0000
#define blue    0x001F
#define red     0xF800
#define green   0x07E0
#define cyan    0x07FF
#define magenta 0xF81F
#define yellow  0xFFE0
#define white   0xFFFF

#define LCD_CS A3 // Chip Select 
#define LCD_CD A2 // Command/Data 
#define LCD_WR A1 // LCD Write 
#define LCD_RD A0 // LCD Read 
#define LCD_RESET A4 // LCD Reset

void setup() {
  tft.reset();
  delay(1000);
  uint16_t identifier = tft.readID();
  tft.begin(identifier);                                      //Start het lcd scherm
  tft.fillScreen(black);                          //vul het scherm op in de kleur zwart
  tft.setRotation(3); //0-3                    //Stel het scherm in op horizontaal met de text boven de buttons
  tft.fillCircle(100, 100, 80, blue);          //vul een cirkel midden punt x 100 y 100 radius 80 in de kleur blauw
  tft.drawCircle(100, 100, 80, white);     //teken een cirkel midden punt x 100 y 100 radius 80 in de kleur wit
  tft.fillTriangle(240, 20, 200, 80, 280, 80, green);          //Teken een driehoek top x 240 y 20, links onder x 200 y 80, recht onder x 280 y 80 in de kleur groen
  tft.fillTriangle(240, 160, 200, 100, 280, 100, red);         //Teken een driehoek top x 240 y 160, links boven  x 100 y 280, rechts boven x 280 y 100 in de kleur rood   
  tft.setCursor(40, 200);                                            //bepaal de positie van de text (x 40 y 200)
  tft.setTextColor(white);                                          //bepaal de kleur van de text (wit)
  tft.setTextSize(2);                                                 //bepaal de grote van de text
  tft.println("Marco PE1BR");                                      //de text zelf
  
} 

void loop() { //de loop doet in dit geval niets
}
Dezelfde circel als in les 16-2 maar nu met tekst er onder, de tekst kleur is wit en de tekst grootte is 2, ook hebben we 2 driehoeken getekend in de kleuren groen en rood.
Probeer de x en y waardes de kleuren en de tekst grootte te wijzigen zodat je bekend raakt met deze manier van tekenen op een lcd scherm.

Op deze link http://wiki.microduinoinc.com/TFT_ST7735_Syntax_Manual vind je alle mogelijke figuren en de bijbehorende software om deze te tekenen (Deze software is voor een ander type scherm maar de tft. commando's kloppen wel).
Probeer een aantal van deze figuren in je eigen code te verwerken.

Les16-4:

Start het Arduino programma en sluit de USB kabel aan.
Typ de volgende code over of kopieer deze naar de arduino ide:

Code: Select all

#include "Adafruit_GFX.h"// Algemene bibliotheek voor grafische lcd schermen
#include <MCUFRIEND_kbv.h> //specifieke bibliotheek voor dit type scherm

MCUFRIEND_kbv tft;  //koppel de functie tft aan de bibliotheek

//definieer de kleuren die we kunnen gebruiken 
#define black   0x0000
#define blue    0x001F
#define red     0xF800
#define green   0x07E0
#define cyan    0x07FF
#define magenta 0xF81F
#define yellow  0xFFE0
#define white   0xFFFF

#define LCD_CS A3 // Chip Select 
#define LCD_CD A2 // Command/Data 
#define LCD_WR A1 // LCD Write 
#define LCD_RD A0 // LCD Read 
#define LCD_RESET A4 // LCD Reset

//verticalbartext
int oldvalue[] = {0, 0 ,0};

void writetext(String text, int x, int y, int textsize, int textcolor) {  //functie om text op het scherm te schrijven  
  tft.setCursor(x, y);          //text positie
  tft.setTextColor(textcolor);  //text kleur
  tft.setTextSize(textsize);    //text grote
  tft.print(text);              //text
}

void verticalbartext(String text, int x) {  //functie om de waardes bij de bar te schrijven
  writetext(text, x - 36 ,170, 2, white);   //gebruik de functie text om de bar een naam te geven 
  writetext("150%", x - 36, 7, 1, white);   //de waardes die naast de bar staan 
  writetext("125%", x - 36, 32, 1, white);
  writetext("100%", x - 36, 57, 1, white);
  writetext("75%", x - 30, 82, 1, white);
  writetext("50%", x - 30, 107, 1, white);
  writetext("25%", x - 30, 132, 1, white);
  writetext("0%", x - 24, 157, 1, white);
  tft.drawFastVLine(x - 7, 10, 150, white); //de vertikale lijn naast de bar
  tft.drawFastHLine(x - 11, 10, 9, white);  //de horizontale lijnen naast de bar
  tft.drawFastHLine(x - 11, 35, 9, white);
  tft.drawFastHLine(x - 11, 60, 9, white);
  tft.drawFastHLine(x - 11, 85, 9, white);
  tft.drawFastHLine(x - 11, 110, 9, white);
  tft.drawFastHLine(x - 11, 135, 9, white);
  tft.drawFastHLine(x - 11, 160, 9, white);
  tft.drawFastHLine(x, 160, 35, green);
}

void verticalbar(int number, int x, int value) {                            //functie om de bar zelf te tekenen
  if (value < oldvalue[number])                                             //bepaal of de huidige waarde kleiner is dan de oude waarde
    for (int y = oldvalue[number]; y >= value; y--) {                       //tel vanaf de oude waarde tot de huidige waarde naar beneden
      if (y >= 1 && y <= 160) tft.drawFastHLine(x,160 - y, 35, black);      //controleer de grenzen en teken een zwart lijntje per waarde
    }
  if (value > oldvalue[number]) {                                           //bepaal of de huidige waarde groter is dan de oude waarde
    for (int y = oldvalue[number]; y <= value; y++) {                       //tel vanaf de oude waarde tot de huidige waarde omhoog
      if (y >= 0 && y <= 150) {                                             //controleer dat de bar niet over de grenzen gaat
        if (y < 100) tft.drawFastHLine(x, 160 - y, 35, green);              //als de waarde kleiner is dan 100% teken groene lijnen 
        if(y >= 100 && y <= 110) tft.drawFastHLine(x, 160 - y, 35, yellow); //als de waarde tussen de 100% en 110% is teken een gele lijn 
        if (y >= 111) tft.drawFastHLine(x, 160 - y, 35, red);               //als de waarde groter dan 110% is teken een rode lijn  
      }
    }
  }
  oldvalue[number] = value;                                                 // zet de huidige waarde in de container oldvalue voor de volgende loop
}

void setup() {
  tft.reset();
  delay(1000);
  uint16_t identifier = tft.readID();
  tft.begin(identifier);                                 //Start het lcd scherm
  tft.fillScreen(black);                       //vul het scherm op in de kleur zwart
  tft.setRotation(3); //0-3                    //Stel het scherm in op horizontaal met de text boven de buttons
  verticalbartext("  BAR1", 40);               //geef de naam en positie van de eerste bar op 
  verticalbartext("  BAR2", 150);              //geef de naam en positie van de 2de bar op 
} 

void loop() {
  for (int i = 0; i <150; i++) {                //tel op van 0 tot 150
    verticalbar(1, 40, i);                      //schrijf de eerste bar met de waarde uit de teller
    verticalbar(2, 150, abs (i - 150));         //schrijf de 2de bar met de absolute waarde van de tellen - 150 
    delay(10);                                  //wacht 10 mS
  }
  for (int i = 150; i > 0; i--) {                //tel af van 150 tot 0
    verticalbar(1, 40, i);                       //schrijf de eerste bar met de waarde uit de teller
    verticalbar(2, 150, abs (i - 150));          //schrijf de 2de bar met de absolute waarde van de tellen - 150 
    delay(10);                                   //wacht 10 mS
  }
}
Deze les tekent 2 vertikale meters op het scherm.
Attachments
bibliotheekbeheerder2.jpg
(111.67 KiB) Not downloaded yet
bibliotheekbeheerder.jpg
(99.94 KiB) Not downloaded yet
lcd shield.jpeg
(6.04 KiB) Not downloaded yet
Post Reply