bscheibel
/
ui


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!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>
</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 src="{{ url_for('send_file', filename=filename) }}" id="drawing"/>
            <div class="red" ></div>
        </div>
        {% 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</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>


    let pos = $("#drawing").position();

    $(document).ready(function(){

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


            var key = $(this).attr('name');
            $("#result").text($(this).val());
            $("#result").append($(this).attr('name'));

        });

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

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

        });


        $("input#measurements").on("hover",function(){

            // highlight values, does not work so far

            var number = $(this).attr('name');
            var coords = $(this).attr('data-coords');
            highlight_areas(coords, pos)

        });


      function highlight_areas(coords){

       let x = pos.left;
       let y = pos.top;
       console.log(coords)

        /*$('#yourdiv').append('<img src="/path/to/your/image.jpg"' + /
        'style="width:auto;height:auto;position:absolute;' + /
        'left:' + x + ';top:'+ y +'" />");*/


        };

     });

   </script>

</body>