Roku Community

hugetv · ‎07-10-2017

How can I have it load its item into each category by selecting it

<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->
<!-- node that renders Grid Screen, handles bookmark buttons, and handles start of video playback -->

<component name="GridScreen" extends="Group">
 <interface>
 <!-- Row item selection handler -->
 <field id="rowItemSelected" type="intarray" alwaysnotify="true" alias="RowList.rowItemSelected"/>
 
 <!-- Row item focused handler -->
 <field id="itemFocused" type="intarray" alias="RowList.rowItemFocused" onChange="OnItemFocused"/>
 
 <!-- Interface to focused item (Content Node) -->
 <field id="focusedContent"  type="node"/>
 </interface>
<script type="text/brightscript" >
<![CDATA[
Function Init()
 Print"[GridScreen] Init"
 
 m.rowList=m.top.findNode("RowList")
 m.description=m.top.findNode("Description")
 m.background=m.top.findNode("Background")
 
 m.top.observeField("visible","onVisibleChange")
 m.top.observeField("focusedChild","OnFocusedChildChange")
 
End Function

'handler of focused item in RowList
Sub OnItemFocused()
 itemFocused=m.top.itemFocused
 
 
 If itemFocused.Count()=2
 focusedContent=m.top.content.getChild(itemFocused[0]).getChild(itemFocused[1])
 If focusedContent<>invalid
 m.top.focusedContent=focusedContent
 m.description.content=focusedContent
 m.background.uri=focusedContent.hdBackgroundImageUrl
 End If
 End If
End Sub

'set proper focus to RowList in case if return from Details Screen
Sub onVisibleChange()
 If m.top.visible=TRUE
 m.rowList.setFocus(TRUE)
 End If
End Sub

'set proper focus to RowList in case if return from Details Screen
Sub OnFocusedChildChange()
 If m.top.isInFocusChain() And Not m.rowList.hasFocus()
 m.rowList.setFocus(TRUE)
 End If
End Sub

]]>
</script>
 
 <children>
 <FadingBackground
 id="Background"
 width="1280"
 height="720"
 color="0xAAAAAA"
 ShadeOpacity="0.8"/>
 
 <Poster
    id="Background"
  translation="[0,0]"
 uri="pkg:/images/Background/Fondo.jpg"
 width="1280"
 height="720" />
 
 <Rectangle
 translation="[0,0]"
 width="1280"
 height="720"
 color="0x000000"
 opacity="0.8"
 />
 
 <RowList
 id="RowList"
 focusBitmapUri="pkg:/images/focus_grid.9.png"
 translation="[-60,372]"
 itemSize="[1327,218]"
 numRows="2"
 itemSpacing="[13,0]"
 focusXOffset="[147]"
 rowFocusAnimationStyle="fixedFocusWrap"
 rowItemSize="[[262,147]]"
 rowItemSpacing="[[16.5,3]]"
 showRowLabel="true"
 showRowCounter="true"
 rowLabelOffset="[[147,20]]"
 >
      <ContentNode id="menucontent" role="content">

        <ContentNode
  id="0"
          title="INSERT CONTENT HERE" />
        <ContentNode
  id="1"
          title="INSERT CONTENT HERE" />
        <ContentNode
  id="2"
          title="INSERT CONTENT HERE" />
        <ContentNode
  id="3"
          title="INSERT CONTENT HERE" />
      </ContentNode>
 </RowList>
 
 <Poster
 translation="[0,650]"
 uri="pkg:/images/BG_dark_down.png"
 width="2000"
 height="95" />
 
 <Description
 id="Description"
 translation="[106,119]"
 itemSpacings="[7,17]"/>

 </children>
</component>

How can I insert each ContentNode when selecting
This content -> http://www.sdktestinglab.com/homeoptionslistcontent.xml

Our system http://www.rokumanager.com

24i · ‎07-12-2017

I don't really understand the question.
Do you want to read that .xml file and place the categories in the rowlist as title?
Is the .xml inside the project or do you want to read in from an external source?

