JavaScript Documentation

Documentation for the JavaScript version, API and overall JavaScript implementation.

Getting Started

Easy Virtual Tour Builder lets you create interactive virtual tours from equirectangular 360 panoramas in JPG, PNG, or KTX2 format. You can connect multiple scenes, add hotspots/markers, display tooltips and rich info windows, open links, trigger camera moves, and build smooth guided navigation for any space.

It is built with modern EcmaScript6, plain JavaScript, and CSS, with no external dependencies.

Please note that it will not work locally. It must run on an HTTP or HTTPS server.

Because the panoramas are loaded and rendered in the browser, it is important to optimize your images before publishing. Keep file sizes as low as possible without sacrificing too much visual quality, and compress your assets using a tool like tinypng.com.

If you are planning to use textures larger than 8k, it is recommended to test performance on your target devices and use the KTX2 format.

Easy Virtual Tour Builder is built with vanilla JavaScript, so it can also be integrated into frameworks and libraries such as React.


Installation

In the build folder there are multiple .html files that can be used as reference to copy and paste the HTML and JavaScript code, I have used the start.html file as reference for this documentation, video tutorial

Copy the content folder, environmentMaps folder, media folder, models folder and src folder in the same folder where you have the HTML file where you want to use the viewer, this folders can be added anywhere on the server but is best to keep them relative to your main HTML file.

Include the viewer CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" type="text/css"  href="./content/global.css"/>
<script type='text/javascript' src="./src/FWDEVTB.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the viewer JavaScript and CSS files.

