News Examples Documentation Download Buy Forum Contact
NOTE: This page is from an older version, see the latest version here.

Showtext Plugin showtext.xml Version 1.20.1

  • This plugin extends the krpano viewer with an advanced showtext() action and advanced <textstyle> settings that are working the same in Flash and HTML5.
  • To get showtext() support in HTML5, just include the 'showtext.xml' file once in your xml.

Syntax

Include:
<include url="%VIEWER%/plugins/showtext.xml" />

Usage:
showtext(text, textstyle*)
The showtext() action shows a text message on the screen.

Note - by default only one text can be shown at one time! When calling showtext() again the current shown text will be removed!

Parameters:
  • text
    • The text to show.
    • HTML tags can be used to format the text.
    • Using the < and > characters will be not possible due xml syntax limitations, but the [ and ] characters can be used instead. To get the real [ and ] characters use them twice - [[ and ]].
    • The Flashplayer and the HTML5 Browsers have a different level of HTML support. To get the same results in both cases this needs to be respected. More details here - Textfield plugin.

    Examples for formating:
    • [b]bold[/b]bold text
    • [i]italic[/i]italic text
    • [u]underline[/u]underlined text
    • [br] ⇒ line break
    • [font size='10' style='font-size:10px;']smaller text[/font] ⇒ use a different font size ('size' for Flash and 'style' for HTML5)
    • [font color='#FF0000' style='color:#FF0000;']red text[/font] ⇒ use a different font color ('color' for Flash and 'style' for HTML5)

  • textstyle (optionally)

Textstyle

<textstyle name="DEFAULT"
           origin="cursor"
           edge="bottom"
           xoffset="0"
           yoffset="-3"
           fadeintime="0.0"
           showtime="0.1"
           fadetime="0.0"
           font="Times"
           fontsize="12.0"
           bold="true"
           italic="false"
           textcolor="0x000000"
           textalign="none"
           padding="1"
           css=""
           width=""
           height=""
           vcenter=""
           background="true"
           backgroundcolor="0xFFFFFF"
           backgroundalpha="1.0"
           border="true"
           bordercolor="0x000000"
           borderalpha="1.0"
           borderwidth="1.0"
           roundedge="0"
           shadow="0.0"
           shadowrange="4.0"
           shadowangle="45"
           shadowcolor="0x000000"
           shadowalpha="1.0"
           textshadow="0.0"
           textshadowrange="4.0"
           textshadowangle="45"
           textshadowcolor="0x000000"
           textshadowalpha="1.0"
           alpha="1.0"
           parent=""
           noclip="true"
           />

Textstyle Attributes

Attribute nameFull variable nameTypeDefault value
name textstyle[name].name String
The name of the textstyle (see the name notes).
Use DEFAULT as name to overwrite the default textstyle settings.
Attribute nameFull variable nameTypeDefault value
origin
edge
xoffset
yoffset
textstyle[name].origin
textstyle[name].edge
textstyle[name].xoffset
textstyle[name].yoffset
String
String
int
int
"cursor"
"bottom"
0
-3
Position of the text.

Possible settings for origin:
  • cursor - show the text at the mouse position
  • lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom - show the text on the screen at the given position.
Possible settings for edge:
  • lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom - the alignment edge of the text at the origin position.
The xoffset and yoffset settings are defining the distance from the origin point to the edge point in pixels.
Attribute nameFull variable nameTypeDefault value
fadeintime
showtime
fadetime
textstyle[name].fadeintime
textstyle[name].showtime
textstyle[name].fadetime
Number
Number
Number
0.0
0.1
0.0
The times (in seconds) how long the text will be shown:
Attribute nameFull variable nameTypeDefault value
font
fontsize
bold
italic
textstyle[name].font
textstyle[name].fontsize
textstyle[name].bold
textstyle[name].italic
String
Number
Boolean
Boolean
"Times"
12.0
true
false
  • font - the name of the font-family.
  • fontsize - the point size of the font.
  • bold - bold font-style (true by default).
  • italic - italic font-style.
Attribute nameFull variable nameTypeDefault value
textcolor textstyle[name].textcolor int 0x000000
The default color of the text.
Attribute nameFull variable nameTypeDefault value
textalign textstyle[name].textalign String "none"
Align of the text: none, left, center, right.
Attribute nameFull variable nameTypeDefault value
paddingtextstyle[name].paddingString"2"
Padding / space in pixels around the text. Can be individually for each side.

