Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
JesUltra
Streaming Star

LayoutGroup occasionally misplaces label, horizAlignment = right

My channel uses two LayoutGroups to render a menu along the top of the front page.  The content of the left LayoutGroup is dynamically populated, based on server response, whereas the content of the right LayoutGroup has two fixed items, "Search" and "Log in" (in Danish on the screenshots below).

I run regression tests, comparing screenshots of my channel with a set of "expected" ones, and every once in a while (less than once every thousand channel loads, probably closer to once in ten thousand loads), my test will fail because the labels of the two static items to the right overlap.  It seems that Roku could have placed the left edge of the menu item "SØG" at the position that the right edge of that label should have been. Surely something is wrong as the two labels overlap, and it surprises me that the problem manifests with the items that are not dynamically generated, but statically declared in my XML file (included below).

Most recently, I have seen this on a Roku 3900X running firmware version 11.0.0.4193.

I hope that someone else have seen a similar issue, and may have suggestions for a workaround.

Regards
Jes

Expected layoutExpected layoutActual layout one in ten thousand cases. Note the overlapping menu labels in the upper right corner.Actual layout one in ten thousand cases. Note the overlapping menu labels in the upper right corner.

 

<?xml version="1.0" encoding="utf-8" ?>
<component name="VideoScene" extends="Scene">
  <children>
    <RegistryTask id="RegistryTask"/>

    <Rectangle
      color="#FFFFFF"
      width="1920"
      height="1080"
      opacity="1"
      translation="[0,0]" />

    <Poster
      id="Wallpaper"
      width="1920"
      height="1080"
      translation="[0,0]"
      visible="false"/>

    <Group
	id="UpNextGroup"
	visible="false"
	translation="[1392,48]">
      <Rectangle
	  color="#FFFFFF"
	  width="480"
	  height="360"
	  opacity="0.7"
	  translation="[0,0]"/>
      <RowList
	  id="UpNextRowList"
	  itemComponentName="DrItem"
	  itemSize="[384,216]"
	  numRows="1"
	  rowHeights="[375]"
	  rowSpacings="[0]"
	  rowItemSize="[[384,216]]"
	  rowItemSpacing="[[48,20]]"
	  showRowCounter="[false]"
	  translation="[48,48]">
	<ContentNode/>
      </RowList>
    </Group>

    <Group id="VideoGroup"/>
    
    <Group
	id="HomeScreen"
	translation="[0,150]"
	clippingRect="[0, 0, 1920, 1080]"
	visible="true">
	
      <Rectangle
	  color="#FFFFFF"
	  width="1920"
	  height="1080"
	  opacity="0.7"
	  translation="[0,0]" />

      <DrRowList
	  id="HomeRow"
	  translation="[120,48]"
	  height="1080"
	  width="1680"
	  numRows="4"/>
    </Group>
    
    <Animation
	id="SlideOutAnimation"
	duration="0.3"
	easeFunction="outCubic" >
      <Vector2DFieldInterpolator
	  id = "myInterp2"
	  key="[0.0, 1.0]"
	  keyValue="[ [0.0, 690.0], [0.0, 1080.0] ]"
	  fieldToInterp="HomeScreen.translation" />
    </Animation>
    <Animation
	id="SlideInAnimation"
	duration="0.3"
	easeFunction="outCubic" >
      <Vector2DFieldInterpolator
	  id = "myInterp2"
	  key="[0.0, 1.0]"
	  keyValue="[ [0.0, 1080.0], [0.0, 690.0] ]"
	  fieldToInterp="HomeScreen.translation" />
    </Animation>

    <Animation
	id="HomeSlideAnimation"
	duration="0.4"
	easeFunction="outCubic" >
      <Vector2DFieldInterpolator
	  key="[0.0, 1.0]"
	  keyValue="[ [0.0, 0.0], [0.0, 1111.0] ]"
	  fieldToInterp="HomeScreen.translation" />
    </Animation>

    <Animation
	id="MenuAnimation"
	duration="0.15"
	easeFunction="cubic" >
      <Vector2DFieldInterpolator
	  id = "translation"
	  key="[0.0, 1.0]"
	  keyValue="[ [0.0, 690.0], [0.0, 1080.0] ]"
	  fieldToInterp="MenuUnderline.translation" />
      <FloatFieldInterpolator
          id="width"
          key= "[0.0, 1.0]"
	  keyValue= "[ 1, 0.2 ]"
	  fieldToInterp="MenuUnderline.width" />
    </Animation>

    <Animation
	id="MenuSlideAnimation"
	duration="0.15"
	easeFunction="cubic" >
      <Vector2DFieldInterpolator
	  id = "translation"
	  key="[0.0, 1.0]"
	  keyValue="[ [0.0, 0.0], [0.0, -180.0] ]"
	  fieldToInterp="Menu.translation" />
    </Animation>

    <Group
        id="Menu"
	translation="[0,0]">
      <Rectangle
	  color="#FFFFFF"
	  width="1920"
	  height="180"/>
      <Rectangle
	  id="AccountMenuBackground"
	  color="#FFFFFF"
	  width="96"
	  height="96"
	  translation="[1704,50]"
	  visible="false"/>
      <Poster
	  uri="pkg:/images/circle192.png"
	  width="96"
	  height="96"
	  translation="[1704,50]"/>

      <LayoutGroup
	  id="LeftMenu"
          translation="[120,79]"
          itemSpacings="[48]"
          layoutDirection="horiz">
      </LayoutGroup>
      
      <LayoutGroup
    	  id="RightMenu"
    	  translation="[1800,79]"
    	  itemSpacings="[48]"
    	  layoutDirection="horiz"
    	  horizAlignment="right">
        <Label
            id="SearchMenu"
    	    color="0x000000"
    	    text="SØG">
	  <Font role="font" uri="pkg:/res/drpublik_regular.otf" size="42"/>
	</Label>
        <Label
            id="AccountMenu"
    	    color="0x000000"
    	    text="LOG IND"
	    horizAlign="center">
	  <Font role="font" uri="pkg:/res/drpublik_regular.otf" size="42"/>
	</Label>
      </LayoutGroup>

      <Rectangle
	  id="MenuUnderline"
	  color="#000000"
	  width="0"
	  height="0"
	  opacity="1"
	  translation="[0,0]"
	  visible="false" />
    </Group>
    
    <Poster
      id="Splash"
      uri="pkg:/images/drsplash1_$$res$$.png"
      width="1920"
      height="1080"
      translation="[0,0]"
      visible="true"/>

    <Dialog
	id="LoginDialog"
	title="Log ind"
	message="Åbn www.dr.dk/drtv/kode på din computer eller tablet, og tast denne kode: RET4WR"
	buttons="[&quot;Annullér&quot;]"
	visible="false" />
    <Timer id="LoginTimer" repeat="false" duration="1" />

    <Dialog
	id="LogoutDialog"
	title="Log ud"
	message="Bekræft at din DR konto skal fjernes fra denne enhed."
	buttons="[&quot;OK&quot;, &quot;Annullér&quot;]"
	visible="false" />

    <Dialog
	id="DeveloperDialog"
	title="Developer Info"
	buttons="[&quot;OK&quot;]"
	visible="false" />
    <Timer id="DeveloperTimer" repeat="false" duration="1" />

    <DrBusySpinner
	id="SpinnerDialog"
	visible="false"
	size="144"
	translation="[960,540]" />
    <Timer id="SpinnerTimer" repeat="false" duration="3" />

    <Dialog
      id="Warning"
      visible="false" />

    <Font id="MenuFont" uri = "pkg:/res/drpublik_regular.otf" size = "42" />
    
    <Timer id="UserAccountTimer" repeat="false" />
    <Timer id="UserProfileTimer" repeat="false" />

  </children>

  <interface>
    <field id="homeRowSelected" type="int" alias="HomeRow.rowSelected" onChange="onHomeRowSelected"/>
    <field id="homeRowItemSelected" type="intarray" alias="HomeRow.rowItemSelected" onChange="onHomeItemSelected"/>
    <field id="homeRowItemSelectedPlay" type="intarray" alias="HomeRow.rowItemSelectedPlay" onChange="onHomeItemSelectedPlay"/>
    <field id="homeRowItemFocused" type="intarray" alias="HomeRow.rowItemFocused" onChange="onHomeItemFocused"/>
    <field id="homeRowWarningMessage" type="string" alias="HomeRow.warningMessage" onChange="onHomeWarningMessage"/>
    <field id="category" type="string" />
    <field id="commandInput" type="assocarray" onChange="onCommandInput"/>
    <field id="loginDialogButtonSelected" type="integer" alias="LoginDialog.buttonSelected" onChange="onLoginDialogButtonSelected"/>
    <field id="loginDialogWasClosed" type="node" alias="LoginDialog.wasClosed" onChange="onLoginDialogWasClosed"/>
    <field id="logoutDialogButtonSelected" type="integer" alias="LogoutDialog.buttonSelected" onChange="onLogoutDialogButtonSelected"/>
    <field id="logoutDialogWasClosed" type="node" alias="LogoutDialog.wasClosed" onChange="onLogoutDialogWasClosed"/>
    <field id="developerDialogButtonSelected" type="integer" alias="DeveloperDialog.buttonSelected" onChange="onDeveloperDialogButtonSelected"/>
    <field id="developerDialogWasClosed" type="node" alias="DeveloperDialog.wasClosed" onChange="onDeveloperDialogWasClosed"/>
    <field id="warningDialogButtonSelected" type="integer" alias="Warning.buttonSelected" onChange="onWarningDialogButtonSelected"/>
    <field id="warningDialogWasClosed" type="node" alias="Warning.wasClosed" onChange="onWarningDialogWasClosed"/>
    <field id="upNextRowListRowItemSelected" type="intarray" alias="UpNextRowList.rowItemSelected" onChange="onUpNextRowListItemSelected"/>
    <field id="appExit" type="bool" alwaysnotify="true" value="false"/> 
  </interface>

  <script type="text/brightscript" uri="pkg:/components/ImageUrl.brs"/>
  <script type="text/brightscript" uri="pkg:/components/VideoScene.brs"/>
  <script type="text/brightscript" uri="pkg:/components/UriUtils.brs"/>
  <script type="text/brightscript" uri="pkg:/components/Utils.brs"/>
  <script type="text/brightscript" uri="pkg:/res/config.brs"/>
</component>

 

 

0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.