Creating a dashboard for multiple sensors

#1

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.

#2

The answer is yes, it is possible.

#3

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

#4

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

#5

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.
Regards.

#6

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

#7

The ESP32 should be sending the sensor readings to the dashboard this is the link https://git.nexlab.net/esp/mongoose 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).

#8

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

config_schema:
 - ["app", "o", {title: "My app custom settings"}]
 - ["app.pin", "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]

libs:
  - origin: https://github.com/mongoose-os-libs/boards
  - origin: https://github.com/mongoose-os-libs/ca-bundle
  - origin: https://github.com/mongoose-os-libs/rpc-service-config
  - origin: https://github.com/mongoose-os-libs/rpc-service-fs
  - origin: https://github.com/mongoose-os-libs/rpc-uart
  - origin: https://github.com/mongoose-os-libs/dht  # <-- Add this line!
  - origin: https://github.com/mongoose-os-libs/mjs  # <-- Add this line!
  - origin: https://github.com/mongoose-os-libs/adc
  - origin: https://github.com/mongoose-os-libs/wifi
  - origin: https://github.com/mongoose-os-libs/wifi-setup-web-ui

init.js

load('api_config.js');
load('api_rpc.js');
load('api_dht.js');
load('api_timer.js');
load("api_adc.js");
load("api_http.js");
load('api_net.js');
load('api_sys.js');

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

ADC.enable(bat);

function PostData(msg){
	 HTTP.query({
          url: 'http://mysite.dummy/th.php',
          method: 'POST', 
		  data:msg,
          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 = (ADC.read(bat)/4095)*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});
    PostData(msg);
	
   
  }
}, 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.

#9

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)?

#10

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.

load('api_net.js');

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);

PHP CODE

<?php
/*
* 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++) {
		if($i<$tuplas-1){
			$tempo= substr($content,0,strpos($content, ","));
		}else{
			$tempo=$content;
			//echo $temp;
		}
			
		$vars[substr($tempo,0,strpos($content, ":"))]=substr($tempo,strpos($content, ":")+1,strlen($tempo));
		$content = substr($content,strpos($content, ",")+1,strlen($content));  
		$tempo='';
}
	
	// reading values into final variables.
	for ($i = 0; $i < $tuplas; $i++) {
			if ($vars["voltage"]!==null) {
			$bat = $vars["voltage"];
	          
			$flag=1;
			echo "<br>".'Voltage     : ' .  $bat."<br>";	
			}
				
			if ($vars["humidity"]!==null) {
			$hum = $vars["humidity"];
			
			$flag=1;
			echo 'Humidity     : ' .  $hum."<br>";	
		}

		if ($vars["temperature"]!==null) {
			$temp = $vars["temperature"];
				
			$flag=1;
			echo 'Temperature: ' . $temp."<br>";
		}
	}
	  
    //storing into db
	if($flag==1){
			// 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;
			}
		$conn->close();
	}else{			
		echo "Bad data";
	}
?>
#11

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"];
$hum=$sensors["humidity"];
$bat=$sensors["voltage"];
$dev="huzzah";
	
$res=file_get_contents("http://api.openweathermap.org/data/2.5/weather?lat=-34.4417648&lon=-58.5988416&units=metric&lang=sp&appid=yourid");
$arr=json_decode($res,true);
$values=$arr["main"];

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

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