Duckware
 You are here: Duckware » PMVR   Contact us  
PMVRTM - Patented Mappable VR

 
  1. What is PMVR?
PMVR is an HTML5 panorama viewer, that displays high resolution panoramas, with an optional integrated map/floorplan feature, on web sites, demo CDs, Kiosks, etc:


No plugin / Runs everywhere: There is NO PLUGIN. PMVR is HTML5 based, which means that it works in ALL modern web browsers — on smartphones, tablets, computers (Windows, OSX, Unix, etc).

PMVR in Full Screen mode on an 1920x1080 HDTV monitor
PMVR Full Screen mode on an HDTV monitor
FAST / Fullscreen PMVR uses the GPU (Graphics Processing Unit) on your device to ensure high-quality and smooth graphics, and enables full-screen capabilities (example seen right on a 1080p HD monitor).

Patented Technology: PMVR is a unique panoramic viewer, displaying an optional FloorPlan/Map. which greatly enhances a viewers ability to walk through a 'mappable' environment and understand 'direction'. See US Patent #6563529.

Tour Authoring Software: PMVR comes with the Virtual Tour Editor authoring tool, which takes care of all the hard work for you. Or, simply give your web developer the pmvr.js file and give them the freedom to create a unique tour experience.

Large Panorama Support: Very large panoramas are supported.
 
Examples: Click on one of the following images to view a virtual tour that uses PMVR:

 
 
 
  2. Quick Start
TIP: Run the VirtualTourEditor.exe virtual tour authoring tool (in the trial download) to quickly create professional virtual tours with multiple nodes and floorplan/map images -- all with hotspots.

Quick Start 1: Display a panorama: Do you already have a panorama to display? If not, we have some tips to get you started. Or use download and use sample image (saving it to your hard disk drive).

When you have a panorama to display, place it into a directory with an HTML file (that you create yourself, or by using an HTML editor) and add the following HTML code into the body of the document:
<div id="pmvr" style="width:800px;height:600px">
  <param name="image" value="yourpanorama.jpg">
  <param name="view" value="360">
  </div>
Next, add some Javascript into your web page to bind PMVR (to the div id) when your web page loads, similar to:
<body onload="PMVR.bindto('pmvr')">
Finally, place the pmvr.js file (from the PMVR download/installation) into this same directory, load it at the top of your web page, and you are done! View your HTML file to view your panorama. View quickstart1.html Live Example

Quick Start 2: Add a map/floorplan: If you do not have a floorplan or map image, just use this sample floorplan, saving it to your hard disk drive. Then add this into your HTML document, where X, Y is the camera location on the map:
<div id="FloorPlan" style="width:400px;height:600px">
  <param name="image" value="floorplan.gif">
  <param name="x" value="141">
  <param name="y" value="46">
  </div>
Next, add the FloorPlan div id into the PMVR bindto call:
PMVR.bindto('pmvr','FloorPlan')
And finally instruct PMVR to interact with the FloorPlan, by adding a pixdeg param into the pmvr div tag -- which describes panorama pixel width and compass direction:
<param name="pixdeg" value="0=270,6164=270">
View quickstart2.html Live Example

Quick Start 3: Add a title bar with 'fullscreen' icon: First, add a new div into your HTML:
<div id="Label"></div>
and bind the div id to PMVR:
PMVR.bindto('pmvr','FloorPlan','Label')
View quickstart3.html Live Example
 
  3. Script File Syntax
Script Files: Because placing param's into HTML quickly becomes unwieldy when creating multi-node tours, all of the params for an entire scene are typically moved into a single script (text) file section, and replaced by a single param reference:
<param name="script" value="script.txt:init">
Syntax: Script files are UTF-8 text files composed of [sections], where each line in a section sets a PMVR parameter value using a divid.key=value syntax. For example:
[init]
  pmvr.script=$THIS:LivingRoom

[LivingRoom]
  Label.txt=Living Room
  pmvr.image=images/livingroom.jpg

[Kitchen]
  Label.txt=Kitchen
  pmvr.image=images/kitchen.jpg
Example: View the script.txt file for the PMVR scene running at the top of this web page.
 
  4. Controlling PMVR via Javascript
When you bind PMVR to a series of div ids in a webpage via PMVR.bindto(pmvr-divid, floorplan-divid, label-divid), an interface to control that part of PMVR is exposed via a new document.divid object.

