News Examples Documentation Download Buy Forum Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

Textfield layer type=text Version 1.21

  • Textfields are elements for any kind of text in krpano.
  • Can be used for buttons, simple texts or even full html layouts.
  • The text can be HTML or BBCode formatted and styled by CSS styles or CSS classes.
  • A textfield is an extended container element and shares several settings and features with it, like the ones for the background shape and borders.
  • The position and size can by adjusted with the standard layer and hotspot settings.
  • When no width/height size is set, the element will resize itself to fit the given content. It will also adjust its size automatically when there are further changes (e.g. when embedded images got loaded or the html-content changes itself).
  • A textfield can be also used as input- or edit-field.
  • When using the textfield as layer or a CSS3D-rendered hotspots the full HTML/CSS capabilities are supported, but when using the textfield as WebGL-rendered hotspot, e.g. for VR-support, then only a simple/reduced HTML/CSS subset is supported. Because in this case the textfield needs to be drawn manually.

Syntax

Layer settings:
<layer name="mytext"
       type="text"
       align="lefttop" x="10" y="10"
       text="Text...[br][b]Bold Text...[/b]"
       rawhtml="false"
       css="font-family:Arial; font-size:16px; color:#000000;"
       cssclass=""
       txtshadow=""
       textalign="lefttop"
       padding="2"
       wordwrap="true"
       ellipsis="false"
       interactive="false"
       selectable="false"
       editable="false"
       editenterkey="stop"
       maskchildren="false"
       bg="true"
       bgcolor="0xFFFFFF"
       bgalpha="1.0"
       bgborder="0"
       bgroundedge="0"
       bgshadow=""
       onresize=""
       ontextchanged=""
       oneditstart=""
       oneditchange=""
       oneditstop=""
       />

Additional hotspot specific settings:
<hotspot name="mytext"
         type="text"
         renderer="auto"
         ...
         oversampling="1.0"
         mipmapping="false"
         />

Attributes

Attribute nameTypeDefault value
text (new) or html (old version name) String ""
  • Set the text/content for the textfield.
  • The text can be HTML or BBCode formatted and styled by CSS styles or CSS classes.
    • Note - for defining CSS styles/classes directly in the xml file, the <cssstyles> element can be used.
  • BBCode encoding:
    • In some cases, e.g. inside xml attributes or inside strings, some characters can't be used directly. Here the BBCode encoding provides alternatives.
    • BBCode character mapping:
      • <[ or [lt]
      • >] or [gt]
      • '[sq] (single-quote)
      • "[dq] (double-quote)
      • [[[
      • ]]]
  • Escaping:
    • As alternative to the BBCode-encoding, it is also possible to escape the html code.
  • Load the content from <data> or other elements:
    • Instead of storing the text/html-content directly in a limited xml-attribute, it would be also possible to put that content inside a <data> element and refer to that.
    • text="data:name-of-the-data-element"
    • text="get:data[name-of-the-data-element].content"
  • Linking to krpano actions:
    • By using html-links with event:... as link-target, it is possible to call krpano actions when clicking/touching the link.
    • The default scope for the called actions will be the textfield layer itself.
    • Example:
      <a href="event:showlog();trace('hello from textfield ',name);">link</a>
Attribute nameTypeDefault value
rawhtmlBooleanfalse
  • When enabled the content of the text setting will be used directly as html code for the textfield content. No parsing or modifications will be applied. No BBCode encoding, no escaping. No default font, font-size, text-color.
  • These settings will also have no effect when enabled: padding, txtshadow.
Attribute nameTypeDefault value
cssString""
  • Set the CSS styles for text/content of the textfield.
  • Can be used to set the font, text-color and so on, e.g.:
    css="color:#FFFFFF; font-family:Arial; font-size:12px;"
  • Load the content from <data> or other elements:
    • Instead of storing the CSS styles directly in a limited xml-attribute, it would be also possible to put that content inside a <data> element and refer to that.
    • css="data:name-of-the-data-element"
    • css="get:data[name-of-the-data-element].content"
Attribute nameTypeDefault value
txtshadow String ""
  • Add a shadow behind the text.
  • Syntax:
    txtshadow="xoffset yoffset blur color alpha, ..."
  • Multiple shadows can be added by using a comma separated list of additional txtshadow values.
  • Parameters:
    • xoffset, yoffset
      The offset / distance of the shadow in pixels.
    • blur
      The blur radius / range in pixels - defines how strong the shadow will be blurred.
      (0 = no blurring).
    • color (optionally)
      The color of the shadow. The default is 0x000000 (black).
    • alpha (optionally)
      The alpha transparency of the shadow. The default is 1.0.
    • ... (optionally)
      Add another shadow (comma separated).
Attribute nameTypeDefault value
textalignString"lefttop"
  • Alignment of the text/content within the textfield.
  • Possible values: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom.
