fixup! pdf viewing does not work so far

app/static/css/style.css

@@ -31,6 +31,7 @@ img {
 
 .images{
   flex: 1 1 auto;
+  padding: 0;
   min-width: 15em;
   max-width: 800px;
 }
@@ -60,15 +61,25 @@ img {
 }
 
 .red{
+/*padding: 10;*/
 background: red;
 opacity: 0.4;
-width: 20px;
+position: absolute;
+left: 0px;
+top: 0px;
+}
+
+.green{
+background: red;
+opacity: 0.2;
+width: 20;
 height: 20px;
 position: absolute;
 left: 0px;
 top: 0px;
 }
 
+
 .frame {
   flex: 1 1 auto;
   border: 0;

app/templates/show_image_old_working.html

@@ -33,6 +33,7 @@
                         <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}}
@@ -58,13 +59,7 @@
     <!--<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>
+                {{ links }}
     </div>
 
 </div>
@@ -112,15 +107,28 @@
 
             var key = 'last' + "_" +'{{og_filename}}';
 
-            console.log(array_value);
+            //console.log({{ dim }});
             set_redis(key, array_value);
         });
 
-        $("input[type=checkbox]").on("change keyup input", function(){
+        $("input[type=checkbox]").change(function(){
 
            // Print entered value in a div box
            $("#result").text($(this).attr('name'));
-           set_redis(key, value);
+           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);
 
         });
 
@@ -132,33 +140,87 @@
 
             var number = $(this).attr('name');
             var coords = $(this).attr('data-coords');
-            highlight_areas(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){
+      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 x = width*(coords_x/595)-60;
-       let y = height*(coords_y/842)+10;
-       console.log(width, 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='red'/>").css({top: (drawing_y + y) + 'px', left: (drawing_x + x) + 'px'})
+       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);
 

app/templates/show_pdf.html

@@ -4,24 +4,26 @@
 <!--
 <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
  -->
-<!-- <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>das funktioniert!!!!!
+
+<!--<script type="javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js"></script>
+ das funktioniert!!!!!
+<script type="javascript" src="https://unpkg.com/pdfjs-dist@latest/build/pdf.js" ></script>
 <script type="javascript" src="{{ url_for('static', filename='js/pdf.js') }}"></script>-->
 
 
-<script type="javascript" src="https://unpkg.com/pdfjs-dist@latest/build/pdf.js" ></script>
-https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js
+<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
 <script type="javascript" src="{{ url_for('static', filename='js/text_layer_builder.js') }}"></script>
 <script type="javascript" src="{{ url_for('static', filename='js/ui_utils.js') }}"></script>
 <body>
 <canvas id="the-canvas"></canvas>
 <script>
 
+
 var url = "{{ url_for('send_file', filename=og_filename) }}";
 
 var pdfjsLib = window['pdfjs-dist/build/pdf'];
-pdfjsLib.disableWorker = true;
 
-pdfjsLib.getDocument(url).then(function(pdf){
+pdfjsLib.getDocument(url).promise.then(function(pdf){
     var page_num = 1;
     pdf.getPage(page_num).then(function(page){
         var scale = 1.5;
@@ -45,7 +47,7 @@ pdfjsLib.getDocument(url).then(function(pdf){
         });
 
         page.getTextContent().then(function(textContent){
-           console.log( textContent );
+           console.log( textContent.items[0] );
             var textLayer = new TextLayerBuilder({
                 textLayerDiv : $textLayerDiv.get(0),
                 pageIndex : page_num - 1,

app/views.py

@@ -4,6 +4,7 @@ from flask import request, redirect, url_for, send_from_directory, render_templa
 import subprocess
 import redis
 import random
+import PyPDF2
 import json
 import os
 import json
@@ -30,6 +31,19 @@ def extract_all(uuid, filename, db):
     #order_bounding_boxes_in_each_block.main(uuid, UPLOAD_FOLDER + "/" + filename)
     subprocess.call(['python3','/home/bscheibel/PycharmProjects/dxf_reader/main.py', str(uuid),UPLOAD_FOLDER + "/" + filename, db, str(0)])
 
+def get_file_size(file):
+    pdf = PyPDF2.PdfFileReader(file)
+    p = pdf.getPage(0)
+
+    w = p.mediaBox.getWidth()
+    h= p.mediaBox.getHeight()
+
+    print(w,h)
+    return w,h
+
+
+
+
 @app.route('/', methods=['GET', 'POST'])
 def upload_file():
     if request.method == 'POST':
@@ -55,20 +69,32 @@ def upload_file():
 def uploaded_file(filename, uuid):
     file_out = "out.jpg"
     #file_out = filename
-    if request.method == 'POST':
-        uuid = 433
+    #if request.method == 'POST':
+    #    uuid = 433
     if filename.endswith(".pdf") or filename.endswith(".PDF"):
+        w,h = get_file_size(UPLOAD_FOLDER +"/" + filename)
         convert_pdf_img(filename)
         db = redis.Redis("localhost")
         #isos = db.get(uuid+"dims")
         #print(iso)
         isos = json.loads(db.get(str(uuid)+"isos"))
         dims = json.loads(db.get(str(uuid)+"dims"))
+        details = json.loads(db.get(str(uuid) + "details"))
         number_blocks = db.get(str(uuid)+"eps")
         html_code = ""
         reg = r"(-?\d{1,}\.?\d*)"
         for dim in dims:
-            html_code += '''<td><h4>''' + dim + '''</h4></td>'''
+            print(dim)
+            for det in details:
+                print(det)
+                try:
+                    if dim == det:
+                        det_coords = details[det]
+                        det_coords = ",".join(str(det) for det in det_coords)
+                except:
+                    det_coords = "0"
+
+            html_code += "<td><h4>" + dim + "</h4></td>"
             for d in dims[dim]:
                 try:
                     number = re.search(reg, d)
@@ -91,9 +117,9 @@ def uploaded_file(filename, uuid):
                 coords = ",".join(str(e) for e in dims[dim][d])
                 html_code += "<tr><td style='text-align:center'> <input type='checkbox' name='relevant." + d + "' value='checked'> </td>" + \
                              "<td style='text-align:center'>" + d + "</td>" + \
-                             "<td style='text-align:center'> <input type='number' step='" + str(steps) + "' data-coords='" + coords + "' name='" + d + "' value='" + number + "'  size='10'> </td></tr>"
+                             "<td style='text-align:center'> <input type='number' step='" + str(steps) + "' data-coords='" + coords + " 'data-details='" + det_coords  +"'' name='" + d + "' value='" + number + "'  size='10'> </td></tr>"
                 #print(html_code)
-        return render_template('show_pdf.html', filename=file_out, isos=isos, dims=dims, text=html_code, number=number_blocks, og_filename=filename)
+        return render_template('show_image_old_working.html', filename=file_out, isos=isos, dims=dims, text=html_code, number=number_blocks, og_filename=filename, w=w, h=h)
 
     else:
         filename = filename
@@ -152,3 +178,5 @@ def redis_set(key):
         db.set(key, json_dict)
     return "OK"
 
+
+