For example, if you have a PMVR tour, and you name the div ids the standard "pmvr", "FloorPlan", and "Label", that will cause the following interfaces to be exposed:
document.pmvr.set(key,value)
document.FloorPlan.set(key,value)
document.Label.set(key,value)
The 'key' is any parameter name, and 'value' is what to set the parameter to. For example, if you want to script the ability to go into full screen mode, you would do this (from an 'onclick'):
document.pmvr.set('fullscreen','yes')
This interface is intentionally identical to the prior version of PMVR (based upon Java applets), so that virtually all prior scripting code will also work with the new HTML5 version of PMVR.



pmvrEventHook(): If there is a function inside the webpage called pmvrEventHook, defined as follows:
function pmvrEventHook(action,arg,applet) {
  ...
  }
PMVR will call that function to notify the web page of significant PMVR events:
actionarg
node User navigated to a new node / script section (arg is a String name)
preload The panorama for the given node / script section was preloaded (arg is a String name)
vpi Viewport information, where arg is an object containing numbers lpix, rpix, tpix, bpix, iw, ih, ldeg, rdeg, and z.
The Virtual Tour Editor uses this event hook to create links on a web page that gray and bold as you navigate through a tour. This callback can be used to synchronize the viewports of two panoramas to a single floorplan.
 
  5. PMVR Parameters
TIP: The Virtual Tour Editor will automatically configure and set most of these parameters for you. This entire section is provided for advanced users who want to manually customize their tours.

PMVR Parameters
namevalueDescription
scriptscriptref Runs all commands within a given script [section] — the preferred way to set all parameters for a scene
imageURL A relative URL to a panoramic image (JPG) to display. Optional "#WxH' appended specifies original image width/height (allows you to drop in a high quality JPG into a tour without changing any scripts).
viewInteger The panoramic image width, in degrees (1-360). Must set to 360 for a full 360 panorama. Defaults to non-360 value.
autoInteger Horizontal auto scroll one pixel every specified number of milliseconds (default 1/60 second). The sign (positive/negative) of this value indicates direction. Positive moves camera right. Negative moves camera left.
centerInteger Whenever a panorama is first viewed, this pixel location is centered within the viewport. Defaults to 0.
vcenterInteger Whenever a panorama is first viewed, this vertical pixel location is centered within the viewport.
pixdegpixdeg-spec Defines which direction a panorama is facing. See pixdeg-spec for details.
delayInteger Delay in milliseconds before auto scrolling restarts (default: 30000)
linksscriptref Defines hot spots. Points to a script [section], where each line in the script section is a link-spec
spotURL A relative URL to a image (usually a transparent GIF), which overlays all hot spots.
fullscreenyes/no May only be set via javascript scripting as part of a onclick handler. Causes the viewer to go into full screen mode.
hoveryes/no Hilight hotspot when mouse hovers over it (default: yes)
arrowsyes/no Displays arrows when panorama is dragged (default: yes)
backgroundcolor Background color (default gray: F0F0F0)
foregroundcolor Foreground / text color (default black: 000000)
cHelpcolor background color of popup hotspot labels (default white: FFFFFF)
cZoomcolor Inside color of zoom slider dot (default: 40FF40)
cSlidercolor Inside color of zoom slider (default white: FFFFFF)
zMinInteger Minimum zoom, as a percentage value. Defaults to 10 (10%).
zMaxInteger Maximum zoom, as a percentage value. Defaults to 400 (400%).
zInteger sets current zoom factor. For scripting.

FloorPlan Parameters
namevalueDescription
scriptscriptref Runs all commands within a given script [section] — the preferred way to set all parameters for a scene
imageURL A relative URL to a floorplan/map image (GIF/JPG/etc) to display
xInteger The X (horizontal) pixel location on the map where hilight arc is centered
yInteger The Y (vertical) pixel location on the map where hilight arc is centered
linksscriptref Defines hot spots. Points to a script [section], where each line in the script section is a link-spec
grayInteger Opacity (0-100) of the non-hilight arc (default: 20). A negative value will gray the hilight arc.
hoveryes/no Hilight hotspot when mouse hovers over it (default: yes)
backgroundcolor Background color (default gray: F0F0F0)
foregroundcolor Foreground / text color (default black: 000000)
cHelpcolor background color of popup hotspot labels (default white: FFFFFF)
cGraycolor The color of the hilight arc (default black: 000000)

Label / Title Bar Parameters
namevalueDescription
textString Text displayed
fsimageURL A relative URL to a 'go full screen' icon to use. The default is an internally generated icon with four arrows pointing at the corners.



scriptref: is a "filename{:section}", where the filename is a relative URL, followed by a ":section" within the script (is missing, defaults it "init").

