AT&T U-verse Enabled. How to use the JSONContainer. Publication Date: October 25th 2013

Transcription

1 AT&T U-verse Enabled How to use the JSONContainer Publication Date: October 25th 2013

2 Legal Disclaimer This document and the information contained herein (collectively, the "Information") is provided to you (both the individual receiving this document and any legal entity on behalf of which such individual is acting) ("You" and "Your") by AT&T, on behalf of itself and its affiliates ("AT&T") for informational purposes only. AT&T is providing the Information to You because AT&T believes the Information may be useful to You. The Information is provided to You solely on the basis that You will be responsible for making Your own assessments of the Information and are advised to verify all representations, statements and information before using or relying upon any of the Information. Although AT&T has exercised reasonable care in providing the Information to You, AT&T does not warrant the accuracy of the Information and is not responsible for any damages arising from Your use of or reliance upon the Information. You further understand and agree that AT&T in no way represents, and You in no way rely on a belief, that AT&T is providing the Information in accordance with any standard or service (routine, customary or otherwise) related to the consulting, services, hardware or software industries. AT&T DOES NOT WARRANT THAT THE INFORMATION IS ERROR-FREE. AT&T IS PROVIDING THE INFORMATION TO YOU "AS IS" AND "WITH ALL FAULTS." AT&T DOES NOT WARRANT, BY VIRTUE OF THIS DOCUMENT, OR BY ANY COURSE OF PERFORMANCE, COURSE OF DEALING, USAGE OF TRADE OR ANY COLLATERAL DOCUMENT HEREUNDER OR OTHERWISE, AND HEREBY EXPRESSLY DISCLAIMS, ANY REPRESENTATION OR WARRANTY OF ANY KIND WITH RESPECT TO THE INFORMATION, INCLUDING, WITHOUT LIMITATION, ANY REPRESENTATION OR WARRANTY OF DESIGN, PERFORMANCE, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, OR ANY REPRESENTATION OR WARRANTY THAT THE INFORMATION IS APPLICABLE TO OR INTEROPERABLE WITH ANY SYSTEM, DATA, HARDWARE OR SOFTWARE OF ANY KIND. AT&T DISCLAIMS AND IN NO EVENT SHALL BE LIABLE FOR ANY LOSSES OR DAMAGES OF ANY KIND, WHETHER DIRECT, INDIRECT, INCIDENTAL, CONSEQUENTIAL, PUNITIVE, SPECIAL OR EXEMPLARY, INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, LOSS OF GOODWILL, COVER, TORTIOUS CONDUCT OR OTHER PECUNIARY LOSS, ARISING OUT OF OR IN ANY WAY RELATED TO THE PROVISION, NON-PROVISION, USE OR NON-USE OF THE INFORMATION, EVEN IF AT&T HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH LOSSES OR DAMAGES. Android is a trademark of Google Inc. IOS is a trademark or registered trademark of Cisco in the U.S. and other countries. i

3 Table of Contents Contents 1 Introduction Creating the JSONContainer Creating the uvepage Adding uvegadgets to the Page Adding Actions to the Page Adding Events to Gadgets Using the JSON Container Example Syntax Animations UVEAnimationContainer UVEAnimationFade UVEAnimationPan UVEAnimationZoom Actions UVEActionAddition UVEActionAnimation UVEActionAVPlay UVEActionAVSkip UVEActionAVStop UVEActionConditional UVEActionCustom UVEActionExit UVEActionFocus UVEActionHide ii

4 Table of Contents UVEActionInvoke UVEActionMove UVEActionNavigate UVEActionRefresh UVEActionSeek UVEActionSet UVEActionShow UVEActionSubmit UVEActionTimeOut UVEActionTune Gadgets UVEBoundList UVEBusyIndicator UVEButton UVEDataSource UVEImage UVELabel UVEList UVEListItemTemplate UVELocalDataSource UVEPage UVEPanel UVESubpage UVETextBox UVEVideo UVEVideoListItem iii

5 Table of Contents 5.4 Other Elements UVEMediaProfile Action Containers Attributes Events Information iv

6 Table of Tables Table 5-1: UVEAnimationContainer Attributes Table 5-2: UVEAnimationFade Attributes Table 5-3: UVEAnimationPan Attributes Table 5-4: UVEAnimationZoom Attributes Table 5-5: UVEActionAddition Attributes Table 5-6: UVEActionAnimation Attributes Table 5-7: UVEActionAVPlay Attributes Table 5-8: UVEActionAVSkip Attributes Table 5-9: UVEActionAVStop Attributes Table 5-10: UVEActionConditional Attributes Table 5-11: UVEActionCustom Attributes Table 5-12: UVEActionExit Attributes Table 5-13: UVEActionFocus Attributes Table 5-14: UVEActionHide Attributes Table 5-15: UVEActionInvoke Attributes Table 5-16: UVEActionMove Attributes Table 5-17: Navigation Target Types Table 5-18: UVEActionNavigate Attributes Table 5-19: UVEActionRefresh Attributes Table 5-20: UVEActionSeek Attributes Table 5-21: UVEActionSet Attributes Table 5-22: UVEActionShow Attributes Table 5-23: UVEActionSubmit Attributes Table 5-24: UVEActionTimeOut Attributes Table 5-25: UVEActionTune Attributes Table 5-26: UVEBoundList Attributes Table 5-27: UVEBusyIndicator Attributes Table 5-28: UVEButton Attributes Table 5-29: UVEDataSource Attributes Table 5-30: UVEImage Attributes Table 5-31: UVELabel Attributes Table 5-32: UVEList Attributes Table 5-33: UVEListItemTemplate Attributes v

7 Table of Tables Table 5-34: UVELocalDataSource Attributes Table 5-35: UVEPage Attributes Table 5-36: UVEPanel Attributes Table 5-37: UVESubpage Attributes Table 5-38: UVETextBox Attributes Table 5-39: UVEVideo Attributes Table 5-40: UVEVideoListItem Attributes Table 5-41: UVEMediaProfile Attributes Table 5-42: Action Attributes vi

