index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <!--This file is part of centurio.work/edi.
  2. centurio.work/edi is free software: you can redistribute it and/or modify it
  3. under the terms of the GNU General Public License as published by the Free
  4. Software Foundation, either version 3 of the License, or (at your option) any
  5. later version.
  6. centurio.work/edi is distributed in the hope that it will be useful, but
  7. WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  8. FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  9. more details.
  10. You should have received a copy of the GNU General Public License along with
  11. centurio.work/edi (file COPYING in the main directory). If not, see
  12. <http://www.gnu.org/licenses/>.
  13. -->
  14. <!DOCTYPE html>
  15. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  16. <head>
  17. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  18. <title>Resources</title>
  19. <!-- libs, do not modify. When local than load local libs. -->
  20. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/jquery.min.js') }}"></script>
  21. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/jquery.browser.js') }}"></script>
  22. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/jquery.svg.min.js') }}"></script>
  23. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/jquery.svgdom.min.js') }}"></script>
  24. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/vkbeautify.js') }}"></script>
  25. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/util.js') }}"></script>
  26. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/printf.js') }}"></script>
  27. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs//strftime.min.js') }}"></script>
  28. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/parsequery.js') }}"></script>
  29. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/underscore.min.js') }}"></script>
  30. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/jquery.caret.min.js') }}"></script>
  31. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/jquery.cookie.js') }}"></script>
  32. <script type="text/javascript" src="{{ url_for('static', filename='js/js_libs/ui.js') }}"></script>
  33. <link rel="stylesheet" href="{{ url_for('static', filename='js/js_libs/ui.css') }}" type="text/css"/>
  34. <link rel="stylesheet" href="{{ url_for('static', filename='js/js_libs/cdp_ui.css') }}" type="text/css"/>
  35. <!--<link rel="stylesheet" href="{{ url_for('static', filename='js/js_libs/css/ui.css') }}" type="text/css"/>-->
  36. <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css"/>
  37. <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}" type="text/css"/>
  38. <body is="x-ui">
  39. <ui-rest id="main">
  40. <ui-content>
  41. <ui-area id='datacolumn'>
  42. <!-- <ui-rest id="sub"> with this the content does not work for other tabs -->
  43. <ui-tabbar>
  44. <ui-before>
  45. <a class="logo" href="/"> </a>
  46. </ui-before>
  47. <ui-tab class="default" data-tab="drawing" >Drawing
  48. </ui-tab>
  49. <ui-behind ></ui-behind>
  50. </ui-tabbar>
  51. <!--</ui-rest>-->
  52. <ui-content>
  53. <ui-area data-belongs-to-tab="drawing" >
  54. <div class="images">
  55. <img class="optcontent" id="drawing" src="{{ url_for('send_file', filename=filename) }}" alt="Drawing">
  56. </div>
  57. </ui-area>
  58. </ui-content>
  59. </ui-area>
  60. <ui-resizehandle data-label="drag to resize"></ui-resizehandle>
  61. <ui-area id="detailcolumn1" data-minsize="20em">
  62. <h3 style="text-align:center"> General Information</h3>
  63. <div id="dat_details" class='x-ui-layout'>
  64. <div class="column-one" style="width:50%;float:left">
  65. {{ html_links | safe }}
  66. {% for iso in isos_names %}
  67. {{ iso }} (Document not available)<br>
  68. {% endfor %}
  69. </div>
  70. <div class="column-two" style="width:50%;float:right">
  71. {{ html_general | safe }}
  72. </div>
  73. </div>
  74. <div id="measurements">
  75. <font >
  76. <form>
  77. <table>
  78. <tr>
  79. <td style="text-align:center"><h3>Key Value</h3></td>
  80. <td style="text-align:center"><h3>Target Value</h3></td>
  81. <td style="text-align:center"><h3>Actual Value</h3></td>
  82. <td style="text-align:center"><h3>Relevant Isos</h3></td>
  83. </tr>
  84. {{ text | safe}}
  85. </table>
  86. </form>
  87. </font>
  88. </div>
  89. </ui-area>
  90. </ui-content>
  91. </ui-rest>
  92. <script>
  93. function log(){
  94. console.log("test");
  95. }
  96. function set_redis(key, value) {
  97. $.ajax({
  98. type: "POST",
  99. url: "/redis/set/" + key,
  100. data: JSON.stringify({ value: value }),
  101. dataType: "json",
  102. contentType: "json",
  103. success: function(data)
  104. {
  105. (data.GET);
  106. }
  107. });
  108. }
  109. function get_redis(key) {
  110. $.ajax({
  111. type: "GET",
  112. url: "redis/get/" + key,
  113. data: "format=json",
  114. dataType: "text",
  115. success: function(data)
  116. {
  117. $("#result").text(data.GET);
  118. }
  119. });
  120. }
  121. function split_string(string) {
  122. var string = str.split(" ",2);
  123. return string;
  124. };
  125. </script>
  126. <script>
  127. $(document).ready(function(){
  128. $("input[type=number]").on("change keyup input", function(){
  129. var array_value = [];
  130. array_value[0] = $(this).attr('name');
  131. array_value[1] = $(this).val();
  132. var key = 'last' + "_" +'{{og_filename}}';
  133. //console.log({{ dim }});
  134. set_redis(key, array_value);
  135. });
  136. $("input[type=checkbox]").change(function(){
  137. // Print entered value in a div box
  138. $("#result").text($(this).attr('name'));
  139. var key1 = 'last' + "_" +'{{og_filename}}';
  140. var array_value1 = [];
  141. if ($(this).is(':checked')) {
  142. console.log($(this).attr('name') + ' is now checked');
  143. array_value1[0] = 'relevant.' + $(this).attr('name');
  144. array_value1[1] = true;
  145. } else {
  146. console.log($(this).attr('name') + ' is now unchecked');
  147. array_value1[0] = $(this).attr('name');
  148. array_value1[1] = false;
  149. }
  150. set_redis(key1, array_value1);
  151. });
  152. $("input[type=number]").focus(function(){
  153. var number = $(this).attr('name');
  154. var coords = $(this).attr('data-coords');
  155. highlight_areas(coords, "red");
  156. var detail = $(this).attr('data-details');
  157. console.log(detail, "green");
  158. highlight_details(detail, "green");
  159. });
  160. $("input[type=number]").blur(function(){
  161. $("div").removeClass("red");
  162. $("div").removeClass("green");
  163. });
  164. $("ui-area").scroll(function(){
  165. $("input[type=number]").blur();
  166. $("div").removeClass("red");
  167. $("div").removeClass("green");
  168. });
  169. function highlight_areas(coords, color){
  170. let w = {{w}}
  171. let h = {{h}}
  172. let pos = $("#drawing").position();
  173. let drawing_x = pos.left;
  174. let drawing_y = pos.top;
  175. let array_coords = coords.split(",");
  176. let coords_x = parseFloat(array_coords[0]);
  177. let coords_xmax = parseFloat(array_coords[2]);
  178. let coords_y = parseFloat(array_coords[1]);
  179. let coords_ymax = parseFloat(array_coords[3]);
  180. let coords_width = (coords_xmax - coords_x);
  181. let coords_height = (coords_ymax - coords_y);
  182. let width = $("#drawing").width();
  183. let height = $("#drawing").height();
  184. let rel_width = coords_width/h*width*1.4;
  185. let rel_height = coords_height/w*height*1.4;
  186. var orientation = "{{orientation}}";
  187. var x = 0;
  188. var y = 0;
  189. if (orientation == "landscape"){
  190. // x = width*(coords_x*height/width/w);
  191. x = (coords_x*height/w);
  192. // y = height*(coords_y*width/height/h);
  193. y = (coords_y*width/h);
  194. }
  195. else {
  196. x = width*(coords_x/w);
  197. y = height*(coords_y/h);
  198. }
  199. console.log(w, h, rel_width, rel_height,x,y);
  200. 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});
  201. $(".images").append($point1);
  202. };
  203. function highlight_details(coords, color){
  204. let w = {{w}}
  205. let h = {{h}}
  206. let pos = $("#drawing").position();
  207. let drawing_x = pos.left;
  208. let drawing_y = pos.top;
  209. let array_coords = coords.split(",");
  210. let coords_x = parseFloat(array_coords[0]);
  211. let coords_y = parseFloat(array_coords[1]);
  212. let width_div = (parseFloat(array_coords[2]) - parseFloat(array_coords[0]));
  213. let height_div = (parseFloat(array_coords[3]) - parseFloat(array_coords[1]));
  214. let width = $("#drawing").width();
  215. let rel_width = width_div/h*width;
  216. let height = $("#drawing").height();
  217. let rel_height = height*height_div/w;
  218. let x = width*(coords_x*height/width/w);
  219. let y= height*(coords_y*width/height/h);
  220. console.log(rel_width, rel_height);
  221. if (array_coords[3] > 10000) {
  222. rel_height = height - y;
  223. }
  224. 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'});
  225. $(".images").append($point);
  226. };
  227. });
  228. </script>
  229. </body>
  230. </html>