TIM Wiki / NEW TIM 6 Documentation

It is possible to overwrite and adjust the progressbar of tasks.
Therefor a function with the name “gadget.functions.getCustomProgress” has to be written into the custom.js file.
The function gets 3 parameter.

1. container = The div in which the previous progressbar was shown
2. percent = The elapsed time in percent
3. content = The previous text which was shown in the DIV

How the progressbar is overwriteen will be up to you.
The following example shows a depleting battery.

gadget.functions.getCustomProgress = function(container, percent, content){
 
	function getColor(value){
		var hue = ( (1 - value/100) * 120 ).toString(10);
		return ['hsl(', hue, ', 100%, 50%)'].join('');
	}
 
	var levelBar = jQuery('<div></div>')
		.css('height', '100%')
		.css('width', (100 - percent) + '%')
		.css('float', 'right')
		.css('background-color', getColor(percent));
 
	var battery = jQuery('<div></div>')
		.css('width', '20px')
		.css('height', '8px')
		.css('border', '1px solid #000000')
		.css('margin', '2px 0px 5px 0px')
		.css('background-color', '#FFFFFF')
		.css('float', 'left')
		.append(levelBar);
 
	var batteryKnob = jQuery('<div></div>')
		.css('content', '')
		.css('margin', '5px 0px 5px 5px')
		.css('float', 'left')
		.css('width', '2px')
		.css('height', '4px')
		.css('background-color', '#000000');
 
	var textContent = jQuery('<div></div>')
		.css('text-align', 'right')
		.text(content);
 
	jQuery(container)
		.css('background-image', 'none')
		.append(batteryKnob)
		.append(battery)
		.append(textContent);
 
}