![](/media/cache/img/default_profile.jpg.50x50_q85.jpg)
Example showing the ublox Cellular GPS/GNSS module with the online PubNub service on an LPC4088 Experiment Base Board. This example uses an RTOS.
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: <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>