Skip to content
Snippets Groups Projects
Commit fe2b937e authored by beuchatp's avatar beuchatp
Browse files

Updated web interface with switches

parent d33a29c5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web_interface/html/agent_tab_launch.html
+ 86
− 6
View file @ fe2b937e
......@@ -15,13 +15,69 @@
>
Check for ROS Master
<div class="div-for-button-highlight-on-touchscreen navy"></div>
</button>
</button>
</td>
<td class="ros-info-cell">
<div id="rosMasterStatus"></div>
</td>
</tr>
<tr>
<td class="ros-button-cell">
<button
class="button-push navy fullwidth"
id="buttonLaunchRosMaster"
onclick="callBashScript_outputLabelID_clearOtherLabels_clickOtherButtons('launchRosMaster', 'rosLaunchMasterStatus', 'killMasterStatus', ['buttonRosMasterStatus','buttonRosAgentStatus','buttonRosNodeList'])"
>
Launch ROS Master
<div class="div-for-button-highlight-on-touchscreen navy"></div>
</button>
</td>
<td class="ros-info-cell">
<div id="rosLaunchMasterStatus"></div>
</td>
</tr>
<tr>
<td>
<table>
<td class="switch-cell pad-right">
<div class="on-off-switch type4">
<input type="checkbox" id="checkboxEmulateMocap"><label for="checkboxEmulateMocap"></label>
</div>
</td>
<td class="ros-info-cell">
Emulate motion capture
</td>
</table>
</td>
<td class="ros-info-cell">
&nbsp
</td>
</tr>
<tr>
<td class="ros-button-cell">
<button
class="button-push red fullwidth"
id="buttonKillRosMaster"
onclick="callBashScript_outputLabelID_clearOtherLabels_clickOtherButtons('killRosMaster', 'killMasterStatus', 'rosLaunchMasterStatus', ['buttonRosMasterStatus','buttonRosAgentStatus','buttonRosNodeList'])"
>
Kill ROS Master
<div class="div-for-button-highlight-on-touchscreen red"></div>
</button>
</td>
<td class="ros-info-cell">
<div id="killMasterStatus"></div>
</td>
</tr>
</table>
<br>
<hr class="hr-basic navy">
<br>
<table class="ros-table">
<tr>
<td class="ros-button-cell">
<button
......@@ -31,7 +87,7 @@
>
Check for ROS Agent
<div class="div-for-button-highlight-on-touchscreen navy"></div>
</button>
</button>
</td>
<td class="ros-info-cell">
<div id="rosAgentStatus"></div>
......@@ -47,13 +103,29 @@
>
Launch ROS Agent
<div class="div-for-button-highlight-on-touchscreen navy"></div>
</button>
</button>
</td>
<td class="ros-info-cell">
<div id="rosLaunchAgentStatus"></div>
</td>
</tr>
<tr>
<td>
<table>
<td class="switch-cell pad-right">
<div class="on-off-switch type4">
<input type="checkbox" id="checkboxEmulateCrazyRadio"><label for="checkboxEmulateCrazyRadio"></label>
</div>
</td>
<td class="ros-info-cell">
Emulate CrazyRadio
</td>
</table>
</td>
<td class="ros-info-cell">
&nbsp
</td>
</tr>
<tr>
<td class="ros-button-cell">
<button
......@@ -63,13 +135,21 @@
>
Kill ROS Agent
<div class="div-for-button-highlight-on-touchscreen red"></div>
</button>
</button>
</td>
<td class="ros-info-cell">
<div id="killAgentStatus"></div>
</td>
</tr>
</table>
<br>
<hr class="hr-basic navy">
<br>
<table class="ros-table">
<tr>
<td class="ros-button-cell">
<button
......@@ -79,7 +159,7 @@
>
List ROS Nodes
<div class="div-for-button-highlight-on-touchscreen navy"></div>
</button>
</button>
</td>
<td></td>
</tr>
......
web_interface/html/css/layout.css
+ 24
− 0
View file @ fe2b937e
......@@ -140,6 +140,30 @@
//border: 1px solid black;
}
.switch-cell
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
text-align: left;
//border: 1px solid black;
}
.switch-cell.pad-right
{
padding-right: 5px;
}
.switch-cell.pad-left
{
padding-left: 5px;
}
.git-table
{
position: relative;
......
web_interface/html/css/switches.css 0 → 100644
+ 430
− 0
View file @ fe2b937e
/* =========================== */
/* === PLAIN SWITCH === */
/* =========================== */
.on-off-switch-neighbouring-labelon-off-switch-neighbouring-label
{
display: inline;
line-height: 90px;
}
.on-off-switch
{
position: relative;
display: inline-block;
}
.on-off-switch:after, .on-off-switch:before
{
font-family: Arial;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
}
.on-off-switch label
{
position: relative;
display: inline-block;
width: 90px;
height: 42px;
background: #ccc;
border-radius: 21px;
transition: 0.4s;
}
.on-off-switch label:after
{
position: absolute;
left: 0;
top: -5px;
z-index: 2;
content: '';
width: 50px;
height: 50px;
background: #fff;
border-radius: 100%;
box-shadow: 0 0 5px rgba(0,0,0,.2);
transition: 0.4s;
}
.on-off-switch input
{
position: absolute;
left: 0;
top: 0;
z-index: 5;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.on-off-switch input:hover + label:after
{
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15);
}
.on-off-switch input:checked + label:after
{
left: 40px;
}
/* =========================== */
/* === TYPE 1 === */
/* =========================== */
.on-off-switch.type1 input:checked + label
{
background: #376FCB;
}
.on-off-switch.type1 input:checked + label:after
{
background: #4285F4;
}
/* =========================== */
/* === TYPE 2 === */
/* =========================== */
.on-off-switch.type2:after
{
position: absolute;
top: 0px;
right: 15px;
content: '';
color: #666;
font-family: Arial;
font-size: 25px;
line-height: 48px;
font-weight: bold;
}
.on-off-switch.type2 label
{
width: 90px;
height: 40px;
background: none;
border:3px solid #777;
border-radius: 23px;
}
.on-off-switch.type2 label:after
{
top: 4px;
left: auto;
right: 4px;
overflow: hidden;
content: 'YES';
width: 32px;
height: 32px;
color: #fff;
font-family: Arial;
font-size: 25px;
line-height: 32px;
text-align: center;
font-weight: bold;
text-indent: 100px;
background: #777;
box-shadow: none;
border-radius: 16px;
transform: translateX(-50px);
transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
}
.on-off-switch.type2 input:checked + label
{
border-color: #329043;
}
.on-off-switch.type2 input:checked + label:after
{
left: auto;
width: 82px;
text-indent: 0;
background: #3FB454;
transform: translateX(0px);
transition: all 0.4s, width 0.2s 0.4s linear, text-indent 0.3s 0.4s linear;
}
/* =========================== */
/* === TYPE 3 === */
/* =========================== */
.on-off-switch.type3 label
{
width: 90px;
height: 42px;
border: 5px solid #555;
border-radius: 26px;
background: none;
}
.on-off-switch.type3 label:after
{
top: 2px;
left: 2px;
width: 38px;
height: 38px;
background: #555;
box-shadow(none);
}
.on-off-switch.type3 input:checked + label
{
border-color: #329043;
}
.on-off-switch.type3 input:checked + label:after
{
left: 50px;
background: #3FB454;
}
/* =========================== */
/* === TYPE 4 === */
/* =========================== */
.on-off-switch.type4:after
{
position: absolute;
right: 15px;
bottom: 15px;
//content: '\f00c';
//content: '\274E';
//content: '\2715';
//content: '\2716';
//content: '\2717';
content: '\2718';
//content: '\274C';
color: #aaa;
}
.on-off-switch.type4:before
{
position: absolute;
left: 15px;
bottom: 15px;
//content: '\f00d';
//content: '\2705';
//content: '\2713';
content: '\2714';
color: #fff;
z-index: 1;
}
.on-off-switch.type4 label
{
width: 80px;
height: 42px;
border-radius: 21px;
background: #EAEAEA;
box-shadow: 0 0 1px 2px rgba(0,0,0,.15);
}
.on-off-switch.type4 label:after
{
top: 0;
width: 42px;
height: 42px;
}
.on-off-switch.type4 input:checked + label
{
background: #269CE9;
}
.on-off-switch.type4 input:checked + label:after
{
left: 38px;
}
/* SETTINGS FOR WHEN THE SCREEN IS SMALL */
@media screen and (max-width: 420px)
{
/* =========================== */
/* === PLAIN SWITCH === */
/* =========================== */
.on-off-switch-neighbouring-labelon-off-switch-neighbouring-label
{
line-height: 70px;
}
.on-off-switch label
{
width: 70px;
height: 32px;
border-radius: 16px;
}
.on-off-switch label:after
{
width: 40px;
height: 40px;
}
.on-off-switch input:checked + label:after
{
left: 30px;
}
/* =========================== */
/* === TYPE 2 === */
/* =========================== */
.on-off-switch.type2:after
{
top: 0px;
right: 12px;
content: '';
font-size: 18px;
line-height: 40px;
font-weight: bold;
}
.on-off-switch.type2 label
{
width: 70px;
height: 32px;
border:3px solid #777;
border-radius: 19px;
}
.on-off-switch.type2 label:after
{
top: 4px;
left: auto;
right: 4px;
overflow: hidden;
content: 'YES';
width: 24px;
height: 24px;
font-size: 18px;
line-height: 25px;
font-weight: bold;
text-indent: 80px;
border-radius: 12px;
transform: translateX(-38px);
}
.on-off-switch.type2 input:checked + label:after
{
width: 62px;
}
/* =========================== */
/* === TYPE 3 === */
/* =========================== */
.on-off-switch.type3 label
{
width: 70px;
height: 32px;
border: 5px solid #555;
border-radius: 21px;
}
.on-off-switch.type3 label:after
{
top: 2px;
left: 2px;
width: 28px;
height: 28px;
}
.on-off-switch.type3 input:checked + label:after
{
left: 40px;
}
/* =========================== */
/* === TYPE 4 === */
/* =========================== */
.on-off-switch.type4:after
{
right: 10px;
bottom: 10px;
}
.on-off-switch.type4:before
{
left: 10px;
bottom: 10px;
}
.on-off-switch.type4 label
{
width: 60px;
height: 32px;
border-radius: 16px;
}
.on-off-switch.type4 label:after
{
width: 32px;
height: 32px;
}
.on-off-switch.type4 input:checked + label:after
{
left: 28px;
}
}
\ No newline at end of file
web_interface/html/css/switches_from_some_website.css 0 → 100644
+ 548
− 0
View file @ fe2b937e
/*
TAKEN FROM:
https://codepen.io/vineethtrv/pen/QbqMXE
*/
@import "compass/css3";
*, *:after, *:before{
@include box-sizing(border-box);
}
$blue : #4285F4;
$green : #4BD865;
$warning :#FF980F;
body{
text-align: center;
background: #eee;
}
section{
float: left;
min-width: 150px;
width: 33.33%;
padding:25px 0;
min-height: 100px;
}
/*=====================*/
.checkbox{
position: relative;
display: inline-block;
&:after, &:before{
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
}
label{
width: 90px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
@include border-radius(46px);
@include transition(.4s);
&:after{
content: '';
position: absolute;
width: 50px;
height: 50px;
@include border-radius(100%);
left: 0;
top: -5px;
z-index: 2;
background: #fff;
@include box-shadow(0 0 5px rgba(0,0,0,.2));
@include transition(.4s);
}
}
input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
cursor:pointer;
&:hover +label:after{
@include box-shadow(0 2px 15px 0 rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15))
}
&:checked + label{
&:after{
left: 40px;
}
}
}
}
.model-1{
.checkbox{
input:checked + label{
background: $blue/1.2;
&:after{
background: $blue;
}
}
}
}
.model-2{
.checkbox{
label{
width: 75px;
&:after{
top: 0;
width:42px;
height: 42px;
}
}
input:checked + label{
background: $green;
&:after{
left: 35px;
}
}
}
}
.model-3{
.checkbox{
label{
background: #fff;
border:1px solid #eee;
height: 38px;
&:after{
background: #bbb;
top: 3px;
left: 5px;
width:30px;
height: 30px;
}
}
input:checked + label{
&:after{
background: $green/1.2;
left: 55px;
}
}
}
}
.model-4{
.checkbox{
label{
background: #bbb;
height: 25px;
width: 75px;
&:after{
background: #fff;
top: -8px;
width:38px;
height: 38px;
}
}
input:checked + label{
background: #77C2BB;
&:after{
background: #009688;
left: 40px;
}
}
}
}
.model-5{
.checkbox{
label{
background: #bbb;
height: 15px;
width: 85px;
&:after{
background: #fff;
top: -12px;
width:36px;
height: 36px;
}
}
input:hover + label:after{
@include scale(1.4);
}
input:checked + label{
background: $warning/1.4;
&:after{
background: $warning;
left: 50px;
}
}
}
}
.model-6{
.checkbox{
label{
background: #bbb;
height: 2px;
width: 60px;
&:after{
background: #bbb;
top: -16px;
width:32px;
height: 32px;
}
}
input:checked + label{
background: $blue/1.2;
&:after{
background:$blue;
left: 40px;
}
}
}
}
.model-7{
.checkbox{
label{
background: none;
border:5px solid #555;
height: 42px;
&:after{
background: #555;
@include box-shadow(none);
top: 2px;
left: 2px;
width:28px;
height: 28px;
}
}
input:checked + label{
border-color:$green/1.5;
&:after{
background: $green/1.2;
left: 50px;
}
}
}
}
.model-8{
.checkbox{
label{
background: #ddd;
width: 95px;
@include border-radius(10px);
&:after{
background: #fff;
@include border-radius(10px);
top: 0;
width:60px;
height: 42px;
}
}
input:checked + label{
background:$warning;
&:after{
left: 35px;
}
}
}
}
.model-9{
.checkbox{
label{
background: #aaa;
width: 90px;
height: 32px;
@include border-radius(20px);
&:after{
@include border-radius(20px);
top: 0;
width:50px;
height: 32px;
}
}
input:checked + label{
background:$green/2;
&:after{
background: $green/1.4;
left: 40px;
}
}
}
}
.model-10{
.checkbox{
&:after{
content: '\f00d';
color: #aaa;
position: relative;
right: 30px;
bottom: 15px;
}
&:before{
content: '\f00c';
position: relative;
left: 35px;
bottom: 15px;
color: #fff;
z-index: 1;
}
label{
width: 80px;
background: #EAEAEA;
@include box-shadow(0 0 1px 2px rgba(0,0,0,.15));
&:after{
top: 0;
width:42px;
height: 42px;
}
}
input:checked + label{
background: $green;
&:after{
left: 40px;
}
}
}
}
.model-11{
.checkbox{
&:after, &:before{
content: 'OFF';
position: absolute;
right: 10px;
top: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #90201F;
}
&:before{
content: 'ON';
left: -40px;
z-index: 1;
color: $green/2;
}
label{
background: #E3666C;
height: 32px;
@include border-radius(0);
@include box-shadow(0 0 1px 2px rgba(0,0,0,.2));
&:after{
background-color: #ffffff;
@include filter-gradient(#ffffff, #ffffff, horizontal);
@include background-image(linear-gradient(left, #fff 30%,#ddd 45%,#fff 50%,#ddd 55%,#fff 70%));
@include border-radius(0);
@include box-shadow(none !important);
@include transition(.1s);
top: 0;
width:50px;
height: 32px;
}
}
input:checked + label{
background:$green;
&:after{
left: 40px;
}
}
}
}
.model-12{
.checkbox{
background: #2B2B2D;
height: 40px;
width: 160px;
@include border-radius(50px);
&:after, &:before{
content: 'ON';
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: 40px;
font-size: 12px;
}
&:before{
content: 'OFF';
z-index: 1;
}
label{
background: #1E1E1E;
height:10px;
width: 70px;
margin: 0 5px;
@include box-shadow(0 0 2px 2px rgba(0,0,0,.3) inset) ;
&:after{
background-color: #3F4545;
@include background-image(linear-gradient(top, #666 0%,#3F4545 100%));
top: -9px;
width:27px;
height: 27px;
}
&:before{
content: '';
position: absolute;
width: 14px;
height: 14px;
@include border-radius(100%);
@include transition(.4s);
background:#151515;
z-index: 3;
left: 7px;
top: -2px;
}
}
input:checked + label{
&:after{
left: 45px;
}
&:before{
background: #94DA00;
@include box-shadow(0 0 5px #94DA00) ;
left: 52px;
}
}
}
}
.model-13{
.checkbox{
&:after{
content: 'NO';
font-family: Arial;
position: absolute;
color: #666;
top: 12px;
right: 15px;
}
label{
background: none;
border:3px solid #777;
height: 40px;
@include border-radius(20px);
&:after{
content: 'YES';
font-family: Arial;
color: #fff;
line-height: 28px;
text-indent: 100px;
background: #777;
overflow: hidden;
@include box-shadow(none);
@include border-radius(14px);
@include translateX(-50px);
@include transition(all .4s .2s, width .2s linear, text-indent .4s linear);
top: 3px;
left: auto;
right: 2px;
width:28px;
height: 28px;
}
}
input:checked + label{
border-color:$green/1.5;
&:after{
background: $green/1.2;
left: auto;
@include translateX(0px);
@include transition(all .4s, width .2s .4s linear, text-indent .3s .4s linear);
width: 80px;
text-indent: 0;
}
}
}
}
.model-14{
.checkbox{
&:after, &:before{
content: 'OFF';
position: absolute;
right: 10px;
top: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #90201F;
}
&:before{
content: 'ON';
left: -40px;
z-index: 1;
color: $green/2;
}
label{
background:#fff;
height: 32px;
@include border-radius(0);
@include box-shadow(0 0 2px rgba(0,0,0,.2));
&:after{
background: #90201F;
@include border-radius(0);
@include box-shadow(none !important);
@include transition(.3s);
top: 0;
width:40px;
height: 32px;
}
}
input:checked + label{
&:after{
background:$green;
left: 50px;
}
}
}
}
.model-15{
.checkbox{
width: 94px;
height: 34px;
border: 2px solid #ddd;
background:$green/2;
@include border-radius(6px);
overflow: hidden;
&:after, label:before{
content: 'ON';
position: absolute;
left: 10px;
top: 8px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #fff;
}
label:before{
content: 'OFF';
left:auto;
top: 8px;
right: 10px;
z-index: 1;
}
label{
background: #f00;
width: 90px;
height: 32px;
@include border-radius(4px);
&:after{
@include border-radius(4px);
@include box-shadow(none !important);
top: 0;
width:50px;
height: 32px;
}
}
input:checked + label{
@include translateX(40px);
&:after{
left:0;
}
}
}
}
web_interface/html/page_header.html
+ 1
− 0
View file @ fe2b937e
......@@ -22,6 +22,7 @@
<link rel="stylesheet" type="text/css" href="css/layout.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/body.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/buttons.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/switches.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/tabs_main.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/tabs_home.css?ver=0.1" />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment