Commit bed0f1a3 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev

link to mjpeg canvas

parent 9763cb4c
...@@ -92,6 +92,12 @@ ...@@ -92,6 +92,12 @@
text-align:right; text-align:right;
margin-top: 1px; margin-top: 1px;
} }
#ll_status{
color: rgba(0,150,0,1);
opacity: 0;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -118,7 +124,7 @@ ...@@ -118,7 +124,7 @@
$table_contents .= "<div class='port_window img_window'>"; $table_contents .= "<div class='port_window img_window'>";
//$table_contents .= "<div><a href=\"$href1\"><img class='img_window' src='$href1' style='width:300px'/></a></div>"; //$table_contents .= "<div><a href=\"$href1\"><img class='img_window' src='$href1' style='width:300px'/></a></div>";
$table_contents .= "<div><a href=\"$href1\"><div index='$i' class='port_preview'></div></a></div>"; $table_contents .= "<div><a href=\"$href1\"><div index='$i' class='port_preview'></div></a></div>";
$table_contents .= "<div style='text-align:center;'>port $i: <a title='single image' href='$href1'>bimg</a>, <a title='multi-part image stream (M-JPEG)' href='$href2'>mimg</a></div>"; $table_contents .= "<div style='text-align:center;'>port $i: <a title='single image' href='$href1'>bimg</a>, <a title='multi-part image stream (M-JPEG). Played in browser as is.' href='$href2'>mimg</a>, <a href=\"mjpeg.html?port=$i\" title='MJPEG stream played in html canvas' class='canvas_mjpeg'>canvas</a></div>";
$table_contents .= "</div>"; $table_contents .= "</div>";
$table_contents .= "</td>"; $table_contents .= "</td>";
...@@ -202,6 +208,7 @@ ...@@ -202,6 +208,7 @@
<a href="camogmgui.php" title="Store video/images to the camera's storage">Recorder</a><br /> <a href="camogmgui.php" title="Store video/images to the camera's storage">Recorder</a><br />
<a href="snapshot/" title="Take a snapshot and download from the camera">Snapshot</a><br /> <a href="snapshot/" title="Take a snapshot and download from the camera">Snapshot</a><br />
<a href="raw.php" title="Take a snapshot and download raw pixel data from the camera">Snapshot (raw image data)</a><br /> <a href="raw.php" title="Take a snapshot and download raw pixel data from the camera">Snapshot (raw image data)</a><br />
<a id="low_latency_link" href="#" title="For 5 MPix sensors">Quick low latency setup (1920x1088, 30fps)</a> <span id='ll_status'>settings applied</span><br />
<a href="photofinish/" title="Scanline mode demo">Photo finish demo</a><br /> <a href="photofinish/" title="Scanline mode demo">Photo finish demo</a><br />
<br /> <br />
<a href="hwmon.html" title="hwmon.html">Temperature monitor</a><br /> <a href="hwmon.html" title="hwmon.html">Temperature monitor</a><br />
...@@ -225,6 +232,8 @@ ...@@ -225,6 +232,8 @@
init_aexp_toggle(); init_aexp_toggle();
init_jp4_previews(); init_jp4_previews();
init_inputs(); init_inputs();
init_lowlatency();
update_canvas_mjpeg();
}); });
async function check_time(){ async function check_time(){
...@@ -282,79 +291,106 @@ ...@@ -282,79 +291,106 @@
}); });
} }
function init_aexp_toggle(){ function init_aexp_toggle(){
$('#toggle_aexp').click(function() { $('#toggle_aexp').click(function() {
if ($(this).find('.btn.active').html()=="ON"){ if ($(this).find('.btn.active').html()=="ON"){
$(this).find('.btn.active').toggleClass('btn-success'); $(this).find('.btn.active').toggleClass('btn-success');
}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');
if ($(this).find('.btn.active').html()=="ON"){ if ($(this).find('.btn.active').html()=="ON"){
aexp_en = 1; aexp_en = 1;
$(this).find('.btn.active').toggleClass('btn-success'); $(this).find('.btn.active').toggleClass('btn-success');
}else{ }else{
aexp_en = 0; aexp_en = 0;
$(this).find('.btn.active').toggleClass('btn-danger'); $(this).find('.btn.active').toggleClass('btn-danger');
} }
$(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({
url: url,
success: function(){
console.log("aexp "+(aexp_en?"on":"off"));
}
});
$.ajax({
url: url,
success: function(){
console.log("aexp "+(aexp_en?"on":"off"));
}
}); });
}
}); async function init_inputs(){
} $("input").change(function(){
let pname = $(this).attr('pname');
async function init_inputs(){ let pvalue = $(this).val();
$("input").change(function(){
let pname = $(this).attr('pname'); switch(pname){
let pvalue = $(this).val(); case "AUTOEXP_EXP_MAX":
pvalue = parseInt(pvalue*1000);
switch(pname){ set_param(pname,pvalue,()=>{
case "AUTOEXP_EXP_MAX": console.log("ok");
pvalue = parseInt(pvalue*1000); });
set_param(pname,pvalue,()=>{ break;
console.log("ok"); case "EXPOS":
}); pvalue = parseInt(pvalue*1000);
break; // autoexp off
case "EXPOS": if ($('#toggle_aexp').find('.btn.active').html()==="ON"){
pvalue = parseInt(pvalue*1000); $('#toggle_aexp').click();
// autoexp off }
if ($('#toggle_aexp').find('.btn.active').html()==="ON"){ set_param(pname,pvalue,()=>{
$('#toggle_aexp').click(); console.log("ok");
});
break;
case "TRIG_PERIOD":
pvalue = parseInt(1/pvalue*10e7);
set_param(pname,pvalue,()=>{
console.log("ok");
update_canvas_mjpeg();
});
break;
default:
} }
set_param(pname,pvalue,()=>{ });
console.log("ok"); }
});
break;
case "TRIG_PERIOD":
pvalue = parseInt(1/pvalue*10e7);
set_param(pname,pvalue,()=>{
console.log("ok");
});
break;
default:
}
});
}
async function set_param(pname,pvalue,callback){ async function init_lowlatency(){
$.ajax({ $("#low_latency_link").click(async ()=>{
url: "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&"+pname+"="+pvalue+"&*"+pname+"=0xf", await set_param("WOI_WIDTH",1920,()=>{console.log("ok");});
success: callback await set_param("WOI_HEIGHT",1088,()=>{console.log("ok");});
}); await set_param("TRIG_PERIOD",3333333,()=>{console.log("ok");});
} $("#ll_status").css({opacity:1}).animate({opacity:0},1000);
update_canvas_mjpeg();
});
}
async function update_canvas_mjpeg(){
let refresh = parseInt(1/$("#fps").val()*1000);
$(".canvas_mjpeg").each(function(){
let href = $(this).attr("href");
href = href.split("?");
let p = new URLSearchParams(href[1]);
let port = p.get("port");
$(this).attr("href",href[0]+"?port="+port+"&refresh="+refresh);
});
}
async function set_param(pname,pvalue,callback){
$.ajax({
url: "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&"+pname+"="+pvalue+"&*"+pname+"=0xf",
success: callback
});
}
</script> </script>
<body> <body>
......
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const port = params.get('port') || 0; const port = params.get('port') || 0;
const refresh = params.get('refresh') || 5;
if (params.get('port')===null){ if (params.get('port')===null){
let s = ""; let s = "";
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
ctx.canvas.height = img.height; ctx.canvas.height = img.height;
} }
window.setInterval("refreshCanvas()", 5); window.setInterval("refreshCanvas()", refresh);
function refreshCanvas(){ function refreshCanvas(){
try{ try{
......
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