<script>
	if(document.readyState == 'complete'){
		initEVTB();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			initEVTB();
		});
	}

	window['initEVTB'] = function(){
		
		new FWDEVTB({

            // General settings.  
            instance: 'fwdevtb0',
            texturesFolder: 'content/markers/',
            data: 'apartment_b001',
            displayType: 'responsive',
            parentId: 'myDiv',
            posterSource: '',
            startAtScene: 'Access Entry',
            maxWidth: 1280,
            startResizingWidth: 1000,
            maxHeight: 850,
            autoScale: 'yes',
            initializeWhenVisible: 'yes',
            lightboxCloseButtonWidth: 30,
            lightboxCloseButtonHeight: 30,
            lightboxCloseButtonBackgroundNormalColor: "#21A80B",
            lightboxCloseButtonBackgroundSelectedColor: "#FFFFFF",
            lightboxCloseButtonIconNormalColor: "#FFFFFF",
            lightboxCloseButtonIconSelectedColor: "#21A80B",
            lightboxBackgroundColor: 'rgba(0, 0, 0, .7)',
            backgroundColor: '#FFFFFF',
            fullscreenBackgroundColor: '#FFFFFF',

            // Preloader.
            preloaderText: 'Loading Appartment B001: ',
            preloaderPosition: 'center',
            preloaderOffsetX: 0,
            preloaderOffsetY: 0,
            showPreloaderProgressBar: 'yes',
            preloaderWidth: '40%',
            preloaderProgressBarBackgroundColor: '#8b859b',
            preloaderProgressBarFillColor: '#f74300',
            preloaderFontColor: '#000000',
            preloaderBackgroundColor: 'rgba(255, 255, 255, 1)',

         
            // Controller.
            buttons: 'tableOfContent, play, zoomout, zoomin, info, help,share, fullscreen',
            buttonsToolTips: 'Table of content/Table of content off, Play/Pause, Zoom out, Zoom in, Info, Help, share, Full screen/Normal screen',
            showButtonsLabels: 'yes',
            showBlockTouchButton: 'yes',
            blockTouchButtonSize: 40,
            hideControllerDelay: 4,
            buttonSize: 30,
            startAndEndButtonsHorizontalGap: 16,
            startAndEndButtonsVerticalGap: 7,
            spaceBetweenButtons: 8,
            controllerOffsetY: 24,
            buttonsToolTipOffsetY: 6,
            buttonsIconNormalColor: '#888888',
            buttonsIconSelectedColor: '#FFFFFF',
            buttonToolTipBackgroundColor: "#FFFFFF",
            buttonToolTipTextColor: "#000000",
            controllerBackgrondColor: 'rgba(33,32,32, 0.9)',

            // Share.
            shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
            shareBackgroundColor:"#212020",
            shareText:"Share via",
            shareTextColor: '#FFFFFF',
            shareLineSeparatorColor: '#3A3A3A',

            // Orbital controls.
            enableOrbitalControls: 'yes',
            zoomFactor: 1.3,
            zoomSpeed: .15,
            dampingFactor: 0.2,
            orbitRotateSpeed: 0.25,
            autoRotate: 'no',
            autoRotateSpeed: 0.6,
            enableMouseWheelZoom: 'yes',
            enableKeboardRoation: 'yes',
            zoomMinDistance: 0,
            zoomMaxDistance: 4.14,
            horizontalRotationMaxAngle: 180,
            horizontalRotationMinAngle: -180,
            verticalRotationMinAngle: 0,
            verticalRotationMaxAngle: 180,
            
            // Table of content.
            tableOfContentText: 'Apartment B001',
            tableOfContentPosition: 'left',
            tableOfContentTextColor: '#FFFFFF',
            tableOfContentWidth: 300,
            tableOfContentTextNormalColor: '#D9D9D9',
            tableOfContentTextSelectedColor: '#7FDC23',
            tableOfContentBackgroundColor: 'rgba(33,32,32, 0.9)',

            // Markers & camera positions.
            showMarkerTool: 'yes',
            showMarkerEveryTimeWhenOnScreen: 'yes',
            markerShowAndHideAnimationType: 'scale',
            markerToolTipOffsetY: 10,
            markerToolTipAndWindowBackgroundColor: '#FFFFFF',
            markerPositionCopiedText: 'Marker position copied to colipboard!',
            cameraPositionCopiedText: 'Camera position copied to colipboard!',
            showCameraPositionsSelectMenu: 'yes',
            cameraPostionsSelectMenuDefaultText: 'Access Entry',
            cameraPostitionSelectMenuMaxWidth: 240,
            cameraPostitionSelectMenuHeight: 44,
            cameraPostitionSelectMenuStartAndEndGap: 8,
            cameraPostitionSelectMenuButtonSize: 30,
            cameraPostionsSelectMenuBackgroundColor: 'rgba(33,32,32, 0.9)',
            cameraPostionsSelectMenuTextColor: '#FFFFFF',
            cameraPositionsNextButtonTooltip: 'Next room',
            cameraPositionsPrevButtonTooltip: 'Previous room',
            cameraPostionsSelectMenuButtonNormalColor: '#888888',
            cameraPostionsSelectMenuButtonSelectedColor: '#FFFFFF',
            cameraPositionsSelectItemsMaxWidth: 350,
            cameraPositionsSelectItemHeight: 24,
            cameraPositionsSelectItemStartLeftGap: 6,
            cameraPositionsSelectItemStartRightGap: 30,
            cameraPositionsSelectItemVerticalGap: 16,
            cameraPositionsSelectSpaceBetweenItems: 8,
            cameraPositionsSelectMaxItems: 5,
            cameraPositionsSelectItemBackgroundColor: 'rgba(33,32,32, 0.9)',
            cameraPositionsSelectItemsScrollBarTrackColor: '#D9D9D9',
            cameraPositionsSelectItemsScrollBarHandlerNormalColor: '#767676',
            cameraPositionsSelectItemsScrollBarHandlerSelectedColor: '#FFFFFF',
            cameraPositionsSelectItemNormalColor: '#D9D9D9',
            cameraPositionsSelectItemSelectedColor: '#7FDC23',

            // Info window.
            infoWindowData: 'info_window_data',
            infoWindowWidth: 1080,
            infoWindowMainBackgroundColor: 'rgba(255, 255, 255, .7)',
            closeButtonSize: 27,
            closeButtonHeight: 27,
            closeButtonBackgroundNormalColor: "#f74300",
            closeButtonBackgroundSelectedColor: "#21a80b",
            closeButtonIconNormalColor: "#FFFFFF",
            closeButtonIconSelectedColor: "#FFFFFF",
            infoWindowBackgroundColor:"#FFFFFF",
            infoWindowScrollBarColor:"#8b859b",

            // Navigator window.
            floorMapWindowImagePath: './media/images/map.jpg',
            floorMapWindowBackgroundColor: 'rgba(33,32,32, 0.9)',
            floorMapWindowWidth: 300,
            floorMapWindowBorderSize: 2,
            floorMapWindowGap: 20,
            floorMapWindowBorderColor: 'rgba(33,32,32, 0.9)',
            floorMapMarkerPositionCopiedText: 'Navigation marker position copied to clipboard!',
            floorMapOrientationIconColor: '#f74300',
            floorMapMarkerRadius: 8,
            floorMapMarkerShowIconAnimation: "yes",
            floorMapMarkerIconAnimationColor: "#f74300",
            floorMapMarkerBorderColor: "#FFFFFF",
            floorMapMarkerBorderSelectedColor: "#f74300",
            floorMapMarkerBackgroundColor: "#f74300",
            floorMapMarkerBackgroundSelectedColor: "#FFFFFF",
            floorMapMarkerIconColor: "#FFFFFF",
            floorMapMarkerIconSelectedColor: "#f74300",
            activeNavigatorMarkerIconAnimationColor: "#21a80b",
            activeNavigatorMarkerBorderColor: "#FFFFFF",
            activeNavigatorMarkerBorderSelectedColor: "#21a80b",
            activeNavigatorMarkerBackgroundColor: "#21a80b",
            activeNavigatorMarkerBackgroundSelectedColor: "#FFFFFF",
            activeNavigatorMarkerIconColor: "#FFFFFF",
            activeNavigatorMarkerIconSelectedColor: "#21a80b",
            floorMapMarkerScale: "1.3",
            showNavigatorExpandButton: 'yes',
            floorMapExpandButtonPosition: 'topLeft',
            floorMapExpandButtonToolTip: 'Expand floor plan navigator/Collapse floor plan navigator',

            // Help screen.
            helpScreenText: 'Help',
            mouseRotateAndZoomText: 'Rotate And Zoom',
            mouseRotateAndZoomInfo: 'Use the left mouse click to rotate and mousewheel to zoom.',
            mousePanText: 'Pan With Mouse',
            mousePanInfo: 'Use the right click mouse button to pan.',
            keyboardPanText: 'Rotate With Keyboard',
            keyboardPanInfo: 'Use the the left, right, up, down keyboard keys to rotate.',
            touchRotateText: 'Rotate',
            touchRotateInfo: 'Use one finger to rotate.',
            touchPanText: 'Pan',
            touchPanInfo: 'Use two fingers to pan.',
            helpScreenIconColor: '#21A80B',

            // GUI settings.
            showGUI: 'yes',
            closeGUIWhenNotHit: 'no',
            modelScaleOffsetMin: 0,
            modelScaleOffsetMax: 1,
        });

	}
</script>

The last step adding the viewer is to create a div with an unique ID that will act as the parent/holder for the viewer and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.

<!-- Viewer holder. --> 
<div id="myDiv"></div>

To add multiple viewers just redo the steps explained above and make sure to change the instance to fwdevtb1, fwdevtb2, fwdevtb3, etc... depending on how many viewers are added, also change the parentId to a different ID.

Please read the settings section to understand the viewer configuration options.


Add your own tour

To add your own virtual tour, create a hidden div with a unique id and assign that id to the data option. This container holds all the scenes in your tour, and each child div inside it represents one panorama.

Each scene can define its own name, desktop image, optional mobile image, starting camera position, and optional navigator position. You can start with only the scene structure shown below, then add markers later if needed.

<script>
<!-- ... -->
data: 'apartment_b001',
<!-- ... -->
</script>

