dyadmisha
/
AI-on-the-edge-device
spegling av https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Make refernce</title>
</head>

<body style="font-family: arial">
    <h3>Create Reference out of Raw Image</h3>
    <div style="padding-left: 30px">
        <table>
            <tr>
                <td>
                    <input type="button" value="Show actual Reference" onclick="showReference()">          
                </td>
                <td>
                    <input type="button" value="Create new Reference" onclick="loadRawImage()">          
                </td>
            </tr>
            <tr>
                <td>

                    <table>
                        <tr>
                            <td>
                                <input type="submit" id="take" onclick="doTake()" value="Make new raw image (raw.jpg)">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Pre-rotate Angle
                            </td>
                            <td>
                                <input type="number" id="prerotateangle" name="prerotateangle" value=0 min="-360" max="360" onchange="drawRotated()">°
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Fine Alignment
                            </td>
                            <td>
                                <input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">°
                            </td>
                        </tr>
                    </table> 
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <canvas id="canvas"></canvas>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()">
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" src="./gethost.js"></script> 
    <script type="text/javascript" src="./readconfig.js"></script>  

    <script language="JavaScript">
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            imageObj = new Image()
            basepath = "http://192.168.178.26";   
            isActReference = false;

        function doTake(){
            var xhttp = new XMLHttpRequest();
            url = basepath + "/editflow.html?task=test_take";
            if (basepath.length > 0){
                url = url + "&host=" + basepath;
            }
            xhttp.open("GET", url, false);
            xhttp.send();
            loadRawImage();
        }
            
        function loadRawImage(){
            url = basepath + "/fileserver/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
            document.getElementById("finerotate").value = 0;
            document.getElementById("prerotateangle").value = getPreRotate();
            document.getElementById("finerotate").disabled = false;
            document.getElementById("prerotateangle").disabled = false;  
            document.getElementById("updatereferenceimage").disabled = false;
            document.getElementById("take").disabled = false;
//            document.getElementById("ButtonRotate").disabled = false;
            isActReference = false;
            loadCanvas(url);  
            drawRotated();          
        }    

        function showReference(){
            url = basepath + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);;
            document.getElementById("finerotate").value = 0;
            document.getElementById("prerotateangle").value = 0;
            document.getElementById("finerotate").disabled = true;
            document.getElementById("prerotateangle").disabled = true; 
            document.getElementById("updatereferenceimage").disabled = true;
            document.getElementById("take").disabled = true;
//            document.getElementById("ButtonRotate").disabled = true;  
            isActReference = true;                                  
            loadCanvas(url);
            ParseConfig();
            drawRotated();
        }
            
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }			
                
        function SaveReference(){
            if (confirm("Are you sure you want to update the reference image?")) {
                setPreRotate(document.getElementById("prerotateangle").value);
                UpdateConfigFile(basepath);
                var canvas = document.getElementById("canvas");
                drawRotated(false);
                SaveCanvasToImage(canvas, "/config/reference.jpg", true, basepath);
                showReference();
                UpdatePage();
            }
        }

        function loadCanvas(dataURL) {
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                imageObj.onload = function() {
                    canvas.width = this.width;
                    canvas.height = this.height;
                    drawRotated();
                };

                imageObj.src = dataURL;
            }


        function getCoords(elem) { // crossbrowser version
            var box = elem.getBoundingClientRect();
            var body = document.body;
            var docEl = document.documentElement;
            var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
            var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
            var clientTop = docEl.clientTop || body.clientTop || 0;
            var clientLeft = docEl.clientLeft || body.clientLeft || 0;
            var top  = box.top +  scrollTop - clientTop;
            var left = box.left + scrollLeft - clientLeft;
            return { top: Math.round(top), left: Math.round(left) };
        }

        function init() {
            canvas.addEventListener('mousemove', mouseMove, false);    
            basepath = getbasepath();  
            loadConfig(basepath); 
            showReference(); 
        }

        function drawRotated(_grid = true){
            finerot= parseFloat(document.getElementById("finerotate").value);
            prerot = parseFloat(document.getElementById("prerotateangle").value);
            if (finerot == 1) {
                prerot+=1
                finerot = 0
            }
            if (finerot == -1) {
                prerot-=1
                finerot = 0
            }
            degrees = finerot + prerot;
            document.getElementById("finerotate").value =  finerot;
            document.getElementById("prerotateangle").value =  prerot;

            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            context.clearRect(0,0,imageObj.width,imageObj.height);
            context.save();
            context.translate(imageObj.width/2,imageObj.height/2);
            context.rotate(degrees*Math.PI/180);
            context.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2);
            context.restore();
            if (_grid == true && !isActReference){
                drawGrid();
            }

        }

        function drawGrid(){
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            w = canvas.width;
            h = canvas.height;
            ctx.save();
            ctx.strokeStyle = '#00FF00';

            for (i = h/2; i < h; i += 100) 
                {
                ctx.moveTo(0, i);
                ctx.lineTo(w, i);
                ctx.stroke();
                ctx.moveTo(0, h-i);
                ctx.lineTo(w, h-i);
                ctx.stroke();
                }
            for (i = w/2; i < w; i += 100) 
                {
                ctx.moveTo(i, 0);
                ctx.lineTo(i, h);
                ctx.stroke();
                ctx.moveTo(w-i, 0);
                ctx.lineTo(w-i, h);
                ctx.stroke();                }
            ctx.restore();
        }

        function mouseMove(e) {
            drawRotated();
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            zw = getCoords(this);
            x = e.pageX - zw.left;
            y = e.pageY - zw.top;
            
            context.lineWidth = 2;
            context.strokeStyle = "#00FF00";
            context.beginPath(); 
            context.moveTo(0,y);
            context.lineTo(canvas.width, y);
            context.moveTo(x, 0);
            context.lineTo(x, canvas.height);
            context.stroke();            
        }


        init();
    </script>

</body>
</html>