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: 
RandoCallissian
Reel Rookie

Can't set translation position for Label node

Jump to solution

I'm trying to set the position of a Label node using a relative translation but it doesn't seem to work

Is this expected for some reason that's not documented or that I missed in the documentation?

I'm trying to slightly shift "InfoTip" downwards

 

    <children>
        <Rectangle id = "Blocking"
            translation = '[0,300]'
            width = "1920"
            height = "308"
            color = "0x000000D0"
        />
        <LayoutGroup id = "SettingsGroup"
            translation = "[120,300]"
            layoutDirection = "horiz"
            vertAlignment = "top"
            >
            <LabelList id = "SettingsList" 
                numRows = "5"
                vertFocusAnimationStyle = "floatingFocus"
                >
                <ContentNode role = "content" /> 
            </LabelList>
            <Group id = "SettingOptionsGroup" 
            >
                <RadioButtonList id = "CalibreLibrarySource" 
                    vertFocusAnimationStyle = "floatingFocus"
                    >
                    <ContentNode role = "content" />
                </RadioButtonList>
                <RadioButtonList id = "ScrollSpeed" visible = "false"
                    vertFocusAnimationStyle = "floatingFocus">
                    <ContentNode role = "content" />
                </RadioButtonList>
                <RadioButtonList id = "BookCoverSize" visible = "false"
                    vertFocusAnimationStyle = "floatingFocus">
                    <ContentNode role = "content" />
                </RadioButtonList>
            </Group>
                <Label id = "InfoTip" 
                    translation = "[0,24]"
                    visible = "true"
                    text = "Starting text"
                    color = "0xdd00ddff"
                    font = "font:MediumSystemFont"
                    vertAlign = "top"
                />
        </LayoutGroup>
    </children>

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
speechles
Roku Guru

Re: Can't set translation position for Label node

Jump to solution

Your rectangle at top is using single quote ' instead of double quotes around the translation field.

You also made a layout group. The label you are trying to adjust is within that first layout group. When items are within a layout group they will not be able to use translation. They will have to have another layout group nested for that label. Then that layout group you can adjust by the itemspacings.

Put the label that has info tip into a second layout group all by itself. Then use 24 as the itemspacing for the first item in itemspacings (ie, itemspacings="[24]"). Make sure it is set to layoutDirection="vert" and you have addItemSpacingAfterChild="false". You want it to add the itemspacing before the child so it moves the 24 pixels down.

https://developer.roku.com/docs/references/scenegraph/layout-group-nodes/layoutgroup.md

You need to remember when inside a layout group individual items cannot have translations take effect. They will respect their layout groups they are within.

View solution in original post

4 REPLIES 4
speechles
Roku Guru

Re: Can't set translation position for Label node

Jump to solution

Your rectangle at top is using single quote ' instead of double quotes around the translation field.

You also made a layout group. The label you are trying to adjust is within that first layout group. When items are within a layout group they will not be able to use translation. They will have to have another layout group nested for that label. Then that layout group you can adjust by the itemspacings.

Put the label that has info tip into a second layout group all by itself. Then use 24 as the itemspacing for the first item in itemspacings (ie, itemspacings="[24]"). Make sure it is set to layoutDirection="vert" and you have addItemSpacingAfterChild="false". You want it to add the itemspacing before the child so it moves the 24 pixels down.

https://developer.roku.com/docs/references/scenegraph/layout-group-nodes/layoutgroup.md

You need to remember when inside a layout group individual items cannot have translations take effect. They will respect their layout groups they are within.

RandoCallissian
Reel Rookie

Re: Can't set translation position for Label node

Jump to solution

Ah! Upon reflection, it makes sense that I cannot set translation on a LayoutGroup child. It would be nice if that was documented 😶

Thanks @speechles for the suggestion of using item spacing. That works just fine too.

But I wonder why translation doesn't work for a grandchild of a LayoutGroup. I wouldn't expect that the translation restriction propagates downward. Is that expected?

                <LayoutGroup id = "TwoColLayout" 
                    layoutDirection = "horiz"
                    vertAlignment = "top"
                    >
...
                    <Group id="PaddingContainer">
                        <Group id = "PositioningContainer"
                            translation = "[24,24]" >
                            <Label id = "InfoTip" 
                                width = "500"
                                font = "font:MediumSystemFont"
                                vertAlign = "top"
                                wrap = "true"
                            />
                        </Group>
                    </Group>
                </LayoutGroup>

 

0 Kudos
speechles
Roku Guru

Re: Can't set translation position for Label node

Jump to solution

 

	<LayoutGroup id="TextBody" layoutDirection="vert" itemspacings="[24]">
		<LayoutGroup id="TwoColLayout" layoutDirection="horiz" vertAlignment="top" itemspacings="[50]">
			<LayoutGroup id="FirstColumn" layoutDirection="vert" itemspacings="[10]"
				<label />
				<other stuff />
			</LayoutGroup>
			<LayoutGroup id="SecondColumn" layoutDirection="vert" itemspacings="[10]"
				<label />
				<other stuff />
			</LayoutGroup>
		</LayoutGroup>
		<Label id="InfoTip" text="Starting text" color="0xdd00ddff" font="font:MediumSystemFont" />
	</LayoutGroup>

 

You started with a layout group, then added a group, and a group within that group you try to add a translation coordinate to. It is inside a layout group. It doesn't matter how many groups or how you nest them they cannot have translation coordinates within a layout group. Nothing can.

Think of it like the parent object controls all the children. The parent object is the first layout group. Anything within it is confined by that layout group.

In the sample above I use a layout group to control the main layout text body. It has the itemspacings at 24 so the label gets spaced that away from both columns. It will be placed 24 pixels below those two columns. Whichever colums is longer it will be placed 24 pixels below that position. The inside layout group has the two columns which will be spaced 50 pixels apart. Then inside that two column layout group are each columns layout group. Inside each columns layout group can be whatever you want. I used labels and other stuff as examples. This will all align themselves to their itemspacings.

Doing it this way will allow the items to be consistently spaced from each other without having to figure anything but spacings.

 

 

<Label id="InfoTip" text="Starting text" color="0xdd00ddff" font="font:MediumSystemFont" width="500" maxlines="5" wrap="true" />

 

You can also make the tip label wide enough to go under both columns then set a max amount of lines and wrap it

 

In my example above you want to place the settings list into the first column and your settingoptionsgroup into the second column.

RandoCallissian
Reel Rookie

Re: Can't set translation position for Label node

Jump to solution

Thanks again for explaining this!

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.