Namebadges
Table of Contents
Um Namensschilder zu generieren, verwenden wir für üblich zwei verschiedene Varianten. Die erste Variante ist über SetaPDF ein PDF-Formular auszufüllen. Die zweite Variante ist über ein HTML5-Canvas. Beide Varianten haben bestimmte Vor- und Nachteile:
SetaPDF:
- + Massenexport möglich (für Vorproduktion)
- - Browservorschau nicht möglich bzw. nur teilweise (neue Browser unterstützen das AcrobatReader-Plugin nicht mehr und die integrierten Reader sind suboptimal)
Canvas:
- + Browservorschau möglich, da es komplett nur im Browser abläuft
- - derzeit kein Massenexport möglich
Die Variante über SetaPDF wird für üblich in einer Action umgesetzt.
Canvas-Namebadges
Um ein Canvas-Namebadge zu erstellen, muss man im "kon2/namebadges"-Ordner z.B. eine "Participant.js"-Datei erstellen. Der Name ist hierbei der Objekt-Typ (es können auch Templates verwendet werden).
Die Javascript-Datei wird lediglich eingelesen und in dem View-Skript "konquadrat/src/View/Backend/Namebadge/show.phtml" an dem Platzhalter "<?=$this->config?>" eingebunden.
Alle Positionsangaben sind in mm und Schriftgrößen in pt. Die Schriftarten müssen von den Browsern gefunden werden können, also müssten im public-Ordner hinterlegt werden.
Verfügbare Variablen:
- "path" - der absolute Pfad
- "data" - alle Daten von dem Objekt; AbstractObject::getData(), falls vorhanden wird anschließend noch "getNamebadgeData(): array" aufgerufen - das Ergebnis von getData() wird überschrieben
Die Konfiguration kann wie folgt aussehen:
function getNamebadgeConfig(data) {
return {
width: 86,
height: 54,
previewDpi: 120,
printDpi: 1000,
frontBlocks: [{
type: 'text',
name: 'VIP',
value: data.Vip ? 'VIP' : '',
x: 60,
y: 15,
width: 30,
color: 'rgb(255,0,0)',
font: path + 'namebadge/FrutigerLTCom-Bold.ttf',
fontSize: 9,
align: 'right'
}, {
type: 'text',
name: 'Name',
value: data.Firstname + ' ' + data.Lastname,
x: 18,
y: 40,
width: 60,
color: 'rgb(0,0,0)',
font: path + 'namebadge/FrutigerLTCom-Bold.ttf',
fontSize: 15
}, {
type: 'text',
name: 'Street',
value: data.Street + '',
x: 18,
y: 43.5,
width: 60,
color: 'rgb(0,0,0)',
font: path + 'namebadge/FrutigerLTCom-Roman.ttf',
fontSize: 9
}, {
type: 'text',
name: 'City',
value: data.Zipcode + ' ' + data.City,
x: 18,
y: 47,
width: 60,
color: 'rgb(0,0,0)',
font: path + 'namebadge/FrutigerLTCom-Roman.ttf',
fontSize: 9
}],
backBlocks: [{
type: 'text',
name: 'SomeText',
value: data.SomeotherText,
x: 14,
y: 15,
width: 60,
color: 'rgb(0,0,0)',
font: path + 'namebadge/FrutigerLTCom-Roman.ttf',
fontSize: 9,
multiLine: 2
//autoResizeText: 'font-size'
}, {
type: 'text',
value: '*12345678*',
x: 15,
y: 44,
width: 56,
color: 'rgb(0,0,0)',
font: path + 'namebadge/code39.ttf',
fontSize: 45,
autoResizeText: 'condensed'
}, {
type: 'text',
value: '12345678',
x: 37,
y: 47,
width: 60,
color: 'rgb(0,0,0)',
font: path + 'namebadge/FrutigerLTCom-Roman.ttf',
fontSize: 9
}]
};
}