Nest Webpage for ESP

---

Hi,

I’m trying to setup a webpage to control my heater by a step motor. All basic functions are working allready and I’m using a modified webserver based on some code snippets from @koffienl https://github.com/koffienl/ESPimatic and from https://github.com/incmve/roomba-esp8266. For me all the html code is easy to understand or comprehensible but with more JavaScript I’m really lost.

By now my actual state is looking like shown in the following picture.

All html code is directly implemented by variables in my sketch.

server.send ( 200, "text/html", header + navbar + containerStart + title3 + commands + commands_2 + commands_3 + title2 + IPAddServ + User + PimaticVar_1 + PimaticVar_2 + title1 + IPAddClient + MACAddClient + SignalStrength + ClientName + Version + Uptime + containerEnd + siteEnd);

But now I have seen the very nice Nest Webpage to control a heater also provided by @koffienl on github as pimatc gui.
https://github.com/koffienl/PimaticGUI

So is it possible to use the nest.js file to implement a control page for my heater? Perhaps @koffienl you can help me with that? I’m not requesting a solution, but perhaps you or someone else can give me a hint how to modify my code.

Thank you all!

void handle_root() {
  IPAddress ip  = WiFi.localIP();         // get IP
  ClientIP      = String(ip[0]) + '.' + String(ip[1]) + '.' + String(ip[2]) + '.' + String(ip[3]);
  ClientMAC     = WiFi.macAddress();      // get MAC
  Signal        = WiFi.RSSI();            // get Signal
  //Errechnete_Temp = (round(Ist_Motorposition/m*2))/2;
  //delay(50);
  String title1         = panelHeaderName + String("Settings") + panelHeaderEnd;
  String IPAddClient    = panelBodySymbol + String("globe") + panelBodyName + String("IP Address") + panelBodyValue + ClientIP + panelBodyEnd;
  String MACAddClient   = panelBodySymbol + String("globe") + panelBodyName + String("MAC Address") + panelBodyValue + ClientMAC + panelBodyEnd;
  String SignalStrength = panelBodySymbol + String("signal") + panelBodyName + String("WiFi Signal") + panelBodyValue + String(Signal) + String(" dB") + panelBodyEnd;
  String ClientName     = panelBodySymbol + String("tag") + panelBodyName + String("Client Name") + panelBodyValue + espName + panelBodyEnd;
  String Version        = panelBodySymbol + String("info-sign") + panelBodyName + String("Heater Version") + panelBodyValue + ESPHeater_Version + panelBodyEnd;
  String Uptime         = panelBodySymbol + String("time") + panelBodyName + String("Uptime") + panelBodyValue + hour() + String(" h ") + minute() + String(" min ") + second() + String(" sec") + panelBodyEnd + panelEnd;

  String title2         = panelHeaderName + String("Pimatic Server") + panelHeaderEnd;
  String IPAddServ      = panelBodySymbol + String("globe") + panelBodyName + String("IP Address") + panelBodyValue + host + panelBodyEnd;
  String User           = panelBodySymbol + String("user") + panelBodyName + String("Username") + panelBodyValue + Username + panelBodyEnd;
  String PimaticVar_1   = panelBodySymbol + String("transfer") + panelBodyName + String("Variable Position") + panelBodyValue + PositionVar + panelBodyEnd;
  String PimaticVar_2   = panelBodySymbol + String("transfer") + panelBodyName + String("Variable Power") + panelBodyValue + PowerVar + panelBodyEnd + panelEnd;

  String title3         = panelHeaderName + String("Heater") + panelHeaderEnd;
  String commands       = panelBodySymbol + String("dashboard") + panelBodyName + String("Temperatur") + panelBodyValue + roombacontrol_1 + String(Ist_Motorposition / m) + String(" °C") + roombacontrol_2 + panelBodyEnd ;
  String commands_2     = panelBodySymbol + String("off") + panelBodyName + String("Power") + panelBodyValue + String("state = ") + String(power) + String("    ") + roombacontrol_3 + panelBodyEnd;
  String commands_3     = panelBodySymbol + String("cog") + panelBodyName + String("Motorposition") + panelBodyValue + String(Ist_Motorposition) + panelBodyEnd + panelEnd;

  server.send ( 200, "text/html", header + navbar + containerStart + title3 + commands + commands_2 + commands_3 + title2 + IPAddServ + User + PimaticVar_1 + PimaticVar_2 + title1 + IPAddClient + MACAddClient + SignalStrength + ClientName + Version + Uptime + containerEnd + siteEnd);
}

One strong word of advice : stop with putting static HTML in your code as strings and ‘compiling’ it on the fly while sending to the client.
This will lead buffer overflows and all weird stuf. Been there, done that and got shitload of errors.
Write you HTML just on your workstation and upload it to SPIFFS. Server from the ESP webserver and let the HTML (on the clientside) load the actual changing content through jquery / ajax calls.

@fabian looks very interesting to me!
pls. tell us more about your project when you have some spare time!
am really curious about what you’re doing there!

@koffienl thank you for the advice. I will try my best and going to rework my actual solution. Do you know a good and easy tutorial to start with? Google is leading me to many different types of tutorials. Do I need to use jquery and ajax or do I only need one of these techniques/languages.

@leader21 for sure I will post some more info tomorrow.

What I don’t understand … why all the trouble of hosting such interface on a slow ESP instead of a raspberry pi ?

@koffienl it is just because of size, price and energy. And my understanding of this arduino based solution is that it should be a more reliable solution because of doing nothing else than looping one task. But please correct me if I am wrong.

You should do whatever you like, of course
But assuming you already have a raspberry pi with Pimatic … I would personally host the GUI on that pi.

A ESP can perfectly serve some webpages, but it doesn’t have any serverside scripting options and it becomes realy slow when requesting multiple files simultaneously from one or more clients.

Okay, than you recommend to script a api on the ESP which will then be used by a plugin or device into pimatic, running on the raspberry?

I thought to run a small webpage on the ESP just in case that pimatic isn’t reachable. (Currently that’s a problem which I have from time to time. The frontend isn’t reachable for some minutes, at least 10 minutes or more.) But in general it should be controlled by a device within pimatic. Perhaps a iframe device with your Nest-webpage will be a very nice solution.