Class SVSquare
A highly interactive 2D color selector that allows users to pick colors by adjusting saturation and brightness values.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class SVSquare : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, IInputElement<Vector2>, IValidatableElement<Vector2>, INotifyValueChanging<Vector2>, INotifyValueChanged<Vector2>Remarks
The SVSquare is a specialized color selection component that enables users to choose colors by interacting with a two-dimensional square area. The component visualizes color variations based on saturation (horizontal axis) and brightness/value (vertical axis) while maintaining a constant hue.
This component is particularly useful in color pickers, design tools, and any interface where precise color selection is required. Users can interact with the SVSquare through mouse/touch input or keyboard controls for fine-tuned adjustments.
The SVSquare is typically used in conjunction with other color selection components like hue sliders to provide a complete color picking experience.
Examples
Here's how to create and configure an SVSquare component in UXML: Basic UXML configuration with initial values.
<SVSquare reference-hue="0.5" saturation="0.7" brightness="0.8" increment-factor="0.02" />Example of creating and handling color selection events: Creating an SVSquare and handling color changes.
var svSquare = new SVSquare();
svSquare.RegisterCallback<ChangeEvent<Vector2>>(evt => {
Color selectedColor = svSquare.selectedColor;
Debug.Log($"New color selected: {selectedColor}");
});
// Set initial color
svSquare.referenceHue = 0.33f; // Green hue
svSquare.value = new Vector2(0.8f, 0.9f); // High saturation and brightness
Example of implementing custom validation rules: Setting up custom validation rules.
svSquare.validateValue = (Vector2 value) => {
// Only allow values with saturation > 0.5
return value.x > 0.5f;
};
// The invalid property will automatically update based on the validation function
Constructors
SVSquare()
Default constructor.
Declaration
public SVSquare()Fields
imageUssClassName
The SVSquare image styling class.
Declaration
public const string imageUssClassName = "appui-svsquare__image"Field Value
| Type | Description |
|---|---|
| string |
thumbSwatchUssClassName
The SVSquare thumb swatch styling class.
Declaration
public const string thumbSwatchUssClassName = "appui-svsquare__thumbswatch"Field Value
| Type | Description |
|---|---|
| string |
thumbUssClassName
The SVSquare thumb styling class.
Declaration
public const string thumbUssClassName = "appui-svsquare__thumb"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The SVSquare main styling class.
Declaration
public const string ussClassName = "appui-svsquare"Field Value
| Type | Description |
|---|---|
| string |
Properties
brightness
Selected brightness value.
Declaration
[CreateProperty]
[UxmlAttribute]
public float brightness { get; set; }Property Value
| Type | Description |
|---|---|
| float |
incrementFactor
The increment factor used when the user uses the keyboard to change the value.
Declaration
[CreateProperty]
[UxmlAttribute]
public float incrementFactor { get; set; }Property Value
| Type | Description |
|---|---|
| float |
invalid
The SVSquare invalid state.
Declaration
[CreateProperty]
[UxmlAttribute]
public bool invalid { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
referenceColor
The reference color (current hue with the maximum brightness and saturation).
Declaration
[CreateProperty(ReadOnly = true)]
public Color referenceColor { get; }Property Value
| Type | Description |
|---|---|
| Color |
referenceHue
The current hue used to display the SV Square.
Declaration
[CreateProperty]
[UxmlAttribute]
public float referenceHue { get; set; }Property Value
| Type | Description |
|---|---|
| float |
saturation
Selected saturation value.
Declaration
[CreateProperty]
[UxmlAttribute]
public float saturation { get; set; }Property Value
| Type | Description |
|---|---|
| float |
selectedColor
The currently selected color.
Declaration
[CreateProperty(ReadOnly = true)]
public Color selectedColor { get; }Property Value
| Type | Description |
|---|---|
| Color |
validateValue
The SVSquare validation function.
Declaration
[CreateProperty]
public Func<Vector2, bool> validateValue { get; set; }Property Value
| Type | Description |
|---|---|
| Func<Vector2, bool> |
value
The current value of the SV Square. The x component is the saturation and the y component is the brightness.
Declaration
[CreateProperty]
public Vector2 value { get; set; }Property Value
| Type | Description |
|---|---|
| Vector2 |
Methods
SetValueWithoutNotify(Vector2)
Sets the value without notifying the user of the change.
Declaration
public void SetValueWithoutNotify(Vector2 newValue)Parameters
| Type | Name | Description |
|---|---|---|
| Vector2 | newValue | The new value to set. |