Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Window
Started by horacebury Nov 01 2010 04:55 PM

- - - - -
46 replies to this topic
[TOPIC CONTROLS]
Page 2 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#26

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Ok, so, I've been working on this slider and it's still called SliderTest, but I've put in as much functionality as I can, minus one thing, which I'll keep to myself til I have the time, but it'll be worth it...

Anyway, the new code is here: https://files.me.com/horacebury/qowp06

This version:

Debugged and structured properly - now uses nested display groups,
Sliders can be variable or not - not means they will always gravitate to one end or the other,
When variable the slider can be positioned anywhere in the viewport,
When any slider is fully at one end or the other and is tapped it fully slides to the other end,
Sliders can be given a speed - this is used to always move the slider to its destination at the same speed, no matter where it is released,
The touch area can be bigger (but not smaller) than the viewport - called viewport.bleed,
The optional over image will be used when the touch is within the optional range of the viewport - called viewport.range, defaults to 70 pixels,
Focus now clears itself properly,
Multi touch is supported,
Two optional callback functions can passed in:
onComplete is fired when the slide or variable drag is finished,
onMove is fired whenever a touch event's move phase drags the slider, regardless of isVariable value,
Both callbacks have the more useful event object passed back, including: id, phase, x position, state (3 string values, not boolean) and value,

I hope this can be useful to some and please let me know if you have any questions, problems, bugs or suggestions.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11006


[TOPIC: post.html]
#27

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

In case anyone is interested, I just uploaded a new version of the slider with rotation added. Use link in previous post.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11010


[TOPIC: post.html]
#28

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Ok, one more for tonight...

Just added:

3 functions (see end of main.lua) to set the position of the slider by x (-ve to +ve values), value (+ve only values) and "on"/"off" state,
Debugged double "ended" state callback firing.

Have fun,

Matt.
uid: 8271 topic_id: 3276 reply_id: 11013


[TOPIC: post.html]
#29

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Hmm, thought I had added everything I could think of. I was wrong...

I've added an extra parameter to the main newSlider call. This now takes a table with values left and right. These are image file names to be attached and repeated to the left and right of the slider for when the slider image width is smaller than the viewport width.

I've updated the example .zip with a wide slider at the top, so to see what I'm rambling about, download and take a look. Same link as before, but here it is again: https://files.me.com/horacebury/qowp06

Feel free to use the red, green and yellow parts.

For those whom want to know, the parts get added to the display group containing the slider image and have their isVisible value set if they are within the gap between the viewport and the slider image.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11025


[TOPIC: post.html]
#30

DavidBFox

[GLOBAL: userInfoPane.html]
DavidBFox
  • Contributor

  • 179 posts
  • Corona SDK

Hi Matt -- looks like you're making great progress on this!

I took a look and saw a few minor issues...

In the version I gave you before, I made sure that the button highlight only activated when you clicked on the button portion itself rather than the rest of the slider, mimicking Apple's implementation. In your version, that feature was lost. Was that intentional, or just the result of your refactoring?

I'm also thinking that rather than using a single background with a bunch of cut-outs, what about using a small cut-out that's just the right size to mask the slider and include that as part of the slider's group. That way you just move the entire group to where you want it and don't have to worry about preparing the background. That should also work fine for when you want to rotate the slider. You'd then use a plain rectangle to fill in the rest of the screen as needed (behind the group).

I also notice that the top two buttons in the group of 4 were vertically too low by 1 pixel. The Y value should be y=343 instead of 344.
uid: 9905 topic_id: 3276 reply_id: 11038


[TOPIC: post.html]
#31

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Ok, just one more.

This update allows multiple images to be used on either side of the slider image. To demonstrate, I've cut up the red, green and yellow strips into smaller images not all the same width) and provided tables of their names. The slider accepts the image names in order from left to right, so if you're cutting up your images in that direction, just list their filenames in that order for both sides.

I've also fixed a bug with the 'over' image, so now it won't break if an over image isn't used and the over image is faded into view when the touch is within range of the over image/tab, not just the whole viewport.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11039


[TOPIC: post.html]
#32

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Hi David,

Yes, I noticed the pixel problem too and fixed it in the previous version.

I've thought about the foreground image being part of the slider group and will put that in in the next version. I also want the rotation values and parent group x,y values to be taken into account - so the slider can be moved anywhere and not forget about it's place in the world. This would solve the problem @f2cx was having. Funnily enough, it would also allow the root slider display group to be given a physics body and thrown around, but that's just a side effect of being aware of it's world location.

Lots more ideas and plans to make the scrolling popup menu using a similar mechanism.

Thanks for the feedback, I hope the control is useful.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11041


[TOPIC: post.html]
#33

DavidBFox

[GLOBAL: userInfoPane.html]
DavidBFox
  • Contributor

  • 179 posts
  • Corona SDK

Hi Matt,

I'm not seeing a fix to what I described about the button 'over' image. It should only highlight if you actually tap or touch that portion. I see it highlighting no matter where on the slider you touch.

Also, if you touch on the button and slide your finger out of the range before releasing (without moving the slider horizontally at all), the slider should not move (that should represent a "Cancel" event). The earlier versions (including mine) worked that way. That also matches Apple's UI standards.

Re using physics... so, sounds like a game? You launch a slider group into the air and see if you can slide it before it lands? Maybe it's an on-off switch on a bomb? (just kidding... but hey...)
uid: 9905 topic_id: 3276 reply_id: 11042


[TOPIC: post.html]
#34

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Ok, no problem. My implementation shows the over image when the touch is in range of the over image. I'll work on the improved version later...

Matt.
uid: 8271 topic_id: 3276 reply_id: 11043


[TOPIC: post.html]
#35

f2cx

[GLOBAL: userInfoPane.html]
f2cx
  • Enthusiast

  • 78 posts
  • Corona SDK

Thanks for this work, top useful.

I found a way to keep the position of a slider on/off when changing screen; and it works! Here are changements I did:

a) In sliderOnOff.lua

--I CREATE A NEW FUNCTION
function lastPosi()
if (initon) then
img.x = img.minx
else
img.x = img.maxx
end
end


b) In screen2.lua (suppose the slider on/off is in this screen)

--FUNCTION AMENDED
function firstOption( event )
--Do something..., for example
media.setSoundVolume (event.value)

--I ADDED this code to invert value of "initon"
if (initon) then
initon = false
else
initon = true
end
end
c) In screen2.lua

--FUNCTION AMENDED
function CreateMainMenuPanel()
-- create display group
mainmenupanel = display.newGroup()

-- add sliders
--AMENDED, Put "initon" as last parameter instead of true or false
mainmenupanel.aslider = slider.NewSlider( mainmenupanel, "onoff.png", iphoneDimensions.firstviewport, firstOption, false, initon)
--ADDED, to activate lastPosi
mainmenupanel.sliderP = slider.lastPosi()
end
I hope it's clear, and maybe useful.
uid: 8970 topic_id: 3276 reply_id: 11109


[TOPIC: post.html]
#36

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Hi f2cx, is this a modification to my latest code or the original?

m
uid: 8271 topic_id: 3276 reply_id: 11142


[TOPIC: post.html]
#37

f2cx

[GLOBAL: userInfoPane.html]
f2cx
  • Enthusiast

  • 78 posts
  • Corona SDK

