Scroll to select: image gallery tutorial

 

 

Every now and then in a UI you need the user to select an option among many, there are several ways to do so, one method could be the good’ole command line, another could be the use of toggles in a group (or radio button in Android/HTML environment), but that’s not nearly as cool as just looking at the thing you want and it being already selected. So today we’ll implement a scroll to select UI interface in unity3d.

We’ll do this in the image gallery that we’ve been building here for quite a while, here I’ll also give a unified version of the code with all of the features in it.

The idea is to define an area where the selection happens, so that whatever image happens to be in the area gets selected automatically. Of course the snapping behaviour works well with this but it’s not essential, since we are defining an area, not a single position.

Scroll to select area: let’s build it

It will go something like this:

select a ninja by scrolling a gallery of images
Don’t move and select, but select by moving

Let’s get into the code. First we’ll need a new animation curve and a place to store the selected image information:

    public AnimationCurve selectionArea;
    public RectTransform selected;

We’ll use a very narrow spike function, it’s supposed to only be over .75 in the selection area (with respect to the alpha we used all along).

Narrow spike function
Make it larger to have a larger area of selection. Caos will ensue if two images can be both in the area at a time

And to complete the opera at the very end of our refresh image foreach loop we’ll insert this

        if (selectionArea.Evaluate(transformedPosition) >= 0.75f)
        {
            selected = img;
        }

This way only the image that’s been scrolled to the center is in the range for which the selectionArea curve evaluates to more than .75, which means only that image gets selected. It’s important to use a very narrow area so that only one image at time can get selected.

And that’s all for the scroll to select part of this tutorial!

This one was very easy, wasn’t it? So, at long last we are over this whole guide and you now have a fully functional scroll-to-select image gallery that looks fucking awesome! Of course there’s a new tutorial coming soon, don’t lose anything, join my newsletter.

A recap to put EVERYTHING in one place for you to copy-paste:

    public AnimationCurve orderFactor;
    public AnimationCurve positionCurve;
    public AnimationCurve zoomCurve;
    public AnimationCurve selectionArea;
    public RectTransform selected;

    public RectTransform[] imgset;
    public float rotationSensibility = 1f; //how sensible is to swipe input
    protected float alphaStep = 1f; //will host the image-to-image distance.
    public float swipeFieldWidth = 300f;//Total distance from leftmost position to rightmost one
    [SerializeField]    protected float alpha; //the parameter around wich all things revolve
    protected float lastFrameAlpha; //last frame's alpha value
    public CatchSwipe inputSource; //A module to handle input that gives us the net x-axis swipe value
    Dictionary<RectTransform, float> alphaoff = new Dictionary<RectTransform, float>();//a dictionary to store all image's offsets

    [Header("inertia Parameters")]
    public bool useInertia;
    protected float inertia;
    public float inertialDampening = 0.9f; 
    public float inertiaPersistenceFactor = 10f;

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

    public virtual void Awake()
    {
        if (useInertia)
            doMagnetize = false;
    }

    public virtual void Start()
    {
        alphaInitialization();
        refreshImages();
    }

    protected virtual void alphaInitialization()
    {
        alpha = 1;
        if (imgset.Length > 1)
            alphaStep = 1f / (imgset.Length - 1f);
        float minAlpha = -(imgset.Length - 1f) * alphaStep / 2f;
        alphaoff.Clear();
        foreach (var item in imgset)
        {
            alphaoff.Add(item, minAlpha);
            minAlpha += alphaStep;
        }
        lastFrameAlpha = alpha;
    }

    protected virtual void Update()
    {
        updateAlpha();
        updateInertia();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }
    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    inertia + magneticForce), 
                0,
                1
                );
    }
    protected virtual void updateInertia()
    {
        if (useInertia)
        {
            inertia = Mathf.Abs(inputSource.NetSwipe.x) > 0 ? alpha - lastFrameAlpha : inertialDampening * inertia;
            if (Mathf.Abs(inertia) < rotationSensibility / inertiaPersistenceFactor)
                inertia = 0;
        }
    }


    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;
            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

    protected virtual void refreshImages()
    {
        List<KeyValuePair<RectTransform, float>> orderingLayerList = new List<KeyValuePair<RectTransform, float>>();
        foreach (var img in imgset)
        {
            float transformedPosition = positionCurve.Evaluate(alpha + alphaoff[img]);
            img.localPosition = Vector3.right * (transformedPosition * swipeFieldWidth - (swipeFieldWidth / 2f));
            img.localScale = Vector3.one * (zoomCurve.Evaluate(transformedPosition));
            orderingLayerList.Add(new KeyValuePair<RectTransform, float>(img, orderFactor.Evaluate(alpha + alphaoff[img])));
            if (selectionArea.Evaluate(transformedPosition) >= 0.75f)
            {
                selected = img;
            }
        }
        var orderByVal = orderingLayerList.OrderBy(kvp => kvp.Value);
        foreach (var item in orderByVal)
        {
            item.Key.SetAsLastSibling();
        }
    }

