Skip to content

R
rclnodejs-testing
Commit 310fad7e authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

reworked ui

parent 253e5992
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 107 deletions
public/index.html
View file @ 310fad7e
...@@ -13,87 +13,98 @@ ...@@ -13,87 +13,98 @@
</head> </head>
<body> <body>
<div>
<button id='listmasters'>List masters</button>
<!--<button id='testbutton1'>List slaves</button>-->
<button id='testbutton2'>Get states</button>
<button id='testbutton3'>Test wget</button>
</div>
<hr/>
<div id='controls'>
<table>
<tr>
<td>
<div id='rec_button' class='rec_outer' title='video recording (on-camera storage)'>
<div class='rec_inner'></div>
</div>
</td>
<td>
<div id='snap_button' class='snap_outer' title='take a snapshot (stored on this device)'>
<div class='snap_inner'></div>
</div>
</td>
</tr>
</table>
<br/>
<table>
<tr id="set_format" title='Set image format'>
<td>Format:</td>
<td>
<input type='text'/>
</td>
</tr>
<tr id="set_quality" title='Set compression quality'>
<td>Quality:</td>
<td>
<input type='text'/>
</td>
</tr>
<tr id="set_fps" title='Set fps'>
<td>FPS:</td>
<td>
<input type='text'/>
</td>
</tr>
<tr id="toggle_awb" title='Auto White Balance'>
<td>Auto WB:</td>
<td>
<div id="toggle_awb" class="btn-group btn-group-xs btn-toggle">
<button class="btn btn-xs btn-success border active">ON</button>
<button class="btn btn-xs btn-default border">OFF</button>
</div>
</td>
</tr>
<tr id="toggle_aexp" title='Auto Exposure'>
<td>Auto Exposure:</td>
<td>
<div id="toggle_aexp" class="btn-group btn-group-xs btn-toggle">
<button class="btn btn-xs btn-success border active">ON</button>
<button class="btn btn-xs btn-default border">OFF</button>
</div>
</td>
</tr>
</table>
</div>
<hr/>
<div>
<table>
<tr>
<td>Master:</td>
<td id='masternode'></td>
</tr>
<tr valign='top'>
<td>Slaves:</td>
<td id='slavenodes'></td>
</tr>
</table>
</div>
<hr/>
<div id='previews'>
<table>
</table>
</div>
<div id='nodelist'></div>
</body>
<table id='container'>
<tr>
<td valign='top'>
<div id='controls'>
<table>
<tr>
<td>
<div id='rec_button' class='rec_outer' title='video recording (on-camera storage)'>
<div class='rec_inner'></div>
</div>
</td>
<td>
<div id='snap_button' class='snap_outer' title='take a snapshot (stored on this device)'>
<div class='snap_inner'></div>
</div>
</td>
</tr>
</table>
<br/>
<table>
<tr id="set_format" title='Set image format'>
<td>Format:</td>
<td>
<input type='text' class='input-par' value='-'/>
</td>
</tr>
<tr id="set_quality" title='Set compression quality'>
<td>Quality:</td>
<td>
<input type='text' class='input-par' value='-'/>
</td>
</tr>
<tr id="set_fps" title='Set fps'>
<td>FPS:</td>
<td>
<input type='text' class='input-par' value='-'/>
</td>
</tr>
<tr id="toggle_awb" title='Auto White Balance'>
<td>Auto WB:</td>
<td>
<div id="toggle_awb" class="btn-group btn-group-xs btn-toggle">
<button class="btn btn-xs btn-success border active">ON</button>
<button class="btn btn-xs btn-default border">OFF</button>
</div>
</td>
</tr>
<tr id="toggle_aexp" title='Auto Exposure'>
<td>Auto Exposure:</td>
<td>
<div id="toggle_aexp" class="btn-group btn-group-xs btn-toggle">
<button class="btn btn-xs btn-success border active">ON</button>
<button class="btn btn-xs btn-default border">OFF</button>
</div>
</td>
</tr>
</table>
</div>
</td>
<td valign='top'>
<div id='somebuttons'>
<button id='listmasters'>List masters</button>
<!--<button id='testbutton1'>List slaves</button>-->
<button id='testbutton2'>Get states</button>
<button id='testbutton3'>Test wget</button>
</div>
<div id='mstable'>
<table class='slave_table'>
<tr>
<th colspan='2' style='text-align:center;'>Master</th>
<td colspan='10'>
<div id='masternode'></div>
</td>
</tr>
<tr valign='top'>
<th colspan='2' style='text-align:center;'>Slave</th>
<th style='text-align:center;'>IP</th>
<th style='text-align:center;'>State</th>
</tr>
</table>
</div>
<div id='previews'>
<table>
</table>
</div>
<div id='nodelist'></div>
</td>
</tr>
</table>
</body>
</html> </html>
public/javascripts/index.js
View file @ 310fad7e
...@@ -23,9 +23,9 @@ function init(){ ...@@ -23,9 +23,9 @@ function init(){
padding:'10px 0px' padding:'10px 0px'
}); });
$("#masternode").css({ //$("#masternode").css({
'font-weight': 'bold' // 'font-weight': 'bold'
}); //});
update_master_node(); update_master_node();
parse_url(); parse_url();
...@@ -127,7 +127,10 @@ function parse_cmd_testing(res){ ...@@ -127,7 +127,10 @@ function parse_cmd_testing(res){
if ($(xmlstate).find("error").length!=0){ if ($(xmlstate).find("error").length!=0){
console.log(name+" is not 10393"); console.log(name+" is not 10393");
$("."+name).append(" <b style='color:DarkOrange;'>not 10393</b>");
$("tr."+name+" .slave_state").html("<b style='color:DarkOrange;'>not 10393</b>");
//$("."+name).append();
}else{ }else{
appData.nc10393[name] = { appData.nc10393[name] = {
...@@ -216,26 +219,14 @@ function refresh_histograms(){ ...@@ -216,26 +219,14 @@ function refresh_histograms(){
function parse_cmd_state(res){ function parse_cmd_state(res){
let rtab = [
'<table class="slave_table">',
' <tr>',
' <th>Slave</th>',
' <th>State</th>',
' </tr>'
];
$(res).find('response').each(function(){ $(res).find('response').each(function(){
const name = $(this).find('node').text(); const name = $(this).find('node').text();
const state = $(this).find('state').text(); const state = $(this).find('state').text();
rtab = rtab.concat([ $("tr."+name+" .slave_state").html(state);
'<tr>',
' <td class="name">'+name+'</td>',
' <td class="state">'+state+'</td>',
'</tr>',
]);
}); });
rtab.push('</table>');
$("#nodelist").empty().append(rtab.join('\n'));
} }
function parse_cmd_ifconfig_init(res){ function parse_cmd_ifconfig_init(res){
...@@ -249,6 +240,7 @@ function parse_cmd_ifconfig_init(res){ ...@@ -249,6 +240,7 @@ function parse_cmd_ifconfig_init(res){
update_slave_list(name); update_slave_list(name);
update_ip_list(ip); update_ip_list(ip);
/*
let html = [ let html = [
'<div class=\''+name+'\'>', '<div class=\''+name+'\'>',
'<input class=\'slave_checkbox\' type=\'checkbox\' checked />', '<input class=\'slave_checkbox\' type=\'checkbox\' checked />',
...@@ -256,7 +248,29 @@ function parse_cmd_ifconfig_init(res){ ...@@ -256,7 +248,29 @@ function parse_cmd_ifconfig_init(res){
'(<label class=\'lbl_ip\'>'+ip+'</label>)', '(<label class=\'lbl_ip\'>'+ip+'</label>)',
'</div>' '</div>'
].join('\n'); ].join('\n');
$("#slavenodes").append(html); */
//$("#slavenodes").append(html);
let html = [
'<tr class=\'slaverow '+name+'\'>',
' <td>',
' <input class=\'slave_checkbox\' type=\'checkbox\' checked />',
' </td>',
' <td>',
' <div class=\'lbl_name\'>'+name+'</div>',
' </td>',
' <td>',
' <div class=\'lbl_ip\'>'+ip+'</div>',
' </td>',
' <td>',
' <div class=\'slave_state\'>-</div>',
' </td>',
'</tr>'
].join('\n');
console.log(html);
$("#mstable .slave_table tbody").append(html);
}); });
......
public/stylesheets/style.css
View file @ 310fad7e
body { body {
padding: 10px; padding: 10px 5px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
} }
...@@ -13,12 +13,12 @@ div.inline{ ...@@ -13,12 +13,12 @@ div.inline{
} }
table td { table td {
padding-right:10px; padding:0px 5px;
} }
hr{ hr{
margin-top:5px; margin-top:5px;
margin-bottom:5px; margin-bottom:1px;
} }
input[type="text"]{ input[type="text"]{
...@@ -30,7 +30,8 @@ input[type="checkbox"], input[type="radio"] { ...@@ -30,7 +30,8 @@ input[type="checkbox"], input[type="radio"] {
height: 18px; height: 18px;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
bottom: 3px; bottom: 0px;
margin-top:1px;
} }
.btn.active:focus, .btn:focus{ .btn.active:focus, .btn:focus{
...@@ -126,3 +127,45 @@ input[type="checkbox"], input[type="radio"] { ...@@ -126,3 +127,45 @@ input[type="checkbox"], input[type="radio"] {
.snap_inner:active{ .snap_inner:active{
background: rgb(166,14,14); background: rgb(166,14,14);
} }
.input-par{
width:64px;
text-align:right;
}
#container{
border-collapse:collapse;
}
#controls{
background: rgba(200,220,220,0.5);
padding: 5px;
}
#mstable{
background: rgba(200,220,220,0.5);
padding: 5px;
}
#somebuttons{
background: rgba(200,220,220,0.5);
padding: 5px;
}
#previews{
background: rgba(200,220,220,0.5);
padding: 5px;
}
#nodelist{
background: rgba(200,220,220,0.5);
padding: 5px;
}
.slaverow td {
padding: 0px 10px;
}
.slave_state{
text-align:center;
}
Markdown is supported
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