|
|
@@ -0,0 +1,303 @@
|
|
|
+
|
|
|
+rectID = 0;
|
|
|
+colors = ["rgba(0,255,0,0.7)","rgba(255,0,0,0.7)","rgba(0,0,255,0.7)","rgba(0,255,255,0.7)","rgba(255,255,0,0.7)","rgba(255,0,255,0.7)","rgba(0,122,0,0.7)","rgba(122,0,0,0.7)","rgba(0,0,122,0.7)","rgba(0,122,122,0.7)","rgba(122,122,0,0.7)","rgba(122,0,122,0.7)"]
|
|
|
+abk = [];
|
|
|
+
|
|
|
+function addRectangle(){
|
|
|
+ addRectangle1("", 0,0,1000,100)
|
|
|
+}
|
|
|
+
|
|
|
+function scalefactor(){
|
|
|
+ return $('#sliceImg').innerWidth() / $('#sliceImg').prop('naturalWidth');
|
|
|
+}
|
|
|
+
|
|
|
+function refitRect(id){
|
|
|
+ $('#Rect' + id).css('transform', 'scale(' + scalefactor() + ')');
|
|
|
+}
|
|
|
+
|
|
|
+function changeRectPosition(id, style, amount){
|
|
|
+ $('#Rect' + id).css(style, amount + "px");
|
|
|
+ refitRect(id);
|
|
|
+}
|
|
|
+
|
|
|
+function addRectangle1(id,x,y,w,h,pattern){
|
|
|
+ //Show input fields
|
|
|
+ var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
|
|
|
+
|
|
|
+ var localID = rectID
|
|
|
+ if(id != "")
|
|
|
+ localID = id;
|
|
|
+
|
|
|
+ $('[data-class=RectID]',clone).text("" + localID);
|
|
|
+
|
|
|
+ $('[data-class=mainDiv]',clone).hover(function(){
|
|
|
+ $('#Rect' + localID).css("background", colors[localID % colors.length]);
|
|
|
+ $('#FormRect' + localID).css("background", colors[localID % colors.length]);
|
|
|
+ },
|
|
|
+ function(){
|
|
|
+ $('#Rect' + localID).css("background", "none");
|
|
|
+ $('#FormRect' + localID).css("background", "none");
|
|
|
+ });
|
|
|
+ $('[data-class=mainDiv]',clone).attr('id', 'FormRect' + localID);
|
|
|
+
|
|
|
+ $('[data-class=x]',clone).val(x);
|
|
|
+ $('[data-class=x]',clone).on('input', function(e) {
|
|
|
+ changeRectPosition(localID, "left", this.value * scalefactor() );
|
|
|
+ });
|
|
|
+
|
|
|
+ $('[data-class=y',clone).val(y);
|
|
|
+ $('[data-class=y]',clone).on('input', function(e) {
|
|
|
+ changeRectPosition(localID, "top", this.value * scalefactor());
|
|
|
+ });
|
|
|
+
|
|
|
+ $('[data-class=w',clone).val(w);
|
|
|
+ $('[data-class=w]',clone).on('input', function(e) {
|
|
|
+ changeRectPosition(localID, "width", this.value );
|
|
|
+ });
|
|
|
+
|
|
|
+ $('[data-class=h',clone).val(h);
|
|
|
+ $('[data-class=h]',clone).on('input', function(e) {
|
|
|
+ changeRectPosition(localID, "height", this.value );
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ //Alle Abkürzungen einfügen und prüfen ob im pattern angegeben
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#imgRectangles').append(clone);
|
|
|
+
|
|
|
+ //add rectangle
|
|
|
+ var clone = document.importNode(document.querySelector('#RectanglesImage').content,true);
|
|
|
+ $('[data-class=RectID]',clone).attr("id","Rect" + localID);
|
|
|
+ $('[data-class=RectID]',clone).text("Rect" + localID);
|
|
|
+
|
|
|
+ $('[data-class=RectID]',clone).css("top", y * scalefactor() + "px");
|
|
|
+ $('[data-class=RectID]',clone).css("left", x * scalefactor() + "px");
|
|
|
+ $('[data-class=RectID]',clone).css("width", w + "px");
|
|
|
+ $('[data-class=RectID]',clone).css("height", h + "px");
|
|
|
+
|
|
|
+
|
|
|
+ $('[data-class=RectID]',clone).hover(function(){
|
|
|
+ $('#FormRect' + localID).css("background", colors[localID % colors.length]);
|
|
|
+ $('#Rect' + localID).css("background", colors[localID % colors.length]);
|
|
|
+
|
|
|
+
|
|
|
+ $('#detailcolumn2').scrollTop( 0 );
|
|
|
+ $('#detailcolumn2').scrollTop($('#FormRect' + localID).position().top - 50 );
|
|
|
+ },
|
|
|
+ function(){
|
|
|
+ $("#detailcolumn2").stop();
|
|
|
+ $('#FormRect' + localID).css("background", "none");
|
|
|
+ $('#Rect' + localID).css("background", "none");
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ $('#imgrect').append(clone);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ refitRect(localID);
|
|
|
+
|
|
|
+ ++rectID;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function createPatternForm(){
|
|
|
+ /* Load pattern config */
|
|
|
+ //Create form for WAS/Stations/Pattern and WAS/Slicer
|
|
|
+ var populate = ["FormPattern","FormPattern2"]
|
|
|
+
|
|
|
+
|
|
|
+ var first = true;
|
|
|
+ populate.forEach(function(populate2){
|
|
|
+ $.getJSON( "json/ProductCode.json", function( data ) {
|
|
|
+ $.each( data["pattern"], function(i, item){
|
|
|
+ var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
|
|
|
+ $('[data-class=Name]',clone).text(item["name"]);
|
|
|
+ $('[data-class=Abkürzung]',clone).text(item["abk"]);
|
|
|
+ if(first)
|
|
|
+ abk.push(item["abk"])
|
|
|
+ $.each( item["types"], function(i, item){
|
|
|
+ $('[data-class=Optionen]',clone).append('<option value="' + item +'">' + item +'</option>');
|
|
|
+ });
|
|
|
+ $('[data-class=Optionen]',clone).attr("id", populate2 + "_Form_" + item["abk"]);
|
|
|
+
|
|
|
+ $('#' + populate2).append(clone);
|
|
|
+ });
|
|
|
+ //Add "Text" to abk to show it within rects
|
|
|
+ if(first)
|
|
|
+ abk.push("Text")
|
|
|
+ first = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ abk.length = 0;
|
|
|
+ console.log(abk);
|
|
|
+
|
|
|
+ //get Save locations
|
|
|
+ $.getJSON( "json/SlicerConfig.json", function( data ) {
|
|
|
+ $.each( data["saveLocation"], function(i, item){
|
|
|
+ $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function createRectForm(station){
|
|
|
+
|
|
|
+ var imgsrc = $("#sliceImg").attr("src")
|
|
|
+ rectID = 0;
|
|
|
+ $('#imgRectangles').text("");
|
|
|
+
|
|
|
+
|
|
|
+ $('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
|
|
|
+ $.getJSON( "json/Rectangle.json", function( data ) {
|
|
|
+ $.each( data["Configs"], function(i, item){
|
|
|
+ if(item["name"] == station){
|
|
|
+ $.each( item["rects"], function(i, item){
|
|
|
+ addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function loadStationsForm(){
|
|
|
+
|
|
|
+ $.getJSON( "json/Rectangle.json", function( data ) {
|
|
|
+ $.each( data["Configs"], function(i, item){
|
|
|
+ $("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
|
|
|
+ });
|
|
|
+ $("#loadconfig").on('change', function() {
|
|
|
+ createRectForm(this.value);
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function createJson(){
|
|
|
+ rects = []
|
|
|
+ $(".singleRect").each(function() {
|
|
|
+
|
|
|
+ var pats = {}
|
|
|
+ $(this).find(".patternPart3").each(function() {
|
|
|
+ $(this).find('.patternPart3Input:checked').each(function() {
|
|
|
+ pats[$(this).attr('name')] = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ $(this).find(".patternPart3Text").each(function() {
|
|
|
+ pats[$(this).children("span").text()] = $(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};
|
|
|
+ rects.push(rect);
|
|
|
+ });
|
|
|
+ allrects = {name: $("#loadconfig").val(), rects: rects};
|
|
|
+ return allrects;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function createJsonCutting(){
|
|
|
+ var rects = createJson();
|
|
|
+
|
|
|
+ rects.rects.forEach(function(value) {
|
|
|
+ pattern = value.pattern;
|
|
|
+ abk.forEach(function(item){
|
|
|
+ if(typeof $("#FormPattern2_Form_" + item).val() !== 'undefined' && typeof $("#FormPattern2_Form_" + item).val() !== 'undefined' && $("#FormPattern2_Form_" + item).val() !== ''){
|
|
|
+ if(pattern[item]){
|
|
|
+ pattern[item] = $("#FormPattern2_Form_" + item).find(":selected").text();
|
|
|
+ }
|
|
|
+ //console.log($("#Form_" + item).val())
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+ return rects;
|
|
|
+}
|
|
|
+
|
|
|
+function submitSlices(){
|
|
|
+ //createJsonCutting();
|
|
|
+
|
|
|
+ console.log(JSON.stringify(createJsonCutting()));
|
|
|
+
|
|
|
+ request = $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: "https://centurio.work/customers/evva/was/ui/images/imageSlicer.php",
|
|
|
+ data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
|
|
|
+ success: function(data){
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ error: function(xhr, status, error){
|
|
|
+ console.error(xhr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /*
|
|
|
+
|
|
|
+ imageurl,
|
|
|
+ savelocation,
|
|
|
+ code,
|
|
|
+ rectangles,
|
|
|
+
|
|
|
+
|
|
|
+ */
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function showJson(){
|
|
|
+
|
|
|
+ copy2Clipboard(JSON.stringify(createJson()))
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function copy2Clipboard(datalink) {
|
|
|
+ const el = document.createElement('textarea');
|
|
|
+ el.value = datalink;
|
|
|
+ document.body.appendChild(el);
|
|
|
+ el.select();
|
|
|
+ document.execCommand('copy');
|
|
|
+ document.body.removeChild(el);
|
|
|
+}
|
|
|
+
|
|
|
+$(document).ready(function() {
|
|
|
+ createPatternForm();
|
|
|
+ loadStationsForm();
|
|
|
+
|
|
|
+ $(document).on('submit', '#sliceform', function() { //prevent page reload on form submit
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ $("#showJson").click(function() {
|
|
|
+ showJson();
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#pattern2').text("");
|
|
|
+ var clone = document.importNode(document.querySelector('#patternClone').content,true);
|
|
|
+ $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
|
|
|
+ $("#pattern2").append(clone);
|
|
|
+
|
|
|
+
|
|
|
+});
|
