¶ Generale
In questa sezione verranno esposti gli stili disponibili per zona per aggiungere degli effetti ai contenuti interni durante il playout.
Per ulteriori informazioni, leggi questo articolo.
Tutti gli stili devono essere separati da un punto e virgola
;. Se uno stile non è scritto correttamente, verrà ignorato.
Nel caso si utilizzino font aggiuntivi e pertanto differenti da quelli di default è consigliabile utilizzare il nome del file anzichè il nome del font, ES: ApexNew-Book.otf anzichè Apex New Book.
¶ Contenuti video e lives
Gli stili nella tabella sottostante possono essere applicati ai seguenti tag del layout:
<xpdam:essence >video</xpdam:essence>
<xpdam:essence >live-smil-dash</xpdam:essence>
<xpdam:essence >live-single-dash</xpdam:essence>
| Style | Value | Default | Description |
|---|---|---|---|
| volume-video=[value] | "0" to "1023" | 512 | Volume del suono per un contenuto video, il parametro deve essere messo in Video ES: <xpdam:essence xpzone:style="resize-video=keepAspect;volume-video=0">video</xpdam:essence> |
| fullscreen-video=[value] | "1" or "0" | 0 | 0: il video verrà riprodotto nella zona 1: il video verrà riprodotto a schermo intero anche se la zona è più piccola |
| resize-video=[value] | "0" or “disabled” “keepAspect” "1" or “free” | keepAspect | disabled or 0: il video mantiene le dimensioni originali. Se più grande della zona, verrà ritagliato. Se è più piccolo di zone, sarà riprodotto al centro della zona. keepAspect: il video verrà ridimensionato per adattarsi alla zona mantenendo le proporzioni originali. (La parte vuota sarà trasparente) free or 1: il video verrà allungato (stretched) per adattarsi completamente alla zona |
| loop-video=[value] | "1" or "0" | 0 | 0: il video si interrompe alla fine 1: quando il video finisce, ricomincia dall'inizio |
| crop-top=[value] | integer | 0 | La coordinata Y dell'angolo in alto a sinistra dell'area di ritaglio del video |
| crop-left=[value] | integer | 0 | La coordinata X dell'angolo superiore sinistro dell'area di ritaglio del video |
| crop-bottom=[value] | integer | La coordinata Y dell'angolo in basso a destra dell'area di ritaglio del video | |
| crop-right=[value] | integer | La coordinata X dell'angolo in basso a destra dell'area di ritaglio del video | |
| bgcolor=[value] | Colore esadecimale nel formato: #RRGGBB o #AARRGGBB | #00000000 | Il colore di sfondo della zona utilizzando numeri esadecimali. Utilizza la notazione #RRGGBB per i colori opachi o #AARRGGBB per definire il canale alfa per la trasparenza (FF: opaco, 00: completamente trasparente) |
| view-mode=[value] | "browser" "qrcode" | browser | browser: show video qrcode: show a picture with a QRCode to get the video via http from XuniPlay server. |
bgcolor: Lo stile bgcolor viene applicato allo sfondo della zona.
ritaglia: Per applicare il crop, devi valorizzare lo stile crop-bottom e crop-right.
Se mancano crop-top e crop-left, viene applicato il valore predefinito.
modalità di visualizzazione:
Se view-mode=qrcode durante la pubblicazione, il video verrà pubblicato come contenuto html da renderizzare come immagine QRCode.
Se view-mode=browser, il video verrà pubblicato come tipo media
¶ Contenuti audio
Gli stili nella tabella sottostante possono essere applicati ai seguenti tag del layout:
<xpdam:essence >audio</xpdam:essence>
| Style | Value | Default | Description |
|---|---|---|---|
| volume-audio=[value] | "0" to "1023" | 512 | Volume del suono per un contenuto video |
| loop-audio=[value] | "1" or "0" | 0 | 0: quando vengono riprodotti tutti i contenuti della zona, il playout si interrompe 1: quando vengono riprodotti tutti i contenuti della zona, il player ricomincia dall'inizio |
| transition-target=[value]* | "volume" | La "proprietà" per applicare la transizione. L'unica proprietà ancora disponibile è "volume" | |
| transition-trigger=[value]* | "start" "end" | Il punto dell'audio a cui applicare la transizione: start: la transizione viene applicata quando l'audio avvia la riproduzione end: la transizione viene applicata alla fine (prima della fine) del file audio. | |
| transition-triggerOffset=[value] | integer >0 | 0 | I millisecondi di attesa dall'inizio o il tempo prima della fine dell'audio per applicare la transizione |
| transition-valueStart=[value]* | dipende dalla proprietà specificata in transition-target | è un numero intero>0 se transition-target=volume | |
| transition-valueEnd=[value]* | dipende dalla proprietà specificata in transition-target | È un numero intero>0 se transition-target=volume | |
| transition-duration=[value]* | interger >0 | La durata della transizione in millisecondi | |
| view-mode=[value] | "browser" "qrcode" | browser | browser: riproduci audio qrcode: mostra un'immagine con un QRCode per ottenere l'audio tramite http dal server XuniPlay. |
Nota: transition-*
Gli stili con * sono obbligatori per impostare/creare una transizione.
Nota: view-mode
Se view-mode=qrcode durante la pubblicazione, l'audio verrà pubblicato come contenuto html da renderizzare come immagine QRCode.
Se view-mode=browser, l'audio verrà pubblicato come tipo media
La transizione funziona cambiando il valore di una proprietà (es. Volume) da un valore iniziale (valueStart) a un valore finale (valueEnd)
La transizione inizia quando viene raggiunto il tempo triggerOffset (applicare all'inizio o alla fine in base al trigger).
Il tempo necessario per modificare il valore della proprietà dall'inizio alla fine è chiamato durata.
Se il valore End è diverso dal valore originale, al termine della transizione viene impostato il valore originale.
Per applicare l'effetto fade-in e fade-out insieme, devi impostare due volte lo stile come segue:
<xpdam:essence xpzone:style=”transition-target=volume;transition-trigger=start;transition-valueStart=0;transition-valueEnd=512;transition-duration=3000;transition-trigger=stop;transition-valueStart=512;transition-valueEnd=0;transition-duration=5000;transition-triggerOffset=-5000“>audio</xpdam:essence>
Dove:
transition-target=volume; è comune per il fade-in e il fade-out
transition-trigger=start;transition-valueStart=0;transition-valueEnd=512;transition-duration=3000; la transizione FADE-IN applicata all'inizio dell'audio
transition-trigger=stop;transition-valueStart=512;transition-valueEnd=0;transition-duration=5000;transition-triggerOffset=-5000 è la transizione FADE-OUT applicata 5 secondi prima della fine dell'audio
Transition graph:
¶ Contenuti immagine
Gli stili nella tabella sottostante possono essere applicati ai seguenti tag del layout:
<xpdam:essence>image</xpdam:essence>
<xpdam:essence>presentation</xpdam:essence>
| Style | Value | Default | Description |
|---|---|---|---|
| change-image=[value] | "none" "scroll" "fade" | none | Effetto di transizione sull'immagine iniziale/finale |
| change-image-speed =[value] | "1" to "10" | 2 | La velocità in pixel al secondo 1: lenta (40 pixel al secondo) 10: veloce (400 pixel al secondo) |
| resize-image=[value] | "0" "1" | 1 | 0: l'immagine viene visualizzata con le dimensioni originali. 1: l'immagine viene allungata per adattarsi perfettamente alla zona |
| orientation-image=[value] | "horizontal" "vertical" | horizontal | La direzione dell'effetto di cambio immagine horizontal: l'immagine appare/scompare da destra a sinistra vertical: l'immagine appare/scompare dal basso verso l'alto |
| image-fallback | string | percorso /url dell'immagine da usare se l'immagine non esiste su disco o c'è qualche problema nel caricamento | |
| rotation* (coming soon) | decimal | 0 | gradi di rotazione del contenuto |
| bgcolor=[value] | Hex color in the format: #RRGGBB or #AARRGGBB | #00000000 | Il colore di sfondo della zona utilizzando numeri esadecimali. Utilizza la notazione #RRGGBB per i colori opachi o #AARRGGBB per definire il canale alfa per la trasparenza (FF: opaco, 00: completamente trasparente) |
| view-mode=[value] | "browser" "qrcode" | browser | browser: mostra l'immagine qrcode: mostra un'immagine con un QRCode per ottenere l'immagine tramite http dal server XuniPlay. |
Nota: bgcolor
Lo stile bgcolor viene applicato allo sfondo della zona.
Nota: modalità di visualizzazione
Se view-mode=qrcode durante la pubblicazione, l'immagine verrà pubblicata come contenuto html per essere renderizzata come immagine QRCode.
Se view-mode=browser, l'immagine verrà pubblicata come tipo media
¶ feed RSS
Gli stili nella tabella sottostante possono essere applicati ai seguenti tag del layout:
<xpdam:essences>
<xpdam:essence>apppackage</xpdam:essence>
<xpdam:essence xpzone:style="tags=td;change-feed=scroll;orientation-feed=vert;update=300;speed=4;tagtitle-font=TIM Sans;tagtitle-size=44;tagtitle-color=#ffffff;tagtitle-style=bold;tagdescription-size=40;tagdescription-color=#ffffff;tagdescription-style=bold;tagdescription-font=TIM Sans">feedrss</xpdam:essence>
| Style | Value | Default | Description |
|---|---|---|---|
| date-format=[value] | (see date-format table) | Formato data | |
| update-feed =[value] | integer >0 | Tempo in secondi per aggiornare il feed | |
| change-feed =[value] | "none" "scroll" "fade" | View effect none: la notizia appare sullo schermo senza effetto scroll: la notizia si sposta da destra a sinistra o dal basso verso l'alto fade: ogni notizia appare con effetto fade-in/fade-out | |
| speed=[value] | integer>0 if change-feed="none" or "fade" or "1" to "10" if change-feed="scroll" | La velocità di scorrimento o il tempo sullo schermo della singola notizia in base al valore di change-feed. Ricordarsi di non impostare il valore speed=0 perchè altrimenti il feed non verrà visualizzato | |
| orientation-feed =[value] | "horizontal" "vertical" | horizontal | horizontal: il feed viene visualizzato su un'unica riga vertical: il feed viene visualizzato su più righe |
| bgcolor=[value] | Colore esadecimale nel formato: #RRGGBB o #AARRGGBB | #00000000 | Il colore di sfondo della zona utilizzando numeri esadecimali. Utilizza la notazione #RRGGBB per i colori opachi o #AARRGGBB per definire il canale alfa per la trasparenza (FF: opaco, 00: completamente trasparente) |
| tags | combination of: "p", "t", "d" | Il campo dell'RSS da visualizzare (vedi nota sotto) “p”: visualizza la data della notizia “t”: visualizza il titolo della notizia “d”: visualizza la descrizione delle notizie | |
| tagtitle-font=[value] | stringa con il nome del carattere | Il nome del carattere applicato al tag "t"; per esempio. "Arial" per il titolo | |
| tagtitle-size=[value] | integer >0 | La dimensione del carattere applicato al tag "t" | |
| tagtitle-color=[value] | Colore esadecimale nel formato: #RRGGBB | Il colore applicato al tag "t" (vedi la nota sotto) | |
| tagtitle-style=[value] | "none" or "bold" or "italic" or "underline" | "none" | Lo stile applicato al tag "t". Non è possibile utilizzare una combinazione di stili. |
| tagdescription-font=[value] | stringa con il nome del carattere | Il nome del carattere applicato al tag "d"; per esempio. "Arial" per il titolo | |
| tagdescription-size=[value] | integer >0 | La dimensione del carattere applicato al tag "d" | |
| tagdescription-color=[value] | Colore esadecimale nel formato: #RRGGBB | Il colore applicato al tag "d" (vedi la nota di seguito) | |
| tagdescription-style=[value] | "none" or "bold" or "italic" or "underline" | "none" | Lo stile applicato al tag "p". Non è possibile utilizzare una combinazione di stili |
| tagdate-font=[value] | stringa con il nome del carattere | Il nome del carattere applicato al tag "p"; per esempio. "Arial" per il titolo | |
| tagdate-size=[value] | integer >0 | La dimensione del carattere applicato al tag "p" | |
| tagdate-color=[value] | Colore esadecimale nel formato: #RRGGBB | Il colore applicato al tag "p" (vedi nota sotto) | |
| tagdate-style=[value] | "none" or "bold" or "italic" or "underline" | "none" | Lo stile applicato al tag "p". Non è possibile utilizzare una combinazione di stili |
Nota: bgcolor
Lo stile bgcolor viene applicato allo sfondo della zona. Se utilizzi la notazione AARRGGBB (con trasparenza), verrà applicata solo allo sfondo e non al testo del feed.
Nota: view-mode
Se view-mode=qrcode durante la pubblicazione, il feed verrà pubblicato come contenuto html da renderizzare come immagine QRCode.
Se view-mode=browser, il feed verrà pubblicato come tipo feedrss o feedrssuri.
Formato tags
Utilizzando i tag, puoi attivare o disattivare parti delle notizie.
Le parti di notizie sono (in questa sequenza)
[Data ora] [Titolo] [Descrizione]
Dove:
[Data ora] = p
[Titolo] = t
[Descrizione] = d
La sequenza dei campi non può essere modificata.
La seguente sequenza NON può essere implementata
[Titolo] [Descrizione] [Data ora]
Esempio:
pt =>[Data ora] [Titolo] ptd => [Data ora] [Titolo] [Descrizione] pd => [Data ora] [Descrizione]
¶ Contenuti web URL
Gli stili nella tabella sottostante possono essere applicati ai seguenti tag del layout:
<xpdam:essence>uri</xpdam:essence>
| Style | Value | Default | Description |
|---|---|---|---|
| update-uri=[value]* (coming soon) | integer >0 | 0 | Tempo in secondi per ricaricare la pagina 0: la pagina non verrà ricaricata n: numero di secondi per l'aggiornamento |
| view-mode=[value] | "browser" "qrcode" | browser | browser: naviga nel sito web qrcode: mostra un'immagine con un QRCode per collegare il sito web |
¶ Zone Datetime
Gli stili nella tabella sottostante possono essere applicati ai seguenti tag del layout:
<rect … xpzone:zonetype=”Datetime“/>
| Style | Value | Default | Description |
|---|---|---|---|
| date-format=[value] | (see date-format table) | Formato data | |
| date-font=[value] | stringa con il nome del carattere | Il nome del carattere per la data | |
| date-size =[value] | integer >0 | La dimensione del carattere per la data | |
| date-color=[value] | Colore esadecimale nel formato: #RRGGBB | Il colore del carattere per la data | |
| date-style =[value] | "none" or "bold" or "italic" or "underline" | Lo stile per la data. Non è possibile utilizzare una combinazione di stili. | |
| date-align=[value] | "left" or "center" or "right" | L'allineamento per la data | |
| time-format=[value] | (see date-format table below) | Formato ora | |
| time-font =[value] | string with name of font | Il nome del carattere per l'ora | |
| time-size =[value] | integer >0 | La dimensione del carattere per la data | |
| time-color=[value] | Colore esadecimale nel formato: #RRGGBB | Il colore del carattere per l'ora | |
| time-style =[value] | "none" or "bold" or "italic" or "underline" | Lo stile per il tempo. Non è possibile utilizzare una combinazione di stili. | |
| time-align=[value] | "left" or "center" or "right" | L'allineamento per il tempo | |
| bgcolor=[value] | Colore esadecimale nel formato: #RRGGBB o #AARRGGBB | #00000000 | Il colore di sfondo della zona utilizzando numeri esadecimali. Utilizza la notazione #RRGGBB per i colori opachi o #AARRGGBB per definire il canale alfa per la trasparenza (FF: opaco, 00: completamente trasparente) |
Nota: bgcolor
Lo stile bgcolor viene applicato allo sfondo della zona. Se utilizzi la notazione AARRGGBB (con trasparenza), verrà applicata solo allo sfondo e non al testo del feed.
Formato data
- %a: il nome abbreviato del giorno della settimana in base alla locale corrente.
- %A: il nome completo del giorno della settimana in base alla locale corrente
- %b: il nome del mese abbreviato in base alla locale corrente.
- %B: il nome completo del mese in base alla locale corrente
- %c: la data e l'ora preferite per la locale corrente
- %C: il numero del secolo (anno/100) come numero intero a 2 cifre
- %d: il giorno del mese come numero decimale (intervallo da 01 a 31)
- %D: equivalente a "%m/%d/%y"
- %e: come %d, il giorno del mese come numero decimale, ma lo zero iniziale è sostituito da uno spazio
- %F: Equivalente a %Y-%m-%d (formato data ISO 8601)
- %G: l'anno basato sulla settimana ISO 8601 (vedi NOTE) con il secolo come numero decimale. L'anno a 4 cifre corrispondente al numero della settimana ISO (vedi %V). Ha lo stesso formato e lo stesso valore di %Y, tranne per il fatto che se il numero della settimana ISO appartiene all'anno precedente o successivo, viene invece utilizzato quell'anno
- %g: Come %G, ma senza secolo, cioè con anno a 2 cifre (00-99)
- **%**H: l'ora come numero decimale utilizzando un orologio a 24 ore (intervallo da 00 a 23)
- %I: l'ora come numero decimale utilizzando un orologio a 12 ore (intervallo da 01 a 12)
- %j: il giorno dell'anno come numero decimale (intervallo da 001 a 366)
- %k: l'ora (formato 24 ore) come numero decimale (intervallo da 0 a 23); le singole cifre sono precedute da uno spazio.
- %l: L'ora (formato 12 ore) come numero decimale (intervallo da 1 a 12); le singole cifre sono precedute da uno spazio.
- %m: il mese come numero decimale (intervallo da 01 a 12)
- %M: Il minuto come numero decimale (intervallo da 00 a 59)
- %p: "AM" o "PM" in base al valore dell'ora specificato o le stringhe corrispondenti per la locale corrente. Mezzogiorno viene trattato come "PM" e mezzanotte come "AM"
- %P: come %p ma in minuscolo: "am" o "pm" o una stringa corrispondente per la locale corrente
- %r: l'ora in am o p.m. notazione. Nella locale POSIX questo è equivalente a %I:%M:%S %p
- %R: l'ora in formato 24 ore (%H:%M)
- %s:Il numero di secondi dall'Epoch, 1970-01-01 00:00:00+0000 (UTC)
- %S: il secondo come numero decimale (intervallo da 00 a 60). (L'intervallo è fino a 60 per consentire occasionali secondi intercalari.)
- %T: l'ora in formato 24 ore (%H:%M:%S)
- %u: il giorno della settimana come decimale, intervallo da 1 a 7, lunedì è 1
- %w: iIl giorno della settimana come decimale, intervallo da 0 a 6, dove domenica è 0
- %W: il numero della settimana dell'anno corrente come numero decimale, intervallo da 00 a 53, a partire dal primo lunedì come primo giorno della settimana 01
- %x: la rappresentazione della data preferita per la locale corrente senza l'ora
- %X: la rappresentazione dell'ora preferita per la locale corrente senza la data
- %y: l'anno come numero decimale senza secolo (intervallo da 00 a 99)
- %Y: L'anno come numero decimale compreso il secolo
- %z: il fuso orario numerico +hhmm o -hhmm (ovvero, la differenza di ora e minuti dall'UTC)
- %Z: il nome o l'abbreviazione del fuso orario
- %q: solo con ticker, visualizza “Oggi”,”Ieri ","%Y-%m-%d” calcolato tra la data della notizia e la data corrente sul player.
Esempio
se il timestamp è 2010-01-01 12:00:00
- "%Y-%m-%D" => "2010-01-01"
- "%H:%M:%S" => "12:00:00"
- “%R” => “12:00”
- "Oggi %A %d %B %Y" => "Oggi venerdì 01 gennaio 2010"
- “Ora %H.%M” => “Ora 12.00”
Example in Layout SVG
<rect stroke=”#000000″ fill=”#FF0000″ stroke-width=”5″ stroke-dasharray=”null” stroke-linejoin=”null” stroke-linecap=”null” x=”1213.71914″ y=”74.40741″ width=”155.41665″ height=”60″ id=”Time” xpzone:zonetype=”Datetime” xpzone:style=”time-format=%H:%M;time-font=1;time-color=#ffffff;time-font=Arial;time-size=36;time-style=bold“/>