- 15 Nov 2024
- 10 Minutes to read
- Print
Specify spot information
- Updated on 15 Nov 2024
- 10 Minutes to read
- Print
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:
|
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:
|
DynamicResolution | Optional | Object | Specify the height and width of the wizard spot. You can’t use this option together with PossibleResolutions. Example:
|
Elements
Setting | Field | Data | Description |
---|---|---|---|
Id | Mandatory | String | Specify a unique ID for the element. Example: "Id": "myUniqueElementId" |
DisplayName | Mandatory |
| 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 |
| 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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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.
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:
|
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:
|
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. |
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
}
}