mirror of
https://github.com/s00500/ESPUI.git
synced 2025-06-11 02:30:39 +00:00
Moved examples/gui/data to data/ and adjusted tools/*.py
This commit is contained in:
Christian Riggenbach
246
examples/gui/data/css/normalize.css
vendored
246
examples/gui/data/css/normalize.css
vendored
@ -1,246 +0,0 @@
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
1
examples/gui/data/css/normalize.min.css
vendored
1
examples/gui/data/css/normalize.min.css
vendored
@ -1 +0,0 @@
|
||||
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
|
||||
@ -1,882 +0,0 @@
|
||||
.container {
|
||||
position: relative;
|
||||
width: 79%;
|
||||
margin: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 2%;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
min-width: 150px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-slider {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.turquoise {
|
||||
background: #1abc9c;
|
||||
border-bottom: #16a085 3px solid;
|
||||
}
|
||||
|
||||
.emerald {
|
||||
background: #2ecc71;
|
||||
border-bottom: #27ae60 3px solid;
|
||||
}
|
||||
|
||||
.peterriver {
|
||||
background: #3498db;
|
||||
border-bottom: #2980b9 3px solid;
|
||||
}
|
||||
|
||||
.wetasphalt {
|
||||
background: #34495e;
|
||||
border-bottom: #2c3e50 3px solid;
|
||||
}
|
||||
|
||||
.sunflower {
|
||||
background: #f1c40f;
|
||||
border-bottom: #e6bb0f 3px solid;
|
||||
}
|
||||
|
||||
.carrot {
|
||||
background: #e67e22;
|
||||
border-bottom: #d35400 3px solid;
|
||||
}
|
||||
|
||||
.alizarin {
|
||||
background: #e74c3c;
|
||||
border-bottom: #c0392b 3px solid;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: #444857;
|
||||
border-bottom: #444857 3px solid;
|
||||
}
|
||||
|
||||
.label {
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.12em 0.4em 0.14em;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
top: -0.15em;
|
||||
background-color: #999999;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.label-wrap {
|
||||
width: 90%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.label.color-blue {
|
||||
background-color: #6f9ad1;
|
||||
}
|
||||
|
||||
.label.color-red {
|
||||
background-color: #d37c7c;
|
||||
}
|
||||
|
||||
.label.color-green {
|
||||
background-color: #9bc268;
|
||||
}
|
||||
|
||||
.label.color-orange {
|
||||
background-color: #dea154;
|
||||
}
|
||||
|
||||
.label.color-yellow {
|
||||
background-color: #e9d641;
|
||||
}
|
||||
|
||||
.label.color-purple {
|
||||
background-color: #9f83d1;
|
||||
}
|
||||
|
||||
/* For devices larger than 400px */
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 84%;
|
||||
}
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
|
||||
@media (min-width: 630px) {
|
||||
.container {
|
||||
width: 98%;
|
||||
}
|
||||
.column,
|
||||
.columns {
|
||||
margin-right: 2%;
|
||||
}
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.one.column,
|
||||
.one.columns {
|
||||
width: 4.66666666667%;
|
||||
}
|
||||
.two.columns {
|
||||
width: 13.3333333333%;
|
||||
}
|
||||
.three.columns {
|
||||
width: 22%;
|
||||
}
|
||||
.four.columns {
|
||||
width: 30.6666666667%;
|
||||
}
|
||||
.five.columns {
|
||||
width: 39.3333333333%;
|
||||
}
|
||||
.six.columns {
|
||||
width: 48%;
|
||||
}
|
||||
.seven.columns {
|
||||
width: 56.6666666667%;
|
||||
}
|
||||
.eight.columns {
|
||||
width: 65.3333333333%;
|
||||
}
|
||||
.nine.columns {
|
||||
width: 74%;
|
||||
}
|
||||
.ten.columns {
|
||||
width: 82.6666666667%;
|
||||
}
|
||||
.eleven.columns {
|
||||
width: 91.3333333333%;
|
||||
}
|
||||
.twelve.columns {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.one-third.column {
|
||||
width: 30.6666666667%;
|
||||
}
|
||||
.two-thirds.column {
|
||||
width: 65.3333333333%;
|
||||
}
|
||||
.one-half.column {
|
||||
width: 48%;
|
||||
}
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns {
|
||||
margin-left: 8.66666666667%;
|
||||
}
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns {
|
||||
margin-left: 17.3333333333%;
|
||||
}
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns {
|
||||
margin-left: 26%;
|
||||
}
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns {
|
||||
margin-left: 34.6666666667%;
|
||||
}
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns {
|
||||
margin-left: 43.3333333333%;
|
||||
}
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns {
|
||||
margin-left: 52%;
|
||||
}
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns {
|
||||
margin-left: 60.6666666667%;
|
||||
}
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns {
|
||||
margin-left: 69.3333333333%;
|
||||
}
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns {
|
||||
margin-left: 78%;
|
||||
}
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns {
|
||||
margin-left: 86.6666666667%;
|
||||
}
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns {
|
||||
margin-left: 95.3333333333%;
|
||||
}
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns {
|
||||
margin-left: 34.6666666667%;
|
||||
}
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns {
|
||||
margin-left: 69.3333333333%;
|
||||
}
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns {
|
||||
margin-left: 52%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #222;
|
||||
background-color: #ecf0f1;
|
||||
}
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.08rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Larger than phablet */
|
||||
|
||||
@media (min-width: 630px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
a {
|
||||
color: #1eaedb;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0fa0ce;
|
||||
}
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
/* Main Head Part
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
#mainHeader {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#conStatus {
|
||||
position: inherit;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.u-pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
hr {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ButtonPad
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.control {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(
|
||||
hsla(0, 0%, 0%, 0.1),
|
||||
hsla(0, 0%, 100%, 0.1)
|
||||
);
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
|
||||
0 0 1px 1px hsla(0, 0%, 100%, 0.75), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
|
||||
0 0 1px 3px hsla(0, 0%, 100%, 0.25), 0 0 1px 4px hsla(0, 0%, 100%, 0.25),
|
||||
0 0 1px 6px hsla(0, 0%, 0%, 0.75);
|
||||
height: 9em;
|
||||
margin: 3em auto;
|
||||
position: relative;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
.control ul {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.control li {
|
||||
border-radius: 100% 0 0 0;
|
||||
box-shadow: inset -1px -1px 1px hsla(0, 0%, 100%, 0.5),
|
||||
0 0 1px hsla(0, 0%, 0%, 0.75);
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control ul li:nth-child(2) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.control ul li:nth-child(3) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.control ul li:nth-child(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.control ul a {
|
||||
height: 200%;
|
||||
position: relative;
|
||||
transform: rotate(-45deg);
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.control a:hover,
|
||||
.control a:focus {
|
||||
background-color: hsla(0, 0%, 100%, 0.25);
|
||||
}
|
||||
|
||||
.control a {
|
||||
border-radius: 50%;
|
||||
color: #333;
|
||||
display: block;
|
||||
font: bold 1em/3 sans-serif;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.4);
|
||||
transition: 0.15s;
|
||||
}
|
||||
|
||||
.control .confirm {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(
|
||||
hsla(0, 0%, 0%, 0.15),
|
||||
hsla(0, 0%, 100%, 0.25)
|
||||
);
|
||||
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
|
||||
0 0 1px 1px hsla(0, 0%, 100%, 0.25), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
|
||||
0 0 1px 3px hsla(0, 0%, 100%, 0.25), 0 0 1px 4px hsla(0, 0%, 100%, 0.25),
|
||||
0 0 1px 6px hsla(0, 0%, 0%, 0.85);
|
||||
left: 50%;
|
||||
line-height: 3;
|
||||
margin: -1.5em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.control .confirm:hover,
|
||||
.control .confirm:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
/* Switch
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.switch {
|
||||
display: inline-block !important;
|
||||
background-color: #bebebe;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
height: 26px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
-webkit-transition: background-color 0.2s ease-in-out;
|
||||
-moz-transition: background-color 0.2s ease-in-out;
|
||||
-o-transition: background-color 0.2s ease-in-out;
|
||||
-ms-transition: background-color 0.2s ease-in-out;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.switch.checked {
|
||||
background-color: #76d21d;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"] {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
height: 10px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.in {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
-webkit-transition: left 0.08s ease-in-out;
|
||||
-moz-transition: left 0.08s ease-in-out;
|
||||
-o-transition: left 0.08s ease-in-out;
|
||||
-ms-transition: left 0.08s ease-in-out;
|
||||
transition: left 0.08s ease-in-out;
|
||||
}
|
||||
|
||||
.switch.checked div {
|
||||
left: 38px;
|
||||
}
|
||||
|
||||
.switch .in:before {
|
||||
background: #fff;
|
||||
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, #fff),
|
||||
color-stop(100%, #f0f0f0)
|
||||
);
|
||||
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
|
||||
content: "";
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -9px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.switch .in:after {
|
||||
background: #f0f0f0;
|
||||
background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, #f0f0f0),
|
||||
color-stop(100%, #fff)
|
||||
);
|
||||
background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%);
|
||||
border-radius: 10px;
|
||||
content: "";
|
||||
height: 12px;
|
||||
margin: -1px 0 0 -1px;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------
|
||||
Material Design Range Slider - by Ravikumar Chauhan
|
||||
------------------------------------------------------------------------- */
|
||||
.rkmd-slider {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
.rkmd-slider input[type="range"] {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 27px;
|
||||
border-radius: 13px;
|
||||
background-color: #bebebe;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider input[type="range"] + .slider {
|
||||
height: 4px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider .slider-fill {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider .slider-handle {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: -8px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider input[type="range"] + .slider .slider-handle {
|
||||
top: -5.5px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider {
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-fill,
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-handle {
|
||||
cursor: default !important;
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-fill .slider-label,
|
||||
.rkmd-slider
|
||||
input[type="range"]:disabled
|
||||
+ .slider
|
||||
.slider-handle
|
||||
.slider-label {
|
||||
display: none;
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-fill.is-active,
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-handle.is-active {
|
||||
top: -5.5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.rkmd-slider
|
||||
input[type="range"]:disabled
|
||||
+ .slider
|
||||
.slider-fill.is-active
|
||||
.slider-label,
|
||||
.rkmd-slider
|
||||
input[type="range"]:disabled
|
||||
+ .slider
|
||||
.slider-handle.is-active
|
||||
.slider-label {
|
||||
display: none;
|
||||
border-radius: 50%;
|
||||
transform: none;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-handle:active {
|
||||
box-shadow: none !important;
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------
|
||||
Discrete Range Slider - by Ravikumar Chauhan
|
||||
------------------------------------------------------------------------- */
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
|
||||
position: absolute;
|
||||
top: -17.5px;
|
||||
left: 4px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
border-radius: 50%;
|
||||
-webkit-transform: scale(1) rotate(-45deg);
|
||||
transform: scale(1) rotate(-45deg);
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
|
||||
left: -2px;
|
||||
-webkit-transform: scale(0.5) rotate(-45deg);
|
||||
transform: scale(0.5) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
opacity: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle.is-active {
|
||||
top: 0px;
|
||||
margin-left: -2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label {
|
||||
top: -15px;
|
||||
left: -2px;
|
||||
border-radius: 15px 15px 15px 0;
|
||||
-webkit-transform: rotate(-45deg) translate(23px, -25px);
|
||||
transform: rotate(-45deg) translate(23px, -25px);
|
||||
}
|
||||
.rkmd-slider.slider-discrete
|
||||
.slider
|
||||
.slider-handle.is-active
|
||||
.slider-label
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-turquoise .slider-label {
|
||||
background-color: #16a085;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-emerald .slider-label {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.peterriver {
|
||||
background: #3498db;
|
||||
border-bottom: #2980b9 3px solid;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-peterriver .slider-label {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.wetasphalt {
|
||||
background: #34495e;
|
||||
border-bottom: #2c3e50 3px solid;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
|
||||
.sunflower {
|
||||
background: #f1c40f;
|
||||
border-bottom: #e6bb0f 3px solid;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-sunflower .slider-label {
|
||||
background-color: #e6bb0f;
|
||||
}
|
||||
|
||||
.carrot {
|
||||
background: #e67e22;
|
||||
border-bottom: #d35400 3px solid;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-carrot .slider-label {
|
||||
background-color: #d35400;
|
||||
}
|
||||
|
||||
.alizarin {
|
||||
background: #e74c3c;
|
||||
border-bottom: #c0392b 3px solid;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete.slider-alizarin .slider-label {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
/*
|
||||
.rkmd-slider.slider-light input[type="range"] + .slider {
|
||||
background-color: #5c5c5c;
|
||||
}
|
||||
.rkmd-slider.slider-light input[type="range"]:disabled + .slider {
|
||||
background-color: #5c5c5c !important;
|
||||
}
|
||||
.rkmd-slider.slider-light input[type="range"]:disabled + .slider .slider-fill,
|
||||
.rkmd-slider.slider-light input[type="range"]:disabled + .slider .slider-handle {
|
||||
background-color: #5c5c5c !important;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------------
|
||||
* Text and number inputs
|
||||
*--------------------------------------------------------------- */
|
||||
|
||||
input {
|
||||
margin: 0 auto 1.2rem auto;
|
||||
padding: 2px 5px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
input[id^="num"] {
|
||||
max-width: 6em;
|
||||
width: auto;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
font-size: 115%;
|
||||
}
|
||||
1
examples/gui/data/css/style.min.css
vendored
1
examples/gui/data/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Control</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/normalize.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
<script src="/js/zepto.min.js"></script>
|
||||
<script src="/js/slider.js"></script>
|
||||
<script src="/js/controls.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="javascript:start();">
|
||||
<div>
|
||||
<h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
|
||||
<hr />
|
||||
<div class="container">
|
||||
<div id="row" class="row u-full-width">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/controls.js></script></head> <body onload=javascript:start();> <div> <h4><div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span></h4></div> <hr> <div class=container> <div id=row class="row u-full-width"> </div> </div> </body> </html>
|
||||
486
examples/gui/data/js/controls.js
vendored
486
examples/gui/data/js/controls.js
vendored
@ -1,486 +0,0 @@
|
||||
const UI_INITIAL_GUI = 200;
|
||||
|
||||
const UI_TITEL = 0;
|
||||
const UI_BUTTON = 1;
|
||||
const UI_PAD = 2;
|
||||
const UI_CPAD = 3;
|
||||
|
||||
const UI_LABEL = 4;
|
||||
const UPDATE_LABEL = 104;
|
||||
|
||||
const UI_SWITCHER = 5;
|
||||
const UPDATE_SWITCHER = 105;
|
||||
|
||||
const UI_SLIDER = 6;
|
||||
const UPDATE_SLIDER = 106;
|
||||
|
||||
const UI_NUMBER = 7;
|
||||
const UPDATE_NUMBER = 107;
|
||||
|
||||
const UI_TEXT_INPUT = 8;
|
||||
const UPDATE_TEXT_INPUT = 108;
|
||||
|
||||
const UI_GRAPH = 9;
|
||||
const ADD_GRAPH_POINT = 10;
|
||||
const CLEAR_GRAPH = 109;
|
||||
|
||||
const FOR = 0;
|
||||
const BACK = 1;
|
||||
const LEFT = 2;
|
||||
const RIGHT = 3;
|
||||
const CENTER = 4;
|
||||
|
||||
// Colors
|
||||
const C_TURQUOISE = 0;
|
||||
const C_EMERALD = 1;
|
||||
const C_PETERRIVER = 2;
|
||||
const C_WETASPHALT = 3;
|
||||
const C_SUNFLOWER = 4;
|
||||
const C_CARROT = 5;
|
||||
const C_ALIZARIN = 6;
|
||||
const C_DARK = 7;
|
||||
const C_NONE = 255;
|
||||
|
||||
function colorClass(colorId) {
|
||||
colorId = Number(colorId);
|
||||
switch (colorId) {
|
||||
case C_TURQUOISE:
|
||||
return "turquoise";
|
||||
|
||||
case C_EMERALD:
|
||||
return "emerald";
|
||||
|
||||
case C_PETERRIVER:
|
||||
return "peterriver";
|
||||
|
||||
case C_WETASPHALT:
|
||||
return "wetasphalt";
|
||||
|
||||
case C_SUNFLOWER:
|
||||
return "sunflower";
|
||||
|
||||
case C_CARROT:
|
||||
return "carrot";
|
||||
|
||||
case C_ALIZARIN:
|
||||
return "alizarin";
|
||||
|
||||
case C_NONE:
|
||||
return "dark";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
var websock;
|
||||
var websockConnected = false;
|
||||
|
||||
function restart() {
|
||||
$(document)
|
||||
.add("*")
|
||||
.off();
|
||||
$("#row").html("");
|
||||
websock.close();
|
||||
start();
|
||||
}
|
||||
|
||||
function conStatusError() {
|
||||
websockConnected = false;
|
||||
$("#conStatus").removeClass("color-green");
|
||||
$("#conStatus").addClass("color-red");
|
||||
$("#conStatus").html("Error / No Connection ↻");
|
||||
$("#conStatus").off();
|
||||
$("#conStatus").on({
|
||||
click: restart
|
||||
});
|
||||
}
|
||||
|
||||
function handleVisibilityChange() {
|
||||
if (!websockConnected && !document.hidden) {
|
||||
restart();
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
||||
websock.onopen = function(evt) {
|
||||
console.log("websock open");
|
||||
$("#conStatus").addClass("color-green");
|
||||
$("#conStatus").text("Connected");
|
||||
websockConnected = true;
|
||||
};
|
||||
|
||||
websock.onclose = function(evt) {
|
||||
console.log("websock close");
|
||||
conStatusError();
|
||||
};
|
||||
|
||||
websock.onerror = function(evt) {
|
||||
console.log(evt);
|
||||
conStatusError();
|
||||
};
|
||||
|
||||
var handleEvent = function(evt) {
|
||||
//console.log(evt);
|
||||
var data = JSON.parse(evt.data);
|
||||
var e = document.body;
|
||||
var center = "";
|
||||
switch (data.type) {
|
||||
case UI_INITIAL_GUI:
|
||||
data.controls.forEach(element => {
|
||||
var fauxEvent = {
|
||||
data: JSON.stringify(element)
|
||||
};
|
||||
handleEvent(fauxEvent);
|
||||
});
|
||||
break;
|
||||
case UI_TITEL:
|
||||
document.title = data.label;
|
||||
$("#mainHeader").html(data.label);
|
||||
break;
|
||||
case UI_LABEL:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr /><span id='l" +
|
||||
data.id +
|
||||
"' class='label label-wrap'>" +
|
||||
data.value +
|
||||
"</span></div>"
|
||||
);
|
||||
break;
|
||||
case UI_BUTTON:
|
||||
$("#row").append(
|
||||
"<div class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/><button onmousedown='buttonclick(" +
|
||||
data.id +
|
||||
", true)' onmouseup='buttonclick(" +
|
||||
data.id +
|
||||
", false)' id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.value +
|
||||
"</button></div>"
|
||||
);
|
||||
$("#" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, true);
|
||||
}
|
||||
});
|
||||
$("#" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, false);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case UI_SWITCHER:
|
||||
var label = "<label id='sl" + data.id + "' class='switch checked'>";
|
||||
var input =
|
||||
"<div class='in'><input type='checkbox' id='s" +
|
||||
data.id +
|
||||
"' onClick='switcher(" +
|
||||
data.id +
|
||||
",null)' checked></div>";
|
||||
if (data.value == "0") {
|
||||
label = "<label id='sl" + data.id + "' class='switch'>";
|
||||
input =
|
||||
"<div class='in'><input type='checkbox' id='s" +
|
||||
data.id +
|
||||
"' onClick='switcher(" +
|
||||
data.id +
|
||||
",null)' ></div>";
|
||||
}
|
||||
$("#row").append(
|
||||
"<div id='" +
|
||||
data.id +
|
||||
"' class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/>" +
|
||||
label +
|
||||
input +
|
||||
"</label>" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
case UI_CPAD:
|
||||
center =
|
||||
"<a class='confirm' onmousedown='padclick(CENTER, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(CENTER, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pc" +
|
||||
data.id +
|
||||
"'>OK</a>";
|
||||
//NO BREAK
|
||||
case UI_PAD:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/>" +
|
||||
"<nav class='control'>" +
|
||||
"<ul>" +
|
||||
"<li><a onmousedown='padclick(FOR, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(FOR, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pf" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(RIGHT, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(RIGHT, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pr" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(LEFT, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(LEFT, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pl" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(BACK, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(BACK, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pb" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"</ul>" +
|
||||
center +
|
||||
"</nav>" +
|
||||
"</div>"
|
||||
);
|
||||
|
||||
$("#pf" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pf" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pl" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pl" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pr" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pr" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pb" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pb" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pc" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pc" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, false);
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
case UPDATE_LABEL:
|
||||
$("#l" + data.id).html(data.value);
|
||||
break;
|
||||
case UPDATE_SWITCHER:
|
||||
if (data.value == "0") switcher(data.id, 0);
|
||||
else switcher(data.id, 1);
|
||||
break;
|
||||
case UI_SLIDER:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter card-slider " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<div id='sl" +
|
||||
data.id +
|
||||
"' class='rkmd-slider slider-discrete slider-" +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<input type='range' min='0' max='100' value='" +
|
||||
data.value +
|
||||
"'>" +
|
||||
"</div>" +
|
||||
"</div>"
|
||||
);
|
||||
$("#row").append(
|
||||
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_SLIDER:
|
||||
slider_move($("#sl" + data.id), data.value, "100", false);
|
||||
break;
|
||||
|
||||
case UI_NUMBER:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<input style='color:black;' id='num" +
|
||||
data.id +
|
||||
"' type='number' value='" +
|
||||
data.value +
|
||||
"' onchange='numberchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_NUMBER:
|
||||
$("#num" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
case UI_TEXT_INPUT:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<input style='color:black;' id='text" +
|
||||
data.id +
|
||||
"' value='" +
|
||||
data.value +
|
||||
"' onchange='textchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_TEXT_INPUT:
|
||||
$("#text" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error("Unknown type or event");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
websock.onmessage = handleEvent;
|
||||
}
|
||||
|
||||
function numberchange(number) {
|
||||
var val = $("#num" + number).val();
|
||||
websock.send("nvalue:" + val + ":" + number);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function textchange(number) {
|
||||
var val = $("#text" + number).val();
|
||||
websock.send("tvalue:" + val + ":" + number);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function buttonclick(number, isdown) {
|
||||
if (isdown) websock.send("bdown:" + number);
|
||||
else websock.send("bup:" + number);
|
||||
}
|
||||
|
||||
function padclick(type, number, isdown) {
|
||||
switch (type) {
|
||||
case CENTER:
|
||||
if (isdown) websock.send("pcdown:" + number);
|
||||
else websock.send("pcup:" + number);
|
||||
break;
|
||||
case FOR:
|
||||
if (isdown) websock.send("pfdown:" + number);
|
||||
else websock.send("pfup:" + number);
|
||||
break;
|
||||
case BACK:
|
||||
if (isdown) websock.send("pbdown:" + number);
|
||||
else websock.send("pbup:" + number);
|
||||
break;
|
||||
case LEFT:
|
||||
if (isdown) websock.send("pldown:" + number);
|
||||
else websock.send("plup:" + number);
|
||||
break;
|
||||
case RIGHT:
|
||||
if (isdown) websock.send("prdown:" + number);
|
||||
else websock.send("prup:" + number);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function switcher(number, state) {
|
||||
if (state == null) {
|
||||
if ($("#s" + number).is(":checked")) {
|
||||
websock.send("sactive:" + number);
|
||||
$("#sl" + number).addClass("checked");
|
||||
} else {
|
||||
websock.send("sinactive:" + number);
|
||||
$("#sl" + number).removeClass("checked");
|
||||
}
|
||||
} else if (state == 1) {
|
||||
$("#sl" + number).addClass("checked");
|
||||
$("#sl" + number).prop("checked", true);
|
||||
} else if (state == 0) {
|
||||
$("#sl" + number).removeClass("checked");
|
||||
$("#sl" + number).prop("checked", false);
|
||||
}
|
||||
}
|
||||
142
examples/gui/data/js/controls.min.js
vendored
142
examples/gui/data/js/controls.min.js
vendored
@ -1,142 +0,0 @@
|
||||
const UI_INITIAL_GUI=200;const UI_TITEL=0;const UI_BUTTON=1;const UI_PAD=2;const UI_CPAD=3;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
|
||||
var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
|
||||
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
|
||||
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
||||
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr /><span id='l"+
|
||||
data.id+
|
||||
"' class='label label-wrap'>"+
|
||||
data.value+
|
||||
"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/><button onmousedown='buttonclick("+
|
||||
data.id+
|
||||
", true)' onmouseup='buttonclick("+
|
||||
data.id+
|
||||
", false)' id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.value+
|
||||
"</button></div>");$("#"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);}});$("#"+data.id).on({touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+
|
||||
data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+
|
||||
data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' ></div>";}
|
||||
$("#row").append("<div id='"+
|
||||
data.id+
|
||||
"' class='one columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/>"+
|
||||
label+
|
||||
input+
|
||||
"</label>"+
|
||||
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(CENTER, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pc"+
|
||||
data.id+
|
||||
"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/>"+
|
||||
"<nav class='control'>"+
|
||||
"<ul>"+
|
||||
"<li><a onmousedown='padclick(FOR, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(FOR, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pf"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(RIGHT, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(RIGHT, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pr"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(LEFT, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(LEFT, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pl"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(BACK, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(BACK, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pb"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"</ul>"+
|
||||
center+
|
||||
"</nav>"+
|
||||
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);}});$("#pf"+data.id).on({touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);}});$("#pl"+data.id).on({touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);}});$("#pr"+data.id).on({touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);}});$("#pb"+data.id).on({touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);}});$("#pc"+data.id).on({touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")switcher(data.id,0);else switcher(data.id,1);break;case UI_SLIDER:$("#row").append("<div class='two columns card tcenter card-slider "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<div id='sl"+
|
||||
data.id+
|
||||
"' class='rkmd-slider slider-discrete slider-"+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<input type='range' min='0' max='100' value='"+
|
||||
data.value+
|
||||
"'>"+
|
||||
"</div>"+
|
||||
"</div>");$("#row").append("<script>"+"rkmd_rangeSlider('#sl"+data.id+"');"+"</script>");break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UI_NUMBER:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<input style='color:black;' id='num"+
|
||||
data.id+
|
||||
"' type='number' value='"+
|
||||
data.value+
|
||||
"' onchange='numberchange("+
|
||||
data.id+
|
||||
")' />"+
|
||||
"</div>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UI_TEXT_INPUT:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<input style='color:black;' id='text"+
|
||||
data.id+
|
||||
"' value='"+
|
||||
data.value+
|
||||
"' onchange='textchange("+
|
||||
data.id+
|
||||
")' />"+
|
||||
"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
|
||||
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
|
||||
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
|
||||
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
|
||||
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case FOR:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case BACK:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
|
||||
function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
|
||||
@ -1,125 +0,0 @@
|
||||
/* -----------------------------------------------------
|
||||
Material Design Sliders
|
||||
CodePen URL: https://codepen.io/rkchauhan/pen/xVGGpR
|
||||
By: Ravikumar Chauhan
|
||||
-------------------------------------------------------- */
|
||||
function rkmd_rangeSlider(selector) {
|
||||
var self, slider_width, slider_offset, curnt, sliderDiscrete, range, slider;
|
||||
self = $(selector);
|
||||
slider_width = self.width();
|
||||
slider_offset = self.offset().left;
|
||||
sliderDiscrete = self;
|
||||
|
||||
sliderDiscrete.each(function(i, v) {
|
||||
curnt = $(this);
|
||||
curnt.append(sliderDiscrete_tmplt());
|
||||
range = curnt.find('input[type="range"]');
|
||||
slider = curnt.find('.slider');
|
||||
slider_fill = slider.find('.slider-fill');
|
||||
slider_handle = slider.find('.slider-handle');
|
||||
slider_label = slider.find('.slider-label');
|
||||
|
||||
var range_val = parseInt(range.val());
|
||||
slider_fill.css('width', range_val + '%');
|
||||
slider_handle.css('left', range_val + '%');
|
||||
slider_label.find('span').text(range_val);
|
||||
});
|
||||
|
||||
self.on('mousedown touchstart', '.slider-handle', function(e) {
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
var parents = $(this).parents('.rkmd-slider');
|
||||
var slider_width = parents.width();
|
||||
var slider_offset = parents.offset().left;
|
||||
var check_range = parents.find('input[type="range"]').is(':disabled');
|
||||
if (check_range === true) {
|
||||
return false;
|
||||
}
|
||||
$(this).addClass('is-active');
|
||||
var moveFu =
|
||||
function(e) {
|
||||
var pageX = e.pageX || e.changedTouches[0].pageX;
|
||||
var slider_new_width = pageX - slider_offset;
|
||||
if (slider_new_width <= slider_width && !(slider_new_width < '0')) {
|
||||
slider_move(parents, slider_new_width, slider_width, true);
|
||||
}
|
||||
};
|
||||
var upFu =
|
||||
function(e) {
|
||||
$(this).off(handlers);
|
||||
parents.find('.is-active').removeClass('is-active');
|
||||
};
|
||||
|
||||
var handlers = {
|
||||
mousemove: moveFu,
|
||||
touchmove: moveFu,
|
||||
mouseup: upFu,
|
||||
touchend: upFu
|
||||
};
|
||||
$(document).on(handlers);
|
||||
});
|
||||
|
||||
self.on('mousedown touchstart', '.slider', function(e) {
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var parents = $(this).parents('.rkmd-slider');
|
||||
var slider_width = parents.width();
|
||||
var slider_offset = parents.offset().left;
|
||||
var check_range = parents.find('input[type="range"]').is(':disabled');
|
||||
|
||||
if (check_range === true) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var slider_new_width = e.pageX - slider_offset;
|
||||
if (slider_new_width <= slider_width && !(slider_new_width < '0')) {
|
||||
slider_move(parents, slider_new_width, slider_width, true);
|
||||
}
|
||||
var upFu =
|
||||
function(e) {
|
||||
$(this).off(handlers);
|
||||
};
|
||||
|
||||
var handlers = {
|
||||
mouseup: upFu,
|
||||
touchend: upFu
|
||||
};
|
||||
$(document).on(handlers);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
function sliderDiscrete_tmplt() {
|
||||
var tmplt = '<div class="slider">' +
|
||||
'<div class="slider-fill"></div>' +
|
||||
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>' +
|
||||
'</div>';
|
||||
|
||||
return tmplt;
|
||||
}
|
||||
|
||||
function slider_move(parents, newW, sliderW, send) {
|
||||
var slider_new_val = parseInt(Math.round(newW / sliderW * 100));
|
||||
|
||||
var slider_fill = parents.find('.slider-fill');
|
||||
var slider_handle = parents.find('.slider-handle');
|
||||
var range = parents.find('input[type="range"]');
|
||||
|
||||
slider_fill.css('width', slider_new_val + '%');
|
||||
slider_handle.css({
|
||||
'left': slider_new_val + '%',
|
||||
'transition': 'none',
|
||||
'-webkit-transition': 'none',
|
||||
'-moz-transition': 'none'
|
||||
});
|
||||
|
||||
range.val(slider_new_val);
|
||||
if (parents.find('.slider-handle span').text() != slider_new_val) {
|
||||
parents.find('.slider-handle span').text(slider_new_val);
|
||||
var number = parents.attr('id').substring(2);
|
||||
if (send) websock.send('slvalue:' + slider_new_val + ':' + number);
|
||||
}
|
||||
}
|
||||
10
examples/gui/data/js/slider.min.js
vendored
10
examples/gui/data/js/slider.min.js
vendored
@ -1,10 +0,0 @@
|
||||
function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find('.slider');slider_fill=slider.find('.slider-fill');slider_handle=slider.find('.slider-handle');slider_label=slider.find('.slider-label');var range_val=parseInt(range.val());slider_fill.css('width',range_val+'%');slider_handle.css('left',range_val+'%');slider_label.find('span').text(range_val);});self.on('mousedown touchstart','.slider-handle',function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
|
||||
$(this).addClass('is-active');var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find('.is-active').removeClass('is-active');};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on('mousedown touchstart','.slider',function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
|
||||
var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}
|
||||
var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});};function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
|
||||
'<div class="slider-fill"></div>'+
|
||||
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
|
||||
'</div>';return tmplt;}
|
||||
function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round(newW/sliderW*100));var slider_fill=parents.find('.slider-fill');var slider_handle=parents.find('.slider-handle');var range=parents.find('input[type="range"]');slider_fill.css('width',slider_new_val+'%');slider_handle.css({'left':slider_new_val+'%','transition':'none','-webkit-transition':'none','-moz-transition':'none'});range.val(slider_new_val);if(parents.find('.slider-handle span').text()!=slider_new_val){parents.find('.slider-handle span').text(slider_new_val);var number=parents.attr('id').substring(2);if(send)websock.send('slvalue:'+slider_new_val+':'+number);}}
|
||||
2
examples/gui/data/js/zepto.min.js
vendored
2
examples/gui/data/js/zepto.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user