Telerik UI for Windows 8 HTML

This article will introduce you to the properties of RadHSBPicker and will provide examples of how you can configure the control.

This topic contains the following sections.

Opacity Selection

By default opacity selection is not enabled. To enable the user to choose an opacity value, set the opacity property value to true. Once the opacity selection is enabled, the current selected color's semicircle will appear as a opacity selector.

Code Listing 1: Enabling Opacity Selection in the Mark-up Copy imageCopy
<div id="opacityColorPicker" data-win-control="Telerik.UI.RadHSBPicker" data-win-options="{
        opacity: true,
        opacityValue: 50
    }"></div>

Use the opacityValue property to get or set the opacity value of the currently selected color. The property value is a floating point number from 0 to 1. When assigning a value to the property, the new opacity value is instantly selected and the UI is updated. In order for this property to work, the opacity selection must be enabled.

Code Listing 2: Getting and Setting the Currently Selected Color's Opacity Value Copy imageCopy
colorPickerControl.opacityValue = 60;
var opacityValue = colorPickerControl.opacityValue;

If opacity selection is enabled and the user holds the opacity drag handle, the opacity wheel is expanded with an animation. The transitions property allows you enable or disable this animation. The default property value is true.

Setting the Size of The Control

RadHSBPicker has a circular shape and its size is controlled by the width property, which represents the diameter of the circle in pixels. When opacity is off, the default and minimal property value is 350 and when opacity is on, the default and minimal property value is 450.

Code Listing 3: Setting the Width in the Mark-up Copy imageCopy
<div id="sizedColorPicker" data-win-control="Telerik.UI.RadHSBPicker" data-win-options="{
        width: 400
    }"></div>
Code Listing 4: Getting and Setting the Width Programmatically Copy imageCopy
colorPickerControl.width = 400;
var width = colorPickerControl.width;

Getting or Setting the Selected Color

RadHSBPicker exposes three properties that you can use to get or set the last two selected colors. Below is a list of the properties with a short description.

  • value: Use this property to get or set the currently selected color. When getting the selected color and the opacity option is turned off, the property returns the color in hex format: '#FFFFFF'. When the opacity option is turned on, the color is returned in RGBA format: 'rgba(255, 255, 255, 1)'. When assigning a value to the property, the new color is instantly selected and the UI is updated. The property value can be in one of the following formats: hex, RGB, RGBA or a Color object.

    Code Listing 5: Getting and Setting the Currently Selected Color Using the value Property Copy imageCopy
    var red = Telerik.Utilities.color.parseColor("#FF0000");
    
    colorPickerControl.value = red;
    colorPickerControl.value = '#FFAA66';
    colorPickerControl.value = 'rgb(255, 119, 187)';
    colorPickerControl.value = 'rgba(255, 119, 187, 0.5)';
    
    var value = colorPickerControl.value; // '#ff77bb'
    
    colorPickerControl.opacity = true;
    value = colorPickerControl.value; // 'rgba(255, 119, 187, 0.5)'
    
  • color: Use this property to get or set the currently selected color. The difference between the value and color properties is that the latter accepts and returns only a Color object as a value. For information on Color objects and how to use them visit this article: ColorPicker Color Objects

    Code Listing 6: Getting and Setting the Currently Selected Color Using the color Property Copy imageCopy
    var red = Telerik.Utilities.color.parseColor("#FF0000");
    
    colorPickerControl.color = red;
    var color = colorPickerControl.color; // { r: 255, g: 0, b: 0, a: 1 }
    
  • previousColor: This property behaves exactly like the value property, but it gets or sets the previously selected color.

    Code Listing 7: Getting and Setting the Previously Selected Color Using the previousColor Property Copy imageCopy
    var red = Telerik.Utilities.color.parseColor("#FF0000");
    
    colorPickerControl.previousColor = red;
    colorPickerControl.previousColor = '#68FFD6';
    colorPickerControl.previousColor = 'rgb(111, 255, 89)';
    colorPickerControl.previousColor = 'rgba(111, 255, 89, 0.5)';
    
    var previousColor = colorPickerControl.previousColor; // '#6fff59'
    
    colorPickerControl.opacity = true;
    previousColor = colorPickerControl.previousColor; // 'rgba(111, 255, 89, 0.5)'
    

These properties can also be used declaratively in the mark-up or in the control constructor to set initial selected colors.

Getting or Setting the Brightness

To get or set the brightness value of the currently selected color use the brightness property. The property accepts a number from 0 to 360 as a value. When a new value is assigned to the property, the new color is instantly selected and the UI is updated.

Code Listing 8: Setting the Initial Brightness in the Mark-up Copy imageCopy
<div id="brightnessColorPicker" data-win-control="Telerik.UI.RadHSBPicker" data-win-options="{
        brightness: 0
    }"></div>
Code Listing 9: Getting and Setting the Brightness Programmatically Copy imageCopy
colorPickerControl.brightness = 0;
var brightness = colorPickerControl.brightness;

Enabling/Disabling the Color Selection Tooltip

By default when a user drags to select a color, a tooltip that provides information about the selection is displayed. It provides information about the values of hue(h), saturation(s), brightness(b) and opacity(a) when the opacity selection feature is turned on. To disable the tooltip, set the tooltip property value to false.