Specify spot information
  • 15 Nov 2024
  • 10 Minutes to read

Specify spot information


Article summary

You can specify general spot information in the ascData.json file. To do so, add the relevant information in the following sections.

Document

Setting

Field

Data

Description

SpotIdentifier

Mandatory

String

Specify a spot identifier to verify that this is the correct spot when replacing the spot in the IXM Platform.

SpotVersion

Mandatory

String

Specify the current version of the spot or JSON structure.

ApiVersion

Mandatory

Integer

Specify your API version. 

The API version must match the IXM Platform version to ensure the functionality of the widget. 

If the API version and the IXM Platform version are not compatible, you'll see a warning when you upload the spot that the correct display of the spot can't be guaranteed.

Width

Optional

Integer

Specify the height of the spot. 

We recommended that you specify the target resolution so that the spot is displayed correctly everywhere.

If you can enter 0 or leave the value blank, the spot must scale itself.

Height

Optional

Integer

Specify the width of the spot. 

We recommended that you specify the target resolution so that the spot is displayed correctly everywhere.

If you can enter 0 or leave the value blank, the spot must scale itself.

BackgroundColor

Optional

String

Specify a background color for the display of the spot.

If you leave the value blank, the IXM Platform uses the playlist color as the background color during the playback of the spot. 

If you define a custom background in the spot, it will overlay the background that you set here.

{
	"Content": {},
	"Document": {
		"SpotIdentifier": "SampleSpot",
		"SpotVersion": "1.0.0",
		"ApiVersion": 5,
		"Width": 1920,
		"Height": 1080,
		"BackgroundColor": "#00838F"
      	}
}

Options

Setting

Field

Data

Description

PossibleResolutions

Optional

Array

Specify an optional list of resolutions that a spot can have. Note that the spot must support these resolutions.

You can’t use this option together with DynamicResolution.

Example:

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

EnablePlayerSelection

Optional

Boolean

Use this option to enable player selection in the HTML Wizard.

Example: "EnablePlayerSelection": true

DisableBackgroundColor

Optional

Boolean

Use this option to disable setting a background color in the HTML Wizard.

Example: "DisableBackgroundColor": true

UseSingleElementUpdate

Optional

Boolean

Use this option to react to changes in a single element and iwithout rebuilding the entire spot.

If this option is enabled, you don’t have to register an event handler for every element. If there is no SingleElementDataChanged handler for an element, the global DataChanged handler is triggered as usual.

Example: "UseSingleElementUpdate": true

Registration in the spot:

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

...

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

DynamicResolution

Optional

Object

Specify the height and width of the wizard spot.

You can’t use this option together with PossibleResolutions.

Example:

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

Elements

Setting

Field

Data

Description

Id

Mandatory

String

Specify a unique ID for the element.

Example: "Id": "myUniqueElementId"

DisplayName

Mandatory


String

Specify the display name in the wizard.

Optionally, the display name can be translated in the translation node. In addition, it can be overwritten in the HTML Wizard.

DataType

Mandatory


String

Specify the type of element and by which ItemRenderer it is represented.

Example: "DataType": "group"

Translations

Optional

Object

Supply direct translations for the DisplayName. The language identifier must match those in the Grassfish IXM Platform such as de or en.

Example:

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

Description

Optional

String

Specify an additional description for all input elements in the form of a tooltip that can be translated via the Translations attribute.

Example:

"Description": "Eingabefeld.",
"Translations": {
  "en": {
    "Description": "Input field."
  }
}

Groups

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "group"

Elements

Mandatory

Array

Contains the sub-elements of the group but can also contain other groups.

Checkbox

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "boolean"

Value

Mandatory

Boolean

Example: "Value": false

Number selection

Number

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "number"

Value

Mandatory

Number

Example: "Value": 42

Options -> Minimum

Optional

Number

Specify the minimum value in the number selection.

Example: "Minimum": 1.0

Options -> Maximum

Optional

Number

Specify the maximum value in the number selection.

Example: "Maximum": 999

Options -> StepSize

Optional

Number

Specify the rounding value in the number selection.

Example: "StepSize": 0.1

Color selection

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "color"

Value

Mandatory

String

Specify a color in RGB hex format starting with a hash character. You can also use RGBA format if UseRGBA is enabled in the options.

Example: "Value": "#FF0000"

Options -> UseRGBA

Optional

Boolean

Use this option to use RGBA format such as rgba(72,70,189,0.64).

Example: "UseRGBA": true

Date

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "date"

