Termal Etiket Üzerinde Canlı HTML, CSS ve Chart.js — LabelInn HTML Elementi

Çoğu etiket baskı platformu, 2010'da gönderdiği aynı altı element türünü sunar: metin, barkod, görsel, dikdörtgen, çizgi, QR kodu. Daha fazlasını istiyorsanız — gerçek bir grafik, özel bir gradient, CSS ile şekillendirilmiş bir çağrı kutusu, veriye dayalı bir SVG — bunu başka bir araçta yapar, raster görsel olarak dışa aktarır ve etikete statik bir resim olarak yapıştırırsınız. Veri her değiştiğinde yeniden dışa aktarırsınız.

LabelInn farklı bir primitif gönderiyor. HTML elementi, etiket canvas'ı üzerinde tam canlı bir tarayıcı motorudur: gerçek HTML, gerçek CSS3, gerçek JavaScript; Chart.js, D3, Three.js, anime.js, QRCode ve html2canvas önceden paketlenmiş olarak gelir. 4×6 termal etikete sürükleyin, işaretlemenizi yazın, değişkenleri canlı veri kaynaklarına bağlayın ve rasterizer bunu 600 DPI termal-yazıcı kalitesinde bitmap'lere render eder. Çıktı, tarayıcıda göreceğiniz şeyle baskı çözünürlüğünde aynı görünür.

Piyasadaki başka hiçbir etiket baskı platformunda bu yok. Bu yazı, bunun neden işe yaradığının ve neyi açtığının mimari ve operasyonel açıklamasıdır.

HTML elementi aslında nedir

Canvas üzerindeki bir HTML elementi, kavramsal olarak bir genişlik, yükseklik ve döndürme açısı olan bir div'dir. Bu sınırlayıcı kutunun içine istediğiniz HTML ve CSS'i yazarsınız. Element şunları destekler:

• Ham HTML içeriği — tam inline stillerle veya ayrı bir CSS bloğuyla
• Değişken bağlamaları — {{order_id}} ve {{customer.name}} tarzı yer tutucular, render zamanında herhangi bir LabelInn veri kaynağına (Excel satırları, API yanıtları, pazaryeri sipariş alanları, entegrasyon kayıtları, serileştirilmiş sayaçlar, tarih-saat biçimleri) karşı çözümlenir
• Paketlenmiş JavaScript kütüphaneleri — Chart.js, D3, Three.js, anime.js, QRCode, html2canvas için opt-in geçişler. Kütüphaneler uygulamayla paketlenir; render ortamı bunları sıfır ağ bağımlılığıyla yerel olarak yükler
• Termal yazıcı optimizasyon bayrağı — açık olduğunda, renderer çıktıyı monokrom yazıcılar için ön işler (binarizasyon, dithering seçimleri, kontrast yükseltmeleri)
• Opaklık ve arka plan rengi — canvas'taki diğer elementlerin üzerine katmanlamak için

Yazım yalnızca işaretleme yazmaktır. Ayrı bir "grafik tasarımcı" modülü yok, "barkod tasarımcı" modülü yok, sahibi marka olan bir alana özel dil yok. Eğer işaretlemeyi yazabiliyorsanız, etiket onu render edebilir.

Render boru hattı — bu gerçekte nasıl yazdırır

Baskı zamanında, render motoru host platforma göre boyutlandırılmış bir sıcak WebView havuzu tutar. Her havuz yuvası, paketlenmiş kütüphaneler zaten yüklenmiş, önceden başlatılmış, ekran dışı bir tarayıcı örneğidir. Bir iş geldiğinde:

1. Elementin HTML'i, CSS'i ve çözümlenmiş değişkenleri, elementin hedef fiziksel boyutlarında ve yazıcının DPI'sında (tipik olarak 203, 300 veya 600) eksiksiz bir belge hâline getirilir.
2. Boş bir havuz yuvası belgeyi yükler. Paketlenmiş kütüphane betikleri çalışır. Chart.js grafiğini oluşturur. D3 düzenini üretir. Belge tamamlandığını host'a bir JS işleyici çağrısıyla bildirir.
3. Yuva kendi ekran görüntüsünü istenen çözünürlükte alır. Sonuç, elementin etiket üzerindeki fiziksel alanına göre boyutlandırılmış yüksek-DPI bir PNG'dir.
4. PNG, etiketin geri kalan render çıktısına diğer tüm elementlerle (metin, barkod, görsel) birlikte birleştirilir ve yazıcıya özgü komut akışına aktarılır.
5. Havuz yuvası kütüphaneleri hâlâ yüklü olarak havuza geri döner — sonraki iş sıfır soğuk başlatma maliyeti öder.

