Skip to content

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

link to mjpeg canvas

parent 9763cb4c
Show whitespace changes
Inline Side-by-side
Showing with 102 additions and 65 deletions
src/index/index.php
View file @ bed0f1a3
...@@ -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,7 +291,7 @@ ...@@ -282,7 +291,7 @@
}); });
} }
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"){
...@@ -314,9 +323,9 @@ function init_aexp_toggle(){ ...@@ -314,9 +323,9 @@ function init_aexp_toggle(){
}); });
}); });
} }
async function init_inputs(){ async function init_inputs(){
$("input").change(function(){ $("input").change(function(){
let pname = $(this).attr('pname'); let pname = $(this).attr('pname');
let pvalue = $(this).val(); let pvalue = $(this).val();
...@@ -342,19 +351,46 @@ async function init_inputs(){ ...@@ -342,19 +351,46 @@ async function init_inputs(){
pvalue = parseInt(1/pvalue*10e7); pvalue = parseInt(1/pvalue*10e7);
set_param(pname,pvalue,()=>{ set_param(pname,pvalue,()=>{
console.log("ok"); console.log("ok");
update_canvas_mjpeg();
}); });
break; break;
default: default:
} }
}); });
} }
async function init_lowlatency(){
$("#low_latency_link").click(async ()=>{
await set_param("WOI_WIDTH",1920,()=>{console.log("ok");});
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 set_param(pname,pvalue,callback){ 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({ $.ajax({
url: "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&"+pname+"="+pvalue+"&*"+pname+"=0xf", url: "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&"+pname+"="+pvalue+"&*"+pname+"=0xf",
success: callback success: callback
}); });
} }
</script> </script>
<body> <body>
......
src/index/mjpeg.html
View file @ bed0f1a3
...@@ -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