Better presentation on the web

Wed Jun 6 23:42:32 PDT 2007

I use OmniPlan to organize many small projects, with just a few tasks  
for each project. The result is a project file with about 150 tasks.  
This doesn't present the Gantt chart and Resource Timeline too well  
in the standard web export.

I've gotten around the issue that the images don't follow the scale  
I've set. I do that by exporting the images individually after the  
main export, and putting the resulting jpegs in place.

The problem is that the images are large -- much larger than the  
display I'm using to show them to my PC-using brethren. When I scroll  
down, I lose the display of the dates. When I scroll to the right I  
lose the display of the task/resource.

It's been about ten years since I did any significant HTML coding,  
but I took it up today, and here's the result.

I put together a simple HTML document that shows the same image (the  
Gantt chart export) four times, using divs to achieve the desired  
effect. The upper left just shows the header for the tasks: task and  
duration in my case. The lower left shows just the task list itself.  
The upper right shows the header for the Gantt chart: the dates. The  
lower right is the Gantt chart itself. The chart is automatically fit  
into the window, with scrollbars if necessary. When the chart is  
scrolled to the right or left, the date header follows. When the  
chart is scrolled to up or down, the task list follows.

The end result is something like an Excel spreadsheet with the left  
column and the top row locked.

The HTML isn't pretty, the interface isn't perfect, and putting the  
thing together isn't as automatic as I would like, so if anyone can  
improve this I'm eager to see the result.

To use this, create a file with the HTML below in it. Edit the HTML  
to use the file name for your project in place of "omni." Save the  
file as "tasks.html" in the include folder of your HTML template.

Edit the index.html file to change the link that points to the tasks  
image file to point to your new file instead.

Now export as usual, and enjoy!

If you ever change the name of the project, you'll need to edit the  
HTML file to use the new name for the images.

regards,

Geoff

ps -- watch out for line wrapping:

<html>
<head>
<style type="text/css">
.taskheader {
height:30px;
width:30%;
overflow:hidden;
padding:2px;
border:1px solid black;
float:left
}

.ganttheader {
height:30px;
width:68%;
overflow:hidden;
padding:2px;
border:1px solid black;
float:left
}

.tasklist {
width:30%;
height:90%;
overflow:hidden;
padding:2px;
border:1px solid black;
float:left
}

.ganttchart {
width:68%;
height:90%;
overflow:scroll;
padding:2px;
border:1px solid black;
float:left
}

</style>
</head>
<body {height:100% width:100%}>
<div class="taskheader" id="taskheader1">
<img src="omni_tasks.jpg">
</div>
<div class="ganttheader" id="ganttheader1">
<img src="omni_tasks.jpg">
</div><br>
<div class="tasklist" id="tasklist1">
<img src="omni_tasks.jpg">
</div>
<div class="ganttchart" id="ganttchart1"  
onscroll="tasklist1.scrollTop=scrollTop;ganttheader1.scrollLeft=scrollLe 
ft">
<img src="omni_tasks.jpg">
</div>
</body>
</html>