<div id="apartment_b001" style="display: none;">

	<div data-name="Access Entry"
		 data-image-path="media/images/access-entry.jpg"
		 data-image-mobile-path="media/images/access-entry-mobile.jpg"
		 data-camera-position="x:0.8738958445043025, y:0.20406089285214418, z:-0.4373896032382343, tx:0, ty:0, tz:0"
		 data-navigator-window-position="x:115, y:169">
	</div>

	<div data-name="Laundry room"
		 data-image-path="media/images/laundry.jpg"
		 data-image-mobile-path="media/images/laundry.jpg"
		 data-camera-position="x:0.15948717162880224, y:0.13407380794015267, z:-0.9536894757861253, tx:0, ty:0, tz:0"
		 data-navigator-window-position="x:23, y:147">
	</div>

</div>

The data-image-path attribute sets the panorama image for that scene, data-image-mobile-path can be used for a mobile-specific version, data-camera-position sets the starting view, and data-navigator-window-position is used if you want to show that scene in the floor plan navigator, video tutorial.

Below is a detailed description of the scene data structure:

  • data - the viewer option that points to the hidden div containing your full tour structure. The value must match the id of the wrapper that stores all scenes, for example data: 'apartment_b001'.
  • data-name - the scene name. This is the label used internally to identify the panorama and it can also appear in interface elements such as the table of contents, scene navigation, or camera position selectors depending on how the tour is configured. Each scene name should be unique.
  • data-image-path - the main panorama image path for that scene. This can be a relative or absolute path and it represents the default image loaded for desktop or for any case where a separate mobile panorama is not provided.
  • data-image-mobile-path - the optional mobile panorama image path. This is useful for optimization on phones and tablets because you can provide a lighter, smaller, better-compressed version of the same panorama instead of loading the full desktop image on mobile devices. Using a dedicated mobile image helps reduce bandwidth usage, improves loading speed, lowers memory usage, and makes navigation feel smoother on lower-powered devices. If you do not need a separate mobile image, you can use the same path as the desktop version.
  • data-camera-position - the starting camera view for that specific scene. This controls the initial direction the visitor sees when the panorama opens, allowing you to present the most important angle first and keep transitions between rooms feeling natural and intentional. To get this value, enable the built-in marker tool by setting showMarkerTool: 'yes', then open the tour and move the camera to the exact view you want to use as the starting position. Right click inside the scene and the viewer will copy the generated camera position to the clipboard. Paste that full value into the data-camera-position attribute for the scene.
  • data-navigator-window-position - the scene position inside the floor plan navigator, formatted as x and y coordinates. Use this if the floor map window is enabled and you want each panorama to be represented in the correct place on the map so visitors can understand where they are inside the tour. To get this value, enable the built-in marker tool by setting showMarkerTool: 'yes', then open the tour and make sure the floor map navigator is visible. Left click on the exact point inside the floor map image where that scene should appear and the viewer will copy the generated x and y coordinates to the clipboard. Paste that full value into the data-navigator-window-position attribute for the scene.

Setup Info Window

The main info window is a separate panel that can be opened from the controller info button. It is useful for showing general tour content such as project details, descriptions, images, videos, maps, contact details, or any other custom HTML content that should be available independently from the scene markers.

To use it, create a hidden div with a unique id and assign that id to the infoWindowData option. Inside that wrapper you can add any HTML structure you need, including columns, images, text blocks, embedded video, links, and custom styled sections.

<script>
<!-- ... -->
infoWindowData: 'info_window_data',
<!-- ... -->
</script>

<div id="info_window_data" style="display: none;">
	<div class="one">
		<img src="media/images/map-small2.jpg">

		<h1>Image On The Left Side</h1>

		<p>Add here your HTML content that appears in the main info window.</p>
	</div>

	<div class="spacer"></div>

	<div class="two">
		<img src="media/images/map-small3.jpg">

		<h1>Image On The Right Side</h1>

		<p>You can add multiple sections, images, text blocks, links, and custom layouts.</p>
	</div>

	<div class="spacer"></div>

	<div class="three">
		<h1>Video & Youtube Ready</h1>

		<div class="youtube">
			<iframe data-fwdevtb-src="https://www.youtube.com/embed/pGdzdBB4SYk?fs=0" frameborder="0" width="100%" loading="lazy" allowfullscreen></iframe>
		</div>

		<p>The info window supports rich responsive HTML content.</p>
	</div>
</div>

The content is parsed directly from the hidden wrapper, so you can fully control the layout and styling with HTML and CSS. This makes the main info window ideal for tour introductions, property details, product presentations, specifications, branded content, and any longer descriptive material you want users to open on demand.


Working with markers

To add markers, place them inside the scene div where you want them to appear. Each marker is added directly inside a panorama item from your main data structure, and you can add as many markers as needed for navigation, links, info panels, videos, images, and other interactive content.

<script>
<!-- ... -->
data: 'apartment_b001',
<!-- ... -->
</script>

	<div id="apartment_b001" style="display: none;">

		<div data-name="Access Entry"
			data-image-path="media/images/access-entry.jpg"
			data-image-mobile-path="media/images/access-entry-mobile.jpg"
			data-camera-position="x:0.8738958445043025, y:0.20406089285214418, z:-0.4373896032382343, tx:0, ty:0, tz:0"
			data-navigator-window-position="x:115, y:169">

			<div
				data-marker=""
				data-go-to-scene-name="Kitchen"
				data-class = ""
				data-position = "x:-3.750029714583942, y:-1.348394644397774, z:3.2368691192474963, nx:-3.7873481162481193, ny:-1.3623265676797576, nz:3.267088953973981"
				data-icon-type = "up"
				data-show-icon-animation = "yes"
				data-icon-animation-color = "#21a80b"
				data-border-color = "#FFFFFF"
				data-border-selected-color = "#21a80b"
				data-background-color = "#21a80b"
				data-background-selected-color = "#FFFFFF"
				data-icon-color = "#FFFFFF"
				data-icon-selected-color = "#21a80b"
				data-scale = "1.4"
				data-tooltip-offset-x = "0"
				data-link = ""
				data-target = ""> 

				<div data-tooltip=""  data-max-width="300">
					<img src="media/images/thumbnails/kitchen.jpg" alt="Kitchen">
					<p>Go to kitchen.</p>
				</div>

			</div>
	</div>

</div>

Below is a detailed description of all parameters:

  • data-marker - marks that div as a tour marker. This attribute is required so the viewer knows that the element should be parsed and displayed as an interactive hotspot inside the current scene.
  • data-go-to-scene-name - the target scene name that should open when the marker is clicked. The value must match the data-name of another scene exactly. If you leave this blank, the marker will not trigger scene navigation.
  • data-class - an optional custom CSS class name added to the marker. Use it when you want to style a specific marker differently from the others with your own CSS rules.
  • data-position - the marker position inside the panorama. To get this value, first enable the built-in marker tool by setting showMarkerTool: 'yes' in the viewer settings. After that, open the tour and left click on the exact point in the scene where you want to place the marker. The viewer will copy the generated position to the clipboard, including the x, y, z coordinates and the normal values nx, ny, and nz. Paste that full value into the data-position attribute to place the marker in that location.
  • data-icon-type - the marker icon type. In the current virtual tour setup it can be directional icons such as up, down, left, right, or content/action icons such as plus, plusPointer, link, linkPointer, infoPointer, and playPointer. Use the directional icons mainly for room-to-room navigation and the others for links, tooltips, videos, images, and info windows.
  • data-show-icon-animation - this can be yes or no. It enables or disables the icon animation effect, which is useful when you want important navigation markers or highlighted points of interest to stand out more clearly.
  • data-icon-animation-color - the color used by the animated icon effect when icon animation is enabled. This can be hex, rgb, or rgba depending on the styling you want.
  • data-border-color - the marker border normal color, hex, rgb, or rgba.
  • data-border-selected-color - the marker border selected or active color, hex, rgb, or rgba.
  • data-background-color - the marker background normal color, hex, rgb, or rgba.
  • data-background-selected-color - the marker background selected or active color, hex, rgb, or rgba.
  • data-icon-color - the marker icon normal color, hex, rgb, or rgba.
  • data-icon-selected-color - the marker icon selected or active color, hex, rgb, or rgba.
  • data-scale - the marker scale factor. A value of 1 is the default size, 1.4 makes the marker 140% larger, 2 makes it 200% larger, and so on. This is useful when you want major navigation markers to be more prominent than secondary detail markers.
  • data-tooltip-offset-x - the tooltip horizontal offset in pixels. Use it when you need to shift the tooltip slightly left or right to improve alignment or avoid covering important parts of the panorama.
  • data-link - the URL to open when the marker is clicked. Use this for external pages, product pages, booking links, or any other destination. If you do not want the marker to open a link, leave it blank.
  • data-target - controls how the link opens. Use _self to open it in the same tab or _blank to open it in a new tab. If the marker is not used as a link, this can remain blank.

Marker tooltip window

Easy Virtual Tour Builder can have a tooltip window associated with it, this tooltip window appears when the marker is hovered/active or when an animation and/or tween camera has finished. It has full support for HTML elements like video/audio and any HTML tag and it can be easily formatted using the global.css file that comes with this viewer, video tutorial.

To add a tootip window for the marker add a div with two attributes one is the data-tooltip = "" attrinute that is used by the viewer as a refference to parse the HTML markup and the other one is the data-max-width = "380" that represents the maximum viewer window width in px. This div must be added inside the marker HTML markup.

<div id="markers_data" style="display: none;">
	
		<div data-class = ""
			data-position = "x:0, y:0,, z:0,, nx:0,, ny:0, nz:0, meshName: none" ...> 

			<div data-tooltip = "" data-max-width = "380">
				<p>Add here your HTML content that appears in the tooltip window!</p>
			</div>		

	</div>

Marker info window

The info window works the same way as the tooltip window with the exception that it can have unlimited HTML content, if the content does not feet the info window a scrollbar will appear to scroll the content, also the info window is opened when clicking on the marker or when an animation and/or tween camera has finished, video tutorial.

To add a info window for the marker add a div with the attribute data-info = "" attrinute that is used by the viewer as a refference to parse the HTML markup. This div must be added inside the marker HTML markup.

<div id="markers_data" style="display: none;">
	
		<div data-class = ""
			data-position = "x:0, y:0,, z:0,, nx:0,, ny:0, nz:0, meshName: none" ...> 

			<div data-info = "">
				<p>Add here your HTML content that appears in the info window!</p>
			</div>		

	</div>

Floor map

The floor map is an optional navigator window that helps visitors understand where they are inside the virtual tour and move through the space more easily. It is especially useful for multi-room tours because it adds a clear visual reference for orientation and makes the navigation feel more intuitive.

To use it, set the floor map image in the viewer settings and define a data-navigator-window-position for each scene. The floor map image acts as the background, while the scene coordinates determine where each room or area is displayed on that map.

<script>
<!-- ... -->
floorMapWindowImagePath: './media/images/map.jpg',
floorMapWindowBackgroundColor: 'rgba(33,32,32, 0.9)',
floorMapWindowWidth: 300,
floorMapWindowBorderSize: 2,
floorMapWindowGap: 20,
floorMapWindowBorderColor: 'rgba(33,32,32, 0.9)',
floorMapMarkerPositionCopiedText: 'Navigation marker position copied to clipboard!',
floorMapOrientationIconColor: '#f74300',
floorMapMarkerRadius: 8,
floorMapMarkerShowIconAnimation: 'yes',
floorMapMarkerIconAnimationColor: '#f74300',
floorMapMarkerBorderColor: '#FFFFFF',
floorMapMarkerBorderSelectedColor: '#f74300',
floorMapMarkerBackgroundColor: '#f74300',
floorMapMarkerBackgroundSelectedColor: '#FFFFFF',
floorMapMarkerIconColor: '#FFFFFF',
floorMapMarkerIconSelectedColor: '#f74300',
activeNavigatorMarkerIconAnimationColor: '#21a80b',
activeNavigatorMarkerBorderColor: '#FFFFFF',
activeNavigatorMarkerBorderSelectedColor: '#21a80b',
activeNavigatorMarkerBackgroundColor: '#21a80b',
activeNavigatorMarkerBackgroundSelectedColor: '#FFFFFF',
activeNavigatorMarkerIconColor: '#FFFFFF',
activeNavigatorMarkerIconSelectedColor: '#21a80b',
floorMapMarkerScale: '1.3',
showNavigatorExpandButton: 'yes',
floorMapExpandButtonPosition: 'topLeft',
floorMapExpandButtonToolTip: 'Expand floor plan navigator/Collapse floor plan navigator',
<!-- ... -->
</script>

