• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

ESP32 with multiple DS18B20 and displaying on web server

Q&A Forum › Category: ESP32 › ESP32 with multiple DS18B20 and displaying on web server
0 Vote Up Vote Down
Darryl asked 6 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 +="&deg;C</p>";
ptr +="<p>Room 2: ";
ptr +=tempSensor2;
ptr +="&deg;C</p>";
ptr +="<p>Room 3: ";
ptr +=tempSensor3;
ptr +="&deg;C</p>";
ptr +="<p>Room 4: ";
ptr +=tempSensor4;
ptr +="&deg;C</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
3 Answers
0 Vote Up Vote Down
Rui Santos Staff answered 6 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 +="&deg;C ";
ptr +="Room 3: ";
ptr +=tempSensor3;
ptr +="&deg;C</p>";

That should solve your problem!

0 Vote Up Vote Down
Darryl answered 6 years ago

Thanks Rui that fixes the problem.  I also added 12 &nbsp; comment to apply space between them.  Is the &nbsp command the best way to insert spaces?
 
 

0 Vote Up Vote Down
Rui Santos Staff answered 6 years ago

Unfortunately, yes… using &nbsp; 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 &nbsp; works just fine for personal projects

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.