News • Examples • Documentation • Download • Buy • Forum • Contact

VR Tooltip for Hotspot Plugin vrtooltip_hotspots.xml for HTML5 and WebVR! (Oculus Rift, Google Cardboard, GearVR, ...)
by Cyril Chauveau - chauveau.cyril@gmail.com

Description

  • This plugin WORKS IN VR MODE !
  • A simple and customizable tooltip plugin that can be used on a hotspot.
  • It is possible to define two differents hotspots (round or square).
  • Possible to set hotspots color, size, pulsate, alpha and icon.
  • Possible to set all the tooltips or independently (background color, alpha, position, size ...).
  • Each hotspots can be individually configured (focus, zoom, fov ...).

Download

Buy and download VR Tooltip for Hotspot Plugin - 23€
(HTML5 only - Krpano version 1.19 pr4 min - html5:"only+webgl"}

Usage

Include the plugin's xml file:

<include url="plugins/vrtooltip_hotspots.xml" />

Setting

These are the global tooltip settings.

<vrtooltip_style
      	tooltips_bgcolor="0x000000"
        tooltips_bgborder="1 0x000000 0.8"
        tooltips_bgalpha="0.8"
        tooltips_bgroundedge="5"
        tooltips_bgshadow="0 4 10 0x000000 0.3"
        tooltips_padding="10 15 10 15"
        tooltips_css="span{font-family:Helvetica; font-size:12px; color:#ffffff; margin:0px;}h1{margin:0px;padding:0px;}"

	hotspots_bgcolor="0xffffff"
        hotspots_pulsate="true"
/>

You can add optionnal attributes in hotspots to overwrite global tooltip settings (see Hotspot settings below)

Plugin Attributes

  • tooltips_bgcolor
    • Background color for tooltips.
    • If attribute is missing, default value will be on backgournd of skin used
  • tooltips_bgborder
    • Background border size for tooltips.
    • If attribute is missing, default value will be on border of skin used
  • tooltips_bgalpha
    • Background alpha for tooltips.
    • If attribute is missing, default value will be on alpha of skin used
  • tooltips_bgroundedge
    • Background border radius for tooltips.
    • If attribute is missing, default value will be on border of skin used
  • tooltips_bgshadow
    • Background shadow for tooltips.
    • If attribute is missing, default value will be on border of skin used
  • tooltips_padding
    • Padding for tooltips.
    • Default=10 15 10 15
  • tooltips_css
    • Tooltip content customized CSS.
  • hotspots_bgcolor
    • Hotspots background color.
    • Can be set individually using "bgcolor" attribute
  • hotspots_pulsate
    • Enable/disable hotspots pulse effect.
    • Can be set individually using "pulsate" attribute
    • Value= true or false

Hotspots settings

<hotspot
        name="spot1" 
        style="hsround"
        
        tooltiptext="[h1]scene [/h1][br/][i]italic text[i/]"
        tooltipposition="top"
        tooltipdistance="65"
        
        tooltipbgcolor="0x000000"
        tooltipbgborder="1 0x000000"
        tooltipbgalpha="0.8"
        tooltipbgroundedge="5"
        tooltipbgshadow="0 4 10 0x000000 0.3"
        tooltippadding="10 15 10 15"
        tooltipcss="span{font-family:Helvetica; font-size:12px; color:#ffffff; margin:	0px;}h1{margin:0px;padding:0px;}"

	icon="skin/info.png"
	pulsate="true"
	bgcolor="0xffffff"

        scale="0.1"
        
        focus="true"
        fov="20"
        
        handcursor="true"
        linkedscene="..."
        ...
/>

Hotspots Attributes

  • style
    • Set CSS style.
    • Value= hsround (round hotspot) or hssquare (square hotspot)
  • tooltiptext
    • Contains text to display in tooltip.
    • You can use standard tags (example: [p][/p] [small][/small] [strong][/strong] [h1][/h1]...)
  • tooltipposition
    • Position of the tooltip from the hotspot
    • Possible values = lefttop, left, leftbottom, top, bottom, righttop, right, rightbottom
  • tooltipdistance
    • Distance of the tooltip from the hotspot (in pixels)
  • tooltipbgcolor
    • Overwrite global value bgcolor tooltip's
  • tooltipbgborder
    • Overwrite global value bgborder tooltip's
  • tooltipbgalpha
    • Overwrite global value bgalpha tooltip's
  • tooltipbgroundedge
  • tooltipbgshadow
    • Overwrite global value bgshadow tooltip's
  • tooltippadding
    • Overwrite global value padding tooltip's
  • tooltipcss
    • Overwrite global value css tooltip's
  • icon
    • Set to add an icon in a hotspot if you add this parameter
    • Value = URL to image
    • Best if height and width are equal
    • .png recommend (Base64 compatible)
  • pulsate
    • Activate or not the hotspot pulses.
    • This option locally replaces the general variable (hotspots_pulsate)
    • Value= true or false
  • bgcolor
    • This option locally replaces the general variable (hotspots_bgcolor)
  • scale
    • Hotspot size.
  • focus
    • Set focus on the hotspot (not in VR).
    • Value= true or false
  • fov
    • Set zoom on the hotspot (not in VR).