Havuz sınırlıdır. Windows'ta havuz birden fazla yuvayı paralel olarak çalıştırır çünkü WebView2 kendi süreçlerini başlatır. Diğer platformlarda havuz tek bir sıcak örnek üzerinden kuyruğa alınır. Her durumda, toplu baskı mevcut render kapasitesine dağıtılır; HTML elementleri olan 500 etiketlik bir iş, kahve molası değil, birkaç saniyedir.

Ayrıca çözümlenmiş belgeye göre anahtarlanmış küçük bir render önbelleği vardır, böylece aynı veriyle aynı grafik WebView'i tekrar çalıştırmadan aynı PNG'yi üretir. Üretim partisinde tekrar eden etiketler için bu bedavadır.

Başka hiçbir etiket yazılımının yapamayacağı şeyi açar

1. Kargo etiketi üzerinde veriye dayalı grafikler

Bir lojistik müşterisi, kargo etiketinin arkasına küçük bir SLA performans çubuk grafiği istedi — yüksek değerli müşteriler için, koliyle "son 6 teslimatınız zamanında / 1 gün geç / 2 gün geç" görünür bir özet taşınacaktı. Piyasadaki diğer her etiket baskı sistemiyle bu, müşterinin vazgeçtiği bir taleptir. HTML elementiyle, müşterinin son sevkiyat veri kaynağına bağlı bir Chart.js bloğudur. Grafik termal etiket üzerinde doğrudan 600 DPI'de render edilir.

2. Marka düzeyinde tipografi ve düzen

Etiket tasarımcıları, eski yazılımlarla bir markanın yazı tipini, kerning'i, leading'i ve düzenini doğru getirmek için savaşırdı. HTML elementi gerçek CSS3 çalıştırır — flexbox, grid, custom properties, web geliştiricilerinin zaten bildiği tüm düzen araç seti. Bir marka ekibi bir CSS dosyası gönderebilir ve etiket marka sistemini devralır. Sahibi marka olan bir "stil profili" soyutlaması yok. "Pro Tasarımcı" katmanı yükseltmesi yok.

3. Özel QR/barkod stilleri

Yerel barkod elementleri muhafazakâr olmak zorundadır — taranmayacak bir barkod render etme riskini alamazlar. HTML elementi seçim yapmanıza olanak tanır: tarayıcı kalitesinde güvenilirlik gerektiğinde yerel barkod elementini kullanın veya marka odaklı bir görünüm için özel renkler, gradient'ler, gömülü logolar ve dekoratif çerçevelerle paketlenmiş qrcode.js'i kullanın. Seçim müşterinindir, platformun değil.

4. Animasyonlu SVG, rasterize edilmiş

HTML elementi anime.js ve SMIL animasyonlarını çalıştırır. Renderer, animasyon zaman çizgisinde yapılandırılabilir bir anda ekran görüntüsü alır — böylece bir animasyon, etikette belirli bir karede inecek şekilde tasarlanabilir. Bu niş bir kullanımdır, ama stilize bir gradient süpürmesini veya etikete pişirilmiş parçacık tarzı bir dekorasyonu isteyen müşteriler için başka hiçbir şeyin sunmadığı gerçek bir yetenektir.

5. Three.js wireframe'leri ve izometrik ürün görünümleri

