add WebClient

src/main/web/WebClient/css/btnOnOff.css

@@ -0,0 +1,143 @@
+*:after,
+*:before {
+  -webkit-box-sizing: 			border-box;
+  -moz-box-sizing: 				border-box;
+  box-sizing: 					border-box;
+  padding: 						0;
+  margin: 						0;
+}
+
+.btnOnOff + .lblOnOff {
+	font-family: 				Arial, Helvetica, sans-serif;
+	color: 						#757575;
+	font-size: 					14px;
+	margin: 					0 5px;
+}
+
+.lblOnOff {
+	width: 						90px;
+	height: 					30px;
+	display: 					inline-block;
+	margin-top: 				10px;
+	position: 					relative;		/* Important rule */
+	border-radius: 				14px;
+
+	line-height: 				30px;
+	font-style: normal;
+	color: #fff;
+	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
+	font-weight: bold;
+	
+	background-clip: 			padding-box;
+	-webkit-background-clip: 	padding-box;
+	-moz-background-clip: 		padding-box;
+	-ms-background-clip: 		padding-box;
+	
+	background: 				-webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
+	background: 				-moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
+	background: 				-o-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
+	background: 				-ms-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
+	background: 				linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
+	
+	box-shadow: 				inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+	-webkit-box-reflect: 		below 0px -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
+
+	-webkit-transition: 		all 1s ease-in;
+	-moz-transition: 			all 1s ease-in;
+	-o-transition: 				all 1s ease-in;
+	transition: 				all 1s ease-in;
+	
+	cursor: 					pointer;
+}
+
+.lblOnOff i {
+	position: absolute;
+	top: -4px;
+	right:60px;
+	width: 36px;
+	height: 36px;
+	display: block;
+	border-radius: 36px;
+	background: rgb(255,255,255);
+	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
+	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
+	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
+	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
+	background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 11%, rgba(228,228,228,1) 50%, rgba(221,221,221,1) 53%, rgba(205,205,205,1) 97%, rgba(191,191,191,1) 100%);
+	box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);
+	-webkit-transition: all 200ms ease;
+	-moz-transition: all 200ms ease;
+	-o-transition: all 200ms ease;
+	transition: all 200ms ease;
+}
+
+.lblOnOff i:before {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 18px;
+	height: 18px;
+	margin: -9px 0 0 -9px;
+	border-radius: 18px;
+	background: rgb(239,239,239);
+	background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
+	background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
+	background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
+	background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
+	background: linear-gradient(top, rgba(239,239,239,1) 0%, rgba(225,225,225,1) 6%, rgba(225,225,225,1) 24%, rgba(229,229,229,1) 94%, rgba(242,242,242,1) 100%);
+	box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
+}
+.lblOnOff:hover i {
+	box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.3);
+}
+.lblOnOff:active i:before {
+	box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+.lblOnOff:before  {
+	content: "off";
+	margin-left: 30px;
+	text-transform: uppercase;
+	-webkit-transition: all 200ms ease;
+	-moz-transition: all 200ms ease;
+	-o-transition: all 200ms ease;
+	transition: all 200ms ease;
+}
+.switch-man .lblOnOff:before {
+	content: "auto";
+}
+
+.btnOnOff:checked ~ label:before {
+	content: "on";
+	text-transform: uppercase;
+	margin-right: 30px;
+	margin-left: 0;
+}
+.switch-man .btnOnOff:checked ~ label:before {
+	content: "man";
+}
+
+
+.btnOnOff:checked ~ label {
+	background: rgb(141,173,51);
+	background: -webkit-radial-gradient(circle, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
+	background: -moz-radial-gradient(circle, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
+	background: -o-radial-gradient(circle, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
+	background: -ms-radial-gradient(circle, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
+	background: radial-gradient(circle, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
+}
+
+.btnOnOff:checked ~ label i {
+	right: -6px;
+}
+
+/* you can hide letter */
+.btnOnOff:before {
+	display:none;
+}
+
+.btnOnOff {
+	display:none;
+} 

src/main/web/WebClient/css/gauge.css

@@ -0,0 +1,48 @@
+/* ------------------- Default Style ------------------------- */
+
+.gauge-container {
+	margin: 				0 25px;
+	width: 					150px;
+	height: 				100px;
+	display: 				block;
+
+	padding: 				10px;
+	overflow: 				hidden;
+}
+.gauge-container.one > .gauge > .dial {
+	stroke: 				#334455;
+	stroke-width: 			2;
+}
+
+.gauge-container.one > .gauge > .value {
+	stroke: 				rgb(47, 227, 255);
+	stroke-width: 			2;
+}
+
+.gauge-container.one > .gauge > .value-text {
+	fill: 					rgb(47, 227, 255);
+	font-weight: 			bold;
+	font-size: 				11px;
+}
+
+/* ------------------- Alternate Style ------------------------- */
+
+.gauge-container.two {
+	height: 				auto;
+	border: 				1px solid rgba(255,255,255,0.1);
+}
+.gauge-container.two > .gauge > .dial {
+	stroke: 				#334455;
+	stroke-width: 			10;
+}
+.gauge-container.two > .gauge > .value {
+	/*stroke: orange;*/
+	stroke-dasharray: 		none;
+	stroke-width: 			13;
+}
+.gauge-container.two > .gauge > .value {
+	/*fill: orange;*/
+}
+
+
+/* ------------------- Alternate Style 2 ------------------------- */

src/main/web/WebClient/css/leds.css

@@ -0,0 +1,37 @@
+.leds-container {
+	padding: 				5px !important;
+}
+
+.led-box {
+	height: 				auto;
+	margin: 				0;
+	padding: 				5px !important;
+	border: 				none /*1px darkgray dotted*/;
+}
+
+.led-box .led {
+	margin: 				0 auto;
+	width: 					20px;
+	height: 				20px;
+	border-radius: 			50%;
+}
+
+.led-box .led-red {
+	background-color: 		#F00;
+	box-shadow: 			rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
+}
+
+.led-box .led-yellow {
+	background-color: 		#FF0;
+	box-shadow: 			rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px;
+}
+
+.led-box .led-green {
+	background-color: 		#ABFF00;
+	box-shadow: 			rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
+}
+
+.led-box .led-blue {
+	background-color: 		#24E0FF;
+	box-shadow: 			rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;
+}

src/main/web/WebClient/css/minecraft.css

@@ -0,0 +1,314 @@
+/* CSS Document */
+@font-face {
+    font-family:     	'candara';
+
+    src: 				url('fonts/candara-webfont.eot');
+    src: 				url('fonts/candara-webfont.eot?#iefix') format('embedded-opentype'),
+         				url('fonts/candara-webfont.woff') format('woff'),
+         				url('fonts/candara-webfont.ttf') format('truetype'),
+         				url('fonts/candara-webfont.svg#candararegular') format('svg');
+    font-weight: 		normal;
+/*    font-style: normal;*/
+}
+
+@font-face {
+	font-family:     	'Cambria';
+	src: 				url('fonts/Cambria.eot?') format('eot'),
+	     				url('fonts/Cambria.woff') format('woff'),
+	     				url('fonts/Cambria.ttf')  format('truetype'),
+	     				url('fonts/Cambria.svg#Cambria') format('svg');
+	font-weight: 		normal;
+	font-style: 		normal;
+}
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* ** Standatd HTML tag                                                                                  ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+body {
+	display:          	block;
+
+	font:             	100% Candara;
+
+	margin:           	0 auto;
+	padding:          	0;
+
+	text-align:       	center;
+	color:            	black;
+	
+	background-color: 	rgba(172,163,154,0.25);
+}
+
+a:link    { color:     	#0000ff; text-decoration: none; }		/* unvisited link */
+a:visited { color:     	#800080; text-decoration: overline; } 	/* visited link */
+
+p, ul, ol { 
+	margin:            	9px 0 3px 10px !important;
+	
+	font-size:         	14px;
+	font-weight:       	normal;
+	
+	line-height:        normal;
+	
+	text-align:        	justify;
+	text-transform:    	none;
+	text-decoration:   	none;
+}
+
+ul {
+	margin:            	0 !important;
+	padding:           	0;
+	background:        	white;
+}
+
+li {
+	display:           	block;
+	margin:            	0;
+	border-left:       	#ccc 1px solid;
+	border-bottom:     	#ccc 1px solid;
+	border-right:      	#ccc 1px solid;
+}
+
+li a { 
+	display:           	block;
+	text-decoration:   	none !important;
+	color:             	#000000 !important;
+	padding:           	6px 15px !important;
+}
+
+li a:hover {
+	background-color:  	#4B0A1E !important;
+	color:             	#BA8A92 !important;
+	padding:           	6px 15px !important;
+}
+
+button, input[type=button]  {
+	padding:           	5px 25px;
+
+	border:            	#666 1px solid;
+	background:        	#888;
+	color:             	white;
+	
+        border-radius: 	4px;
+   -moz-border-radius: 	4px;
+-webkit-border-radius: 	4px;
+
+           box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+      -moz-box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+   -webkit-box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+}
+
+input[type=text] {
+	margin:            	5px 0;
+	padding:           	5px;
+	width:             	200px !important;
+	outline:           	none;
+
+	border:            	1px solid #ccc;
+
+        border-radius: 	4px;
+   -moz-border-radius: 	4px;
+-webkit-border-radius: 	4px;
+
+           box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+      -moz-box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+   -webkit-box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+}
+
+label {
+	display:           	block;
+	margin:            	5px 0 0 0;
+}
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* ** Main                                                                                               ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+.minecraft #main {
+	display:           	block;
+
+	margin:            	10px auto;
+	padding:           	10px 15px 5px 15px;
+	
+	min-width:         	640px;
+	max-width:         	1024px;
+	
+	line-height:       	normal;
+	text-align:        	center;
+	
+	overflow:          	hidden;
+	background:        	white;
+ 	border:            	none;
+	
+        border-radius: 	15px;
+   -moz-border-radius: 	15px;
+-webkit-border-radius: 	15px;
+
+           box-shadow: 	0 0 35px rgba(0,0,0,0.25);
+      -moz-box-shadow: 	0 0 35px rgba(0,0,0,0.25);
+   -webkit-box-shadow: 	0 0 35px rgba(0,0,0,0.25);
+}
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* ** Header & Footer                                                                                    ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+.minecraft header {
+	background:        	url(img/logo/HEI.png) top right no-repeat;
+	height:            	100px !important;
+	margin:            	auto 0;
+}
+
+.minecraft footer {
+	background:        	url(img/logo/picto.svg) left top no-repeat, url(img/logo/vsExcel.svg) right top no-repeat;
+	height:            	30px !important;
+	margin:            	10px 0;
+	
+	color: 				#cecece;
+	font-size:         	12px;
+	text-align:        	center;
+	line-height:       	3px;
+
+}
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* ** Content                                                                                            ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+.minecraft #content {
+	clear:             	both;
+	display:           	block;
+	
+	margin:            	10px auto;
+	padding:           	0;
+	
+	border:            	none;
+	min-height:        	300px !important;
+}
+
+.minecraft #ezhmiContent {
+	display:           	block;
+	margin:            	10px auto !important;
+	padding:           	10px;
+	overflow:          	hidden;
+	
+/*	background-color: 	rgba(172,163,154,0.25);*/
+	background:        	transparent;
+
+	border:            	rgba(187, 187, 187, 0.5) 2px solid;
+        border-radius: 	15px;
+   -moz-border-radius: 	15px;
+-webkit-border-radius: 	15px;
+
+           box-shadow: 	inset 0 0 10px rgba(0,0,0,0.25);
+      -moz-box-shadow: 	inset 0 0 10px rgba(0,0,0,0.25);
+   -webkit-box-shadow: 	inset 0 0 10px rgba(0,0,0,0.25);
+}
+
+.minecraft #searchKey {
+	width:             	200px;
+}
+
+
+.minecraft div.modbus {
+	display: 			flex;
+	flex-flow: 			row nowrap;
+	width: 				100% !important;
+	
+	justify-content: 	center !important;
+	align-items: 		baseline;
+	border:				none /*1px darkblue dashed*/;
+}
+
+
+.minecraft div.modbus div.label {
+	width:				150px !important;
+	margin:				0 5px;
+	border: 			none /*1px darkgreen dotted*/;
+}
+
+.minecraft div.modbus div.value {
+	width:				210px !important;
+	margin:				0 5px;
+	border: 			none /*1px darkgreen dotted*/;
+}
+
+.minecraft div.energy {
+	display: 			inline-block;
+	margin: 			0 auto !important;
+	padding: 			0 10px;
+	height: 			auto !important;
+	border: 			none /*darkred 1px dashed*/;
+	vertical-align: 	bottom !important;
+	align-content: 		center;
+}
+
+.minecraft div.energy img.energy {
+	height:             100px !important;
+	margin:             5px;
+	border: 			none /*darkgreen 1px dashed*/;
+}
+
+.minecraft div.energy input {
+	margin: 			0 auto !important;
+	padding: 			0 10px;
+	height: 			auto !important;
+	border: 			none /*red 1px dashed*/;
+	align-content: 		center;
+}
+
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* **	Gestion des contenus                                                                             ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+.minecraft div.left {
+	float:             left;
+	width:             160px !important;
+	height:            100%;
+}
+
+.minecraft td.left {
+	width:             160px !important;
+	height:            100%;
+}
+
+.minecraft div.center {
+	align-content: 		center !important;
+	margin: 			0 auto !important;
+	border: 			none;
+	display: 			block;
+	overflow: 			hidden;
+	height: 			auto;
+	width: 				100% !important;
+}
+
+.minecraft div.energy .last {
+	display: 			block;
+}
+
+.minecraft div.energy .first {
+	margin-left: 		250px;
+}
+
+.minecraft div.coils {
+	display: 			block;
+	height: 			auto !important;
+	width: 				100%;
+	border: 			gray 1px solid;
+}
+
+

src/main/web/WebClient/css/popup.css

@@ -0,0 +1,34 @@
+div#manualSwitch {
+	border:				2px #555 solid;
+	border-radius: 		10px;
+	
+	width:				auto !important;
+	height: 			auto !important;
+	font-size: 			8px;
+	padding: 			5px 20px;
+	
+	position: 			absolute;
+	top:				50%;
+	left: 				50px;
+	
+	background: 		-webkit-linear-gradient(#555 0%, #1e1e1e 100%);
+	background: 		-moz-linear-gradient(#555 0%, #1e1e1e 100%);
+	background: 		-o-linear-gradient(#555 0%, #1e1e1e 100%);
+	background: 		-ms-linear-gradient(#555 0%, #1e1e1e 100%);
+	background: 		linear-gradient(#555 0%, #1e1e1e 100%);
+/*
+	background: 		-webkit-linear-gradient(#ddd 0%, #fff 100%);
+	background: 		-moz-linear-gradient(#ddd 0%, #fff 100%);
+	background: 		-o-linear-gradient(#ddd 0%, #fff 100%);
+	background: 		-ms-linear-gradient(#ccc 0%, #fff 100%);
+	background: 		linear-gradient(#ddd 0%, #fff 100%);
+*/
+    box-shadow: 		0 0 50px rgba(0,0,0,0.35);
+	-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.35);
+    -moz-box-shadow: 	0 0 50px rgba(0,0,0,0.35);
+	
+	display: 			flex;
+	flex-flow: 			row nowrap;
+	align-content: 		center;
+	align-items: 		center;
+}

src/main/web/WebClient/css/prettify.css

@@ -0,0 +1,136 @@
+.btnSlider {
+    font-size: 					14px;
+    margin: 					0 5px;
+}
+
+.btnSlider ~ label:before {
+    content: 					var(--val);
+    position: 					relative;
+    width: 						100%;
+}
+
+input[type='range'] {
+    -webkit-appearance: 		none;
+    --val: 						0;
+    --pos: 						calc(1em + .01*var(--val)*(100% - 2em));
+    margin: 					0;
+    width: 						100px;
+
+    background: 				linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%) /*none*/;
+    cursor: 					pointer;
+}
+
+input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb, input[type='range'] {
+    -webkit-appearance: 		none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+    border: 					none;
+    display: 					inline-block;
+    margin-bottom: 				-4px;
+    position: 					relative;
+    border-radius: 				14px;
+    height:						30px;
+
+	
+    background: 				#a5a5a5;
+	-webkit-background-clip: 	padding-box;
+    -webkit-background-origin:	padding-box;
+/*    -webkit-background-image: 	-webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);*/
+	background: 				linear-gradient(top, rgb(138,138,138) 0%, rgb(140,140,140) 14%, rgb(159,159,159) 72%, rgb(164,164,164) 100%);
+    box-shadow: 				inset 0 5px 10px 0 rgba(0, 0, 0, 0.2), inset 0 -2px 5px 0 rgba(255, 255, 255, 0.2);
+
+    -webkit-box-reflect: 		below 0 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
+    -webkit-transition: 		all 0.5s ease-in;
+    transition: 				all 0.5s ease-in;
+    cursor: 					pointer;
+}
+
+
+.js input[type='range']::-webkit-slider-runnable-track {
+    background-image: 			-webkit-linear-gradient(#8DAD33, #BDDD36);
+    background-repeat: 			no-repeat;
+    background-size: 			var(--pos);
+}
+
+input[type='range']::-webkit-slider-thumb {
+    -webkit-box-sizing: 		border-box;
+
+    border: 					solid 0.5em transparent;
+    padding: 					0;
+    margin: 					0;
+    width: 						32px;
+    height: 					32px;
+    border-radius: 				50%;
+    box-shadow: 				0 2px 5px rgba(0, 0, 0, 0.35), 0 0 1px 1px #a0a0a0, inset 0 1px 2px #b0b0b0;
+/*	box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);*/
+    
+    background: 				-webkit-linear-gradient(#f9f9f9, #e6e6e6) padding-box, 
+    							radial-gradient(circle at 50% calc(50% + 1px), #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) calc(0.5em + 2px)) border-box, 
+    							-webkit-linear-gradient(#f9f9f9, #e6e6e6) border-box;
+
+    cursor: 					ew-resize;
+}
+
+input[type='range']::-moz-range-track, input[type='range']::-moz-range-thumb, input[type='range'] {
+    -moz-appearance: 			none;
+}
+
+input[type='range']::-moz-range-track {
+    border: 					none;
+    height: 					30px;
+    display: 					inline-block;
+    margin-bottom: 				-9px;
+    position: 					relative;
+    border-radius: 				14px;
+    
+    line-height: 				normal;
+    font-style: 				normal;
+    color: 						#fff;
+    text-shadow: 				0 1px 1px rgba(0,0,0,0.1);
+    font-weight: 				bold;
+    
+    -moz-background-clip: 		padding;
+    background-clip: 			padding-box;
+    background: 				#a4a4a4;
+    background: 	 			-moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
+    
+    box-shadow: 				inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+    -moz-transition: 			all 0.5s ease-in;
+    transition: 				all 0.5s ease-in;
+    cursor: 					pointer;
+}
+
+.js input[type='range']::-moz-range-track {
+    background-image: 			-moz-linear-gradient(#8DAD33, #BDDD36);
+    background-image: 			linear-gradient(#8DAD33, #BDDD36);
+    background-repeat: 			no-repeat;
+    background-size: 			var(--pos);
+}
+
+input[type='range']::-moz-range-progress {
+}
+
+input[type='range']::-moz-range-thumb {
+    -moz-box-sizing: 			border-box;
+    border: 					solid 0.5em transparent;
+    padding: 					0;
+    margin: 					0;
+    width: 						32px;
+    height: 					32px;
+    border-radius: 				50%;
+    box-shadow:	 				0 2px 5px rgba(0, 0, 0, 0.35), 0 0 1px 1px #a0a0a0, inset 0 1px 2px #b0b0b0;
+    background: 				-moz-linear-gradient(#f9f9f9, #e6e6e6) padding-box,
+                				-moz-radial-gradient(circle at 50% calc(50% + 1px), #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) calc(0.5em + 2px)) border-box,
+								-moz-linear-gradient(#f9f9f9, #e6e6e6) border-box;
+    cursor: 					ew-resize;
+}
+
+input[type='range']::-ms-track {
+}
+
+input[type='range']::-ms-fill-lower {
+}
+input[type='range']::-ms-thumb {
+}
+

src/main/web/WebClient/css/reset.css

@@ -0,0 +1,89 @@
+/* CSS Document */
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* **  RESET - RESET - RESET - RESET - RESET - RESET - RESET - RESET - RESET - RESET - RESET - RESET     ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
+address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
+b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, 
+tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, 
+output, ruby, section, summary, time, mark, audio, video { 
+	                  padding: 0;
+	                   margin: 0;
+	                   border: 0;
+                    font-size: 100%;
+               vertical-align: baseline;
+                   background: transparent; 
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	                  display: block;
+}
+
+body        {     line-height: 1; }
+ol, ul      {      list-style: none; }
+blockquote, q {        quotes: none; }
+blockquote:before, blockquote:after, 
+q:before, q:after {   content: none; }
+:focus      {         outline: none; }
+ins         { text-decoration: none; }
+del         { text-decoration: line-through; }
+table       { border-collapse: collapse; border-spacing: 0; }
+div         {         display: block; float: none; }
+
+
+
+/* ******************************************************************************************************** */ 
+/* **                                       HREF Design                                                  ** */
+/* ******************************************************************************************************** */ 
+a[href^="http://"] {
+	               background: none;
+	                    color: #0000ff;
+	                  padding: 0;
+	                   margin: 0;
+	           vertical-align: top;
+	                   border: none;
+}
+
+a[href^="http://www.facebook.com"] {
+	               background: url(img/link/facebook.png) center left no-repeat;
+	                  padding: 5px 0 5px 25px;
+
+	              font-weight: bold;
+	                    color: #562e18;
+	          text-decoration: none;
+}
+
+a[href^="mailto:"] {
+	               background: url(img/link/email.png) no-repeat left center;
+	                  padding: 5px 0 5px 25px;
+
+	              font-weight: bold;
+	                    color: #562e18;
+	          text-decoration: none;
+}
+
+a[href$=".zip"] {
+	               background: url(img/link/zip.png) center left no-repeat;
+	                  padding: 4px 0 4px 20px;
+
+	              font-weight: bold;
+}
+
+a[href$=".pdf"] {
+	               background: url(img/link/pdf.png) center left no-repeat;
+	                  padding: 4px 0 4px 20px;
+
+	              font-weight: bold;
+	               text-align: left;
+}
+
+a[href$=".txt"] {
+	               background: url(img/link/txt.png) center left no-repeat;
+	                  padding: 4px 0 4px 20px;
+
+	              font-weight: bold;
+}

src/main/web/WebClient/css/style.css

@@ -0,0 +1,241 @@
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* **	Gestion des cadres flottants                                                                     ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+/* FLOAT positioning */
+.fLeft  { float: left  !important; }
+.fRight { float: right !important; }
+.fNone  { float: none  !important; }
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* **	Gestion des encadrements                                                                         ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+/* ******************************************************************************************************** */ 
+/* the "framed"	                                                                                         ** */
+/* ******************************************************************************************************** */ 
+.minecraft .framed, .minecraft .noFramed {
+	margin:            	10px !important;
+	padding:           	0 !important;
+	overflow:          	hidden;
+}
+
+.minecraft .framed {
+	border:            	#777777 1px solid;
+
+        border-radius: 	5px;
+   -moz-border-radius: 	5px;
+-webkit-border-radius: 	5px;
+
+           box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+      -moz-box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+   -webkit-box-shadow: 	0 0 5px rgba(0,0,0,0.25);
+
+    background:        	none;
+}
+
+.minecraft .noTitle { background: none !important; }
+
+.minecraft .floating {
+	display: 			inline-block !important;
+	padding: 			0;
+	margin: 			0 !important;
+	width: 				44% !important;
+	border:				none /*lightGray 1px solid*/;
+/*	 	 width: auto; */
+}
+.minecraft .txtRight {
+	padding: 			5px;
+	text-align: 		right !important;
+}
+
+.minecraft .txtLeft {
+	padding: 			5px;
+	text-align: 		left !important;
+}
+
+.minecraft .txtCenter {
+	padding: 			5px;
+	text-align: 		center !important;
+}
+
+.minecraft .invisible {
+	visibility: 		hidden !important;
+}
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* **	Gestion des classes de Titre                                                                     ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+/* ******************************************************************************************************** */ 
+/* **	Definition de la police de caract<63>re (font property)                                               ** */ 
+/* ******************************************************************************************************** */ 
+.minecraft h1, .minecraft h2, .minecraft h3, .minecraft h4, .minecraft h5, .minecraft h6 {
+	font-family:       	Cambria, Verdana, Arial, Helvetica, sans-serif;
+	font-weight:       	bold;
+	font-style:        	normal;
+}
+
+/* ******************************************************************************************************** */ 
+/* **	Alignement et style (text property)	                                                             ** */ 
+/* ******************************************************************************************************** */ 
+.minecraft h1, .minecraft h3, .minecraft h5 {
+	text-align:        	Left;
+	text-transform:    	none;
+	text-decoration:   	none;
+	color:             	#666;
+}
+
+.minecraft h2, .minecraft h4, .minecraft h6 {
+	text-align:        	Left;
+	text-transform:    	none;
+	text-decoration:   	none;
+	color:             	#069;
+}
+
+/* ******************************************************************************************************** */ 
+/* **	Text shadow				                                                                         ** */ 
+/* ******************************************************************************************************** */ 
+.minecraft h1 { text-shadow: 3px 3px 9px rgba(102,102,102,0.35) !important; }
+.minecraft h2 { text-shadow: 2px 2px 5px rgba(  0,  0,  0,0.20) !important; }
+.minecraft h3 { text-shadow: 1px 1px 3px rgba(102,102,102,0.35) !important; }
+.minecraft h4 { text-shadow: 1px 1px 2px rgba(  0,  0,  0,0.20) !important; }
+.minecraft h5 { text-shadow: 1px 1px 1px rgba(102,102,102,0.35) !important; }
+.minecraft h6 { text-shadow: 1px 1px 1px rgba(  0,  0,  0,0.20) !important; }
+
+/* ******************************************************************************************************** */ 
+/* **	Dimension (Size)                                                                                 ** */ 
+/* ******************************************************************************************************** */ 
+.minecraft h1 { font-size: 36px; line-height: normal !important; margin: auto 10px           !important; padding: 0 !important; }
+.minecraft h2 { font-size: 24px; line-height: 24px   !important; margin: 35px 10px 10px 10px !important; }
+.minecraft h3 { font-size: 18px; line-height: 18px   !important; margin: 25px 10px 10px 10px !important; }
+.minecraft h4 { font-size: 16px; line-height: 16px   !important; margin: 15px 10px 10px 10px !important; }
+.minecraft h5 { font-size: 14px; line-height: 14px   !important; margin: 10px 10px 10px 10px !important; }
+.minecraft h6 { font-size: 14px; line-height: 14px   !important; margin:  8px 10px 10px 10px !important; }
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* **	generic Classes                                                                                  ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+.minecraft, .minecraft .normal { 
+	font-size:         14px;
+	font-weight:       normal;
+	
+	line-height:       normal;
+	
+	text-align:        justify; 
+	text-transform:    none; 
+	text-decoration:   none; 
+}
+
+.minecraft .header {
+	padding:           5px 0 0 0;
+}
+
+.minecraft .leftArea {
+	float:             left;
+	margin:            10px !important;
+/*	width:             45% !important;
+*/	border-top:        #ccc 1px solid;
+	border-right:      #ccc 1px solid;
+}
+
+.minecraft .mainArea {
+	float:             left;
+	margin:            10px !important;
+	width:             auto !important;
+}
+
+.minecraft .rightArea {
+	float:             left;
+	margin:            10px !important;
+/*	width:             45% !important;
+*/	border-top:        #ccc 1px solid;
+}
+
+.minecraft .example {
+	color:             #666;
+	font-family:       sans-serif;
+	font-style:        italic;
+	text-align:        left;
+	margin:            0 0 3px 50px !important;
+}
+
+.minecraft .image {
+	float:             none;
+	margin:            5px         !important;
+	text-align:        center;
+}
+
+.minecraft .button {
+	margin:            20px auto;
+	text-align:        center;
+}
+
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* ** Alignement's Classes                                                                               ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+
+.minecraft .middle {
+	vertical-align:    middle       !important;
+}
+
+.minecraft .top {
+	vertical-align:    text-top     !important;
+}
+
+.minecraft .bot {
+	vertical-align:    text-bottom  !important;
+}
+
+.minecraft .center {
+	text-align:        center       !important;
+}
+
+
+/* ******************************************************************************************************** */ 
+/* **                                                                                                    ** */ 
+/* ** Color's Classes                                                                                    ** */ 
+/* **                                                                                                    ** */ 
+/* ******************************************************************************************************** */ 
+.minecraft .gray {
+	color:				#aaa;
+}
+
+.minecraft .darkGray {
+	color:				#888;
+}
+
+.minecraft .anthracit {
+	color:				#555;
+}
+
+.minecraft .red {
+	color:				red;
+}
+
+.minecraft .darkRed {
+	color:				darkRed;
+}
+
+
+.minecraft div.energy.switch-man {
+	margin: 0 0 0 auto !important;
+	display: block;
+	width: max-content;
+}

src/main/web/WebClient/css/switch.css

@@ -0,0 +1,374 @@
+
+.switch {
+	display: inline-block;
+	margin: 10em 2em;
+	position: relative;
+	border-radius: 3.5em;
+	-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
+	-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
+	box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
+}
+
+.switch label {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 10;
+}
+
+.switch input {
+	display: none;
+}
+
+.switch span {
+	display: block;
+	-webkit-transition: top 0.2s;
+	-moz-transition: top 0.2s;
+	-ms-transition: top 0.2s;
+	-o-transition: top 0.2s;
+	transition: top 0.2s;
+}
+
+.switch-border1 {
+	border: 0.1em solid #000;
+	border-radius: 3.5em;
+	-webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
+	-moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
+	box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
+}
+
+.switch-border2 {
+	width: 6.6em;
+	height: 12.6em;
+	position: relative;
+	border: 0.1em solid #323232;
+	background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
+	background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
+	border-radius: 3.4em;
+}
+
+.switch-border2:before,
+.switch-border2:after {
+	content: '';
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 0;
+	opacity: .3;
+	border-radius: 3.4em;
+}
+
+.switch-border2:before {
+	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
+	background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
+	background: -moz-linear-gradient(#000, rgba(0,0,0,0));
+	background: -ms-linear-gradient(#000, rgba(0,0,0,0));
+	background: -o-linear-gradient(#000, rgba(0,0,0,0));
+	background: linear-gradient(#000, rgba(0,0,0,0));
+}
+
+.switch-border2:after {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
+	background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
+	background: -moz-linear-gradient(rgba(0,0,0,0), #000);
+	background: -ms-linear-gradient(rgba(0,0,0,0), #000);
+	background: -o-linear-gradient(rgba(0,0,0,0), #000);
+	background: linear-gradient(rgba(0,0,0,0), #000);
+}
+
+.switch-top {
+	width: 100%;
+	height: 84%;
+	position: absolute;
+	top: 8%;
+	left: 0;
+	z-index: 1;
+	background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
+	background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
+	background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
+	border-radius: 3.4em;
+}
+
+.switch-shadow {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2;
+	border-radius: 3.4em;
+	-webkit-box-shadow: 0 0 2em black inset;
+	-moz-box-shadow: 0 0 2em black inset;
+	box-shadow: 0 0 2em black inset;
+}
+
+.switch-handle-left,
+.switch-handle-right {
+	content: '';
+	display: block;
+	width: 3.6em;
+	height: 0;
+	position: absolute;
+	top: 6.6em;
+	z-index: 2;
+	border-bottom: 4.5em solid #111;
+	border-left: 0.7em solid transparent;
+	border-right: 0.7em solid transparent;
+	border-radius: 0;
+}
+
+.switch-handle-left {
+	left: 0.8em;
+}
+
+.switch-handle-right {
+	right: 0.8em;
+}
+
+.switch-handle {
+	width: 3.6em;
+	height: 4.5em;
+	position: absolute;
+	top: 6.6em;
+	left: 1.5em;
+	z-index: 3;
+	background: #333;
+	background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
+	background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
+	border-radius: 0;
+}
+
+.switch-handle-top {
+	width: 5em;
+	height: 5em;
+	position: absolute;
+	top: 8.5em;
+	left: 0.8em;
+	z-index: 4;
+	background-color: #555;
+	background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
+	background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
+	background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
+	background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
+	background-image: -o-linear-gradient(left, #5F5F5F, #878787);
+	background-image: linear-gradient(to right, #5F5F5F, #878787);
+	border-top: 0.2em solid #AEB2B3;
+	border-radius: 2.5em;
+}
+
+.switch-handle-bottom {
+	width: 3.6em;
+	height: 3.6em;
+	position: absolute;
+	top: 4.7em;
+	left: 1.5em;
+	z-index: 3;
+	background: #333;
+	background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
+	background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
+	background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
+	border-top: 0.2em solid #141414;
+	border-radius: 1.8em;
+}
+
+.switch-handle-base {
+	width: 4.2em;
+	height: 4.2em;
+	position: absolute;
+	top: 3.8em;
+	left: 1.2em;
+	z-index: 2;
+	border-top: 0.2em solid rgba(255,255,255,0.35);
+	border-radius: 2.1em;
+	-webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
+	-moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
+	box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
+}
+
+.switch-led {
+	position: absolute;
+	left: 2em;
+	border-radius: 1.4em;
+}
+
+.switch-led-border {
+	border: 0.2em solid black;
+	border-radius: 1.3em;
+}
+
+.switch-led-light {
+	border-radius: 1.1em;
+	-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
+	-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
+	box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
+}
+
+.switch-led-glow {
+	width: 2em;
+	height: 2em;
+	position: relative;
+	border-radius: 1em;
+}
+
+.switch-led-glow:before {
+	content: '';
+	display: block;
+	width: 0.6em;
+	height: 0.6em;
+	position: absolute;
+	top: 0.3em;
+	left: 0.7em;
+	background: rgba(255,255,255,0.2);
+	border-radius: 0.3em;
+	-webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
+	-moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
+	box-shadow: 0 0 1em rgba(255,255,255,0.75);
+}
+
+.switch-led-glow:after {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0.2;
+	filter: alpha(opacity=20);
+	border: 1em solid #fff;
+	border-color: transparent #fff transparent #fff;
+	border-radius: 1em;
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+
+.switch-led:after {
+	display: block;
+	width: 100%;
+	position: absolute;
+	left: 0;
+	color: #666;
+	font-family: arial, verdana, sans-serif;
+	font-weight: bold;
+	text-align: center;
+	text-shadow: 0 0.1em rgba(0,0,0,0.7);
+}
+
+.switch-led-green:after {
+	content: 'ON';
+	top: -1.8em;
+}
+
+.switch-led-red:after {
+	content: 'OFF';
+	bottom: -1.8em;
+}
+
+.switch-led-green {
+	top: -5em;
+	border-top: 0.1em solid rgba(0,161,75,0.5);
+	border-bottom: 0.1em solid rgba(255,255,255,0.25);
+}
+
+.switch-led-green .switch-led-light {
+	background: rgb(0,161,75);
+	border: 0.1em solid rgb(0,104,56);
+}
+
+.switch-led-red {
+	bottom: -5em;
+	border-top: 0.1em solid rgba(237,28,36,0.2);
+	border-bottom: 0.1em solid rgba(255,255,255,0.25);
+	-webkit-box-shadow: 0 0 3em rgb(237,28,36);
+	-moz-box-shadow: 0 0 3em rgb(237,28,36);
+	box-shadow: 0 0 3em rgb(237,28,36);
+}
+
+.switch-led-red .switch-led-light {
+	background: rgb(237,28,36);
+	border: 0.1em solid rgb(161,30,45);
+}
+
+.switch-led-red .switch-led-glow {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.3);
+	filter: alpha(opacity=30);
+}
+
+/* Switch on */
+
+.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
+	top: 1.5em;
+	border-bottom: 0;
+	border-top: 4.5em solid #111;
+}
+
+.switch input:checked~.switch-handle {
+	top: 1.5em;
+}
+
+.switch input:checked~.switch-handle-top  {
+	top: -1em;
+	border-top: 0;
+	border-bottom: 0.2em solid #AEB2B3;
+}
+
+.switch input:checked~.switch-handle-bottom {
+	top: 4.2em;
+	border-top: 0;
+	border-bottom: 0.2em solid #141414;
+}
+
+.switch input:checked~.switch-handle-base {
+	top: 4.5em;
+	border-top: 0;
+	border-bottom: 0.2em solid rgba(255,255,255,0.35);
+}
+
+.switch input:checked~.switch-led-green {
+	-webkit-box-shadow: 0 0 3em rgb(0,161,75);
+	-moz-box-shadow: 0 0 3em rgb(0,161,75);
+	box-shadow: 0 0 3em rgb(0,161,75);
+}
+
+.switch input:checked~.switch-led-green .switch-led-glow {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.4);
+	filter: alpha(opacity=40);
+}
+
+.switch input:checked~.switch-led-red {
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+}
+
+.switch input:checked~.switch-led-red .switch-led-glow {
+	background: rgba(255, 255, 255, 0);
+	filter: alpha(opacity=0);
+}

src/main/web/WebClient/index.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Hes-so Valais//Wallis - EA WebSocket Client</title>
+	<link rel="shortcut icon" href="favicon.ico"/>
+	<link rel="icon" type="image/png" href="images/favicon.png"/>
+	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
+	<link rel="stylesheet" type="text/css" href="css/style.css"/>
+	<link rel="stylesheet" type="text/css" href="css/minecraft.css"/>
+	<link rel="stylesheet" type="text/css" href="css/btnOnOff.css"/>
+	<link rel="stylesheet" type="text/css" href="css/prettify.css"/>
+	<link rel="stylesheet" type="text/css" href="css/leds.css"/>
+	<link rel="stylesheet" type="text/css" href="css/gauge.css"/>
+	<link rel="stylesheet" type="text/css" href="css/switch.css"/>
+	<link rel="stylesheet" type="text/css" href="css/popup.css"/>
+	
+	<script type="text/javascript" src="js/ezhmiWebSocket.js"></script>
+	<script type="text/javascript">
+		window.addEventListener("load", connect, false);
+
+		document.documentElement.classList.add('js');
+		addEventListener('input', e => {
+			let _t = e.target;
+			_t.style.setProperty('--val', + (_t.value * 1.15));
+		}, false);
+		
+	</script>
+</head>
+<body class="minecraft">
+
+	<div id="main">
+		
+		<!-- Header -->
+		<header class="bot"><h1 style="padding-top: 20px !important;">WebSocket Client 231_SIn</h1></header>
+		
+		<!-- Content -->
+		<div id="content">
+			<h2 class="center">WebSocket Client</h2>
+			<h3 class="center">Minecraft Monitoring</h3>
+			
+			<!-- EZHMI content -->
+			<div id="ezhmiContent">
+				
+				<!-- webSocket message -->
+				<div>
+					<label class="darkGray floating txtRight">WebSocket Messages: </label>
+					<label class="floating txtLeft" id="wsMessage">WebSocket messages will go here...</label>
+				</div>
+				<div class="energy switch-man">
+					<input class="btnOnOff"  id="REMOTE_MAN_SW" type="checkbox" onclick="toggleSwitch(this);"/>
+					<label class="lblOnOff" for="REMOTE_MAN_SW"><i/></label>
+				</div>
+				<h4 class="txtCenter">Input Registers</h4>
+				<div class="modbus">
+					<div class="label darkGray txtRight">SOLAR_P_FLOAT</div>
+					<div class="value"><input class="txtLeft"  type="text" id="SOLAR_P_FLOAT" value="" disabled=""/></div>
+					<div class="value"><input class="txtRight" type="text" id="WIND_P_FLOAT" value="" disabled/></div>
+					<div class="label darkGray txtLeft">WIND_P_FLOAT</div>
+				</div>
+				<div class="modbus">
+					<div class="label darkGray txtRight">COAL_P_FLOAT</div>
+					<div class="value"><input class="txtLeft"  type="text" id="COAL_P_FLOAT" value="" disabled=""/></div>
+					<div class="value"><input class="txtRight" type="text" id="COAL_AMOUNT" value="" disabled/></div>
+					<div class="label darkGray txtLeft">COAL_AMOUNT</div>
+				</div>
+				<div class="modbus">
+					<div class="label darkGray txtRight">BATT_CHRG_FLOAT</div>
+					<div class="value"><input class="txtLeft"  type="text" id="BATT_CHRG_FLOAT" value="" disabled/></div>
+					<div class="value"><input class="txtRight" type="text" id="BATT_P_FLOAT" value="" disabled/></div>
+					<div class="label darkGray txtLeft">BATT_P_FLOAT</div>
+				</div>
+				<div class="modbus">
+					<div class="label darkGray txtRight">GRID_U_FLOAT</div>
+					<div class="value"><input class="txtLeft"  type="text" id="GRID_U_FLOAT" value="" disabled/></div>
+					<div class="value"><input class="invisible" type="text" value="" disabled/></div>
+					<div class="label darkGray txtLeft">&nbsp;</div>
+				</div>
+				<div class="modbus">
+					<div class="label darkGray txtRight">HOME_P_FLOAT</div>
+					<div class="value"><input class="txtLeft"  type="text" id="HOME_P_FLOAT" value="" disabled/></div>
+					<div class="value"><input class="txtRight" type="text" id="PUBLIC_P_FLOAT" value="" disabled/></div>
+					<div class="label darkGray txtLeft">PUBLIC_P_FLOAT</div>
+				</div>
+				<div class="modbus">
+					<div class="label darkGray txtRight">FACTORY_P_FLOAT</div>
+					<div class="value"><input class="txtLeft"  type="text" id="FACTORY_P_FLOAT" value="" disabled/></div>
+					<div class="value"><input class="txtRight" type="text" id="BUNKER_P_FLOAT" value="" disabled/></div>
+					<div class="label darkGray txtLeft">BUNKER_P_FLOAT</div>
+				</div>
+				
+				<h4 class="txtCenter">Coils &amp; Holding Registers</h4>
+				<div class="modbus" style="align-items: center !important;">
+					<div class="label darkGray txtRight">COAL_ST</div>
+					<div id="COAL_ST" class="gauge-container two"></div>
+					<div id="FACTORY_ST" class="gauge-container two"></div>
+					<div class="label darkGray txtLeft">FACTORY_ST</div>
+				</div>
+				
+				<div class="modbus" style="align-items: center !important;">
+					<div class="label darkGray txtRight">SOLAR_CONNECT_ST</div>
+					<div class="value"><div class="led-box"><div id="SOLAR_CONNECT_ST" class="led led-yellow"></div></div></div>
+					<div class="value"><div class="led-box"><div id="WIND_CONNECT_ST" class="led led-yellow"></div></div></div>
+					<div class="label darkGray txtLeft">WIND_CONNECT_ST</div>
+				</div>
+				<div style="margin: 0 auto !important;">
+					<div class="energy">
+						<img   class="energy" src="images/ea/solarPanel.png"/><br/>
+						<input class="btnOnOff"  id="REMOTE_SOLAR_SW" type="checkbox" onclick="toggleSwitch(this);"/>
+						<label class="lblOnOff" for="REMOTE_SOLAR_SW"><i/></label>
+					</div>
+					<div class="energy">
+						<img   class="energy" src="images/ea/windTurbine.png"/><br/>
+						<input class="btnOnOff"  id="REMOTE_WIND_SW" type="checkbox" onclick="toggleSwitch(this);"/>
+						<label class="lblOnOff" for="REMOTE_WIND_SW"><i/></label>
+					</div>
+					<div class="energy">
+						<img   class="energy" src="images/ea/coalPowerplant.png"/><br/>
+						<input class="btnSlider" id="REMOTE_COAL_SP" name="REMOTE_COAL_SP" type="range" min="0" max="100" value="0" onchange="sliderUpdated(this);"/>
+					</div>
+					<div class="energy">
+						<img   class="energy" src="images/ea/factory.png"/><br/>
+						<input class="btnSlider" id="REMOTE_FACTORY_SP" name="REMOTE_FACTORY_SP" type="range" min="0" max="100" value="0" onchange="sliderUpdated(this);"/>
+					</div>
+				</div>				
+			</div>
+		</div> 	<!-- <div id="content"> -->
+		
+		<!-- Footer -->
+		<footer>WebSocket Demonstrator for SIn Module<br/><br/><br/><br/><br/><br/><span id="log">&nbsp;</span></footer>	
+	</div> <!-- <div id="main"> -->
+	<script type="text/javascript" src="js/gauge.js"></script>
+	<script>
+		var gauge_coal_sp = Gauge(document.getElementById("COAL_ST"), {
+			min: 0,
+			max: 100,
+			dialStartAngle: 180,
+			dialEndAngle: 0,
+			value: 0,
+			viewBox: "0 0 100 57",
+			color: function(value) {
+				if(value < 5 || value > 95) {
+				  return "#bb0000";
+				}else if(value < 15 || value > 85) {
+				  return "#eedd00";
+				} else {
+				  return "#00bb00";
+				}
+			}
+		});
+		var gauge_factory_sp = Gauge(document.getElementById("FACTORY_ST"), {
+			min: 0,
+			max: 100,
+			dialStartAngle: 180,
+			dialEndAngle: 0,
+			value: 0,
+			viewBox: "0 0 100 57",
+			color: function(value) {
+				if(value < 5 || value > 95) {
+				  return "#bb0000";
+				}else if(value < 15 || value > 85) {
+				  return "#eedd00";
+				} else {
+				  return "#00bb00";
+				}
+			}
+		});
+		gauge_coal_sp.setValue(100);
+		gauge_coal_sp.setValueAnimated(0, 3);
+		gauge_factory_sp.setValue(100);
+		gauge_factory_sp.setValueAnimated(0, 3);
+		
+		function updateCoalSp(value) {
+			gauge_coal_sp.setValueAnimated(value, 3);
+		}
+		
+		function updateFactorySp(value) {
+			gauge_factory_sp.setValueAnimated(value, 3);
+		}
+	</script>
+</body>
+</html>

src/main/web/WebClient/indexLight.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Hes-so Valais//Wallis - EA WebSocket Client</title>
+	<link rel="shortcut icon" href="favicon.ico"/>
+	<link rel="icon" type="image/png" href="images/favicon.png"/>
+	
+	<script type="text/javascript" src="js/ezhmiWebSocket.js"></script>
+	<script type="text/javascript">
+		window.addEventListener("load", connect, false);
+	</script>
+</head>
+<body style="font-family: sans-serif;">
+	<!-- Header -->
+	<header style="width: 100%; align-content: center"><h1 style="padding-top: 20px !important; text-align: center">WebSocket Client 231_SIn</h1></header>
+	
+	<!-- Content -->
+	<div style="margin: 20px; border: #e5e2e2 1px solid; box-shadow: 10px 10px 15px #9a9a9a; width: auto; height: auto; padding: 10px; background-image: url(images/ea/solarPanel.png); background-position: right bottom; background-repeat: no-repeat; background-size: 200px;">
+		<h2 style="text-align: center;">WebSocket Client</h2>
+		<h3 style="text-align: center;">Minecraft Monitoring</h3>
+		
+		<!-- EZHMI content -->
+		<div style="margin: 10px; width: auto;">
+			
+			<!-- webSocket message -->
+			<div style="padding: 10px auto; text-align: center">
+				<label>WebSocket Messages&nbsp;&rarr;&nbsp;</label>
+				<label  id="wsMessage">WebSocket messages will go here...</label>
+			</div>
+			
+			<!-- Input DataPoint value from Minecraft -->
+			<div style="padding: 10px">
+				<div style="display: inline-block; width: 250px; text-align: right"><label for="SOLAR_P_FLOAT">SOLAR_P_FLOAT&nbsp;</label></div>
+				<input  id="SOLAR_P_FLOAT" type="text" value="" disabled=""/>
+			</div>
+			
+			<!-- Output DataPoint value to be pushed to Minecraft -->
+			<div style="padding: 10px;">
+				<div style="display: inline-block; width: 250px; text-align: right"><label for="REMOTE_SOLAR_SW">REMOTE_SOLAR_SW&nbsp;</label></div>
+				<input  id="REMOTE_SOLAR_SW" type="checkbox" onclick="toggleSwitch(this);"/><br/>
+				<div style="display: inline-block; width: 250px; text-align: right"><label for="SOLAR_CONNECT_ST">SOLAR_CONNECT_ST&nbsp;</label></div>
+				<input  id="SOLAR_CONNECT_ST" type="text" value="" disabled=""/>
+			</div>
+		</div>			
+	</div>
+	
+	<!-- Footer -->
+	<footer style="font-style: italic; text-align: center; font-size: small; color: #4b4b4b">WebSocket Demonstrator for SIn Module</footer>
+</body>
+</html>

src/main/web/WebClient/js/ezhmiWebSocket.js

@@ -0,0 +1,151 @@
+// Copyright (C) 2017 Hes-so Valais//Wallis, HEI, Sion. All rights reserved.
+//
+// Author: Patrice Rudaz (poatrice.rudaz@hevs.ch)
+
+// *****  *************************************************************
+let wSocket = null;
+
+function connect() {         
+	wSocket = new WebSocket("ws://localhost:8888");
+	if (wSocket != null) {
+		wSocket.onmessage = onMessage;
+		wSocket.onopen    = function () {
+			updateWelcomeMsg("Connected !", "darkGreen");
+		};
+		wSocket.onclose   = function (evt) {
+			updateWelcomeMsg("Connection closed!", "darkGray");
+		};
+		wSocket.onerror   = function (evt) {
+			updateWelcomeMsg("Connection error!", "#dd0000");
+		};
+	}
+}
+
+function onMessage(evt) {
+	let str = evt.data;
+	if (str.startsWith("Welcome")) {
+		updateWelcomeMsg(str, "darkGray");
+		return;
+	}
+	
+	if (str.includes("=")) {
+		let arrCmd     = str.split("=");
+		let cmdLabel = arrCmd[0];
+		let cmdValue = arrCmd[1];
+		let factor   = 1;
+		let offset   = 0;
+
+		let elem     = document.getElementById(cmdLabel);
+
+		if (elem != null) {
+
+
+			// SOLAR_CONNECT_ST & WIND_CONNECT_ST
+			if(cmdLabel.endsWith("CONNECT_ST")) {
+				// Checks if value is a number
+				if (isNaN(cmdValue)) {
+					elem.className = (cmdValue.toLowerCase().localeCompare("true") === 0 ? "led led-green":"led led-red");
+					elem.value = (cmdValue.toLowerCase().localeCompare("true") === 0 ? "ON":"OFF");
+				} else {
+					elem.className = (cmdValue == 1.0 ? "led led-green":"led led-red");
+					elem.value = (cmdValue == 1.0 ? "ON":"OFF");
+				}
+				return;
+			} 
+
+			// FACTORY_ST & COAL_ST
+			if(cmdLabel.endsWith("_ST")) {
+				// Checks if value is a number
+				if (!isNaN(cmdValue)) {
+					let val =  Math.round(parseFloat(cmdValue) * 100).toFixed(0);
+
+					// Update the Gauge
+					if(cmdLabel.toLowerCase().includes("coal")) {
+						updateCoalSp(val);
+					} else {
+						updateFactorySp(val);
+					}
+				}
+				return;
+			}
+
+			// Remote Set Points and Switch
+			if (cmdLabel.startsWith("REMOTE_")) {
+				
+				// Remote Set Points
+				if (cmdLabel.endsWith("_SP")) {
+					// Checks if the value is a number
+					if (!isNaN(cmdValue)) {
+						let val = Math.round(parseFloat(cmdValue) * 100).toFixed(0);
+	
+						// Update remote slider
+						let slider = document.getElementById(cmdLabel);
+						if (slider != null) {
+							slider.value = val;
+							slider.style.setProperty('--val', + (slider.value * 1.15));
+						}
+					}
+					return;
+				}
+				
+				// Remote Switch			
+				if (cmdLabel.endsWith("_SW")) {
+					// Checks if value is a number
+					if (isNaN(cmdValue)) {
+						elem.checked = (cmdValue.toLowerCase().localeCompare("true") === 0 ? true:false);
+					} else {
+						elem.checked = (cmdValue == 1.0 ? true:false);
+					}
+					return;				
+				}
+			}
+
+			// All other Datapoints
+			let val = ((parseFloat(cmdValue) * factor) + offset).toFixed(2);
+			if (cmdLabel.includes("_U_")) {
+				val += " [V]";
+			} else if (cmdLabel.includes("_P_")) {
+				val += " [W]";
+			} else {
+				val = Math.round(parseFloat(cmdValue) * 100).toFixed(0) + " %";
+			}
+			elem.value = val;
+		}
+	}
+}
+
+function updateWelcomeMsg(msg, color) {
+	let welcome = document.getElementById("wsMessage");
+	if (welcome != null) {
+		welcome.style.color = color;
+		welcome.innerHTML   = msg;
+	}
+}
+
+function updateLog(msg, color) {
+	let spanLog = document.getElementById("log");
+	if (spanLog != null) {
+		spanLog.style.color = color;
+		spanLog.innerHTML   = msg;
+	}
+}
+
+function toggleSwitch(cb) {
+	if (cb != null) {
+		let label = cb.id;
+		let value = cb.checked;
+		wSocket.send(label + "=" + value);
+	}
+}
+
+function sliderUpdated(sl) {
+	if (sl != null && wSocket != null) {
+		let label = sl.id;
+		let value = sl.value / 100;
+		wSocket.send(label + "=" + value);
+	}
+}
+
+function sliderChanged(sl) {
+	sl.style.setProperty('--val', + sl.value);
+}

src/main/web/WebClient/js/gauge.js

@@ -0,0 +1,344 @@
+/* global window, define, module */
+(function(global, factory) {
+  var Gauge = factory(global);
+  if(typeof define === "function" && define.amd) {
+    // AMD support
+    define(function() {return Gauge;});
+  }else if(typeof module === "object" && module.exports) {
+    // CommonJS support
+    module.exports = Gauge;
+  }else {
+    // We are probably running in the browser
+    global.Gauge = Gauge;
+  }
+})(typeof window === "undefined" ? this : window, function(global, undefined) {
+
+  var document = global.document,
+    slice = Array.prototype.slice,
+    requestAnimationFrame = (global.requestAnimationFrame ||
+        global.mozRequestAnimationFrame ||
+        global.webkitRequestAnimationFrame ||
+        global.msRequestAnimationFrame ||
+        function(cb) {
+          return setTimeout(cb, 1000 / 60);
+        });
+
+  // EXPERIMENTAL!!
+  /**
+   * Simplistic animation function for animating the gauge. That's all!
+   * Options are:
+   * {
+   *  duration: 1,    // In seconds
+   *  start: 0,       // The start value
+   *  end: 100,       // The end value
+   *  step: function, // REQUIRED! The step function that will be passed the value and does something
+   *  easing: function // The easing function. Default is easeInOutCubic
+   * }
+   */
+  function Animation(options) {
+    var duration = options.duration,
+        currentIteration = 1,
+        iterations = 60 * duration,
+        start = options.start || 0,
+        end = options.end,
+        change = end - start,
+        step = options.step,
+        easing = options.easing || function easeInOutCubic(pos) {
+          // https://github.com/danro/easing-js/blob/master/easing.js
+          if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
+          return 0.5 * (Math.pow((pos-2),3) + 2);
+        };
+
+    function animate() {
+      var progress = currentIteration / iterations, 
+          value = change * easing(progress) + start;
+      // console.log(progress + ", " + value);
+      step(value, currentIteration);
+      currentIteration += 1;
+
+      if(progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    }
+    // start!
+    requestAnimationFrame(animate);
+  }
+
+
+
+  var Gauge = (function() {
+    var SVG_NS = "http://www.w3.org/2000/svg";
+
+    var GaugeDefaults = {
+      centerX: 50,
+      centerY: 50
+    };
+
+    var defaultOptions = {
+      dialRadius: 40,
+      dialStartAngle: 135,
+      dialEndAngle: 45,
+      value: 0,
+      max: 100,
+      min: 0,
+      valueDialClass: "value",
+      valueClass: "value-text",
+      dialClass: "dial",
+      gaugeClass: "gauge",
+      showValue: true,
+      gaugeColor: null,
+      label: function(val) {return Math.round(val);}
+    };
+
+    function shallowCopy(/* source, ...targets*/) {
+      var target = arguments[0], sources = slice.call(arguments, 1);
+      sources.forEach(function(s) {
+        for(var k in s) {
+          if(s.hasOwnProperty(k)) {
+            target[k] = s[k];
+          }
+        }
+      });
+      return target;
+    }
+
+    /**
+     * A utility function to create SVG dom tree
+     * @param {String} name The SVG element name
+     * @param {Object} attrs The attributes as they appear in DOM e.g. stroke-width and not strokeWidth
+     * @param {Array} children An array of children (can be created by this same function)
+     * @return The SVG element
+     */
+    function svg(name, attrs, children) {
+      var elem = document.createElementNS(SVG_NS, name);
+      for(var attrName in attrs) {
+        elem.setAttribute(attrName, attrs[attrName]);
+      }
+
+      if(children) {
+        children.forEach(function(c) {
+          elem.appendChild(c);
+        });
+      }
+      return elem;
+    }
+
+    /**
+     * Translates percentage value to angle. e.g. If gauge span angle is 180deg, then 50%
+     * will be 90deg
+     */
+    function getAngle(percentage, gaugeSpanAngle) {
+      return percentage * gaugeSpanAngle / 100;
+    }
+
+    function normalize(value, min, limit) {
+      var val = Number(value);
+      if(val > limit) return limit;
+      if(val < min) return min;
+      return val;
+    }
+
+    function getValueInPercentage(value, min, max) {
+      var newMax = max - min, newVal = value - min;
+      return 100 * newVal / newMax;
+      // var absMin = Math.abs(min);
+      // return 100 * (absMin + value) / (max + absMin);
+    }
+
+    /**
+     * Gets cartesian co-ordinates for a specified radius and angle (in degrees)
+     * @param cx {Number} The center x co-oriinate
+     * @param cy {Number} The center y co-ordinate
+     * @param radius {Number} The radius of the circle
+     * @param angle {Number} The angle in degrees
+     * @return An object with x,y co-ordinates
+     */
+    function getCartesian(cx, cy, radius, angle) {
+      var rad = angle * Math.PI / 180;
+      return {
+        x: Math.round((cx + radius * Math.cos(rad)) * 1000) / 1000,
+        y: Math.round((cy + radius * Math.sin(rad)) * 1000) / 1000
+      };
+    }
+
+    // Returns start and end points for dial
+    // i.e. starts at 135deg ends at 45deg with large arc flag
+    // REMEMBER!! angle=0 starts on X axis and then increases clockwise
+    function getDialCoords(radius, startAngle, endAngle) {
+      var cx = GaugeDefaults.centerX,
+          cy = GaugeDefaults.centerY;
+      return {
+        end: getCartesian(cx, cy, radius, endAngle),
+      	start: getCartesian(cx, cy, radius, startAngle)
+      };
+    }
+
+    /**
+     * Creates a Gauge object. This should be called without the 'new' operator. Various options
+     * can be passed for the gauge:
+     * {
+     *    dialStartAngle: The angle to start the dial. MUST be greater than dialEndAngle. Default 135deg
+     *    dialEndAngle: The angle to end the dial. Default 45deg
+     *    radius: The gauge's radius. Default 400
+     *    max: The maximum value of the gauge. Default 100
+     *    value: The starting value of the gauge. Default 0
+     *    label: The function on how to render the center label (Should return a value)
+     * }
+     * @param {Element} elem The DOM into which to render the gauge
+     * @param {Object} opts The gauge options
+     * @return a Gauge object
+     */
+    return function Gauge(elem, opts) {
+      opts = shallowCopy({}, defaultOptions, opts);
+      var gaugeContainer = elem,
+          limit = opts.max,
+          min = opts.min,
+          value = normalize(opts.value, min, limit),
+          radius = opts.dialRadius,
+          displayValue = opts.showValue,
+          startAngle = opts.dialStartAngle,
+          endAngle = opts.dialEndAngle,
+          valueDialClass = opts.valueDialClass,
+          valueTextClass = opts.valueClass,
+          valueLabelClass = opts.valueLabelClass,
+          dialClass = opts.dialClass,
+          gaugeClass = opts.gaugeClass,
+          gaugeColor = opts.color,
+          gaugeValueElem,
+          gaugeValuePath,
+          label = opts.label,
+          viewBox = opts.viewBox,
+          instance;
+
+      if(startAngle < endAngle) {
+        console.log("WARN! startAngle < endAngle, Swapping");
+        var tmp = startAngle;
+        startAngle = endAngle;
+        endAngle = tmp;
+      }
+
+      function pathString(radius, startAngle, endAngle, largeArc) {
+        var coords = getDialCoords(radius, startAngle, endAngle),
+            start = coords.start,
+            end = coords.end,
+            largeArcFlag = typeof(largeArc) === "undefined" ? 1 : largeArc;
+
+        return [
+          "M", start.x, start.y, 
+          "A", radius, radius, 0, largeArcFlag, 1, end.x, end.y
+        ].join(" ");
+      }
+
+      function initializeGauge(elem) {
+        gaugeValueElem = svg("text", {
+          x: 50,
+          y: 50,
+          fill: "#999",
+          "class": valueTextClass,
+          "font-size": "11px",
+//          "font-family": "sans-serif",
+          "font-weight": "normal",
+          "text-anchor": "middle",
+          "alignment-baseline": "middle",
+          "dominant-baseline": "central"
+        });
+
+        gaugeValuePath = svg("path", {
+          "class": valueDialClass,
+          fill: "none",
+          stroke: "#666",
+          "stroke-width": 2.5,
+          d: pathString(radius, startAngle, startAngle) // value of 0
+        });
+
+        var angle = getAngle(100, 360 - Math.abs(startAngle - endAngle));
+        var flag = angle <= 180 ? 0 : 1;
+        var gaugeElement = svg("svg", {"viewBox": viewBox || "0 0 100 100", "class": gaugeClass}, [
+          svg("path", {
+            "class": dialClass,
+            fill: "none",
+            stroke: "#eee",
+            "stroke-width": 2,
+            d: pathString(radius, startAngle, endAngle, flag)
+          }),
+          svg("g", { "class": "text-container" }, [gaugeValueElem]),
+          gaugeValuePath
+        ]);
+        elem.appendChild(gaugeElement);
+      }
+
+      function updateGauge(theValue, frame) {
+        var val = getValueInPercentage(theValue, min, limit),
+            // angle = getAngle(val, 360 - Math.abs(endAngle - startAngle)),
+            angle = getAngle(val, 360 - Math.abs(startAngle - endAngle)),
+            // this is because we are using arc greater than 180deg
+            flag = angle <= 180 ? 0 : 1;
+        if(displayValue) {
+          gaugeValueElem.textContent = label.call(opts, theValue);
+        }
+        gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));
+      }
+
+      function setGaugeColor(value, duration) {        
+        var c = gaugeColor.call(opts, value), 
+            dur = duration * 1000,
+            pathTransition = "stroke " + dur + "ms ease";
+            // textTransition = "fill " + dur + "ms ease";
+
+        gaugeValuePath.style.stroke = c;
+        gaugeValuePath.style["-webkit-transition"] = pathTransition;
+        gaugeValuePath.style["-moz-transition"] = pathTransition;
+        gaugeValuePath.style.transition = pathTransition;
+        /*
+        gaugeValueElem.style = [
+          "fill: " + c,
+          "-webkit-transition: " + textTransition,
+          "-moz-transition: " + textTransition,
+          "transition: " + textTransition,
+        ].join(";");
+        */
+      }
+
+      instance = {
+        setMaxValue: function(max) {
+          limit = max;
+        },
+        setValue: function(val) {
+          value = normalize(val, min, limit);
+          if(gaugeColor) {
+            setGaugeColor(value, 0)
+          }
+          updateGauge(value);
+        },
+        setValueAnimated: function(val, duration) {
+        	var oldVal = value;
+          value = normalize(val, min, limit);
+          if(oldVal === value) {
+            return;
+          }
+
+          if(gaugeColor) {
+            setGaugeColor(value, duration);
+          }
+          Animation({
+            start: oldVal || 0,
+            end: value,
+            duration: duration || 1,
+            step: function(val, frame) {
+              updateGauge(val, frame);
+            }
+          });
+        },
+        getValue: function() {
+          return value;
+        }
+      };
+
+      initializeGauge(gaugeContainer);
+      instance.setValue(value);
+      return instance;
+    };
+  })();
+
+  return Gauge;
+});