Attribute nameTypeDefault value
paddingString"2"
  • Padding / space in pixels around the text/content. 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 nameTypeDefault value
wordwrapBooleantrue
  • Set if the text should automatically wrap around (line-break) to new lines when the text doesn't fit into the current line.
  • This setting has only an effect when setting a width for the textfield.
  • When disabled the text would get cut-off when it is larger than the given textfield width.
Attribute nameTypeDefault value
ellipsisBooleanfalse
  • When the text/content is larger than the given textfield width and line-breaking is not allowed or possible, then the text will end with three dots '...' instead of a hard-cut.
Attribute nameTypeDefault value
interactiveBooleanfalse *
  • When enabled a direct mouse/touch interaction with the textfield content is possible.
  • By default this is disabled to avoid conflicts when krpano and a html inner content are both processing the mouse or touch events.
  • Note - when the html content contains <a> or <iframe> elements, then this setting will be automatically enabled!
Attribute nameTypeDefault value
selectableBooleanfalse
  • Should the text/content be selectable by the user.
  • When enabled the browsers native/default contextmenu will appear when right-clicking (or long-touching) on the textfield.
  • Note - the selectable setting overrides the nativecontextmenu setting!
Attribute nameTypeDefault value
editableBooleanfalse
  • Should the text/content be editable by the user.
  • When enabled the user can click into the textfield and edit it.
  • To get informed about editing changes there are these events:
  • The edited content will be stored in the text variable.
  • Note that the edited content can be slightly different in each browser.
  • For dynamically starting or stopping editing these actions can be called:
Attribute nameTypeDefault value
editenterkeyString"stop"
  • Define what should happen when the user presses the Enter-key during editing:
    • stop - Stop/finish the editing (default).
    • newline - create a line-break / new-line.
    • shiftnewline - create a line-break / new-line when only pressing the Shift+Enter keys, otherwise stop the editing.
Attribute name (only for WebGL-Hotspots usage)TypeDefault value
oversampling Number 1.0
  • Upscale the internal bitmap rendering target by the given oversampling factor for a higher-resolution (sharper) text.
  • Settings larger 1.0 are improving the text-rendering-quality, but also requiring more memory- and rendering-resources.
  • Only related for WebGL hotspot rendering.
Attribute name (only for WebGL-Hotspots usage)TypeDefault value
mipmapping Boolean false
  • Enable mipmapping - this reduces aliasing effects when displaying the text as scaled-down element.
  • Mipmapping works by automatically upscaling the internal bitmap rendering target to the next power-of-two size (because that is required for mipmapping).
  • For better image/text-quality it would be recommended to use additionally also a higher than 1.0 oversampling setting.
  • Only related for WebGL hotspot rendering.

Dynamic variables

Attribute nameTypeDefault value
istextfieldBooleantrue
  • A variable to check if this layer or hotspot is a textfield.
Attribute nameTypeDefault value
textlayerHTML-Element
  • The inner HTML/DOM element that contains the text/content.
Attribute nameTypeDefault value
textwidth
textheight
Number
Number
  • The size of the inner text/content.

Events

Attribute nameTypeDefault value
ontextchangedEvent
  • Will be called after the text value has changed and the DOM elements were updated.
  • But before layout or resize updates.
  • Interactive changes by editing are not covered here.
  • This event can be used to get Javascript access to the DOM elements defined in the text code (e.g. by querySelector and so on).
  • Javascript Example:
    var tf = krpano.addlayer();
    tf.type = "text";
    tf.interactive = true;
    tf.text = "Test <button>click me</button>";
    tf.ontextchanged = function()
    {
      var button = tf.textlayer.querySelector("button");
      button.onclick = function(){ alert("button clicked"); }
    }
    
Attribute nameTypeDefault value
oneditstart
oneditstop
Event
Event
  • These events will be called when the textfield gets or loses the users input focus.
  • They could be used to highlight the textfield for editing.
Attribute nameTypeDefault value
oneditchange Event
  • This event will be called when the textfield content changes due editing.
  • Note - that can happen also without or outside oneditstart/oneditstop events, e.g. when the browser changes the text-content anytime later due an 'undo-call'.

Actions

Function nameTypeDefault value
startediting(select) Action
  • Start editing the textfield.
  • The textfield will get enabled for editing (editable set to true) and will get the input focus.
  • Parameter:
    • select - Should the text/content be selected, true or false. The default is false.
  • This could be used for actively starting editing a currently not editable textfield, e.g. when doing a double-click on a textfield or when showing a textfield for direct user-input.
Function nameTypeDefault value
stopediting() Action
  • Actively stop the editing.
  • The textfield will lose the input focus and will get disabled for editing.
  • The editable setting will be set to false after this call.