[Urgent] How to image mapping and how to put demo into virtual list?

735 views

Skip to first unread message

keiwa...@gmail.com

unread,

Jun 12, 2018, 3:28:35 AM6/12/18

to marzipano

Hi there, I used the Marzipano Tool and created a virtual tour list and it looks nice. I have two questions here:

Question 1

How do I create put an image and overlay on it? Example like this:

Question 2

How do I insert the demo (http://www.marzipano.net/demos/embedded-hotspots/index.html) inside my virtual tour list? Example like this:

I have tried to mortify the source code but failed. It seems like different code between the demo sources code and the virtual tour list i downloaded from Marzipano Tool.

Thanks.

keiwa...@gmail.com

unread,

Jun 12, 2018, 4:07:34 AM6/12/18

to marzipano

Souce Code:

<!DOCTYPE html>

<html>

<head>

</head>

<div class="message">Select something to play!</div>

</div>

<li class="text">Aerial View</li>

</a>

<li class="text">Meeting Room</li>

</a>

</ul>

</div>

</div>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</body>

</html>

JS:

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

'use strict';

(function() {

var Marzipano = window.Marzipano;

var bowser = window.bowser;

var screenfull = window.screenfull;

var data = window.APP_DATA;

// Grab elements from DOM.

var panoElement = document.querySelector('#pano');

var sceneNameElement = document.querySelector('#titleBar .sceneName');

var sceneListElement = document.querySelector('#sceneList');

var sceneElements = document.querySelectorAll('#sceneList .scene');

var sceneListToggleElement = document.querySelector('#sceneListToggle');

var autorotateToggleElement = document.querySelector('#autorotateToggle');

var fullscreenToggleElement = document.querySelector('#fullscreenToggle');

// Detect desktop or mobile mode.

if (window.matchMedia) {

var setMode = function() {

if (mql.matches) {

document.body.classList.remove('desktop');

document.body.classList.add('mobile');

} else {

document.body.classList.remove('mobile');

document.body.classList.add('desktop');

}

};

var mql = matchMedia("(max-width: 500px), (max-height: 500px)");

setMode();

mql.addListener(setMode);

} else {

document.body.classList.add('desktop');

}

// Detect whether we are on a touch device.

document.body.classList.add('no-touch');

window.addEventListener('touchstart', function() {

document.body.classList.remove('no-touch');

document.body.classList.add('touch');

});

// Use tooltip fallback mode on IE < 11.

if (bowser.msie && parseFloat(bowser.version) < 11) {

document.body.classList.add('tooltip-fallback');

}

// Viewer options.

var viewerOpts = {

controls: {

mouseViewMode: data.settings.mouseViewMode

}

};

// Initialize viewer.

var viewer = new Marzipano.Viewer(panoElement, viewerOpts);

// Create scenes.

var scenes = data.scenes.map(function(data) {

var urlPrefix = "tiles";

var source = Marzipano.ImageUrlSource.fromString(

urlPrefix + "/" + data.id + "/{z}/{f}/{y}/{x}.jpg",

{ cubeMapPreviewUrl: urlPrefix + "/" + data.id + "/preview.jpg" });

var geometry = new Marzipano.CubeGeometry(data.levels);

var limiter = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100*Math.PI/180, 120*Math.PI/180);

var view = new Marzipano.RectilinearView(data.initialViewParameters, limiter);

var scene = viewer.createScene({

source: source,

geometry: geometry,

view: view,

pinFirstLevel: true

});

// Create link hotspots.

data.linkHotspots.forEach(function(hotspot) {

var element = createLinkHotspotElement(hotspot);

scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });

});

// Create info hotspots.

data.infoHotspots.forEach(function(hotspot) {

var element = createInfoHotspotElement(hotspot);

scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });

});

return {

data: data,

scene: scene,

view: view

};

});

// Set up autorotate, if enabled.

var autorotate = Marzipano.autorotate({

yawSpeed: 0.03,

targetPitch: 0,

targetFov: Math.PI/2

});

if (data.settings.autorotateEnabled) {

autorotateToggleElement.classList.add('enabled');

}

// Set handler for autorotate toggle.

autorotateToggleElement.addEventListener('click', toggleAutorotate);

// Set up fullscreen mode, if supported.

