Added Radial Slider and Example

Still need to add Editor Option for default
pull/413/head
Simon Jackson 2017-07-29 19:09:19 +01:00
parent 603d85126f
commit dd0b3a3cba
11 changed files with 2227 additions and 30 deletions

View File

@ -0,0 +1,9 @@
fileFormatVersion: 2
guid: 06c6e9a20a01e2348acb20c103a628f2
folderAsset: yes
timeCreated: 1501105181
licenseType: Free
DefaultImporter:
userData:
assetBundleName:
assetBundleVariant:

View File

@ -0,0 +1,30 @@
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.UI.Extensions;
public class UpdateRadialValue : MonoBehaviour {
public InputField input;
public RadialSlider slider;
// Use this for initialization
void Start () {
}
// Update is called once per frame
public void UpdateSliderValue () {
float value;
float.TryParse(input.text, out value);
slider.Value = value;
}
public void UpdateSliderAndle()
{
int value;
int.TryParse(input.text, out value);
slider.Angle = value;
}
}

View File

@ -0,0 +1,12 @@
fileFormatVersion: 2
guid: b5921b909b28e7f4f9a57906c667c9ce
timeCreated: 1501345599
licenseType: Free
MonoImporter:
serializedVersion: 2
defaultReferences: []
executionOrder: 0
icon: {instanceID: 0}
userData:
assetBundleName:
assetBundleVariant:

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,8 @@
fileFormatVersion: 2
guid: 84f742a1c72d4f5479bc951e9fd76fae
timeCreated: 1501350786
licenseType: Free
DefaultImporter:
userData:
assetBundleName:
assetBundleVariant:

Binary file not shown.

View File

@ -0,0 +1,55 @@
fileFormatVersion: 2
guid: ad716093ca8bdf84189f6a67bfb8e30e
timeCreated: 1431884735
licenseType: Free
TextureImporter:
fileIDToRecycleName: {}
serializedVersion: 2
mipmaps:
mipMapMode: 0
enableMipMap: 1
linearTexture: 0
correctGamma: 0
fadeOut: 0
borderMipMap: 0
mipMapFadeDistanceStart: 1
mipMapFadeDistanceEnd: 3
bumpmap:
convertToNormalMap: 0
externalNormalMap: 0
heightScale: .25
normalMapFilter: 0
isReadable: 0
grayScaleToAlpha: 0
generateCubemap: 0
cubemapConvolution: 0
cubemapConvolutionSteps: 8
cubemapConvolutionExponent: 1.5
seamlessCubemap: 0
textureFormat: -1
maxTextureSize: 2048
textureSettings:
filterMode: -1
aniso: 16
mipBias: -1
wrapMode: 1
nPOTScale: 0
lightmap: 0
rGBM: 0
compressionQuality: 50
spriteMode: 1
spriteExtrude: 1
spriteMeshType: 1
alignment: 0
spritePivot: {x: .5, y: .5}
spriteBorder: {x: 0, y: 0, z: 0, w: 0}
spritePixelsToUnits: 100
alphaIsTransparency: 1
textureType: 8
buildTargetSettings: []
spriteSheet:
sprites: []
spritePackingTag:
userData:
assetBundleName:
assetBundleVariant:

View File