hugetv · ‎07-12-2017

GridScreen.xml

<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<!-- node that renders Grid Screen
    handles bookmark buttons
    handles start of video playback
 -->
<component name="GridScreen" extends="Group" initialFocus="RowList">
    <interface>
        <!-- Grid Content Node -->
        <field id="content" type="node" alias="RowList.content" onChange="onContentChange"/>

        <!-- Row item selection handler -->
        <field id="rowItemSelected" type="intarray" alwaysnotify="true" alias="RowList.rowItemSelected"/>

        <!-- Row item focused handler -->
        <field id="itemFocused" type="intarray" alias="RowList.rowItemFocused" onChange="OnItemFocused"/>

        <!-- Interface to focused item (Content Node) -->
        <field id="focusedContent"  type="node"/>
    </interface>

    <!-- main handler -->
    <script type="text/brightscript" uri="pkg:/components/GridScreen/GridScreen.brs" />


    <children>
        <FadingBackground
            id="Background"
            width="1280"
            height="720"
            color="0x151515"
            ShadeOpacity="0.8" />

        <!-- Custom fonts -->
        <Label>
            <Font id="RowListFont" role="font" uri="pkg:/fonts/Roboto-Regular.ttf" size="18"/>
        </Label>

        <RowList
            id="RowList"
            itemComponentName="GridScreenItem"
            focusBitmapUri="pkg:/images/focus_grid_light.9.png"
            translation="[-60, 410]"
            itemSize="[1327, 218]"
            numRows="2"
            itemSpacing="[0,0]"
            focusXOffset="[147]"
            rowFocusAnimationStyle="fixedFocusWrap"
            rowItemSize="[[262, 147]]"
            rowItemSpacing="[[16, 3]]"
            showRowLabel="true"
            showRowCounter="true"
            rowLabelOffset="[[147, 20]]"
            rowLabelFont="dictionary:RowListFont"
            rowLabelColor="0xf5f5f5" />
        <!-- Overhang logo -->
        <Group id="Overhang">
            <Poster
                id="PosterOverhang"
                translation="[100, 30]"
                uri="pkg:/images/overhangLogo.png"
                width="184"
                height="100" />

            <Label
                id="OptionsLabel"
                translation="[726, 58]"
                width="400"
                horizAlign="right"
                text="Options"
                color="0xf5f5f5">
                <Font role="font" uri="pkg:/fonts/Roboto-Regular.ttf" size="21" />
            </Label>

            <Poster
                id="OptionsIcon"
                blendColor="#ffffff"
                enableColorBlending="false"
                translation="[1139, 53]"
                width="24"
                height="24"
                uri="pkg:/images/options.png" />
        </Group>

        <Poster
            id="BackgroundDown"
            translation="[0, 650]"
            width="2000"
            height="95" />

        <Description
            id="Description"
            translation="[106, 140]"
            itemSpacings="[7,17]" />
    </children>
</component>

GridScreen.brs

' ********** Copyright 2016 Roku Corp.  All Rights Reserved. **********
 ' inits grid Screen
 ' creates all children
 ' sets all observers
Function Init()
    ? "[GridScreen] Init"

    m.rowList       =   m.top.findNode("RowList")
    m.description   =   m.top.findNode("Description")
    m.background    =   m.top.findNode("Background")

    m.top.observeField("visible", "onVisibleChange")
    m.top.observeField("focusedChild", "OnFocusedChildChange")

    ' Set theme
    m.rowList.focusBitmapUri = "pkg:/images/focus_grid_light.9.png"
    m.rowList.rowLabelColor = "#f5f5f5"

    m.optionsLabel = m.top.findNode("OptionsLabel")
    m.optionsLabel.color = "#f5f5f5"

    m.optionsIcon = m.top.findNode("OptionsIcon")
    m.optionsIcon.blendColor = "#ffffff"
End Function

