I am working with an ESP32 Feather from Adafruit in combination with an AMG8833 Feather from Adafruit.
https://www.adafruit.com/product/3405
https://www.adafruit.com/product/3622
I´m trying so set up a webpage where I can see the live stream of the thermal cam an also can adjust the Minimum and Maximum Temperature.
So far I can view the Picture via the manipulation of a table and I can also adjust the Min/Max temperature.
Now I cannot figure out how so set up the video stream, I have to say I´m an absolute newbie in Networking. I tried to set up a java script to update the cells of the table but that didn´t work out. I also googled but I can´t find anything similar. Do I have to use Websockets and have an extra Html file on my computer which is the client and one provide an Websocket server on the ESP32 or can I run everything on the ESP32 an use the provided array somehow as an source for an HTML video element?
I´m really stuck here and would appreciate any help.
An image of my actual homepage is in the attachements.
My code so far:
Code: Select all
//ThermalCAM and Server
#include <Wire.h>
#include <Adafruit_AMG88xx.h>
#include <WiFi.h>
Adafruit_AMG88xx amg;
//Comment this out to remove the text overlay
#define SHOW_TEMP_TEXT
//low range of the sensor (this will be blue on the screen)
int minT = 15;
#define MINTEMP minT
//high range of the sensor (this will be red on the screen)
int maxT = 50;
#define MAXTEMP maxT
float pixels[AMG88xx_PIXEL_ARRAY_SIZE];
String camColors[] = {"E50015", "E40006", "E30800", "E31700", "E22600", "E13500", "E14400", "E05300", "E06200", "DF7100", "DE7F00", "DE8E00", "DD9C00", "DDAA00",
"DCB900", "DBC700", "DBD500", "D1DA00", "C2DA00", "B3D900", "A4D800", "95D800", "86D700", "78D700", "69D600", "5AD500", "4CD500", "3DD400", "2FD400", "21D300", "13D200", "05D200",
"00D109", "00D116", "00D024", "00CF32", "00CF40", "00CE4D", "00CE5B", "00CD68", "00CC76", "00CC83", "00CB90", "00CB9E", "00CAAB", "00C9B8", "00C9C4", "00BFC8", "00B1C8", "00A3C7",
"0095C6", "0088C6", "007AC5", "006DC5", "005FC4", "0052C3", "0044C3", "0037C2", "002AC2", "001DC1", "0010C0", "0003C0", "0900BF", "1500BF"
};
const char* ssid = "Martin Router King";
const char* password = "onedaythisbungalowwillbeclean";
// NETWORK: Static IP details...
IPAddress ip(192, 168, 1, 15);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
WiFiServer server(80);
void setup() {
Serial.begin(115200);
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.config(ip, gateway, subnet);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
Serial.println(F("AMG8833 thermal camera!"));
bool status;
// default settings
status = amg.begin();
if (!status) {
Serial.println("Could not find a valid AMG88xx sensor, check wiring!");
while (1);
}
Serial.println("-- Thermal Camera Test --");
delay(100); // let sensor boot up
}
void loop() {
int i = 0;
int colorIndex = 0;
//read all the pixels
amg.readPixels(pixels);
Serial.print("[");
for (int i = 1; i < AMG88xx_PIXEL_ARRAY_SIZE + 1; i++) {
int colorTemp;
if (pixels[i - 1] >= MAXTEMP) colorTemp = MAXTEMP;
else if (pixels[i - 1] <= MINTEMP) colorTemp = MINTEMP;
else colorTemp = pixels[i - 1];
uint8_t colorIndex = map(colorTemp, MINTEMP, MAXTEMP, 0, 64);
//colorIndex = constrain(colorIndex, 0, 255);
//Serial.print(pixels[i]);
Serial.print(colorIndex);
Serial.print(", ");
if ( i % 8 == 0 ) Serial.println();
}
Serial.println("]");
Serial.println();
WiFiClient client = server.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("New Client."); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.print("<head> <title> Thermal Camera </title>");
//javaScript
client.print("<script type=\"text/javascript\" >");
client.print("function colors(a,b){");
client.print("document.getElementById('id"); client.print(i); client.print("').style.backgroundColor='#"); client.print(camColors[63 - colorIndex]); client.print("';");
client.print("</script>");
client.print("</head>");
client.print("<center>");
// the content of the HTTP response follows the header:
client.print("<h1 style=\"text-align:center;\">Thermal Camera</h1>");
client.print("<a href=\"HH\"><button background-color:#E50015>Maxtemp +5C</button></a> <t>");
client.print("<a href=\"HL\"><button>Maxtemp -5C</button></a> <t>");
client.print("<a href=\"LH\"><button>Mintemp +5C</button></a> <t>");
client.print("<a href=\"LL\"><button>Mintemp -5C</button></a> <br>");
// The HTTP response ends with another blank line:
client.println("<br>");
client.print("Maxtemp: ");
client.println(maxT);
client.println("C ");
client.println("<t>");
client.print("Mintemp: ");
client.println(minT);
client.println("C");
client.println("<br> <br>");
//for (int i = 0; i < AMG88xx_PIXEL_ARRAY_SIZE; i++) {
client.print("<table id = \"table\" cellspacing = \"0\">");
client.print("<tr>");
for (int i = 1; i < AMG88xx_PIXEL_ARRAY_SIZE + 1; i++) {
int colorTemp;
if (pixels[i - 1] >= MAXTEMP) colorTemp = MAXTEMP;
else if (pixels[i - 1] <= MINTEMP) colorTemp = MINTEMP;
else colorTemp = pixels[i - 1];
uint8_t colorIndex = map(colorTemp, MINTEMP, MAXTEMP, 0, 63);
//colorIndex = constrain(colorIndex, 0, 255);
//client.print("<td id = \"1\" height=30 width=30 bgcolor=#0xE50015> </td>");
client.print("<td id = \"id"); client.print (i); client.print("\"height=30 width=30 bgcolor=#"); client.print(camColors[63 - colorIndex]); client.print("></td>");
if (i % 8 == 0) {
client.print("</tr>");
client.print("<tr>");
}
}
client.print("</table>");
/* while (millis() < 5000)
{
amg.readPixels(pixels);
for (int i = 0; i < AMG88xx_PIXEL_ARRAY_SIZE; i++) {
int colorTemp;
if (pixels[i - 1] >= MAXTEMP) colorTemp = MAXTEMP;
else if (pixels[i - 1] <= MINTEMP) colorTemp = MINTEMP;
else colorTemp = pixels[i - 1];
uint8_t colorIndex = map(colorTemp, MINTEMP, MAXTEMP, 0, 63);
client.print("<script> colors() </script>");
}
}
client.print("<script>");
client.print("document.getElementById('id"); client.print("1"); client.print("').style.backgroundColor='#FF0000';");
client.print("</script>");
client.print("</center>");
*/
// break out of the while loop:
break;
} else { // if you got a newline, then clear currentLine:
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /HH")) {
maxT = maxT + 5;
#define MAXTEMP maxT
}
if (currentLine.endsWith("GET /LH")) {
minT = minT + 5;
#define MINTEMP minT
}
if (currentLine.endsWith("GET /HL")) {
maxT = maxT - 5;
#define MAXTEMP maxT
}
if (currentLine.endsWith("GET /LL")) {
minT = minT - 5;
#define MINTEMP minT
}
}
}
// close the connection:
client.stop();
Serial.println("Client Disconnected.");
}
//delay (200);
}
