The immersive experience!

Panorado FOV - Field of View Display Element

- Extend the capabilities of Panorado JS

What is this?

Panorado FOV is a very simple JavaScript-based visual element. It displays a wedge-shaped field of view representation with varying orientation and width on top of a background image.
The background image could be, for example, a compass scale, a site map, or a floor map.
It is primarily intended to add visualization capabilities to the Panorado JS viewer, but does not depend on it.

You can download the uncompressed JavaScript file; it's free of charge.

To integrate the script into your HTML page, you need to follow these steps:

  • Place a <canvas> element with a unique id as a placehoder for the element within the <body> element.
  • Include a reference to the JS file in your page header:
    <script src="js/PanoradoFOV.js"></script>
  • Write a JavaScript function to be executed when the page has been loaded (window.onload event):
    - Initialize the viewer (see the Panorado JS reference).
    - Define a viewer.onImageMove function which will update the FOV element's display.
    - Initialize the PanoradoFOV object and set some of its properties like the URL of the background image.

Please have a look at the demo page and its source code!

PanoradoFOV class

PanoradoFOV is just an ordinary JavaScript class, with a constructor and some properties.

The constructor takes a canvas element as an argument:

fov = new PanoradoFOV(document.getElementById("fov"));

PanoradoFOV
properties

A PanoradoFOV object supports these properties (all angles in degrees):

version [get; String] The script's version number.
bkImage [set, get; String] The URL of the image to be displayed in the background.
The image is always stretched to the full size of the canvas element.
ctx [get; Object] The canvas element's display context object. You can set some of the object's visual properties (see below).
xCenter [set, get; Num] The distance between the canvas element's left margin and the FOV wedge's center, as a fraction of the canvas width (0..1; default: 0.5).
yCenter [set, get; Num] The distance between the canvas element's top margin and the FOV wedge's center, as a fraction of the canvas height (0..1; default: 0.5).
radius [set, get; Num] The radius of the FOV 'wedge' (20..x; in pixels). If not set, the FOV will extend to the border of the canvas element.
pan [set, get; Num] The cardinal direction of the FOV 'wedge' (0..360; in degrees).
0 is up/north.
Changes are normally triggered by external events like the motion of a viewer.
fov [set, get; Num] The width of the FOV 'wedge' (1..120; in degrees).
Changes are normally triggered by external events like the motion of a viewer.

PanoradoFOV.ctx
properties

The display context of a PanoradoFOV object supports these properties:

globalAlpha [set, get; Num] The opacity of the FOV 'wedge' above the background (0..1).
Note that this doesn't affect the background itself! Use the opacity and background-color styles of the canvas element to control the appearance of the whole element.
lineWidth [set, get; Num] The width of the FOV wedge's outline (in pixels).
strokeStyle [set, get; String] The color of the FOV wedge's outline
(in CSS notation like '#fff').
fillStyle [set, get; String] The color of the FOV wedge's area
(in CSS notation like '#fff').