DemoDial Widget¶
The DemoDial prefab provides a dial widget which can be used to allow the user to select one of a number of options.
Dial Graphics¶
A dial is composed of a number of prefab children that you can alter to change the apperance of the widget.
- Panel_Back is the outer border and background. You can edit the material of this object to change the color and opacity.
- DialCanvas is the inner background of the dial. The color should be set to the same color as the DialGraphics.PickerColorInactive property.
- HighlightPanel is the rectangular highlight indicating the selected item. You can change the color and opacity.
- LabelParent/LabelText defines the text properties used for the dial labels. You can change font, text size and other properties. The text color should be set to the same color as the DialGraphics.TextColor property.
Dial Properies¶
The Dial widget is controlled by the DialGraphics script, which is attached to the DialPickerDemo/DialGraphics child of the DemoDial prefab. These properties include:
- Debug Display String – Displays the currently selected item label.
- Debug Display Int – Displays the currently selected item index.
- Dial Labels – An array containing the items displayed in the dial.
- Dial Radius – The radius of the dial curvature.
- Label Angle Range Start – The angle around the dial where the labels start.
- Label Angle Range End – The angle around the dial where the last label is positioned. Labels are evenly distributed between the start and end labels, even if they end up overlapping.
- Label Prefab – The prefab object used to create the objects displaying the dial items.
- Dial Physics Offset – The parent transform of the Dial Physics object
- Dial Protrudence Distance – How much the label dial sytands proud of the flat panel. A negative value causes protrusion; a positive value causes inset.
- Dial Physics – The object defining the cylinder used for label item interaction.
- Dial Mode Base – The object containing the DialModeBase scrript. Usually the Dial Physics object.
- Dial Center – The object defining the center of the dial.
- Picker Color inActive – The color applied to the inner frame of the dial when no interaction is occuring.
- Picker Color Active – The color applied to the inner frame of the dial when an interaction is occuring.
- Picker Box Image – The image used as the inner frame of the dial.
- Hilight Text Volume – The object highlighting the current dial selection. Must contain the HighlightTextVolume script component.
- Text Color – The color of the dial label text.
In addition, the DialPickerDemo/DialPhysicsOffset/Dial_Physics child of DemoDial contains the DialModeBase script that defines the following properties:
- Minimum Angle – Where the dial starts. Should match Label Angle Range Start property of the DialGraphics instance.
- Maximum Angle – Where the dial ends. Should match Label Angle Range End property of the DialGraphics instance.
- Steps – Should be equal to the number of items in the dial.
- DialGraphics – The object to which the DialGraphics script component is attached.
Controlling a Property with the Dial¶
Use a data binding script to connect the dial to the property of another object. In this example, the color of the material is set according to the dial selection:
using UnityEngine;
using System.Collections;
using LMWidgets;
public class SphereColorPicker : DataBinderDial {
[SerializeField]
string colorChoice = "Red"; //Data model
override protected void setDataModel(string value) {
colorChoice = value;
switch(colorChoice){
case "Red":
GetComponent<Renderer>().material.color = Color.red;
break;
case "Blue":
GetComponent<Renderer>().material.color = Color.blue;
break;
case "Green":
GetComponent<Renderer>().material.color = Color.green;
break;
case "Black":
GetComponent<Renderer>().material.color = Color.black;
break;
case "White":
GetComponent<Renderer>().material.color = Color.white;
break;
default:
break;
}
}
override public string GetCurrentData() {
return colorChoice;
}
}
After attaching the data binder script to an object in your scene, you must drag the DialGraphics component from the DemoDial instance in the scene to the Widgets property in the Inspector panel for your data binder script.