Live Examples - Revision history

Benzac: /* Example 3 (Channels) */

2023-07-06T09:17:20Z

Example 3 (Channels)

Benzac at 09:12, 6 July 2023

2023-07-06T09:12:32Z

Benzac: /* Code */

2023-07-03T12:54:54Z

Code

Benzac: /* Screenshot */

2021-01-14T15:29:12Z

Screenshot

Benzac: /* Screenshot */

2021-01-14T15:28:54Z

Screenshot

Benzac: /* Screenshot */

2021-01-14T15:28:37Z

Screenshot

Benzac at 14:24, 14 January 2021

2021-01-14T14:24:38Z

Benzac: /* Demo */

2021-01-14T14:21:54Z

Demo

Benzac at 14:21, 14 January 2021

2021-01-14T14:21:17Z

Benzac: Created page with "== Example 1 (Lifetime) == === Screenshot === Example Screenshot (Lifetime) === Code=== { "type": "pag..."

2021-01-14T14:17:41Z

Created page with "== Example 1 (Lifetime) == === Screenshot === thumb|640px|none|Example Screenshot (Lifetime) === Code=== <syntaxhighlight lang="json"> { "type": "pag..."

New page

== Example 1 (Lifetime) ==
=== Screenshot ===
[[File:content.png|thumb|640px|none|Example Screenshot (Lifetime)]]

=== Code===
<syntaxhighlight lang="json">
{
"type": "pages",
"headline": "Live API Test (Lifetime)",
"template": {
"type": "button",
"layout": "0,0,6,3",
"headline": "State: Init",
"text": "...",
"progress": -1,
"action": "live",
"live": {
"type": "lifetime",
"duration": 60000,
"delay": 10000,
"coming": {
"headline": "State: Coming",
"execute": {
"action": "info:Content is coming."
}
},
"running": {
"headline": "State: Running",
"execute": {
"action": "info:Content is running."
}
},
"over": {
"headline": "State: Over",
"execute": {
"action": "info:Content is over."
}
},
"text": [
"Creation: {creation:date:yyyy-mm-dd} {creation:time:hh:mm:ss}{br}",
"From: {from:date:yyyy-mm-dd} {from:time:hh:mm:ss}{br}",
"To: {to:date:yyyy-mm-dd} {to:time:hh:mm:ss}{br}",
"Now: {now:date:yyyy-mm-dd} {now:time:hh:mm:ss}{br}",
"Duration: {duration:time:mm:ss}{br}",
"Progress: {progress:time:mm:ss} ({progress:percentage}){br}",
"Countdown: {countdown:time:mm:ss} ({countdown:percentage}){br}",
"Overflow: {overflow:time:mm:ss}{br}"
]
}
},
"items": [{
"tag": "1"
}, {
"tag": "2"
}, {
"tag": "3"
}, {
"tag": "4"
}, {
"tag": "5"
}, {
"tag": "6"
}, {
"tag": "7"
}, {
"tag": "8"
}]
}
</syntaxhighlight>

=== Demo ===
* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/live_test_1.json
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_1.json

== Example 2 (Playback & Resume) ==
'''Note: For the resume feature, version 0.1.74 or higher is needed. A content can only be resumed if at least 10 seconds remain, otherwise it is started from the beginning.'''
=== Screenshot ===
[[File:template.png|thumb|640px|none|Example Screenshot (Playback & Resume)]]

=== Code===
<syntaxhighlight lang="json">
{
"type": "pages",
"headline": "Live API Test (Playback & Resume)",
"template": {
"type": "separate",
"layout": "0,0,2,4",
"icon": "msx-white-soft:movie",
"color": "msx-glass",
"titleFooter": "",
"progress": -1,
"live": {
"type": "playback",
"titleFooter": "{progress:time:hh:mm:ss}",
"action": "player:show"
},
"properties": {
"resume:key": "url"
}
},
"items": [{
"title": "Video 1",
"action": "video:http://msx.benzac.de/media/video1.mp4"
}, {
"title": "Video 2",
"action": "video:http://msx.benzac.de/media/video2.mp4"
}, {
"title": "Video 3",
"action": "video:http://msx.benzac.de/media/video3.mp4"
}, {
"enumerate": false,
"type": "button",
"offset": "0,0,0,-1",
"icon": "highlight-off",
"label": "Clear Keys",
"action": "data",
"data": {
"actions": [{
"action": "resume:clear:http://msx.benzac.de/media/video1.mp4"
}, {
"action": "resume:clear:http://msx.benzac.de/media/video2.mp4"
}, {
"action": "resume:clear:http://msx.benzac.de/media/video3.mp4"
}]
}
}]
}
</syntaxhighlight>

=== Demo ===
* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/live_test_2.json
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_2.json

== Example 3 (Channels) ==
For this example, the <code>"setup"</code> and <code>"schedule"</code> type is used to create a list of channels with live programs in different appearance styles (i.e. list, grid, compact, overview, and preview). A corresponding live service creates test programs with random <code>from</code> and <code>to</code> values. The <code>execute:service:{URL}</code> with the <code>update:content:{ITEM_ID}</code> action is used to update each channel item with the current live program. Please have a look at following example links.

