Darryl asked 5 years ago
I have duplicated a setup that I found on the internet that uses a ESP32 and multiple DS18B20 temperature sensors and displays the temperature values on a web server. The software and hardware works correct but I would like to change the way it is displayed on the web server. A portion of my code is below. I have also attached an image showing how the web server currently displays the temperatures (top image) and also how I’m trying to display the temperatures (bottom image). Any assistance would be greatly appreciated.
https://imgur.com/xBPqDdr
String SendHTML(float tempSensor1,float tempSensor2,float tempSensor3,float tempSensor4){
String ptr = "<!DOCTYPE html> <html>\n";
//ptr +="<meta http-equiv=refresh content=2 >";
ptr +="<title>House Temperature Monitor</title>\n";
ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #19849e;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="<script>\n";
ptr +="setInterval(loadDoc,5000);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>House Temperature Monitor</h1>\n";
ptr +="<p>Room 1: ";
ptr +=tempSensor1;
ptr +="°C</p>";
ptr +="<p>Room 2: ";
ptr +=tempSensor2;
ptr +="°C</p>";
ptr +="<p>Room 3: ";
ptr +=tempSensor3;
ptr +="°C</p>";
ptr +="<p>Room 4: ";
ptr +=tempSensor4;
ptr +="°C</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
Rui Santos Staff answered 5 years ago
Hello Darryl, but what exactly would you like to modify? Keep Room 2 and 3 on the same line?
If it’s just that, you just need to use one HTML paragraph tag:
ptr +="<p>Room 2: ";
ptr +=tempSensor2;
ptr +="°C ";
ptr +="Room 3: ";
ptr +=tempSensor3;
ptr +="°C</p>";
That should solve your problem!
Darryl answered 5 years ago
Thanks Rui that fixes the problem. I also added 12 comment to apply space between them. Is the   command the best way to insert spaces?
Rui Santos Staff answered 5 years ago
Unfortunately, yes… using is the easiest way (only way) of adding spaces in HTML.
You usually use CSS (best practice) to separate tags or elements in your web page, but works just fine for personal projects