And this finally ends this lenghty tutorial. I hope you will find it useful 🙂
Tell me what you think about it and follow me on twitter for more useful stuff.

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Of men & scroll galleries: in-depth tutorial

In my last project I had to build a skin selection menu. I could have gone away by simply using a scrollrect, but who likes cool when you can have awesome?

I didn’t want just a scrollrect. I wanted Icons to change size depending on screen position. And to cover each other when too far away from the currently selected one. All with inertia and snap-to-option movement. Of course, no tap-to-select, whatever’s centered should be selected. In other words I wanted a scrolling gallery of images that looked and felt awesome where I could pick my ninja.

I also wanted a Lamborghini, but you can’t get THAT just by coding it.

Yet.

Let’s begin with some high-level concepts

So what to do? First I started with some math.
I had to figure out how to mathematecally handle all the movements, which functions to encode in unity so that at every frame I had exactly what I needed. Of course using math does not mean using calculus, if you remember this trick of mine.

So, mathematically speaking I wanted a bellshaped curve (AKA Gaussian) of zoom, and some easing for position on x axis.
All that must be controlled with a swipe, which means with a single parameter. What we have is a linear swipe, what we want is an eased movement and zoom.

An example of easing in animation
The upper picture represents a linear movement, the lower one an eased movement

The trick is not to think on what kind of formulas can give the result I need, but to just revert the functions that would do the trick graphically, which means a bell shaped curve for zoom and an s-shaped one for x position.
The mechanics will be very similar to spinning an invisible wheel, with our images are glued on its border and then watching from a small distance. You just increase linearly the rotation angle at its center and then you’ll see exactly the movement we need: big and fast picture in the middle, many others small and slow on the sides. We’ll call the rotation angle of the imaginary wheel our “alpha” angle.

Brace yourselves: code is coming

Let’s review the variables we’ll need. AnimationCurves first.

 public AnimationCurve positionCurve;
 public AnimationCurve zoomCurve;

These will be our “math” functions. Zoomcurve needs a bell-shape with peak in .5f, positioncurve it’s a regular ease-in ease-out.

public RectTransform[] imgset;

Here we’ll store the images to move. Actually their RectTransforms.

And then there’s some “constants”:

public float rotationSensibility = 1f; //how sensible is to swipe input
protected float alphaStep = 1f; //will host the image-to-image distance.
public float swipeFieldWidth = 300f;//Total distance from leftmost position to rightmost one

And finally some internal variables

[SerializeField] protected float alpha; //the parameter around wich all things revolve
protected float lastFrameAlpha; //last frame's alpha value
public CatchSwipe inputSource; //A module to handle input that gives us the net x-axis swipe value
Dictionary<RectTransform, float> alphaoff = new Dictionary<RectTransform, float>();//a dictionary to store all image's offsets

The eagle-eye view

So, our high-level code would be something like this:

    public virtual void Start()
    {
        alphaInitialization();
        refreshImages();
    }

    protected virtual void Update()
    {
        updateAlpha();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

Which basically reads: first, initialize my shit and show it, then update my alpha and if it’s different than last frame, show the update .
It’s a simple behaviour.

Warning: this check will save a lot of cpu but may get some added effects not too smooth with extra slow movements, it’s up to you to decide your tradeoff.

Let’s see what those functions actually do.

 protected virtual void alphaInitialization()
    {
        alpha = 1;

We just start with the leftmost image at center.

        if (imgset.Length > 1)
            alphaStep = 1f / (imgset.Length - 1f);

Here we calculate the alphaStep if it needs to be less than one. We want the images to be equally spaced on the imaginary wheel border, so that we can calculate easily how they move.

        float minAlpha = -(imgset.Length - 1f) * alphaStep / 2f;
        alphaoff.Clear();
        foreach (var item in imgset)
        {
            alphaoff.Add(item, minAlpha);
            minAlpha += alphaStep;
        }

Then we calculate what the offset values are for our images. This will enable us to rule them all with just one ring… err… parameter, the “alpha” rotation value of the imaginary wheel. The middle image uses the base alpha value and the others will shift it with the offset. Simple huh?

        lastFrameAlpha = alpha;
    }

And lastly, we also initialize the lastFrameAlpha value.

protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(alpha + inputSource.NetSwipe.x * rotationSensibility, 0, 1 );
    }

Now, this is what one would expect to be the complicated part… but actually it’s the simplest. When the user swipes he’s just spinning the wheel, nothing more. So we increase the alpha by exactly the amount he swipes times the sensibility.

And now let’s see where the magic actually happens!

    protected virtual void refreshImages()
    {
        foreach (var img in imgset)
        {
            float transformedPosition = positionCurve.Evaluate(alpha + alphaoff[img]);

HERE! did you see that? Here I changed the alpha value to a phisical position. Before we only knew how much the wheel would spin (alpha), then we got how exactly it was spinning for the image we’re checking (alpha + alphaoff[img]). The actual transformation would have been some good old math if we didn’t use an AnimationCurve to do it in our place.
Fuck that. I’m lazy and want the UI designer to be able to change how the slider behaves without touching MY code with his filthy fingers.
Our result is still normalized in a 0-1 scale. To get a position in the proper scale we need :

            img.localPosition = Vector3.right * (transformedPosition * swipeFieldWidth - (swipeFieldWidth / 2f));

So, basically, by subtracting half swipeFieldWidth we have the results centered in 0, but then we’ll have that with transformedPosition==0, a position of (- swipeFieldWidth/2,0,0) will be assigned, and with transformedPosition==1,the result will of course be (swipeFieldWidth/2,0,0). The result is that the width of it all it’s exactly swipeFieldWidth.

            img.localScale = Vector3.one * (zoomCurve.Evaluate(transformedPosition));
        }
    }

And this is what gives the “zoom” effect: we just make the scale bigger the closer the image is to the center (which means transformedPosition==.5f )
This too of course will be done with an AnimationCurve so that we can thinker with results without having to change the code.

What we did so far should look something like this:

[note to self: never delete a gif again or you’ll have to go through hundreds of tweets to get it back]

I hope this will be enough for now. I also hope you would like to read how to add the other stuff I mentioned before like inertia and snapping. If so, join my newsletter to know when the next part of this guide is ready! [edit: next part is here]

And yes, of course I know you want to copy-paste this, so here’s all in one place:

    public AnimationCurve positionCurve;
    public AnimationCurve zoomCurve;
    public RectTransform[] imgset;
    public float rotationSensibility = 1f; //how sensible is to swipe input
    protected float alphaStep = 1f; //will host the image-to-image distance.
    public float swipeFieldWidth = 300f;//Total distance from leftmost position to rightmost one
    [SerializeField]    protected float alpha; //the parameter around wich all things revolve
    protected float lastFrameAlpha; //last frame's alpha value
    public CatchSwipe inputSource; //A module to handle input that gives us the net x-axis swipe value
    Dictionary<RectTransform, float> alphaoff = new Dictionary<RectTransform, float>();//a dictionary to store all image's offsets

    public virtual void Start()
    {
        alphaInitialization();
        refreshImages();
    }

    protected virtual void Update()
    {
        updateAlpha();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;

    }

 protected virtual void alphaInitialization()
    {
        alpha = 1;

        if (imgset.Length > 1)
            alphaStep = 1f / (imgset.Length - 1f);

        float minAlpha = -(imgset.Length - 1f) * alphaStep / 2f;
        alphaoff.Clear();
        foreach (var item in imgset)
        {
            alphaoff.Add(item, minAlpha);
            minAlpha += alphaStep;
        }

        lastFrameAlpha = alpha;
    }


protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(alpha + inputSource.NetSwipe.x * rotationSensibility, 0, 1 );
    }

    protected virtual void refreshImages()
    {
        foreach (var img in imgset)
        {
            float transformedPosition = positionCurve.Evaluate(alpha + alphaoff[img]);

            img.localPosition = Vector3.right * (transformedPosition * swipeFieldWidth - (swipeFieldWidth / 2f));

            img.localScale = Vector3.one * (zoomCurve.Evaluate(transformedPosition));
        }
    }

And here are the position curve:

position-curve

And zoom curve:

zoom-curve

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Snap effect in scroll area: in-depth tutorial

This tutorial is part of a series on how to construct an awesome-looking scroll gallery, with inertia, snap effect, zoom and other stuff. Now we will add a snap effect to it, or as I call it, a magnetic behaviour. When the scrolling gallery is left somewhere between two images, the behaviour will move the one closest to the center towards the middle by scrolling all the sliding gallery. Easier done than said, actually:

snap to center effect
The snap effect will look like this. Magnetic, isn’t it?

Let’s get on the snap effect parameters!

Let’s start with the parameters we’ll need to add to our script this time:

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

The first one is just to be able to disable the whole behaviour in one click. The variable magneticForce, instead, will be used to pass the actual per-frame movement to perform, as caused by the snap behaviour, to our updateAlpha function (that will change accordingly).
As for magnetizationMaxForceFactor it will be a factor that defines the maximum movement that can be done in a single frame. And last but not least we have magnetizationRangeAlphaStepFraction, a variable that represents which range of the intermediate positions between two images should be a valid starting point for our snapping behaviour (0.5 being just everywhere and less will leave some resting areas in the middle of two images).

To the bat-functions!

We won’t need to change the start function, but our Update will need a fix:

    protected virtual void Update()
    {
        updateAlpha();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

We’ll have to make a call to update the magneticForce parameter we introduced before and it must to be done at every frame.

As for our UpdateAlpha we’ll check for input and use the magneticForce if and only if there is no ongoing action

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    magneticForce),
                0,
                1
                );
    }

See? Only when the absolute value of the horizontal swipe is exactly zero we’ll add our magneticForce instead of the input-driven value. And now let’s go for the main dish:

    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;

            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

First we check that there’s no input and that the magnetization flag is set to true, otherwise we’d only be wasting our CPU cycles. Then we get the difference between the current position and the nearest image thanks to the module operator and the alphaStep variable that gives us the distance between images.

Implementing the actual snap effect

Now we can distinguish two cases: either we need to snap to left, or we need to snap to right. But we also could be in the case that magnetizationRangeAlphaStepFraction is small enough to allow for a resting position between images and that shall be checked too. Once we decided this we’ll see if we’re so close that it’s better to just skip to the final destination (by using the whole rest value as our next magneticForce ) or if we should go move of a fraction of it (by multiplying for magnetizationMaxForceFactor ).

Well, now the slider looks way nicer but it still lacks an inertia option and the abilty to select stuff. You’ll have to wait a bit for that, until next part is ready. Join my newsletter, I’ll link it there! [edit: next part is here]