8 Table of Examples Example 3-1: Creating an Empty Page in ios... 4 Example 3-2: Creating an Empty Page in Android... 4 Example 3-3: Adding uvegadgets... 5 Example 3-4: Adding Actions... 6 Example 3-5: Adding Events to Gadgets... 7 Example 4-1: create a uvepage that contains a uvelabel and a uvesubpage... 9 Example 4-2: Creating the ImagePanel uvepane Example 4-3: Full Methods For pageforname:withparams:forframe and resourceforname:withparams Example 4-4: Full Methods For OnSetTopBoxGadgetRequest and OnSetTopBoxResourceRequest Example 5-1: UVEAnimationContainer Example Example 5-2: UVEAnimationFade Example Example 5-3: UVEAnimationPan Example Example 5-4: UVEAnimationZoom Example Example 5-5: UVEActionAddition Example Example 5-6: UVEActionAnimation Example Example 5-7: UVEActionAVPlay Example Example 5-8: UVEActionAVSkip Example Example 5-9: UVEActionAVStop Example Example 5-10: UVEActionConditional Example Example 5-11: UVEActionCustom Example Example 5-12: UVEActionExit Example Example 5-13: UVEActionFocus Example Example 5-14: UVEActionHide Example Example 5-15: UVEActionInvoke Example Example 5-16: UVEActionMove Example Example 5-17: UVEActionNavigate Example Example 5-18: UVEActionRefresh Example Example 5-19: UVEActionSeek Example Example 5-20: UVEActionSet Example Example 5-21: UVEActionShow Example Example 5-22: UVEActionSubmit Example Example 5-23: UVEActionTimeOut Example Example 5-24: UVEActionTune Example vii

9 Table of Examples Example 5-25: Actions in Gadgets Example 5-26: UVEBoundList Example Example 5-27: UVEBusyIndicator Example Example 5-28: UVEButton Example Example 5-29: UVEDataSource Example Example 5-30: UVEImage Example Example 5-31: UVELabel Example Example 5-32: UVEList Example Example 5-33: UVEListItemTemplate Example Example 5-34: UVELocalDataSource Example Example 5-35: UVEPage Example Example 5-36: UVEPanel Example Example 5-37: UVESubpage Example Example 5-38: UVETextBox Example Example 5-39: UVEVideo Example Example 5-40: UVEVideoListItem Example Example 5-41: UVEMediaProfile Example Example 5-42: Action Container Example Example 5-43: Events Example viii

10 1 Introduction This document describes how to use the uvejsoncontainer to create TV UI API apps, and is intended for developers who wish to create TV UI API apps using JSON. The JSON container can be reused across development platform instead of using the platform specific (ios and Android TM ) object oriented APIs. The TV UI API allows you to create content that can be displayed on the screen that is attached to the U-verse receiver. In ios and Android, the TV UI API Library is distributed as an additional library to the main U-verse Enabled Library that a U-verse Enabled app must link to if you wish to use the API in your app. For details on how to setup a U-verse Enabled project in Xcode or Android, see How to Set Up a U-verse Enabled Project in Xcode and How to Set Up a U-verse Enabled Project in Android. In the 3.1 release of the U-verse Enabled SDK, an addition to the library was made that allows you to provide a JSON string to the library with the details of the elements that you wish to render on-screen. The advantage of using this is that the JSON string that you pass to the library can be used cross platform. This means after you create and debug the JSON string on one platform, you will be able to use the same JSON string on any other platforms that U-verse Enabled supports. This tutorial does not cover how to set up of the uvetvapplicationserver. For details on uvetvapplicationserver, see How to use the TV UI API and How to Use the TV UI API in Android TM Apps. Page 1 of 92

11 2 Creating the JSONContainer The first step in using the JSONContainer is to create a JSON string that contains the content that will make up the page. The root element of this string is the uvepage that you want to create. The uvepage is enclosed in a set of brackets that you will add each other element contained on the page. Inside the uvepage element you will create a set of arrays of each type of element you wish to add to the uvepage. You add elements to the gadgets, actions, or animations arrays. Each element in these arrays is a comma separated list of elements enclosed in a set of brackets. Once you have listed all your elements in the string, you will pass this string as a parameter to the uvejsoncontainer object for the page that you want to create. Here are some additional things to consider: You can add comments to the JSON string by adding a key-value element with the key comment and the text of the comment that you wish to add as the value. When adding a floating point value to the JSON string, all values will only be accurate to one decimal place. Each double quote( ) in the string must be escaped with a backward slash(\) so that the parser does not interpret the double quote as the delimiter for the end of the string. Once you have created the string, you pass the string as a parameter when you are creating the uvejsoncontainer object. Instead of creating a uvepage or uvepanel inside the PageForName:withParams; ios method of the object that conforms to the uvetvapplicationdelegate protocol and onsettopboxgadgetrequest Android method of the object that conforms to the HostModeListener protocol, the uvejsoncontainer will create the uvepage or uvepanel from the string that has been passed to it as a parameter and will return the created uvepage for you. Each element that you include in the JSON string must contain a type. The type corresponds to the type of element that you wish to have in the page. Examples include UVEPage for a page element, UVEButton for a button element, and UVELabel for a label element. You can also create actions and animations to be used by the elements on the page. For the syntax of the TV UI objects that can be added to the uvejsoncontainer, see Section 5 Syntax. All the elements that you add to the uvejsoncontainer should contain a name value, unless the element is contained in either an UVEAnimationContainer or UVEActionContainer. If the element is a subclass of uveaction or uveanimationstep and is inside an uveactioncontainer or uveanimationcontainer, only the container will need to be given a name. This name value can be referenced by other elements on the Page 2 of 92

12 page, for example when you wish to perform an action or animation on an element. This document has two parts. The first part focuses on creating an example to display a photo slideshow using the JSON Container. The second part describes the syntax for how to represent each TV UI API element within the JSONContainer. Page 3 of 92