@ -0,0 +1,230 @@
/// Credit mgear, SimonDarksideJ
/// Sourced from - https://forum.unity3d.com/threads/radial-slider-circle-slider.326392/#post-3143582
/// Updated to include lerping features and programatic access to angle/value
using System;
using System.Collections;
using UnityEngine.Events;
using UnityEngine.EventSystems;
namespace UnityEngine.UI.Extensions
{
[RequireComponent(typeof(Image))]
public class RadialSlider : MonoBehaviour, IPointerEnterHandler, IPointerDownHandler, IPointerUpHandler
{
private bool isPointerDown, isPointerReleased, lerpInProgress;
private Vector2 m_localPos;
private float m_targetAngle, m_lerpTargetAngle, m_startAngle, m_currentLerpTime;
private Camera m_eventCamera;
private Image m_image;
[SerializeField]
[Tooltip("Radial Gradient Start Color")]
private Color m_startColor = Color.green;
[SerializeField]
[Tooltip("Radial Gradient End Color")]
private Color m_endColor = Color.red;
[Tooltip("Move slider absolute or use Lerping?\nDragging only supported with absolute")]
[SerializeField]
private bool m_lerpToTarget;
[Tooltip("Curve to apply to the Lerp\nMust be set to enable Lerp")]
[SerializeField]
private AnimationCurve m_lerpCurve;
[Tooltip("Event fired when value of control changes, outputs an INT angle value")]
[SerializeField]
private RadialSliderValueChangedEvent _onValueChanged = new RadialSliderValueChangedEvent();
[Tooltip("Event fired when value of control changes, outputs a TEXT angle value")]
[SerializeField]
private RadialSliderTextValueChangedEvent _onTextValueChanged = new RadialSliderTextValueChangedEvent();
public float Angle
{
get { return RadialImage.fillAmount * 360f; }
set
{
if (LerpToTarget)
{
StartLerp(value / 360f);
}
else
{
UpdateRadialImage(value / 360f);
}
}
}
public float Value
{
get { return RadialImage.fillAmount; }
set
{
if (LerpToTarget)
{
StartLerp(value);
}
else
{
UpdateRadialImage(value);
}
}
}
public Color EndColor
{
get { return m_endColor; }
set { m_endColor = value; }
}
public Color StartColor
{
get { return m_startColor; }
set { m_startColor = value; }
}
public bool LerpToTarget
{
get { return m_lerpToTarget; }
set { m_lerpToTarget = value; }
}
public AnimationCurve LerpCurve
{
get { return m_lerpCurve; }
set { m_lerpCurve = value; }
}
public bool LerpInProgress
{
get { return lerpInProgress; }
}
[Serializable]
public class RadialSliderValueChangedEvent : UnityEvent<int> { }
[Serializable]
public class RadialSliderTextValueChangedEvent : UnityEvent<string> { }
public Image RadialImage
{
get
{
if (m_image == null)
{
m_image = GetComponent<Image>();
m_image.type = Image.Type.Filled;
m_image.fillMethod = Image.FillMethod.Radial360;
}
return m_image;
}
}
public RadialSliderValueChangedEvent onValueChanged
{
get { return _onValueChanged; }
set { _onValueChanged = value; }
}
public RadialSliderTextValueChangedEvent onTextValueChanged
{
get { return _onTextValueChanged; }
set { _onTextValueChanged = value; }
}
private void Update()
{
if (isPointerDown)
{
m_targetAngle = GetAngleFromMousePoint();
if (!lerpInProgress)
{
if (!LerpToTarget)
{
UpdateRadialImage(m_targetAngle);
NotifyValueChanged();
}
else
{
if (isPointerReleased) StartLerp(m_targetAngle);
isPointerReleased = false;
}
}
}
if (lerpInProgress && Value != m_lerpTargetAngle)
{
m_currentLerpTime += Time.deltaTime;
float perc = m_currentLerpTime / LerpCurve[LerpCurve.length - 1].time;
UpdateRadialImage(Mathf.Lerp(m_startAngle, m_lerpTargetAngle, LerpCurve.Evaluate(perc)));
}
if (m_currentLerpTime >= LerpCurve[LerpCurve.length - 1].time || Value == m_lerpTargetAngle)
{
lerpInProgress = false;
UpdateRadialImage(m_lerpTargetAngle);
NotifyValueChanged();
}
}
private void StartLerp(float targetAngle)
{
if (!lerpInProgress)
{
m_startAngle = Value;
m_lerpTargetAngle = targetAngle;
m_currentLerpTime = 0f;
lerpInProgress = true;
}
}
private float GetAngleFromMousePoint()
{
RectTransformUtility.ScreenPointToLocalPointInRectangle(transform as RectTransform, Input.mousePosition, m_eventCamera, out m_localPos);
// radial pos of the mouse position.
return (Mathf.Atan2(-m_localPos.y, m_localPos.x) * 180f / Mathf.PI + 180f) / 360f;
}
private void UpdateRadialImage(float targetAngle)
{
RadialImage.fillAmount = targetAngle;
RadialImage.color = Color.Lerp(m_startColor, m_endColor, targetAngle);
}
private void NotifyValueChanged()
{
_onValueChanged.Invoke((int)(m_targetAngle * 360f));
_onTextValueChanged.Invoke(((int)(m_targetAngle * 360f)).ToString());
}
#if UNITY_EDITOR
private void OnValidate()
{
if (LerpToTarget && LerpCurve.length < 2)
{
LerpToTarget = false;
Debug.LogError("Need to define a Lerp Curve to enable 'Lerp To Target'");
}
}
#endif
#region Interfaces
// Called when the pointer enters our GUI component.
// Start tracking the mouse
public void OnPointerEnter(PointerEventData eventData)
{
m_eventCamera = eventData.enterEventCamera;
}
public void OnPointerDown(PointerEventData eventData)
{
m_eventCamera = eventData.enterEventCamera;
isPointerDown = true;
}
public void OnPointerUp(PointerEventData eventData)
{
isPointerDown = false;
isPointerReleased = true;
}
#endregion
}
}

View File

@ -0,0 +1,12 @@
fileFormatVersion: 2
guid: 803cebee00d5c504e930205383017dc1
timeCreated: 1432062988
licenseType: Free
MonoImporter:
serializedVersion: 2
defaultReferences: []
executionOrder: 0
icon: {instanceID: 0}
userData:
assetBundleName:
assetBundleVariant: