close panorama

Radar Plugin radar.swf / radar.js Version 1.19
for Flash and HTML5
Select Version:

  • The radar plugin shows the current viewing cone / area.
  • It can be used on a floor map image to show the current viewing direction and field of view on it. Use the parent attribute to align in on a map image. Additionally it would be possible to mask out the radar to a specific area by applying an alpha mask image with the plugin mask attribute.
  • The pano viewing direction can be changed by dragging the radar cone with the mouse. (Can be disabled by setting enabled="false".)
  • The position and size of it can by adjusted with the standard plugin attributes.
  • See the Radar Heading topic for instruction about how to setup the radar/pano heading.

Syntax

Usage Example:
<plugin name="radar"
        url.flash="radar.swf"
        url.html5="radar.js"
        parent="map"
        align="lefttop"
        edge="center"
        x="100" y="50"
        scale="5.0"
        heading="0.0"
        headingoffset="90.0"
        fillcolor="0xFFFFFF"
        fillalpha="0.5"
        linewidth="0.0"
        linecolor="0xFFFFFF"
        linealpha="0.3"
        invert="false"
        editmode="false"
        />

Dynamically set the heading and x/y position:
set(plugin[radar].x, 203);
set(plugin[radar].y, 555);
set(plugin[radar].heading, 91.8);

Plugin Attributes

  • heading
    • The heading of the current pano in degrees, need to align the pano orientation with the radar on the map, default=0.
      See the Radar Heading topic for more details.
  • headingoffset
    • An offset for the heading value.
    • The default value for headingoffset is 90, which means heading=0 is pointing to right/east by default. Use headingoffset=0 to let heading=0 pointing to top/north.
  • fillcolor 
    • The fill color, default=0xFFFFFF.
  • fillalpha 
    • The alpha of the fill color, default=0.5.
  • linecolor 
    • The line color of the border line around the radar cone, default=0xFFFFFF.
  • linewidth 
    • The width of the border line around the radar cone, default=0.
  • linealpha 
    • The alpha of the border line around the radar cone, default=0.3.
  • invert 
    • Invert the radar cone. The cone will not fill the field of view, it will field the other area. Possible setting: true or false, default=false.
  • editmode  (Flash-only)
    • Enable the radar Heading Edit Mode, it helps finding the heading for the pano. Possible setting: true or false, default=false.
      When enabled (set to true) it is possible to right-click the radar and enable the editing of the heading. See the Radar Heading topic for more details.

Radar Aligment / Pano Heading

The heading the defines the orienation of the pano. It must be defined for each pano to align the radar to the map correctly.

The radar plugin includes a Radar Heading Edit Mode that helps finding the heading for the pano.

Here a how to for using the Edit Mode to find out the heading:

  1. Enable the Edit Mode of the radar plugin by setting the editmode attribute to true:
    <plugin name="radar"
            url="radar.swf"
            ...
            heading="0"
            editmode="true"
            />
  2. Right-click the radar and select "Radar Plugin - Edit Heading":
  3. Now you can drag the radar to adjust the heading, find the heading where the pano view and the radar are showing the same view. There will be a red crosshair in the pano and a red line in the radar for helping finding the same point. The current heading and addtional information about the current xml or scene will be shown on the screen:
  4. When done end the edit mode by right-click the radar again: The heading value will be copied into the system clipboard.

Examples

Barrique Vine Cellar Tour - Image-Map with Radar Navigation (Edit Mode enabled)

Open Source Plugin

The Javascript source of the HTML5 Radar plugin is here freely available as example for learning about how to use the krpano Plugin Interface.

Files: