Difference between revisions of "Content Item Object"

From MSX - Wiki
Jump to navigation Jump to search
(42 intermediate revisions by the same user not shown)
Line 26: Line 26:
 
     "alignment": "left",
 
     "alignment": "left",
 
     "truncation": "headline",
 
     "truncation": "headline",
 +
    "centration": "text",
 
     "tag": "Item Tag",
 
     "tag": "Item Tag",
 
     "tagColor": "msx-red",
 
     "tagColor": "msx-red",
 
     "badge": "Item Badge",
 
     "badge": "Item Badge",
 
     "badgeColor": "msx-green",
 
     "badgeColor": "msx-green",
 +
    "stamp": "Item Stamp",
 +
    "stampColor": "msx-yellow",
 
     "progress": -1,
 
     "progress": -1,
−
     "progressColor": "msx-yellow",
+
     "progressColor": "msx-blue",
−
     "wrapperColor": "msx-blue",
+
     "wrapperColor": "msx-gray",
 
     "image": "http://link.to.image",
 
     "image": "http://link.to.image",
 
     "imageFiller": "default",
 
     "imageFiller": "default",
Line 42: Line 45:
 
     "imageColor": "msx-black",
 
     "imageColor": "msx-black",
 
     "imageScreenFiller": "fit",       
 
     "imageScreenFiller": "fit",       
 +
    "imageBoundary": false,
 
     "playerLabel": "Player Label",
 
     "playerLabel": "Player Label",
 
     "background": "http://link.to.image",     
 
     "background": "http://link.to.image",     
Line 61: Line 65:
 
|-
 
|-
 
| <code>id</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>id</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
−
The ID of the content item. This property can be used to identify the item. The ID must be unique and only consist of letters, numbers, and the special characters <code>"_"</code>, <code>"-"</code>, <code>"."</code>.
+
The ID of the content item. This property can be used to identify the item. The ID must be unique for the content data and only consist of letters, numbers, and the special characters <code>"_"</code>, <code>"-"</code>, <code>"."</code>.
 
|-
 
|-
 
| <code>type</code> || <code>string</code> || <code>"default"</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>type</code> || <code>string</code> || <code>"default"</code> || No || data-sort-value=0|0.1.0 ||  
Line 69: Line 73:
 
* <code>"teaser"</code>: Teaser items are similar to <code>"default"</code> items, but they have a larger title.
 
* <code>"teaser"</code>: Teaser items are similar to <code>"default"</code> items, but they have a larger title.
 
* <code>"button"</code>: Button items have a frame and a transparent background color. The <code>icon</code> and <code>label</code> properties are typically used with this type.
 
* <code>"button"</code>: Button items have a frame and a transparent background color. The <code>icon</code> and <code>label</code> properties are typically used with this type.
−
* <code>"separate"</code>: Separate items have seperated titles.
+
* <code>"separate"</code>: Separate items have separated titles.
 
* <code>"space"</code>: Space items are not selectable and can be used to add background or foreground items.
 
* <code>"space"</code>: Space items are not selectable and can be used to add background or foreground items.
 
* <code>"control"</code>: Control items are similar to <code>"button"</code> items and mainly designed for internal purposes (e.g. they are used in context menus and settings). The <code>icon</code> and <code>label</code> properties are typically used with this type. Additionally, the <code>extensionLabel</code> and <code>extensionIcon</code> properties are available for this type.
 
* <code>"control"</code>: Control items are similar to <code>"button"</code> items and mainly designed for internal purposes (e.g. they are used in context menus and settings). The <code>icon</code> and <code>label</code> properties are typically used with this type. Additionally, the <code>extensionLabel</code> and <code>extensionIcon</code> properties are available for this type.
  
−
'''Note: Please note that a content page must have at least one selectable item in order to be displayed (e.g. a content page that only contains items of type <code>"space"</code>, cannot be displayed).'''
+
'''Note: Please note that a content page must have at least one selectable item in order to be displayed (e.g. a content page that only contains items of type <code>"space"</code>, cannot be displayed). This does not apply to a content page that is displayed as overlay/underlay page, because such kind of page can only contain items of type <code>"space"</code>.'''
 
|-
 
|-
 
| <code>key</code> || <code>string</code> || <code>null</code> || No || data-sort-value=97|'''0.1.97''' ||  
 
| <code>key</code> || <code>string</code> || <code>null</code> || No || data-sort-value=97|'''0.1.97''' ||  
−
The key that is used to assign a keyboard key to the content item action. This property is part of the hidden features. For more information, please see [[Key Property]].
+
The key that is used to assign a keyboard key (or a remote control button) to the content item action. This property is part of the hidden features. For more information, please see [[Key Property]].
 
|-
 
|-
 
| <code>layout</code> || <code>string</code> || <code>null</code> || '''Only for the template object and non-templated items''' || data-sort-value=0|0.1.0 ||  
 
| <code>layout</code> || <code>string</code> || <code>null</code> || '''Only for the template object and non-templated items''' || data-sort-value=0|0.1.0 ||  
Line 126: Line 130:
 
|-
 
|-
 
| <code>execute</code> || <code>boolean</code> || <code>false</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>execute</code> || <code>boolean</code> || <code>false</code> || No || data-sort-value=0|0.1.0 ||  
−
Indicates if the content item is automatically executed it on load. This property is part of the hidden features. For more information, please see [[Execute Property]].
+
Indicates if the content item is automatically executed on load. This property is part of the hidden features. For more information, please see [[Execute Property]].
 
|-
 
|-
 
| <code>enumerate</code> || <code>boolean</code> || <code>true</code>{{pipe}}<code>false</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>enumerate</code> || <code>boolean</code> || <code>true</code>{{pipe}}<code>false</code> || No || data-sort-value=0|0.1.0 ||  
Line 148: Line 152:
 
'''Note: Each group has its own enumeration counter. Therefore, if a group item is executed, only the related group items are executed in a row. To use this property, the <code>enumerate</code> property must be set to <code>true</code>, otherwise this property is ignored.'''
 
'''Note: Each group has its own enumeration counter. Therefore, if a group item is executed, only the related group items are executed in a row. To use this property, the <code>enumerate</code> property must be set to <code>true</code>, otherwise this property is ignored.'''
  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>color</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>color</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
Line 158: Line 162:
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>titleHeader</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>titleHeader</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
Line 165: Line 169:
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>titleFooter</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>titleFooter</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
Line 172: Line 176:
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>label</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
 
| <code>label</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||  
 
The label of the content item that is positioned in the bottom center or on the left side if the item type is <code>"control"</code>. This property is typically used for items of type <code>"button"</code> or <code>"control"</code>.
 
The label of the content item that is positioned in the bottom center or on the left side if the item type is <code>"control"</code>. This property is typically used for items of type <code>"button"</code> or <code>"control"</code>.
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>icon</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>icon</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 195: Line 199:
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>text</code> || <code>string</code>{{pipe}}<code>array</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>text</code> || <code>string</code>{{pipe}}<code>array</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 202: Line 206:
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
 
'''Note: Since version 0.1.82, you can change the alignment of this content with the <code>alignment</code> property.'''
  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>alignment</code> || <code>string</code> || <code>"left"</code> || No || data-sort-value=82|'''0.1.82''' ||
 
| <code>alignment</code> || <code>string</code> || <code>"left"</code> || No || data-sort-value=82|'''0.1.82''' ||
Line 222: Line 226:
 
* <code>"text-right"</code>: The text properties are aligned on the right side.
 
* <code>"text-right"</code>: The text properties are aligned on the right side.
 
* <code>"text-justify"</code>: The text properties are aligned to fill the entire size.
 
* <code>"text-justify"</code>: The text properties are aligned to fill the entire size.
−
* <code>"title-{ALIGNMENT}|text-{ALIGNMENT}"</code>: The title and text properties are aligned differently. The <code>{ALIGNMENT}</code> part must be replaced with the value <code>left</code>, <code>center</code>, <code>right</code>, or <code>justify</code>.
+
 
 +
Since version '''0.1.146''', you can also set the alignment of the badge and the stamp.
 +
 
 +
* <code>"badge-left"</code>: The badge is aligned on the left side.
 +
* <code>"badge-center"</code>: The badge is aligned in the center.
 +
* <code>"badge-right"</code>: The badge is aligned on the right side.
 +
* <code>"stamp-left"</code>: The stamp is aligned on the left side.
 +
* <code>"stamp-center"</code>: The stamp is aligned in the center.
 +
* <code>"stamp-right"</code>: The stamp is aligned on the right side.
 +
 
 +
If you want to set multiple alignments, please use the separator <code>|</code> (e.g. <code>"title-left|stamp-right"</code>).
 
|-
 
|-
 
| <code>truncation</code> || <code>string</code> || <code>null</code> || No || data-sort-value=128|'''0.1.128''' ||
 
| <code>truncation</code> || <code>string</code> || <code>null</code> || No || data-sort-value=128|'''0.1.128''' ||
 
Indicates which content text properties (i.e. <code>title</code>, <code>titleHeader</code>, <code>titleFooter</code>, <code>headline</code>, and <code>text</code>) should be truncated. By default, these properties are not truncated. If you want to indicate multiple properties, please use the separator <code>|</code> (e.g. <code>"titleHeader|titleFooter"</code>).  
 
Indicates which content text properties (i.e. <code>title</code>, <code>titleHeader</code>, <code>titleFooter</code>, <code>headline</code>, and <code>text</code>) should be truncated. By default, these properties are not truncated. If you want to indicate multiple properties, please use the separator <code>|</code> (e.g. <code>"titleHeader|titleFooter"</code>).  
 +
|-
 +
| <code>centration</code> || <code>string</code> || <code>null</code> || No || data-sort-value=146|'''0.1.146''' ||
 +
Indicates which of the following content properties should be centered vertically.
 +
 +
* <code>title</code> (this also includes the <code>titleHeader</code> and <code>titleFooter</code> properties)
 +
* <code>text</code> (this also includes the <code>headline</code> property)
 +
* <code>label</code>
 +
* <code>badge</code>
 +
* <code>stamp</code>
 +
 +
By default, these properties are either top or bottom aligned. If you want to indicate multiple properties, please use the separator <code>|</code> (e.g. <code>"badge|stamp"</code>). Typically, this property is useful when the layout height (i.e. the <code>h</code> value of the <code>layout</code> property) is set to <code>1</code>.
 +
 +
'''Note: Please note that properties like <code>icon</code> or <code>extensionLabel</code> are always centered vertically and are therefore not available for this property.'''
 
|-
 
|-
 
| <code>tag</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>tag</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
The tag of the content item that is positioned in the upper right corner.  
 
The tag of the content item that is positioned in the upper right corner.  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 +
 
 +
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored.'''
 
|-
 
|-
 
| <code>tagColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>tagColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 236: Line 265:
 
| <code>badge</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>badge</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
The badge of the content item that is positioned in the upper left corner.  
 
The badge of the content item that is positioned in the upper left corner.  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 +
 
 +
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored. Since version 0.1.146, you can change the alignment of the badge with the <code>alignment</code> property.'''
 
|-
 
|-
 
| <code>badgeColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>badgeColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
The background color of the content badge.  
 
The background color of the content badge.  
 +
Please see [[Colors]] for possible values.
 +
|-
 +
| <code>stamp</code> || <code>string</code> || <code>null</code> || No || data-sort-value=146|'''0.1.146''' ||
 +
The stamp of the content item that is positioned in the lower right corner.
 +
