index.html 11 KB

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