Published December 10, 2020

Temp & Humidity Chart using Websockets, Charts and Raspberry

Using websockets on Raspberry II connected to wifi, I send temp & humidity data to a chart setup on HighCharts.

IntermediateProtip30 minutes715

Temp & Humidity Chart using Websockets, Charts and Raspberry

Things used in this project

Hardware components

Raspberry Pi 2 Model B

DHT11 Temperature & Humidity Sensor (4 pins)

Jumper wires (generic)

Breadboard (generic)

Software apps and online services

Raspberry Pi Raspbian

Story

This project is the sane I did for Arduino MKR1000 and I adapted for raspberry pi 2.

I had a problem with my A/C and I wanted to control the temperature and the humidity. I found that the best way was using the Raspberry, websockets, a DHT11 sensor and a web browser.

I found in the web a Websocket software made by Theldus (https://github.com/Theldus/wsServer), I modified it to suit my needs and I compiled it into a library.

The RPII is connected to to 3v3 and the DHT11 sensor using digital pin GPIO.4 to the DHT11 signal pin (view diagram). This pin may be changed, it is an argument of the command line of the program. DHT11 send every 2 seconds a sample of comma separated values of temperature & humidity.

This are the steps you need to follow to setup and run it:

1. Download the source.zip(from Schematics and Circuit Diagrams Section), unzip in a directory you choose( for instance /home/pi) and run the following commands:

2. cd to directory and do the following:

pi@raspberrypi2:~ $ unzip Source.zip
pi@raspberrypi2:~ $ cd  wsServer
pi@raspberrypi2:~/wsServer $ make
pi@raspberrypi2:~/wsServer $ make  install
pi@raspberrypi2:~/wsServer $ cd ../dht11
pi@raspberrypi2:~/dht11 $ make
pi@raspberrypi2:~/dht11 $ make  install
pi@raspberrypi2:~/dht11 $ cd ..dht11WebSocket
pi@raspberrypi2:~/dht11WebSocket $ make

3. now you have the compiled program dht11WebSocket in the same name folder.

4. You can modify it dht11WebSocket.c, if you need, and then run the last make again:

5. At the RPII prompt you run : dht11WebSocket <Pin Number>

and when you get the message "Waiting for incoming connections..." you are ready to connect to the websocket server.

6. To connect to dht11WebSocket from the client, you have to enter in the client the IP(from you raspberry.) and the port selected (defaults is 8888), again you may change in the code this value using variable port, the value you have to enter in the web browser is like this:

http://IP:websocketport, ie. http://192.168.1.100:8888.

7. When the client is connected, the server starts to send the sensor data to the client and the data the client receives every two second approx. is displayed on the chart.

8. Attached is the source code for dht11 and wsServer libraries and dht11WebSocket program (sources.zip)

Code

HTML Code

<html>
<head>
  <title>Temperature & Humidity Chart</title>
	
  <!-- Compressed JavaScript Library  and Themes-->
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
 
  <!-- Charts Library -->
	<script src="https://code.highcharts.com/stock/highstock.js"></script>
	<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
	<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
    	
  <style>
    body {
      font-size: 16px;
      font-family: verdana,helvetica,arial,sans-serif;
    }
  </style>
</head>


<body>

	<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>


	<script>
		var ws;
     
	  $(function() { 
			$("#close").click(function(evt){
				if( typeof ws != "undefined"){
					if(ws.readyState != 3 && ws.readyState != 4 ){
						ws.send("Close");
						ws.close();
					}
				}						
			});
	  	
	  	//Open websocket
		  $("#open").click(function(evt){
		  	var host = $("#host").val();
	      var port = $("#port").val();
	      var uri = $("#uri").val();
				//start highstock
	      var mainChart = new Highcharts.stockChart(chartOptions);
	              
	      // create websocket instance
	      ws = new WebSocket("ws://" + host + ":" + port + uri);
	       
	      // Close callback
	      ws.onclose = function(evt) {
	        //change color of labels to red
	        $("#host").css("background", "#ff0000"); 
	        $("#port").css("background", "#ff0000"); 
	        $("#uri").css("background",  "#ff0000");
	        $("div#message_details").hide();
	
	        };
	
	      // Open Websocket callback
	      ws.onopen = function(evt) { 
	        //change color of labels to green
	        $("#host").css("background", "#00ff00"); 
	        $("#port").css("background", "#00ff00"); 
	        $("#uri").css("background", "#00ff00");
					ws.send("Open");
	      };
	      //receive message callback
  			ws.onmessage = function(evt) {
    			var dataStr = [];
    			dataStr = evt.data.split(",");
    			// Series idx 0=Temp idx 1=Hum 
    			var seriesT = mainChart.series[0];
    			var seriesH = mainChart.series[1];
    			var temp = parseFloat(dataStr[0]);
    			var hum = parseFloat(dataStr[1]);
					var myEpoch = new Date().getTime(); //get current epoch time    			 				          
		        
					seriesT.addPoint([myEpoch, temp]);
					seriesH.addPoint([myEpoch, hum]);
 	      };
    	});
  });
	  
  
	</script>
	
	<script>
		Highcharts.setOptions({
  		global: 
  		{
      	useUTC: false
  		}
		});
    
    var tempdata;
    var humData;
		var chartOptions = {  
		chart: {
		  renderTo: 'container',
		  type: 'spline',
		  animation: false,
	  },
 		
 		title: {
        text: 'Temperature & Humidity vs Time'
    },
		xAxis: 	{
		  type: 'datetime',
		  tickPixelInterval:150,
		  labels: {
				format: '{value:%H:%M:%S}',
				rotation: 45,
				align: 'left'
			}
		},
    yAxis: [{
      title: {
        text: 'Temperature(°C)',
				style: {
        	color: Highcharts.getOptions().colors[1]
        }        
      },
		  tickInterval:1,
			labels: {
    		format: '{value}°',
    		style: {
        	color: Highcharts.getOptions().colors[1]
        }
      },
      opposite:false,
    },{
      title: {
	    text: 'Humidity',
			style: {
      	color: Highcharts.getOptions().colors[0]
        }
		  },
		  tickInterval:5,
			max:100,
			labels: {
    		format: '{value}\%',
    		style: {
        	color: Highcharts.getOptions().colors[0]
        }
      },
    	opposite:true
    }],

    rangeSelector: {
    	enabled: true,
    	inputEnabled: false,
      buttons: [{
          count: 6,
          type: 'hour',
          text: '6h'
      }, {
          count: 12,
          type: 'hour',
          text: '12h'
      }, {
          type: 'all',
          text: 'All'
      }],
    },
		legend: {
		    enabled: false
		},
		exporting:{
		        enabled: false
		},
		plotOptions: {
	  	series: {
        animation: false
    	}
  	},
  	
		series: [{
			name: 'Temp',
		  data: tempdata,
			color: Highcharts.getOptions().colors[1],
		},
	  {
			name: 'Hum',
		  data: humData,
			color: Highcharts.getOptions().colors[0],
		  yAxis:1 
	  }				  			
	]		
	}
		
		
	</script>
	


	<div id="connection_details">
	    <label for="host">host:</label>
	    <input type="text" id="host" value="192.168.1.110" style="background:#ff0000;"/>
	    <label for="port">port:</label>
	    <input type="text" id="port" value="80" style="background:#ff0000;"/>
	    <label for="uri">uri:  </label>
	    <input type="text" id="uri" value="/ws" style="background:#ff0000;"/>
	    <input type="submit" id="open" value="Open" />
	    <input type="button" id="close" value="Close" />
	</div>
    
	</body>
</html>

Temp & Humidity Chart using Websockets, Charts and Raspberry

Things used in this project

Hardware components

Software apps and online services

Story

Schematics

DHT11

Source.zip

Code

HTML Code

Credits

cb77

Comments

Embed the widget on your own site

Temp & Humidity Chart using Websockets, Charts and Raspberry

Temp & Humidity Chart using Websockets, Charts and Raspberry

Things used in this project

Hardware components

Software apps and online services

Story

Schematics

DHT11

Source.zip

Code

HTML Code

Credits

cb77

Comments

Related channels and tags