The new HTML5 tag built atop AngularJS and Lelylan
that makes it easier to explore and create the structure
of the devices that will compose the Connected Home.

Introduction

What

With the type directive you can easily create and explore the structure of any device like lights, thermostats, locks and more in a simple and accessible way.

Why

We need a clear way to define how devices work in order to explore the real potential of the Connected Home. Right now we have dozens of standards: Wifi, Zigbee, Ethernet, Konnex, X10 to name some. All those differences does not make it easier for devices to communicate.

How

The proposed solution is the definition of a device type, which defines a device structure in a unique way through the combination of three key elements.

Where

Right now the type directive is used from lelylan in the dashboard to easily start to control and monitor any device in your house. We'll release soon a dedicated dashboard completely dedicated to the definition and discussion of device types.

Call for action

If you like this project and you want to share your ideas on what we are doing, let the @lelylan team know.

Getting Started

Installation

Install the type directive using Bower. 

$ bower install type-directive-ng --save

Basic Example

Use the <lelylan-type> directive and set the desired type ID. 

<lelylan-type type-id="TYPE_ID"></lelylan-type>

Create your first app

In this section you will learn how to use the type directive to explore the most popular types defined in Lelylan.

Setup

To build our app we'll use Yeoman, a collection of tools and frameworks helping developers to quickly build web applications.

Installation

With a recent version of Node.js installed, install the yo package. In this way you have Yo, Grunt and Bower and can run them directly from the command-line. 

$ npm install -g yo

With Yeoman you can install additional generators with npm. For this tutorial you need to install the AngularJS generator. 

$ npm install -g generator-angular

Create your AngularJS app

To begin, go to the terminal, make a new directory and cd into it. 

$ mkdir new-project && cd $_

You can now kick-start your AngularJS app. 

$ yo angular

It will also ask you if you would like to include Twitter Bootstrap and other stuff. Once you've decided, just hit Enter. It will take a while to complete.

To preview what the app looks like run the serve command. 

$ grunt serve

The server supports LiveReload, meaning you can fire up a text editor, edit a custom element and the browser will reload on save.

Install the type directive

Install the type directive using Bower. 

$ bower install type-directive-ng --save

Now you have <lelylan-type> directive and all its dependencies ready to be used. Restart the server to automatically add the needed javascript files to your index page. 

$ grunt serve

The setup is now completed.

Add the type directive

Inject the device directive into your AngularJS application. 

// app/scripts/app.js
angular.module('app', ['lelylan.directives.type', ... ])

Get Lelylan popular types

To get the popular types used in Lelylan use the Lelylan client for AngularJS (already installed as dependency). Open the main controller and use the Type#popular method. 

angular.module('newProjectApp')
  .controller('MainCtrl', function ($scope, Type) {
    Type.popular()
      .success(function(data) { $scope.types = data })
  });

Show types

Now open the main.html and use the type directive. 

<div ng-repeat="type in types">
  <lelylan-type type-id="{{string}}"></lelylan-type>
<div>

Here is what happens. You iterate between all popular types and show them using the type directive. To let the directive know which type it has to render use the attribute type-id, which accepts the type identifier.

See the configurations section to see the accepted attributes.

You're done!

Open your index page and explore Lelylan popular types.

Edit mode

When the user who created the directive is logged in, the directive goes in edit mode. Just play with the directive below to update the type name, add properties, remove functions change category and more.

Authorization

Lelylan uses an OAuth 2.0 server for authentication and authorization. To get started register a new application and take the generated credentials (Client ID and Redirect URI) before moving to the next step.

Add the oauth-ng directive

To get an authorization token you need to use oauth-ng, an AngularJS directive for OAuth 2.0 (already installed as dependency). Open your main.html view and configure the oauth directive by setting the client-id and redirect-uri previously defined. 

<oauth
  site="http://people.lelylan.com"
  client-id="CLIENT_ID"
  redirect-uri="REDIRECT_URI"
  profile-uri="http://api.lelylan.com/me"
  scope="devices">
</oauth>

Check out the oauth-ng docs if you want to better understand how it works.

Get your types

To get your types open the main controller and use the Type#all method. 

angular.module('newProjectApp')
  .controller('MainCtrl', function ($scope, Type) {
    Type.all()
      .success(function(data) { $scope.types = data })
      .error(function(data)   { $scope.error = 'Unauthorized request. Login first.' })
  });

Show types

Now open the main.html and set the type directive. 

<p ng-bind="error"></p>
<div ng-repeat="type in types">
  <lelylan-type type-id="{{string}}"></lelylan-type>
<div>

You're done!

Explore and edir your device types.

Configurations

The directive accepts the following attributes.

type-id required Type ID.
device-template optional Custom template to render.

Examples

// Load the device by setting its id
<lelylan-type type-id="TYPE_ID"></lelylan-type>

// Load the device by setting its json structure and a specific template
<lelylan-type type-id="TYPE_ID" type-template="TEMPLATE_URI"></lelylan-type>

Custom CSS

The type directive comes to life with customization in mind. This means that you can easily define your personalized CSS styles and create your own theme.

Default Style

Black Style | Download CSS

Mail or Tweet us about new CSS customizations.

Defining a new style

Customizing the device directive is easy. Simply study the CSS classes defining the default template and override the existing CSS rules with new ones.

Right now the template is not as cleas as we would love. We really hope to find soon the needed time to give you a cleaner code.

Events

Type delete

lelylan:type:deleted(type)

Listen for type deletion.
As param it sends the deleted JSON device representation. 

$scope.$on('lelylan:type:delete', function(event, device) {
  console.log('Deleted', device.name)
});

Links

Thanks

Mail or Tweet us for any idea that can improve the project.