News Examples Documentation Download Buy Forum Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

Arrows Plugin arrows.xml for Flash and HTML5
by Sergey Kruk - sergey.kruk@gmail.com

Description

Inspired by a streetview. This plugin creates a hotspot that is shaped like an arrow or any other flat shape and looks like it points form a point in front of a viewer to a specified direction. Under the hood it is a hotspot that is redrawn on viewchange event. Hotspot is used to profit from already exisitng customisation possibilities and also to use any future polygon features like round corners for example if they come in any future version.

Download

arrows.zip  (plugin and example included, 547kb)

Syntax / XML Usage Example

<include url="arrows.xml" />

<layer name="connections" >
    <connection name="scene2" 
                hdir="23"
                vdir="-25"
                arrowstyle="default-arrow"
                shadowstyle="default-shadow"
                onclick="loadscene(%name, null, KEEPVIEW, BLEND(0.2));"
                shape="default-arrow-shape"
                shadow="true"
                />
    ...
<layer>

<layer name="my-arrow-shape" keep="true">         <!-- optional -->
    <arrow>
        <point name="p0" x="0" y="40" />
        <point name="p1" x="-13" y="35" />
        <point name="p2" x="0" y="57" />
        <point name="p3" x="13" y="35" />
        <center dist="180" shadowdrop="0.35">
            <functionv>               <!-- even more optional -->
                <point name="p0" vlookat="0" posv="16" />
                <point name="p1" vlookat="90" posv="90" />
            </functionv>
        </center>
    </arrow>
</layer>
<connection>
This is a placeholder for all the attributes and parameters that will be transformed into arrow-shaped (or any other shape) hotspot on the fly.
Attribute name Type Default value
name String N/A
This value must be defined. If onclick attribute is not defined on connection tag and connection is not set to non-interactive, hotspot will try to load a scene with the same name. If this value is not defined no arrow shows up due to connection tags not being recognized as an array.
Attribute name Type Default value
hdir Number N/A
Azimuth of direction to point arrow to in degrees (yaw angle). This value must be defined.
Attribute name Type Default value
vdir Number 0.0
Vertical direction to point arrow to in degrees (pitch angle). Positive angle inclines the arrow down. If not defined considering arrows to be in horizontal plane i.e. vdir=0. This value must be in range -90.0 to 90.0
Attribute name Type Default value
arrowstyle String default-arrow
Name of a style that can be applied to a polygonal hotspot. Will be used for arrow construction. Always set zorder > 0 to avoid it being covered by a shadow.
Attribute name Type Default value
shadowstyle String default-shadow
Name of a style that can be applied to a polygonal hotspot. Will be used for shadow construction. Always set zorder = 0 to avoid it covering arrows.
Attribute name Type Default value
onclick String loadscene(%name, null, KEEPVIEW, BLEND(0.2));
Same as hotspot.onclick. If this attribute is not defined, than name attribute is used and default action is assigned: loadscene(%name, null, KEEPVIEW, BLEND(0.2)); If you don't want any reaction on click onclick="" must be specified. It is also useful to set handcursor="false" on your arrow style tag in that case.
onover String N/A
Same as hotspot.onover.
onhover String N/A
Same as hotspot.onhover.
onout String N/A
Same as hotspot.onout.
ondown String N/A
Same as hotspot.ondown.
onup String N/A
Same as hotspot.onup.
Attribute name Type Default value
shape String default-arrow-shape
Name of a layer with arrow shape description.
Attribute name Type Default value
shadow Boolean true
This attribute specifies if a shadow must appear under this connection shape. This attribute can be specified in a corresponding style tag.
<arrow>
This is totally optional tag. You can avoid using this tag at all if you are content with the default shape. If you are using multiple scenes the layer tag that contains this arrow tag must have keep="true" attribute set.

This is a placeholder for flat pointer projection shape. It must contain several <point> tags. Each point must have name attribute. This is for krpano to transform point tag into an array. Names themselves don't matter, each point should have a unique name though. Also arrow tag must contain one <center> tag.

Points describe flat arrow such as point x = 0, y = 0 is the center of rotation for the arrow and y axis (x = 0) is where it points.
<center>
This tag must be present in <arrow> tag. This describes the behaviour of the center of rotation of all arrows of this shape. It has two required attributes and one optional <functionv> tag.
Attribute name Type Default value
dist Number N/A
This is virtual distance from the center of panoramic sphere to a point of revolution of the arrow. Its physical sence is pretty vague but it works like a scale factor. Greater it is — smaller are arrows. In relation with point coordinates it helps to get just the right shape and size. For my default shape I use 180, but this is not a default value if you write this tag yourself. You must specify it.
Attribute name Type Default value
shadowdrop Number N/A
This is how much shadow shape is lower than pointer shape in view.vlookat degrees. For my default shape I use 0.35, but this is not a default value if you write this tag yourself. You must specify it.
<functionv>
Even if you specify arrow shape you don't have to use this tag. This tag describes how center of arrow revolution is placed depending on your view.vlookat angle. With the same sign (0 at horizon, 90 downward, -90 upward). Inside <point> tags describe a piecewise linear function. What it says above is: when I look horizontally and above, I want the center of revolution to be slightly lower than the horizon (16 degrees lower); when I look down, I want the center of revolution to be directly under me. It is linear in between. This is the default behaviur. For another example see example.xml.
Example
CLICK TO VIEW EXAMPLE