Custom Dialer UI

Create fast, sprite powered games with Animation Engine, co-developed with DerBrill Software!

Moderators: heatherlaine, kevinmiller, robinmiller, malte

Post Reply
jpatten
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 44
Joined: Tue May 06, 2008 11:24 pm

Custom Dialer UI

Post by jpatten » Sun Apr 14, 2013 4:00 am

Hello...

Working on creating a custom dialer UI. I'm using this previous post, http://forums.runrev.com/viewtopic.php?f=27&t=34.

This works, sort of, however the user has to click on the notch and not the dial to spin the control.

Is there any any way to create the group object and make the whole top surface of the dial rotate the notch when dragging?

Image

Thank you!

shaosean
Posts: 824
Joined: Thu Nov 04, 2010 7:53 am

Re: Custom Dialer UI

Post by shaosean » Sun Apr 14, 2013 6:27 am

You could always do some quick math between the mouseLoc and the loc of the notch and then just do as you are currently doing.. Would just need to do an additional check to ensure that the mouse has not moved outside of the dial..

jpatten
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 44
Joined: Tue May 06, 2008 11:24 pm

Re: Custom Dialer UI

Post by jpatten » Sun Apr 14, 2013 7:02 pm

Thanks shaosean...

However, there still something I'm not completely understanding about your suggestion. The complete dial is two objects the notch, which moves around the dial, and the static dial.

As I'm thinking this type of interface would be nice on a tablet, accuracy of where the user's finger is touching is not too important provided they are touching on a part of the dial image.

I can use a mouseStillDown on the static dial image and run the same script as the notch graphic:

Code: Select all

 on mouseStill Down --on static dial image
 local thePercent,theAngle
   put item 1 of the constrainCircular of grc "notch" into myX
   put item 2 of the constrainCircular of grc "notch" into myY
   put findAngleX(myX,myY, the mouseLoc) into theAngle
   put theAngle/3.6 into thePercent
   --do something wit thePercent here 

   put thePercent into cd fld "readout"
   pass mouseStillDown
end mouseStilldown
The percent is still reported to the cd fld "readout" albeit a little more jerky in its reporting, but the actual notch graphic does not move anywhere on the dial. I believe this is because the constrainCircular call contains the move, or grab calls? Since I am not actually clicking on the notch the constrainCircular call is not moving the notch graphic. I am not sure if this is correct or not?

There probably is a better way to do this, but I was looking for a simplified strategy for creating a custom UI dial and thought AE might be able to simplify the process.

Is there a way to actually move the notch graphic using ConstrainCircular without actually clicking and dragging the notch graphic?

Thank you!

malte
Posts: 1098
Joined: Thu Feb 23, 2006 8:34 pm
Location: Ostenfeld germany
Contact:

Re: Custom Dialer UI

Post by malte » Sun Apr 14, 2013 7:26 pm

Hi,

constrainCircular will not help you much in this case, as the target receiving it would be the notch. I Guess what I would do is to disable the notch graphic (you might need to fiddle with the colors a little after the disabling and then in the static dial image put something like this:

Code: Select all

on mouseDown
  set the uAllowDrag of me to true
end mouseDown

on mouseRelease
  set the uAllowDrag of me to false
end mouseRelease

on mouseUp
  mouseRelease
end mouseUp

on mouseMove x,y -- might want to switch to touchMove for mobile
   if not the uAllowDrag of me then pass mouseMove
   local isAngle
   put findAngleX(the loc of me,x,y) into isAngle
  set the loc of grc "notch" to pointOnCircle(the loc of me,isAngle,100)
end mouseMove
Hope that helps,

Malte

jpatten
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 44
Joined: Tue May 06, 2008 11:24 pm

Re: Custom Dialer UI

Post by jpatten » Sun Apr 14, 2013 9:59 pm

Thanks Malte!

That get's me pretty close. The value does jump if the user touches opposite the location of the notch n the dialer...but that could also be called a feature of a digital dial ;)

One thing though, when testing in simulator, when I changed the script to a touchMove command the notch image would not animate correctly. When I switched it back to mouseMove the notch animated correctly in the simulator.

Actually I left the notch script with the mouseMove and the dial graphic with a touchMove and noticed the mouseMove worked but the touchMove did not work correctly. That was how I discovered mouseMove worked in the simulator.

I will try on actual iOS device and see if that is the case on the actual device. If it is, then that leads me to believe that MouseMove is being translated correctly to touchMove by LiveCode.

Thanks Again!

malte
Posts: 1098
Joined: Thu Feb 23, 2006 8:34 pm
Location: Ostenfeld germany
Contact:

Re: Custom Dialer UI

Post by malte » Sun Apr 14, 2013 10:41 pm

Well, mouseMove does get translated on mobile devices, however, only the *first* touch event is translated. This might be a desirable effect, but sometimes it is not. touchMove has an additional parameter for the touch ID (which touch was it) so things are a little trickier there. You can see how I handled this for the constraining handlers in the animationengine sources if you are interested. :-)

All the best,

Malte

Post Reply

Return to “Animation Engine”