Tinderbox Map View for the Web ... almost  5/23/05

The other night on my bus ride home a stray thought about CSSimplicity touched off an idea for exporting the Tinderbox Map View onto the web. I've wanted this for a good while, but the only method I could think of for getting a working map view to the web was a screen shot doctored in the HTML to be an imagemap... not exactly a scalable solution.

However, with CSS you can specify everything about an element, from visual styling to screen positioning. Since Tinderbox gives ready access to all of the variables that make it work, a bit of poking around gave me a fair approximation of the map view with only two fairly simple export templates. There's one hurdle left that I think will require some non-trivial javascript, so before I muddy my pretty templates with javascript code, it's worth writing up the TBox and CSS bits-- along the way I learned a bit about the way that Tinderbox works and the what CSS can and can't do.

The Big Picture

The big picture is fairly simple: figure out which Tinderbox attributes correspond to which CSS properties. This meant a set of test notes:

... arranged in a rich map view where I can tweak things and see (through "Get Info" on the notes) which attributes change:

With that setup, I can have "Get Info" open and watch all the map-related attributes change as I move a note or change its color or play with fonts:

Table of Equivalents

I got the following as rough equivalencies. The ones in italics didn't fully work in my experiment.

For the Map View note (rather than the child-notes in the map view):

  • title's background-color: TitleBackgroundColor
  • title's font-family: TitleFont
  • title's text color: TitleForegroundColor
  • map area's background-color: MapBackgroundColor

For the child-notes in the map view:

  • CSS: Tinderbox
  • top: Ypos - didn't work because of units, see below
  • left: Xpos - units again
  • width: Width
  • border-width: Border
  • border-color: BorderColor - Tinderbox gives white text if the color is dark, black text if the color is light. There's no way to automate that cleanly in export or CSS
  • background-color: Color
  • font-family: NameFont
  • color: NameColor

Take Car(e,at)

Once I figured out what made what, I built the styles but put in export codes where the values should be. Word to the wise: don't forget that Tinderbox export codes can be listed with or without a trailing carat. These two are equivalent:

<p>^get(FunnyNumber) the number comes out</p>

<p>^get(FunnyNumber)^ in both of these cases</p>

However, if you want something to immediately follow the export code, you must use the trailing carat. Otherwise Tinderbox doesn't know where the export code ends:

<p>^get(FunnyNumber)no number</p>


And ... not quite.

So far I have two export templates. One, "mapMyChildren.html" which is called for each note, and which generates the html page and the 'map view'. Inside of that is this code:


... which calls another template ("mapMe.html") to make the <div> for each note. (Right-click or control-click and choose "save link as" or "download link as" to get those files, btw.)

However, as you'll note from this browser window screenshot, all is not well:

The problem is that Tinderbox's X and Y coordinates aren't in pixels, inches, or ems-- the units that CSS understands. Trial and error showed that Tinderbox's units are about 3em. But you can't do math in an export, so there's no way to say:

^get(Xpos * 3)^em;

I think there's a way around it with Javascript, and if it works it'll be nifty: you'll be able to zoom in and out with the Javascript multiplying the dimensions as you go. However, as is always the case with Javascript, I anticpate this a) taking forever and a day to code, b) taking another half-forever to make cross-browser, and c) making a Jackson Pollack painting out of my currently Mondrian code.

In other words, don't hold your breath until it's done. I'm going back to CSSimplicity later this week.

There are some other things that this could use: CSS properties to make the text wrap at a fixed note width and not to extend the div if the text is too long for a fixed height. Borders, which Tinderbox handles in a tricky way.

But, for now? I'm elated that I got this much to work in about 45 minutes. It's a testament to the transparency of Tinderbox.