' handler of focused item in RowList
Sub OnItemFocused()
    itemFocused = m.top.itemFocused
    ' item focused should be an intarray with row and col of focused element in RowList
    If itemFocused.Count() = 2 then
        focusedContent          = m.top.content.getChild(itemFocused[0]).getChild(itemFocused[1])
        if focusedContent <> invalid then
            m.top.focusedContent    = focusedContent
            m.description.content   = focusedContent
            m.background.uri        = focusedContent.hdBackgroundImageUrl
        end if
    end if
End Sub

' set proper focus to RowList in case if return from Details Screen
Sub onVisibleChange()
    if m.top.visible = true then
        m.rowList.setFocus(true)
    end if
End Sub

' set proper focus to RowList in case if return from Details Screen
Sub OnFocusedChildChange()
    if m.top.isInFocusChain() and not m.rowList.hasFocus() then
        m.rowList.setFocus(true)
    end if
End Sub

HomeScene.brs

'********** Copyright 2016 Roku Corp.  All Rights Reserved. **********
'inits grid screen
'creates all children
'sets all observers
Function Init()
	Print "[[size=85][font=monospace]HomeScene[/font][/size]] Init"
	
	'GridScreen node with RowList
	m.GridScreen=m.top.findNode("GridScreen")
	m.GridScreen.Visible=FALSE
	
	'Create main labellist menu
	m.MainMenu=m.top.findNode("MainMenuSettings")
	m.MainMenu.SetFocus(TRUE)
	
End Function

Function Moviescontentdownloaded()
	m.MainMenu.Visible=FALSE
	m.loadingIndicator.control="stop"
	m.loadingIndicator.opacity=0
	m.parsegrid.unobservefield("content")
	m.GridScreen.content=m.parsegrid.content
	m.GridScreen.visible="TRUE"
	m.GridScreen.SetFocus(TRUE)
End Function

Function MainMenuSelectionMade() 'interface for the main menu screen
'Print m.MainMenu.getChild(1).itemselected.toStr()

	'first option is Movies Grid
	If m.MainMenu.getChild(1).itemSelected=0
		m.loadingIndicator.SetFocus(TRUE)
		m.loadingIndicator.control="start"
		m.loadingindicator.opacity=1
		m.ParseGrid.uri=m.top.serverUrl + "movies.php?tipo=1"
		m.ParseGrid.FunctionName="GetDataMovies"
		m.parsegrid.observefield("content","Moviescontentdownloaded")
		m.ParseGrid.control="RUN"

	End If
	
End Function

HomeScene.xml

<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->
<!-- main node which handles home screen children -->

