diff --git a/src/main/web/WebClient/css/btnOnOff.css b/src/main/web/WebClient/css/btnOnOff.css
new file mode 100644
index 0000000..87fe0d4
--- /dev/null
+++ b/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;
+}
diff --git a/src/main/web/WebClient/css/fonts/Cambria.eot b/src/main/web/WebClient/css/fonts/Cambria.eot
new file mode 100644
index 0000000..fc30e22
Binary files /dev/null and b/src/main/web/WebClient/css/fonts/Cambria.eot differ
diff --git a/src/main/web/WebClient/css/fonts/Cambria.svg b/src/main/web/WebClient/css/fonts/Cambria.svg
new file mode 100644
index 0000000..ff930b7
--- /dev/null
+++ b/src/main/web/WebClient/css/fonts/Cambria.svg
@@ -0,0 +1,222005 @@
+
+
+
diff --git a/src/main/web/WebClient/css/fonts/Cambria.ttf b/src/main/web/WebClient/css/fonts/Cambria.ttf
new file mode 100644
index 0000000..eb95b91
Binary files /dev/null and b/src/main/web/WebClient/css/fonts/Cambria.ttf differ
diff --git a/src/main/web/WebClient/css/fonts/Cambria.woff b/src/main/web/WebClient/css/fonts/Cambria.woff
new file mode 100644
index 0000000..24a413f
Binary files /dev/null and b/src/main/web/WebClient/css/fonts/Cambria.woff differ
diff --git a/src/main/web/WebClient/css/fonts/candara-webfont.eot b/src/main/web/WebClient/css/fonts/candara-webfont.eot
new file mode 100644
index 0000000..71aa4a2
Binary files /dev/null and b/src/main/web/WebClient/css/fonts/candara-webfont.eot differ
diff --git a/src/main/web/WebClient/css/fonts/candara-webfont.svg b/src/main/web/WebClient/css/fonts/candara-webfont.svg
new file mode 100644
index 0000000..b351af5
--- /dev/null
+++ b/src/main/web/WebClient/css/fonts/candara-webfont.svg
@@ -0,0 +1,1183 @@
+
+
+
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/fonts/candara-webfont.ttf b/src/main/web/WebClient/css/fonts/candara-webfont.ttf
new file mode 100644
index 0000000..fbfbe96
Binary files /dev/null and b/src/main/web/WebClient/css/fonts/candara-webfont.ttf differ
diff --git a/src/main/web/WebClient/css/fonts/candara-webfont.woff b/src/main/web/WebClient/css/fonts/candara-webfont.woff
new file mode 100644
index 0000000..79d031d
Binary files /dev/null and b/src/main/web/WebClient/css/fonts/candara-webfont.woff differ
diff --git a/src/main/web/WebClient/css/gauge.css b/src/main/web/WebClient/css/gauge.css
new file mode 100644
index 0000000..c7691c3
--- /dev/null
+++ b/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 ------------------------- */
diff --git a/src/main/web/WebClient/css/img/logo/HEI.png b/src/main/web/WebClient/css/img/logo/HEI.png
new file mode 100644
index 0000000..6ddf761
Binary files /dev/null and b/src/main/web/WebClient/css/img/logo/HEI.png differ
diff --git a/src/main/web/WebClient/css/img/logo/picto.svg b/src/main/web/WebClient/css/img/logo/picto.svg
new file mode 100644
index 0000000..6b36c6c
--- /dev/null
+++ b/src/main/web/WebClient/css/img/logo/picto.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/img/logo/vsExcel.svg b/src/main/web/WebClient/css/img/logo/vsExcel.svg
new file mode 100644
index 0000000..5cca9cd
--- /dev/null
+++ b/src/main/web/WebClient/css/img/logo/vsExcel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/leds.css b/src/main/web/WebClient/css/leds.css
new file mode 100644
index 0000000..21f482b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/minecraft.css b/src/main/web/WebClient/css/minecraft.css
new file mode 100644
index 0000000..c9f885e
--- /dev/null
+++ b/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;
+}
+
+
diff --git a/src/main/web/WebClient/css/popup.css b/src/main/web/WebClient/css/popup.css
new file mode 100644
index 0000000..f19409c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/prettify.css b/src/main/web/WebClient/css/prettify.css
new file mode 100644
index 0000000..fb188ba
--- /dev/null
+++ b/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 {
+}
+
diff --git a/src/main/web/WebClient/css/reset.css b/src/main/web/WebClient/css/reset.css
new file mode 100644
index 0000000..a3b5858
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/style.css b/src/main/web/WebClient/css/style.css
new file mode 100644
index 0000000..78135f6
--- /dev/null
+++ b/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�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;
+}
\ No newline at end of file
diff --git a/src/main/web/WebClient/css/switch.css b/src/main/web/WebClient/css/switch.css
new file mode 100644
index 0000000..6ea8e7e
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/main/web/WebClient/favicon.ico b/src/main/web/WebClient/favicon.ico
new file mode 100644
index 0000000..cb484cf
Binary files /dev/null and b/src/main/web/WebClient/favicon.ico differ
diff --git a/src/main/web/WebClient/images/ISI.png b/src/main/web/WebClient/images/ISI.png
new file mode 100644
index 0000000..8d3dd5a
Binary files /dev/null and b/src/main/web/WebClient/images/ISI.png differ
diff --git a/src/main/web/WebClient/images/ea/coalPowerplant.png b/src/main/web/WebClient/images/ea/coalPowerplant.png
new file mode 100644
index 0000000..cb4e6fe
Binary files /dev/null and b/src/main/web/WebClient/images/ea/coalPowerplant.png differ
diff --git a/src/main/web/WebClient/images/ea/factory.png b/src/main/web/WebClient/images/ea/factory.png
new file mode 100644
index 0000000..7f41a38
Binary files /dev/null and b/src/main/web/WebClient/images/ea/factory.png differ
diff --git a/src/main/web/WebClient/images/ea/solarPanel.png b/src/main/web/WebClient/images/ea/solarPanel.png
new file mode 100644
index 0000000..a5811ed
Binary files /dev/null and b/src/main/web/WebClient/images/ea/solarPanel.png differ
diff --git a/src/main/web/WebClient/images/ea/windTurbine.png b/src/main/web/WebClient/images/ea/windTurbine.png
new file mode 100644
index 0000000..594a52b
Binary files /dev/null and b/src/main/web/WebClient/images/ea/windTurbine.png differ
diff --git a/src/main/web/WebClient/images/favicon.bmp b/src/main/web/WebClient/images/favicon.bmp
new file mode 100644
index 0000000..b02eef9
Binary files /dev/null and b/src/main/web/WebClient/images/favicon.bmp differ
diff --git a/src/main/web/WebClient/images/favicon.png b/src/main/web/WebClient/images/favicon.png
new file mode 100644
index 0000000..8fab5e3
Binary files /dev/null and b/src/main/web/WebClient/images/favicon.png differ
diff --git a/src/main/web/WebClient/images/smallSansBandePantone.png b/src/main/web/WebClient/images/smallSansBandePantone.png
new file mode 100644
index 0000000..c1c325a
Binary files /dev/null and b/src/main/web/WebClient/images/smallSansBandePantone.png differ
diff --git a/src/main/web/WebClient/index.html b/src/main/web/WebClient/index.html
new file mode 100644
index 0000000..d5e54d9
--- /dev/null
+++ b/src/main/web/WebClient/index.html
@@ -0,0 +1,182 @@
+
+
+
+
+ Hes-so Valais//Wallis - EA WebSocket Client
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
WebSocket Client
+
Minecraft Monitoring
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Input Registers
+
+
SOLAR_P_FLOAT
+
+
+
WIND_P_FLOAT
+
+
+
COAL_P_FLOAT
+
+
+
COAL_AMOUNT
+
+
+
BATT_CHRG_FLOAT
+
+
+
BATT_P_FLOAT
+
+
+
+
HOME_P_FLOAT
+
+
+
PUBLIC_P_FLOAT
+
+
+
FACTORY_P_FLOAT
+
+
+
BUNKER_P_FLOAT
+
+
+
Coils & Holding Registers
+
+
COAL_ST
+
+
+
FACTORY_ST
+
+
+
+
SOLAR_CONNECT_ST
+
+
+
WIND_CONNECT_ST
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main/web/WebClient/indexLight.html b/src/main/web/WebClient/indexLight.html
new file mode 100644
index 0000000..f20a87f
--- /dev/null
+++ b/src/main/web/WebClient/indexLight.html
@@ -0,0 +1,51 @@
+
+
+
+
+ Hes-so Valais//Wallis - EA WebSocket Client
+
+
+
+
+
+
+
+
+
+
+
+
+
WebSocket Client
+
Minecraft Monitoring
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main/web/WebClient/js/ezhmiWebSocket.js b/src/main/web/WebClient/js/ezhmiWebSocket.js
new file mode 100644
index 0000000..e90c864
--- /dev/null
+++ b/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);
+}
diff --git a/src/main/web/WebClient/js/gauge.js b/src/main/web/WebClient/js/gauge.js
new file mode 100644
index 0000000..ba43f82
--- /dev/null
+++ b/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;
+});