<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>view</title>
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/testvideo.css">
</head>
<body>
<div class="video_box">
    <div class="nav">
        <div class="nav_left">
            <img src="/static/images/logo.png" alt="">
            <p><span>Presenter Server</span></p>
        </div>
        <div class="nav_right">

        </div>
    </div>
    <div class="video_top">
        <span> >view</span>
    </div>
    <div style="width:100%;height:2px;background-color:#ccc;"></div>
    <div class="video_content">
        <div class="video_fps" id='fpswapper' hidden><p><span> channel name: {{ channel_name }}    </span> <span>&nbsp;&nbsp;&nbsp;&nbsp;fps:</span><span id='fpsval'></span></p></div>
        <div class="video_inner">
            <img src="/static/images/loading.gif" id = "loading"   board = "1" alt=""/>
            <!-- <img  id = "load_media" hidden   width = "1024px" board = "1" alt=""/> -->
            <canvas id="canvas"></canvas>
        </div>
    </div>
</div>
</body>
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script>

var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
$('#fpswapper').hide()
$('#loading').hide()

function startViewVideo(){
    $('#loading').show()
    $('#canvas').hide()

    var image = new Image();
    var wsProtocol = "ws://";
    if (window.location.protocol == "https:"){
           wsProtocol = "wss://";
       }
    var wsUrl =  wsProtocol + window.location.host+"/websocket?req={{req}}&name={{channel_name}}";
    var ws = new WebSocket(wsUrl);
    var onmessageflag = false;

    ws.onopen = function() {
        ws.send('next');
    };
    var count = 0;
    var timestart = 0;

    ws.onmessage = function (evt) {
        $('#loading').hide()
        $('#canvas').show()
        var data = JSON.parse(evt.data)
        var rectangles = []
        if ('ok' == data['status']){
            $('#fpsval').text(data.fps);
            $('#loading').hide();
            // $('#load_media').show();
            var src = "data:image/jpeg;base64," + data['image'];
            // $('#load_media').attr('src', src);
            if (data['type'] == 'video'){
                $('#fpswapper').show();
                rectangles = data['rectangle_list']
            }
            var wantedWidth = 1024
            var img = new Image()
            img.src = src
            img.onload=function(){
                    scale_factor = wantedWidth/img.width
                    canvas.setAttribute("width",1024)
                    canvas.setAttribute("height",img.height*scale_factor)
                    ctx.strokeStyle="yellow"
                    ctx.font="30px serif"
                    ctx.fillStyle="yellow"
                    ctx.strokeStyle="yellow"
                    ctx.font="30px serif"
                    ctx.fillStyle="yellow"
                    ctx.drawImage(img,0,0, wantedWidth, img.height*scale_factor)
                    for (var index in rectangles){
                        var pos= rectangles[index].slice(0,4)  //
                        for (var i in pos){
                            pos[i] = pos[i]*scale_factor 
                        }
                        var msg = rectangles[index].slice(4,5)
                        //add space between msg and face
                        //if upper space is not enough show the msg at the bottom
                        if(50>pos[1]){
                           // ctx.fillText(msg,pos[0],pos[3]+50)
                        }
                        else{
                          //  ctx.fillText(msg,pos[0],pos[1]-10)
                        }
                        ctx.beginPath()
                        // 1/3 space draw line
                        if(msg == 'points'){
                        ctx.strokeStyle = "#0F4F00"
                        ctx.arc(pos[0],pos[1],6,0,2*Math.PI)
                        ctx.fillStyle = "#6CFF33"
                        ctx.fill()

                        }else if(msg == 'hand_box'){
                        ctx.strokeStyle = "#FF0000"
                        ctx.lineWidth = 5
                        ctx.moveTo(pos[0],pos[1])
                        ctx.lineTo(pos[2],pos[1])
                        ctx.moveTo(pos[2],pos[1])
                        ctx.lineTo(pos[2],pos[3])
                        ctx.moveTo(pos[0],pos[1])
                        ctx.lineTo(pos[0],pos[3])
                        ctx.moveTo(pos[0],pos[3])
                        ctx.lineTo(pos[2],pos[3])
                        // }else if(msg == 'hand_point'){
                        // ctx.strokeStyle = "#33FAFF"
                        // ctx.arc(pos[0],pos[1],3,0,2*Math.PI)
                        // ctx.fillStyle = "#33FAFF"
                        // ctx.fill()
                        // }else if(msg == 'hand'){
                        // ctx.strokeStyle = "#FC33FF"
                        // ctx.lineWidth = 3
                        // ctx.moveTo(pos[0],pos[1])
                        // ctx.lineTo(pos[2],pos[3])
                    
                        }else if(msg == 'body'){
                        ctx.strokeStyle = "#FFF700"
                        ctx.lineWidth = 5
                        ctx.moveTo(pos[0],pos[1])
                        ctx.lineTo(pos[2],pos[3])
                        }else{
                            ctx.font = "30px Arial";
                            ctx.lineWidth = 5
                            ctx.fillStyle = "#33FAFF"
                            ctx.fillText(msg, 200, 200);
                        }
                        ctx.stroke()
                    }
            }
           }
        ws.send('next');
    }
}
startViewVideo();

</script>
</html>