if (screenfull.enabled && data.settings.fullscreenButton) {

document.body.classList.add('fullscreen-enabled');

fullscreenToggleElement.addEventListener('click', toggleFullscreen);

} else {

document.body.classList.add('fullscreen-disabled');

}

// Set handler for scene list toggle.

sceneListToggleElement.addEventListener('click', toggleSceneList);

// Start with the scene list open on desktop.

if (!document.body.classList.contains('mobile')) {

showSceneList();

}

// Set handler for scene switch.

scenes.forEach(function(scene) {

var el = document.querySelector('#sceneList .scene[data-id="' + scene.data.id + '"]');

el.addEventListener('click', function() {

switchScene(scene);

// On mobile, hide scene list after selecting a scene.

if (document.body.classList.contains('mobile')) {

hideSceneList();

}

});

// DOM elements for view controls.

var viewUpElement = document.querySelector('#viewUp');

var viewDownElement = document.querySelector('#viewDown');

var viewLeftElement = document.querySelector('#viewLeft');

var viewRightElement = document.querySelector('#viewRight');

var viewInElement = document.querySelector('#viewIn');

var viewOutElement = document.querySelector('#viewOut');

// Dynamic parameters for controls.

var velocity = 0.7;

var friction = 3;

// Associate view controls with elements.

var controls = viewer.controls();

controls.registerMethod('upElement', new Marzipano.ElementPressControlMethod(viewUpElement, 'y', -velocity, friction), true);

controls.registerMethod('downElement', new Marzipano.ElementPressControlMethod(viewDownElement, 'y', velocity, friction), true);

controls.registerMethod('leftElement', new Marzipano.ElementPressControlMethod(viewLeftElement, 'x', -velocity, friction), true);

controls.registerMethod('rightElement', new Marzipano.ElementPressControlMethod(viewRightElement, 'x', velocity, friction), true);

controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(viewInElement, 'zoom', -velocity, friction), true);

controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(viewOutElement, 'zoom', velocity, friction), true);

function sanitize(s) {

return s.replace('&', '&').replace('<', '<').replace('>', '>');

}

function switchScene(scene) {

stopAutorotate();

scene.view.setParameters(scene.data.initialViewParameters);

scene.scene.switchTo();

startAutorotate();

updateSceneName(scene);

updateSceneList(scene);

}

function updateSceneName(scene) {

sceneNameElement.innerHTML = sanitize(scene.data.name);

}

