bscheibel
/
ui


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!doctype html>
<head>
  <title>Dimension Extraction</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/pdfjs-dist@latest/build/pdf.min.js"></script>
</head>

<body>
<!--<div class="split left">-->
<div class="container">
    <div class="column column-one">
            <h1>Drawing</h1>
            <p> <a href="http://localhost:5000/"> Upload another drawing </a> </p>
        {% if filename %}
             <div class="images">
                <img id="drawing" src="{{ url_for('send_file', filename=filename) }}">
             </div>
         <!--   <input type="file" id="pdf-upload"/>
            <hr/>
            <canvas class="frame"></canvas>-->
        {% else %}
        <h1>no image for whatever reason</h1>
        {% endif %}
    </div>
<!--<div class="split middle">-->
    <div class="column column-two" id="measurements">
            <h1>Extracted Measurements</h1>
                <font size="3" face="Courier New" >
                <form>
                <table>
                    <tr>
                        <td style="text-align:center"><h3>Key Value</h3></td>
                        <td style="text-align:center"><h3>Target Value</h3></td>
                        <td style="text-align:center"><h3>Actual Value</h3></td>
                        <td style="text-align:center"><h3>Relevant Isos</h3></td>
                    </tr>

                        {{ text | safe}}


                 <!--  {% for key in dims %}
                    <td><h4> {{key}} </h4></td>
                        {% for d in dims[key] %}
                    <tr>
                        <td style="text-align:center"><input type="checkbox" name="relevant[]" value="checked"></td>
                        <td style="text-align:center"> {{ d }}</td>
                        <td style="text-align:center"><input type="text" name="{{ d }}" size="10"></td>
                    </tr>
                        {% endfor %}
                    {% endfor %}-->


                </table>
                </form>
                </font>
        <div id="result">Result {{ number }}</div>
    </div>
    <!--<div class="split right">-->
    <div class="column column-three">
            <h1>Additional Infos</h1>
                {{ links }}
    </div>

</div>

    <script>
    function set_redis(key, value) {

        $.ajax({
            type: "POST",
            url: "/redis/set/" + key,
            data: JSON.stringify({ value: value }),
            dataType: "json",
            contentType: "json",
            success: function(data)
            {
                (data.GET);
            }
        });
    }

     function get_redis(key) {
        $.ajax({
            type: "GET",
            url: "redis/get/" + key,
            data: "format=json",
            dataType: "text",
            success: function(data)
            {
                $("#result").text(data.GET);
            }
        });
    }

    </script>

<script>


    $(document).ready(function(){

        $("input[type=number]").on("change keyup input", function(){
            var array_value = [];
            array_value[0] = $(this).attr('name');
            array_value[1] = $(this).val();

            var key = 'last' + "_" +'{{og_filename}}';

            //console.log({{ dim }});
            set_redis(key, array_value);
        });

        $("input[type=checkbox]").change(function(){

           // Print entered value in a div box
           $("#result").text($(this).attr('name'));
           var key1 = 'last' + "_" +'{{og_filename}}';
           var array_value1 = [];

           if ($(this).is(':checked')) {
                console.log($(this).attr('name') + ' is now checked');
                array_value1[0] = 'relevant.' + $(this).attr('name');
                array_value1[1] = true;
            } else {
                console.log($(this).attr('name') + ' is now unchecked');
                array_value1[0] = $(this).attr('name');
                array_value1[1] = false;
            }

           set_redis(key1, array_value1);

        });


        $("input[type=number]").focus(function(){

            // highlight values, does not work so far

            var number = $(this).attr('name');
            var coords = $(this).attr('data-coords');
            highlight_areas(coords, "red");
            var detail = $(this).attr('data-details');
            console.log(detail, "green");
            highlight_details(detail, "green");

        });

        $("input[type=number]").blur(function(){

          $("div").removeClass("red");
          $("div").removeClass("green");

        });


      function highlight_areas(coords, color){

       let w = {{w}}
       let h = {{h}}
       let pos = $("#drawing").position();
       let drawing_x = pos.left;
       let drawing_y = pos.top;
       let array_coords = coords.split(",");
       let coords_x = parseFloat(array_coords[0]);
       let coords_xmax = parseFloat(array_coords[2]);
       let coords_y = parseFloat(array_coords[1]);
       let coords_ymax = parseFloat(array_coords[3]);
       let coords_width = (coords_xmax - coords_x);

       let coords_height = (coords_ymax - coords_y);


       let width = $("#drawing").width();
       let height = $("#drawing").height();
       let rel_width = coords_width/h*width*1.4;
       let rel_height = coords_height/w*height*1.4;

       let x = width*(coords_x*height/width/w);

       let y = height*(coords_y*width/height/h);
       console.log(w, h, rel_width, rel_height,x,y);

       let $point1 = jQuery("<div class="+color+"/>").css({top: (drawing_y + y -5) + 'px', left: (drawing_x + x-5) + 'px', width: rel_width , height: rel_height});

        $(".images").append($point1);

        };

       function highlight_details(coords, color){

       let w = {{w}}
       let h = {{h}}
       let pos = $("#drawing").position();
       let drawing_x = pos.left;
       let drawing_y = pos.top;
       let array_coords = coords.split(",");
       let coords_x = parseFloat(array_coords[0]);
       let coords_y = parseFloat(array_coords[1]);
       let width_div = (parseFloat(array_coords[2]) - parseFloat(array_coords[0]));

       let height_div = (parseFloat(array_coords[3]) - parseFloat(array_coords[1]));


       let width = $("#drawing").width();
       let rel_width = width_div/h*width;


       let height = $("#drawing").height();
       let rel_height = height*height_div/w;

       let x = width*(coords_x*height/width/w);
       let y= height*(coords_y*width/height/h);
       console.log(rel_width, rel_height);
       if (array_coords[3] > 10000) {
           rel_height = height - y;

       }


       let $point = jQuery("<div class="+color+"/>").css({top: (drawing_y + y) + 'px', left: (drawing_x + x) + 'px', width: (rel_width) + 'px', height: (rel_height) + 'px'});

        $(".images").append($point);

        };

     });

 </script>


</body>