13 3 Creating the uvepage The uvepage is the root element of the JSON string that you create. You will then add each additional gadget as an element that will be contained in the page or panel to this element. Here is an example for creating an empty page. In this example the full method for pageforname:withparams:forframe: for ios and OnSetTopBoxGadgetRequest for Android is shown. In future examples, only the string that is passed to the uvejsoncontainer will be displayed. Note: In the remaining examples in this document the double quotes are not be escaped to make the example easier to read. However, when you use the uvejsoncontainer you must escape any double quotes. The full methods with the escaped content for the pageforname:withparams:forframe: and resourceforname:withparams: for ios and OnSetTopBoxGadgetRequest and OnSetTopBoxResourceRequest for Android are included at the end of this section. Creating an Empty Page in ios 1 -(uvegadget *)pageforname:(nsstring *)pagename withparams:(nsmutabledictionary *)params forframe:(cgrect)tvframe 2 { 3 NSString *mystring 4 uvejsoncontainer* myjsoncontainer = [[uvejsoncontainer alloc] initjsoncontainer:mystring]; 5 return myjsoncontainer; 6 } Example 3-1: Creating an Empty Page in ios Creating an Empty Page in Android 1 public uvegadget OnSetTopBoxGadgetRequest(String requestedpage, Map<String, String> arg1, Rect arg2) 2 { 3 String mystring = "{\"type\":\"uvepage\",\"name\":\"example\"}"; 4 uvejsoncontainer myjsoncontainer = new uvejsoncontainer(mystring); 5 return myjsoncontainer; 6 } 3.1 Adding uvegadgets to the Page Example 3-2: Creating an Empty Page in Android You can add uvegadgets to a page that is represented by a JSON string by adding a JSON array element to the string with the name gadgets. Page 4 of 92

14 Inside this array is a comma separated list of the gadgets to be included on the page. Each element of the array needs a key-value pair that describes the type of gadget that you are adding and the key-value pairs of any attributes that you are adding to the element. If the element is to be drawn on-screen, you must also provide the frame with the on-screen coordinates. For more information on the attributes that you can add to each element, see Section 5 Syntax. For example, here is a page with a uvelabel in the gadgets array. Adding uvegadgets 1 { 2 "type":"uvepage", 3 "name":"jsonpage", 4 pagedimesions : WIDESCREEN, 5 "gadgets": 6 [ 7 { 8 "type":"uvelabel", 9 "name":"label", 10 "frame":"280,10,120,50", 11 "text":"photo", 12 "font":"uvereg39" 13 } 14 ] 15 } 3.2 Adding Actions to the Page Example 3-3: Adding uvegadgets The objects which inherit from uveaction can be added to each of the uvegadgets. The uveactions can be added either as a stand-alone action or as part of a uveactioncontainer. If the action is not part of an uveactioncontainer, the uveaction will have to be given a name value, in order for the action to be referenced by other elements. UveActions are added inside the uvegadget JSON element by added an element named actions with an array of the actions you wish to add to the element. Inside the actions array you can add either uveactioncontainers with subclasses of uveaction or stand-alone uveactions. In the example that is being created, the refreshimages action container that will be triggered by the uvepage s onenter event, which will be added to the page in the next section. This container will first refresh the uvelocaldatasource object, which has the effect of requesting the resource in the url from the TV Application. In the example, this is an uvepanel with the name ImagePanel which will make up the content of the subpage. This will update the content of the content of the elements that are bound to this. The four other actions are uveactiontimeouts which will call the uveaction specified in the actiontoinvoke after the Page 5 of 92

15 millisecondsdelay value. The uveactioncontainers refreshimages are included in the sample code where you can view them. Adding Actions "actions": 3 [ 4 5 { 6 "type":"uveactioncontainer", 7 "name":"refreshimages", 8 "actions": 9 [ 10 { 11 "type":"uveactionrefresh", 12 "targets":["localds"] 13 }, 14 { 15 "type":"uveactiontimeout", 16 "targets":["localds"], 17 "actiontoinvoke":"refreshimages", 18 "millisecondsdelay":"4000" 19 } 20 } 21 } 22 ] 3.3 Adding Events to Gadgets Example 3-4: Adding Actions A number of uvegadgets can have events attached to the uvegadget that will trigger an uveaction when the event occurs. For example, the uvepage can trigger actions for the onenter, onleave, onsleep, onreturn events, while a uvebutton can have events for onblur (focus leaves the element), onfocus (the element is the current element on screen with focus), and onclick (the user has clicked the button). The events node can be added to the element using an array with the list of event elements. Each event contains the type of event and the name of the uveaction that will be triggered when the event occurs. For example, the uveaction with the name refreshimages will be triggered by the onenter event of the uvepage. Page 6 of 92

16 Adding Events 1 { 2 "type":"uvepage", 3 "name":"jsonpage", 4 pagedimesions : WIDESCREEN, 5 "gadgets": 6 [ 7 { 8 "type":"uvelabel", 9 "name":"label", 10 "frame":"280,10,120,50", 11 "text":"photo", 12 "font":"uvereg39" 13 }, 14 { 15 "type":"uvelocaldatasource", 16 "name":"localds", 17 "URL":"ImagePanel" 18 }, 19 { 20 "type":"uvesubpage", 21 "name":"subpage", 22 "frame":"20,60,600,400", 23 "localdatasource":"localds" 24 } 25 ], 26 "events": 27 [ 28 { 29 "type":"onenter", 30 "actions":["refreshimages"] 31 } 32 ], 33 } Example 3-5: Adding Events to Gadgets The uvegadgets uvepage, uvebutton, uveboundlist, uvedatasource, uvelistitemtemplate, uvesubpage, uvetextbox, uvevideo and uvevideolistitem can contain an events element. For further details of the events for each element, see Section 5 Syntax. Page 7 of 92

17 4 Using the JSON Container Example The following example will create a uvepage that contains a uvelabel and a uvesubpage. The subpage will be bound to a uvelocaldatasource, localds. The resource at the uvelocaldatasource s url will be requested when the element that is bound to the localdatasource is loaded on the page, or when the data source is refreshed. An action of type uveactionrefresh can be used to trigger a refresh of a data source. The main page will contain a label, a local data source, which handles the request for the uvepanel, which will contain the image, and a subpage that will contain the panel that contains the image. The onenter event of the uvepage will call the refreshimages uveactioncontainer. This action container will contain two actions, an uveactionrefresh and an uveactiontimeout. The uveactionrefresh action, which is invoked on the uvelocaldatasource, and when called, will send a request to the uvetvapplicationdelegate (for ios) and HostModeListener (for Android) object to refresh the data source. The uveactiontimeout will invoke the refreshimages action to be called with a delay of 4 seconds. This is setup so that when the refreshimages action is called, it will refresh the image on the page and schedule itself to be called in another 4 seconds. The effect of this is the refreshimages will be called every 4 seconds. The uvelocaldatasource that is targeted by the uveactionrefresh will request a new image. Create a uvepage that Contains a uvelabel and uvesubpage 1 { 2 "type":"uvepage", 3 "name":"jsonpage", 4 pagedimesnsions : WIDESCREEN, 5 "gadgets": 6 [ 7 8 { 9 "type":"uvelabel", 10 "name":"label", 11 "frame":"280,10,120,50", 12 "text":"photo", 13 "font":"uvereg39" 14 }, 15 { 16 "type":"uvelocaldatasource", 17 "name":"localds", 18 "URL":"ImagePanel" 19 }, 20 { 21 "type":"uvesubpage", Page 8 of 92

18 22 "name":"subpage", 23 "frame":"20,60,600,400", 24 "localdatasource":"localds" 25 } 26 ], 27 "events": 28 [ 29 { 30 "type":"onenter", 31 "actions":["refreshimages"] 32 } 33 ], 34 "actions": 35 [ 36 { 37 "type":"uveactioncontainer", 38 "name":"refreshimages", 39 "actions": 40 [ 41 { 42 "type":"uveactionrefresh", 43 "targets":["localds"] 44 }, 45 { 46 "type":"uveactiontimeout", 47 "targets":["localds"], 48 "actiontoinvoke":"refreshimages", 49 "millisecondsdelay":"4000" 50 } 51 ] 52 }, 53 ] 54 } Example 4-1: create a uvepage that contains a uvelabel and a uvesubpage This will be the string that is passed to the uvejsoncontainer to create the main page content. After this page is returned by the pageforname:withparams:forframe method, there will be a request for content of the subpage, which is the uvepanel named ImagePanel, that was bound to the subpage in the uvelocaldatasource. In the uvelocaldatasource (localds) the URL element is set to ImagePanel on the main page, and the localdatasource of the uvesubpage (subpage) is set to the localds. The effect of this is that when the page is loaded, a request is made for the panel. Note : The string should be escaped, before passing it to the JSONContainer. Page 9 of 92

19 The panel is also requested when the uveactionrefresh event is triggered. It will send a request for the uvelocaldatasource (localds) to be updated, which will send the request for imagepanel. In each of the UVEImages the image being requested is contained in the images NSArray property of the View Controller. The index of each image is calculated and passed as an integer argument to the string being created. All the images filenames in the array are of the format imagexxx.jpg where XXX is an integer from 0 up to one less than the size of the array. While this is used to keep this example simple, in a more practical example, you could query the array for the name of an image at the desired image, and instead pass the full name of the image file as an argument when you are create the JSON string. The reason two images are included in the Panel, is so when the next image in the slideshow is to be displayed, the image is already in the receiver s image cache. This will allow a smoother transition between the images, rather than if the image was to be transferred over the network. Creating the ImagePanel uvepanel 1 self.indexoffirstimage++; 2 self.indexoffirstimage %= [self.images count]; 3 self.indexofsecondimage++; 4 self.indexofsecondimage %= [self.images count]; { 8 \"type\":\"uvepanel\", 9 \"name\":\"imagepanel\", 10 \"backgroundcolor\":\"0,0,255,255\", 11 \"gadgets\": 12 [ 13 { 14 \"type\":\"uveimage\", 15 \"name\":\"frontimage\", 16 \"frame\":\"0,0,600,400\", 17 \"alpha\":\"1.0\", 18 }, 19 { 20 \"type\":\"uveimage\", 21 \"name\":\"secondimage\", 22 \"frame\":\"0,0,600,400\", 23 \"image\":\"image%d.jpg\", 24 \"alpha\":\"0.0\" 25 } 26 ] 27 } Example 4-2: Creating the ImagePanel uvepane Page 10 of 92

20 The resourceforname:withparams (for ios) or OnSetTopBoxResourceRequest (for Android) converts the requested image to a jpeg and transfer it over the network to the receiver when the image is requested. The full methods for the pageforname:withparams:forframe and resourceforname:withparams (for ios) and OnSetTopBoxGadgetRequest and OnSetTopBoxResourceRequest (for Android) are shown in the following example. Full Methods For pageforname:withparams:forframe and resourceforname:withparams 1 - (NSData*)resourceForName:(NSString*)resourceName withparams:(nsmutabledictionary*)params 2 { 3 if ([resourcename isequaltostring:@"firstimage"]){ 4 UIImage * image = [UIImage imagenamed:[self.images objectatindex:self.indexoffirstimage]]; 5 if (image) { 6 return UIImageJPEGRepresentation(image, 0.5); 7 } 8 } 9 else if ([resourcename isequaltostring:@"backimage"]){ 10 UIImage * image = [UIImage imagenamed:[self.images objectatindex:self.indexofsecondimage]]; 11 if (image) { 12 return UIImageJPEGRepresentation(image, 0.5); 13 } 14 } 15 return nil; 16 } (uvegadget*)pageforname:(nsstring*)pagename withparams:(nsmutabledictionary*)params forframe:(cgrect)tvframe 19 { 20 if([pagename isequaltostring:@"jsonpage"]) 21 { 22 NSString *mainpagejsonstring 480\",\"gadgets\":[{\"type\":\"UVELabel\",\"name\":\"label\",\"fra me\":\"280,10,120,50\",\"text\":\"photo\",\"font\":\"uvereg39\"}, {\"type\":\"uvelocaldatasource\",\"name\":\"localds\",\"url\":\"im agepanel\"},{\"type\":\"uvesubpage\",\"name\":\"subpage\",\"frame\ ":\"20,60,600,400\",\"localDataSource\":\"localDS\"}],\"events\":[ {\"type\":\"onenter\",\"actions\":[\"setupanimations\"]}],\"action s\":[{\"type\":\"uveactioncontainer\",\"name\":\"setupanimations\",\"actions\":[{\"type\":\"uveactiontimeout\",\"targets\":[\"locald S\"],\"actionToInvoke\":\"refreshImages\",\"millisecondsDelay\":\" 4000\"}]},{\"type\":\"UVEActionContainer\",\"name\":\"refreshImage s\",\"actions\":[{\"type\":\"uveactionrefresh\",\"targets\":[\"loc alds\"]},{\"type\":\"uveactiontimeout\",\"targets\":[\"localds\"], \"actiontoinvoke\":\"refreshimages\",\"millisecondsdelay\":\"4000\ "}]}],\"animations\":[{\"type\":\"uveanimationfade\",\"name\":\"fa Page 11 of 92

21 deout\",\"begindelay\":\"0.0\",\"duration\":\"1.0\",\"startalphamu ltipier\":\"1.0\",\"endalphamultipier\":\"0.0\"}]}"; 23 uvejsoncontainer *mainjson = [[uvejsoncontainer alloc] initjsoncontainer:mainpagejsonstring]; 24 return mainjson; 25 } 26 else if ([pagename isequaltostring:@"imagepanel"]) // request is for subpage content 27 { 28 self.indexoffirstimage++; 29 self.indexoffirstimage %= [self.images count]; 30 self.indexofsecondimage++; 31 self.indexofsecondimage %= [self.images count]; NSString *imagepaneljsonstring = [NSString stringwithformat:@"{\"type\":\"uvepanel\", \"name\":\"imagepanel\", \"backgroundcolor\":\"0,0,255,255\", \"gadgets\":[{\"type\":\"uveimage\",\"name\":\"frontimage\", \"frame\":\"0,0,600,400\",\"image\":\"image%d.jpg\",\"alpha\":\"1. 0\",\"inAnimations\":[\"FadeOut\"]},{\"type\":\"UVEImage\",\"name\ ":\"backimage\", \"frame\":\"0,0,600,400\",\"image\":\"image%d.jpg\", \"alpha\":\"0.0\"}]}", self.indexoffirstimage, self.indexofsecondimage]; 34 return [[uvejsoncontainer alloc] initjsoncontainer:imagepaneljsonstring]; 35 } 36 return nil; 37 } Example 4-3: Full Methods For pageforname:withparams:forframe and resourceforname:withparams Page 12 of 92

22 Full Methods For OnSetTopBoxGadgetRequest and OnSetTopBoxResourceRequest 1 AssetManager assetmanager = getassets(); 2 // All images are placed under the assets/imagesfolder 3 String[] imagearray = assetmanager.list( ImagesFolder ); 4 int imagearraycount = assetmanager.list( ImagesFolder ).length; 5 6 public uvegadget OnSetTopBoxGadgetRequest(String resourcename, Map<String, String> arg1, Rect arg2) 7 { 8 if( firstimage.equalsignorecase(resourcename)) 9 { 10 return assetmanager.open(imagearray[indexoffirstimage]); 11 } 12 else 13 { 14 return assetmanager.open(imagearray[indexofsecondimage]); 15 } 16 return null; 17 } public uvegadget OnSetTopBoxGadgetRequest(String pagename, Map<String, String> arg1, Rect arg2) 20 { 21 if( jsonpage. equalsignorecase(pagename) 22 { 23 String mainpagejsonstring = "{\"type\":\"uvepage\",\"name\":\"jsonpage\",\"frame\":\"0,0,640,4 80\",\"gadgets\":[{\"type\":\"UVELabel\",\"name\":\"label\",\"fram e\":\"280,10,120,50\",\"text\":\"photo\",\"font\":\"uvereg39\"}, {\"type\":\"uvelocaldatasource\",\"name\":\"localds\",\"url\":\"im agepanel\"},{\"type\":\"uvesubpage\",\"name\":\"subpage\",\"frame\ ":\"20,60,600,400\",\"localDataSource\":\"localDS\"}],\"events\":[ {\"type\":\"onenter\",\"actions\":[\"setupanimations\"]}],\"action s\":[{\"type\":\"uveactioncontainer\",\"name\":\"setupanimations\",\"actions\":[{\"type\":\"uveactiontimeout\",\"targets\":[\"locald S\"],\"actionToInvoke\":\"refreshImages\",\"millisecondsDelay\":\" 4000\"}]},{\"type\":\"UVEActionContainer\",\"name\":\"refreshImage s\",\"actions\":[{\"type\":\"uveactionrefresh\",\"targets\":[\"loc alds\"]},{\"type\":\"uveactiontimeout\",\"targets\":[\"localds\"], \"actiontoinvoke\":\"refreshimages\",\"millisecondsdelay\":\"4000\ "}]}],\"animations\":[{\"type\":\"uveanimationfade\",\"name\":\"fa deout\",\"begindelay\":\"0.0\",\"duration\":\"1.0\",\"startalphamu ltipier\":\"1.0\",\"endalphamultipier\":\"0.0\"}]}"; 24 uvejsoncontainer mainjson = new uvejsoncontainer(mainpagejsonstring); 25 return mainjson; 26 } 27 else if ("ImagePanel".equalsIgnoreCase(pageName) // request is for subpage content Page 13 of 92

