LunpaCMS Whipping your website into shape! Introducing Lunpa, our mascot.  Her mother was a hamster and her father was Chilean M00se.  Oddly, neither smelt of elderberries.


LunpaCMS Library_gfx Documentation

A Quick Introduction

A Swiss army knife of graphical tools.

The Basics

get_menu_button_set

Parameters:


menu_buttons - An array of pointers to hashes, representing the buttons that will be displayed

separator - A string of HTML to place between individual buttons

annotate_with_dim_box

Parameters:


LunpaCMS Library_gfx demo

get_gfx_heading

Creates a graphical heading with various optional features

Parameters:

Working with Text

Library_gfx includes a few convenience functions for creating html textboxes suitable for use in webpages, and generating static image header text useful for emails

Generating text boxes

Method
Library_gfx::get_text_box_start()
Description
Creates an HTML textbox by creating a single-element table
Requried Parameters
parameter - description
Optional Parameters
width - width of the generated text box (defeault: 100%)
height - height of the textbox. If unspecified, defaults to the content height.
color_text_box_border - Drawn border colour (default $FORM->{'color_text_box_border'} or '#acac99')
color_text-box_background - Default: $FORM->{'color_text_box_background'} or '#ffffff'
Returns the closing tags for an open html text box generated by get_text_box_start

Method
Library_gfx::get_text_box_end()
Requried Parameters
parameter - description
Optional Parameters
width - width of the generated text box (defeault: 100%)
height - height of the textbox. If unspecified, defaults to the content height.
color_text_box_border - Drawn border colour (default $FORM->{'color_text_box_border'} or '#acac99')
color_text-box_background - Default: $FORM->{'color_text_box_background'} or '#ffffff'

Button Examples

Library_gfx::get_menu_button_set will generate the html, styling, and javascript needed to make a button menu bar such as the one below, suitable for site navigation and forms. By default, javascript is included that shows a roll over version of the button to show selection contrast. The img alt= attribute for each image defaults to the value of the button text, but be sure to include the appropriate HTML5 ARIA role for accessibility best practices.

Generating menus and buttons

Method
Library_gfx::get_menu_button_set()
Description
Creates an HTML menu bar by rendering button images with annotated text and basic interaction
Required Parameters
menu_buttons - An array of the buttons to generate. See &Library_gfx::get_button() for details.
Optional Parameters
separator - A string of html to be inserted between each generated button. images/opt_separator.gif is provided for this purpose.
template - Array of links to a LunpaCMS template when the button is clicked. If a scalar is passed, then the link is used for every button.
url - Array of links to an URL when the button is clicked. If a scalar is passed, then the link is used for every button.

Example

sub get_menu_button_set {

    my ($FORM, %params) = @_;

      my ($output, @menu_buttons);



        push(@menu_buttons, {title=>'Home',

                             template=>'index',

                             shadow_depth=>20,

                             shadow_x_offset=>0,

                             shadow_y_offset=>-2,

                             shadow_color=>'red'});



        push(@menu_buttons, {title=>"LunpaCMS\nDocumentation",

                             url=>'http://www.lunpacms.org/base.cgim?template=documentation_template_manager',

                             shadow_depth=>100,

                             shadow_color=>'black'});



        $output = &Library_gfx::get_menu_button_set($FORM,

                    menu_buttons=>\@menu_buttons,

                    separator=>"<img src=\"/images/opt_separator.gif\" width=2 height=\"100%\" alt=\"\">");



        return $output;

}

Individual buttons

Single buttons can be generated by calling &Library_gfx::get_button()

'Test'
Method
Library_gfx::get_button()
Description
Generates annotated button images used for navigation links and in get_menu_button_set
Requried Parameters
title - Text to be annotated, is centred on the image by default. Escape characters such as \n and \t are rendered as expected.
Optional Parameters
template - Returns the image tag as a link to a LunpaCMS template.
url - Returns the image tag as a link to the specified URL
text_color - Fill color of the annotated text. This can either a word or HTML hex string, per ImageMagick's supported colour model specification.
blank_button - Background button image to annotate. images/opt.gif, images/opt_select.gif, and images/opt_hover.gif are provided for use with get_menu_button_set. To provide an "active" button for a menubar, use blank_button=<'opt_select.gif' or your own custom selected button template for the desired effect.
no_shadow - Set to 1 to disable rendering a drop shadow
shadow_color - Colour to render for the text drop shadow. Valid colours
shadow_depth - Integer level of blur to apply to the dropshadow (0 - 100).
shadow_x_offset - X-Pixel offset of the dropshadow. Defaults to 1.
shadow_y_offset - Y-Pixel offset of the dropshadow. Defaults to 2.

Example

$output = &Library_gfx::get_button($FORM,

      text=>"Pretty\nButtons",

      shadow_depth=>100,

      shadow_color=>'#636363',

      shadow_x_offset=>0,

      shadow_y_offset=>0);



return $output;

Annotating images

Images can be annotated with various fonts and colours with a transparent background using &Library_gfx::mixed_text_annotate(). The optimal geometries for a given font and text length can be determined using &Library_gfx::mixed_text_query_font_metric.
Method
Library_gfx::mixed_text_annotate
Description
Annotates an image with one or more fonts, colours, and geometries.
Required Parameters
image - An imagemagick image to annotate. use Image::Magick->new and Image::Magick->Read
text - String or array of strings to write to the image
font - Font or array of fonts to use for the annotation. These should be in the server's ImageMagick or LunpaCMS path.
font_size - Integer size of font sizes to render.
text_color - HTML or ImageMagick colour to render font in.
Optional Parameters
x_offset - Distance from origin of image.
y_offset - Distance from origin image.
gravity - Sets gravity for optional text shadow. Defaults to 'northwest'
font_directory - Path to search for true-type fonts in. Defaults to /usr/share/fonts/default/TrueType
no_shadow - Boolean to disable rendering text with a shadow.
shadow_color - Colour to render shadow. Defaults to 'grey'.
shadow_depth - Level of blurring for text shadow (0 - 100)
shadow_x_offset - Horizontal shadow offset (default 1)
shadow_y_offset - Vertical shadow offset (default 2)

Preparing to annotate an image

&Library_gfx::mixed_text_query_font_metric can help to annotate images with variable text length in a predictable and graceful way.
Method
Library_gfx::mixed_text_query_font_metric
Description
Returns metrics on the specified text and font, such as width, height, ascender, descender
Required Parameters
image - An imagemagick image to annotate. use Image::Magick->new and Image::Magick->Read
text - String or array of strings to write to the image
font - Font or array of fonts to use for the annotation. These should be in the server's ImageMagick or LunpaCMS path.
font_size - Integer size of font sizes to render.
text_color - HTML or ImageMagick colour to render font in.

Add Your Comment


(Only a limited set of HTML tags such as <b>, <i>, <u> are allowed. Embedded flash video from Youtube or Vimeo are also supported.)


Copyright © 2018 Peregrine Computer Consultants Corp. All rights reserved.

About Lunpa, our mascot. Her mother was a hamster and her father was an ill-tempered Chilean M00se. Oddly, neither smelt of elderberries.
The artist is Jennifer Lomax.