ArduinoYUN_and_FirebaseBig

Arduino YUN, AngularJS and Firebase (with CURL): realtime data

This snippet provides an interesting technique to develop remote HTML5 web applications to display realtime data acquired from an Arduino Yun using Firebase, a powerful API to store and synchronize data in milliseconds.

DEMO
In this video you can see how it works:
1) Arduino POST data to Firebase (via CURL)
2) The Firebase control panel and the HTML application listen for updates and they are automatically synchronized

SKETCH
In this sample I just simulated the acquisition of data from a temperature sensor, that is not really connected to the board (check this article to more info about it), but you can customize and use this concept to stream any kind of data from your board .

The sketch is very simple and take advantage of the Arduino Process class and runShellCommand method to run a CURL command from Arduino.

#include <Process.h>

void setup()
{
  Bridge.begin();   // Initialize the Bridge
}

void loop()
{
  // Simulate Get Sensor value
  int sensor = random(10, 20);
 
  Process p;
  p.runShellCommand("curl -k -X POST https://YOUR_ACCOUNT.firebaseio.com/temperature.json -d '{ \"value\" : " + String(sensor) + "}'");  

  while(p.running()); 
  delay(2000);                
  
}

The script make a POST request to Firebase passing a “fake” temperature each 2 seconds and the value is immediately stored to the server and broadcasted to all HTML5 connected clients.
Firebase provides SDKs for IOS, Android, PHP and a lot of other tecnologies so you can synchronize different platforms and os.

HTML5 / AngularJS Mobile App

AngularJS and Firebase are a perfect combination thanks to AngularFire, an opensource library that enable 3-way-binding between the view, the model and the server.

In fact, each time the Arduino post a new temperature the view is automatically updated with the new value.

<!doctype html>
<html lang="en" ng-app="DemoApp">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>

  <script src="https://cdn.firebase.com/v0/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>


  <script type="text/javascript">
    var myApp = angular.module('DemoApp', ['firebase']);

    function DemoCtrl($scope, $firebase) {

        $scope.firebaseRef = new Firebase("https://YOUR_ACCOUNT.firebaseio.com/temperature" );
        $scope.temperatures = $firebase($scope.firebaseRef);
    }

  </script>

</head>


<body class="container">
    <h2>Arduino YUN, Firebase and CURL</h2>
    <div ng-controller="DemoCtrl"
          class="form-inline panel panel-default">
        <div class="panel-body">

            <ul ng-repeat="temp in temperatures">
                <li><h1>{{temp.value}}°</h1></li>
            </ul>
        </div>
    </div>

</body>
</html>

Comments (3)

  1. Luigi (reply)

    February 16, 2014 at 8:05 pm

    In pratica uso Arduino per raccogliere i dati e registrarli su Fire base
    In automatico la web App raccoglie i dati e li visualizza
    Semplice ed ingegnoso

    1. Fabio Biondi (reply)

      February 16, 2014 at 9:10 pm

      exatly! :)

  2. Tom Chen (reply)

    March 3, 2014 at 4:43 am

    You may use `ng-fire-alarm` to replace `AngularFire` to handle collection data in Firebase ;)

    https://github.com/tomchentw/ng-fire-alarm#collection-trueotherwise

Leave a Reply

Your email address will not be published. Required fields are marked *

Published on: 16 February
Posted by:
Discussion: 3 Comments