<!--   
//   Controller DCC++ permet de commander de logiciel DCC++ BASE STATION de Gregg E. Berman COPYRIGHT (c) 2013-2016

//   (©) 2016-2017 - Christophe BOBILLE
//   Ce programme est un logiciel libre ; vous pouvez le redistribuer et/ou le modifier
//	 au titre des clauses de la Licence Publique Générale GNU, telle que publiée
//   par la Free Software Foundation ; soit la version 3 de la Licence, 
//   ou (à votre discrétion) une version ultérieure quelconque.

//   Ce programme est distribué dans l'espoir qu'il sera utile,
//   mais SANS AUCUNE GARANTIE ; sans même une garantie implicite de
//   COMMERCIABILITE ou DE CONFORMITE A UNE UTILISATION PARTICULIERE.
//   Voir la Licence Publique Générale GNU pour plus de détails.
//   Vous devriez avoir reçu un exemplaire de la Licence Publique Générale
//   GNU avec ce programme ; si ce n'est pas le cas, voyez http://www.gnu.org/licenses


//   This program is free software: you can redistribute it and/or modify
//   it under the terms of the GNU General Public License as published by
//   the Free Software Foundation, either version 3 of the License, or
//   (at your option) any later version.

//   This program is distributed in the hope that it will be useful,
//   but WITHOUT ANY WARRANTY; without even the implied warranty of
//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//   GNU General Public License for more details.

//   You should have received a copy of the GNU General Public License
//   along with this program.  If not, see http://www.gnu.org/licenses
//   GNU General Public License:  http://opensource.org/licenses/GPL-3.0


//********* Controller DCC++
//***** v 2.2 			- le 06/09/2016 à 19:03:00
//***** v 2.3 			- le 27/12/2016 à 09:38:00
//***** v 2.4 (release) - le 29/01/2017 à 01:23:00
//***** v 2.5 (release) - le 29/01/2017 à 09:15:00
//***** v 2.6 (release) - le 29/01/2017 à 13:56:00
// 				1° - Ajout d'une fenêtre de confirmation pour annuler la lecture de CV's en cas de problème.
//     			Message reçu de DCC++ Base Station de type "<r123|123|1 -1>" avec -1 en fin.
// 				2° - Arret de la loco si tentative de modifier la CV 1 (adresse) sur la voie principale alors
//      		que la vitesse est > 0.
//***** v 2.7 (release) - le 30/01/2017 à 12:29:00
// 				1° - Ajout de fonctionnalités concernant la gestion des CV's comme l'ajout automatique des noms et labels
// 				2° - Ajout du n° de version en haut de page
// 				3° - Ajout d'une zone rétractable de paramètrage en haut de page
// 				4° - Ajout d'options dans cette zone
//      			* Selection de l'adresse IP de l'Arduino supportant DCC++ Base Station par menu déroulant.
// 					* Choix du nombre de CV's à lire par menu déroulant.
//					* Ajout de plusieurs fonctions liées aux sauvegardes
// 				5° La zone "Noms pour les fonctions :" dans les paramètrages de foncions à été rendue rétractable
//***** v 2.8 (release) - le 02/02/2017 à 19:52:00
//				Ajout de "dccpp" dans les URL's des requêtes destinées à DCC++ Base Station pour être compatible
//***** v 2.8.1 (release) - le 04/02/2017 à 21:23:00
// 				Ajout d'un objet manufacturers contenant les informations relatives au fabricants de décodeurs
//				Ajout d'un objet cvLabels contenant les informations relatives aux labels des CV's
//				********  ATTENTION ******** Le fichier "data.json" a été renommé "locos.json"
//				et se touve maintenant placés dans le répertoire "config".
//***** v 2.8.2 à 2.8.5 (release) - le 21/02/2017 à 08:47:00
//				Nombreuses évolutions liées à la lecture des cv's et à leur programmation
//***** v 3.0 R1 BETA - le 22/02/2017 à 18:21:00 Version on-line démo
//***** v 3.0.1 R1 BETA - le 02/11/2017 à 10:02:00 Version desktop et serveur full
//***** v 4.0 R5 BETA (Version pour Node.js) - le 07/11/2017 à 08:10:00
//
//		Cette version permet de communiquer par TCP avec DCC++ via un serveur Node.js
//      Elle permet de piloter la carte Arduino (DCC++ BaseStation) via le port série ou ethernet.
//		Dans le première cas, les fonctions de lecture de CV's ne sont pas disponibles.
//      Configuration requise :
//      -  NodeJs : dccpp_node.js
//      -  Liaison série USB : Arduino Uno ou Mega
//      -  Liaison ethernet : Arduino Mega + shield ethernet
//      -  DCC++ BaseStation version originale DCCpp_Uno : https://github.com/DccPlusPlus/BaseStation
//		-  Arduino Motor Shield ou Pololu Dual MC33926 Motor Shield
//
//      Documentation DCC++ : https://github.com/DccPlusPlus/BaseStation/wiki/Getting-Started-With-DCC---Hardware
//
//***** v 4.1 (release) (Version pour Node.js) - le 22/11/2017 à 17:31:00
//      		Correction de bugs
//      		Ajout du Full Screen
//      		Version sm pour tablettes et smartphones
//      		Sauvegarde de paramétres sur disque via Node.js
//
//***** v 4.2 (release) (Version pour Node.js) - le 27/11/2017 à 19:32:00
//      		Correction de bugs sur serialPort
//      		Améliorations sur la version smartphone
//      		Affichage d'informations supplémentaires dans le terminal
//			
//*************************************************************************************************************************** 

