iOS Link UIPanGestureRecognizer output to UISlider?

[lexk]

I'm creating a musical app using libpd that has two ways of controlling the volume and pitch of a waveform - two independent UISliders and an XY pad using UIPanGestureRecognizer.

What I'd like to be able to do is to have the actions of the XY pad reflected by the sliders and so was wondering how/if that that was possible? (i.e. the Y axis is already controlling volume but to see the slider react to it as well)

This is where I'm at with the separate controls so far and any help would be greatly appreciated. Thanks!

// Volume slider
-(IBAction)sineVol:(id)sender
{
    UISlider *vslider = (UISlider *)sender;
    [PdBase sendFloat:vslider.value toReceiver:@"sine_vol"];
}

// Pitch slider    
-(IBAction)sinePitch:(id)sender
{
    UISlider *pslider = (UISlider *)sender;
    [PdBase sendFloat:pslider.value toReceiver:@"sine_pitch"];
}

// XY Pad
-(IBAction)sineXYPad:(UIPanGestureRecognizer *)trigger
{
    float sinepadHeight = sinexyview.bounds.size.height;
    float sinepadWidth = sinexyview.bounds.size.width;
    CGPoint location = [trigger locationInView:sinexyview];

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
    float sineVolXY = ((location.y) / 250);
    [PdBase sendFloat:sineVolXY toReceiver:@"sine_vol"];
}

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
    float sinePitchXY = ((location.x) / 5);
    [PdBase sendFloat:sinePitchXY toReceiver:@"sine_pitch"];
    }
}

 

[Duncan C]

I'm creating a musical app using libpd that has two ways of controlling the volume and pitch of a waveform - two independent UISliders and an XY pad using UIPanGestureRecognizer.

What I'd like to be able to do is to have the actions of the XY pad reflected by the sliders and so was wondering how/if that that was possible? (i.e. the Y axis is already controlling volume but to see the slider react to it as well)

This is where I'm at with the separate controls so far and any help would be greatly appreciated. Thanks!

// Volume slider
-(IBAction)sineVol:(id)sender
{
    UISlider *vslider = (UISlider *)sender;
    [PdBase sendFloat:vslider.value toReceiver:@"sine_vol"];
}

// Pitch slider    
-(IBAction)sinePitch:(id)sender
{
    UISlider *pslider = (UISlider *)sender;
    [PdBase sendFloat:pslider.value toReceiver:@"sine_pitch"];
}

// XY Pad
-(IBAction)sineXYPad:(UIPanGestureRecognizer *)trigger
{
    float sinepadHeight = sinexyview.bounds.size.height;
    float sinepadWidth = sinexyview.bounds.size.width;
    CGPoint location = [trigger locationInView:sinexyview];

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
    float sineVolXY = ((location.y) / 250);
    [PdBase sendFloat:sineVolXY toReceiver:@"sine_vol"];
}

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
    float sinePitchXY = ((location.x) / 5);
    [PdBase sendFloat:sinePitchXY toReceiver:@"sine_pitch"];
    }
}

Image

The value property of a slider is read/write. If you set the value, the slider moves to that position.

In your pan gesture recognizer action method, just set your sliders' values based on the sineVolXY and sinePitchXY you already calculate. (To do that you will need to create and link up outlets to your 2 sliders.)

 

[dejo]

In your pan gesture recognizer action method, just set your sliders' values based on the sineVolXY and sinePitchXY you already calculate. (To do that you will need to create and link up outlets to your 2 sliders.)

I believe the OP wants to use the "XY pad" (the gray area beneath the sliders) and have touches in that area affect the values shown for the two sliders. lexk, correct me if I'm wrong. I'm not really familiar with what an "XY pad" is.

 

[Duncan C]

I believe the OP wants to use the "XY pad" (the gray area beneath the sliders) and have touches in that area affect the values shown for the two sliders. lexk, correct me if I'm wrong. I'm not really familiar with what an "XY pad" is.

That was my understanding as well. The pan gesture recognizer action method is what gets triggered when the user slides his/her finger on the "XY pad". Simply adding code that sets the new value to the appropriate slider would accomplish his goal.

 

