Commit b873db0b authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files

link to mjpeg canvas

parent 3bfc37a8

src/index/index.php

+100 −64
Original line number Diff line number Diff line
@@ -92,6 +92,12 @@ 
            text-align:right;

            margin-top: 1px;

        }



        #ll_status{

            color: rgba(0,150,0,1);

            opacity: 0;

        }



    </style>

</head>

<body>
@@ -118,7 +124,7 @@ 
        $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\"><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 .= "</td>";
@@ -202,6 +208,7 @@ 
    <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="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 />

    <br />

    <a href="hwmon.html"           title="hwmon.html">Temperature monitor</a><br />
@@ -225,6 +232,8 @@ 
        init_aexp_toggle();

        init_jp4_previews();

        init_inputs();

        init_lowlatency();

        update_canvas_mjpeg();

    });



    async function check_time(){
@@ -342,6 +351,7 @@ async function init_inputs(){ 
                pvalue = parseInt(1/pvalue*10e7);

                set_param(pname,pvalue,()=>{

                    console.log("ok");

                    update_canvas_mjpeg();

                });

                break;

            default:
@@ -349,6 +359,32 @@ async function init_inputs(){ 
        });

    }



    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 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",

src/index/mjpeg.html

+2 −1
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ 


            const params = new URLSearchParams(location.search);

            const port = params.get('port') || 0;

            const refresh = params.get('refresh') || 5;



            if (params.get('port')===null){

                let s = "";
@@ -53,7 +54,7 @@ 
                ctx.canvas.height = img.height;

            }



            window.setInterval("refreshCanvas()", 5);

            window.setInterval("refreshCanvas()", refresh);



            function refreshCanvas(){

                try{