<component name="HomeScene" extends="Scene">
	
	<interface>
		<!-- Content for RowList in GridScreen on Home Scene -->
		<field id="gridContent" type="node" alias="GridScreen.content" onChange="OnChangeContent" />
		
		<!-- Row item selection handler -->
		<field id="rowItemSelected" type="intarray" alwaysNotify="true" alias="GridScreen.rowItemSelected"/>
		<field id="rowItemSelectedSeries" type="intarray" alwaysNotify="true" alias="SeriesScreen.rowItemSelected"/>
		<field id="rowItemSelectedSeason" type="intarray" alwaysNotify="true" alias="SeasonScreen.rowItemSelected"/>

		<!-- Main menu item selection handler -->
		<field id="itemSelected" type="integer" alias="MainMenuSettings.itemSelected" onChange="MainMenuSelectionMade"/>
		<field id="selectedCategories" type="string" alwaysNotify="true" />
		
		<!-- Main menu close handler -->
		<field id="close" type="bool"/>
		
	</interface>
	
	<!-- main handler -->
	<script type="text/brightscript" uri="pkg:/components/HomeScene/HomeScene.brs" />

	<children>
        <HomeSceneTask
            id="HomeSceneTask"/>

		<!-- Overhang logo -->
		<Poster
		   id="Background"
 			translation="[0,70]"
			uri="pkg:/images/Background/HomeScene.jpg"
			width="1280"
			height="650" />
			
		<Overhang
		   id="Overhang"
			showClock="true"
			clockColor="0xffffff"
			showOptions="true"
			optionsText="Search"
			optionsColor="0xffffff"
			logoUri="pkg:/images/iptvLogo.png"
			backgroundUri="pkg:/images/header.png"/>
				
		<Poster
			id="MainMenuBackground"
			width="600"
			height="300"
			uri="pkg:/images/BG_dark_down.png"
			translation="[340,210]">
			<Label
				color="#F0F0F0"
				font="font:MediumBoldSystemFont"
				horizAlign="center"
				text="Menu Principal:"
				translation="[20,20]"
				width="200" />
			<LabelList
				id="MainMenuSettings"
				focusRow = "0"
				numRows="4"
                sectionDividerHeight = "48.0"
                sectionDividerFont = "font:MediumBoldSystemFont"
                sectionDividerTextColor = "#F0F0F0"
				vertFocusAnimationStyle="floatingFocus"
				translation="[75,80]"
				itemSize="[450,48]"
				color="#F0F0F0"
				focusedColor="#F00000">
				<ContentNode id="Labels" role="content">
					<ContentNode id="0" title="Movies" />
					<ContentNode id="1" title="Infantil" />
					<ContentNode id="2" title="Documental" />
				</ContentNode>
			</LabelList>
		</Poster>
		
		<LoadingIndicator
			id="loadingIndicator"
			imageUri="pkg:/components/LoadingIndicator/loader.png"
			clockwise="TRUE"
			spinInterval="2"
			fadeInterval="0.5"
			spacing="20"
			imageWidth="100"
			text="Loading..."
			width="1280"
			height="720"
			centered="FALSE"
			translation="[0,0]"
			textPadding="10"
			font="fontmallBoldSystemFont"
			backgroundColor="0x551A8B"
			backgroundOpacity="0"/>
		
		<GridScreen
			id="GridScreen"
			visible="FALSE"
			translation="[0,0]" />
			
		<DetailsScreen
			id="DetailsScreen"
			visible="FALSE"/>
		
		<!-- Include Download Data Functions -->
		<ParseGrid id="ParseGrid"/>
		
	</children>
</component>

My problem is that I want to be able to load the individual categories so I can get the section open much faster I'm working with json

Our system http://www.rokumanager.com

hugetv · ‎07-13-2017

Some idea of being able to insert each node that is already

Our system http://www.rokumanager.com

24i · ‎07-14-2017

So if I understand correctly you don't want to wait for the parseGrid to have downloaded ALL the content and then apply it to the Gridscreen, but you want to dynamically apply it to the Gridscreen whenever something is ready from the parseGrid. Correct?

I think you should let the parseGrid set the content field every time a category is ready. I take it that "Moviescontentdownloaded" is called as it observes the content field of parseGrid?
Then you should stay observing this field and add everything the "Moviescontentdownloaded" receives to a contentNode that is locally in the HomeScene. Then set the m.GridScreen.content to this local contentNode instead of the content that m.parseGrid returns.

hugetv · ‎07-14-2017

"24i" wrote:
So if I understand correctly you don't want to wait for the parseGrid to have downloaded ALL the content and then apply it to the Gridscreen, but you want to dynamically apply it to the Gridscreen whenever something is ready from the parseGrid. Correct?

I think you should let the parseGrid set the content field every time a category is ready. I take it that "Moviescontentdownloaded" is called as it observes the content field of parseGrid?
Then you should stay observing this field and add everything the "Moviescontentdownloaded" receives to a contentNode that is locally in the HomeScene. Then set the m.GridScreen.content to this local contentNode instead of the content that m.parseGrid returns.

I did not understand very well my friend

Our system http://www.rokumanager.com

Roku Community

Roku Developer Program

Helps insert content into RowList content

Re: Helps insert content into RowList content

Re: Helps insert content into RowList content

Re: Helps insert content into RowList content

Re: Helps insert content into RowList content

Re: Helps insert content into RowList content