// ============================================================================ // SUNMI LABEL PRINTER UTILITIES - Sunmi Compatible (ES5 JavaScript Only) // ============================================================================ /** * Formats a label ID (UUID) into a 6-digit numeric code * * @param {string} labelId - The label UUID or ID * @returns {string} Formatted 6-digit numeric string (e.g., "012345") */ function formatLabelIdNumeric(labelId) { // Handle null/empty input if (!labelId) { return '000000'; } // UUID handling (>8 characters) if (labelId.length > 8) { // Extract numeric characters only var numericOnly = labelId.replace(/[^0-9]/g, ''); // Parse last 9 digits to avoid potential overflow var numValue = parseInt(numericOnly.slice(-9), 10); // Handle edge case: UUID with no numeric characters if (isNaN(numValue)) { return '000000'; } // Use modulo to ensure 6-digit range (0-999999) var code = numValue % 1000000; // Manual padding var result = String(code); while (result.length < 6) { result = '0' + result; } return result; } // Short ID handling (<=8 characters) var uppercased = labelId.toUpperCase(); // Manual padding while (uppercased.length < 6) { uppercased = '0' + uppercased; } // Take last 6 characters return uppercased.slice(-6); } /** * 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, skipThreshold) { // Default to true if not specified (for backwards compatibility with preview) if (showDateFooter === undefined) { showDateFooter = true; } // When true, skip 1-bit threshold — send antialiased image for firmware dithering if (skipThreshold === undefined) { skipThreshold = false; } // STAGE 1: Render to temporary canvas (may have antialiasing) var tempCanvas = document.createElement('canvas'); tempCanvas.width = 384; // 384px (58mm standard width) tempCanvas.height = 400; // 58mm standard label height 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 Sunmi 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 faturaDisplay = toUpperSafe(labelData.fatura || ''); 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 || '000000'); var labelCode = (labelData.hasExtendedValidade && labelCodeRaw !== '000000') ? ('*' + labelCodeRaw) : labelCodeRaw; var y = margin; function fitValueFont(text, baseSize, minSize, maxWidth) { for (var size = baseSize; size >= minSize; size -= 2) { tempCtx.font = 'bold ' + size + 'px Tahoma, Arial'; if (tempCtx.measureText(text).width <= maxWidth) { return 'bold ' + size + 'px Tahoma, Arial'; } } return 'bold ' + minSize + 'px Tahoma, Arial'; } function drawTextBold(ctx, text, x, y) { ctx.fillText(text, x, y); ctx.fillText(text, x + 0.5, y); } 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) : 'bold 22px Tahoma, Arial'; tempCtx.font = combinedFont; tempCtx.textAlign = 'left'; drawTextBold(tempCtx, combinedText, margin, y); } else { // Standard column layout tempCtx.font = 'bold 18px Tahoma, Arial'; tempCtx.textAlign = 'left'; if (labelText) { drawTextBold(tempCtx, labelText, margin, y); } var valueText = hasAnyValue ? ensureValue(value || '') : ''; var valueFont = options && options.fitValue ? fitValueFont(valueText, 22, 16, availableWidth) : 'bold 22px Tahoma, Arial'; tempCtx.font = valueFont; drawTextBold(tempCtx, valueText, valueColumnX, y); } if (hasRight) { var rightText = options.rightValue; var rightFont = options && options.fitRight ? fitValueFont(rightText, 18, 14, availableWidth) : 'bold 22px Tahoma, Arial'; tempCtx.font = rightFont; tempCtx.textAlign = 'right'; drawTextBold(tempCtx, 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, 28, 26, 24, 22, 20], WIDTH - margin * 2); tempCtx.font = productFit.font; tempCtx.textAlign = 'center'; if (productFit.lines.length === 1) { drawTextBold(tempCtx, productFit.lines[0], WIDTH / 2, y); y += 42; } else { drawTextBold(tempCtx, productFit.lines[0], WIDTH / 2, y); y += 30; drawTextBold(tempCtx, 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'; drawTextBold(tempCtx, 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, '')); if (faturaDisplay && faturaDisplay.trim().length) { renderInfoRow('FATURA', faturaDisplay); } // 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 pushed down to clear FATURA row tempCtx.font = 'bold 18px Tahoma, Arial'; tempCtx.textAlign = 'left'; var textY = qrY + 10; var respText = 'RESP. ' + operatorDisplay; var footerValueWidth = qrX - margin - 4; tempCtx.font = fitValueFont(respText, 20, 14, footerValueWidth); drawTextBold(tempCtx, respText, margin, textY); textY += 24; tempCtx.font = fitValueFont(companyDisplay, 18, 14, footerValueWidth); drawTextBold(tempCtx, companyDisplay, margin, textY); textY += 20; if (nifDisplay) { tempCtx.font = fitValueFont(nifDisplay, 16, 12, footerValueWidth); drawTextBold(tempCtx, nifDisplay, margin, textY); textY += 18; } // Label code centered above QR code tempCtx.font = 'bold 19px Tahoma, Arial'; tempCtx.textAlign = 'center'; drawTextBold(tempCtx, labelCode, qrX + (qrSize / 2), 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) { // drawTextBold(tempCtx, 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 Sunmi 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 optional 1-bit threshold conversion function finishRendering() { if (!skipThreshold) { var imageData = tempCtx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); var pixels = imageData.data; // Threshold from shared constant (lib/template-labels/threshold-pixels.ts) 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; pixels[i+3] = 255; } tempCtx.putImageData(imageData, 0, 0); } // CRITICAL: Add small delay before toDataURL to ensure canvas state is flushed // Sunmi 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 // Sunmi 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 var hasDithering = window.PrinterBridge && typeof window.PrinterBridge.printBitmapDitheredFromBase64 === 'function'; var hasLegacy = window.PrinterBridge && typeof window.PrinterBridge.printBitmapFromBase64 === 'function'; if (!hasDithering && !hasLegacy) { console.error('PrinterBridge 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; // Use short_code for display, fallback to UUID-derived code for legacy labels // Note: formatLabelIdNumeric handles both short strings (<=8 chars) and UUIDs, // and uses ES5-compatible manual padding (no padStart) var displayLabelId = formatLabelIdNumeric(label.short_code || label.id); // 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 || '', fatura: label.fatura || '', quantity: label.quantity ? (label.unit ? (label.quantity + ' ' + normalizeUnit(label.unit)) : String(label.quantity)) : '', storageType: storageSource, categoryName: categoryName, labelId: displayLabelId, qrCodeUrl: formatLabelIdNumeric(label.short_code || label.id), 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, useFabricacaoLabel: useFabricacaoLabel }; // skipThreshold=hasDithering: send antialiased image when firmware handles dithering window.renderLabelToCanvas(labelData, function(result) { try { if (hasDithering) { console.log('printLabelData dithered', label && label.id); window.PrinterBridge.printBitmapDitheredFromBase64(result.base64); } else { console.log('printLabelData (threshold)', label && label.id); window.PrinterBridge.printBitmapFromBase64(result.base64); } // Track print in database (XHR - Sunmi compatible, fetch() not supported) var trackXhr = new XMLHttpRequest(); trackXhr.open('POST', '/api/labels/' + label.id + '/print', true); trackXhr.setRequestHeader('Content-Type', 'application/json'); trackXhr.onerror = function() { console.error('Failed to track print'); }; trackXhr.send(JSON.stringify({})); } catch (e) { console.error('Error calling PrinterBridge:', e); throw e; } }, true, hasDithering); } catch (e) { console.error('Error in printLabelData:', e); throw e; } } // Make function globally available window.printLabelData = printLabelData;