-->				


<!doctype html>
<html ng-app="aiguilApp">
<head>
<link href="img/icon.jpg" rel="shortcut icon" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scripts de l'application -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript" src="./scripts/con_tco.js"></script>
<script src="../socket.io/socket.io.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/w3css/w3.css">
<link rel="stylesheet" href="./css/style.css">
<title>DCC++ Tco</title>
</head>

<body>
<div class="w3-container">
  <header>
    <div class="champ_header">v <span>{{ numVersion }}</span></div>
    <div class="champ_header">
      <button id="btn_power" type="button" ng-class="{'glyphicon glyphicon-off btn btn-default typoGreen': powerStatus == '0', 'glyphicon glyphicon-off btn btn-default typoRed': powerStatus == '1' }" title="Alimentation"></button> Power </div>
    <div class="champ_header"> Logs : <span class="typoRed">{{ responseServer }}</span>
      <div id="responseServer"></div>
    </div>
  </header>
  <!--header-->

  <div ng-controller="pilotAiguilCtrl">
    <form id="form2">
		<table>		
		  <tr>
			<td><img src="img/bd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag0_img" ng-src="{{ aiguillages[0].imgScr }}" class="picto" ng-click="aiguillages.changePosit('0')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/bd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag1_img" ng-src="{{ aiguillages[1].imgScr }}" class="picto" ng-click="aiguillages.changePosit('1')"></td>
			<td class="clickable"><img ng-id="ag2_img" ng-src="{{ aiguillages[2].imgScr }}" class="picto" ng-click="aiguillages.changePosit('2')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td class="clickable"><img src="img/bd.png" class="picto" ng-click="rotTables.changeLeft('0')"></td>
			<td class="clickable"><img ng-id="r0_img" ng-src="{{ rotTables[0].imgScr }}" class="picto" ng-click="rotTables.changeHalfTour('0')"></td>
			<td class="clickable"><img src="img/dh.png" class="picto" ng-click="rotTables.changeRight('0')"></td>
			<td class="clickable"><img ng-id="ag3_img" ng-src="{{ aiguillages[3].imgScr }}" class="picto" ng-click="aiguillages.changePosit('3')"></td>
			<td class="clickable"><img ng-id="ag4_img" ng-src="{{ aiguillages[4].imgScr }}" class="picto" ng-click="aiguillages.changePosit('4')"></td>
			<td class="clickable"><img ng-id="ag5_img" ng-src="{{ aiguillages[5].imgScr }}" class="picto" ng-click="aiguillages.changePosit('5')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag6_img" ng-src="{{ aiguillages[6].imgScr }}" class="picto" ng-click="aiguillages.changePosit('6')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag7_img" ng-src="{{ aiguillages[7].imgScr }}" class="picto" ng-click="aiguillages.changePosit('7')"></td>
			<td class="clickable"><img ng-id="ag8_img" ng-src="{{ aiguillages[8].imgScr }}" class="picto" ng-click="aiguillages.changePosit('8')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag9_img" ng-src="{{ aiguillages[9].imgScr }}" class="picto" ng-click="aiguillages.changePosit('9')"></td>
			<td><img src="img/hg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td class="clickable"><img src="img/empty.png" class="picto" ng-click="trTables.changeRight('0')"></td>
			<td>&nbsp;</td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/hg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td class="clickable"><img ng-id="t0_img" ng-src="{{ trTables[0].imgScr }}" class="picto" ></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/bd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img src="img/dh.png" class="picto" ng-click="trTables.changeLeft('0')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag11_img" ng-src="{{ aiguillages[11].imgScr }}" class="picto" ng-click="aiguillages.changePosit('11')"></td>
			<td><img src="img/xv.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag12_img" ng-src="{{ aiguillages[12].imgScr }}" class="picto" ng-click="aiguillages.changePosit('12')"></td>
			<td class="clickable"><img ng-id="ag13_img" ng-src="{{ aiguillages[13].imgScr }}" class="picto" ng-click="aiguillages.changePosit('13')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td><img src="img/hd.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag14_img" ng-src="{{ aiguillages[14].imgScr }}" class="picto" ng-click="aiguillages.changePosit('14')"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag15_img" ng-src="{{ aiguillages[15].imgScr }}" class="picto" ng-click="aiguillages.changePosit('15')"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td class="clickable"><img ng-id="ag16_img" ng-src="{{ aiguillages[16].imgScr }}" class="picto" ng-click="aiguillages.changePosit('16')"></td>
			<td class="clickable"><img ng-id="ag17_img" ng-src="{{ aiguillages[17].imgScr }}" class="picto" ng-click="aiguillages.changePosit('17')"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/bg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag18_img" ng-src="{{ aiguillages[18].imgScr }}" class="picto" ng-click="aiguillages.changePosit('18')"></td>
			<td><img src="img/hg.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/hd.png" class="picto"></td>
			<td class="clickable"><img ng-id="ag19_img" ng-src="{{ aiguillages[19].imgScr }}" class="picto" ng-click="aiguillages.changePosit('19')"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		   <td class="clickable"><img ng-id="ag20_img" ng-src="{{ aiguillages[20].imgScr }}" class="picto" ng-click="aiguillages.changePosit('20')"></td>
		   <td class="clickable"><img ng-id="ag21_img" ng-src="{{ aiguillages[21].imgScr }}" class="picto" ng-click="aiguillages.changePosit('21')"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td class="clickable"><img ng-id="ag22_img" ng-src="{{ aiguillages[22].imgScr }}" class="picto" ng-click="aiguillages.changePosit('22')"></td>
		   <td class="clickable"><img ng-id="ag23_img" ng-src="{{ aiguillages[23].imgScr }}" class="picto" ng-click="aiguillages.changePosit('23')"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/dv.png" class="picto"></td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/hg.png" class="picto"></td>
			<td><img src="img/dv.png" class="picto"></td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td><img src="img/hd.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/dh.png" class="picto"></td>
			<td><img src="img/hg.png" class="picto"></td>
		  </tr>
		</table>
	</form>
	</div>
  <!--ng-controller="pilotAiguilCtrl"--> 
</div>
<!--class="w3-container"-->
</body>
</html>