Tour Creator Pro

Text Css3d hotspot

How to place:
In select hotspot type dialog choose "Usual Text hotspot (CSS3D)".
(Either in Upper menu or in Main hotspot editor menu.)

Select or create new data info for this hotspot. (Either choose Select info or Create info).
When the info have been created you can use it multi times in hotspots, layers or inforboxes.
When you "Select info", it will be available in html editor, and all changes will be applied for all copies.

Create info:
Write/place text in info editor text box.
Format text with html tags. To do this select fragment and press corresponding button.

Available html tags:

"Prepare html" button.
It is possible to prepare info in any html editor and place it in hotspot editor text box. In this case press "prepare html" button.
This action will replace < and > characters with the [ and ] characters. single-quote ' or double-quote " characters will be replaced with [sq] for the 'single-quote' character and [dq] for the 'double-quote' character

Text formatting - css style and text style is better to add later when you will have placed hotspot. In this case you have visual control over this settings.

Prepare image
Select image anyware on the system.
Select size of the thumb (horizontal, vertical will be calculate).
To allow thumb border: select border width larger then 0, and select border color
Write title for the image (subscribe it). The title will be appears under the image.
Select image align. Available:

To show large image on thumb click, check "Link large image"
Note:

Prepare link
Insert link value in link text box.
To call krpano event on link, change link tag in this format manually:

<a href="event:showlog(); trace('link clicked');">link</a>

Place hotspot
When hotspot html (data:info) is ready - press "Place hotspot" button.
Note:

Text style
With text style you order the appearance of background, border, roundedge and shadow for the text hotspot.
Available 3 pre-installed text styles in TourCreator pro.
But you can very quickly and simple create unlimited amount of textstyles for your own choice.

Create style
Select "Create style" in drop-down textstyle menu and change any parameter of formatting:

All changes you will see in real-time mode.
Press "Save style" to create new style in tour. The style will be available via drop-down menu.
If you press "exit" the parameters will be applied to the hotspot until you select other style. The changes will be saved in hotspot.

Note:

  1. The new style will be saved in openstyles.xml at the end of the document. Select "Edit openstyle.xml" in "Test tour" menu. If you make changes in xml document save them and press "reload tour" or "reload scene" to make them available.
    <style name="styletext3" hstextstyle="styletext3" bg="true" bgcolor="0x700416" bgalpha="0.8" borderwidth="3" borderalpha="0.5" bordercolor="0x000000" bgroundedge="10" bgshadow="3" />
  2. To make background transparent: either set backgroundalpha to 0 in editor, or set background="false" in openstyle.xml
  3. To make border transparent: either set border alpha to 0 , or set border width to 0 in editor.
  4. You can create your own text style in openstyle.xml To add it to the drop-down menu create attribute hstextstyle with original value.

Css formatting
With css style you order the appearance of font, font size, font color, margin, etc. for different html tags.
Available 4 pre-installed css styles in TourCreator pro.
But you can very quickly and simple create unlimited amount of css styles for your own choice.

Create CSS style
Select "Create style" in drop-down css style menu and change any parameter of formatting:

All changes you will see in real-time mode.
Press "Save style" to create new style in tour. The style will be available via drop-down menu.
If you press "exit" the parameteres will not be applied to the hotspot. The changes will not be saved in hotspot.
The new style will be saved in openstyles.xml at the end of the document. Select "Edit openstyle.xml" in "Test tour" menu. If you make changes in xml document save them and press "reload tour" or "reload scene" to make them available.

Note:
The default css style expect different font formatting for the following tags:

For example:
      p {font-family: "Arial, sans-serif"; font-size:16px;  margin-left: 10px; margin-right: 10px; color:#000000;}
      h1 {font-weight: bold; font-family: "Arial, sans-serif"; font-size:22px; color:#000000; text-align: center; margin: 0px; }
      h2 {font-weight: bold; font-family: "Arial, sans-serif"; font-size:18px; color:#000000; text-align: center; margin: 0px; }
      a {text-decoration:underline; color:#110088; font-weight:bold; margin-left: 10px; font-size:20px;} a:hover { color:#885500; font-size:20px;}
    
When you create new css style, the formatting will be the same for all tags.
For example:
font-family:Arial; font-size:52px; color:#FF0000; 
You can create your own style in openstyle.xml To add it to the drop-down menu create attribute infocss with original value.

Hotspot action.
Select action for hotspot from the drop-down menu.
Available 10 in-build actions and any custom action on your choice.

How to use in-build actions, please look in the part common for all hotspots.

Text onhover (optional)
Write any text that will be appears when mouse will be onhover hotspot.
When you need no text, leave text box empty.

Note:
When you select "Load scene" or "Load scene with set view" text box will be filled with scene title. In this case on mouse onhover will be appeared not only hotspot text, but also scene thumb as preview.
To avoid preview leave text box empty.
To change appearance of the scene preview, select "Edit openstyle.xml" in "Test tour" menu, and either select one of two text style with name "hsShowNextSceneStyle" or edit it.

<textstyle name="hsShowNextSceneStyle" background="true" backgroundcolor="get:skin_settings.design_bgcolor" backgroundalpha="get:skin_settings.design_bgalpha" border="true" borderwidth="2" bordercolor="0x810E21" roundedge="10" textcolor="0xffffff" padding="5" textalign="center" font="Arial" fontsize="14" edge="cursor" xoffset="0" yoffset="130" />

Hotspot style (Optionally)
To change appearance and behavior of Text Css3d hotspot, find in openstyles.xml text style with name styletexths and edit it.

<style name="styletexths" renderer="css3d" autoheight="true" padding="4" selectable="false" tooltip="" border="true" ondown="if(googleanalyt.hotspotclick,js(ga('send','event', 'hotspot', 'click')););" onclick="if(hsonclick, skin_hidetooltips();hsonclick,if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll1(); ););" onloaded="if(textonhover AND linkedscene===null AND onhover===null,copy(tooltip,textonhover); loadstyle(skin_tooltips););if(skin_settings.tooltips_hotspots, if(linkedscene AND textonhover===null, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips);););if(textonhover AND linkedscene,onhoverNextScene(get(name),get(linkedscene),'hsShowNextSceneStyle'););" />