+ aula, updated info dialog
59
static/aula/LICENSE.txt
Executable file
@ -0,0 +1,59 @@
|
||||
Webserver
|
||||
=========
|
||||
|
||||
Copyright 2016 Google Inc. All Rights Reserved.
|
||||
|
||||
The webserver software uses the libraries listed below.
|
||||
|
||||
|
||||
## gorilla/handlers (https://github.com/gorilla/handlers)
|
||||
|
||||
Copyright (c) 2013 The Gorilla Handlers Authors. All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
||||
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
||||
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
||||
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
||||
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
||||
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
|
||||
## browser (https://github.com/pkg/browser)
|
||||
|
||||
Copyright (c) 2014, Dave Cheney <dave@cheney.net>
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
||||
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
||||
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
||||
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
||||
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
||||
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
||||
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
28
static/aula/README.txt
Executable file
@ -0,0 +1,28 @@
|
||||
360 interactive web application generated by the Marzipano Tool
|
||||
===========================================================
|
||||
|
||||
This folder contains a 360 interactive web application generated by the
|
||||
Marzipano Tool, available at http://www.marzipano.net.
|
||||
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
The main application file is `app-files/index.html`. Many browsers have issues
|
||||
when using `file://` URLs. Therefore, to properly view the application it is
|
||||
necessary to use a web server.
|
||||
|
||||
|
||||
Deployment
|
||||
----------
|
||||
|
||||
To deploy the application, upload the contents of the `app-files` folder into
|
||||
a hosting service.
|
||||
|
||||
|
||||
Customization
|
||||
-------------
|
||||
|
||||
This application may be used as is or may be further developed and customized.
|
||||
You can change the application by editing the Javascript, CSS and `index.html`
|
||||
files.
|
103
static/aula/app-files/data.js
Executable file
@ -0,0 +1,103 @@
|
||||
var APP_DATA = {
|
||||
"scenes": [
|
||||
{
|
||||
"id": "0-aula",
|
||||
"name": "Aula",
|
||||
"levels": [
|
||||
{
|
||||
"tileSize": 256,
|
||||
"size": 256,
|
||||
"fallbackOnly": true
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 512
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 1024
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 2048
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 4096
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 8192
|
||||
}
|
||||
],
|
||||
"faceSize": 5750,
|
||||
"initialViewParameters": {
|
||||
"yaw": -1.452039722694007,
|
||||
"pitch": 0.004366261318846654,
|
||||
"fov": 1.3721846102296735
|
||||
},
|
||||
"linkHotspots": [
|
||||
{
|
||||
"yaw": 1.8378635555484646,
|
||||
"pitch": -0.0004988963226590926,
|
||||
"rotation": 0,
|
||||
"target": "1-raum-003"
|
||||
}
|
||||
],
|
||||
"infoHotspots": []
|
||||
},
|
||||
{
|
||||
"id": "1-raum-003",
|
||||
"name": "Raum 003",
|
||||
"levels": [
|
||||
{
|
||||
"tileSize": 256,
|
||||
"size": 256,
|
||||
"fallbackOnly": true
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 512
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 1024
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 2048
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 4096
|
||||
},
|
||||
{
|
||||
"tileSize": 512,
|
||||
"size": 8192
|
||||
}
|
||||
],
|
||||
"faceSize": 5750,
|
||||
"initialViewParameters": {
|
||||
"yaw": 1.5761547204816129,
|
||||
"pitch": 0.06703798751213697,
|
||||
"fov": 1.4247463008564816
|
||||
},
|
||||
"linkHotspots": [
|
||||
{
|
||||
"yaw": -1.9255090052482977,
|
||||
"pitch": 0.020792541365784345,
|
||||
"rotation": 0,
|
||||
"target": "0-aula"
|
||||
}
|
||||
],
|
||||
"infoHotspots": []
|
||||
}
|
||||
],
|
||||
"name": "Aula",
|
||||
"settings": {
|
||||
"mouseViewMode": "drag",
|
||||
"autorotateEnabled": false,
|
||||
"fullscreenButton": false,
|
||||
"viewControlButtons": false
|
||||
}
|
||||
};
|
BIN
static/aula/app-files/img/close.png
Executable file
After Width: | Height: | Size: 2.0 KiB |
BIN
static/aula/app-files/img/collapse.png
Executable file
After Width: | Height: | Size: 1.4 KiB |
BIN
static/aula/app-files/img/down.png
Executable file
After Width: | Height: | Size: 1.6 KiB |
BIN
static/aula/app-files/img/expand.png
Executable file
After Width: | Height: | Size: 1.4 KiB |
BIN
static/aula/app-files/img/fullscreen.png
Executable file
After Width: | Height: | Size: 1.5 KiB |
BIN
static/aula/app-files/img/info.png
Executable file
After Width: | Height: | Size: 2.0 KiB |
BIN
static/aula/app-files/img/left.png
Executable file
After Width: | Height: | Size: 1.7 KiB |
BIN
static/aula/app-files/img/link.png
Executable file
After Width: | Height: | Size: 16 KiB |
BIN
static/aula/app-files/img/minus.png
Executable file
After Width: | Height: | Size: 1.1 KiB |
BIN
static/aula/app-files/img/pause.png
Executable file
After Width: | Height: | Size: 2.9 KiB |
BIN
static/aula/app-files/img/play.png
Executable file
After Width: | Height: | Size: 2.9 KiB |
BIN
static/aula/app-files/img/plus.png
Executable file
After Width: | Height: | Size: 1.2 KiB |
BIN
static/aula/app-files/img/right.png
Executable file
After Width: | Height: | Size: 1.6 KiB |
BIN
static/aula/app-files/img/up.png
Executable file
After Width: | Height: | Size: 1.5 KiB |
BIN
static/aula/app-files/img/windowed.png
Executable file
After Width: | Height: | Size: 1.5 KiB |
80
static/aula/app-files/index.html
Executable file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Aula</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
|
||||
<style> @-ms-viewport { width: device-width; } </style>
|
||||
<link rel="stylesheet" href="vendor/reset.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body class="multiple-scenes ">
|
||||
|
||||
<div id="pano"></div>
|
||||
|
||||
<div id="sceneList">
|
||||
<ul class="scenes">
|
||||
|
||||
<a href="javascript:void(0)" class="scene" data-id="0-aula">
|
||||
<li class="text">Aula</li>
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0)" class="scene" data-id="1-raum-003">
|
||||
<li class="text">Raum 003</li>
|
||||
</a>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="titleBar">
|
||||
<h1 class="sceneName"></h1>
|
||||
</div>
|
||||
|
||||
<a href="javascript:void(0)" id="autorotateToggle">
|
||||
<img class="icon off" src="img/play.png">
|
||||
<img class="icon on" src="img/pause.png">
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0)" id="fullscreenToggle">
|
||||
<img class="icon off" src="img/fullscreen.png">
|
||||
<img class="icon on" src="img/windowed.png">
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0)" id="sceneListToggle">
|
||||
<img class="icon off" src="img/expand.png">
|
||||
<img class="icon on" src="img/collapse.png">
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0)" id="viewUp" class="viewControlButton viewControlButton-1">
|
||||
<img class="icon" src="img/up.png">
|
||||
</a>
|
||||
<a href="javascript:void(0)" id="viewDown" class="viewControlButton viewControlButton-2">
|
||||
<img class="icon" src="img/down.png">
|
||||
</a>
|
||||
<a href="javascript:void(0)" id="viewLeft" class="viewControlButton viewControlButton-3">
|
||||
<img class="icon" src="img/left.png">
|
||||
</a>
|
||||
<a href="javascript:void(0)" id="viewRight" class="viewControlButton viewControlButton-4">
|
||||
<img class="icon" src="img/right.png">
|
||||
</a>
|
||||
<a href="javascript:void(0)" id="viewIn" class="viewControlButton viewControlButton-5">
|
||||
<img class="icon" src="img/plus.png">
|
||||
</a>
|
||||
<a href="javascript:void(0)" id="viewOut" class="viewControlButton viewControlButton-6">
|
||||
<img class="icon" src="img/minus.png">
|
||||
</a>
|
||||
|
||||
<script src="vendor/es5-shim.js"></script>
|
||||
<script src="vendor/eventShim.js"></script>
|
||||
<script src="vendor/classList.js"></script>
|
||||
<script src="vendor/requestAnimationFrame.js" ></script>
|
||||
<script src="vendor/screenfull.min.js" ></script>
|
||||
<script src="vendor/bowser.min.js" ></script>
|
||||
<script src="vendor/marzipano.js" ></script>
|
||||
|
||||
<script src="data.js"></script>
|
||||
<script src="index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
392
static/aula/app-files/index.js
Executable file
@ -0,0 +1,392 @@
|
||||
/*
|
||||
* Copyright 2016 Google Inc. All rights reserved.
|
||||
*
|
||||
* 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', function() {
|
||||
screenfull.toggle();
|
||||
});
|
||||
screenfull.on('change', function() {
|
||||
if (screenfull.isFullscreen) {
|
||||
fullscreenToggleElement.classList.add('enabled');
|
||||
} else {
|
||||
fullscreenToggleElement.classList.remove('enabled');
|
||||
}
|
||||
});
|
||||
} 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 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]);
|
||||
|
||||
})();
|
830
static/aula/app-files/style.css
Executable file
@ -0,0 +1,830 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
-webkit-user-drag: none;
|
||||
-webkit-touch-callout: none;
|
||||
-ms-content-zooming: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a, a:hover, a:active, a:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#pano {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#titleBar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile #titleBar {
|
||||
height: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
/* If there is a fullscreen button the title bar must make space for it */
|
||||
body.fullscreen-enabled #titleBar {
|
||||
right: 80px;
|
||||
}
|
||||
|
||||
body.fullscreen-enabled.mobile #titleBar {
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
/* If there are multiple scenes the title bar must make space for the scene list toggle */
|
||||
body.multiple-scenes #titleBar {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
body.multiple-scenes.mobile #titleBar {
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
#titleBar .sceneName {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
background-color: rgb(58,68,84);
|
||||
background-color: rgba(58,68,84,0.8);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.mobile #titleBar .sceneName {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
#fullscreenToggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
}
|
||||
|
||||
.mobile #fullscreenToggle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
body.fullscreen-enabled #fullscreenToggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#fullscreenToggle .icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mobile #fullscreenToggle .icon {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#fullscreenToggle .icon.on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fullscreenToggle .icon.off {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#fullscreenToggle.enabled .icon.on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#fullscreenToggle.enabled .icon.off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#autorotateToggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
}
|
||||
|
||||
.mobile #autorotateToggle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* If there is a fullscreen button, autorotate must placed a bit to the left */
|
||||
body.fullscreen-enabled #autorotateToggle {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
body.fullscreen-enabled.mobile #autorotateToggle {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
#autorotateToggle .icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mobile #autorotateToggle .icon {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#autorotateToggle .icon.on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#autorotateToggle .icon.off {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#autorotateToggle.enabled .icon.on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#autorotateToggle.enabled .icon.off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sceneListToggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
}
|
||||
|
||||
.mobile #sceneListToggle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#sceneListToggle .text {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#sceneListToggle .icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mobile #sceneListToggle .icon {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#sceneListToggle .icon.on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sceneListToggle .icon.off {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sceneListToggle.enabled .icon.on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sceneListToggle.enabled .icon.off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sceneList {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -220px;
|
||||
padding-top: 40px;
|
||||
width: 220px;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin-left: 0;
|
||||
-webkit-transition: margin-left 0.5s ease-in-out;
|
||||
transition: margin-left 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.mobile #sceneList {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
#sceneList .scenes {
|
||||
width: 100%;
|
||||
background-color: rgb(58,68,84);
|
||||
background-color: rgba(58,68,84,0.8);
|
||||
}
|
||||
|
||||
.mobile #sceneList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.mobile #sceneList.enabled {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
.mobile #sceneList .scenes {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#sceneList.enabled {
|
||||
margin-left: 220px;
|
||||
}
|
||||
|
||||
#sceneList .scene {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mobile #sceneList .scene {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#sceneList .scene .text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 15px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile #sceneList .scene .text {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.no-touch #sceneList .scene:hover {
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
}
|
||||
|
||||
#sceneList .scene.current {
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
}
|
||||
|
||||
/* Hide scene list when only a single scene exists */
|
||||
body.single-scene #sceneList, body.single-scene #sceneListToggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Link hotspot */
|
||||
|
||||
.link-hotspot {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: -30px;
|
||||
margin-top: -30px;
|
||||
opacity: 0.9;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.no-touch .link-hotspot:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile .link-hotspot {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.link-hotspot-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-hotspot-tooltip {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */
|
||||
|
||||
margin-left: 3px;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
max-width: 300px;
|
||||
|
||||
padding: 8px 10px;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: rgb(58,68,84);
|
||||
background-color: rgba(58,68,84,0.8);
|
||||
|
||||
color: #fff;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
-ms-transform: translateX(-8px);
|
||||
-webkit-transform: translateX(-8px);
|
||||
transform: translateX(-8px);
|
||||
|
||||
-webkit-transition: -ms-transform 0.3s,
|
||||
-webkit-transform 0.3s,
|
||||
transform 0.3s,
|
||||
opacity 0.3s;
|
||||
transition: -ms-transform 0.3s,
|
||||
-webkit-transform 0.3s,
|
||||
transform 0.3s,
|
||||
opacity 0.3s;
|
||||
}
|
||||
|
||||
.mobile .link-hotspot {
|
||||
top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
|
||||
}
|
||||
|
||||
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
|
||||
opacity: 1;
|
||||
-ms-transform: translateX(0);
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Prevent tooltip from triggering */
|
||||
.link-hotspot-tooltip {
|
||||
pointer-events: none;
|
||||
}
|
||||
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Fallback mode without pointer-events (IE8-10) */
|
||||
.tooltip-fallback .link-hotspot-tooltip {
|
||||
display: none;
|
||||
}
|
||||
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Info hotspot */
|
||||
|
||||
.info-hotspot {
|
||||
line-height: 1.2em;
|
||||
opacity: 0.9;
|
||||
-webkit-transition: opacity 0.2s 0.2s;
|
||||
transition: opacity 0.2s 0.2s;
|
||||
}
|
||||
|
||||
.no-touch .info-hotspot:hover {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.info-hotspot.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-header {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: rgb(103,115,131);
|
||||
cursor: pointer;
|
||||
-webkit-transition: width 0.3s ease-in-out 0.5s,
|
||||
border-radius 0.3s ease-in-out 0.5s;
|
||||
transition: width 0.3s ease-in-out 0.5s,
|
||||
border-radius 0.3s ease-in-out 0.5s;
|
||||
}
|
||||
|
||||
.mobile .info-hotspot .info-hotspot-header {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
|
||||
width: 260px;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: width 0.3s ease-in-out,
|
||||
border-radius 0.3s ease-in-out;
|
||||
transition: width 0.3s ease-in-out,
|
||||
border-radius 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.desktop .info-hotspot.visible .info-hotspot-header,
|
||||
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
|
||||
width: 260px;
|
||||
border-radius: 5px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
-webkit-transition: width 0.3s ease-in-out,
|
||||
border-radius 0.3s ease-in-out;
|
||||
transition: width 0.3s ease-in-out,
|
||||
border-radius 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mobile .info-hotspot .info-hotspot-icon-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-icon {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-title-wrapper {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
-webkit-transition: width 0s 0.4s,
|
||||
padding 0s 0.4s;
|
||||
transition: width 0s 0.4s,
|
||||
padding 0s 0.4s;
|
||||
}
|
||||
|
||||
.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
|
||||
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
|
||||
width: 220px;
|
||||
padding: 0 5px;
|
||||
-webkit-transition: width 0s 0.4s,
|
||||
padding 0s 0.4s;
|
||||
transition: width 0s 0.4s,
|
||||
padding 0s 0.4s;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-title-wrapper:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-title {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-close-wrapper {
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
top: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-top-right-radius: 5px;
|
||||
background-color: rgb(78,88,104);
|
||||
visibility: hidden;
|
||||
-ms-transform: perspective(200px) rotateY(90deg);
|
||||
-webkit-transform: perspective(200px) rotateY(90deg);
|
||||
transform: perspective(200px) rotateY(90deg);
|
||||
-ms-transform-origin: 0 50% 0;
|
||||
-webkit-transform-origin: 0 50% 0;
|
||||
transform-origin: 0 50% 0;
|
||||
-webkit-transition: -ms-transform 0.3s 0.3s,
|
||||
-webkit-transform 0.3s 0.3s,
|
||||
transform 0.3s 0.3s,
|
||||
visibility 0s 0.6s;
|
||||
transition: -ms-transform 0.3s 0.3s,
|
||||
-webkit-transform 0.3s 0.3s,
|
||||
transform 0.3s 0.3s,
|
||||
visibility 0s 0.6s;
|
||||
}
|
||||
|
||||
.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
|
||||
visibility: visible;
|
||||
-ms-transform: perspective(200px) rotateY(0deg);
|
||||
-webkit-transform: perspective(200px) rotateY(0deg);
|
||||
transform: perspective(200px) rotateY(0deg);
|
||||
-webkit-transition: -ms-transform 0.3s,
|
||||
-webkit-transform 0.3s,
|
||||
transform 0.3s,
|
||||
visibility 0s 0s;
|
||||
transition: -ms-transform 0.3s,
|
||||
-webkit-transform 0.3s,
|
||||
transform 0.3s,
|
||||
visibility 0s 0s;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-close-icon {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
margin: 15%;
|
||||
}
|
||||
|
||||
.info-hotspot .info-hotspot-text {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
background-color: rgb(58,68,84);
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
/* rotate(90deg) causes transition flicker on Firefox 58 */
|
||||
-ms-transform: perspective(200px) rotateX(-89.999deg);
|
||||
-webkit-transform: perspective(200px) rotateX(-89.999deg);
|
||||
transform: perspective(200px) rotateX(-89.999deg);
|
||||
-ms-transform-origin: 50% 0 0;
|
||||
-webkit-transform-origin: 50% 0 0;
|
||||
transform-origin: 50% 0 0;
|
||||
-webkit-transition: -ms-transform 0.3s,
|
||||
-webkit-transform 0.3s,
|
||||
transform 0.3s,
|
||||
visibility 0s 0.3s;
|
||||
transition: -ms-transform 0.3s,
|
||||
-webkit-transform 0.3s,
|
||||
transform 0.3s,
|
||||
visibility 0s 0.3s;
|
||||
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.desktop .info-hotspot.visible .info-hotspot-text {
|
||||
visibility: visible;
|
||||
-ms-transform: perspective(200px) rotateX(0deg);
|
||||
-webkit-transform: perspective(200px) rotateX(0deg);
|
||||
transform: perspective(200px) rotateX(0deg);
|
||||
-webkit-transition: -ms-transform 0.3s 0.3s,
|
||||
-webkit-transform 0.3s 0.3s,
|
||||
transform 0.3s 0.3s,
|
||||
visibility 0s 0s;
|
||||
transition: -ms-transform 0.3s 0.3s,
|
||||
-webkit-transform 0.3s 0.3s,
|
||||
transform 0.3s 0.3s,
|
||||
visibility 0s 0s;
|
||||
}
|
||||
|
||||
/* Info hotspot modal */
|
||||
|
||||
.desktop .info-hotspot-modal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-hotspot-modal {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 11000 !important;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
line-height: 1.2em;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: opacity 0.2s ease-in-out 0.5s,
|
||||
visibility 0s 0.7s;
|
||||
transition: opacity 0.2s ease-in-out 0.5s,
|
||||
visibility 0s 0.7s;
|
||||
}
|
||||
|
||||
.info-hotspot-modal.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transition: opacity 0.2s ease-in-out,
|
||||
visibility 0s 0s;
|
||||
transition: opacity 0.2s ease-in-out,
|
||||
visibility 0s 0s;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-header {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
height: 50px;
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease-in-out 0.2s;
|
||||
transition: opacity 0.3s ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
.info-hotspot-modal.visible .info-hotspot-header {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.3s ease-in-out 0.2s;
|
||||
transition: opacity 0.3s ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-icon-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-icon {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-title-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
width: auto;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-title-wrapper:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-title {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-close-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgb(78,88,104);
|
||||
background-color: rgba(78,88,104,0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-close-icon {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
margin: 15%;
|
||||
}
|
||||
|
||||
.info-hotspot-modal .info-hotspot-text {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
padding: 10px;
|
||||
background-color: rgb(58,68,84);
|
||||
background-color: rgba(58,68,84,0.8);
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.info-hotspot-modal.visible .info-hotspot-text {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.3s ease-in-out 0.4s;
|
||||
transition: opacity 0.3s ease-in-out 0.4s;
|
||||
}
|
||||
|
||||
/* View control buttons */
|
||||
|
||||
.viewControlButton {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
background-color: rgb(103,115,131);
|
||||
background-color: rgba(103,115,131,0.8);
|
||||
}
|
||||
|
||||
body.view-control-buttons .viewControlButton {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide controls when width is too small */
|
||||
@media (max-width: 600px) {
|
||||
body.view-control-buttons .viewControlButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.viewControlButton .icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* Center is at margin-left: -20px */
|
||||
.viewControlButton-1 {
|
||||
margin-left: -145px;
|
||||
}
|
||||
.viewControlButton-2 {
|
||||
margin-left: -95px;
|
||||
}
|
||||
.viewControlButton-3 {
|
||||
margin-left: -45px;
|
||||
}
|
||||
.viewControlButton-4 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.viewControlButton-5 {
|
||||
margin-left: 55px;
|
||||
}
|
||||
.viewControlButton-6 {
|
||||
margin-left: 105px;
|
||||
}
|
BIN
static/aula/app-files/tiles/0-aula/1/b/0/0.jpg
Executable file
After Width: | Height: | Size: 60 KiB |
BIN
static/aula/app-files/tiles/0-aula/1/d/0/0.jpg
Executable file
After Width: | Height: | Size: 40 KiB |
BIN
static/aula/app-files/tiles/0-aula/1/f/0/0.jpg
Executable file
After Width: | Height: | Size: 46 KiB |
BIN
static/aula/app-files/tiles/0-aula/1/l/0/0.jpg
Executable file
After Width: | Height: | Size: 48 KiB |
BIN
static/aula/app-files/tiles/0-aula/1/r/0/0.jpg
Executable file
After Width: | Height: | Size: 51 KiB |
BIN
static/aula/app-files/tiles/0-aula/1/u/0/0.jpg
Executable file
After Width: | Height: | Size: 33 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/b/0/0.jpg
Executable file
After Width: | Height: | Size: 41 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/b/0/1.jpg
Executable file
After Width: | Height: | Size: 47 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/b/1/0.jpg
Executable file
After Width: | Height: | Size: 59 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/b/1/1.jpg
Executable file
After Width: | Height: | Size: 50 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/d/0/0.jpg
Executable file
After Width: | Height: | Size: 37 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/d/0/1.jpg
Executable file
After Width: | Height: | Size: 37 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/d/1/0.jpg
Executable file
After Width: | Height: | Size: 42 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/d/1/1.jpg
Executable file
After Width: | Height: | Size: 38 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/f/0/0.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/f/0/1.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/f/1/0.jpg
Executable file
After Width: | Height: | Size: 41 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/f/1/1.jpg
Executable file
After Width: | Height: | Size: 44 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/l/0/0.jpg
Executable file
After Width: | Height: | Size: 38 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/l/0/1.jpg
Executable file
After Width: | Height: | Size: 36 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/l/1/0.jpg
Executable file
After Width: | Height: | Size: 50 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/l/1/1.jpg
Executable file
After Width: | Height: | Size: 41 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/r/0/0.jpg
Executable file
After Width: | Height: | Size: 28 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/r/0/1.jpg
Executable file
After Width: | Height: | Size: 44 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/r/1/0.jpg
Executable file
After Width: | Height: | Size: 46 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/r/1/1.jpg
Executable file
After Width: | Height: | Size: 49 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/u/0/0.jpg
Executable file
After Width: | Height: | Size: 30 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/u/0/1.jpg
Executable file
After Width: | Height: | Size: 19 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/u/1/0.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
static/aula/app-files/tiles/0-aula/2/u/1/1.jpg
Executable file
After Width: | Height: | Size: 21 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/0/0.jpg
Executable file
After Width: | Height: | Size: 15 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/0/1.jpg
Executable file
After Width: | Height: | Size: 24 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/0/2.jpg
Executable file
After Width: | Height: | Size: 24 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/0/3.jpg
Executable file
After Width: | Height: | Size: 20 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/1/0.jpg
Executable file
After Width: | Height: | Size: 48 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/1/1.jpg
Executable file
After Width: | Height: | Size: 49 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/1/2.jpg
Executable file
After Width: | Height: | Size: 50 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/1/3.jpg
Executable file
After Width: | Height: | Size: 63 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/2/0.jpg
Executable file
After Width: | Height: | Size: 50 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/2/1.jpg
Executable file
After Width: | Height: | Size: 54 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/2/2.jpg
Executable file
After Width: | Height: | Size: 45 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/2/3.jpg
Executable file
After Width: | Height: | Size: 45 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/3/0.jpg
Executable file
After Width: | Height: | Size: 41 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/3/1.jpg
Executable file
After Width: | Height: | Size: 42 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/3/2.jpg
Executable file
After Width: | Height: | Size: 42 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/b/3/3.jpg
Executable file
After Width: | Height: | Size: 45 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/0/0.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/0/1.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/0/2.jpg
Executable file
After Width: | Height: | Size: 30 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/0/3.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/1/0.jpg
Executable file
After Width: | Height: | Size: 42 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/1/1.jpg
Executable file
After Width: | Height: | Size: 36 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/1/2.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/1/3.jpg
Executable file
After Width: | Height: | Size: 39 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/2/0.jpg
Executable file
After Width: | Height: | Size: 47 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/2/1.jpg
Executable file
After Width: | Height: | Size: 36 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/2/2.jpg
Executable file
After Width: | Height: | Size: 38 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/2/3.jpg
Executable file
After Width: | Height: | Size: 40 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/3/0.jpg
Executable file
After Width: | Height: | Size: 46 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/3/1.jpg
Executable file
After Width: | Height: | Size: 42 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/3/2.jpg
Executable file
After Width: | Height: | Size: 41 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/d/3/3.jpg
Executable file
After Width: | Height: | Size: 34 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/0/0.jpg
Executable file
After Width: | Height: | Size: 14 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/0/1.jpg
Executable file
After Width: | Height: | Size: 29 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/0/2.jpg
Executable file
After Width: | Height: | Size: 9.9 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/0/3.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/1/0.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/1/1.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/1/2.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/1/3.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/2/0.jpg
Executable file
After Width: | Height: | Size: 38 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/2/1.jpg
Executable file
After Width: | Height: | Size: 36 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/2/2.jpg
Executable file
After Width: | Height: | Size: 38 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/2/3.jpg
Executable file
After Width: | Height: | Size: 39 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/3/0.jpg
Executable file
After Width: | Height: | Size: 31 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/3/1.jpg
Executable file
After Width: | Height: | Size: 33 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/3/2.jpg
Executable file
After Width: | Height: | Size: 29 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/f/3/3.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
static/aula/app-files/tiles/0-aula/3/l/0/0.jpg
Executable file
After Width: | Height: | Size: 17 KiB |