Spotinformation angeben

Prev Next

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:

"PossibleResolutions": [
  {
    "Width": 1920,
    "Height": 1080
  },
  {
    "Width": 1080,
    "Height": 1920
  }
]

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:

gfWizardBase.registerSingleElementDataChanged
Handler("myElement", myElementUpdatedFunction);

...

function myElementUpdatedFunction(element)
{
//change the value of the single element
}

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:

"DynamicResolution": {
  "Active": true, 
  "MinWidth": 400, 
  "MaxWidth": 2000,
  "MinHeight": 300,
  "MaxHeight": 3000
}

Elements

Einstellung

Feld

Daten

Beschreibung

Id

Obligatorisch

String

Geben Sie eine eindeutige ID für das Element an.

Beispiel: „Id“: „myUniqueElementId“

DisplayName

Obligatorisch


String

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


String

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:

"Translations": {
  "de": {
    "DisplayName": "Beispiel name"
  }
}

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:

"Beschreibung": "Eingabefeld.",
"Translations": {
  "en": {
    "Beschreibung": "Input Feld."
  }
}

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:

"Items": [
"Cow",
"Horse",
"Sloth"
]

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:

"Translations": {
"de": {
"DisplayName": "Irgendein Listeintrag2",
"Cow": "Kuh",
"Horse": "Pferd",
"Sloth": "Faultier"
}
}

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:

"Value": [
{
"SpotId": 1,
"Clipping": {
"Width": 533,
"Height": 300,
"X": -200,
      "Y": -500
},
{
"SpotId": 2,
"Clipping": {
"Width": 1920,
"Height": 1080,
"X": 0,
      "Y": 0
},
{
"SpotId": 2,
}
]

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:

"Value": [
{
"SpotId": 1,
"Clipping": {
"Width": 533,
"Height": 300,
"X": -200,
      "Y": -500
},
{
"SpotId": 2,
"Clipping": {
"Width": 1920,
"Height": 1080,
"X": 0,
      "Y": 0
},
{
"SpotId": 2,
}
]

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:

"UseClipping": {
  "Width": 400,
  "Height": 300
} 

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:

"UseClipping": {
  "Width": 400,
  "Height": 300,
  "LinkedToSpotResolution": {
    "Active": true,
    "Mappings": {
      "1920x1080": {
        "Width": 400,
        "Height": 300
      },
      "1080x1920": {
        "Width": 200,
        "Height": 600
      }
    }
  }
}

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:

"Value": "<div style=\"letter-spacing: 0px; 
font-family: Arial';font-size: 20px;\">
The new <b>html texteditor</b> </div>"

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
    }
}