Another one for dotProject – an Open Sourced Project Management software that I take interest in.

Following the theme of my previous mod, the idea is to convey the most amount of information at a glance. Looking at the Project’s Progress (project percent complete) specifically, the best icon is a background bar graph representing the percentage. Alternativly this information can also be described by gradients of colours (colour keys are already used to differintiate between project’s tasks). This implemintation combines both, see preview above.

The mod itself fits on a single line, so to jump right in, open projects/view.php locate

<td align="right" nowrap><?php echo $AppUI->_('Progress');?>:</td>

and replace the line after it with

<td class="hilite" width="100%" style="border-style: solid; border-width: 1px;"><div style="background: #<?php echo ($obj->project_percent_complete < 50) ? "ff".str_pad(dechex(2.55*2*$obj->project_percent_complete), 2, '0', STR_PAD_LEFT)."00" : str_pad(dechex(2.55*2*(100 - $obj->project_percent_complete)), 2, '0', STR_PAD_LEFT)."ff00" ?>; width: <?php echo intval($obj->project_percent_complete ); ?>%;"><strong><?php printf( "%.1f%%", $obj->project_percent_complete );?></strong></div></td>

Simple, isn’t it?

The bar is drawn using CSS styles, so no images are required, and you get real gradient breakdown. The bar itself is a div tag with coloured background. The colour is determined from $project_percent_complete and figuring out where it is between #FF0000 Red and #00FF00 Green. dechex() converts decimals into colour hex, and str_pad() ensures that we’ll end up with a leading 0 if needed.

Obviously the same idea can be applied to any block-level element holding a percent value. Some other good places to apply this in dotProject would be task’s progress, or assigned users’ percentage.

Read more

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.