Açılış-deneyimi etiketleri gönderen müşteriler için (koli içinde küçük bir izometrik ürün render'ı taşır), Three.js'li HTML elementi modeli etiket çözünürlüğünde bir görsele render eder. Model dosyası bir kez alınır, önbelleğe alınır ve üretim partisi boyunca yeniden kullanılır. Bir SKU'nun her kutusu, bir sanatçı 3B aracına gidip gelmeden aynı render'ı alır.

Performans ödünlemesi, açıkça ortaya koyulmuş

Gerçek bir tarayıcı motoru üzerinden render etmek, yerel bir metin elementini render etmekten daha fazlaya mal olur. Tipik bir iş istasyonunda sıcak havuzla ölçülen sayılar:

Havuz sürekli yük altında sıcak kalır, böylece üretim partileri sıcak rakamı öder. Render önbelleği bunu tekrar eden aynı içerik için daha da amorti eder.

Grafiği olan bir HTML elementi ve dört yerel elementi olan bir etiket için, toplam render bütçesi HTML elementinin render süresiyle — tipik olarak 150 ms — sınırlıdır; bu, render hattı yazısında anlatılan toplam boru hattının saniye-altı canvas-to-engagement penceresinin rahatça içine girer.

Veri bağlama — diğer her elementin kullandığı aynı yüzey

HTML elementleri değişkenleri tam olarak diğer her elementin yaptığı gibi bağlar. {{customer_name}} yer tutucusu, yerel metnin kullandığı aynı veri kaynağı mekanizmasına karşı çözümlenir. Etikete bağlı bir Excel satırı varsa, HTML elementi aynı satırı görür. Etikete bağlı bir Trendyol siparişi varsa, HTML elementi o siparişin alanlarını görür. Serileştirilmiş bir sayacınız varsa, sıradaki değer akar.

Bu, değişken yüzeyinin canvas boyunca tutarlı olduğu anlamına gelir. Tasarımcı, HTML elementleri için yeni bir bağlama modelini öğrenmek zorunda değildir. Veri panelinden elemente sürükle etkileşimi, yerel metin için olduğu gibi HTML için de çalışır.

Bu, platformda nereye oturuyor

HTML elementi, canvas üzerinde sıradan bir elementtir. Uyumluluk makinesi (element başına render edilen değer yakalama, HMAC imzalı denetim kayıtları, hash-zincirli defter — FDA Part 11 white paper'ında anlatıldı) ona her diğer elementi ele aldığı gibi davranır. Denetim kaydı, yalnızca şablon tanımını değil, gerçekten render edilen çözümlenmiş HTML içeriğini içerir. Sorumluluk vaka çalışmasında anlatılan elden düzenleme sorumluluk boşluğu HTML elementleri için aynı şekilde kapatılır — render edilen şey, denetim defterinde imzalı olarak olandır.

Kural motoru (kural motoru yazısı) sipariş şekline göre bir HTML elementinin dâhil edilip edilmeyeceğine dallanabilir — müşteri katmanına özgü bir grafik premium müşteriler için dâhil edilir ve geri kalanlar için atlanır, hepsi bir kuraldan.

MCP sunucusu (MCP yazısı) HTML elementini, diğer her element gibi aynı şablon yazma araçları üzerinden açar. Bir AI ajanına "müşterinin son 6 sevkiyatını gösteren bir Chart.js çubuk grafiğini sağ alt köşeye ekle" denilebilir ve ajan, doğru işaretleme ve doğru bağlamalarla HTML elementini inşa eder.

Rakipler bunu neden yapmadı

Dürüst yanıt, bunu iyi yapmanın zor olduğudur. HTML elementi şunları gerektirdi:

• Windows, macOS, Linux, iOS ve Android'de hepsi arasında tutarlı render ile çalışan gömülü bir tarayıcı motoru
• Soğuk başlatma maliyetinin (taze bir tarayıcı süreci başlamak bir saniye alır) operatöre düşmemesi için sıcak havuz mimarisi
• Mevcut olduğunda platformun yerel tarayıcı süreç modelini kullanan paralel havuz (Windows'ta WebView2, macOS/iOS'ta WKWebView, Android System WebView)
• Tekrar eden aynı içerik için tam WebView maliyetini ödememek için bir render önbelleği
• Müşterilerin CDN politikasıyla veya çevrimdışı ortamlarla savaşmaması için paketlenmiş kütüphaneler hikâyesi
• Termal yazıcıların gerçekten iyi yazdırdığı çıktıyı üreten 600 DPI bir rasterizasyon boru hattı

Bu, çoğu müşterinin ilk konuşmalarında istemediği bir özellik için çok mühendislik. Bunu inşa etmemizin nedeni, isteyen müşterilerin en çok ödeyenler olmasıdır — premium markalar, regülasyona tabi üreticiler, müşteriye dönük etiketleri olan lojistik şirketler — ve mimari bir kez var olduğunda, platformdaki diğer her etiket-element türü aynı veri bağlama ve denetim yüzeyini bedavaya devralır.

Deneyin

HTML elementi mevcut Pro planı ve üzerinde gönderiliyor. Canvas'ı açın, araç kutusundan bir HTML elementi bırakın, birkaç satır işaretleme yapıştırın, bir değişken bağlayın, Yazdır'a basın. Bir termal yazıcıdan 600 DPI'de bir Chart.js çubuk grafiğinin çıktığını ilk gördüğünüzde, demo işini görmüş olur.