Sie können allgemeine Spotinformationen in der Datei ascData.json angeben. Ergänzen Sie dazu die entsprechenden Informationen in den folgenden Abschnitten.
Document
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
SpotIdentifier | Obligatorisch | String | Geben Sie eine Spot-ID an, um zu überprüfen, ob es sich um den richtigen Spot handelt, wenn Sie den Spot in der IXM Plattform ersetzen. |
SpotVersion | Obligatorisch | String | Geben Sie die aktuelle Version der Spot- oder JSON-Struktur an. |
ApiVersion | Obligatorisch | Integer | Geben Sie Ihre API-Version an. Die API-Version muss mit der IXM Plattformversion übereinstimmen, um die Funktionalität des Widgets sicherzustellen. Wenn die API-Version und die IXM Plattformversion nicht kompatibel sind, wird beim Hochladen des Spots eine Warnung angezeigt, dass die korrekte Anzeige des Spots nicht garantiert werden kann. |
Width | Optional | Integer | Geben Sie die Höhe des Spots an. Wir empfehlen Ihnen, die Zielauflösung anzugeben, damit der Spot überall korrekt angezeigt wird. Wenn Sie 0 eingeben oder den Value leer lassen können, muss sich der Spot selbst skalieren. |
Height | Optional | Integer | Geben Sie die Breite des Spots an. Wir empfehlen Ihnen, die Zielauflösung anzugeben, damit der Spot überall korrekt angezeigt wird. Wenn Sie 0 eingeben oder den Value leer lassen können, muss sich der Spot selbst skalieren. |
BackgroundColor | Optional | String | Geben Sie eine Hintergrundfarbe für die Anzeige des Spots an. Wenn Sie den Value leer lassen, verwendet die IXM Plattform die Playlist-Farbe als Hintergrundfarbe während der Wiedergabe des Spots. Wenn Sie im Spot einen benutzerdefinierten Hintergrund definieren, überlagert dieser den Hintergrund, den Sie hier festlegen. |
{
"Content": {},
"Document": {
"SpotIdentifier": "SampleSpot",
"SpotVersion": "1.0.0",
"ApiVersion": 5,
"Width": 1920,
"Height": 1080,
"BackgroundColor": "#00838F"
}
}
Options
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
PossibleResolutions | Optional | Array | Geben Sie eine optionale Liste der Auflösungen an, die ein Spot haben kann. Beachten Sie, dass der Spot diese Auflösungen unterstützen muss. Sie können diese Option nicht zusammen mit DynamicResolution verwenden. Beispiel:
|
EnablePlayerSelection | Optional | Boolean | Verwenden Sie diese Option, um die Spielerauswahl im HTML Wizarden zu aktivieren. Beispiel: „EnablePlayerSelection“: true |
DisableBackgroundColor | Optional | Boolean | Mit dieser Option können Sie die Einstellung einer Hintergrundfarbe im HTML Wizarden deaktivieren. Beispiel: „DisableBackgroundColor“: true |
UseSingleElementUpdate | Optional | Boolean | Verwenden Sie diese Option, um auf Änderungen in einem einzelnen Element zu reagieren, ohne den gesamten Spot neu erstellen zu müssen. Wenn diese Option aktiviert ist, müssen Sie nicht für jedes Element einen Event-Handler registrieren. Wenn für ein Element kein SingleElementDataChanged-Handler vorhanden ist, wird wie gewohnt der globale DataChanged-Handler ausgelöst. Beispiel: „UseSingleElementUpdate“: true Registrierung im Spot:
|
DynamicResolution | Optional | Objekt | Geben Sie die Höhe und Breite des Wizard-Spots an. Sie können diese Option nicht zusammen mit „Mögliche Auflösungen“ verwenden. Beispiel:
|
Elements
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id | Obligatorisch | String | Geben Sie eine eindeutige ID für das Element an. Beispiel: „Id“: „myUniqueElementId“ |
DisplayName | Obligatorisch |
| Geben Sie den Anzeigenamen im Assistenten an. Optional kann der Anzeigename im Übersetzungsknoten übersetzt werden. Darüber hinaus kann es im HTML Wizarden überschrieben werden. |
DataType | Obligatorisch |
| Geben Sie den Typ des Elements und den ItemRenderer an, durch den es dargestellt wird. Beispiel: „DataType“: „group“ |
Translations | Optional | Objekt | Geben Sie direkte Übersetzungen für den DisplayName an. Die Sprachkennung muss mit denen in der Grassfish IXM Plattform übereinstimmen, z. B. de oder en. Beispiel:
|
Beschreibung | Optional | String | Geben Sie für alle Eingabeelemente eine zusätzliche Beschreibung in Form eines Tooltips an, der über das Translations-Attribut übersetzt werden kann. Beispiel:
|
Groups
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "group" |
Elements | Obligatorisch | Array | Enthält die Unterelemente der Gruppe, kann aber auch andere Gruppen enthalten. |
Checkbox
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "boolean" |
Value | Obligatorisch | Boolean | Beispiel: "Value": false |
Number selection
Number | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "number" |
Value | Obligatorisch | Number | Beispiel: "Value": 42 |
Options -> Minimum | Optional | Number | Geben Sie den MindestValue in der Zahlenauswahl an. Beispiel: „Minimum“: 1,0 |
Options -> Maximum | Optional | Number | Geben Sie bei der Zahlenauswahl den MaximalValue an. Beispiel: „Maximum“: 999 |
Options -> StepSize | Optional | Number | Geben Sie den RundungsValue in der Zahlenauswahl an. Beispiel: „StepSize“: 0.1 |
Color selection
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "color" |
Value | Obligatorisch | String | Geben Sie eine Farbe im RGB-Hex-Format an, beginnend mit einem Hash-Zeichen. Sie können auch das RGBA-Format verwenden, wenn UseRGBA in den Optionen aktiviert ist. Beispiel: „Value“: „#FF0000“ |
Options -> UseRGBA | Optional | Boolean | Verwenden Sie diese Option, um das RGBA-Format wie rgba(72,70,189,0.64) zu verwenden. Beispiel: „UseRGBA“: true |
Date
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "date" |
Value | Obligatorisch | String | Geben Sie ein Datum im folgenden Format an: JJJJ-MM-TTThh:mm:ss Beispiel: „Value“: „2015-09-13T00:00:00“ |
Options -> MinDate | Optional | String | Geben Sie das Mindestdatum an, vor dem kein Datum ausgewählt werden kann. Sie können es leer lassen, eine Datumszeichenfolge im Format JJJJ-MM-TTThh:mm:ss angeben oder Heute als aktuelles Datum festlegen. Beispiel: „MinDate“: „Heute“ |
Options -> MaxDate | Optional | String | Geben Sie das maximale Datum an, nach dem kein Datum mehr ausgewählt werden kann. Sie können es leer lassen, eine Datumszeichenfolge im Format JJJJ-MM-TTThh:mm:ss angeben oder Today als aktuelles Datum festlegen. Beispiel: „MaxDate“: „Today“ |
Time
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "time" |
Value | Obligatorisch | String | Verwenden Sie dies als Zeitzähler, der die Uhrzeit anzeigt. Beispiele: „Value“: „13:59:57“ oder „Value“: „13:57“ |
Options -> WithSeconds | Optional | Boolean | Legen Sie fest, ob der Zeitschrittzähler mit oder ohne Sekunden angezeigt wird. Beispiel: „WithSeconds“: true |
Dropdowns
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "list" |
Items | Obligatorisch | Array | Beispiel:
|
Value | Obligatorisch | Array | Speichert den Eintrag aus dem Items-Array in der nicht übersetzten Version. Beispiel: "Value": "Horse" |
Translations | Optional | Objekt | Geben Sie Übersetzungen für jeden Wert in Translations an, wenn Dropdown-Listen vorhanden sind. Beispiel:
|
Options -> searchEnabled | Optional | Boolean | Verwenden Sie diese Option, um das Dropdown-Menü im HTML Composer durchsuchbar zu machen. Beispiel: "searchEnabled": true |
Simple text inputs
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "simpleText" |
Value | Obligatorisch | Array | Geben Sie ein Array von Objekten an, die jeweils über eine Texteigenschaft verfügen, in der Text ohne Layout gespeichert wird. Beispiel:
|
Options -> NumberOfInstances | Optional | Integer | Geben Sie an, wie viele Instanzen einer Texteingabe ein Benutzer erstellen kann. Wenn der Wert nicht oder auf 0 oder 1 gesetzt ist, sieht der Benutzer nur ein Textfeld und kann keine weiteren Instanzen erstellen. Beispiel: „NumberOfInstances“: 1 |
Options -> MultilineSize | Optional | Integer | Geben Sie an, wie groß die Texteingabe angezeigt wird. Das heißt, wie viele Zeilen es hat. Wenn dieser Wert nicht gesetzt ist oder auf 0 oder 1 gesetzt ist, handelt es sich um eine einzeilige Texteingabe ohne Zeilenumbruch. Beispiel: "MultilineSize": 4 |
Options -> MaxChars | Optional | Integer | Geben Sie an, wie viele Zeichen der Benutzer festlegen kann. Überschüssiger Text kann nicht gespeichert werden. Beispiel: „MaxChars“: 120 |
Options -> Required | Optional | Boolean | Erzwingen Sie, dass etwas in das Textfeld eingegeben werden muss. Beispiel: „Erforderlich“: true |
Options -> ValidationRegExp | Optional | String | Geben Sie einen regulären Ausdruck an, der erfüllt sein muss, um die Stelle zu speichern. Im Fehlerfall wird die ValidationRegExpBeschreibung angezeigt, die in den Übersetzungen übersetzt werden kann. Beachten Sie, dass Backslashes zweimal angegeben werden müssen. Beispiel: "ValidationRegExp": "[\\d]*" |
Options -> ValidationRegExpBeschreibung | Optional | String | Geben Sie eine Fehlermeldung für den regulären Ausdruck an. Die Nachricht kann in Übersetzung übersetzt werden. Beispiel: „ValidationRegExpBeschreibung“: „Hier sind nur Zahlen erlaubt.“ |
Link pictures from media management
Media | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "media" |
Value | Obligatorisch | Array von Objekten | Geben Sie ein Array von Objekten an, die Medienverweise enthalten. Darüber hinaus kann das Element Beschneidungsinformationen enthalten, die das Beschneiden des Mediums ermöglichen. Beispiel:
|
Options -> RestrictedMediaTypeList | Optional | Array von Strings | Geben Sie an, welcher Medientyp aus der Medienbibliothek ausgewählt werden kann. Wenn Sie mehrere Werte angeben, werden diese mit ODER verknüpft. Gültige Werte sind: Video, Bild, MP3 Beispiel: "RestrictedMediaTypeList": ["Picture"] |
Options -> UseClipping | Optional | Objekt | Aktivieren Sie das Ausschneiden im HTML Wizard, indem Sie die Auflösung für Bilder festlegen. Beispiel:
|
Options -> UseClipping -> LinkedToSpotResolution | Optional | Objekt | Verwenden Sie diese Option, um den Ausschnitt eines Mediums mit der Auflösung des Spots zu verknüpfen. Diese Funktion ist nur sinnvoll, wenn Sie PossibleResolutions angeben. Um die Option zu aktivieren, setzen Sie Active auf true. Um die Größe des Zuschneidefensters an die Auflösung des Spots anzupassen, legen Sie unter Mappings eine Breite und Höhe fest. Sie können den Ausschnitt auf eine beliebige Anzahl unterschiedlicher Größen einstellen, wenn sich die Punktauflösung mit bestimmten Werten ändert. Dies ist hilfreich, wenn das Clipping-Fenster ein anderes Seitenverhältnis als der Spot hat, aber auch mit der Spot-Auflösung verknüpft sein soll. Die Werte in Mappings müssen mit der Breite und Höhe in PossibleResolutions (widthxheight) identisch sein. Beispiel:
|
Options -> NumberOfInstances | Optional | Integer | Geben Sie an, wie viele Instanzen des Mediums ein Benutzer erstellen kann. Wenn der Wert nicht festgelegt ist oder auf 0 oder 1 festgelegt ist, können Benutzer nur ein Medium auswählen und keine anderen Medieninstanzen erstellen. Diese Funktion ist beispielsweise hilfreich, wenn Sie Diashows mit dynamischer Länge erstellen. Beispiel: "NumberOfInstances": 3 |
HTML text input
Einstellung | Feld | Daten | Beschreibung |
---|---|---|---|
Id, DisplayName | Obligatorisch | String | Siehe Elements Tabelle |
DataType | Obligatorisch | String | Beispiel: "DataType": "htmlText" |
Value | Obligatorisch | String | Dieser Wert wird von der HTML Editor-Komponente festgelegt. Es muss vor dem Hochladen leer sein. Beispiel:
|
Options -> MultilineSize | Optional | Integer | Geben Sie an, wie groß die Texteingabe angezeigt wird. Das heißt, wie viele Zeilen es hat. Ist dieser Wert nicht oder auf 0 oder 1 gesetzt, handelt es sich um eine einzeilige Texteingabe ohne Zeilenumbruch. Beispiel: "MultilineSize": 4 |
Options -> MaxChars | Optional | Integer | Geben Sie an, wie viele Zeichen dieser Benutzer festlegen darf. Überschüssiger Text kann nicht gespeichert werden. Beispiel: „MaxChars“: 120 |
Options -> UseFontFromFontList | Optional | Boolean | Geben Sie an, dass der Server Schriftarten verwenden kann. Die Schriftarten werden automatisch auf den Player übertragen. Beispiel: „UseFontFromFontList“: true |
Options -> ValidationRegExp | Optional | String | Geben Sie einen regulären Ausdruck an, der erfüllt sein muss, um die Stelle zu speichern. Im Fehlerfall wird die ValidationRegExpBeschreibung angezeigt, die in Übersetzungen übersetzt werden kann. Beachten Sie, dass Backslashes zweimal angegeben werden müssen. Beispiel: "ValidationRegExp": "[\\d]*" |
Options -> ValidationRegExpBeschreibung | Optional | String | Geben Sie die Fehlermeldung für den regulären Ausdruck an. Die Nachricht kann in Übersetzungen übersetzt werden. Beispiel: „ValidationRegExpBeschreibung“: „Hier sind nur Zahlen erlaubt.“ |
Options -> BackgroundColor | Optional | String | Geben Sie eine Farbe an, um den Hintergrund der HTML-Texteingabe zu tönen. Beispiel: „FontColor“: „#F7F700“ |
Options -> FontColor | Optional | String | Geben Sie eine Schriftfarbe an, die zunächst für die HTML-Texteingabe verwendet wird. Beispiel: „FontColor“: „#800080“ |
Options -> HideTextInput | Optional | Boolean | Mit dieser Option können Sie das Texteingabefeld im HTML Wizarden ausblenden. Beispiel: „HideTextInput“: true |
Options -> HideSizeInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Bearbeiten der Schriftgröße ausblenden. Beispiel: „HideSizeInput“: true |
Options -> HideColorInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Ändern der Schriftfarbe ausblenden. Beispiel: „HideColorInput“: true |
Options -> HideLineHeightInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Ändern der Zeilenhöhe ausblenden. Beispiel: „HideLineHeightInput“: true |
Options -> HideLetterSpacingInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Bearbeiten des Buchstabenabstands ausblenden. Beispiel: „HideLetterSpacingInput“: true |
Options -> HidePaddingInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Bearbeiten der Polsterung ausblenden. Beispiel: „HidePaddingInput“: true |
Options -> HideBoldInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Bearbeiten der Schriftstärke ausblenden. Beispiel: „HideBoldInput“: true |
Options -> HideItalicInput | Optional | Boolean | Mit dieser Option können Sie die Parameter zum Bearbeiten des Schriftstils ausblenden. Beispiel: „HideItalicInput“: true |
Options -> HideUnderlineInput | Optional | Boolean | Mit dieser Option können Sie die Parameter für die Unterstreichung ausblenden. Beispiel: „HideUnderlineInput“: true |
Options -> DefaultFontFamily | Optional | String | Geben Sie die Standardschriftart an. Der Wert entspricht der Schriftfamilie, die Sie in der Schriftverwaltung angeben. Wenn diese Option nicht gesetzt ist, wird automatisch die erste Schriftart im Dropdown-Menü ausgewählt. Beispiel: „DefaultFontFamily“: „Open Sans“ |
Fonts
Zur Gestaltung Ihrer Spots können Sie Schriftarten aus der globalen Schriftartenverwaltung und Medien aus der Medienverwaltung verwenden.
Sie müssen dem Spot-Dokument Schriftarten hinzufügen, die Benutzer in der IXM Plattform unter htmlTextelementes auswählen. Verwenden Sie dazu die Funktion insertFontListCss, die in der WizardBase verfügbar ist. Diese Funktion sollte aufgerufen werden, wenn htmlTextelements verwendet werden.
gfWizardBase.insertFontListCss(ascData, returnFunction);
Function | Fügt die CSS-Stile zu den Schriftarten hinzu, die in den ‚htmlText‘-Elementen zum Dokument des Spots verwendet werden. | ||
Parameter | ascData [optional]: kann zur manuellen Übergabe der ascData verwendet werden, aus denen die Font-Informationen entnommen werden. Ist in den meisten Fällen nicht erforderlich. returnFunction [optional]: wird angefordert, sobald alle Schriftarten geladen sind. Dies wird auch dann abgefragt, wenn Schriftarten nicht geladen werden konnten, beispielsweise weil der Browser die Schriftart nicht unterstützt. | ||
Beispiels | gfWizardBase.insertFontListCss(ascData, returnFunction); | ||
WebFont | Um sicherzustellen, dass der Spot nur Data anzeigt, wenn die Schriftarten geladen sind, schließen Sie die Bibliothek WebFont ein. Die WizardBase verwendet diese Bibliothek, um die Schriftarten hinzuzufügen. Die returnFunction wird erst nach dem Laden angefordert. Wenn die Bibliothek nicht verfügbar ist, werden die CSS-Dateien sofort an das Dokument angehängt und die returnFunction aufgerufen. Ohne diese Bibliothek kann es sein, dass Text kurzzeitig ohne die richtige Schriftart angezeigt wird. Quelle: https://github.com/typekit/webfontloader | ||
WizardBase Version | Vor Version 2.0.1.0 wurde die Funktion ohne Parameter aufgerufen. Ab Version 2.0.1.0 stehen die Parameter ascData und returnFunction als Optionen zur Verfügung. | ||
Player | Windows/Linux, Android |
Content
Bearbeiten Sie den Inhaltsknoten nicht und stellen Sie vor dem Hochladen sicher, dass er leer ist. Der HTML Wizard setzt Referenzen auf die verwendeten Schriftarten und Medien und speichert diese hier.
Einstellung | Feld | Data | Beschreibung |
Content->FontList | Optional | Array von Objekten | In HTML-Texteingaben verwendete Schriftarten, wenn UseFontFromFontList auf true gesetzt wurde. |
Content->MediaList | Optional | Array von Objekten | Gibt die verwendeten Medien an, auf die in Medienelementen verwiesen wird. |
Content->MainMedia | Optional | Objekt | Der Verweis auf die index.html des Website-Spots. Sie wird beim Hochladen festgelegt. |
Vor dem Hochladen ist der Inhalt leer:
"Content": {}
Zum Testen können Sie Werte folgendermaßen eingeben:
"Content": {
"FontList": [
{
"SpotId": 11,
"FileName": "SampleFont.zip",
"FullFilePath": "./fonts/FantasqueSansMono/style.css"
}
],
"MediaList": [
{
"SpotId": 1,
"FullFilePath": "./media/1_picture.jpg",
"FileName": "1_picture.jpg",
"MediaType": "Picture",
"Width": 640,
"Height": 480
},
"MainMedia": {
"FileName": "DemoSpot",
"FullFilePath": "",
"MediaType": "Html",
"SpotId": 13
}
}