more interface updates (253e5992) · Commits · Oleg Dzhimiev / rclnodejs-testing

package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -6,6 +6,7 @@
		"start": "node ./bin/www"
		},
		"dependencies": {
		"bootstrap": "3.3.7",
		"cookie-parser": "~1.4.3",
		"debug": "~2.6.9",
		"express": "~4.16.0",

public/index.html

+69 −5

Original line number	Diff line number	Diff line
		@@ -3,6 +3,8 @@
		<head>
		<meta charset="utf-8"/>
		<title>ROS2 Testing</title>

		<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
		<link rel="stylesheet" href="/stylesheets/style.css">

		<script type='text/javascript' src='node_modules/jquery/dist/jquery.js'></script>
		@@ -11,6 +13,69 @@
		</head>

		<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>
		@@ -23,11 +88,10 @@
		</tr>
		</table>
		</div>
		<div>
		<button id='testbutton'>List masters</button>
		<!--<button id='testbutton1'>List slaves</button>-->
		<button id='testbutton2'>Get states</button>
		<!--<button id='testbutton3'>ifconfig</button>-->
		<hr/>
		<div id='previews'>
		<table>
		</table>
		</div>
		<div id='nodelist'></div>
		</body>

public/javascripts/index.js

+211 −3

Original line number	Diff line number	Diff line
		@@ -8,9 +8,14 @@ let appData = {
		master: "-",
		slaves: [],
		ips: [],
		slaves_selected: []
		slaves_selected: [],
		nc10393: []
		}

		let States = {
		recording: false
		};

		function init(){

		// css
		@@ -23,6 +28,10 @@ function init(){
		});

		update_master_node();
		parse_url();
		init_controls();
		init_awb_toggle();
		init_aexp_toggle();

		// init button
		$('#listmasters').on('click', function(e){
		@@ -42,8 +51,17 @@ function init(){
		$("#nodelist").empty().append(ll.join('\n'));

		$(".master_nodes").on('click',function(e){

		update_master_node($(this).html());
		rewrite_url();

		// reset everything
		$("#nodelist").empty();
		$("#slavenodes").empty();
		appData.slaves = [];
		appData.ips = [];
		appData.slaves_selected = [];

		// go straight with ifconfig
		send_command('ifconfig', appData.slaves, parse_cmd_ifconfig_init);
		});
		@@ -97,6 +115,8 @@ function init(){

		}

		let refresh_hist_intvl;

		function parse_cmd_testing(res){

		$(res).find('response').each(function(){
		@@ -109,6 +129,17 @@ function parse_cmd_testing(res){
		console.log(name+" is not 10393");
		$("."+name).append(" <b style='color:DarkOrange;'>not 10393</b>");
		}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');
		//console.log(sensors);
		for(let i=0;i<4;i++){
		@@ -116,6 +147,7 @@ function parse_cmd_testing(res){
		console.log("port "+i+" mux is "+mux);
		if (mux==="none"){
		console.log("sensor is "+sensors[5*i+1]);
		appData.nc10393[name].port[i].sensors[0] = sensors[5*i+1];
		}else{
		console.log("warning: mux is not 'none'");
		}
		@@ -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){
		@@ -257,19 +345,139 @@ function get_ipaddr_from_ifconfig(str){
		}

		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];
		}
		break;
		}

		}

		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

+94 −6

Original line number	Diff line number	Diff line
		@@ -12,6 +12,35 @@ div.inline{
		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{
		cursor: pointer;
		}
		@@ -31,10 +60,69 @@ div.inline{
		text-align: center;
		}

		input[type=checkbox], input[type=radio] {
		width: 18px;
		height: 18px;
		vertical-align: middle;
		.lbl_name, .lbl_ip{
		font-weight: normal;
		}

		.hist_preview{
		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;
		bottom: 1px;
		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);
		}

Admin message