imageSlicer.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. rectID = 0;
  2. colors = ["#edd400","#73d216","#cc0000","#f57900","#3465a4","#c17d11","#75507b","#fce94f","#8ae234","#ef2929","#fcaf3e","#729fcf","#eeeeec","#e9b96e","#ad7fa8","#888a85","#c4a000","#4e9a06","#a40000","#ce5c00","#204a87","#babdb6","#8f5902","#5c3566","#2e3436"].map(i => i + "70"); //Tango Colors with opacity
  3. abk = [];
  4. function addRectangle(){
  5. addRectangle1("", 0,0,1000,100)
  6. }
  7. function scalefactor(){
  8. return $('#sliceImg').innerWidth() / $('#sliceImg').prop('naturalWidth');
  9. }
  10. function refitRect(id){
  11. $('#Rect' + id).css('transform', 'scale(' + scalefactor() + ')');
  12. }
  13. function resizeAllRect() {
  14. console.log("resizing");
  15. for (var i = 0; i < rectID; i++) {
  16. refitRect(i);
  17. $('#Rect' + i).css("top", $('#Rect' + i).attr("y") * scalefactor() + "px");
  18. $('#Rect' + i).css("left", $('#Rect' + i).attr("x") * scalefactor() + "px");
  19. }
  20. }
  21. function changeRectPosition(id, style, amount){
  22. $('#Rect' + id).css(style, amount + "px");
  23. refitRect(id);
  24. }
  25. function addRectangle1(id,x,y,w,h,pattern,idtext){
  26. //Show input fields
  27. var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
  28. var localID = rectID
  29. if(id != "")
  30. localID = id;
  31. $('[data-class=RectID]',clone).text("" + localID);
  32. $('[data-class=mainDiv]',clone).hover(function(){
  33. $('#Rect' + localID).css("background", colors[localID % colors.length]);
  34. $('#FormRect' + localID).css("background", colors[localID % colors.length]);
  35. },
  36. function(){
  37. $('#Rect' + localID).css("background", "none");
  38. $('#FormRect' + localID).css("background", "none");
  39. });
  40. $('[data-class=mainDiv]',clone).attr('id', 'FormRect' + localID);
  41. $('[data-class=x]',clone).val(x);
  42. $('[data-class=x]',clone).on('input', function(e) {
  43. changeRectPosition(localID, "left", this.value * scalefactor() );
  44. });
  45. $('[data-class=y',clone).val(y);
  46. $('[data-class=y]',clone).on('input', function(e) {
  47. changeRectPosition(localID, "top", this.value * scalefactor());
  48. });
  49. $('[data-class=w',clone).val(w);
  50. $('[data-class=w]',clone).on('input', function(e) {
  51. changeRectPosition(localID, "width", this.value );
  52. });
  53. $('[data-class=h',clone).val(h);
  54. $('[data-class=h]',clone).on('input', function(e) {
  55. changeRectPosition(localID, "height", this.value );
  56. });
  57. //Alle Abkürzungen einfügen und prüfen ob im pattern angegeben
  58. abk.forEach(function(item){
  59. var clonepattern = document.importNode(document.querySelector('#RectanglePattern').content,true);
  60. $('[data-class=abk]',clonepattern).text(item);
  61. $('[data-class=input]',clonepattern).prop('name', item);
  62. if(typeof pattern !== 'undefined' && pattern[item]){
  63. $('[data-class=input]',clonepattern).prop('checked', true);
  64. }
  65. $('[data-class=RectanglePattern',clone).append(clonepattern);
  66. });
  67. var clonepatternidtext = document.importNode(document.querySelector('#RectanglePatternText').content,true);
  68. if(typeof idtext !== 'undefined'){
  69. $('[data-class=input]',clonepatternidtext).val(idtext);
  70. }
  71. $('[data-class=RectanglePattern',clone).append(clonepatternidtext);
  72. $('#imgRectangles').append(clone);
  73. //add rectangle
  74. var clone = document.importNode(document.querySelector('#RectanglesImage').content,true);
  75. $('[data-class=RectID]',clone).attr("id","Rect" + localID);
  76. $('[data-class=RectID]',clone).attr("y",y);
  77. $('[data-class=RectID]',clone).text("Rect" + localID);
  78. $('[data-class=RectID]',clone).css("top", y * scalefactor() + "px");
  79. $('[data-class=RectID]',clone).css("left", x * scalefactor() + "px");
  80. $('[data-class=RectID]',clone).css("width", w + "px");
  81. $('[data-class=RectID]',clone).css("height", h + "px");
  82. $('[data-class=RectID]',clone).hover(function(){
  83. $('#FormRect' + localID).css("background", colors[localID % colors.length]);
  84. $('#Rect' + localID).css("background", colors[localID % colors.length]);
  85. $('#detailcolumn2').scrollTop( 0 );
  86. $('#detailcolumn2').scrollTop($('#FormRect' + localID).position().top - 50 );
  87. },
  88. function(){
  89. $("#detailcolumn2").stop();
  90. $('#FormRect' + localID).css("background", "none");
  91. $('#Rect' + localID).css("background", "none");
  92. });
  93. $('#imgrect').append(clone);
  94. refitRect(localID);
  95. ++rectID;
  96. new Sortable(document.getElementById('imgRectangles'),{
  97. handle: '.handle3',
  98. animation: 150
  99. });
  100. }
  101. function createPatternForm(){
  102. /* Load pattern config */
  103. //Create form for WAS/Stations/Pattern and WAS/Slicer
  104. var populate = ["FormPattern","FormPattern2","FormPatternAssignment"]
  105. var first = true;
  106. populate.forEach(function(populate2){
  107. $.getJSON( "../server/json/ProductCode.json", function( data ) {
  108. $.each( data["pattern"], function(i, item){
  109. var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
  110. $('[data-class=Name]',clone).text(item["name"]);
  111. $('[data-class=Abkürzung]',clone).text(item["abk"]);
  112. if(first)
  113. abk.push(item["abk"])
  114. $.each( item["types"], function(i, item){
  115. $('[data-class=Optionen]',clone).append('<option value="' + item +'">' + item +'</option>');
  116. });
  117. $('[data-class=Optionen]',clone).attr("id", populate2 + "_Form_" + item["abk"]);
  118. $('#' + populate2).append(clone);
  119. });
  120. //Add "Text" to abk to show it within rects
  121. first = false;
  122. });
  123. });
  124. abk.length = 0;
  125. //get Save locations
  126. $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
  127. $.each( data["saveLocation"], function(i, item){
  128. $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
  129. });
  130. });
  131. }
  132. function createRectForm(station){
  133. var imgsrc = $("#sliceImg").attr("src")
  134. rectID = 0;
  135. $('#imgRectangles').text("");
  136. $('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
  137. $.getJSON( "../server/json/Rectangle.json", function( data ) {
  138. $.each( data["Configs"], function(i, item){
  139. if(item["name"] == station){
  140. $.each( item["rects"], function(i, item){
  141. addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"],item["idtext"]);
  142. });
  143. }
  144. });
  145. });
  146. }
  147. function loadStationsForm(){
  148. $.getJSON( "../server/json/Rectangle.json", function( data ) {
  149. $.each( data["Configs"], function(i, item){
  150. $("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
  151. });
  152. $("#loadconfig").on('change', function() {
  153. createRectForm(this.value);
  154. });
  155. });
  156. }
  157. function createJson(){
  158. rects = []
  159. $(".singleRect").each(function() {
  160. var pats = {}
  161. $(this).find(".patternPart3").each(function() {
  162. $(this).find('.patternPart3Input:checked').each(function() {
  163. pats[$(this).attr('name')] = true;
  164. });
  165. });
  166. var txt;
  167. $(this).find(".patternPart3Text").each(function() {
  168. txt = $(this).children("input").val();
  169. });
  170. rect = {id: $( this ).find(".RectID").text(), X:$( this ).find('input[data-class="x"]').val(), Y:$( this ).find('input[data-class="y"]').val(), W:$( this ).find('input[data-class="w"]').val(), H:$( this ).find('input[data-class="h"]').val(), pattern: pats, idtext: txt};
  171. rects.push(rect);
  172. });
  173. allrects = {name: $("#loadconfig").val(), rects: rects};
  174. return allrects;
  175. }
  176. function createJsonCutting(){
  177. var rects = createJson();
  178. rects.rects.forEach(function(value) {
  179. pattern = value.pattern;
  180. abk.forEach(function(item){
  181. if(typeof $("#FormPattern2_Form_" + item).val() !== 'undefined' && typeof $("#FormPattern2_Form_" + item).val() !== 'undefined'){
  182. if(pattern[item]){
  183. //if rectangle is checked but nothing has been selected
  184. if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
  185. pattern[item] = "NoSelection";
  186. }
  187. else{
  188. pattern[item] = $("#FormPattern2_Form_" + item).find(":selected").text();
  189. }
  190. }
  191. }
  192. });
  193. });
  194. return rects;
  195. }
  196. function submitSlices(skip = false){
  197. //createJsonCutting();
  198. //check if selected options are also selected in drop down menus
  199. var skippall = false;
  200. if(!skip){
  201. var checkedoptions = new Set();
  202. $("#imgRectangles input[type=checkbox]:checked").each(function(index, data){
  203. checkedoptions.add($(data).attr("name"))
  204. });
  205. var allskips = [];
  206. checkedoptions.forEach(function(item){
  207. if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
  208. allskips.push(item);
  209. }
  210. });
  211. if (Array.isArray(allskips) && allskips.length) {
  212. if(!confirm("Achtung: [" + allskips + "] nicht ausgefüllt, fortfahren?")){
  213. skippall = true;
  214. }
  215. }
  216. }
  217. if(!skippall){
  218. request = $.ajax({
  219. type: "POST",
  220. url: "imageSlicer.php",
  221. async: false,
  222. data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
  223. success: function(data){
  224. if ( JSON.stringify(data) === '[]') {
  225. //clearFormFull();
  226. if(!skip){
  227. alert("Saved Images");
  228. }
  229. }
  230. else if(data.hasOwnProperty('error')){
  231. alert("Achtung Fehler: \n" + data.error)
  232. console.log(data);
  233. }
  234. else{
  235. if(!skip){
  236. overlayOnDupliImages(data);
  237. }
  238. //clearFormFull();
  239. }
  240. },
  241. error: function(xhr, status, error){
  242. console.error(xhr);
  243. }
  244. });
  245. }
  246. }
  247. function overlayOnDupliImages(data) {
  248. document.getElementById("overlayNotClickable").style.display = "block";
  249. var clone = document.importNode(document.querySelector('#SlicerDupliOverlay').content,true);
  250. $.each( data, function(i, item){
  251. var clone2 = document.importNode(document.querySelector('#SlicerDupliImageRow').content,true);
  252. $('[data-class=oldimg]',clone2).attr("src", item["old"] + '?rand=' + Math.random());
  253. $('[data-class=newimg]',clone2).attr("src", item["new"] + '?rand=' + Math.random());
  254. $('[data-class=changebutton]',clone2).attr("onclick", "javascript:changeimg(\"" + item["old"] + "\", \"" + item["new"] +"\", this )");
  255. $('[data-class=ImgList]',clone).append(clone2);
  256. });
  257. $('#overlaycontentsizeNotClickable').append(clone)
  258. }
  259. function changeimg(oldimg, newimg, buttonelement) {
  260. $.get( "imageOverride.php?overridden=" + oldimg + "&new=" + newimg , function( data ) {
  261. //hide button
  262. $(buttonelement).hide(200);
  263. //console.log(data);
  264. });
  265. }
  266. function showJson(){
  267. copy2Clipboard(JSON.stringify(createJson()))
  268. }
  269. function copy2Clipboard(datalink) {
  270. const el = document.createElement('textarea');
  271. el.value = datalink;
  272. document.body.appendChild(el);
  273. el.select();
  274. document.execCommand('copy');
  275. document.body.removeChild(el);
  276. }
  277. function clearFormFull(){
  278. clearForm();
  279. $('#slicerpatterninput').val("");
  280. }
  281. function clearForm(){
  282. $('#FormPattern2').find("select").prop("selectedIndex",0);
  283. }
  284. function fillFormName(value){
  285. $("#slicerpatterninput").val(value);
  286. fillslicerpattern();
  287. }
  288. function fillpatternForm(e) {
  289. var code = (e.keyCode ? e.keyCode : e.which);
  290. if (code == 13) { //Enter keycode
  291. fillslicerpattern();
  292. }
  293. };
  294. function fillslicerpattern(){
  295. clearForm();
  296. /*
  297. $.getJSON( "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(), function( data ) {
  298. $.each( data, function(i, item){
  299. $("#FormPattern2_Form_" + i).val(item);
  300. });
  301. });
  302. */
  303. jQuery.ajax({
  304. url: "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(),
  305. success: function (data) {
  306. $.each( data, function(i, item){
  307. $("#FormPattern2_Form_" + i).val(item);
  308. });
  309. },
  310. async: false
  311. });
  312. }
  313. function getAllFolders(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
  314. $('#selectfolders').find('option').remove()
  315. $('#selectfolders').append("<option></option>")
  316. $.ajax({
  317. type: "GET",
  318. url: urlUniversalStorage + "server/allfolders/" + folder,
  319. async: false,
  320. dataType: "json",
  321. success: function(data) {
  322. $.each( data, function( key, value ) {
  323. $('#selectfolders').append("<option>" + value.slice(0,-1) +"</option>")
  324. });
  325. }
  326. });
  327. }
  328. function getAllFiles(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
  329. $.ajax({
  330. type: "GET",
  331. url: urlUniversalStorage + "server/images/" + folder,
  332. dataType: "json",
  333. success: function(data) {
  334. $.each( data, function( key, value ) {
  335. console.log(value);
  336. console.log(urlUniversalStorage + "storage/" + folder + "/" + value);
  337. $("#sliceImg").attr("src", urlUniversalStorage + "storage/" + folder + "/" + value)
  338. fillFormName(value);
  339. submitSlices(true);
  340. /*
  341. $("#slicerpatterninput").val(value);
  342. fillslicerpattern();
  343. */
  344. });
  345. }
  346. });
  347. }
  348. $(document).ready(function() {
  349. createPatternForm();
  350. loadStationsForm();
  351. getAllFolders();
  352. //press enter to fill out patternform
  353. $("#slicerpatterninput").bind("keypress", {}, fillpatternForm);
  354. /*
  355. $("#sliceImg").bind('load', function() {
  356. resizeAllRect();
  357. });*/
  358. /*
  359. $("#sliceImg").on('load', function () {
  360. resizeAllRect();
  361. });
  362. */
  363. /*
  364. $('#sliceImg').on('load',function(){
  365. resizeAllRect();
  366. });
  367. */
  368. $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
  369. if(!data["SlicerRectForm"]){
  370. $("#addRectanglesGroup").hide();
  371. $("#imgRectangles").hide();
  372. $("#Json2ClipboardGroup").hide();
  373. }
  374. });
  375. $(document).on('submit', '#sliceform', function() { //prevent page reload on form submit
  376. return false;
  377. });
  378. $("#showJson").click(function() {
  379. showJson();
  380. });
  381. $("#multiCut").click(function() {
  382. getAllFiles($('#selectfolders').val());
  383. });
  384. $('#pattern2').text("");
  385. var clone = document.importNode(document.querySelector('#patternClone').content,true);
  386. $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  387. $("#pattern2").append(clone);
  388. //handle zoom event in order to fix rectangle position
  389. window.addEventListener("resize", resizeAllRect, false);
  390. });