<div id="apartment_b001" style="display: none;">
	<div data-name="Access Entry"
		 data-image-path="media/images/access-entry.jpg"
		 data-image-mobile-path="media/images/access-entry-mobile.jpg"
		 data-camera-position="x:0.8738958445043025, y:0.20406089285214418, z:-0.4373896032382343, tx:0, ty:0, tz:0"
		 data-navigator-window-position="x:115, y:169">
	</div>

	<div data-name="Laundry room"
		 data-image-path="media/images/laundry.jpg"
		 data-image-mobile-path="media/images/laundry.jpg"
		 data-camera-position="x:0.15948717162880224, y:0.13407380794015267, z:-0.9536894757861253, tx:0, ty:0, tz:0"
		 data-navigator-window-position="x:23, y:147">
	</div>
</div>

The floorMapWindowImagePath option sets the floor plan image, while each data-navigator-window-position value places a scene marker on that map using x and y coordinates. To get that value, enable the built-in marker tool with showMarkerTool: 'yes', open the tour, make sure the floor map navigator is visible, and left click on the exact point inside the floor plan where you want that scene marker to appear. The viewer will copy the generated x and y coordinates to the clipboard, and you can paste that full value into the data-navigator-window-position attribute. When visitors switch scenes, the active floor map marker updates automatically so they can always see their current location.

You can also fully style the navigator markers, active state, border colors, icon colors, scale, background, and expand button behavior to match the design of your tour.


To open Easy Virtual Tour Builder in a lightbox is done by setting the displayType:"lightbox", in the build folder there is a HTML file lightbox.html you can use this file as reference, video tutorial.

<script>
<!-- ... -->
displayType: 'lightbox',
<!-- ... -->
</script>

Settings

Easy Virtual Tour Builder has many options that allows to customize its features. They are added directly in the viewer constructor as it can be seen in the installation section.

Example

<script type="text/javascript">
	if(document.readyState == 'complete'){
		initEVTB();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			initEVTB();
		});
	}

	window['initEVTB'] = function(){
		
		 new FWDEVTB({

			// General settings.  
			instance: 'fwdevtb0',
			texturesFolder: 'content/markers/',
			data: 'apartment_b001',
			displayType: 'responsive',
			parentId: 'myDiv',
			posterSource: '',
			startAtScene: 'Access Entry',
		etc...
		
		})
	}
</script>

The list below documents the current virtual tour settings used by Easy Virtual Tour Builder. Legacy 3D model viewer options have been removed from this section.

instance

Type: (String)

The global viewer instance name used to access the API. If you add multiple tours on the same page, each one must use a unique instance value such as fwdevtb0, fwdevtb1, and so on.

texturesFolder

Type: (String)

The path to the folder that stores the marker and interface graphic assets used by the tour.

data

Type: (String)

The id of the hidden wrapper that contains your full tour data structure. This must match the wrapper explained in the Add your own tour section, for example data: 'apartment_b001'.

displayType

Type: (String)

Controls how the tour is displayed. Use responsive to size it with maxWidth and maxHeight, afterparent to follow the parent container size, or lightbox to open it in a popup.

parentId

Type: (String)

The id of the div that will hold the tour on the page.

posterSource

Type: (String)

An optional poster image shown before the tour is fully initialized. Leave it blank if you do not need a poster.

startAtScene

Type: (String)

The scene name that should open first. The value must match one of your scene data-name attributes exactly.

maxWidth

Type: (Number)

The maximum tour width in pixels when using the responsive display mode.

startResizingWidth

Type: (Number)

The width threshold where the responsive height adjustments begin. This works together with autoScale.

maxHeight

Type: (Number)

The maximum tour height in pixels.

autoScale

Type: (String)

This can be yes or no. When it is set to yes, the tour height scales automatically with the width in responsive mode.

initializeWhenVisible

Type: (String)

This can be yes or no. Use it when you want the tour to initialize only after it becomes visible in the page viewport.

lightboxCloseButtonWidth

Type: (Number)

The lightbox close button width in pixels.

lightboxCloseButtonHeight

Type: (Number)

The lightbox close button height in pixels.

lightboxCloseButtonBackgroundNormalColor

Type: (String)

The lightbox close button background color in its normal state.

lightboxCloseButtonBackgroundSelectedColor

Type: (String)

The lightbox close button background color in its selected or hovered state.

lightboxCloseButtonIconNormalColor

Type: (String)

The lightbox close button icon color in its normal state.

lightboxCloseButtonIconSelectedColor

Type: (String)

The lightbox close button icon color in its selected or hovered state.

lightboxBackgroundColor

Type: (String)

The background color behind the tour when the lightbox display type is used.

backgroundColor

Type: (String)

The main viewer background color.

fullscreenBackgroundColor

Type: (String)

The viewer background color when the tour is shown in fullscreen mode.

preloaderText

Type: (String)

The loading text shown while the tour assets are being prepared.

preloaderPosition

Type: (String)

Sets the preloader position. Common values are center, centertop, centerbottom, topleft, topright, bottomleft, and bottomright.

preloaderOffsetX

Type: (Number)

Moves the preloader horizontally from its base position.

preloaderOffsetY

Type: (Number)

Moves the preloader vertically from its base position.

showPreloaderProgressBar

Type: (String)

This can be yes or no. It shows or hides the loading progress bar.

preloaderWidth

Type: (String)

The width of the preloader, usually set as a percentage string such as 40% or 70%.

preloaderProgressBarBackgroundColor

Type: (String)

The background color of the preloader progress bar track.

preloaderProgressBarFillColor

Type: (String)

The fill color of the preloader progress bar.

preloaderFontColor

Type: (String)

The text color used by the preloader label.

preloaderBackgroundColor

Type: (String)

The background color behind the preloader text and progress area.

buttons

Type: (String)

The list of controller buttons separated by commas. The order in this string is the order shown in the interface. The current setup supports buttons such as tableOfContent, play, zoomout, zoomin, info, help, share, and fullscreen.

buttonsToolTips

Type: (String)

The tooltips for the controller buttons, separated by commas and in the same order as the buttons setting. Use / to define dual-state labels such as Full screen/Normal screen.

showButtonsLabels

Type: (String)

This can be yes or no. It shows or hides the controller tooltip labels.

showBlockTouchButton

Type: (String)

This can be yes or no. It shows the touch blocking button on supported mobile layouts.

blockTouchButtonSize

Type: (Number)

The width and height of the touch blocking button in pixels.

hideControllerDelay

Type: (Number)

The delay in seconds before the controller hides after inactivity.

buttonSize

Type: (Number)

The controller button width and height in pixels.

startAndEndButtonsHorizontalGap

Type: (Number)

The horizontal spacing at the beginning and end of the controller button row.

startAndEndButtonsVerticalGap

Type: (Number)

The vertical spacing for the controller button row.

spaceBetweenButtons

Type: (Number)

The gap between controller buttons.

controllerOffsetY

Type: (Number)

The distance from the controller to the bottom of the tour.

buttonsToolTipOffsetY

Type: (Number)

The vertical gap between the controller buttons and their tooltips.

buttonsIconNormalColor

Type: (String)

The controller icon color in its normal state.

buttonsIconSelectedColor

Type: (String)

The controller icon color in its hovered or selected state.

buttonToolTipBackgroundColor

Type: (String)

The background color used by the controller button tooltips.

buttonToolTipTextColor

Type: (String)

The text color used by the controller button tooltips.

controllerBackgrondColor

Type: (String)

The background color of the controller bar.

shareButtons

Type: (Array)

The array of social networks shown inside the share panel. If this array is empty, the share button is hidden. The currently supported platforms are facebook, twitter, linkedin, tumblr, pinterest, reddit, buffer, digg, and blogger. Example: shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg', 'blogger'].

shareBackgroundColor

Type: (String)

The background color of the share panel.

shareText

Type: (String)

The title text shown at the top of the share panel.

shareTextColor

Type: (String)

The color of the share panel title text.

shareLineSeparatorColor

Type: (String)

The separator line color used inside the share panel.

enableOrbitalControls

Type: (String)

This can be yes or no. It enables the main drag rotation controls for the panorama.

zoomFactor

Type: (Number)

Controls how much zoom is applied with each zoom action.

zoomSpeed

Type: (Number)

Controls the speed of the zoom animation.

dampingFactor

Type: (Number)

Controls the smoothing and inertia of the orbit movement.

orbitRotateSpeed

Type: (Number)

Controls how fast the panorama rotates while the user drags.

autoRotate

Type: (String)

This can be yes or no. It enables or disables automatic rotation.

autoRotateSpeed

Type: (Number)

Controls the speed of the automatic rotation.

enableMouseWheelZoom

Type: (String)

This can be yes or no. It enables or disables mouse wheel zoom on desktop.

enableKeboardRoation

Type: (String)

This can be yes or no. It enables or disables keyboard rotation controls.

zoomMinDistance

Type: (Number)

The minimum zoom distance allowed for the camera.

zoomMaxDistance

Type: (Number)

The maximum zoom distance allowed for the camera.

horizontalRotationMaxAngle

Type: (Number)

The maximum horizontal rotation angle in degrees.

horizontalRotationMinAngle

Type: (Number)

The minimum horizontal rotation angle in degrees.

verticalRotationMinAngle

Type: (Number)

The minimum vertical rotation angle in degrees.

verticalRotationMaxAngle

Type: (Number)

The maximum vertical rotation angle in degrees.

tableOfContentText

Type: (String)

The main title text shown at the top of the table of contents panel.

tableOfContentPosition

Type: (String)

The side where the table of contents opens, usually left or right.

tableOfContentTextColor

Type: (String)

The color used by the main table of contents title text.

tableOfContentWidth

Type: (Number)

The width of the table of contents panel in pixels.

tableOfContentTextNormalColor

Type: (String)

The color of the scene names in their normal state inside the table of contents.

tableOfContentTextSelectedColor

Type: (String)

The color of the active or selected scene name in the table of contents.

tableOfContentBackgroundColor

Type: (String)

The background color of the table of contents panel.

showMarkerTool

Type: (String)

This can be yes or no. It enables the built-in helper used to copy marker positions with left click, camera positions with right click, and floor map navigator positions by left clicking inside the floor map.

showMarkerEveryTimeWhenOnScreen

Type: (String)

This can be yes or no. It controls whether markers animate back into view whenever they re-enter the visible part of the panorama.

markerShowAndHideAnimationType

Type: (String)

The animation type used when markers appear or disappear. Common values are scale and opacity.

markerToolTipOffsetY

Type: (Number)

The vertical offset used for marker tooltips.

markerToolTipAndWindowBackgroundColor

Type: (String)

The shared background color used by marker tooltips and marker info windows.

markerPositionCopiedText

Type: (String)

The confirmation message shown after a marker position is copied from the scene.

cameraPositionCopiedText

Type: (String)

The confirmation message shown after a camera position is copied from the scene.

showCameraPositionsSelectMenu

Type: (String)

This can be yes or no. It shows or hides the scene selection menu used to jump between viewpoints or rooms.

cameraPostionsSelectMenuDefaultText

Type: (String)

