Improved Web Publishing
 

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.

The first issue with the export is that the images don't follow the time scale I set. I want the images to show weeks, they always show months. I fix that by exporting the images individually after the main export and putting the resulting jpegs in place.

The second problem is that the images are 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 again today, and here's what I got:

[url]http://www.inspiredlogic.com/omnidemo/[/url]

Click on the Gantt Chart or Resource Timeline to see the result.

I put together a simple HTML document that shows the same image (the Gantt chart export or the Resource Timeline) four times, using divs to achieve the desired effect.

For the Gantt chart 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, grab the HTML files at:

[url]http://www.inspiredlogic.com/omnidemo/include/tasks.html[/url]

[url]http://www.inspiredlogic.com/omnidemo/include/resources.html[/url]

(you can option-click to download them)

Edit the HTML to use the file name for your project in place of "demo." Put the files in the include folder of your HTML export template.

Edit the index.html file in your HTML export template to change the link that points to the Gantt chart and Resource Timeline image files 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.