23 28 { 29 indexoffirstimage++; 30 indexofsecondimage++; 31 // To maintain the image array looping 32 indexoffirstimage = indexoffirstimage % imagearraycount; 33 indexofsecondimage= indexofsecondimage% imagearraycount; 34 String imagepaneljsonstring = "{\"type\":\"uvepanel\", \"name\":\"imagepanel\", \"backgroundcolor\":\"0,0,255,255\", \"gadgets\":[{\"type\":\"uveimage\",\"name\":\"frontimage\", \"frame\":\"0,0,600,400\",\"image\":\"%s\",\"alpha\":\"1.0\",\"ina nimations\":[\"fadeout\"]},{\"type\":\"uveimage\",\"name\":\"backi mage\", \"frame\":\"0,0,600,400\",\"image\":\"%s\", \"alpha\":\"0.0\"}]}"; 35 imagepaneljsonstring.format(imagearray[indexoffirstimage], imagearray[indexofsecondimage]); 36 uvejsoncontainer examplecontainer = new uvejsoncontainer(imagepaneljsonstring); 37 return imagepaneljsonstring; 38 } 39 return null; 40 } Example 4-4: Full Methods For OnSetTopBoxGadgetRequest and OnSetTopBoxResourceRequest Page 14 of 92

24 5 Syntax This section contains reference information for the following types of elements: Animations Actions Gadgets Other 5.1 Animations UVEAnimationContainer Attributes This animation represents any UVE animation control, such as UVEAnimationFade, UVEAnimationPan, and UVEAnimationZoom, can be added to the UVEAnimationContainer using the animationsteps attribute. These animation steps may be indexed to allow multiple animations to be enacted in sequence by referring only to the UVEAnimationContainer name. After all the necessary controls have been added to an UVEAnimationContainer, that UVEAnimationContainer is then added to the UVEPage. Attribute type name animationsteps The type of UVE control A string representing the name of the UVE control An array of UVE animation steps( fade, pan or zoom ) Table 5-1: UVEAnimationContainer Attributes Examples UVEAnimationContainer 1 { type : UVEAnimationContainer, 2 name : example_name, 3 animationsteps :[ ]} Example 5-1: UVEAnimationContainer Example Page 15 of 92

25 5.1.2 UVEAnimationFade Attributes This animation performs a fade effect on the target object. If the object to be animated has alpha set to X, then the animation transparency of the object transitions from (X*startAlphaMultiplier) to (X*endAlphaMultiplier). The transition occurs over the "duration" period of time. Duration is defined in a systemdependent manner. The index value is used when more than one animation is specified in the UVE animation container so the animations can be sequenced. The begindelay value represents the delay between the time of invocation of the animation and the actual time the animation starts. Begin is defined in a systemdependent manner. See UVEAnimationStep for inherited properties such as begindelay, duration and index. Attribute type begindelay duration index startalphamultiplier endalphamultiplier The type of UVE control The interval after which the animation begins. System dependent, not milliseconds or seconds. Duration of the animation. System dependent, not milliseconds or seconds. The index of the animation. Used for sequencing when there is more than one animation step. Must be zero or greater. Transparency level at start. A value between 0 and 1, inclusive. 0 is transparent, 1 is fully visible. Transparency level at end. A value between 0 and 1, inclusive. 0 is transparent, 1 is fully visible. Table 5-2: UVEAnimationFade Attributes Examples UVEAnimationFade 1 { type : UVEAnimationFade, 2 begindelay : 0.0, 3 duration : 1.0, 4 index : 2, 5 startalphamultiplier : 0.0, 6 endalphamultiplier : 1.0 } Example 5-2: UVEAnimationFade Example Page 16 of 92

26 5.1.3 UVEAnimationPan Attributes This animation represents a translation movement of an object on the screen. If the object to be animated has the coordinates (x, y) then this animation moves object from (x+from, y+from) to (x+from+deltax, y+from+deltay). This movement occurs over the time period specified by duration, which is system dependent, not in milliseconds or seconds. If loop is set to YES, the animation repeats itself continuously unless it is reset. If autoreverse is set to YES, the animation will play in one movement and then play in reverse. The index value is used when more than one animation step is used so the animations can be sequenced. Attribute type begindelay duration index from deltax deltay autoreverse loop The type of UVE control The interval after which the animation begins. System dependent, not milliseconds or seconds. The duration of the animation. System dependent, not milliseconds or seconds. The index of the animation. Used for sequencing when there is more than one animation step. Must be zero or greater. Move object from position (x+from, y+from) to position (x+from+deltax, y+from+deltay) Move object from position (x+from, y+from) to position (x+from+deltax, y+from+deltay) Move object from position (x+from, y+from) to position (x+from+deltax, y+from+deltay) If YES, the animation will be a back-and-forth animation. If YES, the animation will repeat continuously until reset. Table 5-3: UVEAnimationPan Attributes Page 17 of 92

27 Examples UVEAnimationPan 1 { type : UVEAnimationPan, 2 begindelay : 0.0, 3 duration : index : 2, 5 from : 2.0, 6 deltax : 3.0, 7 deltay : autoreverse : YES, 9 loop : NO } Example 5-3: UVEAnimationPan Example Page 18 of 92

28 5.1.4 UVEAnimationZoom Attributes This animation does a scale and translate effect to an object on the screen. If the object is at the coordinates (x, y) and has the dimensions (width, height), then the animation scales the object from the size (width*startwidthmultiplier, height*startheightmultiplier) with a scale center at (centerx, centery) to the resulting size of (width*endwidthmultiplier, height*endheightmultiplier) for the time period specified by the "duration". The centerpositionx and centerpositiony are relative to the current (x,y) position of the object. The index value is used when more than one animation is specified in the animation container so the animations can be sequenced. The begin value represents the desired delay between animation is invoked and the actual time when the animation starts. The duration is how long the transition takes to occur. Attribute type begindelay duration index startwidthmultiplier startheightmultiplier) endwidthmultiplier endwidthmultiplier The type of UVE control The interval after which the animation begins. System dependent, not milliseconds or seconds. The duration of the animation. System dependent, not milliseconds or seconds. The index of the animation. Used for sequencing when there is more than one animation step. Must be zero or greater. Width of the object when the animation starts. Height of the object when the animation starts. Width of the object when the animation stops. Height of the object when the animation stops Table 5-4: UVEAnimationZoom Attributes Page 19 of 92

