1. improved jp4 preview stability

2. multi cameras single control page

Makefile

 # 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-%)
 CLEANDIRS =   $(SUBDIRS:%=clean-%)
 

src/index/index.php

@@ -189,7 +189,7 @@ $(function(){
 function init_jp4_previews(){
 	$('.port_preview').each(function(){
 		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});
 	});
 }
 

src/jp4-canvas/get-image.php

@@ -40,8 +40,15 @@ header("Location: http://{$_SERVER['HTTP_HOST']}:$port/$rel");
 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');
-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();
 

src/jp4-canvas/jquery-jp4.js

@@ -78,6 +78,8 @@
     var cnv_working = $("<canvas>",{id:"working"});
     var cnv_display = $("<canvas>",{id:"display"});
 
+    obj.busy = false;
+
     // hide working canvas
     cnv_working.css({display:"none"});
     /*
@@ -102,6 +104,7 @@
          * make sure the image data starts with: "data:image/jpeg;base64,"
          * EXIF.js does not like empty data type: "data:;base64,"
          */
+        obj.busy = true;
         process_image(settings.image);
     }else{
         send_request();
@@ -115,7 +118,8 @@
       var http = new XMLHttpRequest();
 
       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();
         //settings.refresh = true;
       }else{
@@ -137,13 +141,17 @@
         }
       };
 
+      obj.busy = true;
       http.send();
 
     }
 
     this.refresh = function(){
+      // skip if busy?
+      if (!obj.busy){
         send_request();
       }
+    }
 
     this.resize = function(w){
 
@@ -244,6 +252,7 @@
             }
 
             $(this).trigger("canvas_ready");
+            obj.busy = false;
 
             if (settings.refresh) {
                 if (DEBUG){
@@ -360,6 +369,7 @@
         }
         //trigger here
         cnv_working.trigger("canvas_ready");
+        obj.busy = false;
 
         if (settings.refresh) {
             if (DEBUG){
@@ -368,6 +378,8 @@
             }
             send_request();
         }
+
+        this.terminate();
       }
 
     }
@@ -392,7 +404,7 @@
       bayer_mode = 0; // r gr / gb b
       if (typeof MakerNote !== 'undefined'){
         bayer_mode = (MakerNote[10]>>2)&0x3;
-        console.log("Bayer mode = "+bayer_mode);
+        //console.log("Bayer mode = "+bayer_mode);
         switch(bayer_mode){
           case 0: BAYER = [["Gr","R"],["B","Gb"]];break;
           case 1: BAYER = [["R","Gr"],["Gb","B"]];break;

src/jp4-canvas/webworker.js

@@ -34,5 +34,6 @@ self.onmessage = function(e) {
   },[reorderedPixels.buffer]);
 
   //Elphel.test();
+  this.close();
 
 };
\ No newline at end of file

src/multicam/Makefile

+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

+<!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

+#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.php

+<?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