index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  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='css/style.css') }}" type="text/css"/>
  36. <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}" type="text/css"/>
  37. <body is="x-ui">
  38. <ui-rest id="main">
  39. <ui-content>
  40. <ui-area id='datacolumn'>
  41. <!-- <ui-rest id="sub"> with this the content does not work for other tabs -->
  42. <ui-tabbar>
  43. <ui-before>
  44. <a class="logo" href="/"> </a>
  45. </ui-before>
  46. <ui-tab class="default" data-tab="drawing" >Drawing
  47. </ui-tab>
  48. <ui-behind ></ui-behind>
  49. </ui-tabbar>
  50. <!--</ui-rest>-->
  51. <ui-content>
  52. <ui-area data-belongs-to-tab="drawing" >
  53. <div class="images">
  54. <img class="optcontent" id="drawing" src="{{ url_for('send_file', filename=filename) }}" alt="Drawing">
  55. </div>
  56. </ui-area>
  57. </ui-content>
  58. </ui-area>
  59. <ui-resizehandle data-label="drag to resize"></ui-resizehandle>
  60. <ui-area id="detailcolumn1" data-minsize="20em">
  61. <h3 style="text-align:center"> General Information</h3>
  62. <div id="dat_details" class='x-ui-layout'>
  63. <div class="column-one" style="width:50%;float:left">
  64. {{ html_links | safe }}
  65. {% for iso in isos_names %}
  66. {{ iso }} (Document not available)<br>
  67. {% endfor %}
  68. </div>
  69. <div class="column-two" style="width:50%;float:right">
  70. {{ html_general | safe }}
  71. </div>
  72. </div>
  73. <div id="measurements">
  74. <font >
  75. <form>
  76. <table>
  77. <tr>
  78. <td style="text-align:center"><h3>Key Value</h3></td>
  79. <td style="text-align:center"><h3>Target Value</h3></td>
  80. <td style="text-align:center"><h3>Actual Value</h3></td>
  81. <td style="text-align:center"><h3>Relevant Isos</h3></td>
  82. </tr>
  83. {{ text | safe}}
  84. </table>
  85. </form>
  86. </font>
  87. </div>
  88. </ui-area>
  89. </ui-content>
  90. </ui-rest>
  91. <script>
  92. function log(){
  93. console.log("test");
  94. }
  95. function set_redis(key, value) {
  96. $.ajax({
  97. type: "POST",
  98. url: "/redis/set/" + key,
  99. data: JSON.stringify({ value: value }),
  100. dataType: "json",
  101. contentType: "json",
  102. success: function(data)
  103. {
  104. (data.GET);
  105. }
  106. });
  107. }
  108. function get_redis(key) {
  109. $.ajax({
  110. type: "GET",
  111. url: "redis/get/" + key,
  112. data: "format=json",
  113. dataType: "text",
  114. success: function(data)
  115. {
  116. $("#result").text(data.GET);
  117. }
  118. });
  119. }
  120. function split_string(string) {
  121. var string = str.split(" ",2);
  122. return string;
  123. };
  124. </script>
  125. <script>
  126. $(document).ready(function(){
  127. $("input[type=number]").on("change keyup input", function(){
  128. var array_value = [];
  129. array_value[0] = $(this).attr('name');
  130. array_value[1] = $(this).val();
  131. var key = 'last' + "_" +'{{og_filename}}';
  132. //console.log({{ dim }});
  133. set_redis(key, array_value);
  134. });
  135. $("input[type=checkbox]").change(function(){
  136. // Print entered value in a div box
  137. $("#result").text($(this).attr('name'));
  138. var key1 = 'last' + "_" +'{{og_filename}}';
  139. var array_value1 = [];
  140. if ($(this).is(':checked')) {
  141. console.log($(this).attr('name') + ' is now checked');
  142. array_value1[0] = 'relevant.' + $(this).attr('name');
  143. array_value1[1] = true;
  144. } else {
  145. console.log($(this).attr('name') + ' is now unchecked');
  146. array_value1[0] = $(this).attr('name');
  147. array_value1[1] = false;
  148. }
  149. set_redis(key1, array_value1);
  150. });
  151. $("input[type=number]").focus(function(){
  152. var number = $(this).attr('name');
  153. var coords = $(this).attr('data-coords');
  154. highlight_areas(coords, "red");
  155. var detail = $(this).attr('data-details');
  156. console.log(detail, "green");
  157. highlight_details(detail, "green");
  158. });
  159. $("input[type=number]").blur(function(){
  160. $("div").removeClass("red");
  161. $("div").removeClass("green");
  162. });
  163. $("ui-area").scroll(function(){
  164. $("input[type=number]").blur();
  165. $("div").removeClass("red");
  166. $("div").removeClass("green");
  167. });
  168. function highlight_areas(coords, color){
  169. let w = {{w}}
  170. let h = {{h}}
  171. let pos = $("#drawing").position();
  172. let drawing_x = pos.left;
  173. let drawing_y = pos.top;
  174. let array_coords = coords.split(",");
  175. let coords_x = parseFloat(array_coords[0]);
  176. let coords_xmax = parseFloat(array_coords[2]);
  177. let coords_y = parseFloat(array_coords[1]);
  178. let coords_ymax = parseFloat(array_coords[3]);
  179. let coords_width = (coords_xmax - coords_x);
  180. let coords_height = (coords_ymax - coords_y);
  181. let width = $("#drawing").width();
  182. let height = $("#drawing").height();
  183. let rel_width = coords_width/h*width*1.4;
  184. let rel_height = coords_height/w*height*1.4;
  185. var orientation = "{{orientation}}";
  186. var x = 0;
  187. var y = 0;
  188. if (orientation == "landscape"){
  189. // x = width*(coords_x*height/width/w);
  190. x = (coords_x*height/w);
  191. // y = height*(coords_y*width/height/h);
  192. y = (coords_y*width/h);
  193. }
  194. else {
  195. x = width*(coords_x/w);
  196. y = height*(coords_y/h);
  197. }
  198. console.log(w, h, rel_width, rel_height,x,y);
  199. 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});
  200. $(".images").append($point1);
  201. };
  202. function highlight_details(coords, color){
  203. let w = {{w}}
  204. let h = {{h}}
  205. let pos = $("#drawing").position();
  206. let drawing_x = pos.left;
  207. let drawing_y = pos.top;
  208. let array_coords = coords.split(",");
  209. let coords_x = parseFloat(array_coords[0]);
  210. let coords_y = parseFloat(array_coords[1]);
  211. let width_div = (parseFloat(array_coords[2]) - parseFloat(array_coords[0]));
  212. let height_div = (parseFloat(array_coords[3]) - parseFloat(array_coords[1]));
  213. let width = $("#drawing").width();
  214. let rel_width = width_div/h*width;
  215. let height = $("#drawing").height();
  216. let rel_height = height*height_div/w;
  217. let x = width*(coords_x*height/width/w);
  218. let y= height*(coords_y*width/height/h);
  219. console.log(rel_width, rel_height);
  220. if (array_coords[3] > 10000) {
  221. rel_height = height - y;
  222. }
  223. 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'});
  224. $(".images").append($point);
  225. };
  226. });
  227. </script>
  228. </body>
  229. </html>