lincerely/WebSocket-temp-logger.md

## temp.sh
#!/bin/bash
#Print the temp of pi cpu every second

while true; do
	vcgencmd measure_temp | cut -c6-9
	sleep 1
done
exit

## test.html
<!DOCTYPE html>
<html>
<head>
	<title>Pi Temp.</title>
	<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
	<style>
		div.smoothie-chart-tooltip {
			background: #444;
			padding: 1em;
			margin-top: 20px;
			font-family: consolas;
			color: white;
			font-size: 10px;
			pointer-events: none;
		}
		body {
			background: #222222;
			color: white;
			font-family: 'Libre Barcode 128 Text', cursive;
			font-size:40px;
		}
		html, body {
			height: 100%;
		}

		html {
			display: table;
			margin: auto;
		}

		body {
			display: table-cell;
			vertical-align: middle;
		}
		h1 {
			margin: 0 auto;
		}

	</style>
</head>
<body>
	<canvas id="smoothie-chart" width="754" height="200"></canvas>
	<h1>PI's temperature</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.32.0/smoothie.min.js"></script>
	<script type="text/javascript">

		function myYRangeFunction(range) {
			  // TODO implement your calculation using range.min and range.max
			  var min = range.min-1;
			  var max = range.max+1;
			  return {min: min, max: max};
		}

		var smoothie = new SmoothieChart({
			interpolation:'linear',
			grid:{fillStyle:'#222222'},
			tooltip:true,
			yRangeFunction:myYRangeFunction,
			timestampFormatter:SmoothieChart.timeFormatter
		});

		var series = new TimeSeries();

		smoothie.addTimeSeries(series,{lineWidth:2,strokeStyle:'#26C980',fillStyle: 'RGBA(38, 201, 128, 0.2)'});
		smoothie.streamTo(document.getElementById("smoothie-chart"),1000);

		var ws = new WebSocket('ws://localhost:8080/');
		ws.onopen = function(){
			console.log('Connected to PI');
		};
		ws.onmessage = function(event){
			series.append(new Date().getTime(), parseFloat(event.data));
		};
		ws.onclose=function(){
			console.log('Disconnected');
		};

	</script>
</body>
</html>

## WebSocket-temp-logger.md

      
    Raw
  

              WebSocket-temp-logger.md
            
          
    Install websocketd

wget https://github.com/joewalnes/websocketd/releases/download/v0.2.12/websocketd-0.2.12-linux_arm.zip
unzip websocketd-0.2.12-linux_arm.zip

Listen at port 8080

#make temp.sh executable
chmod +x temp.sh

./websocketd --port=8080 ./temp.sh

Open test.html in your broswer
	#!/bin/bash
	#Print the temp of pi cpu every second

	while true; do
	vcgencmd measure_temp \| cut -c6-9
	sleep 1
	done
	exit
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pi Temp.</title>
	<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
	<style>
	div.smoothie-chart-tooltip {
	background: #444;
	padding: 1em;
	margin-top: 20px;
	font-family: consolas;
	color: white;
	font-size: 10px;
	pointer-events: none;
	}
	body {
	background: #222222;
	color: white;
	font-family: 'Libre Barcode 128 Text', cursive;
	font-size:40px;
	}
	html, body {
	height: 100%;
	}

	html {
	display: table;
	margin: auto;
	}

	body {
	display: table-cell;
	vertical-align: middle;
	}
	h1 {
	margin: 0 auto;
	}

	</style>
	</head>
	<body>
	<canvas id="smoothie-chart" width="754" height="200"></canvas>
	<h1>PI's temperature</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.32.0/smoothie.min.js"></script>
	<script type="text/javascript">

	function myYRangeFunction(range) {
	// TODO implement your calculation using range.min and range.max
	var min = range.min-1;
	var max = range.max+1;
	return {min: min, max: max};
	}

	var smoothie = new SmoothieChart({
	interpolation:'linear',
	grid:{fillStyle:'#222222'},
	tooltip:true,
	yRangeFunction:myYRangeFunction,
	timestampFormatter:SmoothieChart.timeFormatter
	});

	var series = new TimeSeries();

	smoothie.addTimeSeries(series,{lineWidth:2,strokeStyle:'#26C980',fillStyle: 'RGBA(38, 201, 128, 0.2)'});
	smoothie.streamTo(document.getElementById("smoothie-chart"),1000);

	var ws = new WebSocket('ws://localhost:8080/');
	ws.onopen = function(){
	console.log('Connected to PI');
	};
	ws.onmessage = function(event){
	series.append(new Date().getTime(), parseFloat(event.data));
	};
	ws.onclose=function(){
	console.log('Disconnected');
	};

	</script>
	</body>
	</html>