Merge pull request #301 from eReuse/feature/2972-add-logo-to-label

Feature/2972 add logo to label
This commit is contained in:
cayop 2022-06-09 17:14:13 +02:00 committed by GitHub
commit f86df91862
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 142 additions and 40 deletions

View File

@ -5,6 +5,9 @@ $(document).ready(function() {
change_size(); change_size();
load_settings(); load_settings();
change_check(); change_check();
$("#imgInp").change(function(){
readURL(this);
});
}) })
function qr_draw(url, id) { function qr_draw(url, id) {
@ -18,11 +21,36 @@ function qr_draw(url, id) {
}); });
} }
function previewLogo(logo) {
const img = "<img style='max-width: 150px' src='"+logo+"' />";
$("#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() { function save_settings() {
var logo = $('#logo-preview img').attr('src');
var height = $("#height-tag").val(); var height = $("#height-tag").val();
var width = $("#width-tag").val(); var width = $("#width-tag").val();
var sizePreset = $("#printerType").val(); var sizePreset = $("#printerType").val();
var data = {"height": height, "width": width, "sizePreset": sizePreset}; 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['dhid'] = $("#dhidCheck").prop('checked');
data['sid'] = $("#sidCheck").prop('checked'); data['sid'] = $("#sidCheck").prop('checked');
data['qr'] = $("#qrCheck").prop('checked'); data['qr'] = $("#qrCheck").prop('checked');
@ -44,6 +72,14 @@ function load_settings() {
$("#serialNumberCheck").prop('checked', data.serial_number); $("#serialNumberCheck").prop('checked', data.serial_number);
$("#manufacturerCheck").prop('checked', data.manufacturer); $("#manufacturerCheck").prop('checked', data.manufacturer);
$("#modelCheck").prop('checked', data.model); $("#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');
}
}; };
} }
@ -54,8 +90,10 @@ function reset_settings() {
$("#dhidCheck").prop('checked', true); $("#dhidCheck").prop('checked', true);
$("#sidCheck").prop('checked', true); $("#sidCheck").prop('checked', true);
$("#serialNumberCheck").prop('checked', false); $("#serialNumberCheck").prop('checked', false);
$("#logoCheck").prop('checked', false);
$("#manufacturerCheck").prop('checked', false); $("#manufacturerCheck").prop('checked', false);
$("#modelCheck").prop('checked', false); $("#modelCheck").prop('checked', false);
$('#logo-preview').html('');
change_size(); change_size();
change_check(); change_check();
} }
@ -72,36 +110,54 @@ function change_size() {
} }
function change_check() { 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')) { if ($("#dhidCheck").prop('checked')) {
$(".dhid").show(); $(".dhid").show();
} else { } else {
$(".dhid").hide(); $(".dhid").hide();
} };
if ($("#sidCheck").prop('checked')) { if ($("#sidCheck").prop('checked')) {
$(".sid").show(); $(".sid").show();
} else { } else {
$(".sid").hide(); $(".sid").hide();
} };
if ($("#serialNumberCheck").prop('checked')) { if ($("#serialNumberCheck").prop('checked')) {
$(".serial_number").show(); $(".serial_number").show();
} else { } else {
$(".serial_number").hide(); $(".serial_number").hide();
} };
if ($("#manufacturerCheck").prop('checked')) { if ($("#manufacturerCheck").prop('checked')) {
$(".manufacturer").show(); $(".manufacturer").show();
} else { } else {
$(".manufacturer").hide(); $(".manufacturer").hide();
} };
if ($("#modelCheck").prop('checked')) { if ($("#modelCheck").prop('checked')) {
$(".model").show(); $(".model").show();
} else { } else {
$(".model").hide(); $(".model").hide();
} };
if ($("#qrCheck").prop('checked')) { if ($("#qrCheck").prop('checked')) {
$(".qr").show(); $(".qr").show();
} else { } else {
$(".qr").hide(); $(".qr").hide();
} };
} }
function printpdf() { function printpdf() {
@ -109,76 +165,106 @@ function printpdf() {
var line = 5; var line = 5;
var height = parseInt($("#height-tag").val()); var height = parseInt($("#height-tag").val());
var width = parseInt($("#width-tag").val()); var width = parseInt($("#width-tag").val());
var img_side = Math.min(height, width) - 2*border; var logo = '';
max_tag_side = (Math.max(height, width)/2) + border; var _rel = 1;
if (max_tag_side < img_side) { if ($('#logoCheck').prop('checked')) {
max_tag_side = img_side + 2*border; logo = $("#logo-preview img").attr("src");
}; if (logo) {
min_tag_side = (Math.min(height, width)/2) + border; 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 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')) { if ($("#sidCheck").prop('checked')) {
height += line; height_need += line;
}; };
if ($("#serialNumberCheck").prop('checked')) { if ($("#serialNumberCheck").prop('checked')) {
height += line; height_need += line;
}; };
if ($("#manufacturerCheck").prop('checked')) { if ($("#manufacturerCheck").prop('checked')) {
height += line; height_need += line;
}; };
if ($("#modelCheck").prop('checked')) { if ($("#modelCheck").prop('checked')) {
height += line; 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 pdf = new jsPDF('l', 'mm', [width, height]); var hlogo = 0;
$(".tag").map(function(x, y) { $(".tag").map(function(x, y) {
if (x != 0){ if (x != 0){
pdf.addPage(); pdf.addPage();
}; };
var space = line + border; var hspace = border;
if ($("#qrCheck").prop('checked')) {
space += img_side;
}
var tag = $(y).text(); var tag = $(y).text();
last_tag_code = tag; 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')) { if ($("#qrCheck").prop('checked')) {
var imgData = $('#'+tag+' img').attr("src"); var imgData = $('#'+tag+' img').attr("src");
pdf.addImage(imgData, 'PNG', border, border, img_side, img_side); pdf.addImage(imgData, 'PNG', border, hspace, img_side, img_side);
hspace += img_side;
} else {
hspace += line;
}; };
if ($("#dhidCheck").prop('checked')) { if ($("#dhidCheck").prop('checked')) {
pdf.setFontSize(15);
if ($("#qrCheck").prop('checked')) { if ($("#qrCheck").prop('checked')) {
pdf.setFontSize(15); var h = hspace + border - img_side/2;
pdf.text(tag, max_tag_side, min_tag_side); var w = border*2 + img_side;
pdf.text(tag, w, h);
} else { } else {
pdf.setFontSize(15); pdf.text(tag, border, hspace);
pdf.text(tag, border, space);
space += line;
} }
hspace += line;
}; };
if ($("#sidCheck").prop('checked')) { if ($("#sidCheck").prop('checked')) {
var sn = $(y).data('sid'); var sn = $(y).data('sid');
pdf.setFontSize(15); pdf.setFontSize(12);
pdf.text(sn, border, space); if (sn) {
space += line; pdf.text(sn, border, hspace);
hspace += line;
}
}; };
if ($("#serialNumberCheck").prop('checked')) { if ($("#serialNumberCheck").prop('checked')) {
var sn = $(y).data('serial-number'); var sn = $(y).data('serial-number');
pdf.setFontSize(12); pdf.setFontSize(12);
pdf.text(sn, border, space); pdf.text(sn, border, hspace);
space += line; hspace += line;
}; };
if ($("#manufacturerCheck").prop('checked')) { if ($("#manufacturerCheck").prop('checked')) {
var sn = $(y).data('manufacturer'); var sn = $(y).data('manufacturer');
pdf.setFontSize(12); pdf.setFontSize(12);
pdf.text(sn, border, space); pdf.text(sn, border, hspace);
space += line; hspace += line;
}; };
if ($("#modelCheck").prop('checked')) { if ($("#modelCheck").prop('checked')) {
var sn = $(y).data('model'); var sn = $(y).data('model');
pdf.setFontSize(8); pdf.setFontSize(8);
pdf.text(sn, border, space); pdf.text(sn, border, hspace);
space += line; hspace += line;
}; };
}); });

View File

@ -27,6 +27,9 @@
{% for dev in devices %} {% for dev in devices %}
<div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;"> <div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;">
<div> <div>
<div class="row label-logo" style="display: none">
<div class="col label-logo-dev"></div>
</div>
<div class="row"> <div class="row">
<div class="col qr"> <div class="col qr">
<div id="{{ dev.devicehub_id }}"></div> <div id="{{ dev.devicehub_id }}"></div>
@ -73,6 +76,15 @@
<div class="col-1"> <div class="col-1">
</div> </div>
<div class="col label"> <div class="col label">
<label class="col-form-label col-sm-2">Logo</label>
<div class="col-sm-10">
<div class="input-group mb-3" id="logo-preview">
</div>
<div class="input-group mb-3">
<input class="form-control" type='file' id="imgInp" />
</div>
</div>
<label class="col-form-label col-sm-2">Size</label> <label class="col-form-label col-sm-2">Size</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="input-group mb-3"> <div class="input-group mb-3">
@ -101,6 +113,10 @@
</div> </div>
</div> </div>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-switch">
<input class="form-check-input" name="logoCheck" type="checkbox" id="logoCheck">
<label class="form-check-label" for="logoCheck">Logo</label>
</div>
<div class="form-switch"> <div class="form-switch">
<input class="form-check-input" name="qr" type="checkbox" id="qrCheck" checked=""> <input class="form-check-input" name="qr" type="checkbox" id="qrCheck" checked="">
<label class="form-check-label" for="qrCheck">QR</label> <label class="form-check-label" for="qrCheck">QR</label>