|
@@ -15,12 +15,21 @@ function refitRect(id){
|
|
$('#Rect' + id).css('transform', 'scale(' + scalefactor() + ')');
|
|
$('#Rect' + id).css('transform', 'scale(' + scalefactor() + ')');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+function resizeAllRect() {
|
|
|
|
+ console.log("resizing");
|
|
|
|
+ for (var i = 0; i < rectID; i++) {
|
|
|
|
+ refitRect(i);
|
|
|
|
+ $('#Rect' + i).css("top", $('#Rect' + i).attr("y") * scalefactor() + "px");
|
|
|
|
+ $('#Rect' + i).css("left", $('#Rect' + i).attr("x") * scalefactor() + "px");
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
function changeRectPosition(id, style, amount){
|
|
function changeRectPosition(id, style, amount){
|
|
$('#Rect' + id).css(style, amount + "px");
|
|
$('#Rect' + id).css(style, amount + "px");
|
|
refitRect(id);
|
|
refitRect(id);
|
|
}
|
|
}
|
|
|
|
|
|
-function addRectangle1(id,x,y,w,h,pattern){
|
|
|
|
|
|
+function addRectangle1(id,x,y,w,h,pattern,idtext){
|
|
//Show input fields
|
|
//Show input fields
|
|
var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
|
|
var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
|
|
|
|
|
|
@@ -63,30 +72,29 @@ function addRectangle1(id,x,y,w,h,pattern){
|
|
|
|
|
|
//Alle Abkürzungen einfügen und prüfen ob im pattern angegeben
|
|
//Alle Abkürzungen einfügen und prüfen ob im pattern angegeben
|
|
abk.forEach(function(item){
|
|
abk.forEach(function(item){
|
|
- if(item == "Text"){
|
|
|
|
- var clonepattern = document.importNode(document.querySelector('#RectanglePatternText').content,true);
|
|
|
|
- if(typeof pattern !== 'undefined' && typeof pattern[item] !== 'undefined'){
|
|
|
|
- $('[data-class=input]',clonepattern).val(pattern[item]);
|
|
|
|
- }
|
|
|
|
- $('[data-class=RectanglePattern',clone).append(clonepattern);
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- var clonepattern = document.importNode(document.querySelector('#RectanglePattern').content,true);
|
|
|
|
- $('[data-class=abk]',clonepattern).text(item);
|
|
|
|
- $('[data-class=input]',clonepattern).prop('name', item);
|
|
|
|
- if(typeof pattern !== 'undefined' && pattern[item]){
|
|
|
|
- $('[data-class=input]',clonepattern).prop('checked', true);
|
|
|
|
- }
|
|
|
|
- $('[data-class=RectanglePattern',clone).append(clonepattern);
|
|
|
|
|
|
+ var clonepattern = document.importNode(document.querySelector('#RectanglePattern').content,true);
|
|
|
|
+ $('[data-class=abk]',clonepattern).text(item);
|
|
|
|
+ $('[data-class=input]',clonepattern).prop('name', item);
|
|
|
|
+ if(typeof pattern !== 'undefined' && pattern[item]){
|
|
|
|
+ $('[data-class=input]',clonepattern).prop('checked', true);
|
|
}
|
|
}
|
|
|
|
+ $('[data-class=RectanglePattern',clone).append(clonepattern);
|
|
|
|
+
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+ var clonepatternidtext = document.importNode(document.querySelector('#RectanglePatternText').content,true);
|
|
|
|
+ if(typeof idtext !== 'undefined'){
|
|
|
|
+ $('[data-class=input]',clonepatternidtext).val(idtext);
|
|
|
|
+ }
|
|
|
|
+ $('[data-class=RectanglePattern',clone).append(clonepatternidtext);
|
|
|
|
+
|
|
|
|
+
|
|
$('#imgRectangles').append(clone);
|
|
$('#imgRectangles').append(clone);
|
|
|
|
|
|
//add rectangle
|
|
//add rectangle
|
|
var clone = document.importNode(document.querySelector('#RectanglesImage').content,true);
|
|
var clone = document.importNode(document.querySelector('#RectanglesImage').content,true);
|
|
$('[data-class=RectID]',clone).attr("id","Rect" + localID);
|
|
$('[data-class=RectID]',clone).attr("id","Rect" + localID);
|
|
|
|
+ $('[data-class=RectID]',clone).attr("y",y);
|
|
$('[data-class=RectID]',clone).text("Rect" + localID);
|
|
$('[data-class=RectID]',clone).text("Rect" + localID);
|
|
|
|
|
|
$('[data-class=RectID]',clone).css("top", y * scalefactor() + "px");
|
|
$('[data-class=RectID]',clone).css("top", y * scalefactor() + "px");
|
|
@@ -109,15 +117,16 @@ function addRectangle1(id,x,y,w,h,pattern){
|
|
$('#Rect' + localID).css("background", "none");
|
|
$('#Rect' + localID).css("background", "none");
|
|
});
|
|
});
|
|
|
|
|
|
-
|
|
|
|
$('#imgrect').append(clone);
|
|
$('#imgrect').append(clone);
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
refitRect(localID);
|
|
refitRect(localID);
|
|
|
|
|
|
++rectID;
|
|
++rectID;
|
|
|
|
+
|
|
|
|
+ new Sortable(document.getElementById('imgRectangles'),{
|
|
|
|
+ handle: '.handle3',
|
|
|
|
+ animation: 150
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -130,7 +139,7 @@ function createPatternForm(){
|
|
|
|
|
|
var first = true;
|
|
var first = true;
|
|
populate.forEach(function(populate2){
|
|
populate.forEach(function(populate2){
|
|
- $.getJSON( "json/ProductCode.json", function( data ) {
|
|
|
|
|
|
+ $.getJSON( "../server/json/ProductCode.json", function( data ) {
|
|
$.each( data["pattern"], function(i, item){
|
|
$.each( data["pattern"], function(i, item){
|
|
var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
|
|
var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
|
|
$('[data-class=Name]',clone).text(item["name"]);
|
|
$('[data-class=Name]',clone).text(item["name"]);
|
|
@@ -145,8 +154,6 @@ function createPatternForm(){
|
|
$('#' + populate2).append(clone);
|
|
$('#' + populate2).append(clone);
|
|
});
|
|
});
|
|
//Add "Text" to abk to show it within rects
|
|
//Add "Text" to abk to show it within rects
|
|
- if(first)
|
|
|
|
- abk.push("Text")
|
|
|
|
first = false;
|
|
first = false;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
@@ -154,7 +161,7 @@ function createPatternForm(){
|
|
console.log(abk);
|
|
console.log(abk);
|
|
|
|
|
|
//get Save locations
|
|
//get Save locations
|
|
- $.getJSON( "json/SlicerConfig.json", function( data ) {
|
|
|
|
|
|
+ $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
|
|
$.each( data["saveLocation"], function(i, item){
|
|
$.each( data["saveLocation"], function(i, item){
|
|
$("#savelocation").append('<option value="' + item +'">' + item +'</option>');
|
|
$("#savelocation").append('<option value="' + item +'">' + item +'</option>');
|
|
});
|
|
});
|
|
@@ -170,21 +177,21 @@ function createRectForm(station){
|
|
|
|
|
|
|
|
|
|
$('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
|
|
$('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
|
|
- $.getJSON( "json/Rectangle.json", function( data ) {
|
|
|
|
|
|
+ $.getJSON( "../server/json/Rectangle.json", function( data ) {
|
|
$.each( data["Configs"], function(i, item){
|
|
$.each( data["Configs"], function(i, item){
|
|
if(item["name"] == station){
|
|
if(item["name"] == station){
|
|
$.each( item["rects"], function(i, item){
|
|
$.each( item["rects"], function(i, item){
|
|
- addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"]);
|
|
|
|
|
|
+ addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"],item["idtext"]);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- });
|
|
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadStationsForm(){
|
|
function loadStationsForm(){
|
|
|
|
|
|
- $.getJSON( "json/Rectangle.json", function( data ) {
|
|
|
|
|
|
+ $.getJSON( "../server/json/Rectangle.json", function( data ) {
|
|
$.each( data["Configs"], function(i, item){
|
|
$.each( data["Configs"], function(i, item){
|
|
$("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
|
|
$("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
|
|
});
|
|
});
|
|
@@ -204,11 +211,12 @@ function createJson(){
|
|
pats[$(this).attr('name')] = true;
|
|
pats[$(this).attr('name')] = true;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
+ var txt;
|
|
$(this).find(".patternPart3Text").each(function() {
|
|
$(this).find(".patternPart3Text").each(function() {
|
|
- pats[$(this).children("span").text()] = $(this).children("input").val();
|
|
|
|
|
|
+ txt = $(this).children("input").val();
|
|
});
|
|
});
|
|
|
|
|
|
- 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};
|
|
|
|
|
|
+ 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};
|
|
rects.push(rect);
|
|
rects.push(rect);
|
|
});
|
|
});
|
|
allrects = {name: $("#loadconfig").val(), rects: rects};
|
|
allrects = {name: $("#loadconfig").val(), rects: rects};
|
|
@@ -240,36 +248,85 @@ function createJsonCutting(){
|
|
function submitSlices(){
|
|
function submitSlices(){
|
|
//createJsonCutting();
|
|
//createJsonCutting();
|
|
|
|
|
|
- console.log(JSON.stringify(createJsonCutting()));
|
|
|
|
|
|
+ //console.log(JSON.stringify(createJsonCutting()));
|
|
|
|
|
|
|
|
+ //check if selected options are also selected in drop down menus
|
|
|
|
+ var checkedoptions = new Set();
|
|
|
|
+ $("#imgRectangles input[type=checkbox]:checked").each(function(index, data){
|
|
|
|
+ checkedoptions.add($(data).attr("name"))
|
|
|
|
+ });
|
|
|
|
+ var allskips = [];
|
|
|
|
+ var skippall = false;
|
|
|
|
+ checkedoptions.forEach(function(item){
|
|
|
|
+ if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
|
|
|
|
+ allskips.push(item);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ if(!confirm("Achtung: [" + allskips + "] nicht ausgefüllt, fortfahren?")){
|
|
|
|
+ skippall = true;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if(!skippall){
|
|
request = $.ajax({
|
|
request = $.ajax({
|
|
type: "POST",
|
|
type: "POST",
|
|
- url: "https://centurio.work/customers/evva/was/ui/images/imageSlicer.php",
|
|
|
|
|
|
+ url: "imageSlicer.php",
|
|
data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
|
|
data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
|
|
success: function(data){
|
|
success: function(data){
|
|
- console.log(data);
|
|
|
|
|
|
+ if ( data.length <= 4 ) {
|
|
|
|
+ //clearFormFull();
|
|
|
|
+ alert("Saved Images");
|
|
|
|
+ }
|
|
|
|
+ else{
|
|
|
|
+ overlayOnDupliImages(data);
|
|
|
|
+ //clearFormFull();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
error: function(xhr, status, error){
|
|
error: function(xhr, status, error){
|
|
console.error(xhr);
|
|
console.error(xhr);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+ }
|
|
|
|
|
|
- /*
|
|
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+function overlayOnDupliImages(data) {
|
|
|
|
|
|
- imageurl,
|
|
|
|
- savelocation,
|
|
|
|
- code,
|
|
|
|
- rectangles,
|
|
|
|
|
|
+ document.getElementById("overlayNotClickable").style.display = "block";
|
|
|
|
|
|
|
|
+ var clone = document.importNode(document.querySelector('#SlicerDupliOverlay').content,true);
|
|
|
|
+ $.each( data, function(i, item){
|
|
|
|
+ var clone2 = document.importNode(document.querySelector('#SlicerDupliImageRow').content,true);
|
|
|
|
+ $('[data-class=oldimg]',clone2).attr("src", item["old"] + '?rand=' + Math.random());
|
|
|
|
+ $('[data-class=newimg]',clone2).attr("src", item["new"] + '?rand=' + Math.random());
|
|
|
|
+ $('[data-class=changebutton]',clone2).attr("onclick", "javascript:changeimg(\"" + item["old"] + "\", \"" + item["new"] +"\", this )");
|
|
|
|
+ $('[data-class=ImgList]',clone).append(clone2);
|
|
|
|
+ });
|
|
|
|
+ $('#overlaycontentsizeNotClickable').append(clone)
|
|
|
|
|
|
- */
|
|
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function changeimg(oldimg, newimg, buttonelement) {
|
|
|
|
+
|
|
|
|
+ $.get( "imageOverride.php?overridden=" + oldimg + "&new=" + newimg , function( data ) {
|
|
|
|
+ //hide button
|
|
|
|
+ $(buttonelement).hide(200);
|
|
|
|
|
|
|
|
+ //console.log(data);
|
|
|
|
+ });
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
function showJson(){
|
|
function showJson(){
|
|
-
|
|
|
|
copy2Clipboard(JSON.stringify(createJson()))
|
|
copy2Clipboard(JSON.stringify(createJson()))
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function copy2Clipboard(datalink) {
|
|
function copy2Clipboard(datalink) {
|
|
@@ -281,10 +338,70 @@ function copy2Clipboard(datalink) {
|
|
document.body.removeChild(el);
|
|
document.body.removeChild(el);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+function clearFormFull(){
|
|
|
|
+ clearForm();
|
|
|
|
+ $('#slicerpatterninput').val("");
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function clearForm(){
|
|
|
|
+ $('#FormPattern2').find("select").prop("selectedIndex",0);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function fillFormName(value){
|
|
|
|
+ $("#slicerpatterninput").val(value);
|
|
|
|
+ fillslicerpattern();
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function fillpatternForm(e) {
|
|
|
|
+ var code = (e.keyCode ? e.keyCode : e.which);
|
|
|
|
+ if (code == 13) { //Enter keycode
|
|
|
|
+ fillslicerpattern();
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+function fillslicerpattern(){
|
|
|
|
+ clearForm();
|
|
|
|
+ $.getJSON( "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(), function( data ) {
|
|
|
|
+ $.each( data, function(i, item){
|
|
|
|
+ $("#FormPattern2_Form_" + i).val(item);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
$(document).ready(function() {
|
|
$(document).ready(function() {
|
|
createPatternForm();
|
|
createPatternForm();
|
|
loadStationsForm();
|
|
loadStationsForm();
|
|
|
|
|
|
|
|
+ //press enter to fill out patternform
|
|
|
|
+ $("#slicerpatterninput").bind("keypress", {}, fillpatternForm);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ /*
|
|
|
|
+$("#sliceImg").bind('load', function() {
|
|
|
|
+
|
|
|
|
+ resizeAllRect();
|
|
|
|
+ });*/
|
|
|
|
+
|
|
|
|
+/*
|
|
|
|
+$("#sliceImg").on('load', function () {
|
|
|
|
+ resizeAllRect();
|
|
|
|
+});
|
|
|
|
+*/
|
|
|
|
+/*
|
|
|
|
+$('#sliceImg').on('load',function(){
|
|
|
|
+ resizeAllRect();
|
|
|
|
+});
|
|
|
|
+*/
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
|
|
|
|
+ if(!data["SlicerRectForm"]){
|
|
|
|
+ $("#addRectanglesGroup").hide();
|
|
|
|
+ $("#imgRectangles").hide();
|
|
|
|
+ $("#Json2ClipboardGroup").hide();
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
$(document).on('submit', '#sliceform', function() { //prevent page reload on form submit
|
|
$(document).on('submit', '#sliceform', function() { //prevent page reload on form submit
|
|
return false;
|
|
return false;
|
|
});
|
|
});
|
|
@@ -300,4 +417,8 @@ $(document).ready(function() {
|
|
$("#pattern2").append(clone);
|
|
$("#pattern2").append(clone);
|
|
|
|
|
|
|
|
|
|
|
|
+ //handle zoom event in order to fix rectangle position
|
|
|
|
+ window.addEventListener("resize", resizeAllRect, false);
|
|
|
|
+
|
|
|
|
+
|
|
});
|
|
});
|