The default label shown by the camera positions selector before the dropdown is opened.

cameraPostitionSelectMenuMaxWidth

Type: (Number)

The maximum width of the camera positions selector.

cameraPostitionSelectMenuHeight

Type: (Number)

The height of the camera positions selector.

cameraPostitionSelectMenuStartAndEndGap

Type: (Number)

The left and right padding used inside the camera positions selector.

cameraPostitionSelectMenuButtonSize

Type: (Number)

The size of the previous and next buttons used by the camera positions selector.

cameraPostionsSelectMenuBackgroundColor

Type: (String)

The background color of the camera positions selector.

cameraPostionsSelectMenuTextColor

Type: (String)

The text color used by the camera positions selector.

cameraPositionsNextButtonTooltip

Type: (String)

The tooltip text for the next scene button in the camera positions selector.

cameraPositionsPrevButtonTooltip

Type: (String)

The tooltip text for the previous scene button in the camera positions selector.

cameraPostionsSelectMenuButtonNormalColor

Type: (String)

The normal icon color of the camera positions selector buttons.

cameraPostionsSelectMenuButtonSelectedColor

Type: (String)

The selected or hovered icon color of the camera positions selector buttons.

cameraPositionsSelectItemsMaxWidth

Type: (Number)

The maximum width of the scene list shown by the camera positions selector.

cameraPositionsSelectItemHeight

Type: (Number)

The height of each item in the camera positions selector list.

cameraPositionsSelectItemStartLeftGap

Type: (Number)

The left padding used by each item in the camera positions selector list.

cameraPositionsSelectItemStartRightGap

Type: (Number)

The right padding used by each item in the camera positions selector list.

cameraPositionsSelectItemVerticalGap

Type: (Number)

The vertical spacing inside each camera positions selector item.

cameraPositionsSelectSpaceBetweenItems

Type: (Number)

The space between the items in the camera positions selector list.

cameraPositionsSelectMaxItems

Type: (Number)

The maximum number of visible items shown before the selector list becomes scrollable.

cameraPositionsSelectItemBackgroundColor

Type: (String)

The background color of each scene item in the camera positions selector list.

cameraPositionsSelectItemsScrollBarTrackColor

Type: (String)

The track color of the scrollbar used by the camera positions selector list.

cameraPositionsSelectItemsScrollBarHandlerNormalColor

Type: (String)

The normal color of the scrollbar handle used by the camera positions selector list.

cameraPositionsSelectItemsScrollBarHandlerSelectedColor

Type: (String)

The selected color of the scrollbar handle used by the camera positions selector list.

cameraPositionsSelectItemNormalColor

Type: (String)

The normal text color of the scene items in the camera positions selector list.

cameraPositionsSelectItemSelectedColor

Type: (String)

The selected text color of the active scene item in the camera positions selector list.

infoWindowData

Type: (String)

The id of the hidden wrapper that contains the main info window HTML content.

infoWindowWidth

Type: (Number)

The maximum width of the main info window in pixels.

infoWindowMainBackgroundColor

Type: (String)

The overlay background color shown behind the info window.

closeButtonSize

Type: (Number)

The width of the info window close button.

closeButtonHeight

Type: (Number)

The height of the info window close button.

closeButtonBackgroundNormalColor

Type: (String)

The normal background color of the info window close button.

closeButtonBackgroundSelectedColor

Type: (String)

The selected or hovered background color of the info window close button.

closeButtonIconNormalColor

Type: (String)

The normal icon color of the info window close button.

closeButtonIconSelectedColor

Type: (String)

The selected or hovered icon color of the info window close button.

infoWindowBackgroundColor

Type: (String)

The background color of the info window content panel.

infoWindowScrollBarColor

Type: (String)

The scrollbar color used inside the info window when the content is scrollable.

floorMapWindowImagePath

Type: (String)

The path to the floor plan image used by the navigator window. If this is empty, the navigator window is not shown.

floorMapWindowBackgroundColor

Type: (String)

The background color behind the floor map image.

floorMapWindowWidth

Type: (Number)

The width of the floor map navigator window in pixels.

floorMapWindowBorderSize

Type: (Number)

The border size of the floor map navigator window in pixels.

floorMapWindowGap

Type: (Number)

The spacing between the floor map navigator and the edge of the tour.

floorMapWindowBorderColor

Type: (String)

The border color of the floor map navigator window.

floorMapMarkerPositionCopiedText

Type: (String)

The confirmation message shown after a floor map marker position is copied from the navigator window.

floorMapOrientationIconColor

Type: (String)

The color of the orientation indicator shown on the floor map for the current scene.

floorMapMarkerRadius

Type: (Number)

The radius of the navigator markers placed on the floor map.

floorMapMarkerShowIconAnimation

Type: (String)

This can be yes or no. It enables or disables the icon animation used by floor map markers.

floorMapMarkerIconAnimationColor

Type: (String)

The animation color used by the floor map markers.

floorMapMarkerBorderColor

Type: (String)

The normal border color of the floor map markers.

floorMapMarkerBorderSelectedColor

Type: (String)

The selected border color of the floor map markers.

floorMapMarkerBackgroundColor

Type: (String)

The normal background color of the floor map markers.

floorMapMarkerBackgroundSelectedColor

Type: (String)

The selected background color of the floor map markers.

floorMapMarkerIconColor

Type: (String)

The normal icon color of the floor map markers.

floorMapMarkerIconSelectedColor

Type: (String)

The selected icon color of the floor map markers.

activeNavigatorMarkerIconAnimationColor

Type: (String)

The animation color used by the currently active floor map marker.

activeNavigatorMarkerBorderColor

Type: (String)

The normal border color used by the currently active floor map marker.

activeNavigatorMarkerBorderSelectedColor

Type: (String)

The selected border color used by the currently active floor map marker.

activeNavigatorMarkerBackgroundColor

Type: (String)

The normal background color used by the currently active floor map marker.

activeNavigatorMarkerBackgroundSelectedColor

Type: (String)

