<p>Last October, at ARM TechCon, we showed a demo of a <a href="http://www.nxp.com/documents/leaflet/LPC1768.pdf">NXP LPC1768</a> connected to a <a href="https://www.adafruit.com/datasheets/WS2812.pdf">WS2812</a> 24 color RGB LED. The hardware was programed using <a href="https://developer.mbed.org">ARM mbed Development Platform</a> and connected to the <a href="http://www.mbed.org/technology/device-server/">mbed Device Server</a>. We used the wot operating environment to seamlessly integrate the data coming off the devices to a search engine, an analytics package, and a business intelligence platform.</p>
<p>In this tutorial, we are simply going to cover the basics of developing an application with the <a href="https://developer.mbed.org/compile/">mbed compiler</a> and a <a href="http://cache.freescale.com/files/32bit/doc/user_guide/FRDMK64FUG.pdf">Freescale FRDM-K64F</a>. We will connect the on board Freescale FXOS8700CQ 6 axis accelerometer and magnetometer up to a <a href="http://shipiot.net">bip.io workflow</a>.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>In order to follow along with this tutorial you will need:</p>
<ul>
<li>an <a href="https://developer.mbed.org">mbed Developer account</a></li>
<li>a <a href="http://shipiot.net">Ship IoT bip.io account</a></li>
<li>a <a href="https://developer.mbed.org/platforms/FRDM-K64F/">FRDM-K64F board</a></li>
<li>an ethernet cable and a micro-USB cable</li>
</ul>
<p>The cost of the board is around $35, and you probably have spare cables lying around. For my setup, I used Internet Sharing on my Macbook Pro, to connect the FRDM-K64F to the Internet. Optionally, you can wire your board to your switch, and it will receive a DHCP lease as part of the startup sequence.</p>
<p>The <a href="https://developer.mbed.org/teams/WoTio/code/shipiot_frdm_bipio/">code for this tutorial</a> can be imported directly from the public mbed repository.</p>
<h2 id="configuringyourworkflow">Configuring your workflow</h2>
<p>I am going to reuse <a href="http://labs.wot.io/shipiot-with-particle-ios-photon-and-bip-io/">a workflow from a prior tutorial</a> so if you have already done the Photon tutorial, this will feel like old hat. If you haven't then first go to <a href="shipiot.net">ShipIoT.net</a> and sign in. You will then need to <code>Create A Bip</code> to create a new blank canvas:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/blank-1.png" alt="blank canvas" /></p>
<p>You can then click on the central circle to <code>Select Event Source</code>:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/webhook-selection.png" alt="select event source" /></p>
<p>Here we will select <code>Incoming Web Hook</code> to create a HTTP endpoint to which our FRDM-K64F will send it's data. This is the staring point of our workflow. Once you select that you will be presented with a icon in the center:</p>
<p><img title="" src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/webhooked.png" alt="web hook icon" /></p>
<p>Above the central canvas you'll see a URL in which we want to replace the <code>Unlisted</code> with a proper path. For this workflow, we'll name it <code>accel</code> which should produce a URL of the form:</p>
<p><code>http://<your_username>.api.shipiot.net/bip/http/accel</code></p>
<p>You can view this URL by clicking on the Hide/Show link icon next to the URL. The next step will be to add a <code>Data Visualization</code> element to the workflow, so that we can chart the values coming from the accelerometer. If you click on <code>Add An Action</code> you will be presented with a options panel:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/data-viz-1.png" alt="Select a Pod" /></p>
<p>If you click on <code>Data Visualization</code> option, you will be presented with a list of actions.</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/view-chart-1.png" alt="action selection" /></p>
<p>Here we want to select <code>View Chart</code> to create a graphical chart of the incoming web hook data. On the main canvas, we then can connect the <code>Incoming Web Hook</code> icon to the <code>Data Visualization</code> icon by dragging from one to the other:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/link-creation.png" alt="drag and drop edge" /></p>
<p>This will link the incoming data to the chart. To configure the parsing options, we'll open the <code>Parser</code> tab and create some representative JSON in the left hand panel:</p>
<p><code>{ "x": 0, "y": 0, "z": 0}</code></p>
<p>and then click the <code>Parse</code> button to generate the associated JSON schema. We can then return to the <code>Setup</code> tab and double click on the <code>Data Visualization</code> icon to open up it's settings.</p>
<p>First we can set the X axis value to the time that the FRDM-K64F sent the request by setting it to a custom value of <code>Invoke Time</code>:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/invoke-time.png" alt="Invoke time" /></p>
<p>We can then set the Y1 and Y2 values to the values X and Y respectively:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/both-data-points.png" alt="x and y" /></p>
<p>Clicking <code>OK</code> will then save these settings. Opening the settings a second time will present us with a <code>Chart</code> tab:</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/chart-url.png" alt="chart tab" /></p>
<p>This will display the data as it comes in off of the webhook. The last thing we need to do is set the authorization settings on the URL. For our purposes we'll use HTTP Basic Authorization with a username and password of <code>test</code>.</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/auth.png" alt="Basic Auth" /></p>
<p>The important thing here is to gab a copy of the <code>HTTP Request Header</code>. We will need to modify the source of the program to use this value to authenticate against the server. Feel free to use any username and password you'd like. Finally click <code>Save</code> and your workflow will be running.</p>
<p><img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/running.png" alt="running workflow" /></p>
<h2 id="developingthearmmbedapplication">Developing the ARM mbed Application</h2>
<p>As a picture is worth a 1000 words, a 15:48 @ 30fps video is worth 28,440 pictures:</p>
<p><iframe src="https://www.youtube.com/embed/yKaNv6I4BU4" frameborder="0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></p>
<p>In this video, I cover writing the application, and demonstrate the charting interface of the workflow we created above. If you don't feel like watching the video, just import the code into your mbed Developer account, and edit the three lines commented in the source to reflect your username and authentication choices.</p>
<p>You can then compile, download, and flash your FRDM-K64F board, and everything should just work! If it doesn't odds are good that it is a networking issue. Should your device not be able to acquire an IP address, you won't see the debug messages on the serial console. Similarly, should the webhook not work, you can check the <code>Logs</code> tab for reasons. Often it is merely a copy/paste bug regarding the authentication token.</p>
<p>Once you have it working, you can extend your workflow to perform additional actions. You can save your data to a Google Spreadsheet, or have it send a tweet to Twitter, or even control your Nest thermostat, or all of the above.</p>
Ship IoT with ARM mbed, FRDM-K64F, and bip.io
Aug 2015/ Posted By: wotio team