News Examples Documentation Download Buy Forum Contact

Radar Plugin radar.js Version 1.22

  • 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. By using maskchildren="true" on the parent element it's possible to draw the radar cone only with the parent layer.
  • The pano viewing direction can be changed by dragging the radar cone with the mouse (but could be disabled by adding enabled="false").
  • The position and size of it can by adjusted with the standard plugin attributes.

Syntax

Usage Example:
<plugin name="radar"
        url="%VIEWER%/plugins/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"
        customhlookat=""
        customhfov=""
        oncustomchange=""
        />

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.
  • 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.
  • customhlookat and customhfov
    • Set custom hlookat and hfov values for the radar cone.
    • When set, the radar will be decoupled from the pano and can be controlled manually.
    • This can be used for flat or partial panos, where the view.hlookat and view.hfov values might not fit.
  • oncustomchange
    • A callback action that gets called when the radar-cone set by customhlookat gets changed due manual dragging.

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.

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: