Skip to content

E
elphel-web-393
Commit 198a5700 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

1. improved jp4 preview stability 

2. multi cameras single control page
parent 8c90a903
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1069 additions and 29 deletions
Makefile
View file @ 198a5700
# Runs 'make', 'make install', and 'make clean' in specified subdirectories # Runs 'make', 'make install', and 'make clean' in specified subdirectories
SUBDIRS := src/php_top src/python_tests src/debugfs-webgui src/jp4-canvas src/update src/eyesis4pi src/index src/pointers src/snapshot src/jp4-viewer src/photofinish # src1 SUBDIRS := src/php_top src/python_tests src/debugfs-webgui src/jp4-canvas src/update src/eyesis4pi src/index src/pointers src/snapshot src/jp4-viewer src/photofinish src/multicam # src1
INSTALLDIRS = $(SUBDIRS:%=install-%) INSTALLDIRS = $(SUBDIRS:%=install-%)
CLEANDIRS = $(SUBDIRS:%=clean-%) CLEANDIRS = $(SUBDIRS:%=clean-%)
......
src/index/index.php
View file @ 198a5700
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<script src="js/jcanvas.js"></script> <script src="js/jcanvas.js"></script>
<script src="js/exif.js"></script> <script src="js/exif.js"></script>
<script src="js/jquery-jp4.js"></script> <script src="js/jquery-jp4.js"></script>
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
<style> <style>
.port_window{ .port_window{
...@@ -79,15 +79,15 @@ ...@@ -79,15 +79,15 @@
table td { table td {
padding-right:10px; padding-right:10px;
} }
.btn.active:focus, .btn:focus{ .btn.active:focus, .btn:focus{
outline:none; outline:none;
} }
.btn-toggle{ .btn-toggle{
padding: 1px 0px; padding: 1px 0px;
} }
</style> </style>
</head> </head>
<body> <body>
...@@ -99,9 +99,9 @@ ...@@ -99,9 +99,9 @@
$table_contents = ""; $table_contents = "";
$port_links = ""; $port_links = "";
$sample_port = -1; $sample_port = -1;
for($i=0;$i<4;$i++){ for($i=0;$i<4;$i++){
$sensor = $path."/sensor{$i}0"; $sensor = $path."/sensor{$i}0";
if (is_file($sensor)){ if (is_file($sensor)){
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
if ($c!="none"){ if ($c!="none"){
$sample_port = $i; $sample_port = $i;
$sandp = "http://{$_SERVER["SERVER_ADDR"]}:".($port0+$i); $sandp = "http://{$_SERVER["SERVER_ADDR"]}:".($port0+$i);
$href1 = "$sandp/bimg"; $href1 = "$sandp/bimg";
$href2 = "$sandp/mimg"; $href2 = "$sandp/mimg";
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
$master_port = elphel_get_P_value($sample_port,ELPHEL_TRIG_MASTER); $master_port = elphel_get_P_value($sample_port,ELPHEL_TRIG_MASTER);
$awb_on = elphel_get_P_value($master_port,ELPHEL_WB_EN); $awb_on = elphel_get_P_value($master_port,ELPHEL_WB_EN);
$aexp_on = elphel_get_P_value($master_port,ELPHEL_AUTOEXP_ON); $aexp_on = elphel_get_P_value($master_port,ELPHEL_AUTOEXP_ON);
echo "<table><tr>$table_contents</tr></table>\n"; echo "<table><tr>$table_contents</tr></table>\n";
echo "<br/>"; echo "<br/>";
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
<button class="btn btn-xs <?php echo (!$aexp_on)?"btn-danger active":"btn-default";?>">OFF</button> <button class="btn btn-xs <?php echo (!$aexp_on)?"btn-danger active":"btn-default";?>">OFF</button>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
<br /> <br />
<a href="autocampars.php" title="autocampars.php">Parameter Editor</a><br /> <a href="autocampars.php" title="autocampars.php">Parameter Editor</a><br />
...@@ -189,7 +189,7 @@ $(function(){ ...@@ -189,7 +189,7 @@ $(function(){
function init_jp4_previews(){ function init_jp4_previews(){
$('.port_preview').each(function(){ $('.port_preview').each(function(){
index = parseInt($(this).attr("index")); index = parseInt($(this).attr("index"));
$(this).jp4({ip:"127.0.0.1",port:2323+index,width:300,fast:true,lowres:4}); $(this).jp4({ip:location.host,port:2323+index,width:300,fast:true,lowres:4});
}); });
} }
...@@ -201,7 +201,7 @@ function init_awb_toggle(){ ...@@ -201,7 +201,7 @@ function init_awb_toggle(){
}else{ }else{
$(this).find('.btn.active').toggleClass('btn-danger'); $(this).find('.btn.active').toggleClass('btn-danger');
} }
// toggle active // toggle active
$(this).find('.btn').toggleClass('active'); $(this).find('.btn').toggleClass('active');
...@@ -214,7 +214,7 @@ function init_awb_toggle(){ ...@@ -214,7 +214,7 @@ function init_awb_toggle(){
} }
$(this).find('.btn').toggleClass('btn-default'); $(this).find('.btn').toggleClass('btn-default');
url = "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&WB_EN="+wb_en+"&*WB_EN=0xf"; url = "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&WB_EN="+wb_en+"&*WB_EN=0xf";
$.ajax({ $.ajax({
...@@ -235,7 +235,7 @@ function init_aexp_toggle(){ ...@@ -235,7 +235,7 @@ function init_aexp_toggle(){
}else{ }else{
$(this).find('.btn.active').toggleClass('btn-danger'); $(this).find('.btn.active').toggleClass('btn-danger');
} }
// toggle active // toggle active
$(this).find('.btn').toggleClass('active'); $(this).find('.btn').toggleClass('active');
...@@ -248,7 +248,7 @@ function init_aexp_toggle(){ ...@@ -248,7 +248,7 @@ function init_aexp_toggle(){
} }
$(this).find('.btn').toggleClass('btn-default'); $(this).find('.btn').toggleClass('btn-default');
url = "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&AUTOEXP_ON="+aexp_en+"&*AUTOEXP_ON=0xf"; url = "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&AUTOEXP_ON="+aexp_en+"&*AUTOEXP_ON=0xf";
$.ajax({ $.ajax({
...@@ -257,7 +257,7 @@ function init_aexp_toggle(){ ...@@ -257,7 +257,7 @@ function init_aexp_toggle(){
console.log("aexp "+(aexp_en?"on":"off")); console.log("aexp "+(aexp_en?"on":"off"));
} }
}); });
}); });
} }
......
src/jp4-canvas/get-image.php
View file @ 198a5700
...@@ -34,15 +34,22 @@ if (isset($_GET['ip'])) ...@@ -34,15 +34,22 @@ if (isset($_GET['ip']))
$ip = $_GET['ip']; $ip = $_GET['ip'];
else else
$ip = "localhost"; $ip = "localhost";
/* /*
header("Location: http://{$_SERVER['HTTP_HOST']}:$port/$rel"); header("Location: http://{$_SERVER['HTTP_HOST']}:$port/$rel");
die(); die();
*/ */
$port0 = 2323;
$pointers = elphel_get_circbuf_pointers(intval($port)-$port0,1);
$pointer = $pointers[count($pointers)-1]['circbuf_pointer'];
// allow CORS
header('Access-Control-Allow-Origin: *');
header('Content-type:image/jpeg'); header('Content-type:image/jpeg');
echo file_get_contents("http://$ip:$port/$rel"); echo file_get_contents("http://$ip:$port/$pointer/$rel");
//echo file_get_contents("http://$ip:$port/$rel");
die(); die();
?> ?>
src/jp4-canvas/jquery-jp4.js
View file @ 198a5700
...@@ -78,6 +78,8 @@ ...@@ -78,6 +78,8 @@
var cnv_working = $("<canvas>",{id:"working"}); var cnv_working = $("<canvas>",{id:"working"});
var cnv_display = $("<canvas>",{id:"display"}); var cnv_display = $("<canvas>",{id:"display"});
obj.busy = false;
// hide working canvas // hide working canvas
cnv_working.css({display:"none"}); cnv_working.css({display:"none"});
/* /*
...@@ -102,6 +104,7 @@ ...@@ -102,6 +104,7 @@
* make sure the image data starts with: "data:image/jpeg;base64," * make sure the image data starts with: "data:image/jpeg;base64,"
* EXIF.js does not like empty data type: "data:;base64," * EXIF.js does not like empty data type: "data:;base64,"
*/ */
obj.busy = true;
process_image(settings.image); process_image(settings.image);
}else{ }else{
send_request(); send_request();
...@@ -115,7 +118,8 @@ ...@@ -115,7 +118,8 @@
var http = new XMLHttpRequest(); var http = new XMLHttpRequest();
if (settings.port!=""&&settings.ip!=""){ if (settings.port!=""&&settings.ip!=""){
rq = "/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=bimg&ts="+Date.now(); //rq = "/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=bimg&ts="+Date.now();
rq = "http://"+settings.ip+"/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();
//rq = "get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now(); //rq = "get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();
//settings.refresh = true; //settings.refresh = true;
}else{ }else{
...@@ -137,12 +141,16 @@ ...@@ -137,12 +141,16 @@
} }
}; };
obj.busy = true;
http.send(); http.send();
} }
this.refresh = function(){ this.refresh = function(){
send_request(); // skip if busy?
if (!obj.busy){
send_request();
}
} }
this.resize = function(w){ this.resize = function(w){
...@@ -244,6 +252,7 @@ ...@@ -244,6 +252,7 @@
} }
$(this).trigger("canvas_ready"); $(this).trigger("canvas_ready");
obj.busy = false;
if (settings.refresh) { if (settings.refresh) {
if (DEBUG){ if (DEBUG){
...@@ -360,6 +369,7 @@ ...@@ -360,6 +369,7 @@
} }
//trigger here //trigger here
cnv_working.trigger("canvas_ready"); cnv_working.trigger("canvas_ready");
obj.busy = false;
if (settings.refresh) { if (settings.refresh) {
if (DEBUG){ if (DEBUG){
...@@ -368,6 +378,8 @@ ...@@ -368,6 +378,8 @@
} }
send_request(); send_request();
} }
this.terminate();
} }
} }
...@@ -392,7 +404,7 @@ ...@@ -392,7 +404,7 @@
bayer_mode = 0; // r gr / gb b bayer_mode = 0; // r gr / gb b
if (typeof MakerNote !== 'undefined'){ if (typeof MakerNote !== 'undefined'){
bayer_mode = (MakerNote[10]>>2)&0x3; bayer_mode = (MakerNote[10]>>2)&0x3;
console.log("Bayer mode = "+bayer_mode); //console.log("Bayer mode = "+bayer_mode);
switch(bayer_mode){ switch(bayer_mode){
case 0: BAYER = [["Gr","R"],["B","Gb"]];break; case 0: BAYER = [["Gr","R"],["B","Gb"]];break;
case 1: BAYER = [["R","Gr"],["Gb","B"]];break; case 1: BAYER = [["R","Gr"],["Gb","B"]];break;
......
src/jp4-canvas/webworker.js
View file @ 198a5700
...@@ -7,11 +7,11 @@ self.onmessage = function(e) { ...@@ -7,11 +7,11 @@ self.onmessage = function(e) {
var H = e.data.height; var H = e.data.height;
var Mosaic = e.data.mosaic; var Mosaic = e.data.mosaic;
var Format = e.data.format; var Format = e.data.format;
var settings = e.data.settings; var settings = e.data.settings;
var Pixels = new Uint8Array(e.data.pixels); var Pixels = new Uint8Array(e.data.pixels);
if (settings.lowres==0){ if (settings.lowres==0){
var reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast); var reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast);
//reorder first then downscale //reorder first then downscale
...@@ -24,15 +24,16 @@ self.onmessage = function(e) { ...@@ -24,15 +24,16 @@ self.onmessage = function(e) {
W = W/2; W = W/2;
H = H/2; H = H/2;
} }
Elphel.Pixels.applySaturation(reorderedPixels,W,H,2); Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);
postMessage({ postMessage({
width: W, width: W,
height: H, height: H,
pixels: reorderedPixels.buffer pixels: reorderedPixels.buffer
},[reorderedPixels.buffer]); },[reorderedPixels.buffer]);
//Elphel.test(); //Elphel.test();
this.close();
}; };
\ No newline at end of file
src/multicam/Makefile 0 → 100644
View file @ 198a5700
DOCUMENTROOT=$(DESTDIR)/www/pages/multicam
OWN = -o root -g root
INSTDOCS = 0644
INSTALL = install
DOCS= index.html \
multicam.js \
multicam.css \
multicam.php
all:
@echo "make all in src"
install:
@echo "make install in src"
$(INSTALL) $(OWN) -d $(DOCUMENTROOT)
$(INSTALL) $(OWN) -m $(INSTDOCS) $(DOCS) $(DOCUMENTROOT)
clean:
@echo "make clean in src"
src/multicam/index.html 0 → 100644
View file @ 198a5700
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Multi cameras control</title>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/elphel.js"></script>
<script src="../js/jcanvas.js"></script>
<script src="../js/exif.js"></script>
<script src="../js/jquery-jp4.js"></script>
<link rel="stylesheet" href="../js/bootstrap/css/bootstrap.css">
<script type='text/javascript' src='multicam.js'></script>
<link rel='stylesheet' type='text/css' href='multicam.css'></link>
</head>
<body>
<div id='settings'>
<table>
<tr>
<td>
<div id='rec_button' class='rec_outer' title='start recording'>
<div class='rec_inner'></div>
</div>
</td>
</tr>
<tr id="toggle_awb" title='Auto White Balance'>
<td>Auto WB:</td>
<td>
<div id="toggle_awb" class="btn-group btn-toggle">
<button class="btn btn-xs btn-success active">ON</button>
<button class="btn btn-xs btn-default">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-toggle">
<button class="btn btn-xs btn-success active">ON</button>
<button class="btn btn-xs btn-default">OFF</button>
</div>
</td>
</tr>
<tr>
<td hidden>
<br/>
<div id='edit_addrs_input' hidden>
<div id='eai_text_div'>
<textarea id='eai_text' rows='4' cols='30'></textarea>
</div>
<div id='eai_ok_div'>
<button id='eai_ok' class="btn btn-sm btn-success">ok</button>
</div>
</div>
<div id='edit_addrs' title='edit ip addresses'>
<button id='ea_btn' class="btn btn-sm btn-success">+</button>
</div>
<div id='addrs'>
</div>
</td>
</tr>
</table>
</div>
<div id='display'>
<div id='display_status'></div>
<hr/>
<div id='display_previews'></div>
</div>
</body>
</html>
\ No newline at end of file
src/multicam/multicam.css 0 → 100644
View file @ 198a5700
#settings{
padding:5px;
}
table td {
padding-right:10px;
}
.btn.active:focus, .btn:focus{
outline:none;
}
.btn-toggle{
padding: 1px 0px;
}
#edit_addrs{
padding: 2px;
}
#ea_btn{
outline:none;
font-weight:bold;
}
#addrs{
padding: 0px 2px 2px 2px;
}
#eai_text{
resize:none;
margin:0px;
}
#edit_addrs_input{
position:absolute;
top:2px;
left:2px;
border:1px solid rgb(169,169,169);
padding:2px;
background: white;
z-index: 100;
}
#eai_text_div{
line-height:14px;
}
#rec_start{
outline:none;
border: 0px solid #00AA66;
}
.rec_outer{
position:relative;
width:50px;
height:50px;
border-radius:50%;
border: 1px solid rgba(100,100,100,1);
background: white;
}
.rec_inner{
position:relative;
top:25%;
left:25%;
width:50%;
height:50%;
border-radius:50%;
background: rgb(166,14,14);
}
.rec_outer:active{
border: 1px solid rgb(166,14,14);
}
.rec_outer_active{
border: 1px solid rgb(166,14,14);
}
.rec_inner_running{
top:5%;
left:5%;
width:90%;
height:90%;
}
.port_preview{
width:200px;
}
.hist_preview{
border:1px solid rgba(200,200,200,0.5);
width:200px;
}
#display{
padding:5px;
}
hr{
margin-top:2px;
margin-bottom:2px;
}
#display_status th, #s_device{
text-align:center;
}
#s_space{
text-align:right;
}
#display_status td, #display_status th{
border:1px solid rgba(100,100,100,0.8);
padding:2px 5px;
}
src/multicam/multicam.js 0 → 100644
View file @ 198a5700
This diff is collapsed.
src/multicam/multicam.php 0 → 100644
View file @ 198a5700
<?php
$cmd = "donothing";
if (isset($_GET['cmd']))
$cmd = $_GET['cmd'];
else if (isset($argv[1]))
$cmd = $argv[1];
$config = "/var/volatile/html/multicam.xml";
// path to sysfs for port scanning
$portspath = "/sys/devices/soc0/elphel393-detect_sensors@0";
// total number of ports in 10393
$nports = 4;
$port0 = 2323;
// extract ip addresses
if ($_SERVER['REQUEST_METHOD']==="POST"){
$list = file_get_contents("php://input");
}else{
if (isset($_GET['ip'])){
$list = $_GET['ip'];
}else{
$list = $_SERVER['SERVER_ADDR'];
}
}
$ips = explode(',',$list);
// allow CORS
header('Access-Control-Allow-Origin: *');
switch($cmd){
case "ports":
print(getports());
break;
case "write":
// write
// use get and post requests
write_config($config,$ips);
print("ok");
break;
case "read":
default:
// will never need read - config is in http://camip/var/multicam.xml
// read
print(file_get_contents($config));
}
function write_config($config,$ips){
$list = "";
foreach($ips as $ip){
$list .= "\t<camera>$ip</camera>\n";
}
$xml = "<?xml version='1.0' standalone='yes'?>\n";
$xml .= "<Document>\n";
$xml .= $list;
$xml .= "</Document>\n";
file_put_contents($config,$xml);
return 0;
}
function getports(){
global $nports, $portspath, $port0;
$res = "\t<camera ip='".$_SERVER['SERVER_ADDR']."'>\n";
for($i=0;$i<$nports;$i++){
$sensor = $portspath."/sensor{$i}0";
// the file is always there actually
if(is_file($sensor)){
$c = trim(file_get_contents($sensor));
$p = $port0+$i;
$res .= "\t\t<port index='$i' port='$p'>$c</port>\n";
}
}
$res .= "\t</camera>\n";
$xml = "<?xml version='1.0' standalone='yes'?>\n";
$xml .= "<Document>\n";
$xml .= $res;
$xml .= "</Document>\n";
return $xml;
}
?>
\ No newline at end of file
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