Welcome, Guest. Please Login
Tinderbox
  News:
IMPORTANT MESSAGE! This forum has now been replaced by a new forum at http://forum.eastgate.com and no further posting or member registration is allowed. The forum is still accessible via read-only access for reference purposes. If you wish to discuss content here, please use the new forum. N.B. - posting in the new forum requires a fresh registration in the new forum (sorry - member data can't be ported).
  HomeHelpSearchLogin  
 
Pages: 1
Send Topic Print
Maps in HTML (Read 3954 times)
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Maps in HTML
Jan 7th, 2010, 3:06pm
 
First, a little expectation management - this isn't a method to create fully functioning TB maps in a web browser. Rather, in tidying up my hard-drive I found an experiment from 2005 (see here).

I though it might be interesting to update the project for v5 and to see what more, if anything, of the export problem I could solve. The result is here: a TBX, and the HTML output.

The advances I've made:
  • The HTML is now valid for the XHTML 1.0 STRICT DTD.
  • Almost all the JavaScript is external, unobtrusively attached. A little  JS has had to stay within the main HTML to work around some limits in the export process (fixed, see next post).
  • All the CSS is now external, including some that we were setting unnecessarily via Javascript.
  • Externalising the CSS/JS is a consideration for doing an export with a larger number of notes - imagine 100 notes instead of under 10.
  • A user Number attribute with the sequential option gets us around the lack of export access to a unique ID for each note (needed for the per-note CSS and posible link drawing).
  • In a bit of a hack I've exported an adornment. The 'hack' part is there is no way to detect, during export, an adornment as a map item, so I had to hard code the adornment's name. If adornments do become export-accessible they may then be exported like normal notes.
  • Notes now show body text.
  • Note borders are better represented - within the differing ways TB and HTML/CS create them - including dashed borders.
  • Note titles link to exported note pages.
Not in there:
  • Despite the above hack, adornments aren't practically exportable.
  • Links. More on this below.
  • Opacity & shadows. Not really practical in HTML/CSS
  • Map zooming. This ought to be possible.
  • Mover than one map (level).
With an overall frameset added, this project could work like Marcelo's Outliner export an Explorer-like layout with the map at left and current note at right. Actually, for anyone minded to tinker the left frame could host either and outline or a map.

Links. Having looked again at HTML/JS-based line drawing I think the method is impractical (not least as I doubt it scales - in numbers of objects - with grace.  The other approach is to move to SVG. However, SVG probably won't work out-of-the-box with your mom's computer so it makes the method a bit more niche. Still, it should work OK for a Mac only audience or those willing (allowed!) to use a browser other than IE. If anyone out there is up to speed on SVG, I'd love to talk off-forum - especially if someone could make me an exportable SVG canvas/sandbox into which I could then concentrate on capturing map data.

A tip of the hat to Outline+column view in TB 5+ - it really helps in this sort of project as attributes can be easily be kept in plain view.

In summary, this is still an experiment albeit more polished than the 2005 one. I hope a few folk find it of use - even if only to see how the export process works.
Back to top
 
« Last Edit: Jan 08th, 2010, 1:06pm by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Maps in HTML
Reply #1 - Jan 8th, 2010, 1:05pm
 
I've updated the TBX (same URL as above) to work around the issue making have to put JS in the head of the main HTML page. The secret is to use designators with paths.  Now, in the 'PageJS' template, the JS-exporting agent looks at the originals insdie 'Cover' for information:

Code:
var xLeft = (^min(child(/Cover),Xpos)^ - 1) * 3;
var xRight = (^max(child(/Cover),Xpos)^ + ^max(child(/Cover),Width)^ + 1) * 3;
var xWidth= xRight - xLeft;
var yTop = (^min(child(/Cover),Ypos)^ - 1) * 3;
var yBottom = (^max(child(/Cover),Ypos)^ + ^max(child(/Cover),Height)^ + 1) * 3;
var yHeight = yBottom - yTop; 


Neat.  I've updated the aTbRef pages on 'Paths' and 'Designators' to reflect this helpful usage.

The screen look of the HTML output hasn't changed but now it's much neater under the hood.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Pages: 1
Send Topic Print