This property supports [[Inline Expressions]].
 +
 +
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored. You can change the alignment of the stamp with the <code>alignment</code> property.'''
 +
|-
 +
| <code>stampColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=146|'''0.1.146''' ||
 +
The background color of the content stamp.
 
Please see [[Colors]] for possible values.
 
Please see [[Colors]] for possible values.
 
|-
 
|-
Line 296: Line 337:
 
| <code>imageLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>imageLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
The label of the content image that is used inside the slideshow. This property is only used if the content action is <code>image:{URL}</code> or <code>image:context</code>.  
 
The label of the content image that is used inside the slideshow. This property is only used if the content action is <code>image:{URL}</code> or <code>image:context</code>.  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>imageColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=6|'''0.1.6''' ||
 
| <code>imageColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=6|'''0.1.6''' ||
Line 305: Line 346:
 
The filler type of the content image that is used inside the slideshow. This property is only used if the content action is <code>image:{URL}</code> or <code>image:context</code>.  
 
The filler type of the content image that is used inside the slideshow. This property is only used if the content action is <code>image:{URL}</code> or <code>image:context</code>.  
 
Please see property <code>imageFiller</code> for possible values.
 
Please see property <code>imageFiller</code> for possible values.
 +
|-
 +
| <code>imageBoundary</code> || <code>boolean</code> || <code>false</code> || No || data-sort-value=146|'''0.1.146''' ||
 +
Indicates if specific content properties (i.e. <code>tag</code>, <code>badge</code>, <code>stamp</code>, <code>progress</code>, and <code>imageOverlay</code>) are bound to the image area. By default, these properties are bound to the area of the entire content item. To use this property, the content must be wrapped (e.g. the <code>imageWidth</code> or <code>imageHeight</code> property is set), otherwise this property is ignored.
 +
 +
'''Note: Please note that the named content properties are already bound to the image area for items of type <code>"separate"</code>.'''
 
|-
 
|-
 
| <code>playerLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>playerLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
−
The label of the content video/audio file that is used inside the player. This property is only used if the content action is <code>video:{URL}</code> or <code>audio:{URL}</code>.  
+
The label of the content video/audio that is used inside the player. This property is only used if the content action is <code>video:{URL}</code> or <code>audio:{URL}</code>.  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>extensionIcon</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>extensionIcon</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 316: Line 362:
 
| <code>extensionLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>extensionLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
The extension label. This property is only available for content items of type <code>"control"</code> and can be used to display an additional label on the right side of the control item. This property is only used if no <code>extensionIcon</code> is set.  
 
The extension label. This property is only available for content items of type <code>"control"</code> and can be used to display an additional label on the right side of the control item. This property is only used if no <code>extensionIcon</code> is set.  
−
This property supports inline expressions. For more information, please see [[Inline Expressions]].
+
This property supports [[Inline Expressions]].
 
|-
 
|-
 
| <code>action</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>action</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 341: Line 387:
 
A special page object that is displayed in a panel if the content item is selected and the menu button is pressed. The availability of options for the current selected item is indicated in the lower right corner of the content screen. This property is ignored if the content is displayed in a panel. Please see [[Content Page Object]] for the data structure.
 
A special page object that is displayed in a panel if the content item is selected and the menu button is pressed. The availability of options for the current selected item is indicated in the lower right corner of the content screen. This property is ignored if the content is displayed in a panel. Please see [[Content Page Object]] for the data structure.
  
−
Since version '''0.1.130''', you can also set a content root object as options. Please see [[Content Root Object]] for the data structure.
+
Since version '''0.1.130''', you can also set a [[Content Root Object]] as options.
 
|}
 
|}
  
Line 356: Line 402:
 
* [[Resolve Action]]
 
* [[Resolve Action]]
 
* [[Option Shortcut]]
 
* [[Option Shortcut]]
 +
* [[Advanced Text & Image]]
  
 
== See also ==
 
== See also ==

Revision as of 13:58, 6 September 2022

{   
    "id": "content_item_id",    
    "type": "default",
    "key": "red",
    "layout": "0,0,1,1",
    "area": "0,0,12,6",
    "offset": "0,0,0,0",
    "display": true,
    "enable": true,
    "focus": false,
    "execute": false,    
    "enumerate": false,
    "compress": true,
    "shortcut": true,
    "group": "Item Group",
    "color": "msx-glass",
    "title": "Item Title",
    "titleHeader": "Item Title Header",
    "titleFooter": "Item Title Footer",
    "label": "Item Label",
    "icon": "blank",
    "iconSize": "medium",
    "headline": "Item Headline",
    "text": "Item Text",   
    "alignment": "left",
    "truncation": "headline",
    "centration": "text",
    "tag": "Item Tag",
    "tagColor": "msx-red",
    "badge": "Item Badge",
    "badgeColor": "msx-green",
    "stamp": "Item Stamp",
    "stampColor": "msx-yellow",
    "progress": -1,
    "progressColor": "msx-blue",
    "wrapperColor": "msx-gray",
    "image": "http://link.to.image",
    "imageFiller": "default",
    "imageWidth": -1,
    "imageHeight": -1,
    "imageOverlay": -1,
    "imagePreload": false,
    "imageLabel": "Image Label",
    "imageColor": "msx-black",
    "imageScreenFiller": "fit",      
    "imageBoundary": false, 
    "playerLabel": "Player Label",
    "background": "http://link.to.image",    
    "extensionIcon": "blank",
    "extensionLabel": "Extension Label",
    "action": null,
    "data": null,
    "properties": null,
    "live": null,
    "selection": null,
    "options": null
}
Property syntax of content item object
Property Type Default Value Mandatory Since Version Description
id string null No 0.1.0

The ID of the content item. This property can be used to identify the item. The ID must be unique for the content data and only consist of letters, numbers, and the special characters "_", "-", ".".

type string "default" No 0.1.0

The type of the content item.

  • "default": Default item.
  • "teaser": Teaser items are similar to "default" items, but they have a larger title.
  • "button": Button items have a frame and a transparent background color. The icon and label properties are typically used with this type.
  • "separate": Separate items have separated titles.
  • "space": Space items are not selectable and can be used to add background or foreground items.
  • "control": Control items are similar to "button" items and mainly designed for internal purposes (e.g. they are used in context menus and settings). The icon and label properties are typically used with this type. Additionally, the extensionLabel and extensionIcon properties are available for this type.

Note: Please note that a content page must have at least one selectable item in order to be displayed (e.g. a content page that only contains items of type "space", cannot be displayed). This does not apply to a content page that is displayed as overlay/underlay page, because such kind of page can only contain items of type "space".

key string null No 0.1.97

The key that is used to assign a keyboard key (or a remote control button) to the content item action. This property is part of the hidden features. For more information, please see Key Property.

layout string null Only for the template object and non-templated items 0.1.0

The layout of the content item in format "x,y,w,h". This property is used to position the item on the layout grid.

Note: The grid size is 12x6 (or 8x6 for panels). It is not possible to register multiple items on the same position, however, it is possible to overlap items (e.g. to add background or foreground items of type "space"). If this property is set to the template object, only the w and h values are used. This property has no effect if it is set to a templated item.

The x value can go from 0 to 11 (or from 0 to 7 for panels).
The y value can go from 0 to 5.
The w value can go from 1 to 12 (or from 1 to 8 for panels).
The h value can go from 1 to 6.

All values are absolute integers. Please use the offset property to position items between the grid.

area string null No 0.1.110

The area used for created content items in the format "x,y,w,h". This property can only be used inside the template object and is used to specify the area in which the created items can be positioned. It is typically used with an overlay/underlay page to keep a specific area clear of content.

The x value can go from 0 to 11 (or from 0 to 7 for panels).
The y value can go from 0 to 5.
The w value can go from 1 to 12 (or from 1 to 8 for panels).
The h value can go from 1 to 6.

All values are absolute integers.

Note: If this property is set, the possible w and h values of the layout property are changed accordingly.

offset string null No 0.1.0

The offset of the content item in format "x,y,w,h". This property can be used to add or subtract an offset.

The x value can go from -11.0 to 11.0 (or from -7.0 to 7.0 for panels).
The y value can go from -5.0 to 5.0.
The w value can go from -11.0 to 11.0 (or from -7.0 to 7.0 for panels).
The h value can go from -5.0 to 5.0.

All values are relative floating point numbers.

Note: The offset values have been increased in version 0.1.110. In previous versions, each value can only go from -1.0 to 1.0.

display boolean true No 0.1.0

Indicates if the content item is displayed. This property can be used to temporarily remove items.

enable boolean true No 0.1.0

Indicates if the content item is enabled. This property can be used to temporarily disable items.

focus boolean false No 0.1.0

Indicates if the content item is focused. This property can be used to set the focus to a specific item.

Note: If this property is set to true for multiple items, only the first item will get the focus. This property has no effect if the content is loaded via a menu.

execute boolean false No 0.1.0

Indicates if the content item is automatically executed on load. This property is part of the hidden features. For more information, please see Execute Property.

enumerate boolean true|false No 0.1.0

Indicates if the content item is enumerated. Enumerated items can be executed in a row (e.g. to start a playlist or a slideshow). The default value is true if the item is automatically created (via the template object), otherwise false.

compress boolean true No 0.1.123

Indicates if font size adjustments are performed when the content is compressed.

Note: This property is ignored if the corresponding content root object has not set the compress property to true.

This property is part of the hidden features. For more information, please see Compress Property.

shortcut boolean true No 0.1.132

Indicates if the content item can be used as shortcut if it is used inside the options property and the key property is set.

This property is part of the hidden features. For more information, please see Option Shortcut.

group string null No 0.1.92

The group label of the content item if it is enumerated. This label is shown in the content headline after the enumeration info. If the group label starts with the string "id:" (e.g. "id:group_id"), the label is only used as ID and does not appear in the content headline.

Note: Each group has its own enumeration counter. Therefore, if a group item is executed, only the related group items are executed in a row. To use this property, the enumerate property must be set to true, otherwise this property is ignored.

This property supports Inline Expressions.

color string null No 0.1.0

The background color of the content item. Please see Colors for possible values.

title string null No 0.1.0

The title of the content item that is positioned in the lower left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

titleHeader string null No 0.1.0

The title header of the content item that is positioned in the lower left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

titleFooter string null No 0.1.0

The title footer of the content item that is positioned in the lower left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

label string null No 0.1.0

The label of the content item that is positioned in the bottom center or on the left side if the item type is "control". This property is typically used for items of type "button" or "control". This property supports Inline Expressions.

icon string null No 0.1.0

The icon of the content item that is positioned in the center or on the left side if the item type is "control". This property is typically used for items of type "button" or "control". Please see Icons for possible values.

iconSize string "medium" No 0.1.0

The size of the content icon.

  • "small": Small size.
  • "medium": Medium size.
  • "large": Large size.
  • "extra-large": Extra-large size.
headline string null No 0.1.0

The headline of the content item that is positioned in the upper left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

text string|array null No 0.1.0

The text of the content item that is positioned in the upper left corner. By default, the text is indicated as single string. Additionally, longer texts can be split into an array of strings.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

alignment string "left" No 0.1.82

The content alignment of the properties title, titleHeader, titleFooter, headline, and text. By default, the content of these properties are aligned on the left side.

  • "left": The content is aligned on the left side.
  • "center": The content is aligned in the center.
  • "right": The content is aligned on the right side.
  • "justify": The content is aligned to fill the entire size.

Since version 0.1.97, you can also set separate alignments for the title (i.e. title, titleHeader, and titleFooter) and text (i.e. headline and text) properties.

  • "title-left": The title properties are aligned on the left side.
  • "title-center": The title properties are aligned in the center.
  • "title-right": The title properties are aligned on the right side.
  • "title-justify": The title properties are aligned to fill the entire size.
  • "text-left": The text properties are aligned on the left side.
  • "text-center": The text properties are aligned in the center.
  • "text-right": The text properties are aligned on the right side.
  • "text-justify": The text properties are aligned to fill the entire size.

Since version 0.1.146, you can also set the alignment of the badge and the stamp.

  • "badge-left": The badge is aligned on the left side.
  • "badge-center": The badge is aligned in the center.
  • "badge-right": The badge is aligned on the right side.
  • "stamp-left": The stamp is aligned on the left side.
  • "stamp-center": The stamp is aligned in the center.
  • "stamp-right": The stamp is aligned on the right side.

If you want to set multiple alignments, please use the separator | (e.g. "title-left|stamp-right").

truncation string null No 0.1.128

Indicates which content text properties (i.e. title, titleHeader, titleFooter, headline, and text) should be truncated. By default, these properties are not truncated. If you want to indicate multiple properties, please use the separator | (e.g. "titleHeader|titleFooter").

centration string null No 0.1.146

Indicates which of the following content properties should be centered vertically.

  • title (this also includes the titleHeader and titleFooter properties)
  • text (this also includes the headline property)
  • label
  • badge
  • stamp

By default, these properties are either top or bottom aligned. If you want to indicate multiple properties, please use the separator | (e.g. "badge|stamp"). Typically, this property is useful when the layout height (i.e. the h value of the layout property) is set to 1.

Note: Please note that properties like icon or extensionLabel are always centered vertically and are therefore not available for this property.

tag string null No 0.1.0

The tag of the content item that is positioned in the upper right corner. This property supports Inline Expressions.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored.

tagColor string null No 0.1.0

The background color of the content tag. Please see Colors for possible values.

badge string null No 0.1.0

The badge of the content item that is positioned in the upper left corner. This property supports Inline Expressions.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored. Since version 0.1.146, you can change the alignment of the badge with the alignment property.

badgeColor string null No 0.1.0

The background color of the content badge. Please see Colors for possible values.

stamp string null No 0.1.146

The stamp of the content item that is positioned in the lower right corner. This property supports Inline Expressions.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored. You can change the alignment of the stamp with the alignment property.

stampColor string null No 0.1.146

The background color of the content stamp. Please see Colors for possible values.

progress number -1 No 0.1.70

The progress of the content item that is shown as bar at the bottom. The value is a relative floating point number and can go from 0.0 to 1.0. If this property is set to -1, the progress bar is not visible, but can be updated. If this property is not set at all, the progress bar is not visible and can not be updated.

progressColor string null No 0.1.70

The color of the progress bar. Please see Colors for possible values.

wrapperColor string null No 0.1.70

The color of the content wrapper (e.g. the color of the image space within the content item). To use this property, the content must be wrapped (e.g. the imageWidth or imageHeight property is set), otherwise this property is ignored. Please see Colors for possible values.

image string null No 0.1.0

The image of the content item. The properties imageFiller, imageWidth, and imageHeight can be used to style and position the image.

imageFiller string "default" No 0.1.0

The filler type of the content image.

  • "default": The image is stretched to fill the entire size.
  • "width"|"width-top": The image is sized to fill the entire width (by keeping the ratio) and is positioned at the top.
  • "width-center": The image is sized to fill the entire width (by keeping the ratio) and is positioned in the center.
  • "width-bottom": The image is sized to fill the entire width (by keeping the ratio) and is positioned at the bottom.
  • "height"|"height-left": The image is sized to fill the entire height (by keeping the ratio) and is positioned on the left side.
  • "height-center": The image is sized to fill the entire height (by keeping the ratio) and is positioned in the center.
  • "height-right": The image is sized to fill the entire height (by keeping the ratio) and is positioned on the right side.
  • "fit": The image is sized (by keeping the ratio) to fit into the size and is positioned in the center.
  • "cover": The image is sized (by keeping the ratio) to cover the entire size and is positioned in the center.
  • "smart": If the ratio of the image and the size is the same, "cover" is used, otherwise "fit" is used.
imageWidth number -1 No 0.1.0

The width of the content image. This property can be used to reduce the width of the image and to position the text on the right side of it. The value is a relative floating point number and can go from 0.0 to 12.0 (or from 0.0 to 8.0 for panels). Additionally, the value must be less or equal than the item width, otherwise it is ignored.

imageHeight number -1 No 0.1.0

The height of the content image. This property can be used to reduce the height of the image. The value is a relative floating point number and can go from 0.0 to 6.0. Additionally, the value must be less or equal than the item height, otherwise it is ignored.

imageOverlay number -1 No 0.1.0

The overlay of the content image. This property can be used to explicitly set or remove the overlay of the image. The overlay is used to darken the lower part of the image to make the titles (i.e. title, titleHeader, and titleFooter) more visible. By default, the overlay is used if an image has titles on top of it.

  • -1: Automatically set/remove overlay.
  • 0: Remove overlay.
  • 1: Set overlay.

Since version 0.1.97, you can also set an inverted overlay to darken the upper part of the image to make the text (i.e. headline and text) more visible.

  • 2: Set inverted overlay and automatically set/remove default overlay.
  • 3: Set inverted overlay and remove default overlay.
  • 4: Set inverted and default overlay.
imagePreload boolean false No 0.1.58

Indicates if the content image is preloaded to make it directly visible. By default, images are loaded on the fly.

Note: For preloaded images, the imageFiller property can not be set to "fit", "cover", or "smart".

imageLabel string null No 0.1.0

The label of the content image that is used inside the slideshow. This property is only used if the content action is image:{URL} or image:context. This property supports Inline Expressions.

imageColor string null No 0.1.6

The background color of the content image that is used inside the slideshow. This property is only used if the content action is image:{URL} or image:context. Please see Colors for possible values.

imageScreenFiller string "fit" No 0.1.6

The filler type of the content image that is used inside the slideshow. This property is only used if the content action is image:{URL} or image:context. Please see property imageFiller for possible values.

imageBoundary boolean false No 0.1.146

Indicates if specific content properties (i.e. tag, badge, stamp, progress, and imageOverlay) are bound to the image area. By default, these properties are bound to the area of the entire content item. To use this property, the content must be wrapped (e.g. the imageWidth or imageHeight property is set), otherwise this property is ignored.

Note: Please note that the named content properties are already bound to the image area for items of type "separate".

playerLabel string null No 0.1.0

The label of the content video/audio that is used inside the player. This property is only used if the content action is video:{URL} or audio:{URL}. This property supports Inline Expressions.

extensionIcon string null No 0.1.0

The extension icon. This property is only available for content items of type "control" and can be used to display an additional icon on the right side of the control item. Please see Icons for possible values.

extensionLabel string null No 0.1.0

The extension label. This property is only available for content items of type "control" and can be used to display an additional label on the right side of the control item. This property is only used if no extensionIcon is set. This property supports Inline Expressions.

action string null No 0.1.0

The action of the content item that is performed if the item is executed. If this property is not set and the item is executed, an info message with "No action available." is displayed. Please see Actions for possible values.

data object null No 0.1.0

The additional data of the content item that is used if the item is executed. Please see Actions for possible values.

properties object null No 0.1.58

Extended properties for special use cases. Each property is a key-value pair of type string. Please see Extended Properties for possible values.

live object null No 0.1.70

A special live object to periodically update content items (e.g. with live data, playback progress, etc.). Please see Live Object for the data structure.

selection object null No 0.1.110

A special selection object to specify the behavior of the content item if it is selected (i.e. if it has the focus). Please see Selection Object for the data structure.

options object null No 0.1.120

A special page object that is displayed in a panel if the content item is selected and the menu button is pressed. The availability of options for the current selected item is indicated in the lower right corner of the content screen. This property is ignored if the content is displayed in a panel. Please see Content Page Object for the data structure.

Since version 0.1.130, you can also set a Content Root Object as options.

Related Hidden Features[edit]

See also[edit]

Retrieved from "https://msx.benzac.de/wiki/index.php?title=Content_Item_Object&oldid=2760"