Micro Application 4 : PorticZone avec Angular.js

Introduction portic


Aujourd’hui, je vais créer une micro application de portique de supermarché, à tester ici.

Voici ce que l’application permet au jour 1:

  • On Décompte les clients par tranche horaire, automatiquement, lors du passage dans le portique.
  • Le passage d’une personne est simulée par un clic souris, sans cela il faudrait utiliser l’api dune caméra infrarouge.
  • Vision de Pourcentages des clients passés par tranche horaire du Jour.
  • Moyenne des clients passés dans la journée.

Le code est inventé de zéro. A noter que le temps de réalisation du premier jour peut être longue, mais dans les prochains projets, ce sera plus court.

Description :


Langage : Angular.js, Html5.0, Css3.0, Jquery

Temps de réalisation : 6h00

Type : Micro-Application Front office

Back-end possible : Php, Java.

 

Photo


porticzone

Le code

<html lang="fr" ng-app="GestionPortique">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"></script>
		<!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			
var myApp = angular.module('GestionPortique',[]);
				
// Controleur Angular
myApp.controller('NameCtrl', function($scope) {
				
	//Initialisation des Variables
	$scope.Math=Math;
	$scope.clients	= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,10,10,50,5,5,0,0,0,0];	// Initialisation du Nombre de client par heures(données exemples sur 24h, 1 par heure)
	$scope.prcts	= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];	 	// Initialisation des pourcentages par heure sur 24h

	// Action sur Clic/Flash client
	$scope.augmente	= 	function(){
						date = new Date;
						var h = date.getHours();
						$scope.clients[h] += 1;// Incrémente de 1 le nb de client l'heure ou le Flash a été fait.
						colorDetecteur();
						$scope.getPourcentage(); // Mets à jour le pourcentage de clients après un Flash
						}

	// Total des clients Flashés
	$scope.getTotal = function(){
						var total=0;
						for (x=0;x<24;x++){
						total += $scope.clients[x];
						}
	return total;
	};

	// Pourcentage des clients flashés par heures
	$scope.getPourcentage = function(){
						var total=0;
						var y=$scope.getTotal();
						for (x=0;x<24;x++){
						$scope.prcts[x] = ($scope.clients[x]/y*100).toFixed(2);
						}
	};
	
	$scope.getPourcentage(); // Mets à jour les pourcentages lors de l'initialisation.

	// Design et animation du Flash Portique
	function colorDetecteur(){
		affClient();
		$("#infos").empty();
		$("#infos").append('Flash d\'un Client');
		$(".detecteur").css( 'background-color', 'red' );
		setTimeout(function() {
			console.log("Timeout");
			$("#infos").empty();
			$("#infos").append('Pas de Client');
			$(".detecteur").css( 'background-color', 'blue' );
		}, 700);
	};	
		
	// Apparition de l'image du Client.
	function affClient(){
		$(".client").show();
		setTimeout(function() {
			$(".client").hide();
			}, 700);

	}

	$(".client").hide();// Par défaut, l'image du client est cachée.

	
// Fin du Controleur Angular
});		

</script>
</head>

<body ng-controller="NameCtrl" >

<div id="logo"><img src="portic.jpg" class="logo"></div>


<div id="a_cliquer" ng-click="augmente()"> 
	<div id="client" class="client"><img src="client.png"></div>
	<button ng-click="heure()" class="btn">Flash Client</button>
	<img src="portique.jpg" style="width:300px;height:300px;"></img>
	<h1><span id="infos">{{infos}}</span></h1>
</div>



<div id="detecteur" class="detecteur" > 
	<img src="detecteur.jpg" class="img"></img>
</div>