Value

Mandatory

String

Specify a date in the following format: YYYY-MM-DDThh:mm:ss

Example: "Value": "2015-09-13T00:00:00"

Options -> MinDate

Optional

String

Specify the minimum date before which no date can be selected. You can leave it empty, specify a date string in the format in the format YYYY-MM-DDThh:mm:ss, or set Today for the current date.

Example: "MinDate": "Today"

Options -> MaxDate

Optional

String

Specify the maximum date after which no date can be selected. You can leave it empty, specify a date string in the format in the format YYYY-MM-DDThh:mm:ss, or set Today for the current date.

Example: "MaxDate": "Today"

Time

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "time"

Value

Mandatory

String

Use this as a time counter that displays the time.

Examples: "Value": "13:59:57" or "Value": "13:57"

Options -> WithSeconds

Optional

Boolean

Specify whether the time stepper is displayed with or without seconds.

Example: "WithSeconds": true

Dropdowns

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "list"

Items

Mandatory

Array

Example:

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

Value

Mandatory

Array

Saves the entry from the Items array in the non-translated version.

Example: "Value": "Horse"

Translations

Optional

Object

Specify translations for each value in Translations if there are dropdowns.

Example:

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

Options -> searchEnabled

Optional

Boolean

Use this option to make the dropdown in the HTML Composer searchable.

Example: "searchEnabled": true

Simple text inputs

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "simpleText"

Value

Mandatory

Array

Specify an array of objects that each have a text property in which text with no layout is saved.

Example:

"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

Specify how many instances of a text input a user can create. If the value is not set or set to 0 or 1, the user only sees a text box and can’t create other instances.

Example: "NumberOfInstances": 1

Options -> MultilineSize

Optional

Integer

Specify how large the text input is displayed. That is, how many lines it has. If this value is not set or is set to 0 or 1, it’s a single-line text input without a line break.

Example: "MultilineSize": 4

Options -> MaxChars

Optional

Integer

Specify how many characters the user can set. Excess text can’t be saved.

Example: "MaxChars": 120

Options -> Required

Optional

Boolean

Enforce that something must be entered in the text field.

Example: "Required": true

Options -> ValidationRegExp

Optional

String

Specify a regular expression that must be met to save the spot. In the event of an error the ValidationRegExpDescription is displayed, which can be translated in the translations. Note that backslashes must be specified twice.

Example: "ValidationRegExp": "[\\d]*"

Options -> ValidationRegExpDescription

Optional

String

Specify an error message for the regular expression. The message can be translated in translation.

Example: "ValidationRegExpDescription": "Only numbers are allowed here."

Link pictures from media management

Media

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "media"

Value

Mandatory

Array of objects

Specify an array of objects that contain media references. In addition, the element can contain clipping information which enables clipping of the medium.

Example:

"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 of strings

Specify which type of media can be selected from the media library. If you specify multiple values, they are linked with OR.

The following are valid values: Video, Picture, Mp3

Example: "RestrictedMediaTypeList": ["Picture"]

Options -> UseClipping

Optional

Object

Enable clipping in the HTML Wizard by specifying the resolution for pictures.

Example:

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

Options -> UseClipping -> LinkedToSpotResolution

Optional

Object

Use this option to link clipping of a medium with the resolution of the spot. This feature only makes sense, if you specify PossibleResolutions.

  • To enable the option, set Active to true.

  • To set the clipping window size to the resolution of the spot, set a width and height under Mappings.

You can set the clipping to an optional number of different sizes if the spot resolution changes with certain values. This is helpful when the clipping window has a different aspect ratio than the spot but should also be linked to the spot resolution. The values in Mappings must be identical with the width and height in PossibleResolutions (widthxheight).

Example:

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

Options -> NumberOfInstances

Optional

Integer

Specify how many instances of the media a user can create. If the value is not set or is set to 0 or 1, users can select only one medium and can’t create other instances of media. This feature is helpful, for example, when creating slideshows with dynamic length.

Example: "NumberOfInstances": 3

HTML text input

Setting

Field

Data

Description

Id, DisplayName

Mandatory

String

See Elements table

DataType

Mandatory

String

Example: "DataType": "htmlText"

Value

Mandatory

String

This value is set by the HTML editor component. It must be empty before uploading.

Example:

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

Options -> MultilineSize

Optional

Integer

Specify how large the text input is displayed. That is, how many lines it has. If this value is not or set to 0 or 1, it is a single line text input without a line break.

Example: "MultilineSize": 4

