Move android from Phone to Raspberry Pi for IoT

What is a Raspberry Pi ?

Raspberry Pi is a small credit card sized computer that is connected to a output device and input devices such as monitor, keyboard and mouse and can be used to perform operations as performed on a normal PC. It is a low cost gadget developed by the UK Company Raspberry Pi Foundations to promote computer education for school kids. It also runs many programming languages such as C, Java, Python and even basic programming languages such as scratch. It also can be used to browse the internet, play HD videos, creating documents, spreadsheets, playing games, etc…

Raspberry Pi can be used in many electronics projects which are as advanced as setting up a server for multiplayer gaming to simple projects such as spying on a bird nest. We can tweak it and perform our own projects. We can even install other operating systems such as Linux, RISC OS, and also Android.

Now latest Raspberry Pi 2 is available with Windows 10 OS check about it here

Check how to make a wireless remote car

Installing Android OS on Raspberry Pi

Installing Android OS is very easy on Raspberry Pi. It must be installed on a SD-Card usually a 4GB card to enable the installation of other apps and media files. The Android UI is still buggy on Raspberry Pi and crashes a lot and is very slow. Hence it is recommendable to install the OS only on the version of Raspberry Pi with memory of 512 MB or more.

It is more recommendable to install the android version 2.3 because of the low hardware configuration on Raspberry Pi and since its configuration is equal to that of an entry level smartphone, it will run android 2.3 better.

Things needed:

Steps for installing the Android OS:

WINDOWS
  1. Download the CyanogenMod 7.2 from the given link
  2. It will be present in the 7z format, unzip it using 7-zip or WINRAR.
  3. We need to extract the files in the .img file into the sd card. It can be done using the software Win32 Disk Imager. Select the .img file and the device you want it to be copied into and click on write.

Raspberry Pi on android

Win32 Disk Imager

  1. Put the sd card in to the Raspberry Pi and you are done.
MAC OS X
  1. Download the CyanogenMod 7.2 from the given link.
  2. Unzip the 7z file using “The Unarchiver” from app store.
  3. To find the BSD Name of the Sd card: To find the BSD name of the sd card, click on the apple logo from the menu bar and then click on About this MAC and go to More Info and take a look at the System Report. Next, select ‘USB’ from the sidebar and click on “Internal Memory Card Reader”. The BSD Name will be listed here. For ex: disk1

android in raspberry pi

  1. To Copy the .img file to the sd card: open the terminal and enter the following the code: sudo dd if=image_path_here.img of=/dev/diskn bs=1m— replace image_path_here.img with the path of the downloaded file and ‘diskn’ with the BSD name of the sd card found above. Dd is a powerful tool and it will format whatever drive is specified so be careful while using this command. It will take some time for the command to finish and it doesn’t provide any feedback. Hence wait until it is done and load the sd card into the RPi
LINUX

Installing in Linux platform is similar to that of MAC OS X and we can use the same dd function.

  1. Download the CyanogenMod 7.2 from the given link.
  2. Open the terminal and install p7zip by using the following command: sudo apt-get install p7zip-full.
  3. Extract the contents of CyanogenMod 7.2 by using the following command: 7za e path_of_your_file.7z.
  4. To find out the label assigned to the sd card, use the following command: df -h. You will be shown a list of all the devices. Find out where the sd card is located. Eg: /dev/sdc1.

Install android os on raspberry pi

          You can also unmount the sd card by using the command unmount /dev/sdc.

  1. Use the dd command to copy the .img file to the sd card using the following command: dd bs=4M if=path_of_image_file.img of=/dev/sdc

Replace sdc with the label assigned to the sd card.

install android in raspberry pi

  1. Wait till the image file is copied into the sd card and then place it in the Raspberry Pi.

Follow these steps based on the operating system you are using and you have Android OS installed on your Raspberry Pi.

The Android UI will be a little tough to handle with keyboard and mouse. You can now connect the Raspberry Pi to the television, use the Ethernet support and connect to the internet and you can perform almost every function you can do with an Android device. Android is going to launch Android 4.0 version for the Raspberry Pi board with Graphic Acceleration which will be faster than the other given version. 

 

https://www.mepits.com/project/180/DIY-Projects/How-to-Install-Android-on-Raspberry-Pi-?

How to turn your Raspberry Pi into a webserver

 

Raspberry Pi Webserving

Raspberry Pi Part 10: How to set up a Linux Web Server on your Pi

How To Build A Real-Time Commenting System Step by step

By Phil Leggetter

Advertisement

The Web has become increasingly interactive over the years. This trend is set to continue with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience. However, setting up and maintaining the server-side real-time components can be an unwanted distraction. But don’t worry, there is a solution.

Cloud hosted Web services and APIs have come to the rescue of many a developer over the past few years, and real-time functionality is no different. The focus at Pusher, for example, is to let you concentrate on building your real-time Web applications by offering a hosted API which makes it quick and easy to add scalable real-time functionality to Web and mobile apps. In this tutorial, I’ll show how to convert a basic blog commenting system into a real-time engaging experience where you’ll see a comment made in one browser window “magically” appear in a second window.

Why Should We Care About The Real-Time Web? Link


Although the Real-Time Web is a relatively recent mainstream phrase, real-time Web technologies have been around for over 10 years. They were mainly used by companies building software targeted at the financial services sector or in Web chat applications. These initial solutions were classed as “hacks”. In 2006 these solutions were given an umbrella term called Comet, but even with a defined name the solutions were still considered hacks. So, what’s changed?

In my opinion there are a number of factors that have moved real-time Web technologies to the forefront of Web application development.

SOCIAL MEDIA DATA LINK

Social media, and specifically Twitter, has meant that more and more data is becoming instantly available. Gone are the days where we have to wait an eternity for Google to find our data (blog posts, status updates, images). There are now platforms that not only make our data instantly discoverable but also instantly deliver it to those who have declared an interest. This idea of Publish/Subscribe is core to the real-time Web, especially when building Web applications.

INCREASED USER EXPECTATIONS LINK

As more users moved to using applications such as Twitter and Facebook, and the user experiences that they deliver, their perception of what can be expected from a Web application changed. Although applications had become more dynamic through the use of JavaScript, the experiences were seldom truly interactive. Facebook, with it’s real-time wall (and later other realtime features) and Twitter with it’s activity stream centric user interface, and focus on conversation, demonstrated how Web applications could be highly engaging.

WEBSOCKETS LINK

HTML5 and WebSockets Rock!

Earlier on I stated that previous solutions to let servers instantly push data to Web browsers were considered “hacks”. But this didn’t remove the fact that there was a requirement to be able to do this in a cross-browser and standardised way. Our prayers have finally been answered with HTML5 WebSockets. WebSockets represent a stardardized API and protocolthat allows realtime server and client (web browser) two way communication over a single connection. Older solutions could only achieve two-way communication using two connections so the fact the WebSockets use a single connection is actually a big deal. It can be a massive resource saving to the server and client, with the latter being particularly important for mobile devices where battery power is extremely valuable.

HOW ARE REAL-TIME TECHNOLOGIES BEING USED? LINK

