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

package.json

+1 −0

Original line number	Original line	Diff line number	Diff line
	@@ -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

+69 −5

Original line number	Original line	Diff line number	Diff line
	@@ -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 @@
	</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 @@
	</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

+211 −3

Original line number	Original line	Diff line number	Diff line
	@@ -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(){
	});		});

	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(){
	$("#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(){

	}		}

			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){
	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){
	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){

	});		});

			// 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){
	}		}

	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

+94 −6

Original line number	Original line	Diff line number	Diff line
	@@ -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{
	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;
			.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;		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