{% extends "layout.html" %} {% from 'pallist.html' import pallist %} {% from 'modalaceedit.html' import modal_ace_edit_head %} {% from 'modalaceedit.html' import modal_ace_edit_body %} {% from 'modalaceedit.html' import modal_ace_edit_button %} {% from 'modalaceedit.html' import modal_ace_edit_jsfooter %} {% set yamleditors={ "options":{ "textidstring":"yamloptions", "varstring":"optionsstring", "modalidstring":"modaloptionsid", "title":"Set Conversion Options", "editorvar":"editoroptions", "buttontext":"Open options", "buttonidstring":"yamloptionsbuttonid", "contentid":"optionstext" } } %} {% block title %}Palette converter{% endblock %} {% block head %} {{ modal_ace_edit_head(yamleditors) }} {% endblock %} {% block content %} {% for acekey in yamleditors %} {{ modal_ace_edit_body(yamleditors[acekey]) }} {% endfor %}
Drop files here or Click to upload multiple images
{{ modal_ace_edit_button(yamleditors["options"]) }}

TEMPLATE
Set name: .png
no result image yet click show - convert - convert
no result image yet click show - convert - convert
{% endblock %} {% block jsfooter %} {{ modal_ace_edit_jsfooter(yamleditors) }} $('.sp-showimages').click(function(e) { if ($(".sp-showimages span").first().hasClass("glyphicon-eye-open")){ $(".sp-showimages span").removeClass("glyphicon-eye-open" ).addClass("glyphicon-eye-close" ) $(".sp-showimages span").text(" Hide images") $(".sp-images").addClass("in") }else{ $(".sp-showimages span").removeClass("glyphicon-eye-close" ).addClass("glyphicon-eye-open" ) $(".sp-showimages span").text(" Show images") $(".sp-images").removeClass("in") } }); var imgy=0; var imgx=0; var newtrans={}; var oldblocksize=16; var funcselect2_ary; var funclist=[]; var tdoc; function formatsel2(state) { return '    ' + state.text; } paldata={ width: "140px", placeholder: "test", data: [ {% for pal in pallist %} {text: '{{pal}}',id:'{{pal}}'}, {% endfor %} ], formatResult: formatsel2, formatSelection: formatsel2, escapeMarkup: function(m) { return m; } } $("#basepal").select2(paldata); $("#basepal").on("change",function(){ $("#basepalimg").css({"background-image": "url(static/img/pal/"+$("#basepal").val()+".act.p.png)" }) $("#transpalimg").css({"background-image": "url(static/img/pal/"+$("#basepal ").val()+".act.p.png)" }) // $("#transpalimgblock").css({"background-image": "url(static/img/pal/"+$("#basepal").val()+".act.p.png)" }) // $(".sptransformborder").css({"background-image": "url(static/img/pal/"+$("#basepal").val()+".act.p.png)" }) }) $("#targetpal").select2(paldata); $("#targetpal").on("change",function(){ $("#targetpalimg").css({"background-image": "url(static/img/pal/"+$("#targetpal ").val()+".act.p.png)" }) // $("#transpalimg").css({"background-image": "url(static/img/pal/"+$("#targetpal ").val()+".act.p.png)" }) $("#transpalimgblock").css({"background-image": "url(static/img/pal/"+$("#targetpal").val()+".act.p.png)" }) $(".sptransformborder").css({"background-image": "url(static/img/pal/"+$("#targetpal").val()+".act.p.png)" }) }) function resetpaldivs(){ bsize=parseInt($("#transpalblock").val()) thtml="" bhtml="" if (oldblocksize>bsize){ ntrans={} for (x in newtrans){ // console.log(x,newtrans[x],-1*newtrans[x]/2) for(ni=0;ni"; bhtml+="
"; for (g=0;g<(16/bsize);g++) { addposstring="background-position:1001px 1001px;" if (newtrans.hasOwnProperty(g*bsize+i*16)){ //console.log(99,g,i,newtrans[g*bsize+i*16],-8*bsize*g,i*16+g*bsize*-1,16*Math.floor(newtrans[g*bsize+i*16][0]/16)/-2 ) addposstring="border-style:none;background-position: "+-8*bsize*g+"px "+16*Math.floor(newtrans[g*bsize+i*16][0]/16)/-2+"px;" } thtml+="
"; bhtml+="
"; } thtml+="
"; bhtml+=""; } $("#transpaldivs").html(thtml) $("#targetpaldivs").html(bhtml) $("#basepaldivs").html(bhtml) //$("#transpaldivs div[reset=1]").css("opacity","0.99") //$("#transpalimgblock").css({"width":bsize*8+"px","background-position":"1000px 1000px"}) $("#transpalimgblock").css({"width":bsize*8+"px"}) oldblocksize=bsize; } resetpaldivs(); $("#transpalblock").on("change",resetpaldivs); $(document).on("click",'.spimgdivborder',function(e) { $("div.spimgdivborder[valxy="+imgx+"-"+imgy+"]").css("opacity","0") $("div.sptransformborder[valxy="+imgx+"-"+imgy+"]").css("border-color","black") bsize=parseInt($("#transpalblock").val()); imgx=$(e.target).attr("valx") imgy=$(e.target).attr("valy") //console.log($(".spimgdivborder [valxy="+imgx+"-"+imgy+"]")) $("div.spimgdivborder[valxy="+imgx+"-"+imgy+"]").css("opacity","1") $("div.sptransformborder[valxy="+imgx+"-"+imgy+"]").css("border-color","red") $("#transpalimgblock").css({"background-position": -1*imgx*bsize*8+"px "+-1*imgy*8+"px" }) //"background-position": 0+"px "+0+"px" //var posX = $(this).offset().left, posY = $(this).offset().top; //console.log( Math.floor((e.pageY - posY)/8)*16+ Math.floor((e.pageX - posX)/(8*bsize))*bsize, (e.pageX - posX) , (e.pageY - posY),e.pageX , posX , e.pageY , posY); }); $(document).on("click",'.sptransformborder',function(e) { bsize=parseInt($("#transpalblock").val()); timgx=$(e.target).attr("valx") timgy=$(e.target).attr("valy") $(e.target).css("border-style","none") $(e.target).css("background-position",$("#transpalimgblock").css("background-position")) //console.log(timgx*bsize+timgy*16,imgx*bsize+imgy*16,bsize,$("#transpalimgblock").css("background-position")) newtrans[timgx*bsize+timgy*16]=[imgx*bsize+imgy*16,bsize]; }); $(document).on("click",'#sp-transformsave',function(e) { tname=$("#sp-transformsavename").val()+"("+$("#targetpal").val()+")" tfuncpos=testtransname() addttxt="\r\n"; addttxt+="- name: "+tname+"\r\n" addttxt+=" op: transform\r\n" addttxt+=" pal: "+$("#targetpal").val()+"\r\n" addttxt+=" maketrans: false\r\n" addttxt+=" cols:\r\n" for (k in newtrans){ addttxt+=" "+k+": ["+newtrans[k][0]+", "+newtrans[k][1]+"]\r\n" } if (tfuncpos[0]>=0 && $("#sp-transformsaveoverwrite").prop('checked')){ $("#sp-transformsaveoverwrite").prop('checked',false) tnamelines = optionsstring.split('\n'); newostr="" for (linenr=0; linenr(tfuncpos[0]+tfuncpos[1])) { newostr+=tnamelines[linenr]+"\n" } } optionsstring=newostr editoroptions.setValue(optionsstring,1) tfuncpos=[-1,0] } if ( tfuncpos[0]<0){ optionsstring+=addttxt editoroptions.setValue(optionsstring); resetfuncarr(); resetfuncoptions(); testtransname(); $('#sptransformer').modal('hide'); } }); function testtransname(){ tname=$("#sp-transformsavename").val()+"("+$("#targetpal").val()+")" $("#sp-transformsavename").css("border-color","black") $("#sp-transformsaveoverwritespan").css({"display":"none"}) tnamelines = optionsstring.split('\n'); tnamefound=-1 tnamefoundlines=0 for (linenr=0; linenr0){ if (tnamelines[linenr][0]=="-") { break; }else{ tnamefoundlines++; } } } } if ( funclist.indexOf(tname)>=0){ $("#sp-transformsavename").css({"border-color":"red"}) $("#sp-transformsaveoverwritespan").css({"display":"inline"}) } return [tnamefound,tnamefoundlines]; } $("#sp-transformsavename").on("keyup",testtransname) $("#sp-transformsaveoverwritebutton").on("click",function(){ $("#sp-transformsaveoverwrite").prop('checked',! $("#sp-transformsaveoverwrite").prop('checked')); }) $("#sp-transformsaveoverwrite").prop('checked',false) //.push() function resetfuncoptions() { resetfuncarr(); $("input.sp-func").each(function(index){ resetselect($($(this).parent())); }); } $("body").on("ace-yamloptions-post-save", resetfuncoptions); function resetfuncarr(){ funcselect2_ary=[]; funclist=[]; {% for pal in pallist %} funcselect2_ary.push({text: '{{pal}}',children: []}); {% endfor %} tdoc = jsyaml.load(optionsstring); for (i=0; i < tdoc.length;i++){ for (g=0; g < funcselect2_ary.length;g++){ if (funcselect2_ary[g].text==tdoc[i].pal){ funcselect2_ary[g].children.push({"id":tdoc[i].name, "text":tdoc[i].name}); funclist.push(tdoc[i].name); } } } } resetfuncarr(); function formatsel(state) { if (state.id) return state.text; return '     ' + state.text; } function resetselect(hobj){ //tdoc = jsyaml.load(optionsstring); hobj.find('input.sp-func').each(function(index){ idstring=hobj.closest( "div.sp-row" ).attr("id") if (idstring!="spcomptemplate"){ //$(this).select2("destroy"); $(this).select2({ //dropdownAutoWidth: 'true', width: "220px", placeholder: "test", data: funcselect2_ary, formatResult: formatsel, formatSelection: formatsel, escapeMarkup: function(m) { return m; } }); } }); } //resetselect(); //{dropdownAutoWidth: 'true',minimumResultsForSearch: -1} $('.sp-row ul.dropdown-menu a').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") $('#'+idstring+' div.sp-show').removeClass("in"); showdiv=$(e.target).attr("sp-show"); $('#'+idstring+' div.sp-'+showdiv).addClass("in"); //e.preventDefault();// prevent the default anchor functionality }); $('.sp-row button.sp-delete').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") delete files[idstring.substr(5)]; $("#"+idstring).remove(); }); $('.sp-row button.sp-download').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") blob = dataURItoBlob($("#"+idstring).find(".sp-resultimg").first().attr("src"),"image/png;"); saveAs(blob, $("#"+idstring).find(".sp-rename").first().val()+".png"); }); function dataURItoBlob(dataURI, dataTYPE) { var binary = atob(dataURI.split(',')[1]), array = []; for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i)); return new Blob([new Uint8Array(array)], {type: dataTYPE}); } $('.sp-row button.sp-convert').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") $("#"+idstring+" button.sp-download").prop('disabled', true); $("#"+idstring+" button.sp-convert").addClass("btn-info").prop('disabled', true); $("#"+idstring+" button.sp-convert span").addClass("glyphicon-cog").removeClass("glyphicon-play"); getfunc=$("#"+idstring+" input.sp-func" ).first().val() func={} for (i=0; i") $("#"+data["idstring"]+" button.sp-download").prop('disabled', false); $("#"+data["idstring"]+" button.sp-convert").removeClass("btn-info").prop('disabled', false);; $("#"+data["idstring"]+" button.sp-convert span").removeClass("btn-info").removeClass("glyphicon-cog").addClass("glyphicon-play"); }).fail(new function(spid){ return function(data) { $("#"+spid+" span.sp-outputimg").html("") $("#"+spid+" button.sp-convert").removeClass("btn-info").addClass("btn-danger") $("#"+spid+" button.sp-convert span").removeClass("btn-info").removeClass("glyphicon-cog").addClass("glyphicon-fire").text(" Error"); } }(idstring)); }); function copysprow(idstring){ t=$("#spcomptemplate").clone( withDataAndEvents=true, deepWithDataAndEvents =true ); t.removeClass("collapse"); t.find(".sp-idval").text(n) t.find(".sp-rename").val(n.replace(/....$/,"")) t.prop("id",idstring); resetselect(t); $("#sp-rows").append(t); } var myDropzone = new Dropzone("#dropzone", { url: "/file/post",previewsContainer:document.getElementById("imgout"), createImageThumbnails:false, thumbnailWidth:32, thumbnailHeight:40, fallback: function(){ messageElement = Dropzone.createElement("
Your browser does not support drag'n'drop file uploads. There is no fallback :( use a more recent browser.
"); return this.element.appendChild(messageElement); } }); myDropzone.options.autoProcessQueue=false; //myDropzone.options.previewTemplate='
'; myDropzone.on("addedfile", function(file) { console.log(file.type) if ((file.type=="image/gif" || file.type=="image/png" || file.type=="image/bmp") && file.size<400000 ){ n=file.name.replace(/[^A-Za-z0-9-_]/g, "_"); if(! files.hasOwnProperty(n)){ files[n]={fnlist:[],fobj:[],recreatethumb:true}; copysprow("spid-"+n); files[n]["fnlist"].push(file.name); //files[n]["fobj"].push(file); $("#spid-"+n+" span.badge").text(files[n]["fobj"].length+"/"+files[n]["fnlist"].length).removeClass("badge-success").addClass("alert-warning"); $("#spid-"+n+" button.sp-convert").prop('disabled', true); //$("#spid-"+n+" div.sp-filenames").append("
"+file.name+"
"); readers[file.name]=new FileReader(); readers[file.name].onload=function(spid,fname){ return function(event) { dataURL = readers[fname].result; $("#spid-"+spid+" span.sp-inputimg").append(""+fname+"") files[spid]["fobj"].push({"fn":fname,"cont":dataURL}) if (files[spid]["fobj"].length==files[spid]["fnlist"].length){ $("#spid-"+spid+" span.badge").text(files[spid]["fnlist"].length).addClass("badge-success").removeClass("alert-warning"); $("#spid-"+spid+" button.sp-convert").prop('disabled', false); }else{ $("#spid-"+spid+" span.badge").text(files[spid]["fobj"].length+"/"+files[spid]["fnlist"].length).removeClass("badge-success").addClass("alert-warning"); } //console.log(spid,event,files); } }(n,file.name); readers[file.name].readAsDataURL(file); } } }); {% endblock %} {% block help %} you can drop files here... {% endblock %}