Using a wheel as a slider widget to increase or decrease a number.

Solar2D General Questions/Discussion
#1

Hello

i saw  a video from Corona Labs today showcasing some App games.  In one of the games called “BoneShaker”, i saw an image of a wheel that was being used to drive the game character along the screen.  the purpose of the wheel and th euser spinning the wheel was to move the character forward in the game and at the same time a distance was being displayed on the screen to indicate the character progress. 

i would be very interested to see how this customised slider worked, and i think i can use this idea in my app for allowing the user to “spin” a number up or down using much more accuaracy in the case where my scale is large.

Using a standard slider the scale i want to use is so big i cannot get the fine steps i want, and i see this “wheel” idea as the way to go.  effectivley the wheel can be spun many times to cover my scale range.

see attached image from the App game.

Regards

Bruce.

#2

the easiest approach to this is, create an object, add touch event on it. make the ability to rotate it on touch, use the angle of the object for your scale

#3

I have been able to implement a simple wheel spin and get the angle of rotation as you suggest, i found some code example of this to calculate my angle and display a value which i can spin up or down.

However one of the main issues i want to overcome is to count the numbers of spins and keep on increasing my value (or decreasing). i managed to get some work arounds to mostly count my spins by a simple method, where i add 1 to my count if the angle > 359, ie so i am passing through the start point of my spin.  This largely works but if can miss a count if you are not precise enough with your touching and moving of the image.

I was hoping someone out there had already over come this issue and come up with a function to allow multiple spins of a wheel to keep increasing, or decreasing a value.

my function so far is as below. as i display the value of my spin in a text field (myValue), which also acts as an external memory of the last value.

Inside my local touchEvent function i have:

local source = 0

local spinScale = 10   – to allow the spin wheel to have more or less resolution in terms of scale, so here 1 spin = 360 deg = 3600 in user value terms. 

– In the began phase, capture some original locations and calculate the original adjustment.

    if(event.phase == “began”) then

        local dx = event.x - (spinWheel.x)

        local dy = event.y - (spinWheel.y)

        adjustment = math.atan2(dy,dx) * 180 / math.pi - spinWheel.rotation

    – In the moved phase, the player is dragging their finger or stylus around the screen.

    – We’ll grab the new event location and rotate the spin wheel accordingly.

    elseif(event.phase == “moved”) then

        local dx = event.x - spinWheel.x

        local dy = event.y - spinWheel.y

        spinWheel.rotation = (math.atan2(dy,dx) * 180 / math.pi) - adjustment

     source = tonumber(myValue.text)

    local numRotations = math.floor(source/spinScale / 359.9)

    local numRotations1 = math.ceil(source/spinScale / 360)

    if(source/spinScale - dest > 355) then

        countspins = countspins + 1

    end

   

    if((countspins > numRotations) and (numRotations > 0)) then countspins = numRotations end

    if(countspins > math.floor(someMaxValue/(360*spinScale))) then countspins = math.floor(someMaxValue/(360*spinScale)) - 1 end

   

local spinValue = (360*countspins*spinScale) + dest * spinScale

    if(spinValue > someMaxValue) then spinValue = someMaxValue end

 

– display value of spin in a text field

