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.querySelector("#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'). |
