EmbeddedArtists AB
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
Diff: pubnub_acc.html
- Revision:
- 0:713518ea5028
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/pubnub_acc.html Wed Oct 01 11:39:10 2014 +0000
@@ -0,0 +1,186 @@
+<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>
\ No newline at end of file