sunnygleason/garage_ui.html

## garage_ui.html
<!doctype html>
<html>
<head>
  <script src="https://cdn.pubnub.com/pubnub-3.15.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
</head>
<body>
<div class="container" ng-app="PubNubAngularApp" ng-controller="MyHomeCtrl">

<h3>MyHome Controls</h3><br /><br />

<ul class="list-unstyled">
  <li ng-repeat="(uuid, data) in devices">
    <b>{{data.name}} (id:{{uuid}})</b> - {{STATES[data.state]}}<br/>
    <small style="color:gray">since {{getDate(data.updated)}}</small><br />
    <div>
      <i class="fa fa-home fa-5x"></i>
      <i class="fa fa-car fa-2x"></i>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span ng-click="toggleDoor(uuid)">
        <i class="fa fa-4x fa-spinner fa-spin" ng-show="data.state == -1" style="color:gray"></i>
        <i class="fa fa-4x fa-toggle-on" ng-show="data.state == 1"></i>
        <i class="fa fa-4x fa-toggle-off" ng-show="data.state == 2"></i>
        <i class="fa fa-4x fa-spinner fa-spin" ng-show="data.state == 4"></i>
        <i class="fa fa-4x fa-spinner fa-spin" ng-show="data.state == 5"></i>
      </span>
    </div><br />
    <pre>{{data}}</pre><br /><br />
  </li>
</ul>

</div>

<script>
angular.module('PubNubAngularApp', ["pubnub.angular.service"])
.controller('MyHomeCtrl', function($rootScope, $scope, Pubnub) {
  $scope.devices    = {};

  $scope.STATES     = {
    '-1':'Sending Command...',
    '1': 'Open',
    '2': 'Closed',
    '4': 'Opening',
    '5': 'Closing'
  };

  $scope.msgChannel   = 'MyHome';
  $scope.prsChannel   = 'MyHome-pnpres';
  $scope.ctrlChannel  = 'MyHome_Ctrl';

  if (!$rootScope.initialized) {
    Pubnub.init({
      publish_key: 'YOUR_PUB_KEY',
      subscribe_key: 'YOUR_SUB_KEY',
      ssl:true
    });
    $rootScope.initialized = true;
  }

  var msgCallback = function(payload) {
    if (payload.uuids) {
      _(payload.uuids).forEach(function (v) {
        $scope.$apply(function() {
          if (v.state && v.state.type == "Garage Door") {
            $scope.devices[v.uuid] = v.state;
          }
        });
      });
    } else if (payload.action == "state-change" && payload.uuid) {
      $scope.$apply(function() {
        if (payload.data && payload.data.type == "Garage Door") {
          $scope.devices[payload.uuid] = payload.data;
        }
      });
    }
  };

  $scope.getDate = function(ts) {
    return new Date(parseInt(ts)).toISOString();
  };

  $scope.toggleDoor = function(uuid) {
    var cbFn = function(result) {
      var targetState = null;

      if (result.state == "2") {
        targetState = "open";
      } else if (result.state == "1") {
        targetState = "closed";
      }

      if (!targetState) {
        return;
      }

      Pubnub.publish({
        channel: $scope.ctrlChannel,
        message: {
          target   : uuid,
          newState : targetState
        }
      });

      $scope.$apply(function() {
        $scope.devices[uuid].state = -1;
      });
    };

    Pubnub.state({channel:$scope.msgChannel, uuid:uuid, callback:cbFn});
  };

  Pubnub.subscribe({ channel: [$scope.msgChannel, $scope.prsChannel], message: msgCallback, presence:msgCallback });
  Pubnub.here_now({ channel:$scope.msgChannel, state:true, callback: msgCallback });
});
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="https://cdn.pubnub.com/pubnub-3.15.1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
	<script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
	</head>
	<body>
	<div class="container" ng-app="PubNubAngularApp" ng-controller="MyHomeCtrl">

	<h3>MyHome Controls</h3><br /><br />

	<ul class="list-unstyled">
	<li ng-repeat="(uuid, data) in devices">
	<b>{{data.name}} (id:{{uuid}})</b> - {{STATES[data.state]}}<br/>
	<small style="color:gray">since {{getDate(data.updated)}}</small><br />
	<div>
	<i class="fa fa-home fa-5x"></i>
	<i class="fa fa-car fa-2x"></i>

	<span ng-click="toggleDoor(uuid)">
	<i class="fa fa-4x fa-spinner fa-spin" ng-show="data.state == -1" style="color:gray"></i>
	<i class="fa fa-4x fa-toggle-on" ng-show="data.state == 1"></i>
	<i class="fa fa-4x fa-toggle-off" ng-show="data.state == 2"></i>
	<i class="fa fa-4x fa-spinner fa-spin" ng-show="data.state == 4"></i>
	<i class="fa fa-4x fa-spinner fa-spin" ng-show="data.state == 5"></i>
	</span>
	</div><br />
	<pre>{{data}}</pre><br /><br />
	</li>
	</ul>

	</div>

	<script>
	angular.module('PubNubAngularApp', ["pubnub.angular.service"])
	.controller('MyHomeCtrl', function($rootScope, $scope, Pubnub) {
	$scope.devices = {};

	$scope.STATES = {
	'-1':'Sending Command...',
	'1': 'Open',
	'2': 'Closed',
	'4': 'Opening',
	'5': 'Closing'
	};

	$scope.msgChannel = 'MyHome';
	$scope.prsChannel = 'MyHome-pnpres';
	$scope.ctrlChannel = 'MyHome_Ctrl';

	if (!$rootScope.initialized) {
	Pubnub.init({
	publish_key: 'YOUR_PUB_KEY',
	subscribe_key: 'YOUR_SUB_KEY',
	ssl:true
	});
	$rootScope.initialized = true;
	}

	var msgCallback = function(payload) {
	if (payload.uuids) {
	_(payload.uuids).forEach(function (v) {
	$scope.$apply(function() {
	if (v.state && v.state.type == "Garage Door") {
	$scope.devices[v.uuid] = v.state;
	}
	});
	});
	} else if (payload.action == "state-change" && payload.uuid) {
	$scope.$apply(function() {
	if (payload.data && payload.data.type == "Garage Door") {
	$scope.devices[payload.uuid] = payload.data;
	}
	});
	}
	};

	$scope.getDate = function(ts) {
	return new Date(parseInt(ts)).toISOString();
	};

	$scope.toggleDoor = function(uuid) {
	var cbFn = function(result) {
	var targetState = null;

	if (result.state == "2") {
	targetState = "open";
	} else if (result.state == "1") {
	targetState = "closed";
	}

	if (!targetState) {
	return;
	}

	Pubnub.publish({
	channel: $scope.ctrlChannel,
	message: {
	target : uuid,
	newState : targetState
	}
	});

	$scope.$apply(function() {
	$scope.devices[uuid].state = -1;
	});
	};

	Pubnub.state({channel:$scope.msgChannel, uuid:uuid, callback:cbFn});
	};

	Pubnub.subscribe({ channel: [$scope.msgChannel, $scope.prsChannel], message: msgCallback, presence:msgCallback });
	Pubnub.here_now({ channel:$scope.msgChannel, state:true, callback: msgCallback });
	});
	</script>
	</body>
	</html>