Smart home center with ArduiTouch part 5 - New GUI and variation for ESP8266 instead of ESP32

Now, it's finally here. Our series with the Smarthome Central can continue. After the first Version had a very simple GUI, I decided to program the entire Display, and for ease of use in a library (AT_Display.h) outsource. So the application Code remains uncluttered.

The new user interface allows full configurability of the display of Measured value. There are entry forms by name, color, and size of the Widgets set. Because has not shown that the double-click on the touch screen always works, and since each double-click event to trigger a simple click of a button, I used, instead, for special functions, the long press (>3s). The design of the forms, as well as the display styles könnenb clearly visible in a header file AT_Layout.h can be adjusted. Two more header files AT_LanguageGE.h and AT_LanguageEN.h to contain the Definition of all Message texts, and thus allow for a language adaptation. The corresponding #include Statement at the beginning of the header file AT_Display.h .

The example sketch for the new Version is now SmartHomeV2 or asl want to use more new for those the the ESP8266 to the example sketch SmartHomeV2_8266. I would, however, prefer the use of the ESP32, as with the ESP8266, the memory for local variables is very scarce. Tests have shown that the application crashing under certain circumstances due to Stack problems, which leads to a restart by the Watchdog.

The libraries and example sketches you can find on my GitHub Repository. You need the libraries touch event, ATMessageBuffer and ATSmartHome.

user manual:

 SmartHome home screen

After Turning on appears on page 1 of the measuring value display with Widgets, depending on configuration. A click on the switch Widget (green in the picture) will toggle its value, and the Change to the remote device. If you click more than 3 seconds on a Widget the configuration page for this Widget.

Widget configuration

In this form, we can set the label, the appearance and the Position of the Widgets. The name is the Text above or to the left of the measured value. If you click on the input area, an on-screen keyboard and you can change the Text. With the entry right, the entry is completed and the Text button at the bottom.

keyboard

The size of the Widgets can have four different values.

  • small size: single-spaced, with name to the left of the value
  • on the left: two lines and a half in width, with a label above
  • right: same as left but on the right half of the
  • large: two rows with label above and a larger font.

If you click on the input area, a list with four options will appear. Just click one of the options, click to select it.

The Background color can also be set. If you click on the color box to the right, a color selection Dialog will be displayed. To choose the desired color by Clicking and completes the entry with the Finish Button.

color selection

In the same way you can set the background color of an active switch and the font color. The number of decimal places specify the number of digits after the decimal point. A click on the input field to open the number entry.

number input

This works the same as the text keyboard.

With entering the Number the page can be chosen to be displayed in the Widget. When using the ESP32 32 pages available for the ESP8266 from memory only 8 reasons. Between the sides will be switched by Swiping.

The last entry field is for the Position of the Widgets on the page. In the case of small single-line Widgets, the line number, it is easy, starting with 0. In the case of the half-width of the Widgets is to take two rows for the left, the lower the line number, and the rights of the higher Widget. The large Widgets occupy the two lines, therefore, can not be used in this case, the second line. The maximum line number is 7.

With the Buttons at the very bottom you can Save the Changes, or without saving, cancel. The Widget can also be deleted. The Button has no function. He will later adjust font colors are used depending on the measured value.

If you click on the main page, the bottom blue bar will appear the list of devices.

device list

For the ESP32 32 for the ESP8266 16. The rest of the pages you reach by Swiping. If you click on a device so you can change its name.

device dialog

Here, too, the Change can be saved via the Save Button. Click the Details Button shows a list of all the channels of this device. When ESP32 there are a maximum of 8 for the ESP8266 to a maximum of 4. Active channels are highlighted in yellow.

channel list

If you click on a channel, the configuration window is opened for the corresponding Widget.

The registration of a new device is the same as the old Version. A new device is discovered, its ID or MAC address is displayed in the lower blue bar. You make a long click on the bottom blue bar, so the device is registered and the name dialog for the new device appear, so it is to him assign a name can be

a Lot of fun with the new Version. External devices continue to function without any necessary Changes.

 

DisplaysEsp-8266Projekte für fortgeschritteneSmart home

8 comments

Christian Hennig

Christian Hennig

Hallo in die Runde, trotz intensiver Suche kann ich die Kalibrierung des Touchscreens nicht nachverfolgen. Bei der Eingabemöglichkeit von Daten, die ich nur sporadisch finden kann, ist unten rechts mit oben links vertauscht. So kann ich z.B. das “a” (oben links) nur über das “@” auswählen. Hat jemand eine Idee oder eine Lösung?
Danke
Christian Hennig

Gerald Lechner

Gerald Lechner

Hallo Herr Patzal,
Die Einrichtung eines neuen Gerätes sollte eigentlich ganz einfach sein. Wenn im unteren Balken die MAC-Adresse des Gerätes erscheint, einmal lange klicken. Es sollte das Formular für den Namen erscheinen. Hier einen Namen eingeben und speichern. Nun sollte das zugehörige Widget automatisch auf dem nächsten freien Platz eingebaut werden. Wenn auf der ersten Seite nicht ausreichend Platz ist, wird es auf der zweite platziert u.s.w. Mit einem langen Klick auf das Widget kann man dann sein Aussehen und die Position verändern.
Das zweite Include von TouchEvent.h ist unnötig. Es war versehentlich in den Code gerutscht.
Das Pairing beim ESP-Now sagt nur, dass beide MAC-Adressen Sender und Empfänger bekannt sind. Da das Protokoll einfach nur Daten an den Empfänger sendet, merkt der Sender erst beim Warten auf eine Antwort, dass der Empfänger nicht erreichbar ist.
Zum Schluss möchte ich Sie noch darauf hinweisen, dass es mittlerweile eine komplett neu entwickelte AZ-Touch Smarthome Zentrale gibt, die jetzt MQTT unterstützt und damit auch die Kommunikation mit Fremdgeräten wie Steckdosen, Lampen und Smart-Switches unter Tasmota ermöglicht. Ich möchte Sie gerne auf ein Buch von mir zum Thema Smarthome verweisen, das bei AZ-Delivery erschienen ist. In diesem Buch wird die neue Smarthome-Zentrale, aber auch vieles Andere Wissenswerte zum Thema Smarthome erläutert.

