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
Outlines with Badges (Read 11396 times)
Stephane
Full Member
*
Offline



Posts: 71
@istib
Outlines with Badges
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
Back to top
 
« Last Edit: May 27th, 2011, 4:35am by Stephane »  
WWW   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Outlines with Badges
Reply #1 - 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).
Back to top
 
 

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



Posts: 71
@istib
Re: Outlines with Badges
Reply #2 - May 27th, 2011, 12:22pm
 

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

With great many thanks!
Back to top
 
 
WWW   IP Logged
Mark Bernstein
YaBB Administrator
*
Offline

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Outlines with Badges
Reply #3 - 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>
Back to top
 
 
WWW   IP Logged
Stephane
Full Member
*
Offline



Posts: 71
@istib
Re: Outlines with Badges
Reply #4 - 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?
Back to top
 
 
WWW   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Outlines with Badges
Reply #5 - 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.
Back to top
 
« Last Edit: May 27th, 2011, 6:11pm by Mark Anderson »  

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



Posts: 71
@istib
Re: Outlines with Badges
Reply #6 - 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
Back to top
 
 
WWW   IP Logged
james a. foster
Full Member
*
Offline



Posts: 130

Re: Outlines with Badges
Reply #7 - 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.
Back to top
 
« Last Edit: Dec 28th, 2011, 9:27pm by james a. foster »  
  IP Logged
Mark Bernstein
YaBB Administrator
*
Offline

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Outlines with Badges
Reply #8 - Dec 28th, 2011, 10:33pm
 
~/Library/Application Support/Tinderbox/badges
Back to top
 
 
WWW   IP Logged
james a. foster
Full Member
*
Offline



Posts: 130

Re: Outlines with Badges
Reply #9 - 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.

???
Back to top
 
 
  IP Logged
james a. foster
Full Member
*
Offline



Posts: 130

Re: Outlines with Badges
Reply #10 - 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
Back to top
 
 
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Outlines with Badges
Reply #11 - 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.
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