EmbeddedArtists AB / Mbed 2 deprecated lpc4088_ebb_ublox_Cellular_PubNubDemo_rtos

Important changes to repositories hosted on mbed.com

Mbed hosted mercurial repositories are deprecated and are due to be permanently deleted in July 2026.

To keep a copy of this software download the repository Zip archive or clone locally using Mercurial.

It is also possible to export all your personal repositories from the account settings page.

Dependencies:   C027_Support EALib LM75B PubNub mbed-rtos mbed picojson

pubnub_acc.html

Committer:
embeddedartists
Date:
2014-10-01
Revision:
0:713518ea5028

File content as of revision 0:713518ea5028:

<html>
	<head>
<!--		<script type="text/javascript" src="jscolor/jscolor.js"></script>-->
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
	  var baseline = Math.round(new Date().getTime()/10); // current time as integer in 10ms resolution
	  var temps = [['Time', 'Temp']];
	  var accs = [['Time', 'X', 'Y', 'Z']];
      google.load("visualization", "1", {packages:["corechart"]});
      //google.setOnLoadCallback(drawChart);
      function drawChart() {
        /*var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);*/
		var data = google.visualization.arrayToDataTable(temps);

        var options = {
          title: 'Temperature over time',
		  vAxis: { title: "Degrees C" },
		  hAxis: { title: "Time since first message (in seconds)" },
		  curveType: 'function',
		  legend: { position: 'none' },
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

		// Acc chart
		var data = google.visualization.arrayToDataTable(accs);

        var options = {
          title: 'Acceleration over time',
		  vAxis: { title: "Acc value", minValue: -60, maxValue: 60 },
		  hAxis: { title: "Time since first message (in seconds)" },
		  curveType: 'function',
		  //legend: { position: 'none' },
        };

        var chart = new google.visualization.LineChart(document.getElementById('acc_chart_div'));

        chart.draw(data, options);
      }
	  function addToChart(t, x, y, z) {
	    var now = Math.round(new Date().getTime()/10); // current time as integer in 10ms resolution
	    console.log(new Date().getTime()/10 + " " + (now - baseline) + " temp = " + t+ " acc {"+x+","+y+","+z+"}");
	    temps[temps.length] = [ (now - baseline)/100, t ];
	    accs[accs.length] = [ (now - baseline)/100, x, y, z];
		drawChart();
	  }
    </script>
   <script src=http://cdn.pubnub.com/pubnub.min.js ></script>
   <script>
	 var pubnub = PUBNUB.init({
		publish_key: 'pub-c-e4a8b6d6-7be2-4ef9-85b9-f6dfbed23f7d',
		subscribe_key: 'sub-c-83ad9d3a-3365-11e4-9846-02ee2ddab7fe'
	 });
 
	function receiveMessage(message) {
		//console.log(message);

		var type = 0;
		try {
			var test = message.status.mx;
			type = 1;
		} catch (err) {
			// not a measurement status message from HW
		}
		try {
			var test = message.led.r;
			type = 2;
		} catch (err) {
			// not a set RGB color request from us
		}
		
		var messageLog = document.getElementById("messageLog");
		if (type == 1) {			
			var listItem = document.createElement("li");
			var msg = "Acc X,Y,Z = {" + message.status.mx + ", " + message.status.my + ", " + message.status.mz + "} Temp = " + message.status.temp;
			var text = document.createTextNode(msg);
			listItem.appendChild(text);
			document.getElementById("messageList").appendChild(listItem);
			messageLog.scrollTop = messageLog.scrollHeight;			
			addToChart(message.status.temp, message.status.mx, message.status.my, message.status.mz);
		} else if (type == 2) {
			var listItem = document.createElement("li");
			var msg = "Set RGB LED: {" + message.led.r + ", " + message.led.g + ", " + message.led.b + "}";
			var text = document.createTextNode(msg);
			listItem.appendChild(text);
			document.getElementById("messageList").appendChild(listItem);
			messageLog.scrollTop = messageLog.scrollHeight;			
			//addToChart(message.status.temp);
		} else {
			// got an error, probably because message is not from mbed
			var listItem = document.createElement("li");
			var msg = "Unknwon RAW message: " + message;
			var text = document.createTextNode(msg);
			listItem.appendChild(text);
			document.getElementById("messageList").appendChild(listItem);
			messageLog.scrollTop = messageLog.scrollHeight;			
			//addToChart(message.status.temp);
		}
	}
	
	/*function sendMessage(newcolor) {
		//var r = parseInt(newcolor.substr(0,2), 16)/255;
		//var g = parseInt(newcolor.substr(2,2), 16)/255;
		//var b = parseInt(newcolor.substr(4,2), 16)/255;
		//var msg = '{ "led": {"r": ' + r + ', "g": ' + g + ', "b": ' + b + '} }';
		//var msg = '{ "led": {"r": ' + newcolor.rgb[0] + ', "g": ' + newcolor.rgb[1] + ', "b": ' + newcolor.rgb[2] + '} }';
		var msg = { "led": {"r": newcolor.rgb[0], "g": newcolor.rgb[1], "b": newcolor.rgb[2]} };
		console.log("new color #" + newcolor + " => message " + msg.led.r+","+msg.led.g+","+msg.led.b);
		pubnub.publish({
			channel: 'mbed_cmd',//'hello_world',
			message: msg
		});
	}*/
	function sendColorMessage(r,g,b) {
		var msg = { "led": {"r": r, "g": g, "b": b} };
		console.log("message " + msg.led.r+","+msg.led.g+","+msg.led.b);
		pubnub.publish({
			channel: 'mbed_cmd',//'hello_world',
			message: msg
		});
	}
 
	 pubnub.subscribe({
		channel: 'mbed_data',//'hello_world',
		message: receiveMessage
	 });
 
/* pubnub.unsubscribe({
    channel: 'a',
    message: function(m){console.log(m)}
 });*/
   </script>
		<style>
			li { font-style: monospace; }
			table,tr {border: none; }
		</style>
	</head>
   <body>
   <!--<img src="http://www.pubnub.com/static/images/illustrations/cloud-red.png">-->
   
   <table>
   <tr>
	<td valign="top">
		<table>
			<tr valign="top">
				<td><div id="chart_div" style="width: 800px; height: 400px;"></div></td>
			</tr>
			<tr valign="top">
				<td><div id="acc_chart_div" style="width: 800px; height: 400px;"></div></td>
			</tr>
			<!--<tr valign="top">
				<td>Change color on RGB LED to:&nbsp;&nbsp;&nbsp;<input class="color" onchange="sendMessage(this.color)"></td>
			</tr>-->
			<tr valign="top">
				<td>
					<input type="button" value="Set color to RED" onclick="sendColorMessage(1,0,0)">
					<input type="button" value="Set color to GREEN" onclick="sendColorMessage(0,1,0)">
					<input type="button" value="Set color to BLUE" onclick="sendColorMessage(0,0,1)">
				</td>
			</tr>
		</table>
	</td>
	<td>
	<p><b>Data from mbed:</b></p>
    <div id="messageLog" style="height: 600px; width: 350px; overflow:auto;">
        <ol id="messageList">
            <!-- This will be populated dynamically. -->
        </ol>
    </div>
	</td>
	</tr>
	<tr>
	<td>
		<!--<input class="color" onchange="sendMessage(this.color)">-->
	</td>
	</tr>
	</body>
</html>