Messwerte eines Potentiometers auf TFT darstellen (Lösung) – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

TFT mit 320x240 Pixeln

#include "Adafruit_ILI9341.h"

// Schriftarten einbinden
#include "Fonts/FreeSans24pt7b.h"
#include "Fonts/FreeSans12pt7b.h"

// Wemos D1 Mini
// #define TFT_CS D8
// #define TFT_RST D1
// #define TFT_DC D2

// ESP32-WROOM
// #define TFT_CS 5
// #define TFT_RST 4 
// #define TFT_DC 2

// Farben
#define SCHWARZ    0x0000
#define WEISS      0xFFFF 

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// GFXcanvas-Objekt erstellen: Höhe 170 Pixel, Breite 320 Pixel
GFXcanvas1 Bereich(170, 320);

// analogen Pin anpassen
int Poti = A0;

// maximalen Wert des ADC anpassen
// ESP32: 4096, ESP8266: 1024
int ADCMax = 1024;

/*
  Abstand der Markierung von der Mitte des TFTs
  der ADC liefert keine linear verlaufenden Werte
  der Abstand kann angepasst werden
*/
int AbstandMarkierung = 40;

void setup()
{
  // TFT starten
  tft.begin();

  // Rotation anpassen
  tft.setRotation(2);

  // schwarzer Hintergrund
  tft.fillScreen(SCHWARZ);
  Serial.begin(9600);
}

void loop()
{
  Bereich.fillScreen(SCHWARZ);

  // analogen Wert lesen
  int WertPoti = analogRead(Poti);

  Serial.println(WertPoti);

  // analogen Wert anzeigen
  Bereich.setFont(&FreeSans24pt7b); 
  Bereich.setCursor(10, 50);  
  Bereich.print(WertPoti);

  // analogen Wert auf die Höhe des TFTs übertragen
  int BalkenPoti = map(WertPoti, 0, ADCMax, 0, 320);

  /*
    bei gedrehtem Bildschirm wird der Balken von oben nach unten angezeigt
    zuerest maximalen Wert weiß füllen
    anschließend vom maximalen Wert den gemessenen Wert abziehen
    und schwarz füllen
  */
  Bereich.fillRect(130, 1, 50, 320, WEISS);
  Bereich.fillRect(130, 1, 50, 320 - BalkenPoti, SCHWARZ);

  Bereich.setCursor(70, tft.width() / 2 - AbstandMarkierung);
  Bereich.setFont(&FreeSans12pt7b); 

  // je nach Wert ADCMax Zahlen anzeigen
  if (ADCMax == 4096) Bereich.print("3000");
  else  Bereich.print("750");
  Bereich.drawLine(tft.height() / 2, tft.width() / 2 - AbstandMarkierung, 50, tft.width() / 2 - AbstandMarkierung, WEISS);

  Bereich.setCursor(70, tft.width() / 2 + 40);
  if (ADCMax == 4096) Bereich.print("2000");
  else Bereich.print("500");
  Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung, 50, tft.width() / 2 + AbstandMarkierung, WEISS);

  Bereich.setCursor(70, tft.width() / 2 + AbstandMarkierung * 3);
  if (ADCMax == 4096) Bereich.print("1000");
  else Bereich.print("250");
  Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung * 3, 50, tft.width() / 2 + AbstandMarkierung * 3, WEISS);

  // GFXcanvas anzeigen
  tft.drawBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height(), WEISS, SCHWARZ);
}

#include “Adafruit_ILI9341.h”

// Schriftarten einbinden

#include “Fonts/FreeSans24pt7b.h”

#include “Fonts/FreeSans12pt7b.h”

// Wemos D1 Mini

// #define TFT_CS D8

// #define TFT_RST D1

// #define TFT_DC D2

// ESP32-WROOM

// #define TFT_CS 5

// #define TFT_RST 4

// #define TFT_DC 2

// Farben

#define SCHWARZ 0x0000

#define WEISS 0xFFFF

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// GFXcanvas-Objekt erstellen: Höhe 170 Pixel, Breite 320 Pixel

GFXcanvas1 Bereich(170, 320);

// analogen Pin anpassen

int Poti = A0;

// maximalen Wert des ADC anpassen

// ESP32: 4096, ESP8266: 1024

int ADCMax = 1024;

Abstand der Markierung von der Mitte des TFTs

der ADC liefert keine linear verlaufenden Werte

der Abstand kann angepasst werden

