Creating a dashboard for multiple sensors


was asking if its even possible to create a dashboard for multiple sensors using esp32 ,which will show the difference sensors readings in realtime.
much regards.


The answer is yes, it is possible.


Is there any links to tutorials on this topic?..will realy appreciate


Could you elaborate on what exactly are you looking for, please?


i am suppose to create a dashboard which displays realtime readings (both numerical and graphical) of sht21 temperature and humidity sensor .
but i am not able to get any documentation online on how to do it.
will realy appreciate your assistance.


Is that dashboard supposed to be run on some server, and ESP32 would report data to that server?


The ESP32 should be sending the sensor readings to the dashboard this is the link which shows how it should be done but i have no idea where to start .I have already programmed the sensor and the readings are shown on the console(using mos.exe).


Hi Eddy

if it helps. This weekend I’ve just finished the first part of a project that reads temp ,humidity and batt level from a ESP32 with a dht22 sensor. I send the parameter every 30 mins by POST to a public server , and from the other side I persist that information on a mysql database. Im now building some sort of dashboard on php.

config.yml looks like

 - ["app", "o", {title: "My app custom settings"}]
 - ["", "i", 25, {title: "GPIO pin a sensor is attached to"}]
 - ["app.bat", "i", 35, {title: "GPIO pin a sensor is attached to"}]
 - ["wifi.ap.enable", false]
 - ["wifi.sta.ssid", "SSID"]
 - ["wifi.sta.pass", "PASS"]
 - ["wifi.sta.enable", true]

  - origin:
  - origin:
  - origin:
  - origin:
  - origin:
  - origin:  # <-- Add this line!
  - origin:  # <-- Add this line!
  - origin:
  - origin:
  - origin:



let pin = Cfg.get('');
let bat = Cfg.get('app.bat');
let dht = DHT.create(pin, DHT.DHT22);


function PostData(msg){
          url: 'http://mysite.dummy/th.php',
          method: 'POST', 
          success: function(body, full_http_msg) { print(body); },
          error: function(err) { print(err); }, // Optional
Timer.set(1800000 /* milliseconds */, Timer.REPEAT, function() {
  let t = dht.getTemp();
  let h = dht.getHumidity();
  let v = (*2*3.3*1.1;
  if (isNaN(h) || isNaN(t)) {
    print('Failed to read data from sensor');
  } else {

    let msg = JSON.stringify({temperature: t, humidity: h, voltage:v});
}, null);

Let me know if you need to take a look at the php processing this information. I hope this helps. Regards.

PS: this project is for personal use, you might want to improve the code if it’s for commercial use.


Hi gzalazar
Thank you very much for the info, could you please share the php code ?
and my next question is wether the dashboard is secure (TLS,SSL,HTTPS)?


sure, now a couple of comments about the code, it was part of an old (2 yrs ago) project to store data coming from GPS via GPRS , again for personal use, so there is plenty room to streamlight or reduce the code, as the focus was/is moving forward on project , however the code works, as I said if you happen to find better ways to perform the task I will be more than happy to see it!!

Regarding TLS/SSL question, I haven’t tried since I don’t believe to have a valid SSL on the server im sending data to, however I understand that it will be just a matter of replacing http for https on the url, as since code in api_net does activate port 443 when it gets the https on the protocol. see below. Regards.


let URL = {
  // ## **`URL.parse(url)`**
  // Parse URL string, return and object with `ssl`, `addr`, `uri` keys.
  // Example:
  // ```javascript
  // print(JSON.stringify(URL.parse('https://a.b:1234/foo?bar')));
  // // Prints: {"uri":"/foo?bar","addr":"a.b:1234","ssl":true}
  // ```
  parse: function(url) {
    let ssl = false, addr, port = '80', uri = '/', app = true;
        *if (url.slice(0, 8) === 'https://') {*
*          port = '443';*
*          ssl = true;*
      url = url.slice(8);


* Change the value of $password if you have set a password on the root userid
* Change NULL to port number to use DBMS other than the default using port 3306
$servername = "localhost";
$username = "dbuser";
$password = "dbpass";
$dbname = "dbname";
$temp= "";   								 // variable to store temperature
$tempo="";  								 // temporary variable to store strings
$hum="";   									  //humidity
$dev="huzzah";									 // device name, hardcoded , will be replaced in the future by actual device MAC address
$bat="";										//variable to store battery level
$vars = array("clave"=>"valor");
$tuplas=0;										//int variable to store number of key/values in $vars array

$content = file_get_contents( 'php://input' ); 			//reading data sent over http header , look for the line data:msg in init.js

	$tuplas=substr_count($content, ',') +1;   				  // rough way of counting number of key/values in $content. 
	echo "--------------";
	// {"voltage":4.295722,"humidity":47.900002,"temperature":19.400000}    Sample string of what should be coming on $content.	just for reference as Im coding				
	// removes from $ content curly brackets and " . for sure there a much elegant way to do this.
	$content = str_replace('{', '', $content);
	$content = str_replace('}', '', $content);
	$content = str_replace('"', '', $content);
	// after cleaning up , $content end ups as is shown below.
	// voltage:4.295722,humidity:47.900002,temperature:19.400000

	// for loop for the number stored in $tuplas , to transfer $content to $var
	for ($i = 0; $i < $tuplas; $i++) {
			$tempo= substr($content,0,strpos($content, ","));
			//echo $temp;
		$vars[substr($tempo,0,strpos($content, ":"))]=substr($tempo,strpos($content, ":")+1,strlen($tempo));
		$content = substr($content,strpos($content, ",")+1,strlen($content));  
	// reading values into final variables.
	for ($i = 0; $i < $tuplas; $i++) {
			if ($vars["voltage"]!==null) {
			$bat = $vars["voltage"];
			echo "<br>".'Voltage     : ' .  $bat."<br>";	
			if ($vars["humidity"]!==null) {
			$hum = $vars["humidity"];
			echo 'Humidity     : ' .  $hum."<br>";	

		if ($vars["temperature"]!==null) {
			$temp = $vars["temperature"];
			echo 'Temperature: ' . $temp."<br>";
    //storing into db
			// Create connection
		$conn = new mysqli($servername, $username, $password,$dbname );

		// Check connection
			if ($conn->connect_error) {
				die("Connection failed: " . $conn->connect_error);
		echo "Connected successfully"."<br>"."<br>"."<br>";
			$sql = "INSERT INTO thsensor(temp, hum, device,bat)
				VALUES ('$temp','$hum','$device',$bat)";
			if ($conn->query($sql) === TRUE) {
			echo "New record created successfully";
			} else {
				echo "Error: " . $sql . "<br>" . $conn->error;
		echo "Bad data";

did some code cleanup and added as reference , temp / hum/ pression from openweather are reference

$content = file_get_contents( 'php://input' );
$sensors= json_decode($content,true);

$temp= $sensors["temperature"];

$temp_rel= $values["temp"];
$hum_rel= $values["humidity"];
$pres_rel= $values["pressure"];

Thank you so much …will let you if my project works.