add WebClient
This commit is contained in:
parent
16dd324435
commit
e09598d922
143
src/main/web/WebClient/css/btnOnOff.css
Normal file
143
src/main/web/WebClient/css/btnOnOff.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
src/main/web/WebClient/css/fonts/Cambria.eot
Normal file
BIN
src/main/web/WebClient/css/fonts/Cambria.eot
Normal file
Binary file not shown.
222005
src/main/web/WebClient/css/fonts/Cambria.svg
Normal file
222005
src/main/web/WebClient/css/fonts/Cambria.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 12 MiB |
BIN
src/main/web/WebClient/css/fonts/Cambria.ttf
Normal file
BIN
src/main/web/WebClient/css/fonts/Cambria.ttf
Normal file
Binary file not shown.
BIN
src/main/web/WebClient/css/fonts/Cambria.woff
Normal file
BIN
src/main/web/WebClient/css/fonts/Cambria.woff
Normal file
Binary file not shown.
BIN
src/main/web/WebClient/css/fonts/candara-webfont.eot
Normal file
BIN
src/main/web/WebClient/css/fonts/candara-webfont.eot
Normal file
Binary file not shown.
1183
src/main/web/WebClient/css/fonts/candara-webfont.svg
Normal file
1183
src/main/web/WebClient/css/fonts/candara-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 99 KiB |
BIN
src/main/web/WebClient/css/fonts/candara-webfont.ttf
Normal file
BIN
src/main/web/WebClient/css/fonts/candara-webfont.ttf
Normal file
Binary file not shown.
BIN
src/main/web/WebClient/css/fonts/candara-webfont.woff
Normal file
BIN
src/main/web/WebClient/css/fonts/candara-webfont.woff
Normal file
Binary file not shown.
48
src/main/web/WebClient/css/gauge.css
Normal file
48
src/main/web/WebClient/css/gauge.css
Normal file
@ -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 ------------------------- */
|
||||
BIN
src/main/web/WebClient/css/img/logo/HEI.png
Normal file
BIN
src/main/web/WebClient/css/img/logo/HEI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
1
src/main/web/WebClient/css/img/logo/picto.svg
Normal file
1
src/main/web/WebClient/css/img/logo/picto.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.7 KiB |
1
src/main/web/WebClient/css/img/logo/vsExcel.svg
Normal file
1
src/main/web/WebClient/css/img/logo/vsExcel.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
37
src/main/web/WebClient/css/leds.css
Normal file
37
src/main/web/WebClient/css/leds.css
Normal file
@ -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;
|
||||
}
|
||||
314
src/main/web/WebClient/css/minecraft.css
Normal file
314
src/main/web/WebClient/css/minecraft.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||
|
||||
34
src/main/web/WebClient/css/popup.css
Normal file
34
src/main/web/WebClient/css/popup.css
Normal file
@ -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;
|
||||
}
|
||||
136
src/main/web/WebClient/css/prettify.css
Normal file
136
src/main/web/WebClient/css/prettify.css
Normal file
@ -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 {
|
||||
}
|
||||
|
||||
89
src/main/web/WebClient/css/reset.css
Normal file
89
src/main/web/WebClient/css/reset.css
Normal file
@ -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;
|
||||
}
|
||||
241
src/main/web/WebClient/css/style.css
Normal file
241
src/main/web/WebClient/css/style.css
Normal file
@ -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;
|
||||
}
|
||||
374
src/main/web/WebClient/css/switch.css
Normal file
374
src/main/web/WebClient/css/switch.css
Normal file
@ -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);
|
||||
}
|
||||
BIN
src/main/web/WebClient/favicon.ico
Normal file
BIN
src/main/web/WebClient/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/main/web/WebClient/images/ISI.png
Normal file
BIN
src/main/web/WebClient/images/ISI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/main/web/WebClient/images/ea/coalPowerplant.png
Normal file
BIN
src/main/web/WebClient/images/ea/coalPowerplant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
src/main/web/WebClient/images/ea/factory.png
Normal file
BIN
src/main/web/WebClient/images/ea/factory.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
src/main/web/WebClient/images/ea/solarPanel.png
Normal file
BIN
src/main/web/WebClient/images/ea/solarPanel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
src/main/web/WebClient/images/ea/windTurbine.png
Normal file
BIN
src/main/web/WebClient/images/ea/windTurbine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/main/web/WebClient/images/favicon.bmp
Normal file
BIN
src/main/web/WebClient/images/favicon.bmp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/main/web/WebClient/images/favicon.png
Normal file
BIN
src/main/web/WebClient/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
BIN
src/main/web/WebClient/images/smallSansBandePantone.png
Normal file
BIN
src/main/web/WebClient/images/smallSansBandePantone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
182
src/main/web/WebClient/index.html
Normal file
182
src/main/web/WebClient/index.html
Normal file
@ -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"> </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 & 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"> </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>
|
||||
51
src/main/web/WebClient/indexLight.html
Normal file
51
src/main/web/WebClient/indexLight.html
Normal file
@ -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 → </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 </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 </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 </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>
|
||||
151
src/main/web/WebClient/js/ezhmiWebSocket.js
Normal file
151
src/main/web/WebClient/js/ezhmiWebSocket.js
Normal file
@ -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);
|
||||
}
|
||||
344
src/main/web/WebClient/js/gauge.js
Normal file
344
src/main/web/WebClient/js/gauge.js
Normal file
@ -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;
|
||||
});
|
||||
Reference in New Issue
Block a user