RadiantQ jQuery Gantt Package
Creating Gradient Backgrounds dynamically in code
Previous Topic  Next Topic 

Creating Gradient Backgrounds dynamically in code


To be able to specify a gradient background for a taskbar, for example, you would typically have to create an image with some gradient colors and then specify that as background for a taskbar div style. This approach is used for example in our sample:

"..\Samples\GanttControlCriticalPath.htm


However, this is very cumbersome as you will have to use other image editing tools to create this. So, we have created a much easier to use GetGradientImageURL API, that creates an appropriate gradient image in memory that you can set as the background of any taskbar (any HTML element).


Note: This feature requires you to reference the "canvg.js" JS file in your web page. This file is available at ..\Samples\Scripts\canvg.js in our installation.


Usage Scenario 1 (setting gradient for bar templates):


This code sample shows how to use this API when you are defining the custom look and feel for a FlexyGantt task bar in JS. (Same approach can be used when defining the look and feel of a GanttControl task bar.)


// setGradientAsBackground({x1:value,y1:value,x2:value,y2:value}, [stops])

// x1 and y1 (starting point) define the direction of the gradient

// x2 and y2 (end point) define the direction of the gradient.

var greenBarImageURL = RadiantQ.Gantt.GetGradientImageURL(

        { x1: 0, y1: 0, x2: 0, y2: 100 },

        [{ offset: '0', 'stop-color': '#FFFFFF' }, { offset: '0.25', 'stop-color': 'lightgreen' }, { offset: '1', 'stop-color': 'green' }]

    );


// Then reference this url in the template for the task bars.

var tTemplate = '<div class="taskbar-style" style="background-image:url(' + greenBarImageURL + ') !important;border-color:green !important"></div>';


This is illustrated in the sample "..\Samples\FlexyGanttCustomTaskLook.htm" sample.


Usage Scenario 2 (setting the gradient for any html element from JS):


In this sample code below, calling the setGradientAsBackground API for the list of jquery elements specified by their style name would set the background property on the specified style to this internally generated image.


// setGradientAsBackground({x1:value,y1:value,x2:value,y2:value}, [stops])

// x1 and y1 (starting point) define the direction of the gradient

// x2 and y2 (end point) define the direction of the gradient.

$(".taskbar-style").setGradientAsBackground(

    { x1: 0, y1: 0, x2: 0, y2: 100 },

    [{ offset: '0', 'stop-color': '#FFFFFF' }, { offset: '1', 'stop-color': '#3796D2' }]

);


Supported Gradient Types


1) Linear Gradient:

 LinearGradient should be in the format of {x1, y1, x2, y2} coordinates and stops.


 Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ.


 For LeftToRight gradient: {x1:0, y1:0, x2:100, y2:0}

 For RightToLeft gradient: {x1:100, y1:100, x2:0, y2:100}


 Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ.


 For TopToBottom gradient: {x1:0, y1:0, x2:0, y2:100}

 For BottomToTop gradient: {x1:100, y1:100, x2:100, y2:0}


 Angular gradients are created when x1 and x2 differ and y1 and y2 differ


 For top-left to bottom-right gradient: {x1:0, y1:0, x2:100, y2:100}

 For top-right to bottom-left gradient:[x1:100,y1:0,x2:0,y2:100]

 For bottom-left to top-right gradient: {x1:0, y1:100, x2:100, y2:0}

 For bottom-right to top-left gradient: {x1:100, y1:100, x2:0, y2:0}



2) Creating the Radial Gradient:


 RadialGradient should be in the format of {cx, cy, r} - coordinates and stops.


 The cx and cy of RadialGradient define the width and height of the shape to fill

 r defines the radius of the gradient


 For top-left gradient: {cx:0, cy:0, r:50}

 For top-center gradient: {cx:50, cy:0, r:50}

 For top-right gradient: {cx:100, cy:0, r:50}

 For middle-left gradient: {cx:0, cy:50, r:50}

 For middle-center gradient: {cx:50, cy:50, r:50}

 For middle-right gradient: {cx:100, cy:50, r:50}

 For bottom-left gradient: {cx:0, cy:100, r:50}

 For bottom-center gradient: {cx:50, cy:100, r:50}

 For bottom-right gradient: {cx:100, cy:100, r:50}


NOTE : Currently we are not supporting Gradient Backgrounds dynamically in ie8.


© RadiantQ 2022. All Rights Reserved.