[lexk]

I believe the OP wants to use the "XY pad" (the gray area beneath the sliders) and have touches in that area affect the values shown for the two sliders. lexk, correct me if I'm wrong. I'm not really familiar with what an "XY pad" is.

Yep that is correct. Basically I'd want the values/output from the XY pad, which responds to the pan gesture recogniser, to be also shown by the sliders.

That was my understanding as well. The pan gesture recognizer action method is what gets triggered when the user slides his/her finger on the "XY pad". Simply adding code that sets the new value to the appropriate slider would accomplish his goal.

How exactly would I go about this?

Thanks

 

[Duncan C]

Yep that is correct. Basically I'd want the values/output from the XY pad, which responds to the pan gesture recogniser, to be also shown by the sliders.



How exactly would I go about this?

Thanks

Add outlets for your 2 sliders if you don't have them already. Let's call the outlets pitchSlider and volumeSlider. Connect them in IB (Interface Builder). Then add the 2 lines in bold to your XY Pad's action method:

// XY Pad
-(IBAction)sineXYPad:(UIPanGestureRecognizer *)trigger
{
    float sinepadHeight = sinexyview.bounds.size.height;
    float sinepadWidth = sinexyview.bounds.size.width;
    CGPoint location = [trigger locationInView:sinexyview];

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
      float sineVolXY = ((location.y) / 250);
      [COLOR="Red"][B]volumeSlider.value = sineVolXY;[/B][/COLOR]
      [PdBase sendFloat:sineVolXY toReceiver:@"sine_vol"];
    }
}

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
      float sinePitchXY = ((location.x) / 5);
      [COLOR="Red"][B]pitchSlider.value = sinePitchXY;[/B][/COLOR]
      [PdBase sendFloat:sinePitchXY toReceiver:@"sine_pitch"];
    }
}

 

[dejo]

// XY Pad
-(IBAction)sineXYPad:(UIPanGestureRecognizer *)trigger
{
    float sinepadHeight = sinexyview.bounds.size.height;
    float sinepadWidth = sinexyview.bounds.size.width;
    CGPoint location = [trigger locationInView:sinexyview];

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
    float sineVolXY = ((location.y) / 250);
    [COLOR="Red"][B][PdBase sendFloat:sineVolXY toReceiver:@"sine_vol"];[/B][/COLOR]
}

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
    float sinePitchXY = ((location.x) / 5);
    [COLOR="red"][B][PdBase sendFloat:sinePitchXY toReceiver:@"sine_pitch"];[/B][/COLOR]
    }
}

What do the highlighted lines do?

 

[lexk]

Add outlets for your 2 sliders if you don't have them already. Let's call the outlets pitchSlider and volumeSlider. Connect them in IB (Interface Builder). Then add the 2 lines in bold to your XY Pad's action method:

// XY Pad
-(IBAction)sineXYPad:(UIPanGestureRecognizer *)trigger
{
    float sinepadHeight = sinexyview.bounds.size.height;
    float sinepadWidth = sinexyview.bounds.size.width;
    CGPoint location = [trigger locationInView:sinexyview];

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
      float sineVolXY = ((location.y) / 250);
      [COLOR="Red"][B]volumeSlider.value = sineVolXY;[/B][/COLOR]
      [PdBase sendFloat:sineVolXY toReceiver:@"sine_vol"];
    }
}

    if ((location.y >= 0) && (location.y < sinepadHeight) && (location.x >= 0) && (location.x < sinepadWidth))
    {
      float sinePitchXY = ((location.x) / 5);
      [COLOR="Red"][B]pitchSlider.value = sinePitchXY;[/B][/COLOR]
      [PdBase sendFloat:sinePitchXY toReceiver:@"sine_pitch"];
    }
}

This worked perfectly, thank you!

What do the highlighted lines do?

They send float values to a PureData patch that works as the audio engine for the app.
Basically PdBase is part of libpd which in its simplest terms embeds the PureData patch within the app.

 

[dejo]

They send float values to a PureData patch that works as the audio engine for the app.
Basically PdBase is part of libpd which in its simplest terms embeds the PureData patch within the app.

Thanks for the clarification.