Nextion is a seamless Human Machine Interface (HMI) solution that provides a control and visualization interface between a human and a process, hine, application or appliance. Nextion is mainly applied to Internet of thing (IoT) or consumer electronics field. It is the best solution to replace the traditional LCD and LED Nixie tube.

Features:
480 x 320 Resolution
RGB 65K true to life colors
TFT screen with integrated 4-wire Resistive Touch Panel
Easy 4 pin interface to any TTL Serial Host
16M Flash memory for User Application Code and Data
On board micro-SD card for firmware upgrade
Visual Area: approx. 73.44mm(L)×48.96mm(W)
Adjustable Brightness: 0~180 nit, the interval of adjustment is 1%
5V500mA DC recommended power supply
5V145mA power consumption

Nextion_Tutorials

Nextion Display - Teil 1 - Grundlagen und Workflow

Teil.1-Grundlagen.und.Werte.uebermitteln.mp4

Genutzt wird aktuell SoftSerial, da der Wemos nur eine einzelne Schnittstelle hat, welche bereits über USB genutzt wird. Mit ein paar Handgriffen kann man wohl auf die internerne UART umschalten - dazu aber wahrscheinlich mehr im nächsten Video.

Wenn man nun eine Nachricht an "inTopic" per MQTT sendet, wird diese im Textfeld über dem Button dargestellt.

#define SoftSerial mySerial

#include SPI.h
#include SoftwareSerial.h
#include ESP8266WiFi.h
#include WiFiClient.h
#include PubSubClient.h
//#include Nextion.h

const char* mqtt_server = "192.168.178.11";
const char* ssid = "PlitschPlatsch";
const char* password = "PASSWORD";

WiFiClient net;
PubSubClient client(net);

#define CO2_TX D1
#define CO2_RX D2

SoftwareSerial SoftSerial(CO2_RX, CO2_TX); // RX, TX

void setup() {
  pinMode(BUILTIN_LED, OUTPUT);

  Serial.begin(9600);
  SoftSerial.begin(9600);

  delay(500);

  connect();
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();

  delay(500);
}

void connect() {
  Serial.println("Connecting Wifi");

  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  // WiFi
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    WiFi.begin(ssid, password);
  }

  Serial.println("Connecting MQTT");

  // MQTT
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}

void callback(char* topic, byte* payload, unsigned int length) {
  SoftSerial.print("t0.txt="");

  for (int i = 0; i < length; i++) {
    Serial.print((char)payload[i]);
    SoftSerial.print((char)payload[i]);
  }
  Serial.println();

  SoftSerial.print(""");
  SoftSerial.write(0xff);
  SoftSerial.write(0xff);
  SoftSerial.write(0xff);
}

void reconnect() {
  while (!client.connected()) {
    String clientId = "WemosNextion-";
    clientId += String(random(0xffff), HEX);

    if (client.connect(clientId.c_str())) {
      client.subscribe("inTopic");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");

      delay(5000);
    }
  }
}

Nextion Display - Teil 2 - Ein eigenes Design erstellen und testen

Teil.2-Ein.Design.erstellen.mp4

Eigentlich ist das Script zu 90 Prozent identisch mit dem aus dem ersten Video. Es wurden nur einige Hilfsfunktionen eingebaut um die Anzeigen etwas einfach ansteuern zu können. Wie gesagt sind wir hier immernoch auf einem Prototyp-Level.

Die WLAN-Verbindung und die MQTT-Verbindung werden für diesen Schritt eigentlich gar nicht benötigt, sind aber der Vollständigkeit halber noch enthalten, da wir diese ja in jedem Fall in den nächsten Videos brauchen werden!

#define SoftSerial mySerial

#include SPI.h
#include SoftwareSerial.h
#include ESP8266WiFi.h
#include WiFiClient.h
#include PubSubClient.h
//#include Nextion.h

const char* mqtt_server = "192.168.178.11";
const char* ssid = "PlitschPlatsch";
const char* password = "PASSWORD";

WiFiClient net;
PubSubClient client(net);

#define CO2_TX D1
#define CO2_RX D2

SoftwareSerial SoftSerial(CO2_RX, CO2_TX); // RX, TX

void setup() {
  pinMode(BUILTIN_LED, OUTPUT);

  Serial.begin(9600);
  SoftSerial.begin(9600);

  delay(500);

  connect();
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();

  delay(500);

  for (int i = 0; i <= 360; i++) {
    sendToDisplay(String("zLeft.val=") + String(calculateGaugeValue(i), DEC));
    sendToDisplay(String("t2.txt="") + String(i, DEC) + String("""));
    delay(50);
  }
}

void connect() {
  Serial.println("Connecting Wifi");

  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  // WiFi
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    WiFi.begin(ssid, password);
  }

  Serial.println("Connecting MQTT");

  // MQTT
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}

