// ============================================================================ // SUNMI LABEL PRINTER UTILITIES - Chrome 56 Compatible (ES5 JavaScript Only) // ============================================================================ /** * Renders label to canvas with 1-bit threshold conversion for thermal printing * @param {object} labelData - Label data to render * @param {function} callback - Callback function with result * @param {boolean} showDateFooter - Whether to show date/WETAG.PT footer (default: true for preview, false for print) */ function renderLabelToCanvas(labelData, callback, showDateFooter) { // Default to true if not specified (for backwards compatibility with preview) if (showDateFooter === undefined) { showDateFooter = true; } // STAGE 1: Render to temporary canvas (may have antialiasing) var tempCanvas = document.createElement('canvas'); tempCanvas.width = 384; // 384px (58mm standard width) tempCanvas.height = 400; //436; // byte-aligned height to avoid driver padding var tempCtx = tempCanvas.getContext('2d'); var CANVAS_WIDTH = tempCanvas.width; var CANVAS_HEIGHT = tempCanvas.height; // CRITICAL: Clear any existing canvas data to prevent caching issues // This prevents Chrome 56 WebView from reusing cached canvas state tempCtx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Disable image smoothing tempCtx.imageSmoothingEnabled = false; // Add letter spacing tempCtx.letterSpacing = '2px'; // White background (fresh fill after clear) tempCtx.fillStyle = '#FFFFFF'; tempCtx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); tempCtx.fillStyle = '#000000'; tempCtx.textBaseline = 'top'; var WIDTH = CANVAS_WIDTH; var HEIGHT = CANVAS_HEIGHT; var margin = 6; var valueColumnX = margin + 112; var rightColumnX = WIDTH - margin; function toUpperSafe(value) { if (!value) return ''; return String(value).toUpperCase(); } function ensureValue(value, fallback) { if (value && value.trim && value.trim().length) { return value; } return fallback || ''; } var storageLabels = { REFRIGERADO: 'REFRIGERADO', CONGELADO: 'CONGELADO', AMBIENTE: 'AMBIENTE', ABERTURA: 'ABERTURA', QUENTE: 'QUENTE' }; var showExpiry = labelData.showExpiryDate === undefined ? true : labelData.showExpiryDate; var expiryText = labelData.expiryDate || 'DD/MM/AAAA'; var validityText = showExpiry ? 'VALIDADE ' + expiryText : 'SEM DATA DE VALIDADE'; var showOriginal = labelData.originalExpiryDate ? (labelData.showOriginalExpiryDate !== false) : false; var originalText = showOriginal ? labelData.originalExpiryDate : ''; var quantityText = ensureValue(labelData.quantity, '1 UNID'); var manipText = labelData.showManipulationDate ? ensureValue(labelData.manipulationDate || '', '--') : '--'; var useFabricacaoLabel = !!labelData.useFabricacaoLabel; var manipLabel = useFabricacaoLabel ? 'FABRIC.' : 'MANIP.'; var storageKey = toUpperSafe(labelData.storageType || ''); var storageDisplay = storageLabels[storageKey] || storageKey || 'ARMAZENAR'; var categoryDisplay = toUpperSafe(labelData.categoryName || ''); var storageLine = categoryDisplay ? storageDisplay + ' / ' + categoryDisplay : storageDisplay; var brandDisplayRaw = toUpperSafe(labelData.supplierBrand); var skuDisplay = toUpperSafe(labelData.productSku || ''); var batchDisplayRaw = toUpperSafe(labelData.batchNumber || ''); var operatorDisplay = ensureValue(toUpperSafe(labelData.operatorName || 'RESPONSAVEL'), 'RESPONSAVEL'); var companyDisplay = ensureValue(toUpperSafe(labelData.companyName || ''), 'EMPRESA'); var nifDisplay = labelData.companyNif ? ('NIF ' + labelData.companyNif).toUpperCase() : ''; var labelCodeRaw = toUpperSafe(labelData.labelId || '00000'); var labelCode = (labelData.hasExtendedValidade && labelCodeRaw !== '00000') ? ('*' + labelCodeRaw) : labelCodeRaw; var sequenceText = (labelData.sequenceNumber && labelData.totalInGroup) ? (labelData.sequenceNumber + ' DE ' + labelData.totalInGroup) : ''; var y = margin; function fitValueFont(text, baseSize, minSize, maxWidth) { for (var size = baseSize; size >= minSize; size -= 2) { tempCtx.font = 'normal ' + size + 'px Tahoma, Arial'; if (tempCtx.measureText(text).width <= maxWidth) { return 'normal ' + size + 'px Tahoma, Arial'; } } return 'normal ' + minSize + 'px Tahoma, Arial'; } function renderInfoRow(label, value, options) { // Only show the left label when there is actual content on the row var rawValue = (value || '').toString().trim(); var rawRight = (options && options.rightValue ? String(options.rightValue).trim() : ''); var hasAnyValue = rawValue.length > 0 || rawRight.length > 0; var labelText = hasAnyValue ? label.toUpperCase() : ''; var hasRight = options && options.rightValue; var availableWidth = hasRight ? (rightColumnX - valueColumnX) / 2 - 6 : rightColumnX - valueColumnX; if (options && options.inlineValue) { // Inline: print label + value together starting from margin var combinedText = labelText ? labelText + ' ' + ensureValue(value || '') : ensureValue(value || ''); var inlineWidth = hasRight ? rightColumnX - margin - 100 : rightColumnX - margin; var combinedFont = options && options.fitValue ? fitValueFont(combinedText, 22, 16, inlineWidth) : 'normal 22px Tahoma, Arial'; tempCtx.font = combinedFont; tempCtx.textAlign = 'left'; tempCtx.fillText(combinedText, margin, y); } else { // Standard column layout tempCtx.font = 'bold 18px Tahoma, Arial'; tempCtx.textAlign = 'left'; if (labelText) { tempCtx.fillText(labelText, margin, y); } var valueText = hasAnyValue ? ensureValue(value || '') : ''; var valueFont = options && options.fitValue ? fitValueFont(valueText, 22, 16, availableWidth) : 'normal 22px Tahoma, Arial'; tempCtx.font = valueFont; tempCtx.fillText(valueText, valueColumnX, y); } if (hasRight) { var rightText = options.rightValue; var rightFont = options && options.fitRight ? fitValueFont(rightText, 18, 14, availableWidth) : 'normal 22px Tahoma, Arial'; tempCtx.font = rightFont; tempCtx.textAlign = 'right'; tempCtx.fillText(rightText, rightColumnX, y); tempCtx.textAlign = 'left'; } y += (options && options.rowHeight) || 30; } function renderSeparator() { tempCtx.strokeStyle = '#000000'; tempCtx.lineWidth = 1.7; tempCtx.beginPath(); tempCtx.moveTo(margin, y); tempCtx.lineTo(WIDTH - margin, y); tempCtx.stroke(); y += 12; } function fitText(text, fontSizes, maxWidth) { var sizes = fontSizes && fontSizes.length ? fontSizes : [38, 34, 32]; for (var i = 0; i < sizes.length; i++) { var size = sizes[i]; tempCtx.font = 'bold ' + size + 'px Tahoma, Arial'; if (tempCtx.measureText(text).width <= maxWidth) { return { lines: [text], font: 'bold ' + size + 'px Tahoma, Arial' }; } } var mid = Math.floor(text.length / 2); var breakPos = text.lastIndexOf(' ', mid); if (breakPos === -1 || breakPos < 3) { breakPos = text.indexOf(' ', mid); } if (breakPos === -1 || breakPos > text.length - 4) { return { lines: [text], font: 'bold ' + sizes[sizes.length - 1] + 'px Tahoma, Arial' }; } var line1 = text.slice(0, breakPos).trim(); var line2 = text.slice(breakPos + 1).trim(); var baseFont = 'bold ' + sizes[sizes.length - 1] + 'px Tahoma, Arial'; tempCtx.font = baseFont; var fits = tempCtx.measureText(line1).width <= maxWidth && tempCtx.measureText(line2).width <= maxWidth; var finalFont = fits ? baseFont : 'bold ' + Math.max(28, sizes[sizes.length - 1] - 2) + 'px Tahoma, Arial'; return { lines: [line1, line2], font: finalFont }; } // Product name var productFit = fitText((labelData.productName || 'PRODUTO').toUpperCase(), [38, 34, 32, 30], WIDTH - margin * 2); tempCtx.font = productFit.font; tempCtx.textAlign = 'center'; if (productFit.lines.length === 1) { tempCtx.fillText(productFit.lines[0], WIDTH / 2, y); y += 42; } else { tempCtx.fillText(productFit.lines[0], WIDTH / 2, y); y += 30; tempCtx.fillText(productFit.lines[1], WIDTH / 2, y); y += 30; } // Validity bar var barHeight = 52; tempCtx.fillStyle = '#000000'; tempCtx.fillRect(margin, y, WIDTH - margin * 2, barHeight); tempCtx.fillStyle = '#FFFFFF'; tempCtx.font = 'bold 27px Tahoma, Arial'; tempCtx.textBaseline = 'middle'; tempCtx.fillText(validityText, WIDTH / 2, y + barHeight / 2); tempCtx.textBaseline = 'top'; tempCtx.fillStyle = '#000000'; y += barHeight + 14; // Always reserve rows even when optional fields are empty renderInfoRow( labelData.showManipulationDate ? manipLabel : '', labelData.showManipulationDate ? manipText : '', { rightValue: quantityText, fitRight: true } ); // Always reserve space for VAL. ORIG. row to prevent layout shifts renderInfoRow('VAL. ORIG.', (showOriginal && originalText && originalText.trim().length) ? originalText : ''); renderInfoRow('', storageLine, { fitValue: true, inlineValue: true }) renderSeparator(); renderInfoRow('MARCA', ensureValue(brandDisplayRaw, ''), { rightValue: (skuDisplay && skuDisplay.trim().length) ? skuDisplay : '', fitValue: true, fitRight: true }); renderInfoRow('LOTE', ensureValue(batchDisplayRaw, '')); // Footer / QR - Anchored to bottom of canvas (fixed position) var qrSize = 102; var qrX = WIDTH - margin - qrSize; var qrY = HEIGHT - margin - qrSize + 5; // 400 - 6 - 102 + 5 = 297 // Footer text positioned relative to fixed QR position var footerStartY = qrY - 30; tempCtx.font = 'bold 18px Tahoma, Arial'; tempCtx.textAlign = 'left'; var textY = footerStartY + 30; var respText = 'RESP. ' + operatorDisplay; var footerValueWidth = qrX - margin - 4; tempCtx.font = fitValueFont(respText, 20, 14, footerValueWidth); tempCtx.fillText(respText, margin, textY); textY += 24; tempCtx.font = fitValueFont(companyDisplay, 18, 14, footerValueWidth); tempCtx.fillText(companyDisplay, margin, textY); textY += 20; if (nifDisplay) { tempCtx.font = fitValueFont(nifDisplay, 16, 12, footerValueWidth); tempCtx.fillText(nifDisplay, margin, textY); textY += 18; } tempCtx.font = 'normal 19px Tahoma, Arial'; tempCtx.textAlign = 'center'; tempCtx.fillText(labelCode, qrX + (qrSize / 2), qrY - 20); if (sequenceText) { tempCtx.font = 'normal 13px Tahoma, Arial'; tempCtx.textAlign = 'right'; tempCtx.fillText(sequenceText, rightColumnX, qrY - 20); } tempCtx.strokeStyle = '#000000'; tempCtx.lineWidth = 2; tempCtx.strokeRect(qrX, qrY, qrSize, qrSize); // // Bottom row text (date + WETAG.PT) // var bottomY = Math.min(HEIGHT - margin, infoY + 12); // tempCtx.font = 'bold 14px Tahoma, Arial'; // tempCtx.textAlign = 'left'; // if (showDateFooter) { // tempCtx.fillText(labelData.timestamp || 'DD/MM/YYYY', margin, bottomY); // } // tempCtx.textAlign = 'left'; // 5. QR CODE - Load from server-generated QR API var qrUrl = labelData.qrCodeUrl || ''; // CRITICAL: Helper function to convert Base64 data URL to Blob URL // This bypasses Chrome 56 Image object caching that causes stale QR codes function dataURLtoBlob(dataurl) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type: mime}); } // Function to finish rendering with 1-bit threshold conversion function finishRendering() { var imageData = tempCtx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); var pixels = imageData.data; // Threshold: < 200 luminance = black (captures antialiased text) for (var i = 0; i < pixels.length; i += 4) { var gray = pixels[i] * 0.299 + pixels[i+1] * 0.587 + pixels[i+2] * 0.114; var value = gray < 200 ? 0 : 255; pixels[i] = value; pixels[i+1] = value; pixels[i+2] = value; } tempCtx.putImageData(imageData, 0, 0); // CRITICAL: Add small delay before toDataURL to ensure canvas state is flushed // Chrome 56 WebView may cache toDataURL() results aggressively setTimeout(function() { var base64 = tempCanvas.toDataURL('image/png'); callback({ base64: base64, qrUrl: qrUrl }); }, 50); } if (qrUrl) { // Fetch QR code from server API (with cache-busting timestamp) var apiUrl = '/api/qr-generate?data=' + encodeURIComponent(qrUrl) + '&t=' + Date.now(); var xhr = new XMLHttpRequest(); xhr.open('GET', apiUrl, true); xhr.timeout = 5000; // 5 second timeout xhr.ontimeout = function() { console.error('QR API timeout after 5 seconds'); callback({ error: 'QR code generation timeout', base64: null }); }; xhr.onload = function() { if (xhr.status === 200) { try { var response = JSON.parse(xhr.responseText); if (response.success && response.dataUrl) { // CRITICAL FIX: Convert Base64 data URL to Blob URL // Chrome 56 WebView caches Image objects even with new Image() // Blob URLs force fresh Image object creation without bitmap caching var blob = dataURLtoBlob(response.dataUrl); var blobUrl = URL.createObjectURL(blob); var qrImage = new Image(); qrImage.onload = function() { tempCtx.drawImage(qrImage, qrX, qrY, qrSize, qrSize); tempCtx.strokeStyle = '#000000'; tempCtx.lineWidth = 2; tempCtx.strokeRect(qrX, qrY, qrSize, qrSize); // Clean up Blob URL to prevent memory leaks URL.revokeObjectURL(blobUrl); finishRendering(); }; qrImage.onerror = function() { console.error('Failed to load QR image'); // Clean up Blob URL even on error URL.revokeObjectURL(blobUrl); tempCtx.fillStyle = '#FFFFFF'; tempCtx.fillRect(qrX, qrY, qrSize, qrSize); tempCtx.strokeStyle = '#000000'; tempCtx.lineWidth = 2; tempCtx.strokeRect(qrX, qrY, qrSize, qrSize); finishRendering(); }; // Use Blob URL instead of data URL qrImage.src = blobUrl; } else { console.error('Invalid API response'); finishRendering(); } } catch (e) { console.error('Error parsing API response:', e); finishRendering(); } } else { console.error('API request failed:', xhr.status); finishRendering(); } }; xhr.onerror = function() { console.error('Network error fetching QR code'); finishRendering(); }; xhr.send(); } else { finishRendering(); } } // Make function globally available window.renderLabelToCanvas = renderLabelToCanvas; function printLabelData(label) { try { var profile = window.SUNMI_PAGE_DATA.profile; if (!label) { console.error('Label data not found'); return; } // Check if printer is available if (!window.PrinterBridge || typeof window.PrinterBridge.printBitmapFromBase64 !== 'function') { console.error('PrinterBridge.printBitmapFromBase64 not available'); return; } // Check if Canvas rendering utility is loaded if (typeof window.renderLabelToCanvas !== 'function') { console.error('renderLabelToCanvas function not found'); return; } // Helper function to parse date in local timezone (avoid UTC conversion) function parseDateLocal(dateString) { var parts = dateString.split('-'); var year = parseInt(parts[0], 10); var month = parseInt(parts[1], 10) - 1; // months are 0-indexed var day = parseInt(parts[2], 10); return new Date(year, month, day, 0, 0, 0, 0); } function normalizeUnit(text) { if (!text) return text; return text.toUpperCase() .replace(/GRAMA(S)?/g, 'GR') .replace(/G/g, 'GR') .replace(/UNIDADE(S)?/g, 'UNID') .replace(/PACOTE(S)?/g, 'PCT') .replace(/CAIXA(S)?/g, 'CX'); } // Format dates var manipDate = label.production_date ? parseDateLocal(label.production_date).toLocaleDateString('pt-PT') : null; var expDate = parseDateLocal(label.expiry_date).toLocaleDateString('pt-PT'); var originalExpiry = label.original_expiry_date ? parseDateLocal(label.original_expiry_date).toLocaleDateString('pt-PT') : null; var productName = label.products ? label.products.name : 'Produto'; var categoryName = label.products && label.products.categories ? label.products.categories.name : 'GERAL'; var companyName = profile.companies ? profile.companies.name : 'Empresa'; var companyNif = profile.companies && profile.companies.nif ? profile.companies.nif : ''; var operatorName = profile.name || 'Operador'; var storageSource = label.storage_type || (label.products && label.products.storage_type) || 'refrigerado'; var useFabricacaoLabel = (label.products && label.products.use_fabricacao_label) || false; // Format label ID as 5-digit code var displayLabelId = label.id.length > 8 ? label.id.slice(-5).toUpperCase() : label.id.toUpperCase(); if (displayLabelId.length < 5) { displayLabelId = ('00000' + displayLabelId).slice(-5); } // Current timestamp var now = new Date(); var timestamp = now.toLocaleDateString('pt-PT', {day: '2-digit', month: '2-digit', year: 'numeric'}); // Prepare label data for Canvas rendering var labelData = { productName: productName, expiryDate: expDate, originalExpiryDate: originalExpiry, showOriginalExpiryDate: label.show_original_expiry_date || false, manipulationDate: manipDate, showManipulationDate: label.show_manipulation_date || false, showExpiryDate: label.show_expiry_date !== false, // Default to true if undefined batchNumber: label.batch_number || '', quantity: label.quantity ? (label.unit ? (label.quantity + ' ' + normalizeUnit(label.unit)) : String(label.quantity)) : '', storageType: storageSource, categoryName: categoryName, labelId: displayLabelId, qrCodeUrl: label.qr_code || '', operatorName: operatorName, companyName: companyName, companyNif: companyNif, timestamp: timestamp, supplierBrand: label.supplier_brand || '', registrationNumber: label.registration_number || '', productSku: (label.products && label.products.sku) || '', hasExtendedValidade: label.has_extended_validade || false, sequenceNumber: label.sequence_number || null, totalInGroup: label.total_in_group || null, useFabricacaoLabel: useFabricacaoLabel }; // Render to canvas and print window.renderLabelToCanvas(labelData, function(result) { try { // Print the label image (with QR embedded) console.log('GLOBAL printLabelData trigger', label && label.id); window.PrinterBridge.printBitmapFromBase64(result.base64); // Track print in database fetch('/api/labels/' + label.id + '/print', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) }).catch(function(error) { console.error('Failed to track print:', error); }); } catch (e) { console.error('Error calling PrinterBridge:', e); throw e; } }); } catch (e) { console.error('Error in printLabelData:', e); throw e; } } // Make function globally available window.printLabelData = printLabelData;