The selected background color used by the currently active floor map marker.

activeNavigatorMarkerIconColor

Type: (String)

The normal icon color used by the currently active floor map marker.

activeNavigatorMarkerIconSelectedColor

Type: (String)

The selected icon color used by the currently active floor map marker.

floorMapMarkerScale

Type: (String)

The scale multiplier used by the floor map markers.

showNavigatorExpandButton

Type: (String)

This can be yes or no. It shows or hides the expand button for the floor map navigator.

floorMapExpandButtonPosition

Type: (String)

The position of the floor map expand button, for example topLeft.

floorMapExpandButtonToolTip

Type: (String)

The tooltip text shown by the floor map expand button. You can define both states separated by /.

helpScreenText

Type: (String)

The main title shown at the top of the help screen.

mouseRotateAndZoomText

Type: (String)

The heading text used for the mouse rotate and zoom help block.

mouseRotateAndZoomInfo

Type: (String)

The descriptive text used for the mouse rotate and zoom help block.

mousePanText

Type: (String)

The heading text used for the mouse pan help block.

mousePanInfo

Type: (String)

The descriptive text used for the mouse pan help block.

keyboardPanText

Type: (String)

The heading text used for the keyboard rotation help block.

keyboardPanInfo

Type: (String)

The descriptive text used for the keyboard rotation help block.

touchRotateText

Type: (String)

The heading text used for the touch rotate help block.

touchRotateInfo

Type: (String)

The descriptive text used for the touch rotate help block.

touchPanText

Type: (String)

The heading text used for the touch pan help block.

touchPanInfo

Type: (String)

The descriptive text used for the touch pan help block.

helpScreenIconColor

Type: (String)

The accent color used by the help screen icons.

showGUI

Type: (String)

This can be yes or no. It enables the optional live GUI controls. This feature is typically disabled on mobile devices.

closeGUIWhenNotHit

Type: (String)

This can be yes or no. It closes the live GUI when the user clicks outside it.

modelScaleOffsetMin

Type: (Number)

The minimum value allowed by the live GUI for the scale offset control.

modelScaleOffsetMax

Type: (Number)

The maximum value allowed by the live GUI for the scale offset control.


Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdevtb0.methodName( /* arguments */ ), please note that fwdevtb0 is the viewer instance name, if you are using multiple viewers don't forget to set the instance unique for each instance like this fwdevtb1, fwdevtb2, fwdevtb3, etc... depending on how many viewers are added.

zoom

.zoom(direction:String)

Zoom in or out the current panorama scene.

Parameters

  • direction (String) - this can be in or out.

pan

.pan(direction:String)

Pan the current camera view.

Parameters

  • direction (String) - this can be up, down, left or right.

getCameraPosition

.getCameraPosition():Object

Returns an object with the current camera position and the current controls target position using the keys cameraX, cameraY, cameraZ, controlsX, controlsY and controlsZ.

setCameraPostion

.setCameraPostion(cameraX:Number, cameraY:Number, cameraZ:Number, controlsX:Number, controlsY:Number, controlsZ:Number):void

Set the camera position and controls target programmatically. The method name is spelled setCameraPostion in the current API.

Parameters

  • cameraX, cameraY, cameraZ (Number) - the new camera position.
  • controlsX, controlsY, controlsZ (Number) - the new target position for the controls.

showInfoWindow

.showInfoWindow(htmlContent:String):void

Show the info window with custom HTML content. If no value is passed, the viewer uses the configured info window content.

Parameters

  • htmlContent (String) - this HTML content to show in the info window.

playAutoRotate

.playAutoRotate():void

Start the panorama auto-rotation.

pauseAutoRotate

.pauseAutoRotate():void

Pause the panorama auto-rotation.

goFullScreen

.goFullScreen():void

Set the viewer in fullscreen.

goNormalScreen

.goNormalScreen():void

Set the viewer in normal screen.

goToItem

.goToItem(itemName:String):void

Go to a tour scene using the scene name defined in the data list.

Parameters

  • itemName (String) - the value used in the scene data-name / item name.

destroy

.destroy():void

Destroy the viewer and remove it from the DOM.


Events

Easy Virtual Tour Builder has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

// API.
let fwdevtbAPI = setInterval(() =>{
if(window['fwdevtb0']){
	console.log('EVTB API ready')
	clearInterval(fwdevtbAPI);

	// Register the LOAD_PROGRESS event.
	fwdevtb0.addEventListener(FWDEVTB.LOAD_PROGRESS, onLoadProgress);
}
}, 100);

// Listen for the LOAD_PROGRESS event.
function onLoadProgress(e){
	console.log(e)
}

FWDEVTB.NORMAL_SCREEN

FWDEVTB.NORMAL_SCREEN

Dispatched when the viewer goes to normal screen.

FWDEVTB.FULL_SCREEN

FWDEVTB.FULL_SCREEN

Dispatched when the viewer goes in full screen.

FWDEVTB.LOAD_PROGRESS

FWDEVTB.LOAD_PROGRESS

Dispatched while the tour assets are loading. The event object contains percentLoaded.

FWDEVTB.AUTOROTATE_PLAY

FWDEVTB.AUTOROTATE_PLAY

Dispatched when the controller switches back to the play state for auto-rotation.

FWDEVTB.AUTOROTATE_PAUSE

FWDEVTB.AUTOROTATE_PAUSE

Dispatched when the controller switches to the pause state for auto-rotation.

FWDEVTB.TABLE_OF_CONTENT_ON

FWDEVTB.TABLE_OF_CONTENT_ON

Dispatched when the table of contents panel is opened.

FWDEVTB.SET_MARKER_OR_CAMERA_POSITION

FWDEVTB.SET_MARKER_OR_CAMERA_POSITION

Dispatched when the marker tool copies a value to the clipboard. The payload is available in e.event and includes position, positionType and info. The positionType can be marker, camera or floorMapMarker.

FWDEVTB.ERROR

FWDEVTB.ERROR

Dispatched when a loading or runtime error occurs. The event object contains error.