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: 
TShelton41
Visitor

Menu on roImageCanvas

Hello all,

I'm trying to create a menu on top of a roImageCanvas. I have the menu being populated from xml and it is being put on the ImageCanvas using the setLayer function.
example i know this isn't right i have the code at home working but I'm at work and don't have it in front of me.

textArr{
text: "this is my text"
}

My question here is how do I make it into a menu where I can select it for options. I have the while loop for the events but the roImageCanvas doesn't let me set the list as focus and there is no msg.isListItemSelected() option. So basically what I want is when the screen loads the first item is selected and you can use the remote to move up and down. Any code suggestions would be welcomed or code snippets.

Thank you in advanced.
T
0 Kudos
3 REPLIES 3
RokuJoel
Binge Watcher

Re: Menu on roImageCanvas

Off the top of my head, here is one approach:

you would probably want to have an array of associative arrays:

buttonarray=[{text:"button 1",index:0,selected:true,screenposx:100,screenposy:100}
{text:"button 2",index:1,selected:false,screenposx:100,screenposy:140}
{text:"button3",index:2,selected:falsescreenposx:100,screenposy:180}]


then you would iterate over the list of buttons and set the highlight based on which button is marked true:

for each button in buttonarray
if button.selected then
drawselectedbutton(screen,button.text,button.screenposx,button.screenposy)
focusedbutton=button.index
else
drawunselectedbutton(screen,button.text,button.screenposx,button.screenposy)
end if

end for


where your drawselected/unselected are functions you create to update the buttons with a highlight.

then you would listen for wahtever keypress tells you that the user is moving the focus, and you would iterate through all buttons again to change the selected to false for the others and the selected to true for the newly selected button.

if the select / ok button on the remote is pressed, you would get the index of the selected button and use that in an if/then to determine what function you want to execute.

- Joel
(post edited to correct a syntax error)
0 Kudos
RokuChris
Roku Employee
Roku Employee

Re: Menu on roImageCanvas

roImageCanvas also supports the built in menu mechanism like other screens using AddButton(). Of course you have no control over the positioning of the buttons with that solution.
0 Kudos
TShelton41
Visitor

Re: Menu on roImageCanvas

Thanks RokuJoel that is exactly what I was looking for. I will try it tonight and see if I can get it working. I have been trying for 3 days and couldn't figure it out.

I may have a question about how to highlight it but I will try to figure it out first.

I tried that RokuChris but didn't like the overall look of the button.
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.