link-spec: is a "pts=num-list TAB href=url-target TAB desc=description {TAB spot=image}" where 'num-list' specifies the type of region (rectangle, circle, etc -- see num-list below), 'url-target' is the URL to launch when the user clicks in the link region (or Scripting action, see url-target below), and 'description' is the human readable description that is displayed when the user moves the mouse over the region, and 'spot' is the URL to a spot image (usually always a small transparent GIF).

url-target: A URL (absolute or relative) followed by an optional " in target", where target is _blank, _parent, _self, _top, your own name, a window name, a frame name, or an iframe name. Or "javascript:" followed by JavaScript code. However, please note that the JavaScript code must not contain any commas (which are used by the link-spec). This is usually not a problem since you can just call a JavaScript function that you have written within the web page, which can contain commas. Refer to the Scripting [§6] section for details (especially the section on MAYSCRIPT). A relative URL is relative to the HTML document URL. Sometimes you just want to create a hot spot that annotates the image. In this case, set the url-target to "-" (a comment -- do nothing). For example, here are some url-targets:
Typeurl-target SyntaxExample
relativefilenamekitchen.html
absoluteURLhttp://www.xyz.com
targetURL in namehttp://www.duckware.com in _top
javascriptjavascript:codejavascript:alert('Clicked!')
variableset:{divid.}parameter=valueset:pmvr.view=180
scriptset:{divid.}script=scriptrefset:script=script.txt:gotoKitchen
comment--
num-list: The number list varies in size depending upon what hot spot region you want to create. For a simple x-axis section (all y pixels), use two numbers, as is "left,right". For a circle, use three numbers, as in "x-center,y-center,radius". For a rectangle, use four numbers, as in "left,top,right,bottom". For a polygon, use multiple x,y pairs, as in "x1,y1,x2,y2,....,xn,yn". In summary:
Region Typenum-list specificationSample num-listarea below
x-axis sectionleft,right100,200X
circlex-center,y-center,radius300,100,50C
rectangleleft,top,right,bottom400,100,500,200R
polygonx1,y1,x2,y2,....,xn,yn600,50,700,150,600,250,
550,200,600,150,550,100
P

Types of Regions
Degree system
pixdeg-spec: A list of 'pixel=degree' -- that identifies the direction (degree) you are looking at various pixel locations. At a minimum, the first and last pixel/degree need to be specified. More are needed only if the panoramic is not a perfect panoramic.

color: A color specified in 'RRGGBB' (red/green/blue) hexadecimal format. For example, 'FF0000' is pure red, '00FF00' is pure green, '0000FF' is pure blue, 'FFFFFF' is white, '000000' is black, 'CCCCCC' is light gray, etc. Please refer to http://www.utexas.edu/learn/html/colors.html for a list of sample colors along with 'RRGGBB' values.
 
  6. Keyboard shortcuts
Within PMVR, 'A' and 'Z' will zoom in and out, and arrow keys move the panorama around (holding shift down will move by one pixel).
 
  7. TIPS
Javascrpt Console: Before deploying a PMVR virtual tour, test in various web browsers, and on the desktop, in Microsoft Internet Explorer / Edge, and Google Chrome, press F12 and review the Javascript console for any error messages.
 
  8. Converting PMVR HTML from Java Applets to HTML5
To convert your HTML from a prior version of PMVR (which used Java applets) to the new version (which uses HTML5), follow these steps:
  1. Add a script tag into the HTML head and include the new pmvr.js.
  2. When your web page loads (hook into onload of the body tag), call PMVR.bindto("pmvr","FloorPlan","Label") (if you don't use FloorPlan or Label, set those arguments to null).
  3. Change applet begin/end tags to div begin/end tags and change each tag's name="..." attribute to id="..." (NOTE: do not change the 'name' in 'param' tags!)
  4. Remove all other attributes (note: not 'param' tags) from the old applet tags, changing width=# and height=# attributes to CSS: style="width:#;height:#"
  5. Verify when changing scenes, that appropriate parameters are fully set (like PMVR's 'view' to 180 or 360, etc).
 
  9. No Nonsense License Agreement
PMVR is shareware. That means that you may try it for free to see if it works for you. If you like the software enough to keep using it, you must pay for it. The unregistered version of PMVR is for evaluation purposes only and may not be used on real-world servers. If you find anything wrong with the software, let me know and I will try to fix the problem immediately. My entire liability for your use of this software shall not exceed the amount you paid for the software. You may not reverse engineer or decompile the software. You may not modify the software in any way. The software may not be used on adult sites nor to display adult material. License violations will result in license termination, forfeiture of license fees, and possible prosecution.
Copyright © 2000-2024 Duckware