sunnygleason/dashcam_ui.html

## dashcam_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>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="PubNubAngularApp" ng-controller="DashCamCtrl">

<h4>Online Devices</h4>

<ul class="list-unstyled list-inline">
  <li ng-repeat="(uuid, data) in received">
    <img style="width:400px;height:300px" ng-src="{{data.image}}" />
    <br />
    <b>{{data.uuid}}</b>
    <br />
    {{data.ts}}
  </li>
</ul>

</div>

<script>
//
// Set Up Your Angular Module & Controller(s)
//
angular.module('PubNubAngularApp', ["pubnub.angular.service"])
.controller('DashCamCtrl', function($rootScope, $scope, Pubnub) {
  $scope.received   = {};
  $scope.inprogress = {};

  // make up a channel name
  $scope.channel  = 'dashcam-demo';

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

  var msgCallback = function(payload) {
    $scope.$apply(function() {
      if (payload.uuid) {
        if (!$scope.inprogress[payload.uuid]) {
          $scope.inprogress[payload.uuid] = payload;
        }

        if (payload.i == 0) {
          $scope.inprogress[payload.uuid].imageTmp = payload.imgPart;
        } else {
          $scope.inprogress[payload.uuid].imageTmp = $scope.inprogress[payload.uuid].imageTmp + payload.imgPart;
        }

        if (payload.i == (payload.n - 1)) {
          $scope.received[payload.uuid] = $scope.inprogress[payload.uuid];
          $scope.received[payload.uuid].image = $scope.inprogress[payload.uuid].imageTmp;
          $scope.inprogress[payload.uuid] = null;
        }
      }
    });
  };

  var multiMsgCallback = function(payloads) {
    payloads[0].forEach(function(x) { msgCallback(x); });
  };

  // Subscribe to the Channel (to receive updates)
  Pubnub.subscribe({ channel: $scope.channel, callback: msgCallback });

  // Retrieve history (to initialize with most recent history)
  Pubnub.history({ channel:$scope.channel, limit:16, callback: multiMsgCallback });
});
</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>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container" ng-app="PubNubAngularApp" ng-controller="DashCamCtrl">

	<h4>Online Devices</h4>

	<ul class="list-unstyled list-inline">
	<li ng-repeat="(uuid, data) in received">
	<img style="width:400px;height:300px" ng-src="{{data.image}}" />
	<br />
	<b>{{data.uuid}}</b>
	<br />
	{{data.ts}}
	</li>
	</ul>

	</div>

	<script>
	//
	// Set Up Your Angular Module & Controller(s)
	//
	angular.module('PubNubAngularApp', ["pubnub.angular.service"])
	.controller('DashCamCtrl', function($rootScope, $scope, Pubnub) {
	$scope.received = {};
	$scope.inprogress = {};

	// make up a channel name
	$scope.channel = 'dashcam-demo';

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

	var msgCallback = function(payload) {
	$scope.$apply(function() {
	if (payload.uuid) {
	if (!$scope.inprogress[payload.uuid]) {
	$scope.inprogress[payload.uuid] = payload;
	}

	if (payload.i == 0) {
	$scope.inprogress[payload.uuid].imageTmp = payload.imgPart;
	} else {
	$scope.inprogress[payload.uuid].imageTmp = $scope.inprogress[payload.uuid].imageTmp + payload.imgPart;
	}

	if (payload.i == (payload.n - 1)) {
	$scope.received[payload.uuid] = $scope.inprogress[payload.uuid];
	$scope.received[payload.uuid].image = $scope.inprogress[payload.uuid].imageTmp;
	$scope.inprogress[payload.uuid] = null;
	}
	}
	});
	};

	var multiMsgCallback = function(payloads) {
	payloads[0].forEach(function(x) { msgCallback(x); });
	};

	// Subscribe to the Channel (to receive updates)
	Pubnub.subscribe({ channel: $scope.channel, callback: msgCallback });

	// Retrieve history (to initialize with most recent history)
	Pubnub.history({ channel:$scope.channel, limit:16, callback: multiMsgCallback });
	});
	</script>
	</body>
	</html>