int AbstandMarkierung = 40;

void setup()

{

// TFT starten

tft.begin();

// Rotation anpassen

tft.setRotation(2);

// schwarzer Hintergrund

tft.fillScreen(SCHWARZ);

Serial.begin(9600);

}

void loop()

{

Bereich.fillScreen(SCHWARZ);

// analogen Wert lesen

int WertPoti = analogRead(Poti);

Serial.println(WertPoti);

// analogen Wert anzeigen

Bereich.setFont(&FreeSans24pt7b);

Bereich.setCursor(10, 50);

Bereich.print(WertPoti);

// analogen Wert auf die Höhe des TFTs übertragen

int BalkenPoti = map(WertPoti, 0, ADCMax, 0, 320);

bei gedrehtem Bildschirm wird der Balken von oben nach unten angezeigt

zuerest maximalen Wert weiß füllen

anschließend vom maximalen Wert den gemessenen Wert abziehen

und schwarz füllen

Bereich.fillRect(130, 1, 50, 320, WEISS);

Bereich.fillRect(130, 1, 50, 320 - BalkenPoti, SCHWARZ);

Bereich.setCursor(70, tft.width() / 2 - AbstandMarkierung);

Bereich.setFont(&FreeSans12pt7b);

// je nach Wert ADCMax Zahlen anzeigen

if (ADCMax == 4096) Bereich.print(“3000”);

else Bereich.print(“750”);

Bereich.drawLine(tft.height() / 2, tft.width() / 2 - AbstandMarkierung, 50, tft.width() / 2 - AbstandMarkierung, WEISS);

Bereich.setCursor(70, tft.width() / 2 + 40);

if (ADCMax == 4096) Bereich.print(“2000”);

else Bereich.print(“500”);

Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung, 50, tft.width() / 2 + AbstandMarkierung, WEISS);

Bereich.setCursor(70, tft.width() / 2 + AbstandMarkierung * 3);

if (ADCMax == 4096) Bereich.print(“1000”);

else Bereich.print(“250”);

Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung * 3, 50, tft.width() / 2 + AbstandMarkierung * 3, WEISS);

// GFXcanvas anzeigen

tft.drawBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height(), WEISS, SCHWARZ);

}

TFT mit 160x128 Pixeln

#include "Adafruit_ST7735.h"

// Schriftarten einbinden
#include "Fonts/FreeSans9pt7b.h"
#include "Fonts/FreeSans12pt7b.h"

// Wemos D1 Mini
// #define TFT_CS D8
// #define TFT_RST D1
// #define TFT_DC D2

// ESP32-WROOM
// #define TFT_CS 5
// #define TFT_RST 4 
// #define TFT_DC 2

// Farben
#define SCHWARZ    0x0000
#define WEISS      0xFFFF 

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

// GFXcanvas-Objekt erstellen: Höhe 128 Pixel, Breite 160 Pixel
GFXcanvas1 Bereich(128, 160);

// analogen Pin anpassen
int Poti = A0;

// maximalen Wert des ADC anpassen
// ESP32: 4096, ESP8266: 1024
int ADCMax = 4096;

/*
  Abstand der Markierung von der Mitte des TFTs
  der ADC liefert keine lienear verlaufenden Werte
  der Abstand kann angepasst werden
*/
int AbstandMarkierung = 20;

void setup()
{
  // TFT starten
  tft.initR(INITR_BLACKTAB);

  // Rotation anpassen
  tft.setRotation(0);

  // schwarzer Hintergrund
  tft.fillScreen(SCHWARZ);
}

