close panorama

TextTable Plugin v2.0 texttable.swf / texttable.js for Flash and HTML5
by pramanj - pramanj2013@gmail.com

Description

This plugin allows you to create a multi-page  text table with customizable rows, columns,text entries, fonts, colours, images in the cell etc. You can also assign  krpano action commands to individual cells. The position of the plugin can be controlled with the usual <plugin> attributes: align, x, y, ... the other parameters for this plugin and their default values are given in the attributes section below. This plugin is useful for giving information about an item available in the scene in a popup texttable on clicking a hotspot or act as a navigation menu for browsing a krpano virtual tour. This plugin is available in swf as well .js versions.

The version v2.0 has the following new features over v1.0:
1. Allows multi-page table with navigation bottons for next/previous page at the bottom of the page with user specified number of rows per page.
2. Images can be loaded in any of the cells in table to fit the cell with or without maintaining aspect ratio as specified by user.
3. Delimited multiple krpano action script commands given in a single string can be executed on clicking any specified cell in the table.
4. A minimize button on top right corner of the table is provided that allows you to show/hide the table with only the button remaining on screen. This allows you to keep the plugin active (keep=true) across multiple scenes to serve as navigation menu or just uncover more area by hiding the table whenever not required.

Download

texttable.zip  (plugin and example included, 259kb)

License: Plugin is free for evaluation and personal use however you need to buy it for commercial use if satisafied with the evaluation. If you have already purchased version 1 of this plugin then upgrade to version 2 is free.

Buy

Syntax / XML Usage Example

<plugin name="table" 
        url="textTable.swf"  
        url="textTable.js"  
        align="center"
        edge="center"
        tfin="SrNo;Room Type;Tarrif($);Image;
1;Delux Double;250;@sample.jpg:lookto(0,0,90)| lookto(90,0,90);
2;Delux Single;200;@sampleInvert90.jpg:lookto(0,0,90)| lookto(90,0,90);
3;Luxury Double;150;@sample180.jpg:lookto(0,0,90)| lookto(90,0,90);
4;Luxury Single;100;@sampleInvert270.jpg:lookto(0,0,90)| lookto(90,0,90);
5;Economy Double;100;@sample90.jpg:lookto(0,0,90)| lookto(90,0,90);
6;Economy Single:link;80:link;@sample270.jpg:lookto(0,0,90)| lookto(90,0,90);"
        ttitle="Room tarrif per night:1:1:1"  
        rows="4:0:0"
        colword="3:1,1,0,0x000000:0:2,1,1,0x000000:1,1,0,0,0:0:2,1,1,0,0:1,1,0,0x00FF00,0"
        xstart="10"
        ystart="10"  
        xpad="5"
        ypad="5"
        borderword="0x000000:2"
        headercolour="0x0000FF"  
        cellbackgroundcolour="0xFFFF00"
        fcolour="0xFF0000"
        fnt="5"
        fsiz="4"
        pluginbordercolour="0x000000"
        pluginfillcolour="0000FF"
        />

Plugin Attributes

Various properties of the table are explained below. Please note the default values for all the following plugin specific properties are as given in the XML example above.  Please note, the additional/modified data for plugin version 2 with respect to version 1 are highlighted in bold italic in the above XML. If you are using version 1 of the plugin then the XML data may not be 100% compatible with version 2 of the plugin depending upon what you have configured. You may have to carefully check the v1 data with reference to the modified v2 data in the XML. The various XML parameters are explained below:

  • tfin - text field input - specify row wise text entries per cell the in table seperated by a ';' in 'text:command' pair format per cell where 'text' is the text to be displayed in the cell and ':command' is optional data indicating the krpano commands to be executed on clicking the cell. Multiple commands can be given delimited by a pipe '|' character. New line characters are ignored in the tfin string, use them to enter row wise data for ease of reading as shown in sample above. You can specify an image instead of text in a cell in '@image:command' format instead of text, where @ sign distinguishes an image from a text field. Image is the name of image with path, to be loaded in the cell. (no spaces before @ sign are allowed). Path is relative to the main html file. First row (mandatory row) is the title of each column in the table which can only be text field (not images) and cannot have ':command' field associated with them. This is followed by other rows in the table. If you give less than rows*columns entries, extra cells are filled with blank, if you give more than rows*columns entries new pages are created in the table.
  • ttitle - title of table that appears below the table followed by 3 optional binary properties seperated by ':' for bold, underline and italic title. By default they are 0 - meaning normal text, no underline no italic text for title. If you don't want a title for the table then give null string "" for this property.
  • rows - number of rows per page (excluding the mandatory header row) in the table optionally followed by two ':' seperated numbers. The first optional number is height in pixels (a global value) that will be added to height of rows (which is the font height for selected font size) in the table for ALL rows except header row. All rows are of same height except the header row. This is useful for adjusting cell height while adding images in cells. Default is 0 meaning cell height is equal to the font height. Second optional number is a flag 0 or 1 (a global flag for all images in the table) indicating if aspect ratio of images the table is to be maintained or not. Default is 0 meaning donot maintain aspect ratio, stretch the images to fit the cell fully. Value 1 will fit the images in cells maintaining the aspect ration of the image.
  • colword - a composite word giving column properties for each column in table. First number is the number of columns (max 20) in table. This is optionally followed by "a colon and a group of 5 comma separated numbers" for each column - representing text alignment for the column (0-Left, 1-Middle, 2-Right), column boldness - (0 - normal, 1 - bold), column italic - (0-normal, 1 - italic), column font colour (RGB) and a number representing width in pixels (default 0) to be added to the automatically calculated width of that column for fine tuning table width. Repeat this pattern including colon for each column that you want to specify non default values. Default font colour is default text colour which is property fcolour (see below). Header row is always bold for each column.
  • xstart - xoffset in pixels of table top left corner from plugin top left corner.
  • ystart - yoffset in pixels of table top left corner from plugin top left corner.
  • xpad - xoffset in pixels of text within each cell for fine tuning. (global parameter)
  • ypad - yoffset in pixels of text within each cell for fine tuning. (global parameter)
  • borderword - a composite word representing border colour (RGB) of the table, optionally followed by a colon and a number representing border thickness in pixels, Default border thickness is 1 pixel if you omit this optional property.
  • headercolour - cell colour (RGB) of table header (first row).
  • cellbackgroundcolour - cell colour (RGB) of other rows of the table.
  • fcolour - default font colour (RGB) for the whole table.
  • fnt - a number representing font type for whole table (1-Times New Roman, 2-Arial, 3-Calibri, 4-Courier, 5-Verdana, 6-sans-serif). Default is 1.
  • fsiz - a number representing font size for whole table (1-10, 2-11, 3-12, 4-14, 5-16,6-18). Default is 1.
  • pluginbordercolour - border colour (RGB) of the box surrounding plugin.
  • pluginfillcolour - background colour (RGB) of the box surrounding text table, default alpha 0.25 is always applied to the background colour.

Example

CLICK TO VIEW EXAMPLE