Archived
add WebClient
This commit is contained in:
Klagarge committed
1 parent
16dd324435
commit
e09598d922
33 files changed
+225334
No files matched your search
@@ -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;
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large.
Load diff
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large.
Load diff
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
Binary file not shown.
@@ -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 ------------------------- */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 3204 579" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M656.184,534.556c0,24.422 19.8,44.231 44.219,44.231l490.341,0c24.418,0 44.215,-19.809 44.215,-44.231l0,-490.325c0,-24.431 -19.797,-44.231 -44.215,-44.231l-490.341,0c-24.419,0 -44.219,19.8 -44.219,44.231l0,490.325Z" style="fill:#00a5e4;fill-rule:nonzero;"/><path d="M815.703,139.069l248.869,0c0,0 0.581,15.709 1.594,32.059c1.034,17.291 2.418,35.331 2.34,36.756c-0.212,2.71 -0.825,5.357 -4.228,6.547c-2.684,0.947 -5.656,-0.994 -6.375,-6.362c-0.69,-5.263 -1.89,-10.616 -5.85,-20.169c-1.778,-4.253 -9.672,-13.687 -20.54,-18.584c-12.438,-5.628 -27.476,-5.597 -33.432,-5.597l-103,0c24.769,36.009 59.875,85.75 67.953,99.806c3.397,5.875 3.319,13.412 -7.572,29.05c-10.899,15.637 -70.928,94.109 -70.928,94.109l117.322,0c17.485,0 30.241,-1.959 38.319,-5.831c8.05,-3.853 14.084,-18.059 15.522,-23.275c1.378,-5.184 2.015,-10.297 8.128,-9.965c3.934,0.212 4.759,4.781 4.809,8.153c0,1.487 -2.15,20.209 -4.143,37.468c-2.419,21.338 -4.782,41.922 -4.782,41.922l-242.434,0c-3.381,0 -6.009,0 -6.912,-2.247c-1.322,-3.322 0.215,-6.025 2.709,-9.018c4.122,-4.929 62.825,-79.844 87.537,-116.875c6.138,-9.263 10.232,-16.144 8.982,-20.794c-1.432,-5.341 -8.075,-15.256 -17.191,-29.041c-26.6,-40.372 -76.512,-103.415 -78.819,-106.7c-3.162,-4.381 -4.147,-6.544 -2.765,-9.518c0.828,-1.894 2.793,-1.894 4.887,-1.894Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1312.38,534.556c0,24.422 19.8,44.231 44.219,44.231l490.347,0c24.418,0 44.212,-19.809 44.212,-44.231l0,-490.325c0,-24.431 -19.794,-44.231 -44.212,-44.231l-490.347,0c-24.419,0 -44.219,19.8 -44.219,44.231l0,490.325Z" style="fill:#e10271;fill-rule:nonzero;"/><path d="M1635.97,184.091l-66.835,0c-3.321,38.74 -6.515,71.693 -9.59,96.431c-3.113,24.737 -6.063,43.566 -8.881,61.381c-3.003,17.797 -6.004,34.031 -9.057,48.656c-2.55,11.46 -6.115,20.322 -11.084,26.738c-4.834,6.456 -11.959,10.931 -21.313,13.447c-7.812,1.903 -15.462,0.359 -23.146,-4.616c-7.544,-5.019 -12.063,-10.997 -13.688,-17.944c-1.144,-5.153 -1.456,-9.528 -0.847,-13.115c0.478,-3.572 1.538,-6.878 3.163,-9.969c1.565,-3.066 3.268,-5.844 5.259,-8.406c1.813,-2.485 3.856,-4.975 5.953,-7.494c0.694,-0.772 4.013,-4.7 10.097,-11.809c6.113,-7.135 10.606,-13.65 13.744,-19.544c3.025,-5.853 9.725,-18.763 13.069,-34.838c3.403,-16.081 10.259,-71.087 10.131,-118.918l-28.119,0c-7.947,0 -15.678,2.603 -22.962,6.4c-7.091,3.731 -13.366,10.028 -16.179,13.621c-2.978,3.71 -10.634,16.104 -12.493,18.482c-1.782,2.406 -5.422,7.912 -8.213,7.068c-3.028,-0.956 -2.362,-4.346 -1.884,-7.068c0.531,-2.707 6.003,-16.557 10.097,-26.972c4.2,-10.525 9.778,-20.672 16.9,-30.491c5.503,-8.353 13.1,-14.244 22.512,-20.231c9.51,-6.119 20.431,-9.153 33.003,-9.153l204.754,0c3.559,0 22.8,1.531 22.8,23.987c0,22.422 -20.438,24.357 -22.8,24.357l-58.147,0c-4.86,46.075 -7.253,93.615 -7.253,140.24c0,8.46 1.406,16.766 4.328,24.825c2.925,8.116 6.487,14.272 10.712,18.45c5.475,5.06 12.009,8.272 19.847,9.747c7.897,1.425 15.813,-1.006 23.866,-7.344c4.443,-3.521 7.653,-7.456 9.781,-11.828c1.994,-4.444 3.269,-8.75 3.875,-12.759c0.531,-4.066 1.437,-9.785 1.603,-11.163c0.159,-1.387 -0.113,-6.434 5.628,-6.872c5.741,-0.443 6.325,4.65 6.86,10.172c0.471,5.541 -2.472,26.113 -7.101,38.897c-4.621,12.856 -10.199,23.131 -16.556,30.903c-6.4,7.866 -12.619,13.469 -18.753,16.913c-6.994,4.237 -15.153,6.79 -24.344,7.681c-9.359,0.863 -17.859,-1.297 -25.515,-6.475c-12.728,-9.312 -22.478,-23.825 -28.963,-43.647c-3.806,-11.578 -5.744,-26.822 -6.165,-45.815c-0.588,-18.982 0.056,-37.516 1.806,-55.625l10.1,-96.3Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1968.58,534.556c0,24.422 19.8,44.231 44.219,44.231l490.34,0c24.425,0 44.222,-19.809 44.222,-44.231l0,-490.325c0,-24.431 -19.797,-44.231 -44.222,-44.231l-490.34,0c-24.419,0 -44.219,19.8 -44.219,44.231l0,490.325Z" style="fill:#f1b41b;fill-rule:nonzero;"/><path d="M2103.36,263.912c-3.45,-1.59 -3.4,-8.456 0.266,-18.906c4.653,-12.64 9.572,-21.681 16.506,-30.562c6.406,-8.316 20.569,-20.282 30.988,-24.935c10.387,-4.662 21.684,-6.209 35.903,-6.484c17.8,-0.359 44.187,8.903 74.587,21.512c30.51,12.572 58.41,18.51 71.432,18.332c19.212,-0.222 38.559,-4.025 55.243,-15.835c9.941,-6.987 13.953,-11.771 18.656,-21.334c1.438,-2.928 3.325,-3.581 5.344,-2.434c3.219,1.818 3.107,6.35 2.313,12.343c-4.597,31.594 -18.232,48.669 -32.26,58.216c-7.281,4.934 -18.071,11.844 -34.072,13.694c-16.05,1.831 -43.949,-3.169 -52.774,-5.569c-17.297,-4.628 -38.425,-14.625 -51.076,-19.625c-12.509,-5.066 -22.081,-9.834 -28.537,-11.825c-5.047,-1.381 -25.034,-8.678 -43.316,-7.866c-9.99,0.413 -27.265,4.144 -40.203,12.46c-10.815,7.015 -17.809,15.944 -21.925,23.743c-1.915,3.591 -4.4Line truncated
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 375 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M292.65,189.225c0,58.125 -47.1,105.225 -105.225,105.225c-58.125,0 -105.225,-47.1 -105.225,-105.225c0,-58.125 47.1,-105.225 105.225,-105.225c58.125,0 105.225,47.1 105.225,105.225" style="fill:#e50012;fill-rule:nonzero;"/><path d="M3.525,187.5c0,-101.4 82.5,-183.975 183.9,-183.975c101.475,0.075 183.975,82.575 183.975,183.975c0,101.4 -82.5,183.9 -183.9,183.9c-101.4,0 -183.975,-82.5 -183.975,-183.9m-3.525,0c0,103.35 84.075,187.5 187.5,187.5c103.425,0 187.5,-84.075 187.5,-187.5c0,-103.425 -84.075,-187.5 -187.5,-187.5c-103.425,0 -187.5,84.15 -187.5,187.5" style="fill:#e50012;fill-rule:nonzero;"/><path d="M194.775,39.75l16.2,0l-13.2,10.05l6.825,26.175l-16.05,-19.575l-14.55,9.45l4.575,-16.05l-17.7,-10.05l21.525,0l6.15,-24.375l6.225,24.375Z" style="fill:#e50012;fill-rule:nonzero;"/><path d="M268.05,287.025c-22.05,17.85 -50.1,28.575 -80.625,28.575c-30.975,0 -59.475,-11.1 -81.6,-29.475c-15.45,1.5 -34.875,17.925 -34.875,17.925c29.85,29.85 71.1,48.3 116.55,48.3c45,0 85.875,-18.15 115.65,-47.475c0,0.15 -19.575,-16.5 -35.1,-17.85" style="fill:#b2a8a2;fill-rule:nonzero;"/><path d="M140.025,43.5c-5.55,1.8 -7.275,6.6 -5.4,13.125l17.55,-5.7c-2.025,-5.925 -5.625,-9.525 -12.15,-7.425m-4.05,17.625c4.35,9.825 11.775,7.8 16.575,6.225c3,-0.975 5.625,-2.25 8.7,-3.825l1.425,4.5c-3.6,2.25 -6.975,3.6 -10.575,4.725c-11.625,3.75 -20.175,-0.825 -23.775,-12.075c-3.75,-11.625 1.8,-18.825 10.275,-21.6c11.325,-3.675 18.225,1.8 21.6,12.45l0.525,1.65l-24.75,7.95Z" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M226.5,74.25c-10.725,-3.15 -16.5,-11.325 -12.9,-23.4c3.15,-10.65 12.825,-14.325 22.8,-11.4c3.45,1.05 5.475,1.8 8.475,3.3l-1.425,4.95c-2.55,-1.2 -4.2,-2.025 -6.3,-2.625c-7.5,-2.325 -14.25,-0.675 -16.8,7.8c-2.55,8.625 1.275,14.4 9.525,16.8c1.875,0.45 3.9,0.975 6.975,1.275l-1.425,4.875c-3.525,-0.15 -6.225,-0.75 -8.925,-1.575" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M270,61.125c-4.95,-3.225 -9.75,-1.575 -13.575,4.05l15.45,10.125c3.3,-5.325 3.975,-10.425 -1.875,-14.175m-16.2,7.95c-4.875,9.6 1.35,14.1 5.55,16.8c2.625,1.725 5.325,3 8.475,4.35l-2.55,3.9c-4.05,-1.425 -7.125,-3.15 -10.35,-5.25c-10.2,-6.675 -12,-16.2 -5.55,-26.1c6.675,-10.2 15.825,-10.425 23.25,-5.55c9.975,6.525 10.05,15.3 3.9,24.675l-0.975,1.425l-21.75,-14.25Z" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M307.859,67.898l-35.749,34.234l4.564,4.767l35.749,-34.235l-4.564,-4.766Z" style="fill:#9b867d;"/><path d="M283.275,114.75l40.125,-29.025l3.825,5.4l-40.125,28.95l-3.825,-5.325Z" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M327.15,130.05c-2.25,-5.4 -7.2,-6.75 -13.5,-4.275l7.125,17.025c5.775,-2.55 9.075,-6.375 6.375,-12.75m-17.85,-2.55c-9.45,5.175 -6.75,12.375 -4.8,17.025c1.2,2.925 2.7,5.475 4.575,8.325l-4.35,1.8c-2.55,-3.45 -4.125,-6.675 -5.625,-10.2c-4.725,-11.25 -0.825,-20.175 10.05,-24.75c11.25,-4.725 18.9,0.225 22.35,8.475c4.575,11.025 -0.3,18.3 -10.575,22.575l-1.575,0.675l-10.05,-23.925Z" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M308.4,188.85l22.05,-1.5c3.675,-0.225 7.725,-0.6 7.275,-6.525c-0.225,-3.375 -2.475,-8.175 -3.9,-11.025l-26.625,1.8l-0.45,-6.525l34.65,-2.325l0.375,6.075l-3.15,0.225c3.525,6.675 4.425,8.925 4.8,13.725c0.3,4.95 -2.175,10.575 -9.825,11.1l-24.75,1.65l-0.45,-6.675Z" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M302.775,222.075c2.625,-10.95 10.425,-17.025 22.65,-14.175c10.8,2.55 15,12 12.6,22.125c-0.825,3.525 -1.5,5.55 -2.85,8.625l-5.025,-1.2c1.125,-2.625 1.8,-4.35 2.25,-6.45c1.875,-7.65 -0.075,-14.25 -8.775,-16.275c-8.7,-2.1 -14.325,2.1 -16.275,10.425c-0.375,1.875 -0.75,3.975 -0.9,7.05l-4.95,-1.2c0.15,-3.375 0.6,-6.15 1.275,-8.925" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M318.3,264.825c2.925,-5.1 0.975,-9.75 -4.8,-13.35l-9.3,15.975c5.55,3.075 10.575,3.375 14.1,-2.625m-8.85,-15.75c-9.825,-4.425 -13.95,2.1 -16.5,6.45c-1.575,2.775 -2.7,5.475 -3.9,8.625l-4.05,-2.325c1.2,-4.125 2.775,-7.275 4.725,-10.65c6.15,-10.575 15.525,-12.9 25.725,-6.975c10.575,6.15 11.25,15.225 6.825,22.95c-6,10.35 -14.7,10.8 -24.375,5.25l-1.5,-0.9l13.05,-22.425Z" style="fill:#9b867d;fill-rule:nonzero;"/><path d="M101.775,316.2c-3.6,-2.475 -4.65,-6.375 -2.175,-9.975c2.475,-3.675 6.3,-4.35 10.05,-1.8c1.05,0.75 2.25,1.575 3.15,2.55l-1.425,2.1c0,0 -1.125,-1.125 -2.25,-1.875c-2.325,-1.575 -4.275,-1.65 -6.15,1.125c-1.875,2.7 -1.125,4.5 1.2,6.15c1.125,0.75 2.7,1.5 2.7,1.5l-1.425,2.025c-1.35,-0.375 -2.55,-0.975 -3.675,-1.8" style="fill:#fff;fill-rule:nonzero;"/><path d="M113.7,323.325l6.225,-12.375l9.375,4.725l-1.125,2.25l-6,-3l-1.35,2.7l4.275,2.1l-1.125,2.175l-4.275,-2.1l-1.425,2.925l6.225,3.15l-1.125,2.25Line truncated
|
||||
|
After Width: | Height: | Size: 12 KiB |
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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