void loop()
{
  Bereich.fillScreen(SCHWARZ);

  // analogen Wert lesen
  int WertPoti = analogRead(Poti);

  // analogen Wert anzeigen
  Bereich.setFont(&FreeSans12pt7b); 
  Bereich.setCursor(10, 20);  
  Bereich.print(WertPoti);

  // analogen Wert auf die Höhe des TFTs übertragen
  int BalkenPoti = map(WertPoti, 0, ADCMax, 0, 160);

  /*
    bei gedrehtem Bildschirm wird der Balken von oben nach unten angezeigt
    zuerest maximalen Wert weiß füllen
    anschließend vom maximalen Wert den gemessenen Wert abziehen
    und schwarz füllen
  */
  Bereich.fillRect(80, 1, 30, 160, WEISS);
  Bereich.fillRect(80, 1, 30, 160 - BalkenPoti, SCHWARZ);

  Bereich.setCursor(30, tft.width() / 2 - AbstandMarkierung);
  Bereich.setFont(&FreeSans9pt7b); 

  // je nach Wert ADCMax Zahlen anzeigen
  if (ADCMax == 4096) Bereich.print("3000");
  else Bereich.print("750");
  Bereich.drawLine(tft.height() / 2, tft.width() / 2 - AbstandMarkierung, 50, tft.width() / 2 - AbstandMarkierung, WEISS);

  Bereich.setCursor(30, tft.width() / 2 + AbstandMarkierung);

  if (ADCMax == 4096) Bereich.print("2000");
  else Bereich.print("500");
  Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung, 50, tft.width() / 2 + AbstandMarkierung, WEISS);

  Bereich.setCursor(30, tft.width() / 2 + AbstandMarkierung * 3);

  if (ADCMax == 4096) Bereich.print("1000");
  else Bereich.print("250");
  Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung * 3, 50, tft.width() / 2 + AbstandMarkierung * 3, WEISS);

  // GFXcanvas anzeigen
  tft.drawBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height(), WEISS, SCHWARZ);
}

#include “Adafruit_ST7735.h”

// Schriftarten einbinden

#include “Fonts/FreeSans9pt7b.h”

#include “Fonts/FreeSans12pt7b.h”

// Wemos D1 Mini

// #define TFT_CS D8

// #define TFT_RST D1

// #define TFT_DC D2

// ESP32-WROOM

// #define TFT_CS 5

// #define TFT_RST 4

// #define TFT_DC 2

// Farben

#define SCHWARZ 0x0000

#define WEISS 0xFFFF

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

// GFXcanvas-Objekt erstellen: Höhe 128 Pixel, Breite 160 Pixel

GFXcanvas1 Bereich(128, 160);

// analogen Pin anpassen

int Poti = A0;

// maximalen Wert des ADC anpassen

// ESP32: 4096, ESP8266: 1024

int ADCMax = 4096;

Abstand der Markierung von der Mitte des TFTs

der ADC liefert keine lienear verlaufenden Werte

der Abstand kann angepasst werden

int AbstandMarkierung = 20;

void setup()

{

// TFT starten

tft.initR(INITR_BLACKTAB);

// Rotation anpassen

tft.setRotation(0);

// schwarzer Hintergrund

tft.fillScreen(SCHWARZ);

}

void loop()

{

Bereich.fillScreen(SCHWARZ);

// analogen Wert lesen

int WertPoti = analogRead(Poti);

// analogen Wert anzeigen

Bereich.setFont(&FreeSans12pt7b);

Bereich.setCursor(10, 20);

Bereich.print(WertPoti);

// analogen Wert auf die Höhe des TFTs übertragen

int BalkenPoti = map(WertPoti, 0, ADCMax, 0, 160);

bei gedrehtem Bildschirm wird der Balken von oben nach unten angezeigt

zuerest maximalen Wert weiß füllen

anschließend vom maximalen Wert den gemessenen Wert abziehen

und schwarz füllen

Bereich.fillRect(80, 1, 30, 160, WEISS);

Bereich.fillRect(80, 1, 30, 160 - BalkenPoti, SCHWARZ);

Bereich.setCursor(30, tft.width() / 2 - AbstandMarkierung);

Bereich.setFont(&FreeSans9pt7b);

// je nach Wert ADCMax Zahlen anzeigen

if (ADCMax == 4096) Bereich.print(“3000”);

else Bereich.print(“750”);

Bereich.drawLine(tft.height() / 2, tft.width() / 2 - AbstandMarkierung, 50, tft.width() / 2 - AbstandMarkierung, WEISS);

Bereich.setCursor(30, tft.width() / 2 + AbstandMarkierung);

if (ADCMax == 4096) Bereich.print(“2000”);

else Bereich.print(“500”);

Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung, 50, tft.width() / 2 + AbstandMarkierung, WEISS);

Bereich.setCursor(30, tft.width() / 2 + AbstandMarkierung * 3);

if (ADCMax == 4096) Bereich.print(“1000”);

else Bereich.print(“250”);

Bereich.drawLine(tft.height() / 2, tft.width() / 2 + AbstandMarkierung * 3, 50, tft.width() / 2 + AbstandMarkierung * 3, WEISS);

// GFXcanvas anzeigen

tft.drawBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height(), WEISS, SCHWARZ);

}

Letzte Aktualisierung: Dez. 2, 2025 @ 14:38