29 Examples UVEAnimationZoom 1 { type : UVEAnimationZoom, 2 begindelay : 0.0, 3 duration : 1.0, 4 index : 2, 5 startwidthmultiplier : 2.0, 6 startheightmultiplier : 3.0, 7 endwidthmultiplier : endheightmultiplier : 5.0, 9 centerpositionx : 6.0, 10 centerpositiony : relative : NO } Example 5-4: UVEAnimationZoom Example Page 20 of 92

30 5.2 Actions If you wish to target the full screen video, use #FULLSCREEN as the target name UVEActionAddition Attributes This action adds the data attribute to the value in the target control. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer set the name property. Attribute type name targets data The type of UVE control The name of this action. The control to be affected. The value to be added. Table 5-5: UVEActionAddition Attributes Examples UVEActionAddition 1 { type : UVEActionAddition, 2 name : MyAdditionAction, 3 targets :[ GadgetName1, ], 4 data : -2 } Example 5-5: UVEActionAddition Example Page 21 of 92

31 5.2.2 UVEActionAnimation Attributes This action connects a specified animation container to a specific event on a control. The following animation types are supported: UVEAnimationFade UVEAnimationPan UVEAnimationZoom If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets containername The type of UVE control The name of this action The control to be affected. The name of the UVEAnimationContainer which holds the animation steps to be performed. Table 5-6: UVEActionAnimation Attributes Examples UVEActionAnimation 1 { type : UVEActionAnimation, 2 name : MyAnimationAction, 3 targets :[ GadgetName1, ], 4 containername : MyAnimationContainerName } Example 5-6: UVEActionAnimation Example Page 22 of 92

32 5.2.3 UVEActionAVPlay This action changes the stream playback speed. The higher the number the faster the play speed. FORWARD1 is normal play speed. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Available values for the playspeed attribute include: FORWARD1 FORWARD2 FORWARD3 FORWARD4 PAUSE Attributes REWIND1 REWIND2 REWIND3 REWIND4 Attribute type name targets playspeed The type of UVE control The name of this action The control to be affected. The speed and direction of play on the video stream. Table 5-7: UVEActionAVPlay Attributes Examples UVEActionAVPlay 1 { type : UVEActionAVPlay, 2 name : MyPlayAction, 3 targets :[ GadgetName1, ], 4 playspeed : FORWARD4 } Example 5-7: UVEActionAVPlay Example Page 23 of 92

33 5.2.4 UVEActionAVSkip Attributes This action skips forward or backward in the stream. If using within an UVEActionContainer, do not use the name attribute. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets seconds The type of UVE control The name of this action The control to be affected. The number of seconds to skip. This may be positive or negative. Table 5-8: UVEActionAVSkip Attributes Examples UVEActionAVSkip 1 { type : UVEActionAVSkip, 2 name : MySkipAction, 3 targets :[ GadgetName1, ], 4 seconds : -2 } Example 5-8: UVEActionAVSkip Example Page 24 of 92

34 5.2.5 UVEActionAVStop Attributes This action stops the stream and sets the stream back to the beginning. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets The type of UVE control The name of this action The control to be affected. Table 5-9: UVEActionAVStop Attributes Examples UVEActionAVStop 1 { type : UVEActionAVStop, 2 name : MySkipAction, 3 targets :[ GadgetName1, ]} Example 5-9: UVEActionAVStop Example Page 25 of 92

35 5.2.6 UVEActionConditional Attributes This action allows actions to be invoked based upon conditions. You may either use the lessthan, greaterthan, EqualTo or the stringmatch and StringNoMatch, but not both. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name data sourcegadgetnames greaterthan lessthan equalto stringmatch stringnomatch The type of UVE control. The name of this action. The data to be compared against. The name of the gadget that is the source to which the data is compared. The name of the action to perform if the data evaluates to be greater than the source. The name of the action to perform if the data evaluates to be less than the source. The name of the action to perform if the data evaluates to be equal to the source. The name of the action to perform if the data evaluates to be a string match to the source. The name of the action to perform if the data evaluates to not be a string match to the source. Table 5-10: UVEActionConditional Attributes Page 26 of 92

36 Examples UVEActionConditional 1 { type : UVEActionConditional, 2 name : MyConditionalAction1, 3 data : 27, 4 sourcegadgetnames :[ GadgetSource1, ], 5 greaterthan : MyAction1, 6 lessthan : MyAction2, 7 equalto : MyAction3 } 8 9 { type : UVEActionConditional :, 10 name : MyConditionalAction2, 11 data : MyString, 12 sourcegadgetnames :[ GadgetSource1, ] 13 stringmatch : MyAction4, stringnomatch : MyAction5 } Example 5-10: UVEActionConditional Example Page 27 of 92

37 5.2.7 UVEActionCustom Attributes This action allows you to add an action that responds to a custom event. The event name should not contain punctuation. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name customeventname data The type of UVE control. The name of this action. The name of the custom event to be associated with this action. Data to be provided to the custom event being called. Table 5-11: UVEActionCustom Attributes Examples UVEActionCustom 1 { type : UVEActionCustom, 2 name : MyCustomAction, 3 data : MyData } Example 5-11: UVEActionCustom Example Page 28 of 92

38 5.2.8 UVEActionExit Attributes This action exits the app. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name The type of UVE control. The name of this action. Table 5-12: UVEActionExit Attributes Examples UVEActionExit 1 { type : UVEActionExit, 2 name : MyExitAction,} Example 5-12: UVEActionExit Example Page 29 of 92

39 5.2.9 UVEActionFocus Attributes This action sets the focus to a control in the page. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets The type of UVE control. The name of this action. The gadget to be affected. Table 5-13: UVEActionFocus Attributes Examples UVEActionFocus 1 { type : UVEActionFocus, 2 name : MyFocusAction, 3 targets :[ GadgetName1, ]} Example 5-13: UVEActionFocus Example Page 30 of 92

