Roku Developer Program

[sharkieSBS]

I'm looking to have highly graphic buttons that display in two states, focused and unfocused. And they would look like the following:



The "icon" is attached the background "Bitmap", black on the orange field for focused, white on a transparent field for unfocused.

While the focusBitmapUri is showing and changing in response to buttonFocused to focusFootprintBitmapUri isn't effective at all.
Here's the relevant code from an RSG XML file:

     ... 
 
     m.favourites_button.minWidth="360"
     m.favourites_button.text=" ADD TO FAVOURITES"
     m.favourites_button.textFont=m.font.button
     m.favourites_button.iconUri="pkg:/theme/transparent_10.png"
     m.favourites_button.focusedIconUri=""
     m.favourites_button.focusedTextFont=m.font.button
     m.favourites_button.focusBitmapUri="pkg:/images/button_favourites_on.png"
     m.favourites_button.focusedTextColor=palette.dark
     m.favourites_button.showFocusFootprint=true
     m.favourites_button.focusFootprintBitmapUri="pkg:/images/button_favourites_off.png"
 
     m.episodes_button.minWidth="360"
     m.episodes_button.text=" ALL EPISODES"
     m.episodes_button.textFont=m.font.button
     m.episodes_button.iconUri="pkg:/theme/transparent_10.png"
     m.episodes_button.focusedIconUri=""
     m.episodes_button.focusedTextFont=m.font.button
     m.episodes_button.focusBitmapUri="pkg:/images/button_episodes_on.png"
     m.episodes_button.focusedTextColor=palette.dark
     m.episodes_button.showFocusFootprint=true
     m.episodes_button.focusFootprintBitmapUri="pkg:/images/button_episodes_off.png"
 
     m.top.observeField("visible", "onVisibleChange")
     m.buttonGroup.observeField("buttonFocused", "buttonFocused")
 
   end Sub
 ]]>
 </script>
 
 <ButtonGroup
   id="buttonGroup"
   translation="[840, 390]"
 >
   <Button
     id="favourites_button"
     translation="[0, 90]"
     minWidth="360"
     maxWidth="360"
     text=" ADD TO FAVOURITES"
     iconUri=""
     focusFootprintBitmapUri="pkg:/images/button_favourites_off.png"
     focusBitmapUri="pkg:/images/button_favourites_on.png"
     showFocusFootprint="true"
   />
 
   <Button
     id="episodes_button"
     translation="[0, 180]"
     minWidth="360"
     maxWidth="360"
     text=" ADD TO FAVOURITES"
     iconUri=""
     focusFootprintBitmapUri="pkg:/images/button_episodes_off.png"
     focusBitmapUri="pkg:/images/button_episodes_on.png"
     showFocusFootprint="true"
   />
 </ButtonGroup>
 

I realise this code shows me duplicating parameters between XML and BrightScript, but I was being over cautious to ensure that I hadn't missed anything between either display method.
Currently, the white icon on the transparent field isn't showing, just the text ALL EPISODES. as it appears that focusFootprintBitmapUri isn't being recognised at all.

If I switch the states and use the `_off` for focusBitmapUri, then I can get both those buttons to display, so I know the assets are correctly referenced and available.

I realise my post is similar in nature to OG_OTT post, but hopefully our slightly different angles will spark something in the community or at Roku:
https://forums.roku.com/viewtopic.php?f=34&t=119962&p=601530&hilit=showFocusFootprint#p601530

It feels like this might be a regression, and I'm keen for experiences, opinions, or guidance.

Perhaps you've got a ZIP of a channel that focusFootprintBitmapUri is working in?

[RokuJoel]

Per engineering:

Our Button only shows the rectangular background image for the Button in a ButtonGroup that is in the focus position.

If the ButtonGroup has the focus, the focusBitmapUri image for the button in the focus position is used. If the ButtonGroup does not have the focus, the focusFootprintBitmapUri is shown as a hint to the user as to which button will be focused when the ButtonGroup gets the focus.

It appears that in actuality, only the button that in the focus position when the ButtonGroup is unfocused uses the focusFootprintBitmapUri image.

Buttons that are not in current focus position never have a background rectangle shown.

If you want a Button that always draws a background rectangle, you should be able to create an RSG component that extends Button and use that instead of Button. In that component, you would have a child Rectangle node set up to have the same width and height as the Button. you would also need to set the childRenderOrder field to “first” for the component so that the background draws first, then the Button on top of it. To prevent the Button from ever drawing its builtin background (if that’s what you want), you would set both focusBitmapUri and focusFootprintBitmapUri to an empty string.

Hope that helps,
 - Joel 

[RokuJoel]

One correction:

in your component they would have a child Poster node, not a Rectangle node. You would set up that Poster to show the desired bitmap as a background depending on the Button’s focus state.

 - J