Tinderbox User-to-User Forum (for formal tech support please email: info@eastgate.com)
http://www.eastgate.com/Tinderbox/forum//YaBB.cgi
Tinderbox Users >> Exporting from Tinderbox >> Outlines with Badges
http://www.eastgate.com/Tinderbox/forum//YaBB.cgi?num=1306485320

Message started by Manuel Richard on May 27th, 2011, 4:35am

Title: Outlines with Badges
Post by Manuel Richard on May 27th, 2011, 4:35am

Hi,

has anyone tinkered with exporting outlines as they are displayed in Tinderbox to HTML?

I can see a real need for it when I use outlines to prepare conference scripts. During my presentation, I rely on badges, colours and formatting of notes to remember specific points and arguments.

For now, I have printed out screenshots of TB outlines! I do know how to export note formatting, but didn't know how to approach badges...

Cheers,
Manuel

Title: Re: Outlines with Badges
Post by Mark Anderson on May 27th, 2011, 6:11am

If you're exporting list items, use export code set the <li> class according to badge.

^if($Badge)^
<li class="^value(idEncode($Badge))^">
^else^
<li>
^endIf^


For real-worlds use I'd put all that on one line but above it's written for clarity. The idEncode() part deals with spaces in names 'yellow flag' becomes 'yellow_flag' and thus a valid CSS identifier. Now write your CSS you use the appropriate artwork. The CSS is outwith the scope of this answer but you could use it to set the <li> bullet artwork, or add it to the first paragraph inside the <li>, etc.

By using CSS classes matching Badge names you make the TB code less complex in terms of what to but if only a few choices you could do something like:

^if($Badge=="no")^
<li class="X">
^else^^if($Badge=="ok")^
<li class="Y">
^else^
<li>
^endIf^^endIf^


See how we can achieve the same in the first example by simply having CSS classes "ok" and "no"?

Happily, TB Badge art is now PNG format and, whilst the badges don't export as part of HTML they could be re-used. I say could as the artwork's inside the app (surgery to get at it is not advised for less-tech users) and permission for re-use would be required from Eastgate (image copyright to consider).

Title: Re: Outlines with Badges
Post by Manuel Richard on May 27th, 2011, 12:22pm


Aha! Looks simple enough. I shall have a go.

With great many thanks!

Title: Re: Outlines with Badges
Post by Mark Bernstein on May 27th, 2011, 5:01pm

Rather than applying a class to <li>, I might simply add the image:

<li>
  ^if($Badge) <img src="^root^badges/^value($Badge)^.png"> ^endif
^title^
</li>

Title: Re: Outlines with Badges
Post by Manuel Richard on May 27th, 2011, 5:35pm

Great, thank you!

So I've managed to export an outline with multiple levels, with badges, font styles and all. It's looking great in the browser, and particularly when printed onto a PDF. I shall post it here if there's interest.

The last hiccup I'm facing is that the colours I use for my notes in Tinderbox are rather light and are made legible using the "Charts and Outlines have: Darker Colors" setting.

From a perusal of hex color coding, I could not see a simple way to make any color a wee bit darker? Any clues?

Title: Re: Outlines with Badges
Post by Mark Anderson on May 27th, 2011, 6:10pm

What about Color.brightness and/or Color.saturation to alter your TB colors.  I'm not sure what transform TB uses when the 'darker colors' option is ticked; if we know what it is, likely the same can be done to your $Color values on export using action code transforms.

My earlier suggestion was attempting to be over complex. I discounted the latter suggestion because you'll have a ragged left edge to your paragraph as the first (few) lies will be indented as they flow around the image. I knew that would look wrong to me so I suggested making the image the bullet character. The latter solution is certainly easier to implement, requiring less CSS expertise.

Title: Re: Outlines with Badges
Post by Manuel Richard on May 29th, 2011, 8:04am


^value(format(brightness($Color,45)))^ did the trick! It looks exactly like within TB

Thanks a lot for the pointer

Title: Re: Outlines with Badges
Post by james a. foster on Dec 28th, 2011, 9:07pm

Where are the system badges?

when I use

^if($Badge) <img src="^root^badges/^value($Badge)^.png"> ^endif^

the html generates

<img src="../badges/bug.png">

But there is no bug.png, or a badges folder, in my TinderBox document. And the /badges folder in my Library folder has nothing in it.

Title: Re: Outlines with Badges
Post by Mark Bernstein on Dec 28th, 2011, 10:33pm

~/Library/Application Support/Tinderbox/badges

Title: Re: Outlines with Badges
Post by james a. foster on Dec 29th, 2011, 4:34pm

That didn't work. there are no files in that directory. So, the HTML generated is:

<img src="~/Library/Application Support/Tinderbox/badges/bug.png">

And the exported HTML shows up with the "missing graphic" icon where the badge should be.

???

Title: Re: Outlines with Badges
Post by james a. foster on Dec 29th, 2011, 5:08pm

it works if I use this directory

/Applications/Tinderbox.app/Contents/Resources/badges/

I tried creating a link to this with

ln -s /Applications/Tinderbox.app/Contents/Resources/badges/ ~/Library/Application%20Support/Tinderbox/system_badges

and then using

<img src="file:///~/Library/Application Support/Tinderbox/system_badges/^value($Badge)^.png">

But that failed to find the badges. It DOES work if I use the fully resolved path name. It seems that the tilde isn't being resolved. Any idea what's going on there?

Lessons learned so far:
- use the full url, with "file:///"
- the system icons are buried in the application contents

Title: Re: Outlines with Badges
Post by Mark Anderson on Dec 29th, 2011, 6:10pm

Most likely the web browser [sic] can't resolve Unix shortcuts within a URL. You would do better to use the full path, if exported HTML is intended for use on your Mac. Otherwise, if the HTML is being passed to other users/macs then you should copy the necessary images from the badges folder to a specified folder within your export folder. I normally make an 'images' folder in the root of the exported content and place the images there and link to that location in my TB code.

I mention this in case you're trying to resolve an issue that would still lead to failure when you try to use the HTML on a different system.

Tinderbox User-to-User Forum (for formal tech support please email: info@eastgate.com) » Powered by YaBB 2.2.1!
YaBB © 2000-2008. All Rights Reserved.