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

Committer:
embeddedartists
Date:
Wed Oct 01 11:39:10 2014 +0000
Revision:
0:713518ea5028
First version

Who changed what in which revision?

UserRevisionLine numberNew contents of line
embeddedartists 0:713518ea5028 1 <html>
embeddedartists 0:713518ea5028 2 <head>
embeddedartists 0:713518ea5028 3 <!-- <script type="text/javascript" src="jscolor/jscolor.js"></script>-->
embeddedartists 0:713518ea5028 4 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
embeddedartists 0:713518ea5028 5 <script type="text/javascript">
embeddedartists 0:713518ea5028 6 var baseline = Math.round(new Date().getTime()/10); // current time as integer in 10ms resolution
embeddedartists 0:713518ea5028 7 var temps = [['Time', 'Temp']];
embeddedartists 0:713518ea5028 8 var accs = [['Time', 'X', 'Y', 'Z']];
embeddedartists 0:713518ea5028 9 google.load("visualization", "1", {packages:["corechart"]});
embeddedartists 0:713518ea5028 10 //google.setOnLoadCallback(drawChart);
embeddedartists 0:713518ea5028 11 function drawChart() {
embeddedartists 0:713518ea5028 12 /*var data = google.visualization.arrayToDataTable([
embeddedartists 0:713518ea5028 13 ['Year', 'Sales', 'Expenses'],
embeddedartists 0:713518ea5028 14 ['2004', 1000, 400],
embeddedartists 0:713518ea5028 15 ['2005', 1170, 460],
embeddedartists 0:713518ea5028 16 ['2006', 660, 1120],
embeddedartists 0:713518ea5028 17 ['2007', 1030, 540]
embeddedartists 0:713518ea5028 18 ]);*/
embeddedartists 0:713518ea5028 19 var data = google.visualization.arrayToDataTable(temps);
embeddedartists 0:713518ea5028 20
embeddedartists 0:713518ea5028 21 var options = {
embeddedartists 0:713518ea5028 22 title: 'Temperature over time',
embeddedartists 0:713518ea5028 23 vAxis: { title: "Degrees C" },
embeddedartists 0:713518ea5028 24 hAxis: { title: "Time since first message (in seconds)" },
embeddedartists 0:713518ea5028 25 curveType: 'function',
embeddedartists 0:713518ea5028 26 legend: { position: 'none' },
embeddedartists 0:713518ea5028 27 };
embeddedartists 0:713518ea5028 28
embeddedartists 0:713518ea5028 29 var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
embeddedartists 0:713518ea5028 30
embeddedartists 0:713518ea5028 31 chart.draw(data, options);
embeddedartists 0:713518ea5028 32
embeddedartists 0:713518ea5028 33 // Acc chart
embeddedartists 0:713518ea5028 34 var data = google.visualization.arrayToDataTable(accs);
embeddedartists 0:713518ea5028 35
embeddedartists 0:713518ea5028 36 var options = {
embeddedartists 0:713518ea5028 37 title: 'Acceleration over time',
embeddedartists 0:713518ea5028 38 vAxis: { title: "Acc value", minValue: -60, maxValue: 60 },
embeddedartists 0:713518ea5028 39 hAxis: { title: "Time since first message (in seconds)" },
embeddedartists 0:713518ea5028 40 curveType: 'function',
embeddedartists 0:713518ea5028 41 //legend: { position: 'none' },
embeddedartists 0:713518ea5028 42 };
embeddedartists 0:713518ea5028 43
embeddedartists 0:713518ea5028 44 var chart = new google.visualization.LineChart(document.getElementById('acc_chart_div'));
embeddedartists 0:713518ea5028 45
embeddedartists 0:713518ea5028 46 chart.draw(data, options);
embeddedartists 0:713518ea5028 47 }
embeddedartists 0:713518ea5028 48 function addToChart(t, x, y, z) {
embeddedartists 0:713518ea5028 49 var now = Math.round(new Date().getTime()/10); // current time as integer in 10ms resolution
embeddedartists 0:713518ea5028 50 console.log(new Date().getTime()/10 + " " + (now - baseline) + " temp = " + t+ " acc {"+x+","+y+","+z+"}");
embeddedartists 0:713518ea5028 51 temps[temps.length] = [ (now - baseline)/100, t ];
embeddedartists 0:713518ea5028 52 accs[accs.length] = [ (now - baseline)/100, x, y, z];
embeddedartists 0:713518ea5028 53 drawChart();
embeddedartists 0:713518ea5028 54 }
embeddedartists 0:713518ea5028 55 </script>
embeddedartists 0:713518ea5028 56 <script src=http://cdn.pubnub.com/pubnub.min.js ></script>
embeddedartists 0:713518ea5028 57 <script>
embeddedartists 0:713518ea5028 58 var pubnub = PUBNUB.init({
embeddedartists 0:713518ea5028 59 publish_key: 'pub-c-e4a8b6d6-7be2-4ef9-85b9-f6dfbed23f7d',
embeddedartists 0:713518ea5028 60 subscribe_key: 'sub-c-83ad9d3a-3365-11e4-9846-02ee2ddab7fe'
embeddedartists 0:713518ea5028 61 });
embeddedartists 0:713518ea5028 62
embeddedartists 0:713518ea5028 63 function receiveMessage(message) {
embeddedartists 0:713518ea5028 64 //console.log(message);
embeddedartists 0:713518ea5028 65
embeddedartists 0:713518ea5028 66 var type = 0;
embeddedartists 0:713518ea5028 67 try {
embeddedartists 0:713518ea5028 68 var test = message.status.mx;
embeddedartists 0:713518ea5028 69 type = 1;
embeddedartists 0:713518ea5028 70 } catch (err) {
embeddedartists 0:713518ea5028 71 // not a measurement status message from HW
embeddedartists 0:713518ea5028 72 }
embeddedartists 0:713518ea5028 73 try {
embeddedartists 0:713518ea5028 74 var test = message.led.r;
embeddedartists 0:713518ea5028 75 type = 2;
embeddedartists 0:713518ea5028 76 } catch (err) {
embeddedartists 0:713518ea5028 77 // not a set RGB color request from us
embeddedartists 0:713518ea5028 78 }
embeddedartists 0:713518ea5028 79
embeddedartists 0:713518ea5028 80 var messageLog = document.getElementById("messageLog");
embeddedartists 0:713518ea5028 81 if (type == 1) {
embeddedartists 0:713518ea5028 82 var listItem = document.createElement("li");
embeddedartists 0:713518ea5028 83 var msg = "Acc X,Y,Z = {" + message.status.mx + ", " + message.status.my + ", " + message.status.mz + "} Temp = " + message.status.temp;
embeddedartists 0:713518ea5028 84 var text = document.createTextNode(msg);
embeddedartists 0:713518ea5028 85 listItem.appendChild(text);
embeddedartists 0:713518ea5028 86 document.getElementById("messageList").appendChild(listItem);
embeddedartists 0:713518ea5028 87 messageLog.scrollTop = messageLog.scrollHeight;
embeddedartists 0:713518ea5028 88 addToChart(message.status.temp, message.status.mx, message.status.my, message.status.mz);
embeddedartists 0:713518ea5028 89 } else if (type == 2) {
embeddedartists 0:713518ea5028 90 var listItem = document.createElement("li");
embeddedartists 0:713518ea5028 91 var msg = "Set RGB LED: {" + message.led.r + ", " + message.led.g + ", " + message.led.b + "}";
embeddedartists 0:713518ea5028 92 var text = document.createTextNode(msg);
embeddedartists 0:713518ea5028 93 listItem.appendChild(text);
embeddedartists 0:713518ea5028 94 document.getElementById("messageList").appendChild(listItem);
embeddedartists 0:713518ea5028 95 messageLog.scrollTop = messageLog.scrollHeight;
embeddedartists 0:713518ea5028 96 //addToChart(message.status.temp);
embeddedartists 0:713518ea5028 97 } else {
embeddedartists 0:713518ea5028 98 // got an error, probably because message is not from mbed
embeddedartists 0:713518ea5028 99 var listItem = document.createElement("li");
embeddedartists 0:713518ea5028 100 var msg = "Unknwon RAW message: " + message;
embeddedartists 0:713518ea5028 101 var text = document.createTextNode(msg);
embeddedartists 0:713518ea5028 102 listItem.appendChild(text);
embeddedartists 0:713518ea5028 103 document.getElementById("messageList").appendChild(listItem);
embeddedartists 0:713518ea5028 104 messageLog.scrollTop = messageLog.scrollHeight;
embeddedartists 0:713518ea5028 105 //addToChart(message.status.temp);
embeddedartists 0:713518ea5028 106 }
embeddedartists 0:713518ea5028 107 }
embeddedartists 0:713518ea5028 108
embeddedartists 0:713518ea5028 109 /*function sendMessage(newcolor) {
embeddedartists 0:713518ea5028 110 //var r = parseInt(newcolor.substr(0,2), 16)/255;
embeddedartists 0:713518ea5028 111 //var g = parseInt(newcolor.substr(2,2), 16)/255;
embeddedartists 0:713518ea5028 112 //var b = parseInt(newcolor.substr(4,2), 16)/255;
embeddedartists 0:713518ea5028 113 //var msg = '{ "led": {"r": ' + r + ', "g": ' + g + ', "b": ' + b + '} }';
embeddedartists 0:713518ea5028 114 //var msg = '{ "led": {"r": ' + newcolor.rgb[0] + ', "g": ' + newcolor.rgb[1] + ', "b": ' + newcolor.rgb[2] + '} }';
embeddedartists 0:713518ea5028 115 var msg = { "led": {"r": newcolor.rgb[0], "g": newcolor.rgb[1], "b": newcolor.rgb[2]} };
embeddedartists 0:713518ea5028 116 console.log("new color #" + newcolor + " => message " + msg.led.r+","+msg.led.g+","+msg.led.b);
embeddedartists 0:713518ea5028 117 pubnub.publish({
embeddedartists 0:713518ea5028 118 channel: 'mbed_cmd',//'hello_world',
embeddedartists 0:713518ea5028 119 message: msg
embeddedartists 0:713518ea5028 120 });
embeddedartists 0:713518ea5028 121 }*/
embeddedartists 0:713518ea5028 122 function sendColorMessage(r,g,b) {
embeddedartists 0:713518ea5028 123 var msg = { "led": {"r": r, "g": g, "b": b} };
embeddedartists 0:713518ea5028 124 console.log("message " + msg.led.r+","+msg.led.g+","+msg.led.b);
embeddedartists 0:713518ea5028 125 pubnub.publish({
embeddedartists 0:713518ea5028 126 channel: 'mbed_cmd',//'hello_world',
embeddedartists 0:713518ea5028 127 message: msg
embeddedartists 0:713518ea5028 128 });
embeddedartists 0:713518ea5028 129 }
embeddedartists 0:713518ea5028 130
embeddedartists 0:713518ea5028 131 pubnub.subscribe({
embeddedartists 0:713518ea5028 132 channel: 'mbed_data',//'hello_world',
embeddedartists 0:713518ea5028 133 message: receiveMessage
embeddedartists 0:713518ea5028 134 });
embeddedartists 0:713518ea5028 135
embeddedartists 0:713518ea5028 136 /* pubnub.unsubscribe({
embeddedartists 0:713518ea5028 137 channel: 'a',
embeddedartists 0:713518ea5028 138 message: function(m){console.log(m)}
embeddedartists 0:713518ea5028 139 });*/
embeddedartists 0:713518ea5028 140 </script>
embeddedartists 0:713518ea5028 141 <style>
embeddedartists 0:713518ea5028 142 li { font-style: monospace; }
embeddedartists 0:713518ea5028 143 table,tr {border: none; }
embeddedartists 0:713518ea5028 144 </style>
embeddedartists 0:713518ea5028 145 </head>
embeddedartists 0:713518ea5028 146 <body>
embeddedartists 0:713518ea5028 147 <!--<img src="http://www.pubnub.com/static/images/illustrations/cloud-red.png">-->
embeddedartists 0:713518ea5028 148
embeddedartists 0:713518ea5028 149 <table>
embeddedartists 0:713518ea5028 150 <tr>
embeddedartists 0:713518ea5028 151 <td valign="top">
embeddedartists 0:713518ea5028 152 <table>
embeddedartists 0:713518ea5028 153 <tr valign="top">
embeddedartists 0:713518ea5028 154 <td><div id="chart_div" style="width: 800px; height: 400px;"></div></td>
embeddedartists 0:713518ea5028 155 </tr>
embeddedartists 0:713518ea5028 156 <tr valign="top">
embeddedartists 0:713518ea5028 157 <td><div id="acc_chart_div" style="width: 800px; height: 400px;"></div></td>
embeddedartists 0:713518ea5028 158 </tr>
embeddedartists 0:713518ea5028 159 <!--<tr valign="top">
embeddedartists 0:713518ea5028 160 <td>Change color on RGB LED to:&nbsp;&nbsp;&nbsp;<input class="color" onchange="sendMessage(this.color)"></td>
embeddedartists 0:713518ea5028 161 </tr>-->
embeddedartists 0:713518ea5028 162 <tr valign="top">
embeddedartists 0:713518ea5028 163 <td>
embeddedartists 0:713518ea5028 164 <input type="button" value="Set color to RED" onclick="sendColorMessage(1,0,0)">
embeddedartists 0:713518ea5028 165 <input type="button" value="Set color to GREEN" onclick="sendColorMessage(0,1,0)">
embeddedartists 0:713518ea5028 166 <input type="button" value="Set color to BLUE" onclick="sendColorMessage(0,0,1)">
embeddedartists 0:713518ea5028 167 </td>
embeddedartists 0:713518ea5028 168 </tr>
embeddedartists 0:713518ea5028 169 </table>
embeddedartists 0:713518ea5028 170 </td>
embeddedartists 0:713518ea5028 171 <td>
embeddedartists 0:713518ea5028 172 <p><b>Data from mbed:</b></p>
embeddedartists 0:713518ea5028 173 <div id="messageLog" style="height: 600px; width: 350px; overflow:auto;">
embeddedartists 0:713518ea5028 174 <ol id="messageList">
embeddedartists 0:713518ea5028 175 <!-- This will be populated dynamically. -->
embeddedartists 0:713518ea5028 176 </ol>
embeddedartists 0:713518ea5028 177 </div>
embeddedartists 0:713518ea5028 178 </td>
embeddedartists 0:713518ea5028 179 </tr>
embeddedartists 0:713518ea5028 180 <tr>
embeddedartists 0:713518ea5028 181 <td>
embeddedartists 0:713518ea5028 182 <!--<input class="color" onchange="sendMessage(this.color)">-->
embeddedartists 0:713518ea5028 183 </td>
embeddedartists 0:713518ea5028 184 </tr>
embeddedartists 0:713518ea5028 185 </body>
embeddedartists 0:713518ea5028 186 </html>