Options -> MaxChars

Optional

Integer

Specify how many characters this user is allowed to set. Excess text cannot be saved.

Example: "MaxChars": 120

Options -> UseFontFromFontList

Optional

Boolean

Specify that the server can use fonts. The fonts are automatically transferred to the player.

Example: "UseFontFromFontList": true

Options -> ValidationRegExp

Optional

String

Specify a regular expression that must be met to save the spot. In the event of an error the ValidationRegExpDescription is displayed, which can be translated in Translations. Note that backslashes must be specified twice.

Example: "ValidationRegExp": "[\\d]*"

Options -> ValidationRegExpDescription

Optional

String

Specify the error message for the regular expression. The message can be translated in Translations.

Example: "ValidationRegExpDescription": "Only numbers are allowed here."

Options -> BackgroundColor

Optional

String

Specify a color to tone the background of the HTML text input.

Example: "FontColor": "#F7F700"

Options -> FontColor

Optional

String

Specify a font color that is initially used for the HTML text input.

Example: "FontColor": "#800080"

Options -> HideTextInput

Optional

Boolean

Use this option to hide the text entry box in the HTML Wizard.

Example: "HideTextInput": true

Options -> HideSizeInput

Optional

Boolean

Use this option to hide the parameters for editing the font size.

Example: "HideSizeInput": true

Options -> HideColorInput

Optional

Boolean

Use this option to hide the parameters for changing the font color.

Example: "HideColorInput": true

Options -> HideLineHeightInput

Optional

Boolean

Use this option to hide the parameters for changing the line height.

Example: "HideLineHeightInput": true

Options -> HideLetterSpacingInput

Optional

Boolean

Use this option to hide the parameters for editing letter spacing.

Example: "HideLetterSpacingInput": true

Options -> HidePaddingInput

Optional

Boolean

Use this option to hide the parameters for editing the padding.

Example: "HidePaddingInput": true

Options -> HideBoldInput

Optional

Boolean

Use this option to hide the parameters for editing the font weight.

Example: "HideBoldInput": true

Options -> HideItalicInput

Optional

Boolean

Use this option to hide the parameters for editing the font style.

Example: "HideItalicInput": true

Options -> HideUnderlineInput

Optional

Boolean

Use this option to hide the parameters for underlining.

Example: "HideUnderlineInput": true

Options -> DefaultFontFamily

Optional

String

Specify the default font. The value corresponds to the font family that you specify in the font management. If this option is not set, the first font in the dropdown menu is selected automatically.

Example: "DefaultFontFamily": "Open Sans"

Fonts

To design your spots, you can use fonts from the global font management and media from the media management.

You must add fonts that users select in the IXM Platform under htmlText elements to the spot document. To do so, use the function insertFontListCss which is available in the WizardBase. This function should be invoked when htmlText elements are used.

gfWizardBase.insertFontListCss(ascData, returnFunction);

Function

Adds the CSS styles to the fonts used in the ‚htmlText‘ elements to the document of the spot.

Parameter

ascData [optional]: can be used to manually transfer the ascData from which the font information is taken. Is not required in most cases.

returnFunction [optional]: is requested as soon as all fonts are loaded. It’s also requested when fonts couldn’t be loaded, for example, because the browser doesn’t support the font.

Examples

gfWizardBase.insertFontListCss(ascData, returnFunction);

WebFont

To ensure that the spot only shows data when the fonts are loaded, include the library WebFont.

The WizardBase uses this library to add the fonts. The returnFunction is only requested after it is loaded. If the library is not available, the CSS files are immediately attached to the document and the returnFunction is invoked.

Without this library, it’s possible that text is briefly displayed without the correct font.

Source: https://github.com/typekit/webfontloader

WizardBase Version

Before version 2.0.1.0, the function was invoked without parameters.

As of version 2.0.1.0, the parameters ascData and returnFunction are available as options.

Player

Windows/Linux, Android

Content

Don’t edit the content node and ensure that it’s empty before uploading. The HTML Wizard sets references to the used fonts and media and saves them here.

Setting

Field

Data

Description

Content->FontList

Optional

Array of objects

Fonts used in HTML text inputs, if UseFontFromFontList has been set to true.

Content->MediaList

Optional

Array of objects

Specifies media used, which is referenced in media elements.

Content->MainMedia

Optional

Object

The reference to the index.html of the website spot. It is determined upon upload.

Prior to the upload, content is empty:

"Content": {}

For testing, you can enter values in the following way:

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


Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.