show_image_old_working.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <!doctype html>
  2. <head>
  3. <title>Dimension Extraction</title>
  4. <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  6. <script src="https://unpkg.com/pdfjs-dist@latest/build/pdf.min.js"></script>
  7. </head>
  8. <body>
  9. <!--<div class="split left">-->
  10. <div class="container">
  11. <div class="column column-one">
  12. <!-- <h1 style='text-align:center' >Drawing</h1>-->
  13. <p> <a href="http://localhost:5000/"> Upload another drawing </a> </p>
  14. <table style='text-align:left'>
  15. {% for link in links %}
  16. <tr>
  17. {% set l=links[link] %}
  18. <td style='text-align:left'> <a href=" {{ url_for('static', filename=l) }}" > {{ link }} </a> </td>
  19. </tr>
  20. {% endfor %}
  21. {% for iso in isos_names %}
  22. <tr>
  23. <td style='text-align:left'> {{ iso }}</td>
  24. </tr>
  25. {% endfor %}
  26. </table>
  27. {% if filename %}
  28. <div class="images">
  29. <img id="drawing" src="{{ url_for('send_file', filename=filename) }}">
  30. </div>
  31. {% else %}
  32. <h1>no image for whatever reason</h1>
  33. {% endif %}
  34. </div>
  35. <!--<div class="split middle">-->
  36. <div class="column column-two" id="measurements">
  37. <!--<h1 style='text-align:center' >Extracted Measurements</h1>-->
  38. <font size="3" face="Courier New" >
  39. <form>
  40. <table>
  41. <tr>
  42. <td style="text-align:center"><h3>Key Value</h3></td>
  43. <td style="text-align:center"><h3>Target Value</h3></td>
  44. <td style="text-align:center"><h3>Actual Value</h3></td>
  45. <td style="text-align:center"><h3>Relevant Isos</h3></td>
  46. </tr>
  47. {{ text | safe}}
  48. <!-- {% for key in dims %}
  49. <td><h4> {{key}} </h4></td>
  50. {% for d in dims[key] %}
  51. <tr>
  52. <td style="text-align:center"><input type="checkbox" name="relevant[]" value="checked"></td>
  53. <td style="text-align:center"> {{ d }}</td>
  54. <td style="text-align:center"><input type="text" name="{{ d }}" size="10"></td>
  55. </tr>
  56. {% endfor %}
  57. {% endfor %}-->
  58. </table>
  59. </form>
  60. </font>
  61. <!-- </div> <div id="result">Result {{ number }}</div>-->
  62. <!--<div class="split right">
  63. <div class="column column-three">
  64. <h1 style='text-align:center' >Additional Infos</h1>-->
  65. </div>
  66. </div>
  67. <script>
  68. function set_redis(key, value) {
  69. $.ajax({
  70. type: "POST",
  71. url: "/redis/set/" + key,
  72. data: JSON.stringify({ value: value }),
  73. dataType: "json",
  74. contentType: "json",
  75. success: function(data)
  76. {
  77. (data.GET);
  78. }
  79. });
  80. }
  81. function get_redis(key) {
  82. $.ajax({
  83. type: "GET",
  84. url: "redis/get/" + key,
  85. data: "format=json",
  86. dataType: "text",
  87. success: function(data)
  88. {
  89. $("#result").text(data.GET);
  90. }
  91. });
  92. function split_string(string) {
  93. var string = str.split(" ",2);
  94. return string;
  95. });
  96. </script>
  97. <script>
  98. $(document).ready(function(){
  99. $("input[type=number]").on("change keyup input", function(){
  100. var array_value = [];
  101. array_value[0] = $(this).attr('name');
  102. array_value[1] = $(this).val();
  103. var key = 'last' + "_" +'{{og_filename}}';
  104. //console.log({{ dim }});
  105. set_redis(key, array_value);
  106. });
  107. $("input[type=checkbox]").change(function(){
  108. // Print entered value in a div box
  109. $("#result").text($(this).attr('name'));
  110. var key1 = 'last' + "_" +'{{og_filename}}';
  111. var array_value1 = [];
  112. if ($(this).is(':checked')) {
  113. console.log($(this).attr('name') + ' is now checked');
  114. array_value1[0] = 'relevant.' + $(this).attr('name');
  115. array_value1[1] = true;
  116. } else {
  117. console.log($(this).attr('name') + ' is now unchecked');
  118. array_value1[0] = $(this).attr('name');
  119. array_value1[1] = false;
  120. }
  121. set_redis(key1, array_value1);
  122. });
  123. $("input[type=number]").focus(function(){
  124. // highlight values, does not work so far
  125. var number = $(this).attr('name');
  126. var coords = $(this).attr('data-coords');
  127. highlight_areas(coords, "red");
  128. var detail = $(this).attr('data-details');
  129. console.log(detail, "green");
  130. highlight_details(detail, "green");
  131. });
  132. $("input[type=number]").blur(function(){
  133. $("div").removeClass("red");
  134. $("div").removeClass("green");
  135. });
  136. function highlight_areas(coords, color){
  137. let w = {{w}}
  138. let h = {{h}}
  139. let pos = $("#drawing").position();
  140. let drawing_x = pos.left;
  141. let drawing_y = pos.top;
  142. let array_coords = coords.split(",");
  143. let coords_x = parseFloat(array_coords[0]);
  144. let coords_xmax = parseFloat(array_coords[2]);
  145. let coords_y = parseFloat(array_coords[1]);
  146. let coords_ymax = parseFloat(array_coords[3]);
  147. let coords_width = (coords_xmax - coords_x);
  148. let coords_height = (coords_ymax - coords_y);
  149. let width = $("#drawing").width();
  150. let height = $("#drawing").height();
  151. let rel_width = coords_width/h*width*1.4;
  152. let rel_height = coords_height/w*height*1.4;
  153. let x = width*(coords_x*height/width/w);
  154. let y = height*(coords_y*width/height/h);
  155. console.log(w, h, rel_width, rel_height,x,y);
  156. 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});
  157. $(".images").append($point1);
  158. };
  159. function highlight_details(coords, color){
  160. let w = {{w}}
  161. let h = {{h}}
  162. let pos = $("#drawing").position();
  163. let drawing_x = pos.left;
  164. let drawing_y = pos.top;
  165. let array_coords = coords.split(",");
  166. let coords_x = parseFloat(array_coords[0]);
  167. let coords_y = parseFloat(array_coords[1]);
  168. let width_div = (parseFloat(array_coords[2]) - parseFloat(array_coords[0]));
  169. let height_div = (parseFloat(array_coords[3]) - parseFloat(array_coords[1]));
  170. let width = $("#drawing").width();
  171. let rel_width = width_div/h*width;
  172. let height = $("#drawing").height();
  173. let rel_height = height*height_div/w;
  174. let x = width*(coords_x*height/width/w);
  175. let y= height*(coords_y*width/height/h);
  176. console.log(rel_width, rel_height);
  177. if (array_coords[3] > 10000) {
  178. rel_height = height - y;
  179. }
  180. 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'});
  181. $(".images").append($point);
  182. };
  183. });
  184. </script>
  185. </body>