Here’s a copy-paste friendly recap of all the changes we made to the base script in last article

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

    protected virtual void Update()
    {
        updateAlpha();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    magneticForce),
                0,
                1
                );
    }

    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;

            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Scroll inertia: in-depth tutorial

This tutorial series on how to build a cool scrollable selection area  in unity is nearing its end, here we’ll mod the previous script to add a scroll inertia effect, so that the scroll doesn’t stop immediately when the user lifts the finger.

In last edit we added a snapping behaviour to our scroll area, and if you have not so many items to scroll that can be enough. But what if there are a lot of them? Let’s be clear, if you need to stash more than 30, I’d advice to use at least a scroll slider bar too, makes easier to navigate and keep track of what-is-where. But already with 15 or so elements it would be nice not to have to scroll through every single one of them with your finger. Let’s have one powerful slide do the job of a dozen weak ones!

Scrolling through an image gallery with inertia on
A couple scrolls can have very different effects with inertia…

Let’s set the parameters

To achieve this we’ll add an inertia “factor” to our movement, pretty much in the same way we added a magnetic force.
So, here’s how:

    [Header("inertia Parameters")]
    public bool useInertia;
    protected float inertia;
    public float inertialDampening = 0.9f; 
    public float inertiaPersistenceFactor = 10f;
  • useInertiawill be used as a control flag to switch the behaviour on and off
  • inertiais the variable where we store the movement due to inertia for the frame
  • inertialDampeningis our attrition factor, we’ll just mutiply this to last frame’s inertia to dampen it
  • inertiaPersistenceFactorinstead gives us control on how much the inertia effect should persist before being set to exactly 0

Changing the functions for scroll inertia

This time we’ll also have to change the Awake function because as of now magnetic behaviour and inertia are quite conflicting, they could produce a jerky or oscillating motion. It’s easy to merge them elegantly but that’s something I won’t do here, sorry 😛

    public virtual void Awake()
    {
        if (useInertia)
            doMagnetize = false;
    }

As for our Update function, that very predictably becomes:

    protected virtual void Update()
    {
        updateAlpha();
        updateInertia();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

Where updateInertia is:

    protected virtual void updateInertia()
    {
        if (useInertia)
        {
            inertia = Mathf.Abs(inputSource.NetSwipe.x) > 0 ? alpha - lastFrameAlpha : inertialDampening * inertia;
            if (Mathf.Abs(inertia) < rotationSensibility / inertiaPersistenceFactor)
                inertia = 0;
        }
    }

What happens here is: first we check our flag, then we evaluate if there is any input. If there is we update inertia to exactly that frame’s movement, so that we may use it later. If there is none, inertia gets its own value, dampened.

When it’s just too low to care about it, we set it to 0;

Lastly we need to insert the inertia we calculated into our updateAlpha function like this:

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    inertia + magneticForce), 
                0,
                1
                );
    }

See where we just sum inertia and magnetic force? there is where you want to intervene if you want to use them both without strange behaviours

And that’s it!

Now you can add inertia to your scrolling behaviour. Isn’t it cool? Last part of this tutorial series will introduce selection, which can be key to using this thing in your UIs without having the player tap on the image/button too. Don’t miss it, join my newsletter and I’ll tell you when it’s out. [edit: next part is here]

Here’s the usual copy-paste friendly version:

    [Header("inertia Parameters")]
    public bool useInertia;
    protected float inertia;
    public float inertialDampening = 0.9f; 
    public float inertiaPersistenceFactor = 10f;

    public virtual void Awake()
    {
        if (useInertia)
            doMagnetize = false;
    }
    protected virtual void Update()
    {
        updateAlpha();
        updateInertia();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    inertia + magneticForce), 
                0,
                1
                );
    }
    protected virtual void updateInertia()
    {
        if (useInertia)
        {
            inertia = Mathf.Abs(inputSource.NetSwipe.x) > 0 ? alpha - lastFrameAlpha : inertialDampening * inertia;
            if (Mathf.Abs(inertia) < rotationSensibility / inertiaPersistenceFactor)
                inertia = 0;
        }
    }
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •