add display object in widget scrollview

Solar2D General Questions/Discussion
#1

hi i’m trying to add display object on a scrollview widget and to close the widget to remove the space between

two objects but i don’t know how to do

i can remove the square in the scrollview but i don’t know how to reinsert it in the scrollview

local widget = require( “widget” )

local screenGroup = display.newGroup()

local clik = 0

scrollView = widget.newScrollView

{

        width = screenW,

        height = 200,

        scrollWidth = 1200,

        scrollHeight = 100,

        verticalScrollDisabled = true,

        hideBackground = true,

}

 local function onRectangleTouch(event)

      local t  = event.target

      if event.phase == “began” then

        if (event.target ~= nil) then

        clik = 1

        local parent = t.parent

        parent:insert(t)

        display.getCurrentStage():setFocus(t)

        t.isFocus = true

        t.markX = event.xStart    

        t.markY = event.yStart

        screenGroup:insert(t)

        end

      elseif event.phase == “moved” then

        if (clik ~= 0) then

            t.x = (event.x - event.xStart) + t.markX

            t.y = (event.y - event.yStart) + t.markY

        end

      elseif event.phase == “ended”  then

       display.getCurrentStage():setFocus(nil)

       t.isFocus = False

       clik = 0

      end

      return true

end

local rectangle = {}

for i=1, 5 do

    rectangle[i] = display.newRect( 50 + (i*60), 100, 50, 50 )

    rectangle[i]:setFillColor(1,0,0)

    rectangle[i]:addEventListener(“touch”,onRectangleTouch)

    scrollView:insert( rectangle[i] )

end

screenGroup:insert(scrollView)

#2

You resinsert the same way you are doing it in your for statement.

scrollView:insert(recObj)

When using “group:insert” it does the remove and add for you so in your code above you are saying move it out of the scrollView group and into the sceneGroup so all you have to do is add a elseif (event.phase == “ended”) then and say scrollView:insert(t) and it will move it back to the scrollView for you.

#3

thanks for the reply

but it doesn’t work, i mean when i drag the square out of the widget it’s ok but when i want to drag  the square in the widget i want to

put it in the widget, don’t know if i have to add physics, to be able to detect the collision between the display object and the scrollview 

#4

I think I understand what you are trying to do.

So you are going to need to break up your code because you will have to detect a few things like is it in the scrollview or not so for example if you add something like rect.inscrollview and set it to false when it is dragged out and then to true when it is back in.

Then in your touch event you will need to put in something like if (t.inscrollview == true) then do logic for scrollview else do logic for main group etc.

You are also going to need to modify your touch event to detect if it is within range this has nothing to do with physics it is just a simple if event.x > scrollview.x and event.x < (scrollview.x + scrollview.width) type logic.

#5

i’ll try without physics

i want to do something like this

local physics = require(“physics”)

local widget = require( “widget” )

physics.start()

physics.setDrawMode(“normal”)

physics.setGravity(0,0)

local screenGroup = display.newGroup()

local clik = 0

display.setStatusBar( display.HiddenStatusBar )

– Variables

local stateMachine

local currentTarget = nil

local isHighlighted = false

scrollView = widget.newScrollView

{

        width = screenW,

        height = 200,

        scrollWidth = 1200,

        scrollHeight = 100,

        verticalScrollDisabled = true,

}

scrollView.y = -111

scrollView.name = “holder”

physics.addBody(scrollView,“dynamic”)

scrollView.isSensor = true

local myTarget = display.newRoundedRect(100,200,69,69,3)

myTarget:setFillColor(100,100,100)

myTarget.name = “holder”

physics.addBody(myTarget,“dynamic”)

myTarget.isSensor = true

local myTarget1 = display.newRoundedRect(180,200,69,69,3)

myTarget1:setFillColor(100,100,100)

myTarget1.name = “holder2”

physics.addBody(myTarget1,“dynamic”)

myTarget1.isSensor = true

local myObject = display.newRoundedRect(50,50,67,67,3); 

myObject:setFillColor(0,0,255)

myObject.x = 100

myObject.y = 100

myObject.name = “letter”

physics.addBody(myObject,“static”)

function myObject:touch(event)

    local t = event.target

    – printTouch(event)

    local phase = event.phase

    if phase == “began” then

    – Make target the top-most object

    local parent = t.parent

    parent:insert(t)

    display.getCurrentStage():setFocus(t)

    – This flag is to prevent spurious events being sent to the target

    t.isFocus = true

    – Store initial position

    t.x0 = event.x - t.x

    t.y0 = event.y - t.y

    – Make myObject temporarily kinematic

    event.target.bodyType = “kinematic”

    – Stop current motion, if any

    event.target:setLinearVelocity(0,0)

    event.target.angularVelocity = 0

    elseif t.isFocus then

        if phase == “moved” then

            t.x = event.x - t.x0

            t.y  = event.y - t.y0

        elseif phase == “ended” or phase == “cancelled” then

            if currentTarget ~= nil and isHighlighted then

                – Move piece to target

                transition.to(t,{

                    time = 150,

                    x = currentTarget.x,

                    y = currentTarget.y

                })

                currentTarget = nil

                isHighlighted = false

            end

            display.getCurrentStage():setFocus(nil)

            t.isFocus = false

            – Switch body type back to “static”

            event.target.bodyType = “static”

        end

    end

    

    return true

end

– make myObject listen for touch events

myObject:addEventListener(“touch”,myObject)