Franz Patzal

Franz Patzal

Hallo Herr Lechner, wäre es möglich eine Anleitung zu erstellen, in welcher Reihenfolge man was in der GUI erstellen muß. Ich bekomme nur mit viel Probieren das Gerät (in dem Fall den Sensor) in die GUI zur Anzeige. Wenn sie einmal drin ist, funktioniert auch die Datenübernahme.
Seltsam kommt mir nur vor, daß der Sensor/Gerät im SerialMonitor meldet, daß gepaart wurde, auch wenn der ArduiTouch ausgeschaltet ist. ???
###########################
My MAC address = 3C:71:BF:3A:17:8C
Sensor 1
0 Sensoren gefunden.
No temperature sensor exists!
Sensor 2
1 Sensoren gefunden.
Adresse: 28FF1165301704D5
RTC Done
WifiMode
Channel = 250
Erfolgreich gepaart
send_cb, status = 0, to mac: 30:AE:A4:36:8A:41
Sleep
########################
mfg Franz Patzal

Franz Patzal

Franz Patzal

Hallo Herr Schneider, Herr Lechner
Ich war auch schon am Verzweifeln, was die Bedienung des TouchScreens angeht. Als ich gelesen habe, daß die TouchEvent-Lib ein Ableger der ExtendedTouchEvent-Lib ist – oder umgekehrt, na ja egal, habe ich im Sourcecode "SmartHomeV2 einfach "#include “TouchEvent.h” gegen #include “ExtendedTouchEvent.h” ausgetauscht. Und siehe da, der TouchScreen funktioniert. Warum im Source zwei mal "#include “TouchEvent.h” aufgerufen wird ist mir nicht klar, ich habe das zweite auskommentiert.
Vielleicht hift das weiter

Reinhard Schneider

Reinhard Schneider

Hallo Herr Lechner,
die Umschaltung über Touch funktioniert nicht richtig.
Die Untermenues sind gut schaltbar, aber die Seite 1 (Hauptmenue) ist grauenhaft!
Das Umschalten über den blauen Balken oder das “Wischen” auf Seite 2 klappt nur sporadisch nach vielen Fehlversuchen.
So ist das GUI meines Erachtens nicht brauchbar!

Gerald Lechner

Gerald Lechner

Hallo Herr Thewes
Je nach dem welche Version der ArduiTouch Platine Sie haben, wird das Display mit 0 oder 1 eingeschaltet. Am besten erkennen Sie, welche Version Sie haben, daran ob der Jumper für die Programmierung und PNP Transistor für das Display schon integriert ist oder nicht. Mit Jumper haben Sie die neue Version sonst die alte
//used pins
#define TFT_CS 5 //diplay chip select
#define TFT_DC 4 //display d/c
#define TFT_RST 22 //display reset
#define TFT_LED 15 //display background LED
#define ARDUITOUCH_VERSION 0 //0 for older 1 for new with PNP Transistor

#define TOUCH_CS 14 //touch screen chip select
#define TOUCH_IRQ 2 //touch screen interrupt

Setzen Sie in der Definition der Konstanten ARDUITOUCH_VERSION den richtigen Wert, dann sollte das Display wieder etwas anzeigen.

R.Thewes

R.Thewes

Guten Tag,
seit der Version 2 für ESP32 bekomme ich keine Anzeige mehr auf dem Display.
Habe mehrere Tage versucht den Fehler zu finden, ohne Erfolg!
Benutze Hardware von Az-Delivery in doppelter Ausführung, also schließe ich Hardware aus. Den Accesspoint kann ich im Wlan sehen.
Für Lösungsvorschläge wäre ich sehr dankbar.
MfG R.Thewes

Wolfgang Schmidt

Wolfgang Schmidt

Die neue GUI ist klar eine Bereicherung für das Projekt. Wünschenswert wäre
- die Anzeige der aktuellen Seite (Nr. in Titel- oder Statuszeile)
- den Farbwechsel auch für die neuen Bereiche (links, rechts, groß)
- der Stil wie “klein” auch für die neuen Bereiche (runde Ecken, Zwischenraum)
- Auswahl der Action über die gesamte Fläche eines Bereiches
- keine Funktion in ungenutzten Bereichen des BS
- evtl. auch wechselnde BMP z.B. für Ein/Aus, Links/Rechts o.ä. (Kindgerechte Bedienung)

Leave a comment

All comments are moderated before being published

Recommended blog posts

  1. Install ESP32 now from the board manager
  2. Lüftersteuerung Raspberry Pi
  3. Arduino IDE - Programmieren für Einsteiger - Teil 1
  4. ESP32 - das Multitalent
  5. OTA - Over the Air - ESP programming via WLAN