bscheibel
/
ui


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!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>
                    </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>
                <table>
                    {% for k in isos %}
                     <tr>
                        <td><a href="{{ url_for('generate', name=k) }}" > {{ k }} </a> </td>
                    </tr>
                {% endfor %}
                </table>
    </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(array_value);
            set_redis(key, array_value);
        });

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

           // Print entered value in a div box
           $("#result").text($(this).attr('name'));
           set_redis(key, value);

        });


        $("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);

        });

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

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

        });


      function highlight_areas(coords){

       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 = $("#drawing").width();
       let height = $("#drawing").height();
       let x = width*(coords_x/595)-60;
       let y = height*(coords_y/842)+10;
       console.log(width, height);

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

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

        };

     });

 </script>


</body>