local function onLocalCollision( self, event )

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

        print( self.name … ": collision began with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“on”, customData = self});

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

        print( self.name … ": collision ended with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“off”, customData = self});

    end

end

scrollView.collision = onLocalCollision

scrollView:addEventListener( “collision”, scrollView )

myTarget1.collision = onLocalCollision

myTarget1:addEventListener( “collision”, myTarget1 )

–Create an empty group to use as a listener for custom events

stateMachine = display.newGroup();

–Centralized logic control

function stateMachine:highlight(e)

    if(e.state == “on”) then

        --print("Highlight on: " … e.customData.object1.name)

        currentTarget = e.customData

        isHighlighted = true

        --e.customData:setFillColor(255,255,0)

    elseif(e.state == “off”) then

        currentTarget = nil

        isHighlighted = false

        --print("Highlight off: " … e.customData.other.name)

        --e.customData:setFillColor(100,100,100)

    end

    

end

stateMachine:addEventListener(“highlight”, stateMachine);

#6

If you are using physics all bodies have to be within the same space, ie: they all have to be in the same group etc.

#7

can you help me to find an alorithm? 

in the code, i can place the blue square inside the white square and move out the blue square too then i’m going to do the same thing 

but differently i’ll create the white square inside the scrollview so i’ll be able to put the blue square inside the white square who is situated

in the scrollview, 

I don’t know if there is a simpler method, i’m still a beginner

#8

when u talk about the same group,

you mean in the same group display?

#9

i’m almost done i juste have a little problem,

i can’t get  out my object from the scollview

local widget = require( “widget” )

local screenGroup = display.newGroup()

local physics = require(“physics”)

physics.start()

physics.setDrawMode(“normal”)

physics.setGravity(0,0)

local stateMachine

local currentTarget = nil

local isHighlighted = false

– Create a ScrollView

local scrollView = widget.newScrollView

{

        width = display.contentWidth,

        height =200,

        verticalScrollDisabled = true,

        hideBackground = true,

}

 local function onRectangleTouch(event)

      local t  = event.target

      if event.phase == “began” then

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

        t.markX = t.x    

        t.markY = t.y

        screenGroup:insert(event.target)

      elseif event.phase == “moved” then

        t.x = (event.x - event.xStart) + t.markX

        t.y = (event.y - event.yStart) + t.markY

      elseif event.phase == “ended”  then

       display.getCurrentStage():setFocus(nil)

      end

      return true

end

local rectangle = {}

for i=1,3 do

    rectangle[i] = display.newRoundedRect( 50 + (i*120), 100, 100, 100, 3)

    rectangle[i]:setFillColor(1,1,1)

    rectangle[i].name = “holder”

    physics.addBody(rectangle[i], “dynamic”)

    rectangle[i].isSensor = true

    --rectangle[i]:addEventListener(“touch”,onRectangleTouch)

    scrollView:insert( rectangle[i] )

end

screenGroup:insert(scrollView)

–[[local myTarget = display.newRoundedRect(100,0,103,103,3)

myTarget:setFillColor(100,100,100)

myTarget.name = “holder”

physics.addBody(myTarget,“dynamic”)

myTarget.isSensor = true

–myTarget.alpha = 0

local myTarget1 = display.newRoundedRect(210,100,103,103,3)

myTarget1:setFillColor(100,100,100)

myTarget1.name = “holder2”

physics.addBody(myTarget1,“dynamic”)

myTarget1.isSensor = true

local myTarget2 = display.newRoundedRect(320,100,103,103,3)

myTarget2:setFillColor(100,100,100)

myTarget2.name = “holder3”

physics.addBody(myTarget2,“dynamic”)

myTarget2.isSensor = true

local myTarget3 = display.newRoundedRect(430,0,103,103,3)

myTarget3:setFillColor(100,100,100)

myTarget3.name = “holder3”

physics.addBody(myTarget3,“dynamic”)

myTarget3.isSensor = true

local myTarget4 = display.newRoundedRect(540,0,103,103,3)

myTarget4:setFillColor(100,100,100)

myTarget4.name = “holder4”

physics.addBody(myTarget4,“dynamic”)

myTarget4.isSensor = true]]

local myObject = display.newRoundedRect(50,50,100,100,3); 

myObject:setFillColor(0,0,1)

myObject.x = 100

myObject.y = 100

myObject.name = “letter”

physics.addBody(myObject,“static”)

function myObject:touch(event)

    local t = event.target

    – printTouch(event)

    local phase = event.phase

    if phase == “began” then

    – Make target the top-most object

    local parent = t.parent

    parent:insert(t)

    display.getCurrentStage():setFocus(t)

    – This flag is to prevent spurious events being sent to the target

    t.isFocus = true

    – Store initial position

    t.x0 = event.x - t.x

    t.y0 = event.y - t.y

    – Make myObject temporarily kinematic

    event.target.bodyType = “kinematic”

    – Stop current motion, if any

    event.target:setLinearVelocity(0,0)

    event.target.angularVelocity = 0

    elseif t.isFocus then

        if phase == “moved” then

            t.x = event.x - t.x0

            t.y  = event.y - t.y0

        elseif phase == “ended” or phase == “cancelled” then

            if currentTarget ~= nil and isHighlighted then

                – Move piece to target

                transition.to(t,{

                    time = 150,

                    x = currentTarget.x,

                    y = currentTarget.y,

                })

                scrollView:insert(t)

                currentTarget = nil

                isHighlighted = false

            end

            display.getCurrentStage():setFocus(nil)

            t.isFocus = false

            – Switch body type back to “static”

            event.target.bodyType = “static”

        end

    end

    return true

end

– make myObject listen for touch events

myObject:addEventListener(“touch”,myObject)

local function onLocalCollision( self, event )

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

        print( self.name … ": collision began with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“on”, customData = self});

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

        print( self.name … ": collision ended with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“off”, customData = self});

    end

end

for k,v in pairs(rectangle) do

    rectangle[k].collision = onLocalCollision

    rectangle[k]:addEventListener( “collision”, rectangle[k] )

end

–[[myTarget.collision = onLocalCollision

myTarget:addEventListener( “collision”, myTarget )

myTarget1.collision = onLocalCollision

myTarget1:addEventListener( “collision”, myTarget1 )

myTarget2.collision = onLocalCollision

myTarget2:addEventListener( “collision”, myTarget2 )

myTarget3.collision = onLocalCollision

myTarget3:addEventListener( “collision”, myTarget3 )

myTarget4.collision = onLocalCollision

myTarget4:addEventListener( “collision”, myTarget4 )]]

–Create an empty group to use as a listener for custom events

stateMachine = display.newGroup();

–Centralized logic control

function stateMachine:highlight(e)

    if(e.state == “on”) then

        --print("Highlight on: " … e.customData.object1.name)

        currentTarget = e.customData

        isHighlighted = true

        e.customData:setFillColor(255,255,0)

    elseif(e.state == “off”) then

        currentTarget = nil

        isHighlighted = false

        --print("Highlight off: " … e.customData.other.name)

        e.customData:setFillColor(100,100,100)

    end

    

end

stateMachine:addEventListener(“highlight”, stateMachine);

#10

it’s ok i already found

#11

Just to clarify a point in this thread: when working with physics bodies and collisions, the objects can be in different display groups. However, you can not move/position the groups independently of each other. For example, you can’t put some physical objects in “myGroup1”, put other physical objects in “myGroup2”, then set “myGroup2.y = 100” (thus moving the entire group). This will break collision detection, because while the display objects in that group will move, the associated physics bodies will not.

Best regards,

Brent

#12

You resinsert the same way you are doing it in your for statement.

scrollView:insert(recObj)

When using “group:insert” it does the remove and add for you so in your code above you are saying move it out of the scrollView group and into the sceneGroup so all you have to do is add a elseif (event.phase == “ended”) then and say scrollView:insert(t) and it will move it back to the scrollView for you.

#13

thanks for the reply

but it doesn’t work, i mean when i drag the square out of the widget it’s ok but when i want to drag  the square in the widget i want to

put it in the widget, don’t know if i have to add physics, to be able to detect the collision between the display object and the scrollview 

#14

I think I understand what you are trying to do.

So you are going to need to break up your code because you will have to detect a few things like is it in the scrollview or not so for example if you add something like rect.inscrollview and set it to false when it is dragged out and then to true when it is back in.

Then in your touch event you will need to put in something like if (t.inscrollview == true) then do logic for scrollview else do logic for main group etc.

You are also going to need to modify your touch event to detect if it is within range this has nothing to do with physics it is just a simple if event.x > scrollview.x and event.x < (scrollview.x + scrollview.width) type logic.

#15

i’ll try without physics

i want to do something like this

local physics = require(“physics”)

local widget = require( “widget” )

physics.start()

physics.setDrawMode(“normal”)

physics.setGravity(0,0)

local screenGroup = display.newGroup()

local clik = 0

display.setStatusBar( display.HiddenStatusBar )

– Variables

local stateMachine

local currentTarget = nil

local isHighlighted = false

scrollView = widget.newScrollView

{

        width = screenW,

        height = 200,

        scrollWidth = 1200,

        scrollHeight = 100,

        verticalScrollDisabled = true,

}

scrollView.y = -111

scrollView.name = “holder”

physics.addBody(scrollView,“dynamic”)

scrollView.isSensor = true

local myTarget = display.newRoundedRect(100,200,69,69,3)

myTarget:setFillColor(100,100,100)

myTarget.name = “holder”

physics.addBody(myTarget,“dynamic”)

myTarget.isSensor = true

local myTarget1 = display.newRoundedRect(180,200,69,69,3)

myTarget1:setFillColor(100,100,100)

myTarget1.name = “holder2”

physics.addBody(myTarget1,“dynamic”)

myTarget1.isSensor = true

local myObject = display.newRoundedRect(50,50,67,67,3); 

myObject:setFillColor(0,0,255)

myObject.x = 100

myObject.y = 100

myObject.name = “letter”

physics.addBody(myObject,“static”)

function myObject:touch(event)

    local t = event.target

    – printTouch(event)

    local phase = event.phase

    if phase == “began” then

    – Make target the top-most object

    local parent = t.parent

    parent:insert(t)

    display.getCurrentStage():setFocus(t)

    – This flag is to prevent spurious events being sent to the target

    t.isFocus = true

    – Store initial position

    t.x0 = event.x - t.x

    t.y0 = event.y - t.y

    – Make myObject temporarily kinematic

    event.target.bodyType = “kinematic”

    – Stop current motion, if any

    event.target:setLinearVelocity(0,0)

    event.target.angularVelocity = 0

    elseif t.isFocus then

        if phase == “moved” then

            t.x = event.x - t.x0

            t.y  = event.y - t.y0

        elseif phase == “ended” or phase == “cancelled” then

            if currentTarget ~= nil and isHighlighted then

                – Move piece to target

                transition.to(t,{

                    time = 150,

                    x = currentTarget.x,

                    y = currentTarget.y

                })

                currentTarget = nil

                isHighlighted = false

            end

            display.getCurrentStage():setFocus(nil)

            t.isFocus = false

            – Switch body type back to “static”

            event.target.bodyType = “static”

        end

    end

    

    return true

end

– make myObject listen for touch events

myObject:addEventListener(“touch”,myObject)

local function onLocalCollision( self, event )

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

        print( self.name … ": collision began with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“on”, customData = self});

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

        print( self.name … ": collision ended with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“off”, customData = self});

    end

end

scrollView.collision = onLocalCollision

scrollView:addEventListener( “collision”, scrollView )

myTarget1.collision = onLocalCollision

myTarget1:addEventListener( “collision”, myTarget1 )

–Create an empty group to use as a listener for custom events

stateMachine = display.newGroup();

–Centralized logic control

function stateMachine:highlight(e)

    if(e.state == “on”) then

        --print("Highlight on: " … e.customData.object1.name)

        currentTarget = e.customData

        isHighlighted = true

        --e.customData:setFillColor(255,255,0)

    elseif(e.state == “off”) then

        currentTarget = nil

        isHighlighted = false

        --print("Highlight off: " … e.customData.other.name)

        --e.customData:setFillColor(100,100,100)

    end

    

end

stateMachine:addEventListener(“highlight”, stateMachine);

#16

If you are using physics all bodies have to be within the same space, ie: they all have to be in the same group etc.

#17

can you help me to find an alorithm? 

in the code, i can place the blue square inside the white square and move out the blue square too then i’m going to do the same thing 

but differently i’ll create the white square inside the scrollview so i’ll be able to put the blue square inside the white square who is situated

in the scrollview, 

I don’t know if there is a simpler method, i’m still a beginner

#18

when u talk about the same group,

you mean in the same group display?

#19

i’m almost done i juste have a little problem,

i can’t get  out my object from the scollview

local widget = require( “widget” )

local screenGroup = display.newGroup()

local physics = require(“physics”)

physics.start()

physics.setDrawMode(“normal”)

physics.setGravity(0,0)

local stateMachine

local currentTarget = nil

local isHighlighted = false

– Create a ScrollView

local scrollView = widget.newScrollView

{

        width = display.contentWidth,

        height =200,

        verticalScrollDisabled = true,

        hideBackground = true,

}

 local function onRectangleTouch(event)

      local t  = event.target

      if event.phase == “began” then

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

        t.markX = t.x    

        t.markY = t.y

        screenGroup:insert(event.target)

      elseif event.phase == “moved” then

        t.x = (event.x - event.xStart) + t.markX

        t.y = (event.y - event.yStart) + t.markY

      elseif event.phase == “ended”  then

       display.getCurrentStage():setFocus(nil)

      end

      return true

end

local rectangle = {}

for i=1,3 do

    rectangle[i] = display.newRoundedRect( 50 + (i*120), 100, 100, 100, 3)

    rectangle[i]:setFillColor(1,1,1)

    rectangle[i].name = “holder”

    physics.addBody(rectangle[i], “dynamic”)

    rectangle[i].isSensor = true

    --rectangle[i]:addEventListener(“touch”,onRectangleTouch)

    scrollView:insert( rectangle[i] )

end

screenGroup:insert(scrollView)

–[[local myTarget = display.newRoundedRect(100,0,103,103,3)

myTarget:setFillColor(100,100,100)

myTarget.name = “holder”

physics.addBody(myTarget,“dynamic”)

myTarget.isSensor = true

–myTarget.alpha = 0

local myTarget1 = display.newRoundedRect(210,100,103,103,3)

myTarget1:setFillColor(100,100,100)

myTarget1.name = “holder2”

physics.addBody(myTarget1,“dynamic”)

myTarget1.isSensor = true

local myTarget2 = display.newRoundedRect(320,100,103,103,3)

myTarget2:setFillColor(100,100,100)

myTarget2.name = “holder3”

physics.addBody(myTarget2,“dynamic”)

myTarget2.isSensor = true

local myTarget3 = display.newRoundedRect(430,0,103,103,3)

myTarget3:setFillColor(100,100,100)

myTarget3.name = “holder3”

physics.addBody(myTarget3,“dynamic”)

myTarget3.isSensor = true

local myTarget4 = display.newRoundedRect(540,0,103,103,3)

myTarget4:setFillColor(100,100,100)

myTarget4.name = “holder4”

physics.addBody(myTarget4,“dynamic”)

myTarget4.isSensor = true]]

local myObject = display.newRoundedRect(50,50,100,100,3); 

myObject:setFillColor(0,0,1)

myObject.x = 100

myObject.y = 100

myObject.name = “letter”

physics.addBody(myObject,“static”)

function myObject:touch(event)

    local t = event.target

    – printTouch(event)

    local phase = event.phase

    if phase == “began” then

    – Make target the top-most object

    local parent = t.parent

    parent:insert(t)

    display.getCurrentStage():setFocus(t)

    – This flag is to prevent spurious events being sent to the target

    t.isFocus = true

    – Store initial position

    t.x0 = event.x - t.x

    t.y0 = event.y - t.y

    – Make myObject temporarily kinematic

    event.target.bodyType = “kinematic”

    – Stop current motion, if any

    event.target:setLinearVelocity(0,0)

    event.target.angularVelocity = 0

    elseif t.isFocus then

        if phase == “moved” then

            t.x = event.x - t.x0

            t.y  = event.y - t.y0

        elseif phase == “ended” or phase == “cancelled” then

            if currentTarget ~= nil and isHighlighted then

                – Move piece to target

                transition.to(t,{

                    time = 150,

                    x = currentTarget.x,

                    y = currentTarget.y,

                })

                scrollView:insert(t)

                currentTarget = nil

                isHighlighted = false

            end

            display.getCurrentStage():setFocus(nil)

            t.isFocus = false

            – Switch body type back to “static”

            event.target.bodyType = “static”

        end

    end

    return true

end

– make myObject listen for touch events

myObject:addEventListener(“touch”,myObject)

local function onLocalCollision( self, event )

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

        print( self.name … ": collision began with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“on”, customData = self});

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

        print( self.name … ": collision ended with " … event.other.name )

        stateMachine:dispatchEvent({name=“highlight”, state=“off”, customData = self});

    end

end

for k,v in pairs(rectangle) do

    rectangle[k].collision = onLocalCollision

    rectangle[k]:addEventListener( “collision”, rectangle[k] )

end

–[[myTarget.collision = onLocalCollision

myTarget:addEventListener( “collision”, myTarget )

myTarget1.collision = onLocalCollision

myTarget1:addEventListener( “collision”, myTarget1 )

myTarget2.collision = onLocalCollision

myTarget2:addEventListener( “collision”, myTarget2 )

myTarget3.collision = onLocalCollision

myTarget3:addEventListener( “collision”, myTarget3 )

myTarget4.collision = onLocalCollision

myTarget4:addEventListener( “collision”, myTarget4 )]]

–Create an empty group to use as a listener for custom events

stateMachine = display.newGroup();

–Centralized logic control

function stateMachine:highlight(e)

    if(e.state == “on”) then

        --print("Highlight on: " … e.customData.object1.name)

        currentTarget = e.customData

        isHighlighted = true

        e.customData:setFillColor(255,255,0)

    elseif(e.state == “off”) then

        currentTarget = nil

        isHighlighted = false

        --print("Highlight off: " … e.customData.other.name)

        e.customData:setFillColor(100,100,100)

    end

    

end

stateMachine:addEventListener(“highlight”, stateMachine);

#20

it’s ok i already found