imageSlicer.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
  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. fullpattern = [];
  5. function addRectangle(){
  6. addRectangle1("", 0,0,1000,100)
  7. }
  8. function scalefactor(){
  9. return $('#sliceImg').innerWidth() / $('#sliceImg').prop('naturalWidth');
  10. }
  11. function refitRect(id){
  12. $('#Rect' + id).css('transform', 'scale(' + scalefactor() + ')');
  13. }
  14. function resizeAllRect() {
  15. console.log("resizing");
  16. for (var i = 0; i < rectID; i++) {
  17. refitRect(i);
  18. $('#Rect' + i).css("top", $('#Rect' + i).attr("y") * scalefactor() + "px");
  19. $('#Rect' + i).css("left", $('#Rect' + i).attr("x") * scalefactor() + "px");
  20. }
  21. }
  22. function changeRectPosition(id, style, amount){
  23. $('#Rect' + id).css(style, amount + "px");
  24. refitRect(id);
  25. }
  26. function addRectangle1(id,x,y,w,h,pattern,idtext,assignmentsstation,assignments){
  27. //Show input fields
  28. var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
  29. var localID = rectID
  30. if(id != "")
  31. localID = id;
  32. $('[data-class=RectID]',clone).text("" + localID);
  33. $('[data-class=mainDiv]',clone).hover(function(){
  34. $('#Rect' + localID).css("background", colors[localID % colors.length]);
  35. $('#FormRect' + localID).css("background", colors[localID % colors.length]);
  36. },
  37. function(){
  38. $('#Rect' + localID).css("background", "none");
  39. $('#FormRect' + localID).css("background", "none");
  40. });
  41. $('[data-class=mainDiv]',clone).attr('id', 'FormRect' + localID);
  42. $('[data-class=x]',clone).val(x);
  43. $('[data-class=x]',clone).on('input', function(e) {
  44. changeRectPosition(localID, "left", this.value * scalefactor() );
  45. });
  46. $('[data-class=y',clone).val(y);
  47. $('[data-class=y]',clone).on('input', function(e) {
  48. changeRectPosition(localID, "top", this.value * scalefactor());
  49. });
  50. $('[data-class=w',clone).val(w);
  51. $('[data-class=w]',clone).on('input', function(e) {
  52. changeRectPosition(localID, "width", this.value );
  53. });
  54. $('[data-class=h',clone).val(h);
  55. $('[data-class=h]',clone).on('input', function(e) {
  56. changeRectPosition(localID, "height", this.value );
  57. });
  58. //allow to disable rectangle
  59. $('[data-class=setinactive]',clone).change(function() {
  60. $(this).parent().parent().parent().toggleClass("singleRect");
  61. });
  62. $('[data-class=removeRect]',clone).on('click', function(e) {
  63. $(this).parent().parent().parent().remove();
  64. });
  65. //Alle Abkürzungen einfügen und prüfen ob im pattern angegeben
  66. abk.forEach(function(item){
  67. var clonepattern = document.importNode(document.querySelector('#RectanglePattern').content,true);
  68. $('[data-class=abk]',clonepattern).text(item);
  69. $('[data-class=input]',clonepattern).prop('name', item);
  70. if(typeof pattern !== 'undefined' && pattern[item]){
  71. $('[data-class=input]',clonepattern).prop('checked', true);
  72. }
  73. $('[data-class=input]',clonepattern).change(refreshassignments);
  74. $('[data-class=RectanglePattern',clone).append(clonepattern);
  75. });
  76. var clonepatternidtext = document.importNode(document.querySelector('#RectanglePatternText').content,true);
  77. if(typeof idtext !== 'undefined'){
  78. $('[data-class=input]',clonepatternidtext).val(idtext);
  79. }
  80. $('[data-class=RectanglePattern',clone).append(clonepatternidtext);
  81. //add Assignment Station
  82. var clonepattern = document.importNode(document.querySelector('#RectanglesAssignment').content,true);
  83. $('[data-class=Assignment]',clonepattern).attr("name", "Station");
  84. $('[data-class=AssignmentAbk]',clonepattern).text("Station");
  85. //Stationen einfügen
  86. $.ajax({
  87. type: "GET",
  88. url: "../server/",
  89. dataType: "xml",
  90. success: function(xml) {
  91. $(xml).find('station').each(function(index){
  92. console.log($(this).attr('id'));
  93. $('[data-class=AssignmentOptionen]',clonepattern).append('<option value="' + $(this).attr('id') +'">' + $(this).attr('id') +'</option>');
  94. });
  95. },
  96. async: false
  97. });
  98. //station hinzufügen/löschen
  99. $('[data-class=AssignmentAdd]',clonepattern).on('click', function(e) {
  100. var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
  101. $('[data-class=AssignmentText]',clonepatternvalue).text(e.target.previousElementSibling.value);
  102. //löschen
  103. $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
  104. e.target.parentNode.remove();
  105. });
  106. e.target.nextElementSibling.append(clonepatternvalue)
  107. });
  108. //Station Ausfüllen
  109. if(typeof assignmentsstation !== 'undefined' && assignmentsstation){
  110. $.each(assignmentsstation, function(i, item){
  111. var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
  112. $('[data-class=AssignmentText]',clonepatternvalue).text(item);
  113. //löschen
  114. $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
  115. e.target.parentNode.remove();
  116. });
  117. $('[data-class=AllAssignments]',clonepattern).append(clonepatternvalue)
  118. });
  119. }
  120. $('[data-class=RectangleAssignmentStation]',clone).append(clonepattern);
  121. //add assignments
  122. $.each( fullpattern["pattern"], function(i, item){
  123. var clonepattern = document.importNode(document.querySelector('#RectanglesAssignment').content,true);
  124. $('[data-class=Assignment]',clonepattern).attr("name", item["abk"]);
  125. $('[data-class=AssignmentAbk]',clonepattern).text(item["abk"]);
  126. $.each( item["types"], function(i, item){
  127. if(item != "")
  128. $('[data-class=AssignmentOptionen]',clonepattern).append('<option value="' + item +'">' + item +'</option>');
  129. });
  130. //einfügen
  131. $('[data-class=AssignmentAdd]',clonepattern).on('click', function(e) {
  132. var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
  133. $('[data-class=AssignmentText]',clonepatternvalue).text(e.target.previousElementSibling.value);
  134. //löschen
  135. $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
  136. e.target.parentNode.remove();
  137. });
  138. e.target.nextElementSibling.append(clonepatternvalue)
  139. });
  140. //Default Assignment nur bei angekreuzten pattern ausfüllen
  141. if(typeof pattern !== 'undefined' && pattern[item["abk"]]){
  142. $('[data-class=AssignmentDefaultValue]',clonepattern).text($("#FormPattern2_Form_" + item["abk"]).find(":selected").text());
  143. }
  144. //Assignment Ausfüllen
  145. if(typeof assignments !== 'undefined' && assignments[item["abk"]]){
  146. $.each(assignments[item["abk"]], function(i, item){
  147. var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
  148. $('[data-class=AssignmentText]',clonepatternvalue).text(item);
  149. //löschen
  150. $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
  151. e.target.parentNode.remove();
  152. });
  153. $('[data-class=AllAssignments]',clonepattern).append(clonepatternvalue)
  154. });
  155. }
  156. $('[data-class=RectangleAssignment]',clone).append(clonepattern);
  157. });
  158. $('#imgRectangles').append(clone);
  159. //add rectangle to image
  160. var clone = document.importNode(document.querySelector('#RectanglesImage').content,true);
  161. $('[data-class=RectID]',clone).attr("id","Rect" + localID);
  162. $('[data-class=RectID]',clone).attr("y",y);
  163. //Write text into img. such that this text shall equal the text on the slides
  164. var recttext = "";
  165. abk.forEach(function(item){
  166. if(typeof pattern !== 'undefined' && pattern[item]){
  167. recttext += item;
  168. }
  169. });
  170. if(typeof idtext !== 'undefined' && idtext != ""){
  171. recttext += "ID:" + idtext;
  172. }
  173. $('[data-class=RectID]',clone).text(recttext);
  174. $('[data-class=RectID]',clone).css("top", y * scalefactor() + "px");
  175. $('[data-class=RectID]',clone).css("left", x * scalefactor() + "px");
  176. $('[data-class=RectID]',clone).css("width", w + "px");
  177. $('[data-class=RectID]',clone).css("height", h + "px");
  178. $('[data-class=RectID]',clone).hover(function(){
  179. $('#FormRect' + localID).css("background", colors[localID % colors.length]);
  180. $('#Rect' + localID).css("background", colors[localID % colors.length]);
  181. $('#detailcolumn2').scrollTop( 0 );
  182. $('#detailcolumn2').scrollTop($('#FormRect' + localID).position().top - 50 );
  183. },
  184. function(){
  185. $("#detailcolumn2").stop();
  186. $('#FormRect' + localID).css("background", "none");
  187. $('#Rect' + localID).css("background", "none");
  188. });
  189. $('#imgrect').append(clone);
  190. refitRect(localID);
  191. ++rectID;
  192. new Sortable(document.getElementById('imgRectangles'),{
  193. handle: '.handle3',
  194. animation: 150
  195. });
  196. }
  197. function createPatternForm(){
  198. /* Load pattern config */
  199. //Create form for WAS/Stations/Pattern and WAS/Slicer
  200. var populate = ["FormPattern","FormPattern2","FormPatternAssignment"]
  201. var first = true;
  202. populate.forEach(function(populate2){
  203. $.getJSON( "../server/json/ProductCode.json", function( data ) {
  204. fullpattern = data;
  205. $.each( data["pattern"], function(i, item){
  206. var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
  207. $('[data-class=Name]',clone).text(item["name"]);
  208. $('[data-class=Abkürzung]',clone).text(item["abk"]);
  209. if(first)
  210. abk.push(item["abk"])
  211. $('[data-class=Optionen]',clone).attr("name",item["abk"])
  212. $.each( item["types"], function(i, item){
  213. $('[data-class=Optionen]',clone).append('<option value="' + item +'">' + item +'</option>');
  214. });
  215. $('[data-class=Optionen]',clone).attr("id", populate2 + "_Form_" + item["abk"]);
  216. $('#' + populate2).append(clone);
  217. });
  218. //Add "Text" to abk to show it within rects
  219. first = false;
  220. //on Patternform2 change trigger assignment default reset
  221. if(populate2 == "FormPattern2"){
  222. abk.forEach(function(localabk){
  223. $("#FormPattern2_Form_" + localabk).change(refreshassignments);
  224. });
  225. }
  226. });
  227. });
  228. abk.length = 0;
  229. //get Save locations
  230. $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
  231. $.each( data["saveLocation"], function(i, item){
  232. $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
  233. });
  234. });
  235. }
  236. function updateSlicerPatternForm(){
  237. }
  238. function createRectForm(station){
  239. var imgsrc = $("#sliceImg").attr("src")
  240. rectID = 0;
  241. $('#imgRectangles').text("");
  242. $('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
  243. $.getJSON( "../server/json/Rectangle.json", function( data ) {
  244. $.each( data["Configs"], function(i, item){
  245. if(item["name"] == station){
  246. $.each( item["rects"], function(i, item){
  247. addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"],item["idtext"],item["assignmentsstation"], item["assignments"]);
  248. });
  249. }
  250. });
  251. });
  252. }
  253. function loadStationsForm(){
  254. $.getJSON( "../server/json/Rectangle.json", function( data ) {
  255. $.each( data["Configs"], function(i, item){
  256. $("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
  257. });
  258. $("#loadconfig").on('change', function() {
  259. createRectForm(this.value);
  260. });
  261. });
  262. }
  263. function createJson(){
  264. rects = []
  265. $(".singleRect").each(function() {
  266. var pats = {}
  267. $(this).find(".patternPart3").each(function() {
  268. $(this).find('.patternPart3Input:checked').each(function() {
  269. pats[$(this).attr('name')] = true;
  270. });
  271. });
  272. var txt;
  273. $(this).find(".patternPart3Text").each(function() {
  274. txt = $(this).children("input").val();
  275. });
  276. //get All stations
  277. var assignmentstation = assignmentGetAllStatios($(this));
  278. //get all assignments of current Rectangle
  279. var assignments = assignmentGetAllAssignments($(this));
  280. 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, assignmentsstation: assignmentstation, assignments: assignments};
  281. rects.push(rect);
  282. });
  283. allrects = {name: $("#loadconfig").val(), rects: rects};
  284. return allrects;
  285. }
  286. function createJsonCutting(){
  287. var rects = createJson();
  288. rects.rects.forEach(function(value) {
  289. pattern = value.pattern;
  290. abk.forEach(function(item){
  291. if(typeof $("#FormPattern2_Form_" + item).val() !== 'undefined' && typeof $("#FormPattern2_Form_" + item).val() !== 'undefined'){
  292. if(pattern[item]){
  293. //if rectangle is checked but nothing has been selected
  294. if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
  295. pattern[item] = "NoSelection";
  296. }
  297. else{
  298. pattern[item] = $("#FormPattern2_Form_" + item).find(":selected").text();
  299. }
  300. }
  301. }
  302. });
  303. });
  304. return rects;
  305. }
  306. function recCombi(data, currindex, result, cur) {
  307. var Keys = Object.keys(data);
  308. var optionKey = Keys[currindex];
  309. var vals = data[optionKey];
  310. for (var i = 0; i < vals.length; i++) {
  311. cur[optionKey] = vals[i];
  312. if (currindex + 1 < Keys.length) {
  313. recCombi(data, currindex + 1, result, cur);
  314. }
  315. else {
  316. var res = JSON.parse(JSON.stringify(cur));
  317. result.push(res);
  318. }
  319. }
  320. return result;
  321. }
  322. //gets assignment station for current rectangle
  323. function assignmentGetAllStatios(cur) {
  324. var assignmentstation = []
  325. cur.find(".RectangleAssignmentStation div").each(function() {
  326. var allass = new Set();
  327. $(this).find(".RectanglesAssignmentValue").each(function() {
  328. allass.add($(this).text());
  329. });
  330. if(allass.size)
  331. assignmentstation = Array.from(allass);
  332. });
  333. return assignmentstation;
  334. }
  335. //gets assignments for current rectangle
  336. function assignmentGetAllAssignments(cur, addDefaultValues = false) {
  337. var assignments = {};
  338. cur.find(".RectangleAssignment div").each(function() {
  339. assname = $(this).attr('name')
  340. var allass = new Set();
  341. if(addDefaultValues && $(this).find(".RectanglesAssignmentDefaultValue").first().text() != ""){
  342. allass.add($(this).find(".RectanglesAssignmentDefaultValue").first().text());
  343. }
  344. $(this).find(".RectanglesAssignmentValue").each(function() {
  345. allass.add($(this).text());
  346. });
  347. if(allass.size){
  348. assignments[assname] = Array.from(allass);
  349. }
  350. });
  351. return assignments;
  352. }
  353. function assignmentGetAllEmptyAssignments(cur){
  354. var assignments = {};
  355. cur.find(".RectangleAssignment div").each(function() {
  356. assname = $(this).attr('name')
  357. var allass = new Set();
  358. if($(this).find(".RectanglesAssignmentDefaultValue").first().text() != ""){
  359. allass.add($(this).find(".RectanglesAssignmentDefaultValue").first().text());
  360. }
  361. $(this).find(".RectanglesAssignmentValue").each(function() {
  362. allass.add($(this).text());
  363. });
  364. if(!allass.size){
  365. assignments[assname] = "";
  366. }
  367. });
  368. return assignments;
  369. }
  370. function submitSlices(skip = false){
  371. //createJsonCutting();
  372. //check if selected options are also selected in drop down menus
  373. var skippall = false;
  374. if(!skip){
  375. var checkedoptions = new Set();
  376. $("#imgRectangles wasRight input[type=checkbox]:checked").each(function(index, data){
  377. checkedoptions.add($(data).attr("name"))
  378. });
  379. var allskips = [];
  380. checkedoptions.forEach(function(item){
  381. if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
  382. allskips.push(item);
  383. }
  384. });
  385. if (Array.isArray(allskips) && allskips.length) {
  386. if(!confirm("Achtung: [" + allskips + "] nicht ausgefüllt, fortfahren?")){
  387. skippall = true;
  388. }
  389. }
  390. }
  391. if(!skippall){
  392. request = $.ajax({
  393. type: "POST",
  394. url: "imageSlicer.php",
  395. async: false,
  396. data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
  397. success: function(data){
  398. if (!data.hasOwnProperty('override')) {
  399. //clearFormFull();
  400. if(!skip){
  401. alert("Saved Images");
  402. }
  403. }
  404. else if(data.hasOwnProperty('error')){
  405. alert("Achtung Fehler: \n" + data.error)
  406. console.log(data);
  407. }
  408. else{
  409. if(!skip){
  410. overlayOnDupliImages(data.override);
  411. }
  412. }
  413. //Create Assignments (first returned url == first rectangle)
  414. if(data.hasOwnProperty('url')){
  415. var counter = 0;
  416. $(".singleRect").each(function() {
  417. var txt = "";
  418. $(this).find(".patternPart3Text").each(function() {
  419. txt = $(this).children("input").val();
  420. });
  421. //get All stations
  422. var assignmentstation = assignmentGetAllStatios($(this));
  423. //get all assignments of current Rectangle
  424. var assignments = assignmentGetAllAssignments($(this), true);
  425. //in case no assignments are found do next rect
  426. console.log(assignments);
  427. if(Object.keys(assignments).length === 0){
  428. ++counter;
  429. return true;
  430. }
  431. //get all empty assignments of current Rectangle
  432. var emptyassignments = assignmentGetAllEmptyAssignments($(this));
  433. //get all combinations of assignments
  434. var result = recCombi(assignments, 0, [], {});
  435. //Save assignments
  436. $.each(assignmentstation, function(i, station) {
  437. $.each(result, function(i, item) {
  438. var obj = new Object();
  439. obj.img = data.url[counter];
  440. obj.station = station;
  441. $.extend( item, emptyassignments );
  442. obj.parts = item;
  443. obj.assignmentText = txt;
  444. console.log(obj);
  445. //use storage function from assignment.js
  446. submitAssignment(obj);
  447. });
  448. });
  449. ++counter;
  450. });
  451. }
  452. },
  453. error: function(xhr, status, error){
  454. console.error(xhr);
  455. }
  456. });
  457. }
  458. }
  459. function overlayOnDupliImages(data) {
  460. document.getElementById("overlayNotClickable").style.display = "block";
  461. var clone = document.importNode(document.querySelector('#SlicerDupliOverlay').content,true);
  462. $.each( data, function(i, item){
  463. var clone2 = document.importNode(document.querySelector('#SlicerDupliImageRow').content,true);
  464. $('[data-class=oldimg]',clone2).attr("src", item["old"] + '?rand=' + Math.random());
  465. $('[data-class=newimg]',clone2).attr("src", item["new"] + '?rand=' + Math.random());
  466. $('[data-class=changebutton]',clone2).attr("onclick", "javascript:changeimg(\"" + item["old"] + "\", \"" + item["new"] +"\", this )");
  467. $('[data-class=ImgList]',clone).append(clone2);
  468. });
  469. $('#overlaycontentsizeNotClickable').append(clone)
  470. }
  471. function changeimg(oldimg, newimg, buttonelement) {
  472. $.get( "imageOverride.php?overridden=" + oldimg + "&new=" + newimg , function( data ) {
  473. //hide button
  474. $(buttonelement).hide(200);
  475. });
  476. }
  477. function showJson(){
  478. copy2Clipboard(JSON.stringify(createJson()))
  479. }
  480. function overrideRect(){
  481. if (confirm('Please be carefull when overriding, are you sure?')) {
  482. var curjson = createJson();
  483. $.getJSON( "../server/json/Rectangle.json", function( data ) {
  484. //Override Rects
  485. $.each(data.Configs, function(i, item) {
  486. if(curjson.name == item.name){
  487. //data.Configs[i].rects = curjson.rects;
  488. item.rects = curjson.rects;
  489. console.log("Overriding")
  490. }
  491. });
  492. submitJson("Rectangle.json", JSON.stringify(data));
  493. });
  494. }
  495. }
  496. function copy2Clipboard(datalink) {
  497. const el = document.createElement('textarea');
  498. el.value = datalink;
  499. document.body.appendChild(el);
  500. el.select();
  501. document.execCommand('copy');
  502. document.body.removeChild(el);
  503. }
  504. function clearFormFull(){
  505. clearForm();
  506. $('#slicerpatterninput').val("");
  507. }
  508. function clearForm(){
  509. $('#FormPattern2').find("select").prop("selectedIndex",0);
  510. }
  511. function fillFormName(value){
  512. $("#slicerpatterninput").val(value);
  513. fillslicerpattern();
  514. }
  515. function fillpatternForm(e) {
  516. var code = (e.keyCode ? e.keyCode : e.which);
  517. if (code == 13) { //Enter keycode
  518. fillslicerpattern();
  519. }
  520. };
  521. function fillslicerpattern(){
  522. clearForm();
  523. jQuery.ajax({
  524. url: "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(),
  525. success: function (data) {
  526. $.each( data, function(i, item){
  527. $("#FormPattern2_Form_" + i).val(item);
  528. });
  529. },
  530. async: false
  531. });
  532. }
  533. function getAllFolders(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
  534. $('#selectfolders').find('option').remove()
  535. $('#selectfolders').append("<option></option>")
  536. $.ajax({
  537. type: "GET",
  538. url: urlUniversalStorage + "server/allfolders/" + folder,
  539. async: false,
  540. dataType: "json",
  541. success: function(data) {
  542. $.each( data, function( key, value ) {
  543. $('#selectfolders').append("<option>" + value.slice(0,-1) +"</option>")
  544. });
  545. }
  546. });
  547. }
  548. function getAllFiles(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
  549. $.ajax({
  550. type: "GET",
  551. url: urlUniversalStorage + "server/images/" + folder,
  552. dataType: "json",
  553. success: function(data) {
  554. $.each( data, function( key, value ) {
  555. console.log(value);
  556. console.log(urlUniversalStorage + "storage/" + folder + "/" + value);
  557. $("#sliceImg").attr("src", urlUniversalStorage + "storage/" + folder + "/" + value)
  558. fillFormName(value);
  559. submitSlices(true);
  560. /*
  561. $("#slicerpatterninput").val(value);
  562. fillslicerpattern();
  563. */
  564. });
  565. }
  566. });
  567. }
  568. function togglenext(currelement){
  569. currelement.next().slideToggle();
  570. }
  571. function refreshassignments(){
  572. $(".singleRect").each(function() {
  573. var main = $(this);
  574. $(this).find(".RectangleAssignment div").each(function() {
  575. var curabk = $(this).attr('name');
  576. var next = false;
  577. main.find(".patternPart3 .patternPart3Input:checked ").each(function() {
  578. if($(this).attr('name') == curabk){
  579. next = true;
  580. }
  581. });
  582. if(next){
  583. $(this).find(".RectanglesAssignmentDefaultValue").first().text($("#FormPattern2_Form_" + curabk).find(":selected").text())
  584. }
  585. else{
  586. $(this).find(".RectanglesAssignmentDefaultValue").first().text("")
  587. }
  588. });
  589. });
  590. }
  591. $(document).ready(function() {
  592. createPatternForm();
  593. updateSlicerPatternForm();
  594. loadStationsForm();
  595. getAllFolders();
  596. //press enter to fill out patternform
  597. $("#slicerpatterninput").bind("keypress", {}, fillpatternForm);
  598. /*
  599. $("#sliceImg").bind('load', function() {
  600. resizeAllRect();
  601. });*/
  602. /*
  603. $("#sliceImg").on('load', function () {
  604. resizeAllRect();
  605. });
  606. */
  607. /*
  608. $('#sliceImg').on('load',function(){
  609. resizeAllRect();
  610. });
  611. */
  612. $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
  613. if(!data["SlicerRectForm"]){
  614. $("#addRectanglesGroup").hide();
  615. $("#imgRectangles").hide();
  616. $("#Json2ClipboardGroup").hide();
  617. }
  618. });
  619. $(document).on('submit', '#sliceform', function() { //prevent page reload on form submit
  620. return false;
  621. });
  622. $("#showJson").click(function() {
  623. showJson();
  624. });
  625. $("#overrideRect").click(function() {
  626. overrideRect();
  627. });
  628. $("#multiCut").click(function() {
  629. getAllFiles($('#selectfolders').val());
  630. });
  631. $('#pattern2').text("");
  632. var clone = document.importNode(document.querySelector('#patternClone').content,true);
  633. $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  634. $("#pattern2").append(clone);
  635. //handle zoom event in order to fix rectangle position
  636. window.addEventListener("resize", resizeAllRect, false);
  637. });