40 UVEActionHide Attributes This action hides the control that is specified as the target. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets The type of UVE control. The name of this action. The gadget to be affected. Table 5-14: UVEActionHide Attributes Examples UVEActionHide 1 { type : UVEActionHide, 2 name : MyHideAction1, 3 targets :[ GadgetName1, ]} Example 5-14: UVEActionHide Example Page 31 of 92

41 UVEActionInvoke Attributes This action invokes the actions specified in the data attribute. Attribute type name data The type of UVE control. The name of this action. The actions to invoke. Table 5-15: UVEActionInvoke Attributes Examples UVEActionInvoke 1 { type : UVEActionInvoke, 2 name : MyInvokeAction, 3 data :[ MyAction1, ]} Example 5-15: UVEActionInvoke Example Page 32 of 92

42 UVEActionMove Attributes This action moves the target control and allows for resizing. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets frame The type of UVE control. The name of this action. The gadget to be affected. x,y,width,height (where x,y is the upper left hand corner). Table 5-16: UVEActionMove Attributes Examples UVEActionMove 1 { type : UVEActionMove, 2 name : MyMoveAction, 3 targets :[ GadgetName1, ], 4 frame : 10,20,100,50 } Example 5-16: UVEActionMove Example Page 33 of 92

43 UVEActionNavigate This action navigates to a specific destination. The destination of the navigation action can be a UVEPage, a channel, or a STB function such as the program guide (represented by the NavigationTargetType ). Some of the properties are mutually exclusive, such as navigationtarget, channel, url. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. The following table describes the destinations for the navigation target types. Navigation Target Type NOACTION BACK DVR FAVORITES GUIDE MENU SEARCH SEARCHTITLE SEARCHVOD SEARCHPEOPLE SEARCHPROGRAMID SEARCHCALLLETTERS SETTINGS TV VOD No action occurs. Navigates to Previous page in history, or back to live uvc if there is no history. Recordings page. Favorites page. Program guide. Menu page. Search page. Search with a title subset. Search with a vod subset. Search with a people subset. Search with a programid subset. Search with a call letter subset. Settings page. Live TV Main VOD page. Table 5-17: Navigation Target Types Page 34 of 92

44 Attributes Attribute type name navigationtarget channel URL localtimewithdate The type of UVE control The name of this action. The destination of the navigation request. See previous table of navigation target types. The destination channel. Set channel to zero if not in use. The destination page. The time and date of the program on the channel specified in the channel parameter.(time and date format: "yyyy-mm-dd*hh:mm:ss"). Table 5-18: UVEActionNavigate Attributes Examples UVEActionNavigate 1 { type : UVEActionNavigate, 2 name : MyNavigateAction, 3 navigationtarget : DVR } 4 5 { type : UVEActionNavigate, 6 name : MyNavigateAction, 7 channel : 2 } 8 9 { type : UVEActionNavigate, 10 name : MyNavigateAction, 11 URL : mypage } { type : UVEActionNavigate, 14 name : MyNavigateAction, 15 channel : 4, 16 localtimewithdate : *13:17:09 Example 5-17: UVEActionNavigate Example Page 35 of 92

45 UVEActionRefresh Attributes This action refreshes the data source. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets force The type of UVE control The name of this action. The gadget to be affected. Forces the refresh to bypass the cache. Defaults to NO. Table 5-19: UVEActionRefresh Attributes Examples UVEActionRefresh 1 { type : UVEActionRefresh, 2 name : MyRefreshAction1, 3 targets :[ GadgetName1, ]} 4 5 { type : UVEActionRefresh, 6 name : MyRefreshAction2, 7 targets :[ GadgetName1, ], 8 force : YES } Example 5-18: UVEActionRefresh Example Page 36 of 92

46 UVEActionSeek Attributes This action seeks the stream the specified number of seconds. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets seconds The type of UVE control. The name of this action. The gadget to be affected. The number of seconds to seek. This may be positive or negative. Table 5-20: UVEActionSeek Attributes Examples UVEActionSeek 1 { type : UVEActionSeek, 2 name : MySeekAction1, 3 targets :[ GadgetName1, ]} 4 seconds : -2 } Example 5-19: UVEActionSeek Example Page 37 of 92

47 UVEActionSet Attributes This action changes the text value of the target to the value specified as the data attribute. Attribute type name targets data The type of UVE control. The name of this action. The gadget to be affected. The value to set in the targets. Table 5-21: UVEActionSet Attributes Examples UVEActionSet 1 { type : UVEActionSet, 2 name : MySetAction1, 3 targets :[ GadgetName1, ], 4 data : MyData1 } Example 5-20: UVEActionSet Example Page 38 of 92

48 UVEActionShow Attributes This action shows the gadgets with the name that is specified by the target. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property. Attribute type name targets The type of UVE control. The name of this action. The gadget to be affected. Table 5-22: UVEActionShow Attributes Examples UVEActionShow 1 { type : UVEActionShow, 2 name : MyShowAction1, 3 targets :[ GadgetName1, ]} Example 5-21: UVEActionShow Example Page 39 of 92

49 UVEActionSubmit This action builds an HTTP query containing the values from gadgets on the page. If using within an UVEActionContainer, do not use the name property. If using as a single action outside of an UVEActionContainer, set the name property Attributes Attribute type name sourcegadgetnames URL methodget The type of UVE control. The name of this action. The gadgets from which to take the data for the submit action. The URL to where the submit action should send its request. YES if you want a "GET" request. NO if you want a "POST" request. Table 5-23: UVEActionSubmit Attributes Examples UVEActionSubmit 1 { type : UVEActionSubmit, 2 name : MySubmitAction1, 3 sourcegadgetnames :[ GadgetSource1, ] 4 URL : MyPage1, 5 methodget : NO } 6 7 { type : UVEActionSubmit, 8 name : MySubmitAction1, 9 sourcegadgetnames :[ GadgetSource1, ] 10 URL : MyPage1, 11 targets :[ GadgetName1, ], 12 methodget : YES } Example 5-22: UVEActionSubmit Example Page 40 of 92