Skip to content

R
rclnodejs-testing
Commit 253e5992 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

more interface updates

parent 71194915
Show whitespace changes
Inline Side-by-side
Showing with 375 additions and 14 deletions
package.json
View file @ 253e5992
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"start": "node ./bin/www" "start": "node ./bin/www"
}, },
"dependencies": { "dependencies": {
"bootstrap": "3.3.7",
"cookie-parser": "~1.4.3", "cookie-parser": "~1.4.3",
"debug": "~2.6.9", "debug": "~2.6.9",
"express": "~4.16.0", "express": "~4.16.0",
......
public/index.html
View file @ 253e5992
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>ROS2 Testing</title> <title>ROS2 Testing</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css"> <link rel="stylesheet" href="/stylesheets/style.css">
<script type='text/javascript' src='node_modules/jquery/dist/jquery.js'></script> <script type='text/javascript' src='node_modules/jquery/dist/jquery.js'></script>
...@@ -11,6 +13,69 @@ ...@@ -11,6 +13,69 @@
</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> <div>
<table> <table>
<tr> <tr>
...@@ -23,11 +88,10 @@ ...@@ -23,11 +88,10 @@
</tr> </tr>
</table> </table>
</div> </div>
<div> <hr/>
<button id='testbutton'>List masters</button> <div id='previews'>
<!--<button id='testbutton1'>List slaves</button>--> <table>
<button id='testbutton2'>Get states</button> </table>
<!--<button id='testbutton3'>ifconfig</button>-->
</div> </div>
<div id='nodelist'></div> <div id='nodelist'></div>
</body> </body>
......
public/javascripts/index.js
View file @ 253e5992
...@@ -8,9 +8,14 @@ let appData = { ...@@ -8,9 +8,14 @@ let appData = {
master: "-", master: "-",
slaves: [], slaves: [],
ips: [], ips: [],
slaves_selected: [] slaves_selected: [],
nc10393: []
} }
let States = {
recording: false
};
function init(){ function init(){
// css // css
...@@ -23,6 +28,10 @@ function init(){ ...@@ -23,6 +28,10 @@ function init(){
}); });
update_master_node(); update_master_node();
parse_url();
init_controls();
init_awb_toggle();
init_aexp_toggle();
// init button // init button
$('#listmasters').on('click', function(e){ $('#listmasters').on('click', function(e){
...@@ -42,8 +51,17 @@ function init(){ ...@@ -42,8 +51,17 @@ function init(){
$("#nodelist").empty().append(ll.join('\n')); $("#nodelist").empty().append(ll.join('\n'));
$(".master_nodes").on('click',function(e){ $(".master_nodes").on('click',function(e){
update_master_node($(this).html()); update_master_node($(this).html());
rewrite_url();
// reset everything
$("#nodelist").empty(); $("#nodelist").empty();
$("#slavenodes").empty();
appData.slaves = [];
appData.ips = [];
appData.slaves_selected = [];
// go straight with ifconfig // go straight with ifconfig
send_command('ifconfig', appData.slaves, parse_cmd_ifconfig_init); send_command('ifconfig', appData.slaves, parse_cmd_ifconfig_init);
}); });
...@@ -97,6 +115,8 @@ function init(){ ...@@ -97,6 +115,8 @@ function init(){
} }
let refresh_hist_intvl;
function parse_cmd_testing(res){ function parse_cmd_testing(res){
$(res).find('response').each(function(){ $(res).find('response').each(function(){
...@@ -109,6 +129,17 @@ function parse_cmd_testing(res){ ...@@ -109,6 +129,17 @@ function parse_cmd_testing(res){
console.log(name+" is not 10393"); console.log(name+" is not 10393");
$("."+name).append(" <b style='color:DarkOrange;'>not 10393</b>"); $("."+name).append(" <b style='color:DarkOrange;'>not 10393</b>");
}else{ }else{
appData.nc10393[name] = {
port:[
{mux:"none",sensors:["none","none","none","none"]},
{mux:"none",sensors:["none","none","none","none"]},
{mux:"none",sensors:["none","none","none","none"]},
{mux:"none",sensors:["none","none","none","none"]}
]
};
let sensors = state.trim().split('\n'); let sensors = state.trim().split('\n');
//console.log(sensors); //console.log(sensors);
for(let i=0;i<4;i++){ for(let i=0;i<4;i++){
...@@ -116,6 +147,7 @@ function parse_cmd_testing(res){ ...@@ -116,6 +147,7 @@ function parse_cmd_testing(res){
console.log("port "+i+" mux is "+mux); console.log("port "+i+" mux is "+mux);
if (mux==="none"){ if (mux==="none"){
console.log("sensor is "+sensors[5*i+1]); console.log("sensor is "+sensors[5*i+1]);
appData.nc10393[name].port[i].sensors[0] = sensors[5*i+1];
}else{ }else{
console.log("warning: mux is not 'none'"); console.log("warning: mux is not 'none'");
} }
...@@ -124,6 +156,62 @@ function parse_cmd_testing(res){ ...@@ -124,6 +156,62 @@ function parse_cmd_testing(res){
}); });
// now we can init histograms
init_histograms();
refresh_hist_intvl = setInterval(refresh_histograms,100);
}
function init_histograms(){
for (let i in appData['slaves']){
let sname = appData['slaves'][i];
if (appData.nc10393[sname]===undefined){
console.log(sname+" is probably not a 10393");
}else{
// new row
let newrow_id = "row_"+sname;
$("#previews table").append("<tr><th colspan='4' align='left'>"+sname+":</th></tr>");
$("#previews table").append("<tr id='"+newrow_id+"'></tr>");
let ports = appData.nc10393[sname].port;
for (j in ports) {
// new col
let newcol_id = "col_"+sname+"_"+j;
$("#"+newrow_id).append("<td id='"+newcol_id+"'></td>");
if (ports[j].sensors[0]!=="none") {
// add histogram
let ip = appData.ips[i];
let ts = Date.now();
let hst_src = 'http://'+ip+'/pnghist.cgi?sensor_port='+j+'&sqrt=1&scale=5&average=5&height=128&fillz=1&linterpz=0&draw=2&colors=41&_time='+ts;
let img_src = 'http://'+ip+':'+(+j+2323)+'/img?_time='+ts;
$("#"+newcol_id).append("<div>port "+j+"<div>");
$("#"+newcol_id).append("<div><img class=\'hist_preview\' src=\'"+img_src+"\' /><div>");
$("#"+newcol_id).append("<div><img class=\'hist_preview\' src=\'"+hst_src+"\' /><div>");
}
}
}
}
}
function refresh_histograms(){
let ts = Date.now();
$(".hist_preview").each(function(){
let base = $(this).attr("src").slice(0,-13);
$(this).attr("src",base+ts);
});
} }
function parse_cmd_state(res){ function parse_cmd_state(res){
...@@ -257,19 +345,139 @@ function get_ipaddr_from_ifconfig(str){ ...@@ -257,19 +345,139 @@ function get_ipaddr_from_ifconfig(str){
} }
for(var i=0;i<ipaddrs.length;i++){ for(var i=0;i<ipaddrs.length;i++){
if (ifaces[i]!=='lo') {
if ((ifaces[i]!=='lo')&&(ifaces[i].search(/(eth|enp|wlp)/i)===0)) {
res = ipaddrs[i]; res = ipaddrs[i];
}
break; break;
} }
}
return res; return res;
} }
// url related functions
function parse_url(){
let parameters=location.href.replace(/\?/ig,"&").split("&");
for (let i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");
for (let i=1;i<parameters.length;i++) {
switch (parameters[i][0]) {
case "master":
update_master_node(parameters[i][1]);
send_command('ifconfig', appData.slaves, parse_cmd_ifconfig_init);
break;
}
}
}
function rewrite_url(){
let baseURL = "";
if (location.href.lastIndexOf("?")==-1) {
baseURL = location.href;
}else{
baseURL = location.href.substring(0,location.href.lastIndexOf("?"));
}
console.log(baseURL);
const newURL = "?master="+appData.master;
window.history.pushState('index.html', 'Title', baseURL+newURL);
}
function init_controls(){
$("#rec_button").on("click",function(){
States.recording = !States.recording;
rec_button_switch(States.recording);
});
}
function rec_button_switch(state){
if (state){
$("#rec_button").addClass("rec_outer_running");
$("#rec_button .rec_inner").addClass("rec_inner_running");
}else{
$("#rec_button").removeClass("rec_outer_running");
$("#rec_button .rec_inner").removeClass("rec_inner_running");
}
}
function init_awb_toggle(){
$('#toggle_awb').click(function() {
if ($(this).find('.btn.active').html()=="ON"){
wb_en = 0;
}else{
wb_en = 1;
}
button_switch($(this),wb_en);
// will it work without port 0?
//url = "parsedit.php?immediate&sensor_port=0&WB_EN="+wb_en+"&*WB_EN=0xf";
//multi_ajax(url,function(res){
// console.log(this.ip+": awb "+wb_en);
//});
});
}
function init_aexp_toggle(){
$('#toggle_aexp').click(function() {
if ($(this).find('.btn.active').html()=="ON"){
aexp_en = 0;
}else{
aexp_en = 1;
}
button_switch($(this),aexp_en);
// will it work without port 0?
//url = "parsedit.php?immediate&sensor_port=0&AUTOEXP_ON="+aexp_en+"&*AUTOEXP_ON=0xf";
//multi_ajax(url,function(res){
// console.log(this.ip+": aexp "+aexp_en);
//});
});
}
// on or off
function button_switch(btn,state){
//btn = $('#toggle_awb');
if (state==1){
if (btn.find('.btn.active').html()=="OFF"){
btn.find('.btn.active').toggleClass('btn-danger');
// toggle active
btn.find('.btn').toggleClass('active');
btn.find('.btn.active').toggleClass('btn-success');
btn.find('.btn').toggleClass('btn-default');
}
}
if (state==0){
if (btn.find('.btn.active').html()=="ON"){
btn.find('.btn.active').toggleClass('btn-success');
// toggle active
btn.find('.btn').toggleClass('active');
btn.find('.btn.active').toggleClass('btn-danger');
btn.find('.btn').toggleClass('btn-default');
}
}
}
public/stylesheets/style.css
View file @ 253e5992
...@@ -12,6 +12,35 @@ div.inline{ ...@@ -12,6 +12,35 @@ div.inline{
padding: 2px 5px 2px 0px; padding: 2px 5px 2px 0px;
} }
table td {
padding-right:10px;
}
hr{
margin-top:5px;
margin-bottom:5px;
}
input[type="text"]{
margin: 1px;
}
input[type="checkbox"], input[type="radio"] {
width: 18px;
height: 18px;
vertical-align: middle;
position: relative;
bottom: 3px;
}
.btn.active:focus, .btn:focus{
outline:none;
}
.btn-toggle{
padding: 1px 0px;
}
.master_nodes{ .master_nodes{
cursor: pointer; cursor: pointer;
} }
...@@ -31,10 +60,69 @@ div.inline{ ...@@ -31,10 +60,69 @@ div.inline{
text-align: center; text-align: center;
} }
input[type=checkbox], input[type=radio] { .lbl_name, .lbl_ip{
width: 18px; font-weight: normal;
height: 18px; }
vertical-align: middle;
position: relative; .hist_preview{
bottom: 1px; border:1px solid rgba(200,200,200,0.5);
width:200px;
}
/* REC button*/
.rec_outer{
position:relative;
width:48px;
height:48px;
border-radius:50%;
border: 1px solid rgba(100,100,100,1);
background: white;
}
.rec_inner{
position:relative;
top:30%;
left:30%;
width:40%;
height:40%;
border-radius:50%;
background: rgb(166,14,14);
}
.rec_outer:active{
border: 1px solid rgb(166,14,14);
}
.rec_inner_running{
border-radius:2%;
background: white;
}
.rec_outer_running{
background: rgb(166,14,14);
}
/* Snapshot button*/
.snap_outer{
position:relative;
width:48px;
height:48px;
border-radius:50%;
border: 1px solid rgba(100,100,100,1);
background: white;
}
.snap_inner{
position:relative;
top:10%;
left:10%;
width:80%;
height:80%;
border-radius:50%;
background: rgba(150,150,150,1);
}
.snap_inner:active{
background: rgb(166,14,14);
} }
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