The original (with radioactive image).
The same principe is also ok for your last version (in this case, read "function defaultCallback" instead of function firstOption".
uid: 8970 topic_id: 3276 reply_id: 11146


[TOPIC: post.html]
#38

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Latest code is up at the usual url. This includes:

Some slight tweaks to the rotation code to make it more accurate,
Very slight performance increase in the touch range checking,
The addition of an onCancel callback for when the slider is left in the same position as it start and the release is made out of range,
Highlighting of the tab using the over image only when the tab is initially touched.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11229


[TOPIC: post.html]
#39

DavidBFox

[GLOBAL: userInfoPane.html]
DavidBFox
  • Contributor

  • 179 posts
  • Corona SDK

Matt, looks great! Thanks for the polishing it up!
uid: 9905 topic_id: 3276 reply_id: 11279


[TOPIC: post.html]
#40

dweezil

[GLOBAL: userInfoPane.html]
dweezil
  • Contributor

  • 568 posts
  • Corona SDK

is f2cx's modification in the latest version?

Would be nice for it to remember the state of the slider?

Or should I just have a global variable in my maim.lua that keeps the state of an option and do this....

if(opt_music == "true") then
mainmenupanel.musicslider:setState( "on" )
else
mainmenupanel.musicslider:setState( "off" )
end
uid: 9371 topic_id: 3276 reply_id: 11605


[TOPIC: post.html]
#41

dweezil

[GLOBAL: userInfoPane.html]
dweezil
  • Contributor

  • 568 posts
  • Corona SDK

I've tried creating a global variable in main.lua and it seems to be picked up in the screen that has the sliders but cannot seem to set it to anything else in the event for the slider. The global variable value remains the same! Uh?
uid: 9371 topic_id: 3276 reply_id: 11608


[TOPIC: post.html]
#42

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

What is it you're aiming for here? The state of the slider is basically the position of the slider within the viewport. That should not change if the parent display group is moved.

Matt.
uid: 8271 topic_id: 3276 reply_id: 11620


[TOPIC: post.html]
#43

dweezil

[GLOBAL: userInfoPane.html]
dweezil
  • Contributor

  • 568 posts
  • Corona SDK

I've cracked it. What I wanted to do was have a global variable that kept the state of an option. Then initialise the slider with the value and update the variable when the slider is changed. I've done that now and it's working. Thanks for your help and slider!

I wonder if you could create a widget that had a arrow on the left and an arrow on the right and a value in the middle.
uid: 9371 topic_id: 3276 reply_id: 11621


[TOPIC: post.html]
#44

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Sure; is there a standard UI control the widget would impersonate? I'm not sure I can picture what you're describing - unless you're talking about just placing an arrow image on either side of the slider. All the images in the slider are passed in as arguments, so you can customise it quite a lot...

Matt.
uid: 8271 topic_id: 3276 reply_id: 11627


[TOPIC: post.html]
#45

dweezil

[GLOBAL: userInfoPane.html]
dweezil
  • Contributor

  • 568 posts
  • Corona SDK

Well was thinking of a slider that showed a value, so you could set it to 1,2,3,4 and 5

Does that exist already in the slider widget?
uid: 9371 topic_id: 3276 reply_id: 11629


[TOPIC: post.html]
#46

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

I've been thinking of some extras. Snap to fixed points should easy.

M
uid: 8271 topic_id: 3276 reply_id: 11634


[TOPIC: post.html]
#47

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,073 posts
  • Corona SDK

Ok, check the usual download link for a new slider. I've added the ability to define a step count. Take a look at port7 to see how to define it. The step count is the literal number of steps within the viewport. So, if you want the slider to snap between full left, full right and the centre set the step count to 3. I've not modified the foreground image, so you'll have to pretend that there are mitre points or something. All in all it was a fairly easy change, though it did show that there are multiple callbacks being made for each move event. This should be ok if you simply check the previous callback value when received.

Other ideas I have are things like multiple sliders within the viewport, etc, but that one in particular would be very tricky and I don't tend to code things like that without knowing exactly how it's going to work before-hand. Please let me know any suggestions or if that would be particularly useful (I can't honestly think of a use for it right now!)

Matt.
uid: 8271 topic_id: 3276 reply_id: 11643



[topic_controls]
Page 2 of 2 1 2
 
[/topic_controls]