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 (8)

  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

    1. Rajan (reply)

      July 1, 2014 at 5:15 pm

      Are there any simpler ways to achieve the same as described here in this post? Plug and play. Just so it becomes easy for even immature engineers or even aspiring techies to put together such ‘Internet of Things’.

  3. Rajan (reply)

    June 21, 2014 at 8:53 am

    Thanks for you post, Fabio.

    Can the data be accessed from any network, other that the network which Arduino Yun is connected to? I am working on a basic online weather station which can display weather parameters of a place, and can be accessed from anywhere on the planet over web. Basic HTML setup – http://artool.in/weather/

    1. Fabio Biondi (reply)

      June 21, 2014 at 11:20 am

      yes, sure!
      The important thing is that your mobile phone and your Arduino can use an internet connection but they can be located in different places of the world : )

      1. Rajan (reply)

        June 21, 2014 at 10:04 pm

        Hey Fabio,

        I tried what you have explained in this post. I am getting only degree on the webpage one by one as the data is added but not the value. I am sure I am making a silly mistake somewhere. Do you know where the problem can be?

  4. Rajan (reply)

    July 1, 2014 at 5:12 pm

    Hey Fabio,

    I followed your article. Made a simple project with Arduino Yun which takes in the ambient temperature data (LM35) and displays it on my personal website. You may find my post here – http://www.artool.in/2014/06/weather-station-arduino-yun-firebase-webapp/

    I will now be moving on to do some more interesting things.

    Thanks for your work.

Leave a Reply

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

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