How to make buttons usable?

Archived
1

EDIT: Never mind, I just had forgotten quotes and it was interfearing with the onKeyEvent prompt.

EDIT: I was told that I needed to implement onKeyEvent() but, when I did, I didn’t get the expected result. Am I missing something here?

I have a particular circumstance with a set of buttons I’ve made, where the arrangement is made using a layout group with a button node and two separate buttonGroup nodes. Upon running the code, none of the buttons can be selected and I am not sure how to make it so a button can be selected. (It may also be worth noting that only one button appears to be made in each node group, as far as I can tell.) Note that I am aware of the focusButton parameter in buttonGroups, but the button I want to initially have selected is the one created by the button node rather than either of the buttonGroups.

Also note that I am aware that, in order to make actual use of the buttons, I have to create a listening object which executes a function upon the user selecting any of the buttons. I am reasonably confident I will be able to figure that part out. It’s the actual functionality of the menu I’ve created that I’m having difficulty with.

This is the code I’ve written. Any help would be appreciated.

[spoiler=code:3sq2vlnh]

sub init()
	'we can add a background here
	'm.top.backgroundURI= some image url
	m.top.setFocus(true)

	layoutgroup = m.top.findNode("MainScreenGroup")

	devInfo = createObject("roDeviceInfo")
	UIResolution = devInfo.getUIResolution()

	lgr = layoutgroup.boundingRect()
	lglr = layoutgroup.localBoundingRect()

	x = -lgr.x + (UIResolution.width - lglr.width)  / 2
	y = -lgr.y + (UIResolution.height - lglr.height) / 2

	layoutgroup.translation = [x, y]

end sub

<?xml version="1.0" encoding="utf-8"?>
<component name="MainScreen" extends="Scene">

    <script type="text/brightscript" uri="pkg:/components/MainScreen.brs" />

    <children>
      
        <Group id ="MainScreenGroup">

            <LayoutGroup
                layoutDirection ="vert"
                vertAlignment="center"
                itemSpacings="[10]"
                addItemSpacingAfterChild="true" >

                <Button
                    text="Watch live service"
                    minWidth="1010"
                    height ="200"
                    showFocusFootprint="true"
                />

                <LayoutGroup
                    layoutDirection ="horiz"
                    itemSpacings="10"
                    addItemSpacingAfterChild="true" >

                    <ButtonGroup id="buttonPairLeft"
                        rightJustify ="false"
                        minWidth ="500"
                        buttonHeight ="150"
                        buttons='["test1", "test2"]'
                    />
                  
                    <ButtonGroup id="buttonPairRight"
                        rightJustify ="false"
                        minWidth ="500"
                        buttonHeight ="150"
                        buttons='["test3", "test4"]'
                    />

                </LayoutGroup>

            </LayoutGroup>

        </Group>

    </children>

</component>

[/spoiler:3sq2vlnh]

2

Use setFocus on the Button to put the focus there (not on m.top), then implement onKeyEvent() in MainScreen.brs that listens to a “down” button press and calls setFocus on the next ButtonGroup. This should simulate the movement downward seamlessly across the Button/Groups.

3

“Veeta” wrote:
Use setFocus on the Button to put the focus there (not on m.top), then implement onKeyEvent() in MainScreen.brs that listens to a “down” button press and calls setFocus on the next ButtonGroup. This should simulate the movement downward seamlessly across the Button/Groups.

that helps a lot! thank you

4

“Veeta” wrote:
Use setFocus on the Button to put the focus there (not on m.top), then implement onKeyEvent() in MainScreen.brs that listens to a “down” button press and calls setFocus on the next ButtonGroup. This should simulate the movement downward seamlessly across the Button/Groups.

ok so I implemented what you suggested and nothing seems to happen when I press any of the buttons, even though I implemented an action for each directional button. Have I done something wrong here?

[spoiler=code:ro010n6k]

	m.front = m.top.findNode("front")		'top most button
	m.left = m.top.findNode("buttonPairLeft")	'left pair of buttons
	m.right = m.top.findNode("buttonPairRight")	'right pair of buttons
	m.front.setFocus(true)					'(should) set focus on the top button

function onKeyEvent(key as string, press as boolean) as boolean
	handled = false
	if press
		if key=back 
			handled = false
		else
			if key="down"
				m.left.setFocus(true)
			else if key="up"
				m.front.setFocus(true)
			else if key="left"
				m.left.setFocus(true)
			else if key="right"
				m.right.setFocus(true)
			end if
			handled = true
		end if
	end if
	return handled
end function

[/spoiler:ro010n6k]

5

Your code is probably crashing on this line:

if key=back

“back” should be in quotes.

6

“TheEndless” wrote:
Your code is probably crashing on this line:

if key=back

“back” should be in quotes.

yeah, I swiftly discovered that was my problem. it’s working exactly as intended now!