int calculateGaugeValue(int val) {
  if (val < 45) {
    return val + 315;
  } else {
    return val - 45;
  }
}

void sendToDisplay(String command) {
  SoftSerial.print(command);
  SoftSerial.write(0xff);
  SoftSerial.write(0xff);
  SoftSerial.write(0xff);
}

void callback(char* topic, byte* payload, unsigned int length) {
  SoftSerial.print("t0.txt="");

  for (int i = 0; i < length; i++) {
    Serial.print((char)payload[i]);
    SoftSerial.print((char)payload[i]);
  }
  Serial.println();

  SoftSerial.print(""");
  SoftSerial.write(0xff);
  SoftSerial.write(0xff);
  SoftSerial.write(0xff);
}

void reconnect() {
  while (!client.connected()) {
    String clientId = "WemosNextion-";
    clientId += String(random(0xffff), HEX);

    if (client.connect(clientId.c_str())) {
      client.subscribe("inTopic");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");

      delay(5000);
    }
  }
}

Nextion Display - Teil 3 - Verschiedene Seiten und Button-Events

Teil.3-Verschiedene.Seiten.und.Button-Events.mp4

Dieses Mal wurde doch einiges in der Logik geändert. Der wichtigste Change ist wahrscheinlich die Umstellung von der SoftwareSerial auf die "richige" serielle Schnittstelle. Das hatte ich anfangs viel zu kompliziert gedacht. So läuft es bei mir jedenfalls wunderbar und es fühlt sich viel besser an, als SoftwareSerial zu nutzen.

Wie man sieht, wird auch ein Button-Event eingebunden. Wie genau dieses aufgebaut ist und was dabei zu beachten ist, wird im beigefügten Video ausführlich erklärt.

#include ESP8266WiFi.h
#include WiFiClient.h
#include PubSubClient.h
#include Nextion.h

const char* mqtt_server = "192.168.178.11";
const char* ssid = "PlitschPlatsch";
const char* password = "PASSWORD";

WiFiClient net;
PubSubClient client(net);

NexButton bOnoff = NexButton(0, 7, "bOnoff"); // Button On Off

NexTouch *nex_listen_list[] = {
  &bOnoff,
  NULL // String terminated
};

int gaugeLeft = 0;
int gaugeRight = 0;
int gaugeTop = 0;

void setup() {
  pinMode(BUILTIN_LED, OUTPUT);

  Serial.begin(9600);
  //delay(500);
  //sendToDisplay(String("baud=115200"));
  //Serial.end();
  //Serial.begin(115200);

  bOnoff.attachPush(bOnoffPushCallback);  // Button press
  bOnoff.attachPop(bOnoffPopCallback);  // Button release

  connect();
}

void loop() {
  if (!client.connected()) {
    sendToDisplay(String("pWiFi.pic=1")); // Change WiFi Pic
    reconnect();
  } else {
    sendToDisplay(String("pWiFi.pic=2")); // Change WiFi Pic
  }

  //gaugeLeft += 2;
  //gaugeRight += 3;
  //gaugeTop += 4;

  nexLoop(nex_listen_list);  // Check touch events
  client.loop();
  refreshDisplay();

  delay(10);
}

void refreshDisplay()
{
  sendToDisplay(String("zLeft.val=") + String(calculateGaugeValue(gaugeLeft), DEC));
  sendToDisplay(String("zRight.val=") + String(calculateGaugeValue(gaugeRight), DEC));
  sendToDisplay(String("zTop.val=") + String(calculateTopGaugeValue(gaugeTop), DEC));
  sendToDisplay(String("tTop.txt="") + String(gaugeTop, DEC) + String("""));
}

void connect() {
  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  // WiFi
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    WiFi.begin(ssid, password);
  }

  // MQTT
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}

int calculateGaugeValue(int val) {
  if (val < 45) {
    return val + 315;
  } else if (val > 270) {
    return 225;
  } else {
    return val - 45;
  }
}

int calculateTopGaugeValue(int val) {
  val += 30;

  if (val > 150) {
    return 150;
  } else {
    return val;
  }
}

void sendToDisplay(String command) {
  Serial.print(command);
  Serial.write(0xff);
  Serial.write(0xff);
  Serial.write(0xff);
}

void callback(char* topic, byte* payload, unsigned int length) {
  for (int i = 0; i < length; i++) {
  }
}

void reconnect() {
  while (!client.connected()) {
    String clientId = "WemosNextion-";
    clientId += String(random(0xffff), HEX);

    if (client.connect(clientId.c_str())) {
      client.subscribe("inTopic");
    } else {
      delay(5000);
    }
  }
}

void bOnoffPushCallback(void *ptr) {
  digitalWrite(BUILTIN_LED, HIGH);  // Turn ON internal LED
}

void bOnoffPopCallback(void *ptr) {
  digitalWrite(BUILTIN_LED, LOW);  // Turn OFF internal LED
}