$(document).ready(function() { STORAGE_KEY = 'tag-spec-key'; $("#printerType").on("change", change_size); $(".form-check-input").on("change", change_check); change_size(); load_settings(); change_check(); $("#imgInp").change(function(){ readURL(this); }); }) function qr_draw(url, id) { var qrcode = new QRCode($(id)[0], { text: url, width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.Q }); } function previewLogo(logo) { const img = ""; $("#logo-preview").html(img); $(".label-logo-dev").html(img); } function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { previewLogo(e.target.result); $("#logoCheck").prop('disabled', ''); } reader.readAsDataURL(input.files[0]); } } function save_settings() { var logo = $('#logo-preview img').attr('src'); var height = $("#height-tag").val(); var width = $("#width-tag").val(); var sizePreset = $("#printerType").val(); var data = {"height": height, "width": width, "sizePreset": sizePreset, 'logoImg': ''}; if (logo) { data['logoImg'] = logo; }; data['logo'] = $("#logoCheck").prop('checked'); data['dhid'] = $("#dhidCheck").prop('checked'); data['sid'] = $("#sidCheck").prop('checked'); data['phid'] = $("#phidCheck").prop('checked'); data['tags'] = $("#tagsCheck").prop('checked'); data['qr'] = $("#qrCheck").prop('checked'); data['serial_number'] = $("#serialNumberCheck").prop('checked'); data['manufacturer'] = $("#manufacturerCheck").prop('checked'); data['model'] = $("#modelCheck").prop('checked'); localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } function load_settings() { var data = JSON.parse(localStorage.getItem(STORAGE_KEY)); if (data){ $("#height-tag").val(data.height); $("#width-tag").val(data.width); $("#printerType").val(data.sizePreset); $("#qrCheck").prop('checked', data.qr); $("#dhidCheck").prop('checked', data.dhid); $("#sidCheck").prop('checked', data.sid); $("#phidCheck").prop('checked', data.phid); $("#tagsCheck").prop('checked', data.tags); $("#serialNumberCheck").prop('checked', data.serial_number); $("#manufacturerCheck").prop('checked', data.manufacturer); $("#modelCheck").prop('checked', data.model); if (data.logo) { // $("#logoCheck").prop('checked', data.sid); previewLogo(data.logoImg); $("#logoCheck").prop('checked', data.logo); } else { $("#logoCheck").prop('checked', false); $("#logoCheck").prop('disabled', 'disabled'); } }; } function reset_settings() { localStorage.removeItem(STORAGE_KEY); $("#printerType").val('brotherSmall'); $("#qrCheck").prop('checked', true); $("#dhidCheck").prop('checked', true); $("#sidCheck").prop('checked', true); $("#phidCheck").prop('checked', true); $("#tagsCheck").prop('checked', false); $("#serialNumberCheck").prop('checked', false); $("#logoCheck").prop('checked', false); $("#manufacturerCheck").prop('checked', false); $("#modelCheck").prop('checked', false); $('#logo-preview').html(''); change_size(); change_check(); } function change_size() { var sizePreset = $("#printerType").val(); if (sizePreset == 'brotherSmall') { $("#height-tag").val(29); $("#width-tag").val(62); } else if (sizePreset == 'smallTagPrinter') { $("#height-tag").val(59); $("#width-tag").val(97); } } function change_check() { if ($('#logo-preview img').attr('src')) { $("#logoCheck").prop('disabled', ''); } else { $("#logoCheck").prop('checked', false); $("#logoCheck").prop('disabled', 'disabled'); }; if ($("#logoCheck").prop('checked') && $('#logo-preview img').attr('src')) { $(".label-logo").show(); } else { $(".label-logo").hide(); }; if ($("#dhidCheck").prop('checked')) { $(".dhid").show(); } else { $(".dhid").hide(); }; if ($("#sidCheck").prop('checked')) { $(".sid").show(); } else { $(".sid").hide(); }; if ($("#phidCheck").prop('checked')) { $(".phid").show(); } else { $(".phid").hide(); }; if ($("#tagsCheck").prop('checked')) { $(".tags").show(); } else { $(".tags").hide(); }; if ($("#serialNumberCheck").prop('checked')) { $(".serial_number").show(); } else { $(".serial_number").hide(); }; if ($("#manufacturerCheck").prop('checked')) { $(".manufacturer").show(); } else { $(".manufacturer").hide(); }; if ($("#modelCheck").prop('checked')) { $(".model").show(); } else { $(".model").hide(); }; if ($("#qrCheck").prop('checked')) { $(".qr").show(); } else { $(".qr").hide(); }; } function printpdf() { var border = 2; var line = 5; var height = parseInt($("#height-tag").val()); var width = parseInt($("#width-tag").val()); var logo = ''; var _rel = 1; if ($('#logoCheck').prop('checked')) { logo = $("#logo-preview img").attr("src"); if (logo) { var _img = new Image(); _img.src = logo; _rel = parseInt(_img.height)/parseInt(_img.width); } } var img_side = (width/2) - 2*border; var last_tag_code = ''; var height_need = border*2; if (logo) { height_need += width*_rel + border; }; if ($("#qrCheck").prop('checked')) { height_need += img_side; } else if ($("#dhidCheck").prop('checked')) { height_need += line; }; if ($("#sidCheck").prop('checked')) { height_need += line; }; if ($("#phidCheck").prop('checked')) { height_need += line; }; if ($("#tagsCheck").prop('checked')) { height_need += line; }; if ($("#serialNumberCheck").prop('checked')) { height_need += line; }; if ($("#manufacturerCheck").prop('checked')) { height_need += line; }; if ($("#modelCheck").prop('checked')) { height_need += line; }; height = Math.max(height, height_need); if (width > height) { var pdf = new jsPDF('l', 'mm', [width, height]); } else { var pdf = new jsPDF('p', 'mm', [height, width]); }; var hlogo = 0; $(".tag").map(function(x, y) { if (x != 0){ pdf.addPage(); }; var hspace = border; var tag = $(y).text(); last_tag_code = tag; if (logo) { var wlogo = (width - border*2); hlogo = wlogo*_rel; pdf.addImage(logo, 'PNG', border, hspace, wlogo, hlogo); hspace += hlogo + border; }; if ($("#qrCheck").prop('checked')) { var imgData = $('#'+tag+' img').attr("src"); pdf.addImage(imgData, 'PNG', border, hspace, img_side, img_side); hspace += img_side; } else { hspace += line; }; if ($("#dhidCheck").prop('checked')) { pdf.setFontSize(15); if ($("#qrCheck").prop('checked')) { var h = hspace + border - img_side/2; var w = border*2 + img_side; pdf.text(tag, w, h); } else { pdf.text(tag, border, hspace); } hspace += line; }; if ($("#sidCheck").prop('checked')) { var sn = $(y).data('sid'); pdf.setFontSize(12); if (sn) { pdf.text(String(sn), border, hspace); hspace += line; } }; if ($("#phidCheck").prop('checked')) { var sn = $(y).data('phid'); pdf.setFontSize(12); if (sn) { pdf.text(String(sn), border, hspace); hspace += line; } }; if ($("#tagsCheck").prop('checked')) { var sn = $(y).data('tags'); pdf.setFontSize(12); if (sn) { pdf.text(String(sn), border, hspace); hspace += line; } }; if ($("#serialNumberCheck").prop('checked')) { var sn = $(y).data('serial-number'); pdf.setFontSize(12); pdf.text(String(sn), border, hspace); hspace += line; }; if ($("#manufacturerCheck").prop('checked')) { var sn = $(y).data('manufacturer'); pdf.setFontSize(12); pdf.text(String(sn), border, hspace); hspace += line; }; if ($("#modelCheck").prop('checked')) { var sn = $(y).data('model'); pdf.setFontSize(8); pdf.text(String(sn), border, hspace); hspace += line; }; }); pdf.save('Tag_'+last_tag_code+'.pdf'); }