There are 4 different ways to set the paddings (same as in CSS):
  • padding="25"
    • all four paddings are 25px
  • padding="25 50"
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding="25 50 75"
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding="25 50 75 100"
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
Attribute nameFull variable nameTypeDefault value
csstextstyle[name].cssString""
  • Add custom CSS styles for the text.
  • The HTML / CSS code will be rendered by the Flashplayer (Flash-viewer) or by the Browser (HTML5-viewer)! The Flashplayer itself supports only a very small subset of CSS1! For equal results in Flash and HTML5 only very simple css styles code should be used. The usage of CSS classes is not supported
  • Here a link to the Flashplayer documentation about the CSS support: http://help.adobe.com/.../StyleSheet.html
  • When setting font-sizes, it is important to use 'px' as entity to get the same results in Flash and HTML5.
Attribute nameFull variable nameTypeDefault value
width
height
vcenter
textstyle[name].width
textstyle[name].height
textstyle[name].vcenter
String
String
Boolean
""
""
false
Set fixed pixel-sizes for the text-field.
By default the size will depend on the text content.

vcenter - vertically center the text within a given fixed height.
Attribute nameFull variable nameTypeDefault value
background
backgroundcolor
backgroundalpha
textstyle[name].background
textstyle[name].backgroundcolor
textstyle[name].backgroundalpha
Boolean
int
Number
true
0xFFFFFF
1.0
  • Draw a background behind the textfield.
  • backgroundcolor - The color of the background (white by default).
  • backgroundalpha - The alpha transparency of the background.
Attribute nameFull variable nameTypeDefault value
border
bordercolor
borderalpha
borderwidth
textstyle[name].border
textstyle[name].bordercolor
textstyle[name].borderalpha
textstyle[name].borderwidth
Boolean
int
Number
Number
false
0x000000
1.0
1.0
  • Draw a border around the textfield.
  • bordercolor - The color of the textfield border.
  • borderalpha - The alpha transparency of the textfield border.
  • borderwidth - The line-width of the textfield border (will be added outside of the textfield).
Attribute nameFull variable nameTypeDefault value
roundedgetextstyle[name].roundedgeNumber0.0
  • Make the textfield edges round.
  • The value defines the size of the rounded edges.
Attribute nameFull variable nameTypeDefault value
shadow
shadowrange
shadowangle
shadowcolor
shadowalpha
textstyle[name].shadow
textstyle[name].shadowrange
textstyle[name].shadowangle
textstyle[name].shadowcolor
textstyle[name].shadowalpha
Number
Number
Number
int
Number
0.0
4.0
45.0
0x000000
1.0
Put a box-shadow behind the textfield.
  • shadow - The shadow value defines the distance of the shadow. A value of 0.0 disables the shadow. For a 'centered shadow' or 'glowing effects' use very small values like 0.01.
  • shadowrange - The blurring range of the shadow.
  • shadowangle - The angle of the shadow in degrees.
  • shadowcolor - The color of the shadow
  • shadowalpha - The alpha transparency of the shadow
Attribute nameFull variable nameTypeDefault value
textshadow
textshadowrange
textshadowangle
textshadowcolor
textshadowalpha
textstyle[name].textshadow
textstyle[name].textshadowrange
textstyle[name].textshadowangle
textstyle[name].textshadowcolor
textstyle[name].textshadowalpha
Number
Number
Number
int
Number
0.0
4.0
45.0
0x000000
1.0
Put a shadow behind the text.
  • textshadow - The textshadow value defines the distance of the shadow. A value of 0.0 disables the shadow. For a 'centered shadow' or 'glowing effects' use very small values like 0.01.
  • textshadowrange - The blurring range of the shadow.
  • textshadowangle - The angle of the shadow in degrees.
  • textshadowcolor - The color of the shadow
  • textshadowalpha - The alpha transparency of the shadow
Attribute nameFull variable nameTypeDefault value
alpha textstyle[name].alpha Number 1.0
The alpha (transparency) value (0.0 - 1.0) of the textfield.
Attribute nameFull variable nameTypeDefault value
parent textstyle[name].parent String
Assign a custom layer as parent element for the textfield:
  • either use the name of <layer> element,
  • or use STAGE to align the textfield outside / on-top of the pano area.
Attribute nameFull variable nameTypeDefault value
noclip textstyle[name].noclip Boolean true
Avoid the clipping of the textfield on the screen borders. The textfield will be always fully within the screen.