highlight_save.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. function log(){
  2. console.log("test");
  3. }
  4. function set_redis(key, value) {
  5. $.ajax({
  6. type: "POST",
  7. url: "/redis/set/" + key,
  8. data: JSON.stringify({ value: value }),
  9. dataType: "json",
  10. contentType: "json",
  11. success: function(data)
  12. {
  13. (data.GET);
  14. }
  15. });
  16. }
  17. function get_redis(key) {
  18. $.ajax({
  19. type: "GET",
  20. url: "redis/get/" + key,
  21. data: "format=json",
  22. dataType: "text",
  23. success: function(data)
  24. {
  25. $("#result").text(data.GET);
  26. }
  27. });
  28. }
  29. function split_string(string) {
  30. var string = str.split(" ",2);
  31. return string;
  32. };
  33. $(document).ready(function(){
  34. $("input[type=number]").on("change keyup input", function(){
  35. var array_value = [];
  36. array_value[0] = $(this).attr('name');
  37. array_value[1] = $(this).val();
  38. var key = 'last' + "_" +'{{og_filename}}';
  39. //console.log({{ dim }});
  40. set_redis(key, array_value);
  41. });
  42. $("input[type=checkbox]").change(function(){
  43. // Print entered value in a div box
  44. $("#result").text($(this).attr('name'));
  45. var key1 = 'last' + "_" +'{{og_filename}}';
  46. var array_value1 = [];
  47. if ($(this).is(':checked')) {
  48. console.log($(this).attr('name') + ' is now checked');
  49. array_value1[0] = 'relevant.' + $(this).attr('name');
  50. array_value1[1] = true;
  51. } else {
  52. console.log($(this).attr('name') + ' is now unchecked');
  53. array_value1[0] = $(this).attr('name');
  54. array_value1[1] = false;
  55. }
  56. set_redis(key1, array_value1);
  57. });
  58. $("input[type=number]").focus(function(){
  59. // highlight values, does not work so far
  60. var number = $(this).attr('name');
  61. var coords = $(this).attr('data-coords');
  62. highlight_areas(coords, "red");
  63. var detail = $(this).attr('data-details');
  64. console.log(detail, "green");
  65. highlight_details(detail, "green");
  66. });
  67. $("input[type=number]").blur(function(){
  68. $("div").removeClass("red");
  69. $("div").removeClass("green");
  70. });
  71. function highlight_areas(coords, color){
  72. let w = {{w}}
  73. let h = {{h}}
  74. let pos = $("#drawing").position();
  75. let drawing_x = pos.left;
  76. let drawing_y = pos.top;
  77. let array_coords = coords.split(",");
  78. let coords_x = parseFloat(array_coords[0]);
  79. let coords_xmax = parseFloat(array_coords[2]);
  80. let coords_y = parseFloat(array_coords[1]);
  81. let coords_ymax = parseFloat(array_coords[3]);
  82. let coords_width = (coords_xmax - coords_x);
  83. let coords_height = (coords_ymax - coords_y);
  84. let width = $("#drawing").width();
  85. let height = $("#drawing").height();
  86. let rel_width = coords_width/h*width*1.4;
  87. let rel_height = coords_height/w*height*1.4;
  88. let x = width*(coords_x*height/width/w);
  89. let y = height*(coords_y*width/height/h);
  90. console.log(w, h, rel_width, rel_height,x,y);
  91. 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});
  92. $(".images").append($point1);
  93. };
  94. function highlight_details(coords, color){
  95. let w = {{w}}
  96. let h = {{h}}
  97. let pos = $("#drawing").position();
  98. let drawing_x = pos.left;
  99. let drawing_y = pos.top;
  100. let array_coords = coords.split(",");
  101. let coords_x = parseFloat(array_coords[0]);
  102. let coords_y = parseFloat(array_coords[1]);
  103. let width_div = (parseFloat(array_coords[2]) - parseFloat(array_coords[0]));
  104. let height_div = (parseFloat(array_coords[3]) - parseFloat(array_coords[1]));
  105. let width = $("#drawing").width();
  106. let rel_width = width_div/h*width;
  107. let height = $("#drawing").height();
  108. let rel_height = height*height_div/w;
  109. let x = width*(coords_x*height/width/w);
  110. let y= height*(coords_y*width/height/h);
  111. console.log(rel_width, rel_height);
  112. if (array_coords[3] > 10000) {
  113. rel_height = height - y;
  114. }
  115. 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'});
  116. $(".images").append($point);
  117. };
  118. });