Search code examples
htmldelphidata-structuresdelphi-7imaging

Structuring an editor for HTML image maps

Summary:

I'm beginning to build a tool for creating/editing HTML image maps, or 'hotspots' in a picture, using Delphi 7. The concept of the application is clear, and described below. I've done similar projects before, and I'm sure I can do this with whatever approach I take by myself. What I need help with is figuring out the best approach to how to store image maps in memory.

An image map may look like this:

<MAP NAME="someImageMap">
  <AREA SHAPE="RECT" COORDS="10,28,54,51" HREF="some_page.htm">
  <AREA SHAPE="RECT" COORDS="54,28,111,50" HREF="some_other_page.htm">
  <AREA SHAPE="RECT" COORDS="111,28,199,49" HREF="another_example.htm">
</MAP>
<IMG border=0 src="../images/SomeImage.png" width=571 height =451 
  isMap useMap=#someImageMap />

An AREA is a region within the image, given a shape and coordinates, to place an invisible hyperlink. They're also called Hotspots.

Background

I have a huge help file in HTML format which used to be in HelpScribble software, but now we're using WinCHM. HelpScribble had a tool called SHGEditor which did all this mapping for me. But WinCHM has no concept of image maps, and they're all over the code. So rather than trying to find a tool for this (which of course is the easy way out of this), I'm going to make one of my own.

Image:

Beginnings of Editor

Issue:

The confusion begins with deciding where to store the primary data for the Hotspot areas temporarily in memory...

  • Directly in the HTML code?
  • In a TList?
  • In a TStringList?
  • In an Array?
  • In the TListView where I display a list of the hotspots?

That's the main question I'm asking.

Each I guess has its ups and downs. But the whole thing is thrown off when I think about the HTML editor. When modifications are done in either of the 3 edit tabs (either Image, HTML, or Hotspot List), it has to somehow synchronize those changes to the other two editors. So if a new hotspot is drawn on the image, of course I can put it to HTML no problem. But what about using the pure HTML code as the primary source? I'm going to be building/parsing it anyway, but I'm worried about performance with that. But then again, I can build a good back-end class to keep everything too. Which to consider the primary?

Conclusion:

So it all boils down to should I keep the primary data in the HTML source, the list view items, a custom list class (THotspots), or where?

Any tips, tricks, or suggestions are much appreciated.

PS:

I do in fact ask long questions quite often, sorry!

Solution

  • For many reasons, I have decided to use the raw HTML as the base of the data. I was originally worried about performance using this approach, but since I found this HTML parser component for Delphi, performance isn't an issue. This parser can go through 50,000 tags in 1 second.

    The core advantage of using the core HTML is the fact that I can maintain the HTML data in its original format. Any other method would most likely result in having to regenerate the HTML every time I need it, which would come in whatever format my app puts it in. But since I have this parser now, it's easy to simply change tag attributes with the wink of an eye.