function updateSceneList(scene) {

for (var i = 0; i < sceneElements.length; i++) {

var el = sceneElements[i];

if (el.getAttribute('data-id') === scene.data.id) {

el.classList.add('current');

} else {

el.classList.remove('current');

}

function showSceneList() {

sceneListElement.classList.add('enabled');

sceneListToggleElement.classList.add('enabled');

}

function hideSceneList() {

sceneListElement.classList.remove('enabled');

sceneListToggleElement.classList.remove('enabled');

}

function toggleSceneList() {

sceneListElement.classList.toggle('enabled');

sceneListToggleElement.classList.toggle('enabled');

}

function startAutorotate() {

if (!autorotateToggleElement.classList.contains('enabled')) {

return;

}

viewer.startMovement(autorotate);

viewer.setIdleMovement(3000, autorotate);

}

function stopAutorotate() {

viewer.stopMovement();

viewer.setIdleMovement(Infinity);

}

function toggleAutorotate() {

if (autorotateToggleElement.classList.contains('enabled')) {

autorotateToggleElement.classList.remove('enabled');

stopAutorotate();

} else {

autorotateToggleElement.classList.add('enabled');

startAutorotate();

}

function toggleFullscreen() {

screenfull.toggle();

if (screenfull.isFullscreen) {

fullscreenToggleElement.classList.add('enabled');

} else {

fullscreenToggleElement.classList.remove('enabled');

}

function createLinkHotspotElement(hotspot) {

// Create wrapper element to hold icon and tooltip.

var wrapper = document.createElement('div');

wrapper.classList.add('hotspot');

wrapper.classList.add('link-hotspot');

// Create image element.

var icon = document.createElement('img');

icon.src = 'img/link.png';

icon.classList.add('link-hotspot-icon');

// Set rotation transform.

var transformProperties = [ '-ms-transform', '-webkit-transform', 'transform' ];

for (var i = 0; i < transformProperties.length; i++) {

var property = transformProperties[i];

icon.style[property] = 'rotate(' + hotspot.rotation + 'rad)';

}

// Add click event handler.

wrapper.addEventListener('click', function() {

switchScene(findSceneById(hotspot.target));

});

// Prevent touch and scroll events from reaching the parent element.

// This prevents the view control logic from interfering with the hotspot.

stopTouchAndScrollEventPropagation(wrapper);

// Create tooltip element.

var tooltip = document.createElement('div');

tooltip.classList.add('hotspot-tooltip');

tooltip.classList.add('link-hotspot-tooltip');

tooltip.innerHTML = findSceneDataById(hotspot.target).name;

wrapper.appendChild(icon);

wrapper.appendChild(tooltip);

return wrapper;

}

function createInfoHotspotElement(hotspot) {

// Create wrapper element to hold icon and tooltip.

var wrapper = document.createElement('div');

wrapper.classList.add('hotspot');

wrapper.classList.add('info-hotspot');

// Create hotspot/tooltip header.

var header = document.createElement('div');

header.classList.add('info-hotspot-header');

// Create image element.

var iconWrapper = document.createElement('div');

iconWrapper.classList.add('info-hotspot-icon-wrapper');

var icon = document.createElement('img');

icon.src = 'img/info.png';

icon.classList.add('info-hotspot-icon');

iconWrapper.appendChild(icon);

// Create title element.

var titleWrapper = document.createElement('div');

titleWrapper.classList.add('info-hotspot-title-wrapper');

var title = document.createElement('div');

title.classList.add('info-hotspot-title');

title.innerHTML = hotspot.title;

titleWrapper.appendChild(title);

// Create close element.

var closeWrapper = document.createElement('div');

closeWrapper.classList.add('info-hotspot-close-wrapper');

var closeIcon = document.createElement('img');

closeIcon.src = 'img/close.png';

closeIcon.classList.add('info-hotspot-close-icon');

closeWrapper.appendChild(closeIcon);

// Construct header element.

header.appendChild(iconWrapper);

header.appendChild(titleWrapper);

header.appendChild(closeWrapper);

// Create text element.

var text = document.createElement('div');

text.classList.add('info-hotspot-text');

text.innerHTML = hotspot.text;

// Place header and text into wrapper element.

wrapper.appendChild(header);

wrapper.appendChild(text);

// Create a modal for the hotspot content to appear on mobile mode.

var modal = document.createElement('div');

modal.innerHTML = wrapper.innerHTML;

modal.classList.add('info-hotspot-modal');

document.body.appendChild(modal);

var toggle = function() {

wrapper.classList.toggle('visible');

modal.classList.toggle('visible');

};

// Show content when hotspot is clicked.

wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);

// Hide content when close icon is clicked.

modal.querySelector('.info-hotspot-close-wrapper').addEventListener('click', toggle);

// Prevent touch and scroll events from reaching the parent element.

// This prevents the view control logic from interfering with the hotspot.

stopTouchAndScrollEventPropagation(wrapper);

return wrapper;

}

// Prevent touch and scroll events from reaching the parent element.

function stopTouchAndScrollEventPropagation(element, eventList) {

var eventList = [ 'touchstart', 'touchmove', 'touchend', 'touchcancel',

'wheel', 'mousewheel' ];

for (var i = 0; i < eventList.length; i++) {

element.addEventListener(eventList[i], function(event) {

event.stopPropagation();

});

}

function findSceneById(id) {

for (var i = 0; i < scenes.length; i++) {

if (scenes[i].data.id === id) {

return scenes[i];

}

return null;

}

function findSceneDataById(id) {

for (var i = 0; i < data.scenes.length; i++) {

if (data.scenes[i].id === id) {

return data.scenes[i];

}

return null;

}

// Display the initial scene.

switchScene(scenes[0]);

})();

// Display scene.

scene.switchTo();

// Get the hotspot container for scene.

var container = scene.hotspotContainer();

// Create hotspot with different sources.

container.createHotspot(document.getElementById('iframespot'), { yaw: 0.0335, pitch: -0.102 },

{ perspective: { radius: 1640, extraRotations: "rotateX(5deg)" }});

// Switch sources when clicked.

function switchHotspot(id) {

var wrapper = document.getElementById('iframespot');

wrapper.innerHTML = hotspotHtml[id];

}

The yellow highlighted text is what I motified, correct me if I am wrong. Thanks.

Reply all

Reply to author

Forward

0 new messages