Real-time Web technologies are making it possible to build all sorts of engaging functionality, leading to improved user experiences. Here are a handful of common use cases:

  • Realtime Stats – The technology was first used in finance to show stock exchange information so it’s no surprise that the technology is now used more than ever. It’s also highly beneficial to sports, betting and analytics.
  • Notifications – when something a user is interested in becomes available or changes.
  • Activity Streams – streams of friend or project activity. This is commonly seen in apps like Twitter, Facebook, Trello, Quora and many more.
  • Chat – the 101 or real-time Web technology but still a very valuable function. It helps delivery instant interaction between friends, work colleagues, customers and customer service etc.
  • Collaboration – Google docs offers this kind of functionality within its docs, spreadsheets and drawing applications and we’re going to see similar use cases in many more applications.
  • Multiplayer Games – The ability to instantly deliver player moves, game state changes and score updates is clearly important to multiplayer gaming.

In the rest of this tutorial I’ll cover building a basic blog commenting system, how to progressively enhance it using jQuery and finally I’ll also progressively enhance it using the real-time Web service I work for, Pusher, which will demonstrate not just how easy it can be to use real-time Web technology, but also the value and increased engagement that a real-time factor can introduce.

Creating Generic Blog Commenting System Link

START FROM A TEMPLATE LINK

I want to focus on adding real-time commenting to a blog post so let’s start from a template.

This template re-uses the HTML5 layout defined in the post on Coding An HTML 5 Layout From Scratch and the file structure we’ll start with is as follows (with some additions that we don’t need to worry about at the moment):

  • css (dir)
    • global-forms.css
    • main.css
    • reset.css
  • images (dir)
  • index.php

HTML LINK

The template HTML, found in index.php, has been changed from the HTML5 Layout article to focus on the content being a blog post with comments. You can view the HTML source here.

The main elements to be aware of are:

  • <section id="content"> – the blog post content
  • <section id="comments"> – where the comments are to appear. This is where the majority of our work will be done

COMMENTS LINK

Now that we’ve got the HTML in place for our blog post and for displaying the comments we also need a way for our readers to submit comments, so let’s add a <form> element to collect and submit the comment details to post_comment.php. We’ll add this at the end of the<section id="comments"> section wrapped in a <div id="respond">.

<div id="respond">

  <h3>Leave a Comment</h3>

  <form action="post_comment.php" method="post" id="commentform">

    <label for="comment_author" class="required">Your name</label>
    <input type="text" name="comment_author" id="comment_author" value="" tabindex="1" required="required">

    <label for="email" class="required">Your email;</label>
    <input type="email" name="email" id="email" value="" tabindex="2" required="required">

    <label for="comment" class="required">Your message</label>
    <textarea name="comment" id="comment" rows="10" tabindex="4"  required="required"></textarea>

    <-- comment_post_ID value hard-coded as 1 -->
    <input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
    <input name="submit" type="submit" value="Submit comment" />

  </form>

</div>

COMMENT FORM CSS LINK

Let’s apply some CSS to make things look a bit nicer by adding the following to main.css:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'], 
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Once the HTML structure, the comment form and the CSS are in place our blogging system has started to look a bit more presentable.

Screenshot of blog post and commenting system

HANDLING COMMENT SUBMISSION LINK

The next step is to write the PHP form submission handler which accepts the request and stores the comment, post_comment.php. You should create this file in the root of your application.

As I said earlier I’m keen to focus on the real-time functionality so a class exists within the template that you’ve downloaded which encapsulate some of the standard data checking and persistence functionality. This class is defined in Persistence.php (you can view the sourcehere), is in no way production quality, and handles:

  • Basic validation
  • Basic data sanitization
  • Very simple persistence using a user $_SESSION. This means that a comment saved by one user will not be available to another user.

This also means that we don’t need to spend time setting up a database and all that goes with it and makes post_comment.php very simple an clean. If you wanted to use this functionality in a production environment you would need to re-write the contents of Persistence.php. Here’s the code for post_comment.php.

<?php
require('Persistence.php');

$db = new Persistence();
if( $db->add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

The above code does the following:

  1. Includes the Persistence.php class which handles saving and fetching comments.
  2. Creates a new instances of the Persistence object and assigns it to the variable $db.
  3. Tries to add the comment to the $db. If the comment is successfully added it redirects back to the blog post. If it fails the redirection also occurs but some error text is appended to an error query parameter.

DISPLAYING THE COMMENTS WITH THE BLOG POST LINK

The final thing we need to do to have our Generic Blog Commenting System up and running is to update the blog page, index.php, to fetch and display the comments from the Persistenceobject.

  • Since this isn’t a real blogging system we’ll hard code the $comment_post_ID value to be1.
  • Include the Persistence.php class and fetch the comments from it. Comments are associated with a blog post using a unique $comment_post_ID.
<?php
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

Since we now have the $comment_post_ID accessible via PHP we should update the HTML for the comment form to use this value.

<input type="hidden" name="comment_post_ID" value="<?php echo($comment_post_ID); ?>" id="comment_post_ID" />

We now have all the comments related to the blog post referenced by the $comments variable we need to display them on the page. To do this we need to update the PHP in index.php to iterate through them and create the required HTML.

<ol id="posts-list" class="hfeed<?php echo($has_comments?' has-comments':''); ?>">
  <li class="no-comments">Be the first to add a comment.</li>
  <?php
    foreach ($comments as $comment) {
      ?>
      <li><article id="comment_<?php echo($comment['id']); ?>" class="hentry">  
        <footer class="post-info">
          <abbr class="published" title="<?php echo($comment['date']); ?>">
            <?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
          </abbr>

          <address class="vcard author">
            By <a class="url fn" href="#"><?php echo($comment['comment_author']); ?></a>
          </address>
        </footer>

        <div class="entry-content">
          <p><?php echo($comment['comment']); ?></p>
        </div>
      </article></li>
      <?php
    }
  ?>
</ol>

You’ll notice that if the value of $has_comments is true an additional CSS class is applied to the ordered list called has-comments. This is so we can hide the list item with the “Be the first to add a comment” message when comments are being displayed using CSS:

#posts-list.has-comments li.no-comments {
  display: none;
}

Now that all this is in place we have a functional blog commenting system. If you would like to start writing your code from this basic functioning blog commenting system you can alsodownload the code completed up to here.

Screenshot of the functioning blog commenting system

Progressive Enhancement With jQuery Link

The first step in making our blog commenting system feel less like a Web page and more like an application is to stop page reloads when a user submits a comment. We can do this by submitting the comments to the server using an AJAX request. Since jQuery is probably the defacto standard for cross browser JavaScript functionality we’ll use it here. Although I’m using jQuery here, I’d also like to highlight that it’s a good idea to not always use jQuery. Instead, analyze your scenario and make a considered decision because there are some cases where you are best not to.

In an attempt to try and keep as much scripting (PHP and JavaScript) from the index.php file we’ll create a new folder for our JavaScript and in there a file for our application JavaScript. The path to this fill should be js/app.js. This file should be included after the jQuery include.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/app.js"></script>

CAPTURE THE COMMENT FORM SUBMISSION LINK

When the page is ready bind to the submit event of the form.

$(function() {
  $('#commentform').submit(handleSubmit);
});

When the form is submitted and the handleSubmit function is called the comment data we want to send to the server is extracted from the form. There are more elegant ways of fetching the data from the form but this approach clearly shows where we’re getting the values from and the data object we are creating.

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

POST THE COMMENT WITH AJAX LINK

Within the postComment function make a POST request to the server passing the data that we’ve retrieved from the form. When the request is made an additional HTTP header will be sent to identify the request as being an AJAX request. We want to do this so that we can return a JSON response if it is an AJAX request and maintain our basic functionality if it isn’t (for more information on this see Detected AJAX events on the Server). We also define two handlers;postSuccess for handling the comment being successfully stored and postError to handle any failures.

