Callout Hotspots Plugin for Krpano
by Jerome Boccon-Gibod - jerome@360images.fr

Description

Callout hotspots plugin builds animated hotspots to display eye-catching text designed to draw attention.

This plugin DOESN'T WORK IN VR MODE !

Download

You can download the Callout Hotspots plugin for free to try it, without license watermarks will be added.

Buy the Callout Hotspots plugin license for Krpano - 29€  (HTML5 only - Krpano version min 1.19 pr4)
Buy the Callout Hotspots plugin license for Panotour Pro

krpano Forum Discussion Thread

Krpano Callout Plugin Thread

Syntax / XML Usage Example

Full include syntax 
<include url="plugins/callout.xml"/>
<callout 
	key="your license key" 
	size="10" 
	color="0xffffff"
	rotate="45"
	distancepopup="5"   
	min_fov="180" 
	max_fov="0" 
	line_lenght="100"
	line_width="2" 
	shape="round"
	circle_active_width="50"
	animation="center_screen" 
	text_width="300"
	callout_bg_border="0,0,0,2"
	text_x="10"
	css_title="color:#fff;font-size:25px;"
	css_text="color:#fff;font-size:16px;text-shadow: 3px 3px 8px #000000;"
	title_background="0xb50000"
	text_background=""
	title_padding="10"
	text_padding="10 10 0 0"
/>

Plugin Attributes

  • key
    • The license key you recieve when you buy the plugin.
  • size
    • Size of the hotspot in px.
    • default=10
  • color
    • Color of the hotspot and lines.
    • default=0xffffff
  • rotate
    • Orientation of the callout.
    • default=45
    • 90 will be right
    • 180 will be down
    • 360 will be topleft
    • 0 will be topright
  • distancepopup
    • Fov divider.
    • Area where the callout hotspot will be active.
    • default=5
  • min_fov
    • Minimum fov to display the callout.
    • default=180
  • max_fov
    • Maximum fov to display the callout.
    • default=0
  • line_lenght
    • Lenght of the callout line.
    • default=100
  • line_width
    • Width of the callout line.
    • default=2
  • shape
    • Shape of the hotspot.
    • default=round
        • available shapes
      • round
      • square
      • circle
  • circle_active_width
    • Width of the circle when the hotspot is active and circle shape is selected.
    • default=50
  • animation
    • How the callout hotspot should be animated.
    • default=center_screen
        • Available behaviours
      • center_screen - the hotspot callout will be displayed when entering the active area of the screen defined by distancepopup setting, and will be hidden when going out this area.
      • keep_opened - the hotspot callout will be displayed when entering the active area of the screen defined by distancepopup setting, and will stay opened.
      • on_over - the hotspot callout will be displayed when overing the hotspot
      • on_click - the hotspot callout will be displayed when clicking the hotspot
  • text_width
    • Width of the textfield. Only for the content data.
    • default=300
    • you can use "auto"
  • callout_bg_border
    • Border of the callout.
    • default=0,0,0,2
    • top right bottom left border width in px.
    • if you rotate the callout between 180 and 360 you should use 0,2,0,0
  • text_x
    • Distance from callout border.
    • default=10
  • css_title
    • Css for the title.
    • default=color:#fff;font-size:25px;
  • css_text
    • Css for the text.
    • default=color:#fff;font-size:16px;text-shadow: 3px 3px 8px #000000;
  • title_background
    • Background color for the title.
    • default=0xb50000
  • text_background
    • Background color for the text.
    • default=
  • title_padding
    • Title padding.
    • default=10
  • text_padding
    • Text padding.
    • default=10 10 0 0

Syntax examples

  • To add a callout hotspot just set it's style to "callout".

    You can override default settings adding them to a specific hotspot.

    <hotspot name="hs1" ath="0" atv="0" style="callout"
title="Default style"
 content="The default style can be customized in the default settings."/>
		
<hotspot name="hs2" ath="30" atv="0" style="callout" shape="circle"
title="Circle"
content="Show a circle with a defined size."/>
		
<hotspot name="hs3" ath="60" atv="0" style="callout" shape="square"
title="Square"
content="Square hotspot instead of default round one."/>
		
<hotspot name="hs4b" ath="90" atv="20" style="callout" rotate="180"
title="Rotate"
content="Choose any orientation for the callout."/>
		
<hotspot name="hs4" ath="90" atv="5" style="callout" rotate="120"
title="Rotate"
content="Choose any orientation for the callout."/>

<hotspot name="hs4c" ath="90" atv="-5" style="callout" rotate="300" callout_bg_border="0,2,0,0" text_padding="10 0 0 0"
title="Rotate"
content="Choose any orientation for the callout."/>
		
<hotspot name="hs4t" ath="90" atv="-20" style="callout" rotate="360" callout_bg_border="0,2,0,0" text_padding="10 0 0 0"
title="Rotate"
content="Choose any orientation for the callout."/>
		
<hotspot name="hs5" ath="120" atv="0" style="callout" rotate="270" line_lenght="20" callout_bg_border="0,2,0,0" text_padding="10 0 0 0"
title="Line size"
content="Setup the line size."/>
		
<hotspot name="hs6" ath="150" atv="0" style="callout" text_bg="true" callout_bg_color="0x00688f" callout_bg_alpha="0.6" callout_bg_border="0" text_x="0" text_padding="10" text_width="auto"
title="Background"
content="Show a color background."/>
		
<hotspot name="hs7" ath="180" atv="0" style="callout" animation="on_over"
title="On over"
content="The callout can be displayed on over."/>
		
<hotspot name="hs7b" ath="180" atv="15" style="callout" animation="on_click"
title="On click"
content="The callout can be displayed on click."/>
		
<hotspot name="hs7t" ath="180" atv="-15" style="callout" animation="keep_opened"
title="Keep opened"
content="The callout will stay displayed once opened."/>
		
<hotspot name="hs8" ath="210" atv="0" style="callout" onclick="showlog();trace('hotspot ',name,' has been clicked')"
title="Click action"
content="Onclick action will be called by the spot and text."/>
		
<hotspot name="hs9" ath="240" atv="0" style="callout" minfov="120" maxfov="70"
title="Min and Max fov"
content="Callout will only be displayed between those 2 fov values."/>
		
<hotspot name="hs10" ath="270" atv="0" style="callout" callout_bg_border="0,2" text_width="auto"
title="Borders"
content="Display the borders you need."/>
		
<hotspot name="hs11" ath="300" atv="0" style="callout" callout_bg_border="2" text_width="auto" text_padding="10" text_x="0"
content="Display the borders you need."/>
		
<hotspot name="hs12" ath="330" atv="0" style="callout" text_width.mobile="auto"
title="With img"
content="[img src='thumb.png' width='300' height='150'/]"/>

License

This plugin is offered as a commercial plugin. It is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.

Panorama Example

CLICK TO VIEW CALLOUTS EXAMPLES
FOR 360 PANORAMAS