Adding a Premises Map for OnSSI's NVR Remote Web Access Client
Preparing the map
Prepare a map of the premises as a .jpg or .gif file. The map can consist of any graphic depiction of the premises, such as a geographical map, architectural drawing, aerial view, etc.
The image may also include camera icons or thumbnails, to provide a better understanding of the type and make of the camera, whether it is fixed or PTZ-enabled, etc. (see example)
When preparing the image in an image editor, set the image resolution to 72 dpi.
Note that the pixel dimension of the image should match the resolution of the screen used for viewing. Most screens accept a resolution of 1280x1024 pixels, however many users have their screens set to 1024x768 or even 800x600.
From whatever screen resolution, subtract 200 pixels for the left-side toolbar.
Therefore, for an assumed 1024x768 screen resolution, the map image should be about 750 pixels wide and 550 pixels high.
When viewed on a lower-resolution screen (e.g. 800x600), the map will exceed the screen boundaries but would become drag-enabled so that all areas of the map are accessible.
Inserting the map
Open the source code file for the premises_map.html file, usually located at C:\Program Files\ONSSI\NetDVMS\html. You may use any text or HTML editor.
Locate the line of code indicating the image source:
<img src="premises_map.gif" border="0">
Replace the default file name, 'premises_map.gif', with the name of your premises map file, i.e. 'map1.gif'. Save and exit
Your premises map will now appear on the remote Web client.
Assigning hyperlinks to the camera icons
You may use any HTML plotting application to add hyperlinks to the image. For your convenience, you may use the iMapic application, available at http://onssi.com/downloads/imapic.exe.
Using the rectangular, round or freehand tools, plot a clickable area in the image. Click on the ‘ok’ button after plotting each image. A form will appear, click ok without filling the form; proceed to plot the next area.
Once you’re done plotting all of the clickable areas, highlight and copy the source code in the bottom pane, and paste it into the body of the premises map HTML file, using any text or HTML editor.
To each line in the code that starts with “<AREA SHAPE”, add the following, within the HTML tag :
href="#" onclick="javascript:parent.menuframe.toLive([camera number]);
Replace [camera number] with a unique number for each camera.
Save and exit. The map is now hyperlinked (clickable).
Here's a sample of what the code should look like:
<IMG SRC="office_layout1.gif" BORDER=0 USEMAP="#office_layout1.gif">
<MAP NAME="office_layout1.gif">
<AREA SHAPE="rect" ALT="" COORDS="49,343,76,378" href="#" onclick="javascript:parent.menuframe.toLive(1);">
<AREA SHAPE="rect" ALT="" COORDS="137,88,154,122" href="#" onclick="javascript:parent.menuframe.toLive(2);">
</MAP>
Please contact support@onssi.com if you have any questions
