Scollview Buttons on Focus Issue

GP_Animations · November 9, 2013, 5:56pm

Hey everyone,

I’m missing something obvious here, but my brain is fried from working on this project for too long. I have a scroll view of buttons, but if you try to scroll while touching a button, nothing happens. The obvious answer is to use “takeFocus”. However, I still need the onRelease functionality to change scenes and I can only use onRelease = osteoView or onEvent = buttonTouch , but not both.

No idea why I can’t figure this out.

local storyboard = require "storyboard" local widget = require("widget") local scene = storyboard.newScene(); --Called if the scene hasn't been previously seen function scene:createScene( event ) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;-- Button Functions &nbsp;&nbsp;&nbsp;&nbsp;local function osteoView( event ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;storyboard.gotoScene( "osteomyelitis", {effect="crossFade", time= 400} ) &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;-- Create New Group &nbsp;&nbsp;&nbsp;&nbsp;local dataGroup = self.view &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; -- Create a ScrollView &nbsp;&nbsp;&nbsp;&nbsp;local scrollView = widget.newScrollView &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left = 0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top = 0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width = display.contentWidth, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height = display.contentHeight, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottomPadding = 50, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id = "scrollView", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;horizontalScrollDisabled = true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;verticalScrollDisabled = false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listener = scrollListener, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hideBackground = true, &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;local function buttonTouch( event ) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local phase = event.phase &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if "moved" == phase then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local dy = math.abs( ( event.y - event.yStart ) ) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;-- If our finger has moved more than the desired range &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;if dy \> 10 then &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- Pass the focus back to the scrollView &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollView:takeFocus( event ) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;return true &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;-- Create Buttons &nbsp;&nbsp;&nbsp;&nbsp;local btn1 = widget.newButton &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultFile = "images/blueBtn.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = "Acute & Chronic Osteomyelitis", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fontSize = 16, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;labelColor = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default = {255}, &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;over = {39,135,184}, &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;--onRelease = osteoView, &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;onEvent = buttonTouch, &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;

I have over 30 buttons in the scrollView, so right now if you’re touching any of the buttons, it won’t scroll, you have to touch between the buttons and then scroll. Need more coffee…

rob · November 9, 2013, 6:38pm

It looks like you’re doing the right thing. onRelease is like a tap event in that you don’t get various phases like a touch event, so there is no moved phase to detect. By using onEvent you should get a moved phase and in there you can pass the event on. The only thing I see is that you might want to do a “return false” right after you call the takeFocus() call.

Rob

GP_Animations · November 9, 2013, 6:59pm

What would the function be to make the buttons react to changing storyboard scenes and also reacting to scrolling?

I tried

local function osteoView( event ) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if event.phase == "moved" then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local dy = math.abs(event.y - event.yStart) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if dy \> 10 then &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scrollView:takeFocus( event ) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("scrolling") &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;elseif event.phase == "ended" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print("Go to osteo!") &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;storyboard.gotoScene( "osteomyelitis", {effect="crossFade", time= 400} ) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;return false &nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;

Which technically works, but the button you tapped on to scroll automatically changes the label color forever until you tap on it to change scenes.

GP_Animations · November 9, 2013, 7:30pm

Here you can see what two buttons I touched to scroll up and down. I even removed the over phase, which didn’t help, the label still change color.

local btn1 = widget.newButton &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultFile = "images/blueBtn.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = "Acute & Chronic Osteomyelitis", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fontSize = 16, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;labelColor = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default = {255}, &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;onEvent = osteoView &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;btn1.x = display.contentCenterX; &nbsp;&nbsp;&nbsp;&nbsp;btn1.y = introText.y + introText.contentHeight + 40; &nbsp;&nbsp;&nbsp;&nbsp;scrollView:insert(btn1); &nbsp;

rob · November 9, 2013, 7:41pm

I was thinking more like:

local function osteoView( event ) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if event.phase == "moved" then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local dy = math.abs(event.y - event.yStart) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if dy \> 10 then &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scrollView:takeFocus( event ) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("scrolling") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;elseif event.phase == "ended" then &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;print("Go to osteo!") &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;storyboard.gotoScene( "osteomyelitis", {effect="crossFade", time= 400} ) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;return true &nbsp;&nbsp;&nbsp;&nbsp;end

You still need to return true to keep the event from propagating other wise.

GP_Animations · November 9, 2013, 7:54pm

Thanks, Rob. I used your code, but unfortunately, it still results in the labels changing color even without an over phase.

Here’s a quick video demo to show you rather than try to explain it.

http://www.youtube.com/watch?v=BnUR6LfbPHM

rob · November 9, 2013, 8:08pm

I’m going to suggest you file a bug report on this. I’m not sure this is a condition that the button’s were meant to do, but the label should restore afterwards. So file a bug report and see if engineering can fix it.

Rob

GP_Animations · November 9, 2013, 8:50pm

Okay, thanks Rob. I just submitted a bug report.

Before I sent it in, I actually updated to yesterday’s daily build and tested it on my iPhone 5 and got the same result. I just wanted to make sure it wasn’t old build/simulator related.

I stripped it down to a bare-bones example and it still has the same issues in case you’d like to see it: http://www.gpanimations.com/scrollview.zip

rob · November 9, 2013, 6:38pm