myValue.text = string.format("%.0f", spinValue)

 

    elseif(event.phase == “ended” or event.phase == “cancelled”) then

        – release the focus on the spin wheel

        display.getCurrentStage():setFocus( event.target,

As mentioned this largely works, but it can miss count the spins depending on how accurate the touch event is with regards to the image.

Regards

Bruce

#4

why don’t you use the .rotation provided on Corona?

it’s much easier. i’ve made a simple example to show you how it work, study from there, hope this helps:

local majorGroup=display.newGroup() local group=display.newGroup() local rect=display.newRect(0, 0, 50, 50) local rectCorner=display.newRect(25,25,5,5) rectCorner:setFillColor(1,0,0) group:insert(rect) group:insert(rectCorner) group.anchorX=0.5 group.anchorY=0.5 majorGroup:insert(group) majorGroup.x=display.contentWidth\*.5 majorGroup.y=display.contentHeight\*.5 local counter=0 local options={ text=counter, x=0, y=75, fontSize=20 } local text=display.newText(options) majorGroup:insert(text) local function rotate\_wheel() group:rotate(10) print (group.rotation, group.rotation%360) if group.rotation%360==0 then counter=counter+1 text.text=counter end end timer.performWithDelay(1,rotate\_wheel,0)
#5

hello carlocosta

thanks for the code and i see how it works, very nicely.  But i want the user to manually turn the “wheel” to get a desired value and this is where sometimes during the touch event of rotating my object the user’s finger can wander too much over the image and can cause the miss count of the spins.  if i am very careful and always keep my touch to the outter edge of my wheel i can get the spin count to largely work as i want.  however if my touch goes too much to the inside or towards the center of the image then this is when the miss count seems too ocurr.

regards

bruce.

#6

the easiest approach to this is, create an object, add touch event on it. make the ability to rotate it on touch, use the angle of the object for your scale

#7

I have been able to implement a simple wheel spin and get the angle of rotation as you suggest, i found some code example of this to calculate my angle and display a value which i can spin up or down.

However one of the main issues i want to overcome is to count the numbers of spins and keep on increasing my value (or decreasing). i managed to get some work arounds to mostly count my spins by a simple method, where i add 1 to my count if the angle > 359, ie so i am passing through the start point of my spin.  This largely works but if can miss a count if you are not precise enough with your touching and moving of the image.

I was hoping someone out there had already over come this issue and come up with a function to allow multiple spins of a wheel to keep increasing, or decreasing a value.

my function so far is as below. as i display the value of my spin in a text field (myValue), which also acts as an external memory of the last value.

Inside my local touchEvent function i have:

local source = 0

local spinScale = 10   – to allow the spin wheel to have more or less resolution in terms of scale, so here 1 spin = 360 deg = 3600 in user value terms. 

– In the began phase, capture some original locations and calculate the original adjustment.

    if(event.phase == “began”) then

        local dx = event.x - (spinWheel.x)

        local dy = event.y - (spinWheel.y)

        adjustment = math.atan2(dy,dx) * 180 / math.pi - spinWheel.rotation

    – In the moved phase, the player is dragging their finger or stylus around the screen.

    – We’ll grab the new event location and rotate the spin wheel accordingly.

    elseif(event.phase == “moved”) then

        local dx = event.x - spinWheel.x

        local dy = event.y - spinWheel.y

        spinWheel.rotation = (math.atan2(dy,dx) * 180 / math.pi) - adjustment

     source = tonumber(myValue.text)

    local numRotations = math.floor(source/spinScale / 359.9)

    local numRotations1 = math.ceil(source/spinScale / 360)

    if(source/spinScale - dest > 355) then

        countspins = countspins + 1

    end

   

    if((countspins > numRotations) and (numRotations > 0)) then countspins = numRotations end

    if(countspins > math.floor(someMaxValue/(360*spinScale))) then countspins = math.floor(someMaxValue/(360*spinScale)) - 1 end

   

local spinValue = (360*countspins*spinScale) + dest * spinScale

    if(spinValue > someMaxValue) then spinValue = someMaxValue end

 

– display value of spin in a text field

myValue.text = string.format("%.0f", spinValue)

 

    elseif(event.phase == “ended” or event.phase == “cancelled”) then

        – release the focus on the spin wheel

        display.getCurrentStage():setFocus( event.target,

As mentioned this largely works, but it can miss count the spins depending on how accurate the touch event is with regards to the image.

Regards

Bruce

#8

why don’t you use the .rotation provided on Corona?

it’s much easier. i’ve made a simple example to show you how it work, study from there, hope this helps:

local majorGroup=display.newGroup() local group=display.newGroup() local rect=display.newRect(0, 0, 50, 50) local rectCorner=display.newRect(25,25,5,5) rectCorner:setFillColor(1,0,0) group:insert(rect) group:insert(rectCorner) group.anchorX=0.5 group.anchorY=0.5 majorGroup:insert(group) majorGroup.x=display.contentWidth\*.5 majorGroup.y=display.contentHeight\*.5 local counter=0 local options={ text=counter, x=0, y=75, fontSize=20 } local text=display.newText(options) majorGroup:insert(text) local function rotate\_wheel() group:rotate(10) print (group.rotation, group.rotation%360) if group.rotation%360==0 then counter=counter+1 text.text=counter end end timer.performWithDelay(1,rotate\_wheel,0)
#9

hello carlocosta

thanks for the code and i see how it works, very nicely.  But i want the user to manually turn the “wheel” to get a desired value and this is where sometimes during the touch event of rotating my object the user’s finger can wander too much over the image and can cause the miss count of the spins.  if i am very careful and always keep my touch to the outter edge of my wheel i can get the spin count to largely work as i want.  however if my touch goes too much to the inside or towards the center of the image then this is when the miss count seems too ocurr.

regards

bruce.