* List: http://msx.benzac.de/services/live.php?type=list
* Grid: http://msx.benzac.de/services/live.php?type=grid
* Compact: http://msx.benzac.de/services/live.php?type=compact
* Overview: http://msx.benzac.de/services/live.php?type=overview
* Preview http://msx.benzac.de/services/live.php?type=preview

A more complex example is the TV guide, which shows how you can display channel programs as classic EPG (Electronic Program Guide) timeline. For this purpose, the <code>from</code> and <code>to</code> values of a program are mapped to the <code>layout</code> and <code>offset</code> values of a content item. Please have a look at the following example link.

* TV Guide: http://msx.benzac.de/services/guide.php

'''Note: For the preview style, version 0.1.110 or higher is needed. For the TV guide, version 0.1.123 or higher is needed.'''
=== Screenshot ===
[[File:template.png|thumb|640px|none|Example Screenshot (Channels)]]

=== Code===
<syntaxhighlight lang="json">
{
"headline": "Live API Test (Channels)",
"extension": "{ico:msx-white:event} {now:date:D, M d, yyyy}{tb}{ico:msx-white:access-time} {now:time:hh:mm}",
"menu": [{
"label": "List",
"data": "http://msx.benzac.de/services/live.php?type=list"
}, {
"label": "Grid",
"data": "http://msx.benzac.de/services/live.php?type=grid"
}, {
"label": "Compact",
"data": "http://msx.benzac.de/services/live.php?type=compact"
}, {
"label": "Overview",
"data": "http://msx.benzac.de/services/live.php?type=overview"
}, {
"label": "Preview",
"data": "http://msx.benzac.de/services/live.php?type=preview"
}, {
"type": "separator"
}, {
"label": "TV Guide",
"data": "user:http://msx.benzac.de/services/guide.php"
}]
}
</syntaxhighlight>

=== Demo ===
* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json

← Older revision		Revision as of 14:24, 14 January 2021
Line 181:		Line 181:
	* Launch via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/xp/data/live_test_3.json		* Launch via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/xp/data/live_test_3.json
	* Launch via Demo Page: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/xp/data/live_test_3.json		* Launch via Demo Page: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/xp/data/live_test_3.json
		+
		+	== See also ==
		+	* [[Live Object]]
		+	* [[Live Inline Expressions]]

@@ Line 239: / Line 239: @@
 * Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json
-== Example 3 (Channels) ==
+== Example 4 (Channels) ==
 For this example, the <code>"setup"</code> and <code>"schedule"</code> type is used to create a list of channels with live programs in different appearance styles (i.e. list, grid, compact, overview, and preview). A corresponding live service creates test programs with random <code>from</code> and <code>to</code> values. The <code>execute:service:{URL}</code> with the <code>update:content:{ITEM_ID}</code> action is used to update each channel item with the current live program. Please have a look at following example links.

@@ Line 134: / Line 134: @@
 * Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/live_test_2.json
 * Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_2.json
 == Example 3 (Channels) ==
@@ Line 150: / Line 254: @@
 '''Note: For the preview style, version 0.1.110 or higher is needed. For the TV guide, version 0.1.123 or higher is needed.'''
 === Screenshot ===
-[[File:live3.png|thumb|640px|none|Example Screenshot (Live API Test - Channels)]]
+[[File:live4.png|thumb|640px|none|Example Screenshot (Live API Test - Channels)]]
 === Code===
@@ Line 182: / Line 286: @@
 === Demo ===
-* Launch via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/xp/data/live_test_3.json
+* Launch via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/xp/data/live_test_4.json
-* Launch via Demo Page: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/xp/data/live_test_3.json
+* Launch via Demo Page: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/xp/data/live_test_4.json
 == See also ==
 * [[Live Object]]
 * [[Live Inline Expressions]]

@@ Line 91: / Line 91: @@
          "progress": -1,
          "live": {
              "type": "playback",
-             "titleFooter": "{progress:time:hh:mm:ss}",
+             "titleFooter": "",
              "action": "player:show"
          },

@@ Line 76: / Line 76: @@
 '''Note: For the resume feature, version 0.1.74 or higher is needed. A content can only be resumed if at least 10 seconds remain, otherwise it is started from the beginning.'''
 === Screenshot ===
-[[File:live2.png|thumb|640px|none|Example Screenshot (Playback & Resume)]]
+[[File:live2.png|thumb|640px|none|Example Screenshot (Live API Test - Playback & Resume)]]
 === Code===

@@ Line 1: / Line 1: @@
 == Example 1 (Lifetime) ==
 === Screenshot ===
-[[File:live1.png|thumb|640px|none|Example Screenshot (Lifetime)]]
+[[File:live1.png|thumb|640px|none|Example Screenshot (Live API Test - Lifetime)]]
 === Code===