<br>
<div id="stats">
	<table class="CSSTableGenerator ">
		<tr>
			<td>	<img src="horloge.jpg" class="img"></td>
			
			<td>0h</td>
			<td>1h</td>
			<td>2h</td>
			<td>3h</td>
			<td>4h</td>
			<td>5h</td>
			<td>6h</td>
			<td>7h</td>
			<td>8h</td>
			<td>9h</td>
			<td>10h</td>
			<td>11h</td>
			<td>12h</td>
			<td>13h</td>
			<td>14h</td>
			<td>15h</td>
			<td>16h</td>
			<td>17h</td>
			<td>18h</td>
			<td>19h</td>
			<td>20h</td>
			<td>21h</td>
			<td>22h</td>
			<td>23h</td>
			<td>Total</td>
			<td>Moyenne</td>
			
		</tr>
		<tr >
			<td><img src="client.png" class="img"></td>
			<td>{{clients[0]}}</td>
			<td>{{clients[1]}}</td>
			<td>{{clients[2]}}</td>
			<td>{{clients[3]}}</td>
			<td>{{clients[4]}}</td>
			<td>{{clients[5]}}</td>
			<td>{{clients[6]}}</td>
			<td>{{clients[7]}}</td>
			<td>{{clients[8]}}</td>
			<td>{{clients[9]}}</td>
			<td>{{clients[10]}}</td>
			<td>{{clients[11]}}</td>
			<td>{{clients[12]}}</td>
			<td>{{clients[13]}}</td>
			<td>{{clients[14]}}</td>
			<td>{{clients[15]}}</td>
			<td>{{clients[16]}}</td>
			<td>{{clients[17]}}</td>
			<td>{{clients[18]}}</td>
			<td>{{clients[19]}}</td>
			<td>{{clients[20]}}</td>
			<td>{{clients[21]}}</td>
			<td>{{clients[22]}}</td>
			<td>{{clients[23]}}</td>
			<td>{{getTotal()}}</td>
			<td>{{Math.round(getTotal()/24,2)}}</td>
		</tr>
		<tr>
			<td>	<img src="pourcent.png" class="img"></td>
			<td>{{prcts[0]}}%</td>
			<td>{{prcts[1]}}%</td>
			<td>{{prcts[2]}}%</td>
			<td>{{prcts[3]}}%</td>
			<td>{{prcts[4]}}%</td>
			<td>{{prcts[5]}}%</td>
			<td>{{prcts[6]}}%</td>
			<td>{{prcts[7]}}%</td>
			<td>{{prcts[8]}}%</td>
			<td>{{prcts[9]}}%</td>
			<td>{{prcts[10]}}%</td>
			<td>{{prcts[11]}}%</td>
			<td>{{prcts[12]}}%</td>
			<td>{{prcts[13]}}%</td>
			<td>{{prcts[14]}}%</td>
			<td>{{prcts[15]}}%</td>
			<td>{{prcts[16]}}%</td>
			<td>{{prcts[17]}}%</td>
			<td>{{prcts[18]}}%</td>
			<td>{{prcts[19]}}%</td>
			<td>{{prcts[20]}}%</td>
			<td>{{prcts[21]}}%</td>
			<td>{{prcts[22]}}%</td>
			<td>{{prcts[23]}}%</td>
			<td>100%		</td>
			<td>			</td>
		</tr>
	</table>
</div>

</body>

<!-- Plus bas, tous les CSS -->
	<style> 
		.body{
			font-family:arial;
			font-size:0.8em;
			background-color:tan;
			max-width:1000px;
		}	
		 
		h1{
		
		font-size:1.2em;
		text-align: center;
		background-color:lightgrey;
		-webkit-border-radius: 10px 10px 10px 10px;
		border-radius: 10px 10px 10px 10px;
		-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
		box-shadow:inset 2px 2px 2px 2px #635453;
		}
		
		p{
		margin-left:15px;
		}
	
		#a_cliquer{
		height:320px;
		width:350px;
		background-color:lightgrey;
		float:left;
		
		}
		
		.img{
		width:50px;
		height:50px;
		
		}
		
		.logo{
		width:80px;
		height:80px;
		}
		
		
		.detecteur{
		width:120px;
		height:120px;
		float:left;
		text-align:center;
		
		}
		
		#stats{
		width:383px;
		height:100px;
		position:absolute;
		margin-left:1px;
		margin-top:350px;
		 float:left;
		}
		
		#client{
		position:absolute;
		margin-height:20px;
		margin-left:100px;
		margin-top:20px;
		}
		
		#logo{
		position:absolute;
		margin-height:20px;
		margin-left:800px;
		margin-top:20px;
		height:100px;
		
		
		}
		

	.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	background-color:#cccc99;
		

}
.CSSTableGenerator td{
	vertical-align:middle;
	
	background-color:#cccccc;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:1px;
	font-size:10px;

	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);

	background-color:#003366;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:10px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);

	background-color:#003366;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}	

.btn {
  background: #323c42;
  background-image: -webkit-linear-gradient(top, #323c42, #2980b9);
  background-image: -moz-linear-gradient(top, #323c42, #2980b9);
  background-image: -ms-linear-gradient(top, #323c42, #2980b9);
  background-image: -o-linear-gradient(top, #323c42, #2980b9);
  background-image: linear-gradient(to bottom, #323c42, #2980b9);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  text-shadow: 3px 6px 9px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 12px 18px 10px 20px;
  border: solid #1f628d 4px;
  text-decoration: none;

  position:absolute;

}

.btnspe{
  margin-top:200px; 
 margin-left:330px; 
}

.btnspe2{


}


.btn:hover {
  background: #fc6f3c;
  background-image: -webkit-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: -moz-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: -ms-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: -o-linear-gradient(top, #fc6f3c, #d9349f);
  background-image: linear-gradient(to bottom, #fc6f3c, #d9349f);
  text-decoration: none;
}




	
</style>

</html>























 

 

Publicités