function postComment(data) {
  $.ajax({
    type: 'POST',
    url: 'post_comment.php',
    data: data,
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    },
    success: postSuccess,
    error: postError
  });
}

function postSuccess(data, textStatus, jqXHR) {
  // add comment to UI
}

function postError(jqXHR, textStatus, errorThrown) {
  // display error
}

DYNAMICALLY UPDATING THE USER INTERFACE WITH THE COMMENT LINK

At this point the comment data is being sent to the server and saved, but the AJAX response isn’t providing any meaningful response. Also, the comments section isn’t being updated to show the newly submitted comment so the user would have to refresh the page to see it. Let’s start by writing the code to update the UI and test that functionality.

If you are thinking “Hang on a minute! We don’t have all the data we need from the Web server to display the comment” then you are correct. However, this doesn’t stop us writing the code to update the UI and also testing that it works. Here’s how:

function postSuccess(data, textStatus, jqXHR) {
  $('#commentform').get(0).reset();
  displayComment(data);
}
  
function displayComment(data) {
  var commentHtml = createComment(data);
  var commentEl = $(commentHtml);
  commentEl.hide();
  var postsList = $('#posts-list');
  postsList.addClass('has-comments');
  postsList.prepend(commentEl);
  commentEl.slideDown();
}

function createComment(data) {
  var html = '' +
  '<li><article id="' + data.id + '" class="hentry">' +
    '<footer class="post-info">' +
      '<abbr class="published" title="' + data.date + '">' +
        parseDisplayDate(data.date) +
      '</abbr>' +
      '<address class="vcard author">' +
        'By <a class="url fn" href="#">' + data.comment_author + '</a>' +
      '</address>' +
    '</footer>' +
    '<div class="entry-content">' +
      '<p>' + data.comment + '</p>' +
    '</div>' +
  '</article></li>';

  return html;
}

function parseDisplayDate(date) {
  date = (date instanceof Date? date : new Date( Date.parse(date) ) );
  var display = date.getDate() + ' ' +
                ['January', 'February', 'March',
                 'April', 'May', 'June', 'July',
                 'August', 'September', 'October',
                 'November', 'December'][date.getMonth()] + ' ' +
                date.getFullYear();
  return display;
}

The code above does the following:

  • Within the postSuccess function we clear the form values and call displayComment.
  • displayComment first calls the createComment function to create the list item (<li>) HTML as a String.
  • We then convert the HTML to a jQuery object using $(commentHtml) and hide the element.
  • The comment list item is then prepended to the comments ordered list (<ol>). The list also has a class called has-comments added to it so we can hide the first list item which contains the “Be the first to comment” statement.
  • Finally, we call commentEl.slideDown() so that the comment is shown in what is becoming the standard “here’s a new item” way.

The functionality is now implemented but we want to test it out. This can be achieved in two ways:

  • The displayComment is a global function so we can call it directly using the JavaScript console of the browser.
  • We can bind to an event on the page that triggers a fake update which calls thedisplayComment function

Let’s go with the latter and bind to the “u” key being released by binding to the keyup event. When it is, we’ll create a fake data object containing all the information required to create a new comment and pass it to the displayComment function. That comment will then be displayed in the UI.

Hit the “u” key a few times and see the comments appear.

$(function() {

  $(document).keyup(function(e) {
    e = e || window.event;
    if(e.keyCode === 85){
      displayComment({
        "id": "comment_1",
        "comment_post_ID": 1,
        "date":"Tue, 21 Feb 2012 18:33:03 +0000",
        "comment": "The realtime Web rocks!",
        "comment_author": "Phil Leggetter"
      });
    }
  });

});

Great! We now know that our displayComment function works exactly as we expect it to.Remember to remove the test function before you go live or you’ll really confuse your user every time they press “u”.

Screenshot of a bunch of fake comments

DETECT AND RESPONDING TO THE AJAX REQUEST LINK

All that’s left to do is update the post_comment.php file to detect the AJAX call and return information about the newly created comment.

Detecting the AJAX request is done by checking for the X-Requested-With header:

$ajax = ($_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

Once we know the request is an AJAX request we can update the code to respond with an appropriate status code and the data representing the comment. We also need to ensure that the original functionality is maintained. The post_comment.php code now looks as follows:

<?php
require('Persistence.php');

$ajax = ($_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

$db = new Persistence();
$added = $db->add_comment($_POST);

if($ajax) {
  sendAjaxResponse($added);
}
else {
  sendStandardResponse($added); 
}

function sendAjaxResponse($added) {
  header("Content-Type: application/x-javascript");
  if($added) {
    header( 'Status: 201' );
    echo( json_encode($added) );
  }
  else {
    header( 'Status: 400' );
  }
}

function sendStandardResponse($added) {
  if($added) {
    header( 'Location: index.php' );
  }
  else {
    header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
  }
}
?>

Key points from the above code are:

  • The $db->add_comment($_POST) call returns the data from the added comment which is assigned to the $added variable.
  • By setting the response Content-Type to “application/json” we tell jQuery to convert the returned string into a JavaScript object. For more information on calling JSON Web services see A Beginner’s Guide To jQuery-Based JSON API Clients.
  • The 201 status code indicates a successful call and also that a resource (the comment) was created by the call.

The blog commenting system now works in a much more dynamic way, instantly showing the user that their comment has been posted without refreshing the page. In addition, the way the we’ve added the JavaScript based functionality to the page means that if JavaScript is disabled or a JavaScript file fails to load that the system will fallback to the standard functionality we first implemented.

Getting Real-Time—Finally! Link

As with any “from scratch” tutorial it can take a bit of time to get to the really interesting part, but we’re finally here. However, all the work we’ve up in has been worth it. Because we’ve built our commenting system up in a progressively enhanced way, plugging Pusher into it is going to be really easy

WHAT IS PUSHER? LINK

At the start of the tutorial we said that we would use Pusher to add the realtime functionality to the application. But what is Pusher?

Pusher is a hosted service for quickly and easily adding realtime features into Web and mobile applications. It offers a RESTful API that makes it really easy to publish events from any application that can make a HTTP request and a WebSocket API for realtime bi-directional communication. You don’t even need to use the APIs directly as there are server (PHP, Ruby, node.js, ASP.NET, Python and more) and client (JavaScript, iOS, Android, .NET, ActionScript, Arduino and more) libraries available in a host of technologies which means you can add realtime functionality to an app within minutes ‐ I’m confident you’ll be surprised just how easy!

SIGN UP FOR PUSHER AND GET YOUR API CREDENTIALS LINK

In order to add Pusher-powered real-time functionality to a Web application you first need tosign up for a free Sandbox account. After you have signed up you’ll be taken to the Pusher dashboard where you’ll see that a “Main” application has been created for you. You’ll also see you are in the “API Access” section for that application where you can grab your API credentials.

Screenshot of API Access section in Pusher Dashboard

For ease of access create a pusher_config.php file and define the credentials in there so we can refer to them later:

<?php
define('APP_ID', 'YOUR_APP_ID');
define('APP_KEY', 'YOUR_APP_KEY');
define('APP_SECRET', 'YOUR_APP_SECRET');
?>

In your version of pusher_config.php be sure to replace the values which being ‘YOUR_ with your actual credentials.

You should also require this in your index.php file. We should also make the APP_KEY available to the JavaScript runtime as we are going to need it to connect to Pusher.

<?php
require('pusher_config.php);
?>

<script>
var APP_KEY = '<?php echo(APP_KEY); ?>';
</script>

REAL-TIME JAVASCRIPT LINK

The first thing you need to do when adding Pusher to a Web application is include the Pusher JavaScript library and connect to Pusher. To connect you’ll need to use the key which you grabbed from the Pusher dashboard. Below you can see all that is required to hook up the front-end application to Pusher.

Include the Pusher JavaScript library after the app.js include:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://js.pusher.com/1.11/pusher.min.js"></script>
<script src="js/app.js"></script>

Add the Pusher functionality to app.js:

var pusher = new Pusher(APP_KEY);
var channel = pusher.subscribe('comments-' + $('#comment_post_ID').val());
channel.bind('new_comment', displayComment);

This probably looks too easy to be true, so here are the details about what the above code does:

  • var pusher = new Pusher(APP_KEY);
    Creates a new instance of a Pusher object and in doing so connects you to Pusher. The application to use is defined by the APP_KEY value that you pass in and that we set up earlier.
  • var channel = pusher.subscribe('comments-' + $('#comment_post_ID').val());
    Channels provide a great way of organizing streams of real-time data. Here we are subscribing to comments for the current blog post, uniquely identified by the value of the comment_post_ID hidden form input element.
  • channel.bind('new_comment', displayComment);
    Events are used to further filter data and are ideal for linking updates to changes in the UI. In this case we want to bind to an event which is triggered whenever a new comment is added and display it. Because we’ve already created the displayComment function we can just pass in a reference to the call to bind.

SENDING REAL-TIME EVENTS USING THE EVENT CREATOR LINK

We can also test out this functionality without writing any server-side code by using the Event Creator for your app which can also be found in the Pusher dashboard. The Event Creator lets you publish events on a channel through a simple user interface. From the code above we can see that we want to publish an event named “new_comment” on the “comments-1” channel. From the earlier test function we also have an example of the test data we can publish.

Screenshot of the Event Creator in Pusher Dashboard

REAL-TIME PHP LINK

Again, we’ve proven that our client-side functionality works without having to write any server-side code. Now lets add the PHP code we need to trigger the new comment event as soon as a comment is posted in our comment system.

Pusher offers a number of server-side libraries which make it easy to publish events in addition to helping with functionality such as private channel authentication and providing user information for presence channels. We just want to use the basic event triggering functionality in the post_comment.php file so we need to download the Pusher PHP library (direct zip file download).

Once you’ve downloaded this zip file, unzip it into the directory along with your other files. Your file structure will now look something like this:

  • index.php
  • css (dir)
  • images (dir)
  • post_comment.php
  • pusher_config.php
  • Persistence.php
  • squeeks-Pusher-PHP (dir)
    • lib (dir)
      • Pusher.php

An event can be triggering in just a few lines of code:

<?php
require('squeeks-Pusher-PHP/lib/Pusher.php');
require('pusher_config.php');

$pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
$pusher->trigger('comments-1', 'new_comment', array(
  "comment_post_ID" => 1,
  "date" => "Tue, 21 Feb 2012 18:33:03 +0000",
  "comment" => "The realtime Web rocks!",
  "comment_author" => "Phil Leggetter"
));
?>

However, we need to apply a some additional logic before we trigger the event:

  • Check that the comment was added.
  • Extract the unique comment identifier from the $added array.
  • Build the text to identify a channel name for the submitted comment.
  • Trigger a new_comment event on the channel with the $added data. Note: The library automatically converts the $added array variable to JSON to be sent through Pusher.

Therefore the full post_comment.php file ends up looking as follows:

<?php
require('Persistence.php');
require('squeeks-Pusher-PHP/lib/Pusher.php');
require('pusher_config.php');

$ajax = ($_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest');

$db = new Persistence();
$added = $db->add_comment($_POST);

if($added) {
  $channel_name = 'comments-' . $added['comment_post_ID'];
  $event_name = 'new_comment';

  $pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
  $pusher->trigger($channel_name, $event_name, $added);
}

if($ajax) {
  sendAjaxResponse($added);
}
else {
  sendStandardResponse($added); 
}

function sendAjaxResponse($added) {
  header("Content-Type: application/json");
  if($added) {
    header( 'Status: 201' );
    echo( json_encode($added) );
  }
  else {
    header( 'Status: 400' );
  }
}

function sendStandardResponse($added) {
  if($added) {
    header( 'Location: index.php' );
  }
  else {
    header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
  }
}
?>

If you run the app now in two different browser windows you’ll see that as soon as you submit a comment in one window that comment will instantly (“magically”) appear in the second window.We now have a real-time commenting system!

But…, we’re not done quite yet. You’ll also see that the comment is shown twice in the window of the user who submitted it. This is because the comment has been added by the AJAX callback, and by the Pusher event. Because this is a very common scenario, especially if you’ve built an application in a progressively enhanced way as we have, the Pusher server libraries expose a way of excluding a connection/user from receiving the event via Pusher.

In order to do this you need to send a unique connection identifier called a socket_id from the client to the server. This identifier can then be used to define who will be excluded.

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  var socketId = getSocketId();
  if(socketId !== null) {
    data.socket_id = socketId;
  }

  postComment(data);

  return false;
}

function getSocketId() {
  if(pusher && pusher.connection.state === 'connected') {
    return pusher.connection.socket_id;
  }
  return null;
}

The changes we’ve made are:

  • A new function called getSocketId has been added to get the socket_id. It wraps a check to ensure that the pusher variable has been set and also that the client is connected to Pusher.
  • The handleSubmit has been updated to check to see if a socket_id is available. If it is, this information is posted to the server along with the comment data.

On the server we need to use the socket_id parameter if it is present and therefore exclude the connection and user who submitted the comment, or pass in null if it’s not:

$channel_name = 'comments-' . $added['comment_post_ID'];
$event_name = 'new_comment';
$socket_id = (isset($_POST['socket_id'])?$_POST['socket_id']:null);

$pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
$pusher->trigger($channel_name, $event_name, $added, $socket_id);

And as simple as that we have a fully realtime enabled blog commenting system and we only send messages to users who really need to see them. As with the AJAX functionality the realtime functionality has been added in a progressively enhancing way, to ensure it doesn’t impact on any other functionality. You can find the a demo running here and the completed solution in the realtime commenting repository in github.

Good Real-Time App Development Practices Link

Real-time application development shares common good development practices with general Web development. However, I thought I would share a couple of tips that can come in particularly handy.

USE BROWSER DEVELOPER TOOLS LINK

When you start doing a lot of JavaScript development the browser developer tools becomes your best friend. It’s the same when adding realtime functionality to your Web app, not only because you are using JavaScript, but also because the JavaScript library you are using is likely to be doing some reasonably complex things internally. So, the best way of understanding what is going on and if your code is using it as expect is to enable logging which usually goes to the developer console. All major browser vendors now offer good developer tools which include a console:

The Pusher JavaScript library provides a way to hook into the logging functionality. All you need to do is assign a function to the Pusher.log static property. This function will then receive all log messages. You can do what you like within the function but best practice is to log the messages to the developer console. You can do this as follow, ensuring the code it executed after the Pusher JavaScript library include:

Pusher.log = function(msg) {
  if(window.console && window.console.log) {
    window.console.log(new Date().getTime() + ': ' + msg);
  }
};

The code above checks to make sure the console and log function is available – it’s not in older browsers – and then logs the messages along with a timestamp to the JavaScript console. This can be incredibly handy in tracking down problems.

Screenshot of Pusher logging in the Chrome Developer Tools Console

CHECK CONNECTIVITY LINK

Any good real-time technology will maintain a persistent connection between the client (web browser) and the Web server or service. Sometimes the client will lose connectivity and when the client isn’t connected to the Internet the real-time functionality won’t work. This can happen a lot with applications running on mobile devices which rely on mobile networks. So, if your application relies on that connectivity and functionality then it’s important to deal with scenarios where the client isn’t connected. This might be by displaying a message to tell the user they are offline or you might want to implement some alternative functionality.

The Pusher JavaScript library exposes connectivity state via the pusher.connection object, which we briefly saw earlier when fetching the socket_id. Binding to state changes and implementing your required functionality is quite simple as it follows the same mechanism as binding to events on channels:

var pusher = new Pusher(APP_KEY);

pusher.connection.bind('state_change', function(states) {
  Pusher.log('Connection state changed from: ' + states.previous + ' to ' + states.current);
});

Conclusion Link

We’re seeing real-time functionality appearing in a large number of high profile applications: some have it at the core of what they offer whilst others use it sparingly. No matter how it is used the end goal is generally the same; to enhance the user experience and keep users engaged with an application. By converting a basic blog commenting system into a more engaging communication platform I hope I’ve demonstrated that the functionality and experience can easily be layered on existing application.

The ease of access to this technology is a relatively new thing and we’ve only just touched the potential uses for the technology. Real-time stats, instant news updates, activity streams, social interaction, collaboration and gaming are just a few common uses but as more developers become aware of, and comfortable with, the technology I’m confident that we’re going to see some truly amazing innovation. An “Internet of Real-Time Things?”?

Real-Life Responsive Web DesignIt’s finally here! Smashing Book 5: “Real-Life Responsive Web Design” is now shipping. With front-end techniques and design patterns from actual projects, it’s a playbook to master all the tricky facets and hurdles of responsive design. Print hardcover and eBook. Free worldwide shipping.

Phil Leggetter is a Developer Evangelist at Pusher. He’s been involved in developing and using realtime web technologies for over 10 years. His focus is to help developers use these technologies to build the next generation of interactive and engaging realtime web applications. Follow him at @leggetter.

WebSocket and IoT

Introducing WebSocket-Based Real-Time Monitoring System for Remote Intelligent Buildings

867693.fig.002

The core idea of the proposed system is to enable wireless Web-based interactions with sensor gateways and WebSocket and Web server for monitoring the remote intelligent buildings. Figure above shows the proposed WebSocket-based monitoring system for WSNs of remote intelligent buildings in WSNs. This WebSocket-based monitoring system is composed of three points of view in order to reduce the complexity: WSNs of remote intelligent buildings, WebSocket-based real-time monitoring, and storage of the monitoring sensor data.

WebSocket

HTML5 WebSocket defines a bi-directional, full-duplex communication channel that operates through a single TCP socket over the Web, it provides efficient, low-latency and low cost connection between web client and server, based on WebSocket, developers can build scalable, real-time web applications in the future. Section below is the official definition of WebSocket copied from IETF WebSocket protocol page:

The WebSocket protocol enables two-way communication between a user agent running untrusted code running in a controlled environment to a remote host that has opted-in to communications from that code.  The security model used for this is the Origin-based security model commonly used by Web browsers.  The protocol consists of an initial handshake followed by basic message framing, layered over TCP.  The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g. using XMLHttpRequest or <iframe>s and long polling).

WebSockets come after many other technologies that allow servers to send information to the client. Web applications that use Comet/Ajax, push/pull and long polling all do this over HTTP. Other than handshaking the Upgrade Header, WebSockets is independent from HTTP.

JavaScript API

WebSocket Events

The WebSocket API is still a draft, but the major modern browsers have already implemented most of the functionality, and even Microsoft has a prototype implementation in the works for Internet Explorer.

This specification defines an API that enables Web pages to use the WebSocket protocol for two-way communication with a remote host.

See the Pen WebSockets Demo by ji pengxiang (@jipengxiang) on CodePen.


The WebSocket API Editor’s Draft

The JavaScript added as part of the HTML5 specification allows for fairly simple use of the WebSocket protocol by developers. Amongst read-only connection details such as ‘url’, ‘protocol’ and ‘readyState’ the WebSocket interface defines four event handlers and two methods:

[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
  readonly attribute DOMString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
  attribute Function onopen;
  attribute Function onmessage;
  attribute Function onerror;
  attribute Function onclose;
  readonly attribute DOMString protocol;
  void send(in DOMString data);
  void close();
};
WebSocket implements EventTarget;

These simple functions make it easy to get started with WebSockets, a simple example being the echo test hosted onwebsocket.org:

websocket = new WebSocket('ws://echo.websocket.org');

websocket.onopen = function(event) {
  websocket.send('hello from client');
};

websocket.onmessage = function(event) {
  console.log(event.data);
};

Here, the client attempts to connect to a WebSocket, should the connection be successful, it sends a message to the server. The echo service example simply repeats messages back across the connection, so on receipt of the message, would send the same message back to the client, which would then trigger the ‘onmessage’ function and print the message out in the console. This example could be built upon as I have shown below by swapping out console logs for DOM alterations; or even further by negotiating the exchange of client messages as a chat application as shown in my examples.

Server-Side

WebSocket servers are also relatively simple to set up. There is a vast collection of libraries, frameworks and even some native support spanning languages including:

Having some experience with Node.js and finding Ruby syntax somewhat difficult to grasp, for my prototypes I chose to make use of the Node WebSocket Server package by Micheil Smith.

Node WebSocket Server is a near specification compliant implementation of the server-side WebSocket Protocol. It is built on top of Node.js as a third-party module, and is designed to support various versions of the WebSocket protocol – which is currently still an IETF Draft.

Node WebSocket Server

The server’s main roles amongst other things are to accept (or reject) clients, maintain a unique identifier for each connection and to listen for and broadcast messages, the core concept being to manage the rapid exchange of data between nodes.

Protocol

WebSocket Lifecycle

When loading a webpage geared for WebSocket interactions, initially, a standard HTTP connection is used, to load the mark-up, styling and JavaScript. The JavaScript then sends a HTTP request asking to upgrade to use the WebSocket protocol, passing along some keys. After a complex handshake that ensures both sides fully support WebSocket- the server sends a HTTP response returning more keys and confirming the connection. This handshake is for the most part handled internally by the WebSocket JavaScript API, and once it is complete, the full power of the protocol is unleashed.

Once the connection is established there is no HTTP header overhead on each packet, the protocol overhead is in fact only two bytes per packet. Additionally, there’s no huge XML encode / decode overhead either, so this is a great transport for low-latency data like gaming player positioning updates or speech.

Whilst mainstream adoption of the protocol amongst modern browser vendors has been great, recent discoveries found that the WebSocket protocol is vulnerable to attacks. Adam Barth demonstrated some serious attacks against the protocol that could be used by an attacker to poison caches that sit in between the browser and the Internet. As a result of this, major vendors including Mozilla and Opera disabled WebSockets functionality by default to protect users until the protocol is fixed. However, at the time of writing, the protocol has now been patched and no doubt vendors will implement the changes and re-enable the protocol by default soon.

WebSocket Demos

Here you will find an aggregated list of WebSocket demos from all over the Web.

Thumbnail of Echo Test

Echo Test

Test a WebSocket connection from your browser against our WebSocket echo server.

http://www.websocket.org/echo.html

Thumbnail of Kaazing.me

Kaazing.me

Several examples of WebSocket together on the one page. The bar along the bottom of the screen lets you connect to Google Chat over WebSocket.

Original link

Thumbnail of Mr. Doob's Multiuser Sketchpad

Mr. Doob’s Multiuser Sketchpad

A shared sketchpad that everyone can draw on at the same time. Websockets are used to keep up with the position data shared between users.

Original link (Demo)

Original link (Article)

Thumbnail of Rumpetroll

Rumpetroll

Norwegian for “tadpole”, swim around with other rumpetrolls. WebSockets communicate positional data between all users.

Original link

Thumbnail of WordSquared

WordSquared

A massively multiplayer online Scrabble-like word game.

Original link

WebGL Aquarium

This is a 100% HTML5, WebGL and JavaScript. Each of the 8 machines is running Chrome. They communicate using WebSockets to coordinate the differenct screens.

Original link

The WebSocket Difference

A video that visually demonstrates the performance improvements you get by using WebSocket.

Original link

Video Sync with WebSocket

Shows a single controller controlling the video that all connected users are watching.

Original link

The following examples created to demonstrate the basic functionality of WebSockets, they are for the most part written in raw JavaScript with the occasional dash of jQuery and Node.js server-side. All source code is available on Github.

  • ChatA basic anonymous multi-user chat relay via WebSockets.
  • DateA script that pushes the current server datetime out to connected clients.
  • EchoAn echo responder.
  • TwitterPiping the Twitter Streaming API public timeline sample through WebSockets.

The WebSocket protocol is blocked by the UWE proxy. Please mark off-site.

WebSockets in Action

The following websites demonstrate the use of WebSockets in production environments, for a wide range of applications including massively multiplayer gaming, sketching and multiuser synchronising of data.

  • Kaazing

    Various examples of WebSockets being used for the retrieval of real-time data.

  • Multiuser Sketchpad

    A shared sketchpad that everyone can draw on at the same time. WebSockets are used to keep up with the position data shared between users.

  • noVNC

    A full VNC client implemented using HTML5 Canvas and WebSockets.

  • Rawkets

    A massively multiplayer game in which you can shoot and interact with other players, in real-time, in space! It uses the latest Web technologies, including HTML5 canvas and WebSockets.

  • Rumpetroll

    A massively multiplayer experiment done in HTML5/Canvas/JavaScript and magical WebSockets. Rumpetroll is Norwegian, but probably not what you think.

  • Video Sync with WebSocket and Node

    A Node+WebSocket powered demo to sync videos across different browsers.

  • WordSquared

    A massively multiplayer online Scrabble-like word game.

  • HTML5 Web Socket in Essence
    HTML5 WebSocket defines a bi-directional, full-duplex communication channel operates through a single TCP connection, this article discusses its fantastic performance, the WebSocket protocol principle and its handshake mechanism, and develop a WebSocket application in action (Team Poker).

Real-time Gaming with Node.js + WebSocket on Google Cloud Platform

Demos
Echo Test
Demos on the Web
All About WebSocket
Benefits of WebSocket
Book About WebSocket
WebSocket API
WebSocket Protocol

References

Wearable IoT Device

The Internet of Things is emerging as the third wave in the development of the internet. While the fixed internet that grew up in the 1990s connected 1 billion users via PCs, and the mobile internet of the 2000s connected theinternetofthings22 billion

image

users via smartphones (on its way to 6 billion), the IoT is expected to connect 28 billion “things” to the internet by 2020, ranging from wearable devices such as smartwatches to automobiles, appliances, and industrial equipment. The repercussions span industries and regions.

At Goldman Sachs, we see numerous triggers turning the IoT from a futuristic buzzword to a reality. The cost of sensors, processing power, and bandwidth to connect devices has dropped low enough to spur widespread deployment. Innovative products like fitness trackers and Google’s Nest thermostats are demonstrating the potential for both consumers and enterprises. And corporate alliances are taking shape to set the standards needed to integrate the wide array of devices in a cohesive way.

While these enablers make the IoT possible, its long-term success depends on the use cases that help realize the economic potential of connecting billions of devices, either to improve quality of life or save money. We focus on five key verticals where the IoT will be tested first: Connected Wearable Devices, Connected Cars, Connected Homes, Connected Cities, and the Industrial Internet.

In the short term mbed is all about kickstarting the IoT market, which is a big reason as to why ARM is giving away large chunks of it for free. The mbed OS is entirely free, and the Device Server is free for development. Only production setups running Device Server would need to pay a license fee. ARM wants to get mbed spread as widely as possible, and with their strong position in the hardware market they are more than willing to give away the software if it will spur on IoT hardware sales. Or as they see it, the time it takes to develop good software is currently gating the sales of products incorporating their IoT-focused hardware.

Wearable computing technology, dating to the 1960s’ helicopter pilot head-mounted displays, is not new.1 Even the familiar office identification badge is a type of wearable. But with recent materials science advances driving technology miniaturization and battery improvements, we’re standing on the brink of widespread adoption.

Wearables are devices worn on the body in items such as watches, glasses, jewelry, and accessories. Or in the body—ingested or surgically implanted. They consist of three modular components: sensors, displays, and computing architecture. A wearable device may include one, two, or all three functions. A smart watch may contain narrowly purposed sensors that gather data about the user and his or her environment, but it may have limited display functionality and no computing power. Computing may occur in the cloud or on a multipurpose device such as a smartphone. Thedisplay may be on a nearby screen or in a pair of smart glasses, or it may even use an earbud or pendant for verbal response.2 Think of wearables as an ecosystem—expanding capabilities that are individually interesting but more compelling when combinations are harnessed. This modularity is allowing new manufacturers to enter the market, driving demand from both consumers and enterprise users.

The mobile revolution placed powerful, general-purpose computing in our hands, enabling users to take actions in the digital world while moving about in the physical world. By contrast, wearable technology surrounds us with devices that primarily enable other devices with digital information, which in turn support us in taking real-world actions.

Network for IoT

image

Now let’s take a look into IoT Network Technology. And to explain this I’m gonna
use the picture behind me. In an IoT Network well,there’s many ways to look at it. But, some of the major technologies are, wireless personal area network Things like 6LoWPAN, ZigBee, Bluetooth,are definitely gonna be used.

In addition, on a slightly larger wireless network scale, Wi-Fi, wireless LAN technology, is going to be used and needs to be supported.

Then as, we go to the larger scale network, the backbone, in addition the mobile communication network domain. Then smartphones and mobile communication phones will be used and they will be connected to the base stations. The base stations will provide connectivity to the wider network, the internet.

And considering this, we need to think about many options. One thing is that smartphones are equipped with Bluetooth and Wi-Fi. So therefore you can think of IoT Network the most simple topology control will be a wireless pan which is either like a Bluetooth or some other type of network that is connected to a smartphone, and the smartphone will bring that signal up and connect it through LTE, or 4G/3G, to the base station, and the base station will connect to that wide array network, which is the internet. So therefore, you can see as one technology linking
on a technology of something else. And that’s what’s shown in this figure right here.

wearable IoT Network device

Now we go into wearable IoT Networks. And this is one example that actually
brings what I just explained into reality. A wearable IoT Network device. Well, it’s something like this Wearable devices such as our shoes, our watch, our glasses, our belt, these things can be used to detect biometric information because they’re close and very attached to our body. And they can sense what’s going on. These devices can send through, let’s say, Bluetooth technology to the smart phone that’s in my pocket. Or that’s on some other place inside of a pocket on my coat or in my pants or something like that. In that case, the Smartphone will be able to pick up this information and it will be able to use it’s mobile communication link to send it to a base station. The base station, which is connected to a wide area network and the Internet, is going to be where the information connects to any other place I need in the world. For example, if I’m using my watch and also my shoes as well as my belt or something like that that I have attached to me to monitor my health condition that health condition can be sent wirelessly to my smartphone. My smartphone will send that information to the base station, mobile communication base station which
will be connected to the internet. And that information can be delivered to a control center or medical server. Something where if something happens to me, they will know and they will be able to provide immediate support. A smart device can be used to collect the information that communicates with control centers or like a medical center and this will be how everything gets connected together. Now let’s look at the component technology. And we’re going to start with Wi-Fi, the Wireless Local Area Network. Wi-Fi is a Wireless Local Area Network technology that is based upon the I EEE 802.11 standards. A Wi-Fi device. Well smartphones, smart tabs, smart other types of notebook computers and things like that, are all equipped with Wi-Fi. Application areas would include home, school, computer laboratory, office building, and so many other places. Wi-Fi devices and their Access Points have a wireless communication range of about 30 meters indoors. If you look at the Wi-Fi data range, it is based upon the protocol type.

Wi-Fi, Bluetooth is to replace WIRE

For example, 802.11a, b, g, n, ac and ad. Well, look at their data types over there. Their data rates can be 54 Mbps, 11, 54, 150 and also 866.7 Mbps. When you go to the futuristic 802.11ad, well, you’re reaching up to like 70, 7 Gbps, which is at a much higher data rate. Now we look at Bluetooth. Bluetooth is a wireless PAN, a Wireless Personal Area Network protocol. And it’s designed by the Bluetooth Special
Interest Group, the Bluetooth SIG. This replaces cables connected many different devices. So with Bluetooth basically cable free becomes one of the major focuses. For example, headset to mobile phone going wireless or wireless headset, wonderful. Heart monitors and other medical equipment that I have will be connected to my smartphone using the Bluetooth link. That’s basically what I’m talking about when I talk about wireless Bluetooth connectivity replacing wires. Now, Bluetooth’s standard area network range is about 10 meters for indoor applications and things like that, but when you go to Bluetooth. 4.0, well you’re talking about an extended
range of up to about 50 meters. Bluetooth Low Energy, which is a part of Bluetooth 4.0 standards, this provides reduced power consumption and cost reduction while maintaining a similar communication range. That’s wonderful. Once again, just like Wi-Fi, Bluetooth has different data rates as well. Just taking a look at Bluetooth 2.0,
3.0, 4.0. Well 2.0 with EDR, this can provide a two point win, 2.1 Mbps data rate. Bluetooth 3.0 with a HS well this can support 24 Mpbs. Bluetooth 4.0 well this achieves up to 25 megabits per second of a data rate. Now let’s take a look at
IEEE 802.15.4 standards and this is used in ZigBee, 6LoWPAN and all of these other type of applications wireless communication protocols. We’re going to focus on two of the most popular ones which is ZigBee and 6LoWPAN. Why 802/15.4? Well, it’s a low cost, low speed, low power, wireless personal area network protocol and it can be used in many good ways like supporting works and IoT technology. Now, what type of device types does this 802.15.4 standard have? There’s basically two. One is a full function device and the other is a reduced function device. Now, a full function device is equipped with full functionality. It can send, receive, route data, and form clusters. It can serve as the PAN coordinator. That doesn’t mean that it will always be a PAN coordinator. It may elect to or sometimes if it sees somebody else, some other FFD is already Doing that role, then in order to save energy, it may not do PAN coordinator operation. It may just work as a full functional device. And then later on if that device, that taking the PAN coordinator role, if that role is released and
some other device needs to take it, then the FFD may volunteer to take that role. Now, the next type of device is RFD, reduced function device. Now, this has a reduced
functional protocol compared to the FFD protocol stack. This can only communicate
to full functional devices. It cannot serve as a PAN coordinator,it serves a role as a simple sensor or switch device, and it cannot provide routing functionality. Network topology wise, well, with the 802.15.4 you can form a star network topology,
a peer-to-peer, P2P network topology. Also, we using a lot of FFDs, well, and also the P2P extensions, well, you can form a mesh network. In addition, for a large scale network, you can form a cluster tree. In addition, the role of coordinator is very important. This controls the 802.15.4 network, a special form of a full functional device that needs to be taken, and it’s a typical FFD functions and added on with network coordination and service features. Once again, an FFD will need to take this role of coordinator to play a bigger role in controlling the network. Now, let’s take a look at network topologies but first, start with the star topology. Here, you see a full functional device, the devices that are full functional devices are colored in blue and the reduced functional devices are colored just in white. Now, as you can see, a full functional device in the middle provides the star topology formation. Nodes communicate through a central PAN coordinator and that’s the FFD in the middle. Now P2P topology. Here, you can see that nodes communicate through the PAN coordinator, and through point-to-pont links that they establish on the sides. Here, extension of the star topology is basically what enables the P2P topology to exist. Next is cluster tree topology. Here, among the full functional devices, a PAN coordinator takes the major role. And as you can see, it is where different clusters are formed based upon the full functional devices. And as you can see, the PAN coordinator connects the individual full functional devices that are forming the star or P2P networks that are forming the clusters. The cluster trees are similar to stars, though RFD devices are only allowed to connect at the outermost branches. The diagram shows that the FFD connects to the coordinator and a FFD can have connections to multiple end devices. Now, to look at the frame format,this will give you a little bit about what is actually used in the coordination for these type of functions. And as you can see here, well, for the overall structure the maximum frame size is 127 octets, 127 bytes, the maximum frame header is 25 octets. As you can see, the frame control field is expanded out below where in the frame control field there’s a frame type and various fields. Among these fields, the security enabled
field, that’s interesting and important. In addition, we can see the Intra PAN field that’s in there. It also includes the app request,frame pending, destination address mode, and source address mode, and other reserved fields. Now, going back to the general frame
format above the frame control field, we see that there’s a sequence number and
there’s a destination PAN identifier, and also there’s
a source PAN identifier field. Then, we have destination address,
source address, and this is where you see the frame payload
goes in, and that’s a variable field. At the end, for protection, due to errors,
we have a frame check sequence. Now, let’s look at ZigBee and
6LoWPAN because these devices use the 802.15.4 layer
at the lower layers. Now let’s look at ZigBee first. This is supported by the ZigBee
alliance and ZigBee adds on the upper layers which are the application layer and
the ZigBee network layer, on top of the medium access control and
physical layer that are established in
the IEEE.802.15.4 protocol. Now here,
ZigBee provides the upper layers, and of course different type
of service operations. ZigBee works well in isolated
network environments. In other words, if it’s an isolated
network, ZigBee can use, it can be used to form an IoT or a sensor,
wireless sensor network connection. ZigBee network topology include star,
mesh, cluster tree, where the star network is the basic
common topology that is formed. Mesh or P2P networks can provide high reliability because they can
support multiple routes between nodes. Then there’s the cluster tree network
which is a combination of star and P2P topologies. As you can see, ZigBee network topologies
are dependent upon the network connectivity that are provided
by the IEEE 802.15.4 protocol. Now, we’re gonna look into 6LoWPAN. Now, what is 6LoWPAN? Well, 6LoWPAN stands for IPV6 over low
power wireless personal area network. So, it supports IPV6 packets over the IEEE 802.15.4 wireless personal area network. It enables IPv6 IoT wireless
network support based upon low power design aspects for
good battery operated IoT devices. This means that this is good for
battery operated IoT devices. Means that typically,
the low power consumption is going to be used to
extend the battery life. 6LoWPAN is an IETF standard. The IETF is
the Internet Engineering Task Force. It is one of the two task forces, the IETF
and the IREF belong to the Internet architecture board which
are under the United Nations. And in here, this uses,
the 6LoWPAN standard uses the IEEE 802.15.4 wireless PAN technology for
its two basic layer operations. Now, wireless PAN direct
connection to IPv6 Internet, this is what we’d like to achieve,
and this is what 6LoWPAN can provide. IPv6 features can be used to support
wireless personal networks if. They are connected together, and
that is what 6LoWPAN attempts to do. You can use IPv6 security features. You can use the IPv6 naming,
addressing, translation, lookup, and discovery function that IPv6 already has,
and that’s wonderful. Now here are some characteristics
that we need to consider. The small packet size that
supports the 16 bit short and the IEEE 64-bit extended
Medium Access Control addresses are typically what are used
in 6LoWPAN packets. Also, low data rates of 20, 40, or 250 kbps are the major domain of
the data rates that can be served. Network topology-wise,
Star and Mesh topologies. And this is because we’re
using the 802.15.4 standards. This is good for
low power battery operated nodes. And also relatively low cost devices
can be developed from this technology. One thing we have to consider is header
compression and this is because 6LowPAN and IPv6 packets, we need to have
some packet size matching required. What do I mean? Well take a look at this, IPv6 minimum
packet size is going to be 1,280 octets. The IEEE 802.15.4 has an MTU of a maximum transmission unit. Which is the maximum packet
size is only 127 octets. And as you can see there’s a big
mismatch of the packet sizes. Now just looking at the IPv6 header. Well, this is a 40 octet minimum length
with no option extension fields added. Still it’s 40 octets, and that’s way to
big to send over an IEEE 802.15.4 packet. Because look, among the 127 octets, that
itself is gonna occupy too much space. So what we need to do here and what 6LoWPAN provides is
header compression technology. It works like this, you compress the IP
address because the IP address is long and you compress it when it can be derived
from other header field information. Also, you wanna compress the prefix
part for link local addresses. You may even want to totally
omit the 128 bit IPv6 address field when it can be provided
from the link layer address information. In addition, you can try to compress
other common header fields. Like the TCP, UDP and ICMP header fields. And if you do that you can save
a lot of the header information. It can be kept and used in the operation,
but not transmitted over the wireless personal area network
every time a packet is transmitted. Now I hope you have a better insight
into what makes IoT networking possible. And it’s from a unique combination
of wireless personal area networks, like 6LowPAN, ZigBee, and the IEEE 802.15.4 protocol that
runs the Medium Access Control and the physical layer operations for
6LowPAN and Zigbee connectivity. In addition, we studied about
wireless LAN Wi-Fi technology, which is a local area network,
wireless local area network protocol. And on a larger scale, mobile
communication technology, such as LTE, that is used to provide connectivity
to the internet, the wide area network. I hope that you can see how these
technologies need to work together to provide IoT connectivity. These are the references that
are used to prepare this IoT lecture. And I hope that you can use them if
you’re interested in further studies. Thank you very much. This wraps it up for IoT but there’s
other topics that are included in this specialization package and I hope that
you refer to them for further studies. Thank you.

Case Study 1:Temboo with your Yún

How to Temboo with your Yún


Temboo makes it easy for the Arduino Yún to connect to over 100 web-based resources and services (e.g. Facebook, Dropbox, US Census data) by standardizing how you interact with their Application Programming Interfaces (APIs). Don’t worry if you’re not familiar with APIs—with Temboo you don’t have to worry about the details.

Here we’ll show you how to use Temboo by creating a simple Arduino Yún sketch that retrieves weather information for a specific address from the Yahoo Weather API. What makes Temboo uniquely powerful and useful is that, once you know how to use one API, you know how to work with any API in our Library.

Before you start, you’ll need to download and install the Arduino IDE. Make sure you’ve downloaded the version compatible with the Yún.

You’ll also need to connect your Yún to the internet. If you need help with that, take a look at Arduino’s documentation.

FIND WHAT YOU NEED

1 Log in to Temboo.

2 Go to our Library and find the Yahoo > Weather > GetWeatherByAddress Choreo.

The Yahoo GetWeatherByAddress Choreo in our Library

3Enter any complete address in the Address input field.

4Now click Run. After a moment you’ll see the data that Yahoo Weather sends back shown in the Output section of the page (which is right below the Input section).

The output from the Yahoo Weather API (which is in XML format)

MAKE YOUR ARDUINO SKETCH

When you run a Choreo from the website, Temboo automatically generates code that can be used to make the same API call from an Arduino Yún sketch.

5Turn on IoT Mode, select Arduino Yún, and scroll down to the code section of the Library page.

The IoT Mode switch can be found on each Choreo page in the Temboo Library

6Scroll down to the CODE section of the Library page. Then Copy the code, and paste it into a new sketch in the Arduino editor.

REMEMBER TO CREATE YOUR HEADER FILE

In order to run this sketch on your Yún, it needs to be configured with an appropriate TembooAccount.h header file that contains your Temboo account information.

To create the header file:

7Make a new tab in the Arduino editor, and name it TembooAccount.h

8Beneath the sketch code you previously copied from the Library, you’ll find a header file containing three #definestatements. Copy the contents of the header into your TembooAccount.h file.

The TembooAccount.h header file

RUN THE SKETCH AND REJOICE

Save and upload your sketch to the Arduino Yún, and open the serial monitor. After running the sketch, you’ll see the response from the Yahoo Weather service printed to the monitor.

Congratulations! This same approach will work with your Yún for all of our 2000+ Choreos. Because these ready-to-run tasks take care of so many steps, we named them after choreographies. Now that you know how to make your Yún run any Choreo, you’re just a few steps away from making something extraordinary. With Temboo handling all the small stuff, you’re free to think big.

You can find lots of examples of how to use Temboo with your Yún here.

Finally, if you’d like to run this, or any other Temboo sketch, via wi-fi or ethernet (as opposed to the USB cable), then you should read this tutorial.

NEED HELP?

We’re always happy to help. Just email us at support@temboo.com, and we’ll answer your questions.

[/wptab]


Tweet-a-watt – How to make a twittering power meter… by adafruit
Picture of Tweet-a-watt - How to make a twittering power meter...

Control your FAN remotely

SuperHouseTV #12: Building an Arduino home automation controller

Yun based Electricity Monitor with Cloud Support / Temboo and Google Drive

Linkio: the $100 Smart Home Devices Solution
by Linkio

Arduino

WiFi-equipped Arduino Yun now available for $69 (video)

Arduino Yun at Maker Faire
If you were wondering what happened to the Arduino Yun after it missed its original June release target, you can relax: it’s now on sale worldwide. As promised, the $69 (€52) design combines a garden variety Leonardo board with a WiFi system-on-chip running Limino, giving owners a customizable wireless access point with Ethernet, USB and a microSD slot. Tinkerers can also program the Arduino component over the air using a newly updated developer environment. Those already sold on the concept can buy an Arduino Yun at the source link, while newcomers can check out an introductory video after the break.