Automatic Button Generation

If you want to use graphically styled buttons it may be very timeconsuming to generate all the images you need by hand. It is far more convenient to generate all buttons from the txt-attribute in the button definition.

To do so with navbar-FH.wml, you may add the additional attribute imgstyle to navbar:render. The value of this attribute will be used internally as the key to a hash of coderefs named %imgstyle. I. e, to use this feature, you will have to write something like:

<navbar:render name="foobar" imgstyle="foo" select="foo.bar" ... >

This alone will have no effect, unless you also define (in the same file as the navbar or in a separate include file) the corresponding function to render the buttons:

<:
$imgstyle{foo} = sub {
    my ($file, $txt, $type, $level, $lang, $id) = @_;

    # actual code to produce the image here

}
:>

$file: is the name of the file to be generated.
$txt: is the text of the button.
$type: is the imgstar-type of the Button: 0 for normal, 1 for selected and 2 for over.
$level: is the level of the button in a hierarchical navbar (equivalent to the number of dots in the id-string).
$lang: is the language of the button, or the empty string.
$id: is the id-attribute of the button, what else.

You may do whatever you want to generate the image, use Perlmagick, or Gimp-Perl, or whatever. It is up to you to make sure that the function you define does something useful.

Here is the code for the (admittedly slightly pathologic) example from the top of the page:


<:
{
  my @cols=("white", "lightseagreen", "yellow");
  my @spc=("", "* ");
  $imgstyle{foo} = sub {
    my ($file, $txt, $type, $level, $lang, $id) = @_;
      system ("(banner '". $spc[$level] . $txt . "' |\
        asciitopgm 400 140 | pnmrotate 90 |\
        pnmscale -height 20 -width 80 |\
        pgmtoppm black-". $cols[$type]." | convert - " .
        $file . ") >/dev/null 2>&1 >/dev/null");
  }
}
:>
<navbar:define name="example">
  <navbar:header>
    <table cellspacing=0 cellpadding=0 border=0>
  </navbar:header>
  <navbar:footer>
    </table>
  </navbar:footer>

  <navbar:prolog>
    <tr><td>
  </navbar:prolog>
  <navbar:epilog>
    </td></tr>
  </navbar:epilog>

  <navbar:button id=foo img=foo.*.png 
         url=dummy.html txt=foo>     
  <navbar:button id=foo.bar img=bar.*.png
         url=dummy.html txt=bar>
  <navbar:button id=foo.bletch img=bletch.*.png
         url=dummy.html txt=bletch>     
  <navbar:button id=quux img=quux.*.png
         url=dummy.html txt=quux>
</navbar:define>

Automatic Button Generation

Navigation