From 260bb653f5e26555ffbd646ac7ca046cf9bdeb18 Mon Sep 17 00:00:00 2001 From: Alexis Markwick Date: Sun, 19 Sep 2021 19:49:53 +0100 Subject: [PATCH] v6.2.0 Pannellum --- CHANGELOG.md | 48 +- web/assets/css/dark-theme.css | 54 +- web/assets/css/plugins/jquery.fancybox.css | 1 + web/assets/css/plugins/leaflet-sidebar.css | 6 +- web/assets/css/site.css | 67 +- web/assets/data/streetnames.xml | 4 +- web/assets/js/OverPassLayer.js | 16 +- web/assets/js/plugins/leaflet-osm.min.js | 27 - web/assets/js/pois-type.js | 12 +- web/assets/js/site.js | 260 +- web/assets/js/tags-parsers.js | 199 +- web/assets/pannellum/config.json | 5 + web/assets/pannellum/css/img/background.svg | 3 + web/assets/pannellum/css/img/compass.svg | 3 + web/assets/pannellum/css/img/grab.svg | 3 + web/assets/pannellum/css/img/grabbing.svg | 3 + web/assets/pannellum/css/img/sprites.svg | 14 + web/assets/pannellum/css/pannellum.css | 479 +++ web/assets/pannellum/css/standalone.css | 13 + web/assets/pannellum/js/jquery.md5.js | 28 + web/assets/pannellum/js/libpannellum.js | 1867 ++++++++++ web/assets/pannellum/js/pannellum.js | 3401 +++++++++++++++++++ web/assets/pannellum/js/standalone.js | 111 + web/assets/pannellum/pannellum.htm | 23 + web/index.html | 97 +- web/tour/listRailways/index.html | 2 +- web/tour/tour.css | 2 +- web/tour/tour.js | 7 +- 28 files changed, 6383 insertions(+), 372 deletions(-) delete mode 100644 web/assets/js/plugins/leaflet-osm.min.js create mode 100644 web/assets/pannellum/config.json create mode 100644 web/assets/pannellum/css/img/background.svg create mode 100644 web/assets/pannellum/css/img/compass.svg create mode 100644 web/assets/pannellum/css/img/grab.svg create mode 100644 web/assets/pannellum/css/img/grabbing.svg create mode 100644 web/assets/pannellum/css/img/sprites.svg create mode 100644 web/assets/pannellum/css/pannellum.css create mode 100644 web/assets/pannellum/css/standalone.css create mode 100644 web/assets/pannellum/js/jquery.md5.js create mode 100644 web/assets/pannellum/js/libpannellum.js create mode 100644 web/assets/pannellum/js/pannellum.js create mode 100644 web/assets/pannellum/js/standalone.js create mode 100644 web/assets/pannellum/pannellum.htm diff --git a/CHANGELOG.md b/CHANGELOG.md index ab7d4b3..915cef0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ # CHANGELOG +## v6.2.0 - Pannellum + +**Date:** 19/09/2021 + +Added + - Pannellum + +Site changes + - Switch to self-hosted Pannellum photosphere viewer + - Option to use OSM Area ID for OverPass bounding box + - Remove leaflet-osm.js in favour of getting geometry from OverPass + - Only load POI image thumbnails on popup open + - Stop some single-clicks on overlays by adding layerNoClick class + - Let some baselayers be inverted for darkmode using layerDark class + - Create lightbox gallery from images in tour pages + - Tidied up Settings tab + - Permalinks for custom queries + - More of the usual bug fixes and code improvements + + ## v6.1.0 **Date:** 06/08/2021 @@ -13,7 +33,7 @@ Site changes - Remove jquery animate scrolling in favour of js scroll/scollIntoView - Support for 'elevator' tags for facilities parser - Support semicolon separated wikimedia_commons:video videos - - Retry overpass query if time-out occurs + - Retry OverPass query if time-out occurs - Icon for 'entrance' key - Add Boreholes and Other Maps to Tour @@ -45,7 +65,7 @@ Updated js - jquery.mobile.custom.min.js 1.5.0rc1 - URI.js 1.19.6 - L.Control.Locate.min.js 0.72.2 - + Site changes - Proper support for a dark theme, auto switching if user prefers a dark colour scheme - Custom OverPass queries can now include osm elements @@ -63,7 +83,7 @@ Site changes Updated js - URI.js 1.19.4 - + Site changes - Offsets for baselayers - Add annual scarecrow competition to Tour @@ -81,7 +101,7 @@ Updated js - leaflet.js 1.7.1 - jquery.js 3.5.1 - L.Control.Locate.min.js 0.72.1 - + Site changes - Show OSM notes and comment history - Added OpenCageData server for reverse lookups @@ -98,7 +118,7 @@ Site changes Updated js - L.Control.Locate.min.js 0.72.0 - + Site changes - Right-click 'Panoramic view' opens a panoramic Mapillary Street Level iframe, if not found use Google Street View - Hide back-to-top anchor button when at top of tab @@ -117,11 +137,11 @@ Site changes Added js - geotools.min.js - + Updated js - Control.Geocoder.min.js 1.12.0 - L.Control.Locate.min.js 0.70.0 - + Site changes - Right-click on the map to directly copy coordinates (LatLng & NationalGridRef) - Direct links to property records on UK Land Registry @@ -401,10 +421,10 @@ Site changes Added js - config.js - + Updated js - opening_hours+deps.min.js [removed other localisations] - + Site changes - Get next bus times from NaPTAN codes on bus-stops using API from Traveline - Images show as thumbnails until hovered or tapped @@ -427,7 +447,7 @@ Updated js - jQuery 3.3.1 - jquery.mobile.custom.min.js 1.5.0a - easy-button.min.js 3.0.0 - + Site changes - Larger overlay opacity slider with added close button - Show Overpass 'attic data' for a certain date in development options @@ -554,7 +574,7 @@ Site changes **Date:** 02/06/2017 Site changes - - Added list of results when selecting a group POI, colours show current open state. Mouse-over an item to see tooltip, click to open popup. + - Added list of results when selecting a group POI, colours show current open state. Mouse-over an item to see tooltip, click to open popup - Removed 'facilities open right now' checkbox - Use alternative method to get thumbnail from wikimedia without MD5 plugin @@ -760,7 +780,7 @@ Updated js Site changes - Re-write of creating POI checkbox tables, now a single tab with page jump links. Complete automated import from pois-types.js - - Changed URL encoding to not use unsafe characters and less parameters, old links will no longer work. + - Changed URL encoding to not use unsafe characters and less parameters, old links will no longer work - Added a Historic Tour tab. Contains controls linking to an iframe containing various articles that interact with the map - Suggested walks now use switch statement - Wikimedia images now display proper attribution through their api @@ -1003,11 +1023,11 @@ Site changes Updated js - jQuery 3.0.0 - + Added js - jquery-ui.min.js - jquery.easy-autocomplete.js - + Site changes - New 'find interest' input that finds POIs based on keywords - Checkboxes briefly highlight when selected by 'find interest' or returning from link diff --git a/web/assets/css/dark-theme.css b/web/assets/css/dark-theme.css index 5f2c460..40a865e 100644 --- a/web/assets/css/dark-theme.css +++ b/web/assets/css/dark-theme.css @@ -1,16 +1,16 @@ :root { --text-color: #aaa; --hover-color: #ccc; - --bg-color: #111; - --bg-color2: rgba(20, 20, 20, 0.9); - --scr-track: #222; - --scr-thumb: #777; + --bg-color: #0c0c0d; + --bg-color2: rgba(35, 35, 39, 0.95); + --scr-track: #0c0c0d; + --scr-thumb: #555; } .spinner { filter: invert(100%) hue-rotate(180deg); } html, body, input, select, #map, .leaflet-control-layers-expanded, #msgStatusHead, .leaflet-control-attribution, .leaflet-tooltip, -.leaflet-contextmenu a.leaflet-contextmenu-item, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-control-scale-line { +.leaflet-contextmenu a.leaflet-contextmenu-item, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-control-scale-line, .leaflet-routing-remove-waypoint:hover::after { color: var(--text-color) !important; } .anchor:hover, select:hover:enabled, #poi-results button:hover, #home .sidebar-body a i:hover, #inputWw2 div, .leaflet-control-attribution .fa-info-circle:hover, @@ -18,19 +18,26 @@ button:hover, .leaflet-bar a:hover, .navigateItem a:hover, .leaflet-container a. .leaflet-routing-geocoders button:hover::after, #poi-filter-cl:hover::after, #devTools h3:hover::after, .popup-ohContainer .popup-tagValue:hover::after { color: var(--hover-color) !important; } -.sidebar-tabs, .anchor, input:not([type="range"]), select, button, .leaflet-bar > a, .leaflet-tooltip, .leaflet-control-geocoder input, .slider::before, #inputOpacity, .leaflet-control-geocoder, .leaflet-contextmenu, #msgStatusHead, -.leaflet-container a.leaflet-popup-close-button, .leaflet-control-geocoder-alternatives li:hover, .leaflet-control-geocoder-selected { +.sidebar-tabs, #homeBox, #xmasMsg, .anchor, input:not([type="range"]), hr, select, button, .leaflet-bar > a, .leaflet-tooltip, .leaflet-control-geocoder input, +.slider::before, #inputOpacity, .leaflet-control-geocoder, .leaflet-contextmenu, #msgStatusHead, .leaflet-container a.leaflet-popup-close-button, +.leaflet-control-geocoder-alternatives li:hover, .leaflet-control-geocoder-selected, #poi-results-list tr:hover, .poi-checkbox-selected, .poi-checkbox > label:hover, +.leaflet-touch .leaflet-bar { background-color: var(--bg-color) !important; } -.poi-checkbox-selected, #poi-results-list tr:hover, #msgStatusBody, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .sidebar-content, -.leaflet-control-layers-expanded, #homeBox, #xmasMsg, hr, .poi-checkbox > label:hover, .leaflet-control-layers, .sidebar.collapsed .sidebar-tabs, .leaflet-control-geocoder { +#msgStatusBody, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .sidebar-content, .leaflet-control-layers-expanded, .leaflet-control-layers, +.leaflet-control-geocoder { background-color: var(--bg-color2) !important; } +@media (min-width: 1300px) { + .sidebar.collapsed .sidebar-tabs { + background-color: rgba(0, 0, 0, 0.5) !important; + } +} #weather, #newFeed ul { color: #688c81; } .leaflet-bar a, .leaflet-bar a:hover { - border-bottom: 1px solid #555; + border-bottom: 1px solid #333; } .leaflet-bar a:last-child { border-bottom: none; @@ -38,8 +45,8 @@ button:hover, .leaflet-bar a:hover, .navigateItem a:hover, .leaflet-container a. .custscroll { scrollbar-color: var(--scr-thumb) var(--scr-track) !important; } -.baselayer { - opacity: 0.85 !important; +.layerDark { + filter: invert(90%) hue-rotate(180deg); } .sidebar-header { color: #ddd; @@ -79,13 +86,16 @@ input, select, #sidebar button:not(.modalButton), .leaflet-tooltip { background: none repeat scroll 0 0 #000; } .sidebar-tabs > ul > li:hover, .slider { - background-color: #555; + background-color: #444; } .slider:hover { background-color: #666; } .popup-header { - background-color: rgba(55, 55, 55, 0.5); + background-color: rgba(12, 12, 13, 0.5) !important; +} +.popup-fhrs > a > img { + filter: brightness(0.75); } .leaflet-container a.leaflet-popup-close-button { border: 3px solid #333; @@ -93,19 +103,16 @@ input, select, #sidebar button:not(.modalButton), .leaflet-tooltip { .leaflet-tooltip-right::before { border-right-color: var(--bg-color); } -#gotocontrols .fa-border, .leaflet-touch .leaflet-bar { - background-color: black; -} -.modalTutor { - color: black; -} .modalButton { box-shadow: 1px 1px #000; background-color: #222 !important; } .leaflet-contextmenu a.leaflet-contextmenu-item.over { background-color: #222; - border-top: 1px solid #333; + border-top: 1px solid #222; + border-bottom: 1px solid #222; +} +.leaflet-contextmenu-separator { border-bottom: 1px solid #333; } .popup-ohTable tr, .popup-bsTable tr { border: 1px solid black; } @@ -124,3 +131,8 @@ input, select, #sidebar button:not(.modalButton), .leaflet-tooltip { .custscroll::-webkit-scrollbar-thumb { background-color: var(--scr-thumb); } +#gotocontrols .fa-border, #gotoprivacy .fa-border { + border: 1px solid #333; + border-radius: 5px; + background-color: var(--bg-color); +} diff --git a/web/assets/css/plugins/jquery.fancybox.css b/web/assets/css/plugins/jquery.fancybox.css index 371360d..ad13e07 100644 --- a/web/assets/css/plugins/jquery.fancybox.css +++ b/web/assets/css/plugins/jquery.fancybox.css @@ -266,6 +266,7 @@ body.compensate-for-scrollbar { } .fancybox-slide--iframe .fancybox-content { + height: 100% !important; background: #fff; } diff --git a/web/assets/css/plugins/leaflet-sidebar.css b/web/assets/css/plugins/leaflet-sidebar.css index 67ae20a..de9aafc 100644 --- a/web/assets/css/plugins/leaflet-sidebar.css +++ b/web/assets/css/plugins/leaflet-sidebar.css @@ -22,7 +22,8 @@ opacity : 0; } @media (min-width: 1300px) { .sidebar.collapsed .sidebar-tabs { - background-color: rgba(204, 204, 204, 0.5); } + background-color: rgba(204, 204, 204, 0.5); + transition: background-color 400ms ease-out; } .sidebar.collapsed { width: 40px; } } .sidebar-left { @@ -34,8 +35,7 @@ top: 0; bottom: 0; height: 100%; - background-color: #ddd; - transition: background-color 300ms ease-out; } + background-color: #ddd; } .sidebar-left .sidebar-tabs { left: 0; } .sidebar-tabs, .sidebar-tabs > ul { diff --git a/web/assets/css/site.css b/web/assets/css/site.css index 005c351..ee18e3b 100644 --- a/web/assets/css/site.css +++ b/web/assets/css/site.css @@ -1,5 +1,5 @@ :root { - --main-color: #b05000; + --main-color: #b05000; --second-color: #be6f2e; --bg-hover-color: #f4f4f4; --scr-thumb: #cdcdcd; @@ -46,6 +46,9 @@ html, body, #map { #map { transition: margin-left 400ms ease-out; } + #weather { + font-size: 8.7pt; + } #weather .fa-2x { font-size: 1.8em; } @@ -58,6 +61,11 @@ input[type=text], input[type=date], input[type=number] { height: 28px; } +button:disabled { + opacity: 50%; + pointer-events: none; +} + #sidebar { display: none; } @@ -272,9 +280,6 @@ h3 { transform: rotate(90deg); } -.baselayer { - transition: opacity 300ms linear; -} .leaflet-touch .leaflet-bar { background-color: white; } @@ -391,6 +396,12 @@ h3 { .leaflet-left .leaflet-control-scale { margin: 0 0 3px 10px; } +.leaflet-fade-anim .leaflet-popup { + opacity: 0; + -webkit-transition: opacity 0.1s linear; + -moz-transition: opacity 0.1s linear; + transition: opacity 0.1s linear; +} #noscript { color: #f4e6d3; @@ -904,12 +915,20 @@ input:indeterminate + .slider::before { margin-right: 5px; } .buttonLabel { + display: table-cell; + vertical-align: middle; font-size: 90%; - line-height: 20px; - padding-top: 5px; + height: 40px; +} +#inputOpServer, #inputRevServer { + width: 210px; } -#inputOverpass, #inputOpServer, #inputRevServer { - width: calc(100% - 100px); +#inputOverpass { + width: calc(100% - 32px); + max-width: 350px; + min-width: 210px; + padding-right: 20px !important; + position: relative; } #inputAttic, #inputOverpass, #inputOpServer, #inputOpCache, #inputRevServer { margin: 5px 0 5px 5px; @@ -921,6 +940,7 @@ input:indeterminate + .slider::before { line-height: 28px; } #inputOpCache { + float: left; width: 50px; margin-right: 5px; } @@ -929,7 +949,7 @@ input:indeterminate + .slider::before { position: relative; } #devTools > div { - padding: 5px 0 15px 15px; + padding: 0 5%; } /* help tab */ @@ -945,8 +965,8 @@ input:indeterminate + .slider::before { height: 15px; padding: 0 5px 0 0; } -#gotocontrols .fa-border { - border: 1px solid #aaa; +#gotocontrols .fa-border, #gotoprivacy .fa-border { + border: 1px solid #ccc; border-radius: 5px; background-color: white; } @@ -1021,6 +1041,7 @@ input:indeterminate + .slider::before { } .leaflet-popup-content { margin: 0 15px 10px 15px; + min-width: 75px; } .leaflet-container a.leaflet-popup-close-button { top: -14px; @@ -1060,23 +1081,19 @@ input:indeterminate + .slider::before { background-color: rgba(200, 200, 200, 0.2); } .popup-header h3 { - padding-right: 60px; margin: 0 auto 0; } -.popup-t .popup-header h3 { - padding-right: 0; -} .popup-header-sub { display: table-cell; font-style: oblique; font-weight: bold; - padding-right: 60px; width: 100%; vertical-align: bottom; } .popup-fhrs { display: table-cell; line-height: 0; + padding-left: 5px; } .popup-fhrs > a > img { white-space: nowrap; @@ -1112,7 +1129,7 @@ input:indeterminate + .slider::before { text-align: justify; padding-right: 3px; } -@media (max-height: 500px) { +@media (max-height: 640px) { .popup-longDesc { max-height: calc(var(--popup-long-desc-height) / 2); } @@ -1128,7 +1145,6 @@ input:indeterminate + .slider::before { cursor: pointer; } .popup-ohTable, .popup-bsTable { - font: 80%/1.2 monospace; text-align: center; } .popup-ohTable { @@ -1145,7 +1161,7 @@ input:indeterminate + .slider::before { -webkit-overflow-scrolling: touch; } .popup-ohTable table { width: 100%; border-collapse: collapse; } -.popup-ohTable tr, .popup-bsTable tr { border: 1px solid white; } +.popup-ohTable tr, .popup-bsTable tr { font: 80%/1.2 monospace; border: 1px solid white; } .popup-ohTable td { padding: 2px 0; } .popup-ohTable tr.today { font-weight: bold; } .popup-ohTable td.weekend { background-color: #ccc; } @@ -1209,7 +1225,7 @@ input:indeterminate + .slider::before { .fancybox-button .fa-2x:hover { opacity: 1; } -.fancybox-button--pause .fas:first-child, .fancybox-button--play .fas:nth-child(2) { +.fancybox-button--pause .fas:first-child, .fancybox-button--play .fas:nth-child(2), .noslideshow .fancybox-button--play { display: none; } @@ -1288,7 +1304,7 @@ input:indeterminate + .slider::before { padding: 0 5px; } .popup-xmas .leaflet-popup-content-wrapper, .leaflet-tooltip.popup-xmas, #xmasMsg { - background-image: url('../../tour/tourXmas/popup-bg.png'); + background-image: url('../../tour/itemXmas/popup-bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; @@ -1377,3 +1393,12 @@ input:indeterminate + .slider::before { input:focus, select:focus, textarea:focus, button:focus { outline: none; } +kbd { + border-radius: 3px; + border: 1px solid rgba(180, 180, 180, 0.5); + font-size: .85em; + font-weight: 700; + padding: 0 2px; + margin: 0 2px; + white-space: nowrap; +} diff --git a/web/assets/data/streetnames.xml b/web/assets/data/streetnames.xml index 3ece4bc..7806f4f 100644 --- a/web/assets/data/streetnames.xml +++ b/web/assets/data/streetnames.xml @@ -1132,7 +1132,7 @@ Village in West Sussex, 4 miles north of Worthing. (Adopted by Borough of Bexhill 3rd February 1969). - Fir Tree Close + Firtree Close 1971 Firs belong to the genus Abies and comprise around 50 species of evergreen coniferous trees. (Date of adoption by Borough of Bexhill or later East Sussex County Council not known). @@ -3550,7 +3550,7 @@ Unadopted Dec 2020 - Brackerne Close + Brackern Close Unadopted Dec 2020 diff --git a/web/assets/js/OverPassLayer.js b/web/assets/js/OverPassLayer.js index 7073444..374f49b 100644 --- a/web/assets/js/OverPassLayer.js +++ b/web/assets/js/OverPassLayer.js @@ -9,18 +9,18 @@ function show_overpass_layer(query, cacheId, bound) { $('.poi-checkbox').addClass('poi-loading'); queryBbox = '[out:json]'; if ($('#inputAttic').val()) queryBbox += '[date:"' + new Date($('#inputAttic').val()).toISOString() + '"]'; - // select within relation - work in progress + // select within area if (bound) - if (osmRelation) { - queryBbox += ';rel(' + osmRelation + ');map_to_area'; - query = query.replace(/];/g, '](area);'); + if (osmAreaId) { + queryBbox += ';area(' + osmAreaId + ')->.b'; + query = query.replace(/\[/g, '(area.b)['); } else queryBbox += '[bbox:' + [mapBounds.south, mapBounds.west, mapBounds.north, mapBounds.east].join(',') + ']'; queryBbox += ';' + query; } var opl = new L.OverPassLayer({ debug: $('#inputDebug').is(':checked'), - query: queryBbox + 'out tags center qt ' + maxOpResults + ';', + query: queryBbox + 'out geom qt ' + maxOpResults + ';', endpoint: 'https://' + $('#inputOpServer').val() + '/api/interpreter', callback: callback, cacheId: cacheId ? 'OPL' + cacheId : '' @@ -79,11 +79,11 @@ L.OverPassLayer = L.FeatureGroup.extend({ }, complete: function(e) { if (e.status === 0 || (e.status >= 400 && e.status <= 504)) { - var erMsg = 'Something unknown happened. Please try again later.'; + var erMsg = 'Something went wrong. Please try again later.'; switch (e.status) { case 0: erMsg = 'Data server not responding. Please try again later.'; e.status = 1; break; case 400: erMsg = 'Bad Request. Check the URL or query is valid.'; break; - case 429: erMsg = 'Too Many Requests. Please try a smaller selection.'; break; + case 429: erMsg = 'Too Many Requests. Please wait a few moments before trying again.'; break; case 504: // retry on timeout if (this.retryLimit) { @@ -95,7 +95,7 @@ L.OverPassLayer = L.FeatureGroup.extend({ break; } self.options.statusMsg('exclamation-triangle', 'ERROR #' + e.status, erMsg); - self.options.callback.call(reference, {elements: []}); + self.options.callback.call(reference, { elements: [] }); this.error(); } }, diff --git a/web/assets/js/plugins/leaflet-osm.min.js b/web/assets/js/plugins/leaflet-osm.min.js deleted file mode 100644 index a100ae0..0000000 --- a/web/assets/js/plugins/leaflet-osm.min.js +++ /dev/null @@ -1,27 +0,0 @@ -L.OSM={};L.OSM.DataLayer=L.FeatureGroup.extend({initialize:function(xml){L.Util.setOptions(this,{areaTags:['area','building','leisure','tourism','ruins','historic','landuse','military','natural','sport'],uninterestingTags:['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid'],styles:{node:{stroke:false,fill:false,interactive:false},area:{color:$('html').css('--main-color'),weight:5,opacity:0.5,fillColor:$('html').css('--main-color'),fillOpacity:0.3,interactive:false},highway:{color:$('html').css('--main-color'),opacity:0.5,weight:10,interactive:false}}});L.FeatureGroup.prototype.initialize.call(this);if(xml) -this.addData(xml);},addData:function(features){if(!(features instanceof Array)) -features=this.buildFeatures(features);for(var i=0;i=0){used=true;break;}} -if(!used) -return true;for(i=0;i=0) -return true;} -for(var key in node.tags){if(this.options.uninterestingTags.indexOf(key)<0) -return true;} -return false;}});L.Util.extend(L.OSM,{getChangesets:function(xml){var result=[];var nodes=xml.getElementsByTagName("changeset");for(var i=0;i= 15 && !$('.leaflet-marker-draggable, .leaflet-control-layers-expanded').length && !imageOverlay.getLayers().length && !actOverlayLayer && !spinner && - !($('.leaflet-popup').length && map.getBounds().contains(map.layerPointToLatLng($('.leaflet-popup')[0]._leaflet_pos)))) { + // ignore map click if... low zoom / dragging walk markers / overlay control is open / layerNoclick / spinner is shown / popup is open on screen + else if (map.getZoom() >= 15 && !$('.leaflet-marker-draggable, .leaflet-control-layers-expanded, .layerNoclick').length && !imageOverlay.getLayers().length && + !spinner && !($('.leaflet-popup').length && map.getBounds().contains(map.layerPointToLatLng($('.leaflet-popup')[0]._leaflet_pos)))) { that.fire('visualclick', L.Util.extend(e, { type: 'visualclick' })); // drop marker and reverse lookup on single click h = setTimeout(function() { @@ -137,7 +137,7 @@ L.Map.addInitHook(function() { weight: 2, color: $('html').css('--main-color'), opacity: 1, - fillColor: '#fff', + fillColor: $('#inputDark').is(':checked') ? '#222' : '#fff', fillOpacity: 0.5, interactive: noTouch ? true : false, bubblingMouseEvents: false @@ -188,7 +188,7 @@ var map = new L.map('map', { index: 5, callback: fixMyStreet }, { - text: ' Panoramic view', + text: ' Photosphere view', index: 6, callback: panoView }, '-', { @@ -252,7 +252,7 @@ var map = new L.map('map', { showModalTutor($('.leaflet-control-layers'), 'modalT1', '-160', 'Choose from a growing number of modern and historical maps to overlay.', 'right'); showModalTutor($('#btnClearmap'), 'modalT2', '40', 'Clean up any map markers using this button. Try clicking the map to find information on almost any place.', 'left'); showModalTutor($('.sidebar-tabs ul li').eq(3), 'modalT3', '40', 'Display articles on the history of the area. From dinosaur footprints to WW2 incidents.', 'left'); - showModalTutor($('#inputOpacity input'), 'modalT4', '-160', 'This slider changes the opacity of the overlay.' + (noTouch ? ' Tapping CTRL will fade the overlay in and out.' : ''), 'right'); + showModalTutor($('#inputOpacity input'), 'modalT4', '-160', 'This slider changes the opacity of the overlay.' + (noTouch ? ' Tapping CTRL will fade the overlay in and out.' : ''), 'right'); } // holiday decorations overlay //if (new Date().getMonth() === 3 && new Date().getDate() >= 10 && new Date().getDate() <= 13) sidebar.append(''); @@ -310,6 +310,7 @@ var map = new L.map('map', { }).on('popupopen', function(e) { var popupThis = $(e.popup._container); var osmId = e.popup._source._leaflet_id; + if (popupThis.find($('.popup-header > a').length)) popupThis.find($($('.popup-header h3').length ? '.popup-header h3' : '.popup-header-sub')).css('padding-right', 25*$('.popup-header > a').length + 'px'); // add/remove favourites if ($('.popup-bookm').length) { if (!window.localStorage.favourites) window.localStorage.favourites = ''; @@ -390,7 +391,7 @@ var map = new L.map('map', { popupThis.find($('.popup-bsTable')).append( '' + $(xml).find('PublishedLineName').eq(c).text() + '' + '' + $(xml).find('DirectionName').eq(c).text() + '' + - '' + (departTimer === -1 ? 'Due' : departTimer + ' (' + new Date(departTime).toLocaleTimeString(navigator.language, { hour: '2-digit', minute: '2-digit' })) + ')' + '' + (departTimer === -1 ? 'Due' : (departTimer + ' (' + new Date(departTime).toLocaleTimeString(navigator.language, { hour: '2-digit', minute: '2-digit' }) + ')')) + '' ); } popupThis.find($('.popup-bsTable')).after('
Data: Traveline NextBuses
'); @@ -415,9 +416,14 @@ var map = new L.map('map', { // reduce height of long descriptions if image exists if (popupThis.find($('.popup-longDesc')).length) popupThis.find($('.popup-longDesc')).css('--popup-long-desc-height', '150px'); setTimeout(function() { - popupThis.find($('.popup-imgContainer').each(function(i, element) { if (!popupThis.find($(element).find('.attribd')).length) getWikiAttrib(popupThis.find($(element))); })); - }, 500); - $('.popup-imgContainer img') + popupThis.find($('.popup-imgContainer').each(function(i, element) { + // dynamically load images and attribution + $(element).find('img').attr('src', $(element).find('a').attr('href') + ($(element).find('a').data('srcset') ? '&width=' + imgSize : '')); + if (!popupThis.find($(element).find('.attribd')).length) getWikiAttrib(popupThis.find($(element))); + //map._layers[osmId].setPopupContent(popupThis.find('.leaflet-popup-content').html()); + })); + }, 200); + popupThis.find($('.popup-imgContainer img')) .on('swiperight', function() { navImg(0); }) .on('swipeleft', function() { navImg(1); }) .on('wheel', function(e) { @@ -431,20 +437,20 @@ var map = new L.map('map', { popupThis.find($('.popup-imgContainer').css('pointer-events', 'none')); popupThis.find($('.popup-imgAttrib')).empty(); }); - $('.popup-imgContainer, .navigateItem') + popupThis.find($('.popup-imgContainer, .navigateItem')) .on('dragstart', false) .on('selectstart', false); - $('#img0 img') + popupThis.find($('#img0 img')) .on('load', function() { // stop placeholder images from being zoomed if (popupThis.find($('.popup-imgContainer img')).attr('src').indexOf('000placehldr') >= 0) popupThis.find($('.popup-imgContainer').css('pointer-events', 'none')); popupThis.find($('.popup-imgContainer img')).attr('alt', 'Image of ' + popupThis.find($('.popup-header h3')).text()); // add padding on attribution for navigation buttons - if (popupThis.find($('.navigateItem')).length) popupThis.find($('.popup-imgAttrib')).css('padding-right', 20*$('.navigateItem i:visible').length + 'px'); + if (popupThis.find($('.navigateItem')).length) popupThis.find($('.popup-imgAttrib')).css('padding-right', 20*popupThis.find($('.navigateItem i:visible')).length + 'px'); if (e.popup.options.autoPan && map.getBounds().contains(e.popup._latlng)) e.popup._adjustPan(); }); } - // panorama and video attribution + // photosphere and video attribution $('.pano, .vid').each(function(i, element) { $(element).data('caption', 'Wikimedia Commons'); }); @@ -584,8 +590,8 @@ function reverseQuery(e, singlemapclick) { var wgs84 = new GT_WGS84(); wgs84.setDegrees(e.latlng.lat, e.latlng.lng); var osgb = wgs84.getOSGB(); - var landRegUrl = 'https://eservices.landregistry.gov.uk/eservices/FindAProperty/view/MapEnquiryRadiusSearch.do?findPropertiesGroup=on&radius=5&mapType=r&ukMapX=' + osgb.eastings + '&ukMapY=' + osgb.northings + '&zoomLevel=' + map.getZoom(); - msgStatusBody += '
Land Registry Lookup'; + var landRegUrl = 'https://eservices.landregistry.gov.uk/eservices/FindAProperty/view/MapEnquiryRadiusSearch.do?findPropertiesGroup=on&radius=5&mapType=r&ukMapX=' + osgb.eastings + '&ukMapY=' + osgb.northings + '&zoomLevel=' + map.getZoom() + '#LL_DataServer'; + msgStatusBody += '
Land Registry Lookup '; } setMsgStatus(msgStatusIcon, msgStatusHead, msgStatusBody); // move click location to address location on hover @@ -638,7 +644,7 @@ function fixMyStreet(e) { popupWindow('https://osm.fixmystreet.com/around?zoom=4&latitude=' + e.latlng.lat + '&longitude=' + e.latlng.lng, 'fmsWindow', 1024, 768); } function panoView(e, fromSequence) { - // tries to find panoramic photos from Mapillary, if none default to Google + // tries to find photospheres from Mapillary, if none default to Google var mpllryRad = fromSequence ? 30 : 15; $('.spinner').show(); $.ajax({ @@ -799,7 +805,15 @@ $('#tourList').change(function() { $(this).fadeIn(); $(this).contents().find('sup').click(function() { tourRef(tourVal, this.innerText); }); $(this).contents().find('sup').attr('title', 'View reference'); - $(this).contents().find('img').not('h3 img').off('click').click(function() { $.fancybox.open([{ src: $(this)[0].currentSrc, caption: $(this).attr('alt') }]); }); + $(this).contents().find('img').not('h3 img').off('click').click(function() { + // create fancybox gallery from iframe images + var currentSrc = $(this)[0].currentSrc; + $.fancybox.open({ src: currentSrc, type: 'image', opts: { caption: $(this).attr('alt'), beforeLoad: function() { + if ($.fancybox.getInstance().firstRun) $.each($('#tourFrame').contents().find('img').not('h3 img'), function() { + if (this.src !== currentSrc) $.fancybox.getInstance().addContent({ src: this.src, caption: this.alt }); + }); + }}}); + }); $('#tourControls').children().prop('disabled', false); }); permalinkSet(); @@ -846,33 +860,39 @@ function setLeaflet() { bosm: { name: 'Bexhill-OSM', url: 'https://api.mapbox.com/styles/v1/drmx/cjyfrglvo1v3c1cqqlcvzyd07/tiles/256/{z}/{x}/{y}@2x?access_token=' + BOSM.mapboxKey, - attribution: attribution + ', MapBox' + attribution: attribution + ', MapBox', + className: 'layerDark' }, osmstd: { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', - maxNativeZoom: 19 + maxNativeZoom: 19, + className: 'layerDark' }, general: { name: 'General Purpose', url: 'https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png', attribution: attribution + ', HOTOSM', - maxNativeZoom: 20 + maxNativeZoom: 20, + className: 'layerDark' }, osmuk: { name: 'OpenStreetMap UK', url: 'https://map.atownsend.org.uk/hot/{z}/{x}/{y}.png', - attribution: attribution + ', Andy Townsend' + attribution: attribution + ', Andy Townsend', + className: 'layerDark' }, cycle: { name: 'OpenCycleMap', url: 'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + BOSM.thuforKey, - attribution: attribution + ', ThunderForest' + attribution: attribution + ', ThunderForest', + className: 'layerDark' }, trnsprt: { name: 'Public Transport', url: 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=' + BOSM.thuforKey, - attribution: attribution + ', ThunderForest' + attribution: attribution + ', ThunderForest', + className: 'layerDark' }, bing: { name: 'Bing Aerial', @@ -892,7 +912,7 @@ function setLeaflet() { maxZoom: map.getMaxZoom(), maxNativeZoom: tileBaseLayer[tile].maxNativeZoom, errorTileUrl: tileBaseLayer[tile].errorTileUrl, - className: 'baselayer' + className: tileBaseLayer[tile].className || '' }; if (tileBaseLayer[tile].quadkey) tileBaseLayers[tileBaseLayer[tile].name] = new L.TileLayer.QuadKeyTileLayer(tileBaseLayer[tile].url, bOptions); else tileBaseLayers[tileBaseLayer[tile].name] = L.tileLayer(tileBaseLayer[tile].url, bOptions); @@ -902,12 +922,6 @@ function setLeaflet() { } // overlays, set an offset by using metres (offset: [left, top]) tileOverlayLayer = { - osm2012: { - name: 'OpenStreetMap 2012', - url: 'http://map.fosm.org/default/{z}/{x}/{y}.png', - opacity: 1, - hide: 1 - }, lidar: { name: 'Lidar DTM 2m', url: 'https://environment.data.gov.uk/spatialdata/lidar-composite-digital-surface-model-dtm-2m/wms', @@ -920,33 +934,7 @@ function setLeaflet() { opacity: 0.8, className: 'layerLidar' }, -/* prow: { - name: 'Rights of Way', - url: 'http://inspire.misoportal.com:80/geoserver/east_sussex_county_council_east_sussex_rights_of_way/ows?resid=8886ba7d-a785-470d-be18-3e425', - wms: { - layers: 'east_sussex_county_council_east_sussex_rights_of_way', - format: 'image/png', - transparent: true - }, - attribution: 'East Sussex County Council', - opacity: 1, - maxNativeZoom: 18, - className: 'layerProw' - }, landreg: { - name: 'Land Registry', - url: 'http://inspire.landregistry.gov.uk/inspire/ows', - wmsOverlay: { - layers: 'inspire:CP.CadastralParcel', - format: 'image/png', - transparent: true - }, - attribution: 'HM Land Registry', - opacity: 0.7, - minZoom: 17, - offset: [1, 1.5] - }, -*/ landreg: { name: 'Land Registry', url: 'https://tiles.osmuk.org/PropertyBoundaries/{z}/{x}/{y}.png', attribution: 'HM Land Registry', @@ -954,7 +942,18 @@ function setLeaflet() { minNativeZoom: 18, maxNativeZoom: 20, minZoom: 16, - offset: [-1, 1], + offset: [-1, 1] + }, + tpo: { + name: 'Tree Preservation Orders', + url: 'https://policiesmap.rother.gov.uk/geoserver/re/wms', + wms: { + layers: 're:Tree_Preservation_Orders', + format: 'image/png', + transparent: true + }, + attribution: 'Rother District Council', + opacity: 1 }, bing: { name: 'Bing Aerial', @@ -967,13 +966,21 @@ function setLeaflet() { offset: [2, 3] }, // historic + osm2012: { + name: 'OpenStreetMap 2012', + url: 'https://map.fosm.org/default/{z}/{x}/{y}.png', + opacity: 1, + hide: 1, + className: 'layerNoclick' + }, bm1975: { name: '1975 Aerial (coast)', url: 'https://tiles.bexhillheritage.org.uk/bm1975/{z}/{x}/{y}.png', attribution: 'Meridian Airmaps Ltd, Bexhill Museum', bounds: LBounds, opacity: 1, - maxNativeZoom: 18 + maxNativeZoom: 18, + className: 'layerNoclick' }, bm1967: { name: '1967 Aerial', @@ -981,7 +988,8 @@ function setLeaflet() { attribution: 'BKS Surveys, Bexhill Museum', bounds: LBounds, opacity: 1, - maxNativeZoom: 18 + maxNativeZoom: 18, + className: 'layerNoclick' }, os1962: { name: '1962 Ordnance Survey', @@ -990,7 +998,8 @@ function setLeaflet() { bounds: LBounds, opacity: 1, maxNativeZoom: 16, - offset: [5, 3] + offset: [5, 3], + className: 'layerNoclick' }, br1959: { name: '1959 Aerial (west branch)', @@ -998,7 +1007,8 @@ function setLeaflet() { attribution: 'British Rail, Michael Pannell', bounds: L.latLngBounds([50.83722, 0.45732], [50.8907, 0.5134]), opacity: 1, - maxNativeZoom: 18 + maxNativeZoom: 18, + className: 'layerNoclick' }, os1955: { name: '1955 Ordnance Survey', @@ -1007,7 +1017,8 @@ function setLeaflet() { bounds: LBounds, opacity: 1, maxNativeZoom: 19, - offset: [1, 1] + offset: [1, 1], + className: 'layerNoclick' }, bm1946: { name: '1946 Aerial (p.levels)', @@ -1017,7 +1028,8 @@ function setLeaflet() { opacity: 1, minNativeZoom: 14, maxNativeZoom: 18, - hide: 1 + hide: 1, + className: 'layerNoclick' }, arp1942: { name: '1942 Air Raid Precautions', @@ -1026,7 +1038,8 @@ function setLeaflet() { bounds: L.latLngBounds([50.8292, 0.4157], [50.8713, 0.5098]), opacity: 1, maxNativeZoom: 18, - hide: 1 + hide: 1, + className: 'layerNoclick' }, ob1944: { name: '1944 Observer Bomb Map', @@ -1034,7 +1047,8 @@ function setLeaflet() { bounds: L.latLngBounds([50.826, 0.411], [50.878, 0.508]), opacity: 1, maxNativeZoom: 16, - hide: 1 + hide: 1, + className: 'layerNoclick' }, os1930: { name: '1930 Ordnance Survey', @@ -1043,7 +1057,8 @@ function setLeaflet() { bounds: LBounds, opacity: 1, maxNativeZoom: 17, - offset: [-2, -2] + offset: [-2, -2], + className: 'layerNoclick' }, mc1925: { name: '1925 Maynards Chronicle', @@ -1052,7 +1067,8 @@ function setLeaflet() { bounds: L.latLngBounds([50.869, 0.417], [50.827, 0.509]), opacity: 1, maxNativeZoom: 17, - hide: 1 + hide: 1, + className: 'layerNoclick' }, os1909: { name: '1909 Ordnance Survey', @@ -1061,7 +1077,8 @@ function setLeaflet() { bounds: LBounds, opacity: 1, maxNativeZoom: 18, - offset: [2, 2] + offset: [2, 2], + className: 'layerNoclick' }, mt1902: { name: '1902 Motor Track', @@ -1071,7 +1088,8 @@ function setLeaflet() { opacity: 1, minNativeZoom: 12, maxNativeZoom: 19, - hide: 1 + hide: 1, + className: 'layerNoclick' }, os1899: { name: '1899 Ordnance Survey', @@ -1080,7 +1098,8 @@ function setLeaflet() { bounds: LBounds, opacity: 1, maxNativeZoom: 17, - offset: [7, 2] + offset: [7, 2], + className: 'layerNoclick' }, os1878: { name: '1878 Ordnance Survey', @@ -1089,7 +1108,8 @@ function setLeaflet() { bounds: LBounds, opacity: 1, maxNativeZoom: 16, - offset: [5, -7] + offset: [5, -7], + className: 'layerNoclick' }, os1873: { name: '1873 Ordnance Survey', @@ -1097,7 +1117,8 @@ function setLeaflet() { attribution: 'Crown Copyright Ordnance Survey', bounds: LBounds, opacity: 1, - maxNativeZoom: 17 + maxNativeZoom: 17, + className: 'layerNoclick' }, bt1839: { name: '1839 Bexhill Tithe', @@ -1105,7 +1126,8 @@ function setLeaflet() { attribution: 'ESRO TDE 141', bounds: L.latLngBounds([50.815, 0.351], [50.890, 0.536]), opacity: 1, - maxNativeZoom: 17 + maxNativeZoom: 17, + className: 'layerNoclick' }, mb1805: { name: '1805 Manor of Bexhill', @@ -1113,7 +1135,8 @@ function setLeaflet() { attribution: 'ESRO AMS 5819', bounds: L.latLngBounds([50.805, 0.376], [50.883, 0.511]), opacity: 1, - maxNativeZoom: 17 + maxNativeZoom: 17, + className: 'layerNoclick' }, yg1778: { name: '1778 Yeakell & Gardner', @@ -1121,13 +1144,15 @@ function setLeaflet() { attribution: 'University of Portsmouth', bounds: L.latLngBounds([50.810, 0.320], [50.890, 0.631]), opacity: 1, - maxNativeZoom: 15 + maxNativeZoom: 15, + className: 'layerNoclick' }, xmas: { name: 'Xmas Snow', url: 'tour/itemXmas/overlay-snow.gif', opacity: 0.75, - hide: 1 + hide: 1, + className: 'layerNoclick' } }; for (tile in tileOverlayLayer) { @@ -1267,12 +1292,12 @@ var fcnStLvl = L.easyButton({ states: [{ stateName: 'offStLvl', icon: 'fas fa-street-view', - title: 'Panoramic views', + title: 'Photosphere views', onClick: function() { tour('pano'); } }, { stateName: 'onStLvl', icon: 'fas fa-street-view', - title: 'Panoramic Views', + title: 'Photosphere views', onClick: function() { zoom_area(); if ($(window).width() >= 1300) $('.sidebar-close:visible').click(); @@ -1280,8 +1305,7 @@ var fcnStLvl = L.easyButton({ }] }).addTo(map); -// bookmarks bypass poi filter with oQuery -var oQuery = false; +// bookmarks L.easyButton({ id: 'btnBookm', states: [{ @@ -1290,7 +1314,6 @@ L.easyButton({ onClick: function() { if (window.localStorage.favourites) { clear_map('markers'); - oQuery = true; show_overpass_layer('(' + window.localStorage.favourites + ');'); } else setMsgStatus('fas fa-info-circle', 'Bookmarks', 'Add your favourite places by clicking within a popup.', 1); @@ -1299,7 +1322,7 @@ L.easyButton({ }).addTo(map); $('#btnBookm').bind('contextmenu', function() { if (window.localStorage && window.localStorage.favourites) { - var bmlink = encodeURI(window.location.origin + '?data=(' + window.localStorage.favourites +')'); + var bmlink = encodeURI((window.location.origin === 'null' ? window.location.pathname : window.location.origin) + '?data=(' + window.localStorage.favourites +')'); navigator.clipboard.writeText(bmlink).then( function() { setMsgStatus('fas fa-copy', 'Clipboard', 'Bookmarks permalink copied successfully.

' + bmlink + '

', 1); }, function() { setMsgStatus('fas fa-exclamation-triangle', 'Clipboard Error', 'Could not copy bookmark permalink.', 1); } @@ -1582,11 +1605,11 @@ $('#devTools').accordion({ animate: 150, collapsible: true, active: $('#inputDebug').is(':checked') ? 0 : false, - activate: function(event, ui) { if (ui.oldPanel[0]) $('#inputDebug').prop('checked', false).trigger('change'); } + activate: function(event, ui) { if (ui.oldPanel[0]) $('#inputOverpass, #inputAttic').val(''); } }); $('#inputDebug').change(function() { if ($(this).is(':checked')) { - setMsgStatus('fas fa-bug', 'Debug Mode Enabled', 'Check web console for output for details.', 1); + setMsgStatus('fas fa-bug', 'Debug Mode Enabled', 'Check web console for output for details.', 1); console.debug('%cDEBUG MODE%c\nAPI requests output to console, map bounds unlocked, custom queries available.', 'color: ' + $('html').css('--main-color') + ';font-weight:bold;'); $('#devTools').accordion({ collapsible: false }); $('.sidebar-tabs ul li [href="#settings"] .sidebar-notif').show(); @@ -1596,7 +1619,6 @@ $('#inputDebug').change(function() { else { $('#devTools').accordion({ collapsible: true }); $('.sidebar-tabs ul li [href="#settings"] .sidebar-notif').hide(); - $('#inputOverpass, #inputAttic').val(''); map.setMaxBounds(LBounds.pad(0.5)); map.options.minZoom = mapMinZoom; } @@ -1615,20 +1637,21 @@ $('#inputOverpass').keydown(function(e) { } }); function customQuery(q) { - if (!$('#inputDebug').is(':checked')) $('#inputDebug').prop('checked', true).trigger('change'); - if (q.charAt(0) === '[' && q.charAt(q.length-1) === ']') show_overpass_layer('(nw' + q + ';);', '', true); + spinner++; + if (q.charAt(0) === '[' && q.charAt(q.length-1) === ']') show_overpass_layer('(nwr' + q + ';);', '', true); else if (q.charAt(0) === '(' && q.charAt(q.length-1) === ')') show_overpass_layer(q + ';', '', true); - else setMsgStatus('fas fa-info-circle', 'Incorrect query', 'Enclose queries with [ ] for tags,
and ( ) for element ids.', 1); + else setMsgStatus('fas fa-info-circle', 'Incorrect query', 'Enclose queries with [ ] for tags,
and ( ) for element ids.', 1); } -$('#inputAttic').change(function() { if ($(this).val() && !$('#inputDebug').is(':checked')) $('#inputDebug').prop('checked', true).trigger('change'); }); -function exportQuery() { +$('#exportQuery').click(function() { // https://wiki.openstreetmap.org/wiki/Overpass_turbo/Development - if (queryBbox) window.open('https://overpass-turbo.eu/?Q=' + encodeURIComponent(queryBbox.replace('json]', 'xml]') + '(._;>;);out meta;') + '&C=' + mapCentre.join(';') + ';' + mapZoom + '&R', '_blank'); + if (queryBbox) window.open('https://overpass-turbo.eu/?Q=' + encodeURIComponent(queryBbox.replace('json]', 'xml]') + 'out geom qt;') + '&C=' + mapCentre.join(';') + ';' + mapZoom + '&R', '_blank'); else setMsgStatus('fas fa-info-circle', 'Nothing to export', 'Please select a query.', 1); -} -function downloadBB() { +}); +$('#downloadBB').click(function() { window.location = 'https://' + $('#inputOpServer').val() + '/api/map?bbox=' + [mapBounds.west, mapBounds.south, mapBounds.east, mapBounds.north].join(','); -} + $('#downloadBB').prop('disabled', true); + setTimeout(function() { $('#downloadBB').prop('disabled', false); }, 20000); +}); // clear layers function clear_map(layer) { @@ -1760,8 +1783,8 @@ function getTips(tip) { 'Get the latest Food Hygiene Ratings on every business in the area under Amenities.', 'Find your closest container and the materials it recycles under Amenities.', 'Have a look at our WW2 Incident Map under History .', - 'Some places have a panoramic view, click the icon to view it.', - 'Click the map control icon to see exclusive panoramic views of that street.', + 'Some places have a photosphere view, click the icon to view it.', + 'Click the map control icon to see exclusive photosphere views of that street.', 'View superimposed and colourised images of Bexhill past and present under Then and Now .', 'Notice something wrong or missing on the map? Right-click the area and Leave a note.', ' Over 1,100 photos, 20,000 buildings and 250 miles of roads/paths within 15 miles² have been mapped thus far!', @@ -1887,11 +1910,11 @@ function showEditFeed() { } // M = basemap, O = overlay, OP = overlay opacity, S = settings, T = tab, U = tour frame, G = image layer, P = grouped pois, I = single poi, W = walkpoints -// search = geocode query, data = overpass query, loc = location on +// QG = geocode query, QO = overpass query, QL = location query function permalinkSet() { // get clean url without parameters and hash var uri = new URL(window.location.href.split('?')[0].split('#')[0]); - var selectedPois = '', walkCoords = '', settingChk, overlayOpacity, c; + var selectedPois = '', walkCoords = '', setChk, overlayOpacity, c; var walkWayp = routingControl ? routingControl.getWaypoints() : undefined; if (actTab !== defTab) uri.searchParams.set('T', actTab); if (actBaseTileLayer !== defBaseTileLayer) uri.searchParams.set('M', actBaseTileLayer); @@ -1909,16 +1932,17 @@ function permalinkSet() { if (actTab === 'tour' && $('#tourList option').eq(0).val() !== $('#tourList option:selected').eq(0).val()) uri.searchParams.set('U', $('#tourList option:selected').val()); $('.poi-checkbox input:checked').each(function(i, element) { selectedPois += element.id + '-'; }); if (selectedPois) uri.searchParams.set('P', selectedPois.slice(0, -1)); - if ($('#settings input[data="uri"]:checkbox:checked').length) { - settingChk = ''; - for (c = 0; c < $('#settings input[data="uri"]:checkbox').length; c++) settingChk += $('#settings input[data="uri"]:checkbox').eq(c).is(':checked') ? '1' : '0'; - uri.searchParams.set('S', settingChk); + else if (queryBbox && queryBbox.indexOf($('#inputOverpass').val()) > 0) uri.searchParams.set('QO', $('#inputOverpass').val()); + if ($('#settings input[data-uri]:checkbox:checked').length) { + setChk = ''; + for (c = 0; c < $('#settings input[data-uri]:checkbox').length; c++) setChk += $('#settings input[data-uri]:checkbox').eq(c).is(':checked') ? '1' : '0'; + uri.searchParams.set('S', setChk); } if (noIframe && window.localStorage) { - window.localStorage.settingChk = ''; - for (c = 0; c < $('#settings input[data="cache"]:checkbox').length; c++) window.localStorage.settingChk += $('#settings input[data="cache"]:checkbox').eq(c).is(':checked') ? '1' : '0'; + window.localStorage.setChk = ''; + for (c = 0; c < $('#settings input[data-cache]:checkbox').length; c++) window.localStorage.setChk += $('#settings input[data-cache]:checkbox').eq(c).is(':checked') ? '1' : '0'; } - if (markerId && !actImgLayer) uri.searchParams.set('I', markerId); + if (markerId && !(rQuery && actImgLayer) && !$('#inputAttic').val()) uri.searchParams.set('I', markerId); window.history.replaceState(null, null, uri + window.location.hash); } function permalinkReturn() { @@ -1929,7 +1953,7 @@ function permalinkReturn() { window.history.replaceState(null, null, '?' + junkQ.slice(0, 2)[1]); } // check cookies for settings - if (noIframe && window.localStorage && window.localStorage.settingChk) for (c = 0; c < window.localStorage.settingChk.length; c++) $('#settings input[data="cache"]:checkbox').eq(c).prop('checked', parseInt(window.localStorage.settingChk.charAt(c), 10)); + if (noIframe && window.localStorage && window.localStorage.setChk) for (c = 0; c < window.localStorage.setChk.length; c++) $('#settings input[data-cache]:checkbox').eq(c).prop('checked', parseInt(window.localStorage.setChk.charAt(c), 10)); else if (noIframe && window.matchMedia("(prefers-color-scheme: dark)").matches) $('#inputDark').prop('checked', true); $('#inputDark').trigger('change'); if (!noPermalink) { @@ -1940,8 +1964,8 @@ function permalinkReturn() { if (uri.has('OP')) tileOverlayLayers[tileOverlayLayer[actOverlayLayer].name].setOpacity(uri.get('OP') / 100); } if (uri.has('S')) { - var settingChk = uri.get('S'); - for (c = 0; c < settingChk.length; c++) $('#settings input[data="uri"]:checkbox').eq(c).prop('checked', parseInt(settingChk.charAt(c), 10)); + var setChk = uri.get('S'); + for (c = 0; c < setChk.length; c++) $('#settings input[data-cache]:checkbox').eq(c).prop('checked', parseInt(setChk.charAt(c), 10)); if ($('#inputDebug').is(':checked')) $('#inputDebug').trigger('change'); } $('#inputUnit').trigger('change'); @@ -1974,17 +1998,19 @@ function permalinkReturn() { poi_changed(groupedPoi); }, 500); } + else if (uri.has('QO')) { + $('#inputOverpass').val(decodeURIComponent(uri.get('QO'))); + customQuery(decodeURIComponent(uri.get('QO'))); + if (uri.has('I')) markerId = uri.get('I'); + $('#devTools').accordion({ active: 0 }); + } else if (uri.has('I')) { var singlePoi = uri.get('I'); rQuery = true; setTimeout(function() { show_overpass_layer(elementType(singlePoi) + '(' + singlePoi.slice(1) + ');', singlePoi.toUpperCase()); }, 500); } - else if (uri.has('search')) searchAddr(decodeURIComponent(uri.get('search'))); - else if (uri.has('data')) { - $('#inputOverpass').val(decodeURIComponent(uri.get('data'))); - customQuery(decodeURIComponent(uri.get('data'))); - } - if (uri.has('loc')) setTimeout(function() { lc.start(); }, 500); + else if (uri.has('QG')) searchAddr(decodeURIComponent(uri.get('QG'))); + if (uri.has('QL')) setTimeout(function() { lc.start(); }, 500); } else { $('#inputUnit').trigger('change'); diff --git a/web/assets/js/tags-parsers.js b/web/assets/js/tags-parsers.js index 46a50ab..d445e2d 100644 --- a/web/assets/js/tags-parsers.js +++ b/web/assets/js/tags-parsers.js @@ -4,13 +4,13 @@ var spinner = 0, markerId, ohState, ctState, poiList = []; function parse_tags(element, titlePopup, poiParser) { var eName = element.tags['name:en'] || element.tags.name || undefined; if (eName && element.tags.ref) eName += ' (' + element.tags.ref + ')'; - var markerPopup = generic_header_parser((eName || element.tags.ref), titlePopup, element.tags['fhrs:id'], true); + var markerPopup = ''; // global callback parsers var address_parser = function(tags) { markerPopup = ''; if (tags['addr:street'] || tags['addr:place']) { var addr = ''; - if (tags.level <= 10) addr += '' + ['Ground', 'First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eighth', 'Ninth', 'Tenth'][tags.level] + '-floor, '; + if (tags.level > 0 && tags.level <= 10) addr += '' + ['Ground', 'First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eighth', 'Ninth', 'Tenth'][tags.level] + '-floor, '; if (tags['addr:unit']) addr += 'Unit ' + tags['addr:unit'] + ', '; if (tags['addr:flats']) addr += 'Flats ' + tags['addr:flats'] + ', '; if (tags['addr:housename'] && tags['addr:housename'] !== eName) addr += '' + tags['addr:housename'] + ', '; @@ -101,14 +101,18 @@ function parse_tags(element, titlePopup, poiParser) { markerPopup = ''; if (tags.disused === 'yes') tag += ''; if (tags.indoor === 'yes') tag += ''; - if (tags.wheelchair === 'yes') tag += ''; - else if (tags.wheelchair === 'limited') tag += ''; - else if (tags.wheelchair === 'no') tag += ''; - if (tags.elevator === 'yes') tag += ''; + if (tags.wheelchair === 'yes') tag += ''; + else if (tags.wheelchair === 'limited') tag += ''; + else if (tags.wheelchair === 'no') tag += ''; + if (tags.blind === 'yes') tag += ''; + else if (tags.blind === 'limited') tag += ''; + else if (tags.blind === 'no') tag += ''; + if (tags.elevator === 'yes') tag += ''; if (tags['hearing_impaired:induction_loop'] === 'yes') tag += ''; if (tags['tactile_writing:braille'] === 'yes') tag += ''; - if (tags.dog === 'yes') tag += ''; - else if (tags.dog === 'no') tag += ''; + if (tags.dog === 'yes') tag += ''; + else if (tags.dog === 'no') tag += ''; + else if (tags.dog === 'leashed') tag += ''; if (tags.internet_access === 'wlan') tag += ''; else if (tags.internet_access === 'terminal') tag += ''; if (tags['drinking_water:refill'] === 'yes') tag += ''; @@ -252,7 +256,7 @@ function parse_tags(element, titlePopup, poiParser) { dataType: 'xml', cache: true, success: function(xml) { - var street = $(xml).find('name').filter(function() { return $(this).text() === tags.name; }).closest('street'); + var street = $(xml).find('name').filter(function() { return ($(this).text() === tags.name || $(this).text() === tags.alt_name); }).closest('street'); var streetDate = $('date', street).text(); var streetDesc = $('desc', street).text(); if (streetDate && !tags.start_date) markerPopup += L.Util.template(tagTmpl, { tag: 'Start date', value: streetDate, iconName: 'fas fa-calendar-alt' }); @@ -266,6 +270,7 @@ function parse_tags(element, titlePopup, poiParser) { }, error: function() { if ($('#inputDebug').is(':checked')) console.debug('ERROR STREET-NAMES:', encodeURI(this.url)); } }); + if (tags.access === 'private') tag += 'private; '; if (tags.unadopted === 'yes') tag += 'unadopted; '; if (tags.surface) tag += tags.surface + '; '; if (tags.maxspeed) tag += tags.maxspeed + '; '; @@ -289,14 +294,14 @@ function parse_tags(element, titlePopup, poiParser) { var w = tags.wikipedia || tags['site:wikipedia']; tag += 'Wikipedia; '; } - if (tags['url:bexhillnature']) - tag += 'Bexhill Nature; '; + if (tags['ref:esher']) + tag += 'ESHER; '; if (tags['ref:publicsculpturesofsussex']) tag += 'Public Sculptures; '; if (tags['url:bexhillhistorytrail']) tag += 'History Trail; '; - if (tags['ref:thekeep']) - tag += 'The Keep; '; + if (tags['url:bexhillnature']) + tag += 'Bexhill Nature; '; if (tags['ref:edubase']) tag += 'URN ' + tags['ref:edubase'] + '; '; if (tags['ref:charity']) @@ -415,7 +420,7 @@ function parse_tags(element, titlePopup, poiParser) { ohState = oh.getState(); if (oh.getUnknown()) { ohState = (oh.getComment(new Date()) && oh.getNextChange() !== undefined) ? true : 'depends'; - strNextChange = comment; + strNextChange = '"' + comment + '"'; } else strNextChange = oh.prettifyValue(); if (oh.getNextChange()) { @@ -440,14 +445,14 @@ function parse_tags(element, titlePopup, poiParser) { if (comment) strNextChange += ' (' + comment + ')'; } // create readable table - var ohTable = drawTable(oh, new Date()), minWidth = ohTable ? '270px' : '100px'; - if (tags.opening_hours.indexOf('PH ') === -1) ohTable += '
Holiday periods may differ.
'; + var ohTable = drawTable(oh, new Date()); + if (tags.opening_hours.indexOf('PH ') === -1 && ohTable) ohTable += '
Holiday periods may differ.
'; // show tag and collapsible accordion if (ohState === true) openhrsState = 'Open until'; else if (ohState === false) openhrsState = 'Closed until'; else if (ohState === 'depends') openhrsState = 'Depends on'; if (openhrsState) { markerPopup = - '
' + + '
' + '' + '' + '' + openhrsState + ': ' + strNextChange + '' + @@ -472,7 +477,6 @@ function parse_tags(element, titlePopup, poiParser) { {callback: phone_parser}, {callback: website_parser}, {callback: contact_parser}, - {callback: generic_tag_parser, tag: 'access', label: 'Access', iconName: 'fas fa-sign-in-alt'}, {callback: generic_tag_parser, tag: 'description', label: 'Description', iconName: 'fas fa-clipboard'}, {callback: street_parser}, {callback: furtherreading_parser}, @@ -490,7 +494,15 @@ function parse_tags(element, titlePopup, poiParser) { } else markerPopup += data.callback(element.tags); } - return markerPopup; + // display all tags if poi has no callback + if (!markerPopup) { + if (titlePopup === '…') { + eName = element.type; + titlePopup = element.id; + } + $.each(element.tags, function(e) { markerPopup += generic_tag_parser(element.tags, e, e, 'fas fa-tag'); }); + } + return generic_header_parser((eName || element.tags.ref), titlePopup, element.tags['fhrs:id'], true) + markerPopup; } function callback(data) { @@ -505,31 +517,52 @@ function callback(data) { marker.facilities = $('.popup-facilities', $(markerPopup))[0] ? $('.popup-facilities', $(markerPopup))[0].innerHTML : ''; poiList.push(marker); }; - // https://github.com/jfirebaugh/leaflet-osm - // https://wiki.openstreetmap.org/wiki/API_v0.6 - var getOsmOutline = function(type, id) { - if (type !== 'node') { - // check if cached - if (eleCache['VEC' + type + id]) areaOutline.addLayer(new L.OSM.DataLayer(eleCache['VEC' + type + id])).addTo(map); - else $.ajax({ - url: 'https://www.openstreetmap.org/api/0.6/' + type + '/' + id + '/full', - dataType: 'xml', - success: function(xml) { - areaOutline.addLayer(new L.OSM.DataLayer(xml)).addTo(map); - eleCache['VEC' + type + id] = xml; - if ($('#inputDebug').is(':checked')) console.debug('OSM outline (' + type + id + '):', xml); - }, - error: function() { if ($('#inputDebug').is(':checked')) console.debug('ERROR OSM-OUTLINE:', encodeURI(this.url)); } - }); - } - }; // define poi elements for (var c in data.elements) { var e = data.elements[c]; // check tags exist if (!e.tags || e.id in this.instance._ids) continue; this.instance._ids[e.id] = true; - var pos = (e.type === 'node') ? new L.LatLng(e.lat, e.lon) : new L.LatLng(e.center.lat, e.center.lon); + // get geometry outlines + if (e.type !== 'node') { + var outline, mems = [], optsPolygon = { + color: $('html').css('--main-color'), + opacity: 0.5, + weight: 5, + fillColor: $('html').css('--main-color'), + fillOpacity: 0.3, + interactive: false + }, optsPolyline = { + color: $('html').css('--main-color'), + opacity: 0.5, + weight: 10, + interactive: false + }, optsPolylineThin = { + color: $('html').css('--main-color'), + opacity: 0.75, + weight: 3, + interactive: false + }; + if (e.type === 'relation') { + if (e.tags.type === 'multipolygon') { + e.members.forEach(x => mems.push(x.geometry)); + outline = L.polygon([mems], optsPolygon); + } + else { + e.members.forEach(x => { if (x.type === 'way') mems.push(x.geometry); }); + outline = L.polyline([mems], e.tags.type === 'boundary' ? optsPolylineThin : optsPolyline); + } + } + else if (e.geometry) { + // check if area + if (Object.values(e.geometry[0]).toString() === Object.values(e.geometry[e.geometry.length-1]).toString()) outline = L.polygon(e.geometry, optsPolygon); + // assume way + else outline = L.polyline(e.geometry, optsPolyline); + } + e.center = outline.getBounds().getCenter(); + areaOutline.addLayer(outline).addTo(map); + } + var pos = (e.type === 'node') ? new L.LatLng(e.lat, e.lon) : new L.LatLng(e.center.lat, e.center.lng); var eName = e.tags['name:en'] || e.tags.name || undefined; if (eName && e.tags.ref) eName += ' (' + e.tags.ref + ')'; name = type = iconName = ohState = ctState = undefined; @@ -544,6 +577,7 @@ function callback(data) { switch (e.tags.amenity) { case 'animal_boarding': type = 'animal_shelter'; break; case 'arts_centre': type = 'attraction'; iconName = 'theater'; break; + case 'bicycle_repair_station': type = 'bicycle'; break; case 'cafe': case 'fast_food': case 'restaurant': @@ -894,9 +928,9 @@ function callback(data) { else if (e.tags.ref) toolTip += e.tags.ref; else if (e.tags.operator) toolTip += e.tags.operator; toolTip += '
' + name + ''; - if (e.tags.image || e.tags.wikimedia_commons) toolTip += ' '; - if (e.tags['wikimedia_commons:video']) toolTip += ' '; - if (e.tags['wikimedia_commons:pano']) toolTip += ' '; + if (e.tags.image || e.tags.wikimedia_commons) toolTip += ' '; + if (e.tags['wikimedia_commons:video']) toolTip += ' '; + if (e.tags['wikimedia_commons:pano']) toolTip += ' '; // popup var customPOptions = { maxWidth: $(window).width() >= 512 ? imgSize + 30 : imgSize, @@ -905,55 +939,24 @@ function callback(data) { autoPanPaddingTopLeft: ($(window).width() < 1300) ? [20, 40] : [sidebar.width() + 50, 5], autoPanPaddingBottomRight: [5, 50] }; - // check if already defined poi - if (poi) { + markerPopup = (poi && poi.tagParser) ? poi.tagParser(e, name) : parse_tags(e, name, []); + // filters out closed group pois if 'currently open' is set + if (rQuery || !$('#inputOpen').is(':checked') || ($('#inputOpen').is(':checked') && ohState === true)) { // create tooltip / popup - markerPopup = poi.tagParser ? poi.tagParser(e, name) : parse_tags(e, name, []); customTOptions.className = (ohState !== undefined) ? 'openColor-list-' + ohState : 'openColor-list-' + ctState; - // show tooltip / popup marker.bindPopup(markerPopup, customPOptions); marker.bindTooltip(toolTip, customTOptions); + marker.addTo(this.instance); + // single poi if (rQuery) { if ($(window).width() < 768 && !$('.sidebar.collapsed').length) $('.sidebar-close:visible').click(); - marker.addTo(this.instance).openPopup(); - setPoiList(); + marker.openPopup(); markerId = marker._leaflet_id; - // get and display the area outline through openstreetmap api - getOsmOutline(e.type, e.id); - } - // marker from group poi and check 'currently open' setting - else if (!$('#inputOpen').is(':checked') || ($('#inputOpen').is(':checked') && ohState === true)) { - marker.addTo(this.instance); - setPoiList(); - getOsmOutline(e.type, e.id); - // open popup from permalink - if (marker._leaflet_id === markerId) marker.openPopup().stopBounce(); } - } - else if (rQuery) { - // single poi marker - markerPopup = parse_tags(e, name, []); - customTOptions.className = (ohState !== undefined) ? 'openColor-list-' + ohState : 'openColor-list-' + ctState; - marker.bindPopup(markerPopup, customPOptions); - marker.bindTooltip(toolTip, customTOptions); - if ($(window).width() < 768 && !$('.sidebar.collapsed').length) $('.sidebar-close:visible').click(); - marker.addTo(this.instance).openPopup(); + else if (marker._leaflet_id === markerId) marker.openPopup().stopBounce(); setPoiList(); - markerId = marker._leaflet_id; - getOsmOutline(e.type, e.id); - } - else if (oQuery || $('#inputDebug').is(':checked')) { - // custom overpass query - markerPopup = parse_tags(e, name, []); - customTOptions.className = (ohState !== undefined) ? 'openColor-list-' + ohState : 'openColor-list-' + ctState; - marker.bindPopup(markerPopup, customPOptions); - marker.bindTooltip(toolTip, customTOptions); - marker.addTo(this.instance); - setPoiList(); - getOsmOutline(e.type, e.id); } } - oQuery = false; noPermalink = true; // output list of pois in sidebar if (poiList.length) setTimeout(pushPoiList, 250); @@ -1022,7 +1025,9 @@ function pushPoiList(customSort) { } }); $('#poi-results h3').html( - poiList.length + ' result' + (poiList.length > 1 ? 's' : '') + ($('#inputOpen').is(':checked') ? ' (open)' : '') + + poiList.length + ' result' + (poiList.length > 1 ? 's' : '') + + ($('#inputAttic').val() ? ' from ' + date_parser($('#inputAttic').val(), 'short') : '') + + ($('#inputOpen').is(':checked') ? ' (open)' : '') + (customSort ? '' : ' ') ); if (poiList.length === maxOpResults) { @@ -1067,13 +1072,13 @@ function generic_img_parser(img, id, attrib) { img = 'https://commons.wikimedia.org/wiki/Special:Redirect/file?wptype=file&wpvalue=' + encodeURIComponent(img); imgTmpl = ''; } else imgTmpl = ''; return L.Util.template(imgTmpl, { id: id, url: url, maxheight: Math.round(imgSize / 1.5), img: img, attrib: attrib }); @@ -1095,13 +1100,7 @@ function artwork_parser(tags, titlePopup) { {callback: generic_tag_parser, tag: 'material', label: 'Material', iconName: 'fas fa-cube'} ]); } -function bikepark_parser(tags, titlePopup) { - return parse_tags(tags, titlePopup, [ - {callback: generic_tag_parser, tag: 'bicycle_parking', label: 'Type', iconName: 'fas fa-lock'}, - {callback: generic_tag_parser, tag: 'capacity', label: 'Capacity', iconName: 'fas fa-bicycle'}, - ]); -} -function bikeshop_parser(tags, titlePopup) { +function bike_parser(tags, titlePopup) { var bikeservices_parser = function(tags) { var markerPopup = '', tag = ''; for (var key in tags) if (key.indexOf('service:bicycle:') === 0 && (tags[key] === 'yes')) tag += key.split(':')[2] + ', '; @@ -1113,7 +1112,9 @@ function bikeshop_parser(tags, titlePopup) { return markerPopup; }; return parse_tags(tags, titlePopup, [ - {callback: bikeservices_parser} + {callback: bikeservices_parser}, + {callback: generic_tag_parser, tag: 'bicycle_parking', label: 'Type', iconName: 'fas fa-lock'}, + {callback: generic_tag_parser, tag: 'capacity', label: 'Capacity', iconName: 'fas fa-bicycle'}, ]); } function busstop_parser(tags, titlePopup) { @@ -1390,11 +1391,11 @@ function getWikiAttrib(id) { if (!result.query.pages[-1]) { var imgAttrib = result.query.pages[Object.keys(result.query.pages)[0]].imageinfo['0'].extmetadata; var imgArtist = $('' + imgAttrib.Artist.value + '').text(); - var imgDate = imgAttrib.DateTimeOriginal ? imgAttrib.DateTimeOriginal.value : imgAttrib.DateTime.value; - imgDate = $('' + (new Date(imgDate.split(' ')[0]).getFullYear() || imgDate) + '')[0].firstChild.data; - var imgAttribUrl = '' + imgDate + ' | © ' + imgArtist; - id.find($('.popup-imgAttrib')).html(imgAttribUrl + ' | ' + imgAttrib.LicenseShortName.value + ''); - $(id[0]).find('a').data('caption', 'Wikimedia Commons: ' + imgAttribUrl + ' | ' + imgAttrib.UsageTerms.value + ''); + var imgDate = new Date(imgAttrib.DateTimeOriginal ? imgAttrib.DateTimeOriginal.value : imgAttrib.DateTime.value).getFullYear(); + var imgAttribUrl = '' + + (imgDate ? imgDate + ' | ' : '') + '© ' + imgArtist + ' | '; + id.find($('.popup-imgAttrib')).html(imgAttribUrl + imgAttrib.LicenseShortName.value + ''); + $(id[0]).find('a').data('caption', 'Wikimedia Commons: ' + imgAttribUrl + imgAttrib.UsageTerms.value + ''); } else id.find($('.popup-imgAttrib')).html('Error: Attribution not found'); id.find($('.popup-imgAttrib')).addClass('attribd'); @@ -1409,16 +1410,16 @@ function show_img_controls(imgMax, img360, vid) { var ctrlTmpl = '
'; if (vid && vid.length) for (x = 0; x < vid.length; x++) { if (vid[x].indexOf('File:') === 0 && vid[x].indexOf('webm') === vid[x].length-4) ctrlTmpl += - '' + '' + ''; } if (img360 && img360.length) for (x = 0; x < img360.length; x++) { if (img360[x].indexOf('File:') === 0) ctrlTmpl += - '' + - '' + + '' + + '' + ''; } if (imgMax > 1) ctrlTmpl += diff --git a/web/assets/pannellum/config.json b/web/assets/pannellum/config.json new file mode 100644 index 0000000..83b51aa --- /dev/null +++ b/web/assets/pannellum/config.json @@ -0,0 +1,5 @@ +{ + "autoLoad": true, + "compass": false, + "autoRotate": -5 +} diff --git a/web/assets/pannellum/css/img/background.svg b/web/assets/pannellum/css/img/background.svg new file mode 100644 index 0000000..8926874 --- /dev/null +++ b/web/assets/pannellum/css/img/background.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/assets/pannellum/css/img/compass.svg b/web/assets/pannellum/css/img/compass.svg new file mode 100644 index 0000000..06428dd --- /dev/null +++ b/web/assets/pannellum/css/img/compass.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/assets/pannellum/css/img/grab.svg b/web/assets/pannellum/css/img/grab.svg new file mode 100644 index 0000000..6fc7468 --- /dev/null +++ b/web/assets/pannellum/css/img/grab.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/assets/pannellum/css/img/grabbing.svg b/web/assets/pannellum/css/img/grabbing.svg new file mode 100644 index 0000000..f7efc84 --- /dev/null +++ b/web/assets/pannellum/css/img/grabbing.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/assets/pannellum/css/img/sprites.svg b/web/assets/pannellum/css/img/sprites.svg new file mode 100644 index 0000000..13dcd0c --- /dev/null +++ b/web/assets/pannellum/css/img/sprites.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/web/assets/pannellum/css/pannellum.css b/web/assets/pannellum/css/pannellum.css new file mode 100644 index 0000000..4ce0db2 --- /dev/null +++ b/web/assets/pannellum/css/pannellum.css @@ -0,0 +1,479 @@ +.pnlm-container { + margin: 0; + padding: 0; + overflow: hidden; + position: relative; + cursor: default; + width: 100%; + height: 100%; + background: #353535 url('img/background.svg') repeat; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; + outline: 0; + line-height: 1.4; + contain: content; + direction: ltr; +} +.pnlm-container, .pnlm-load-button { + font-family: Helvetica, "Nimbus Sans L", "Liberation Sans", Arial, sans-serif; +} + +.pnlm-container * { + box-sizing: content-box; +} + +.pnlm-ui { + position: absolute; + width: 100%; + height: 100%; + z-index: 1; +} + +.pnlm-grab { + cursor: grab; + cursor: url('img/grab.svg') 12 8, default; +} + +.pnlm-grabbing { + cursor: grabbing; + cursor: url('img/grabbing.svg') 12 8, default; +} + +.pnlm-sprite { + background-image: url('img/sprites.svg'); +} + +.pnlm-container:-moz-full-screen { + height: 100% !important; + width: 100% !important; + position: static !important; +} +.pnlm-container:-webkit-full-screen { + height: 100% !important; + width: 100% !important; + position: static !important; +} +.pnlm-container:-ms-fullscreen { + height: 100% !important; + width: 100% !important; + position: static !important; +} +.pnlm-container:fullscreen { + height: 100% !important; + width: 100% !important; + position: static !important; +} + +.pnlm-render-container { + cursor: inherit; + + /* Fix display bug in Safari 7 */ + position: absolute; + height: 100%; + width: 100%; +} + +.pnlm-controls { + margin-top: 4px; + background-color: #fff; + border: 1px solid #999; + border-color: rgba(0,0,0,0.4); + border-radius: 3px; + cursor: pointer; + z-index: 2; + /* Fix Safari fullscreen bug */ + -webkit-transform: translateZ(9999px); + transform: translateZ(9999px); +} + +.pnlm-control:hover { + background-color: #f8f8f8; +} + +.pnlm-controls-container { + position: absolute; + top: 0; + left: 4px; + z-index: 1; +} + +.pnlm-zoom-controls { + width: 26px; + height: 52px; +} + +.pnlm-zoom-in { + width: 100%; + height: 50%; + position: absolute; + top: 0; + border-radius: 3px 3px 0 0; +} + +.pnlm-zoom-out { + width: 100%; + height: 50%; + position: absolute; + bottom: 0; + background-position: 0 -26px; + border-top: 1px solid #ddd; + border-top-color: rgba(0,0,0,0.10); + border-radius: 0 0 3px 3px; +} + +.pnlm-fullscreen-toggle-button, .pnlm-orientation-button, .pnlm-hot-spot-debug-indicator { + width: 26px; + height: 26px; +} + +.pnlm-hot-spot-debug-indicator { + position: absolute; + top: 50%; + left: 50%; + width: 26px; + height: 26px; + margin: -13px 0 0 -13px; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 13px; + display: none; +} + +.pnlm-orientation-button-inactive { + background-position: 0 -156px; +} + +.pnlm-orientation-button-active { + background-position: 0 -182px; +} + +.pnlm-fullscreen-toggle-button-inactive { + background-position: 0 -52px; +} + +.pnlm-fullscreen-toggle-button-active { + background-position: 0 -78px; +} + +.pnlm-panorama-info { + position: absolute; + bottom: 4px; + background-color: rgba(0,0,0,0.7); + border-radius: 0 3px 3px 0; + padding-right: 10px; + color: #fff; + text-align: left; + display: none; + z-index: 2; + /* Fix Safari fullscreen bug */ + -webkit-transform: translateZ(9999px); + transform: translateZ(9999px); +} + +.pnlm-title-box { + position: relative; + font-size: 20px; + display: table; + padding-left: 5px; + margin-bottom: 3px; +} + +.pnlm-author-box { + position: relative; + font-size: 12px; + display: table; + padding-left: 5px; +} + +.pnlm-load-box { + position: absolute; + top: 50%; + left: 50%; + width: 200px; + height: 150px; + margin: -75px 0 0 -100px; + background-color: rgba(0,0,0,0.7); + border-radius: 3px; + text-align: center; + font-size: 20px; + display: none; + color: #fff; +} + +.pnlm-load-box p { + margin: 20px 0; +} + +.pnlm-lbox { + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + margin: -10px 0 0 -10px; + display: none; +} + +.pnlm-loading { + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + animation-name: pnlm-mv; + -webkit-animation-name: pnlm-mv; + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + animation-timing-function: linear; + -webkit-animation-timing-function: linear; + height: 10px; + width: 10px; + background-color: #fff; + position: relative; +} + +@keyframes pnlm-mv { + from {left:0;top:0;} + 25% {left:10px;top:0;} + 50% {left:10px;top:10px;} + 75% {left:0;top:10px;} + to {left:0;top:0;} +} + +@-webkit-keyframes pnlm-mv { + from {left:0;top:0;} + 25% {left:10px;top:0;} + 50% {left:10px;top:10px;} + 75% {left:0;top:10px;} + to {left:0;top:0;} +} + +.pnlm-load-button { + position: absolute; + top: 50%; + left: 50%; + width: 200px; + height: 100px; + margin: -50px 0 0 -100px; + background-color: rgba(0,0,0,.7); + border-radius: 3px; + font-size: 20px; + color: #fff; + cursor: pointer; + display: inline-block; + border: none; + padding: 0; + line-height: 1.4; +} + +.pnlm-load-button:hover { + background-color: rgba(0,0,0,.8); +} + +.pnlm-load-button:focus { + outline: none; + box-shadow: 0px 0px 0px 1px #fff inset; +} + +.pnlm-load-button div { + display: table; + text-align: center; + width: 100%; +} + +.pnlm-load-button p { + display: table-cell; + vertical-align: middle; +} + +.pnlm-info-box { + font-size: 15px; + position: absolute; + top: 50%; + left: 50%; + width: 200px; + height: 150px; + margin: -75px 0 0 -100px; + background-color: #000; + border-radius: 3px; + display: table; + text-align: center; + color: #fff; + table-layout: fixed; + z-index: 1; +} + +.pnlm-info-box a, .pnlm-author-box a { + color: #fff; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.pnlm-info-box p { + display: table-cell; + vertical-align: middle; + padding: 0 5px 0 5px; +} + +.pnlm-error-msg { + display: none; +} + +.pnlm-interaction-msg { + display: none; + pointer-events: none; + background: rgba(0,0,0,0.7); + opacity: 1; + transition: opacity 0.3s ease-in-out; + width: 100%; + height: 100%; + margin: 0; + top: 0; + left: 0; +} + +.pnlm-outline { + border: 1px solid #fff; + border-radius: 3px; + padding: 0 2px; +} + +.pnlm-about-msg { + font-size: 11px; + line-height: 11px; + color: #fff; + padding: 5px 8px 5px 8px; + background: rgba(0,0,0,0.7); + border-radius: 3px; + position: absolute; + top: 50px; + left: 50px; + display: none; + opacity: 0; + -moz-transition: opacity .3s ease-in-out; + -webkit-transition: opacity .3s ease-in-out; + -o-transition: opacity .3s ease-in-out; + -ms-transition: opacity .3s ease-in-out; + transition: opacity .3s ease-in-out; + z-index: 1; +} + +.pnlm-about-msg a:link, .pnlm-about-msg a:visited { + color: #fff; +} + +.pnlm-about-msg a:hover, .pnlm-about-msg a:active { + color: #eee; +} + +.pnlm-hotspot-base { + position: absolute; + visibility: hidden; + cursor: default; + vertical-align: middle; + top: 0; + z-index: 0; +} +.pnlm-hotspot { + height: 26px; + width: 26px; + border-radius: 13px; +} +.pnlm-hotspot:hover { + background-color: rgba(255,255,255,0.2); +} +.pnlm-hotspot.pnlm-info { + background-position: 0 -104px; +} +.pnlm-hotspot.pnlm-scene { + background-position: 0 -130px; +} + +div.pnlm-tooltip span { + visibility: hidden; + position: absolute; + border-radius: 3px; + background-color: rgba(0,0,0,0.7); + color: #fff; + text-align: center; + max-width: 200px; + padding: 5px 10px; + margin-left: -220px; + cursor: default; +} +div.pnlm-tooltip:hover span{ + visibility: visible; +} +div.pnlm-tooltip:hover span:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-width: 10px; + border-style: solid; + border-color: rgba(0,0,0,0.7) transparent transparent transparent; + bottom: -20px; + left: -10px; + margin: 0 50%; +} + +.pnlm-compass { + position: absolute; + width: 50px; + height: 50px; + right: 4px; + bottom: 4px; + border-radius: 25px; + background-image: url('img/compass.svg'); + cursor: default; + display: none; +} + +.pnlm-world { + position: absolute; + left: 50%; + top: 50%; +} +.pnlm-face { + position: absolute; + -webkit-transform-origin: 0 0 0; + transform-origin: 0 0 0; +} + +.pnlm-dragfix, .pnlm-preview-img { + position: absolute; + height: 100%; + width: 100%; +} + +.pnlm-preview-img { + background-size: cover; + background-position: center; +} + +.pnlm-lbar { + width: 150px; + margin: 0 auto; + border: #fff 1px solid; + height: 6px; +} + +.pnlm-lbar-fill { + background: #fff; + height: 100%; + width: 0; +} + +.pnlm-lmsg { + font-size: 12px; +} + +.pnlm-fade-img { + position: absolute; + top: 0; + left: 0; +} + +.pnlm-pointer { + cursor: pointer; +} diff --git a/web/assets/pannellum/css/standalone.css b/web/assets/pannellum/css/standalone.css new file mode 100644 index 0000000..4c1bd8d --- /dev/null +++ b/web/assets/pannellum/css/standalone.css @@ -0,0 +1,13 @@ +html { + height: 100%; +} + +body { + margin: 0; + padding: 0; + overflow: hidden; + position: fixed; + cursor: default; + width: 100%; + height: 100%; +} diff --git a/web/assets/pannellum/js/jquery.md5.js b/web/assets/pannellum/js/jquery.md5.js new file mode 100644 index 0000000..c4a0579 --- /dev/null +++ b/web/assets/pannellum/js/jquery.md5.js @@ -0,0 +1,28 @@ +(function($){'use strict';function safe_add(x,y){var lsw=(x&0xFFFF)+(y&0xFFFF),msw=(x>>16)+(y>>16)+(lsw>>16);return(msw<<16)|(lsw&0xFFFF);} +function bit_rol(num,cnt){return(num<>>(32-cnt));} +function md5_cmn(q,a,b,x,s,t){return safe_add(bit_rol(safe_add(safe_add(a,q),safe_add(x,t)),s),b);} +function md5_ff(a,b,c,d,x,s,t){return md5_cmn((b&c)|((~b)&d),a,b,x,s,t);} +function md5_gg(a,b,c,d,x,s,t){return md5_cmn((b&d)|(c&(~d)),a,b,x,s,t);} +function md5_hh(a,b,c,d,x,s,t){return md5_cmn(b^c^d,a,b,x,s,t);} +function md5_ii(a,b,c,d,x,s,t){return md5_cmn(c^(b|(~d)),a,b,x,s,t);} +function binl_md5(x,len){x[len>>5]|=0x80<<((len)%32);x[(((len+64)>>>9)<<4)+14]=len;var i,olda,oldb,oldc,oldd,a=1732584193,b=-271733879,c=-1732584194,d=271733878;for(i=0;i>5]>>>(i%32))&0xFF);} +return output;} +function rstr2binl(input){var i,output=[];output[(input.length>>2)-1]=undefined;for(i=0;i>5]|=(input.charCodeAt(i/8)&0xFF)<<(i%32);} +return output;} +function rstr_md5(s){return binl2rstr(binl_md5(rstr2binl(s),s.length*8));} +function rstr_hmac_md5(key,data){var i,bkey=rstr2binl(key),ipad=[],opad=[],hash;ipad[15]=opad[15]=undefined;if(bkey.length>16){bkey=binl_md5(bkey,key.length*8);} +for(i=0;i<16;i+=1){ipad[i]=bkey[i]^0x36363636;opad[i]=bkey[i]^0x5C5C5C5C;} +hash=binl_md5(ipad.concat(rstr2binl(data)),512+data.length*8);return binl2rstr(binl_md5(opad.concat(hash),512+128));} +function rstr2hex(input){var hex_tab='0123456789abcdef',output='',x,i;for(i=0;i>>4)&0x0F)+ +hex_tab.charAt(x&0x0F);} +return output;} +function str2rstr_utf8(input){return unescape(encodeURIComponent(input));} +function raw_md5(s){return rstr_md5(str2rstr_utf8(s));} +function hex_md5(s){return rstr2hex(raw_md5(s));} +function raw_hmac_md5(k,d){return rstr_hmac_md5(str2rstr_utf8(k),str2rstr_utf8(d));} +function hex_hmac_md5(k,d){return rstr2hex(raw_hmac_md5(k,d));} +$.md5=function(string,key,raw){if(!key){if(!raw){return hex_md5(string);}else{return raw_md5(string);}} +if(!raw){return hex_hmac_md5(key,string);}else{return raw_hmac_md5(key,string);}};}(typeof jQuery==='function'?jQuery:this)); diff --git a/web/assets/pannellum/js/libpannellum.js b/web/assets/pannellum/js/libpannellum.js new file mode 100644 index 0000000..d241f99 --- /dev/null +++ b/web/assets/pannellum/js/libpannellum.js @@ -0,0 +1,1867 @@ +/* + * libpannellum - A WebGL and CSS 3D transform based Panorama Renderer + * Copyright (c) 2012-2021 Matthew Petroff + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +window.libpannellum = (function(window, document, undefined) { + +'use strict'; + +/** + * Creates a new panorama renderer. + * @constructor + * @param {HTMLElement} container - The container element for the renderer. + */ +function Renderer(container) { + var canvas = document.createElement('canvas'); + canvas.style.width = canvas.style.height = '100%'; + container.appendChild(canvas); + + var program, gl, vs, fs; + var previewProgram, previewVs, previewFs; + var fallbackImgSize; + var world; + var vtmps; + var pose; + var image, imageType, dynamic; + var texCoordBuffer, cubeVertBuf, cubeVertTexCoordBuf, cubeVertIndBuf; + var globalParams; + var sides = ['f', 'b', 'u', 'd', 'l', 'r']; + + /** + * Initialize renderer. + * @memberof Renderer + * @instance + * @param {Image|Array|Object} image - Input image; format varies based on + * `imageType`. For `equirectangular`, this is an image; for + * `cubemap`, this is an array of images for the cube faces in the + * order [+z, +x, -z, -x, +y, -y]; for `multires`, this is a + * configuration object. + * @param {string} imageType - The type of the image: `equirectangular`, + * `cubemap`, or `multires`. + * @param {boolean} dynamic - Whether or not the image is dynamic (e.g., video). + * @param {number} haov - Initial horizontal angle of view. + * @param {number} vaov - Initial vertical angle of view. + * @param {number} voffset - Initial vertical offset angle. + * @param {function} callback - Load callback function. + * @param {Object} [params] - Other configuration parameters (`horizonPitch`, `horizonRoll`, `backgroundColor`). + */ + this.init = function(_image, _imageType, _dynamic, haov, vaov, voffset, callback, params) { + // Default argument for image type + if (_imageType === undefined) + _imageType = 'equirectangular'; + + if (_imageType != 'equirectangular' && _imageType != 'cubemap' && + _imageType != 'multires') { + console.log('Error: invalid image type specified!'); + throw {type: 'config error'}; + } + + imageType = _imageType; + image = _image; + dynamic = _dynamic; + globalParams = params || {}; + + // Clear old data + if (program) { + if (vs) { + gl.detachShader(program, vs); + gl.deleteShader(vs); + } + if (fs) { + gl.detachShader(program, fs); + gl.deleteShader(fs); + } + gl.bindBuffer(gl.ARRAY_BUFFER, null); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); + if (program.texture) + gl.deleteTexture(program.texture); + if (program.nodeCache) + for (var i = 0; i < program.nodeCache.length; i++) + gl.deleteTexture(program.nodeCache[i].texture); + gl.deleteProgram(program); + program = undefined; + } + if (previewProgram) { + if (previewVs) { + gl.detachShader(previewProgram, previewVs); + gl.deleteShader(previewVs); + } + if (previewFs) { + gl.detachShader(previewProgram, previewFs); + gl.deleteShader(previewFs); + } + gl.deleteProgram(previewProgram); + previewProgram = undefined; + } + pose = undefined; + + var s; + var faceMissing = false; + var cubeImgWidth; + if (imageType == 'cubemap') { + for (s = 0; s < 6; s++) { + if (image[s].width > 0) { + if (cubeImgWidth === undefined) + cubeImgWidth = image[s].width; + if (cubeImgWidth != image[s].width) + console.log('Cube faces have inconsistent widths: ' + cubeImgWidth + ' vs. ' + image[s].width); + } else + faceMissing = true; + } + } + function fillMissingFaces(imgSize) { + if (faceMissing) { // Fill any missing fallback/cubemap faces with background + var nbytes = imgSize * imgSize * 4; // RGB, plus non-functional alpha + var imageArray = new Uint8ClampedArray(nbytes); + var rgb = params.backgroundColor ? params.backgroundColor : [0, 0, 0]; + rgb[0] *= 255; + rgb[1] *= 255; + rgb[2] *= 255; + // Maybe filling could be done faster, see e.g., https://stackoverflow.com/questions/1295584/most-efficient-way-to-create-a-zero-filled-javascript-array + for (i = 0; i < nbytes; i++) { + imageArray[i++] = rgb[0]; + imageArray[i++] = rgb[1]; + imageArray[i++] = rgb[2]; + } + var backgroundSquare = new ImageData(imageArray, imgSize, imgSize); + for (s = 0; s < 6; s++) { + if (image[s].width === 0) + image[s] = backgroundSquare; + } + } + } + + // This awful browser specific test exists because iOS 8/9 and IE 11 + // don't display non-power-of-two cubemap textures but also don't + // throw an error (tested on an iPhone 5c / iOS 8.1.3 / iOS 9.2 / + // iOS 10.3.1). + // Therefore, the WebGL context is never created for these browsers for + // NPOT cubemaps, and the CSS 3D transform fallback renderer is used + // instead. + if (!(imageType == 'cubemap' && + (cubeImgWidth & (cubeImgWidth - 1)) !== 0 && + (navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad).* os 8_/) || + navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad).* os 9_/) || + navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad).* os 10_/) || + navigator.userAgent.match(/Trident.*rv[ :]*11\./)))) { + // Enable WebGL on canvas + if (!gl) + gl = canvas.getContext('experimental-webgl', {alpha: false, depth: false}); + if (gl && gl.getError() == 1286) + handleWebGLError1286(); + } + + // If there is no WebGL, fall back to CSS 3D transform renderer. + // This will discard the image loaded so far and load the fallback image. + // While browser specific tests are usually frowned upon, the + // fallback viewer only really works with WebKit/Blink and IE 10/11 + // (it doesn't work properly in Firefox). + if (!gl && ((imageType == 'multires' && image.hasOwnProperty('fallbackPath')) || + imageType == 'cubemap') && + ('WebkitAppearance' in document.documentElement.style || + navigator.userAgent.match(/Trident.*rv[ :]*11\./) || + navigator.appVersion.indexOf('MSIE 10') !== -1)) { + // Remove old world if it exists + if (world) { + container.removeChild(world); + } + + // Initialize renderer + world = document.createElement('div'); + world.className = 'pnlm-world'; + + // Add images + var path; + if (image.basePath) { + path = image.basePath + image.fallbackPath; + } else { + path = image.fallbackPath; + } + var loaded = 0; + var onLoad = function() { + // Draw image on canvas + var faceCanvas = document.createElement('canvas'); + faceCanvas.className = 'pnlm-face pnlm-' + sides[this.side] + 'face'; + world.appendChild(faceCanvas); + var faceContext = faceCanvas.getContext('2d'); + faceCanvas.style.width = this.width + 4 + 'px'; + faceCanvas.style.height = this.height + 4 + 'px'; + faceCanvas.width = this.width + 4; + faceCanvas.height = this.height + 4; + faceContext.drawImage(this, 2, 2); + var imgData = faceContext.getImageData(0, 0, faceCanvas.width, faceCanvas.height); + var data = imgData.data; + + // Duplicate edge pixels + var i; + var j; + for (i = 2; i < faceCanvas.width - 2; i++) { + for (j = 0; j < 4; j++) { + data[(i + faceCanvas.width) * 4 + j] = data[(i + faceCanvas.width * 2) * 4 + j]; + data[(i + faceCanvas.width * (faceCanvas.height - 2)) * 4 + j] = data[(i + faceCanvas.width * (faceCanvas.height - 3)) * 4 + j]; + } + } + for (i = 2; i < faceCanvas.height - 2; i++) { + for (j = 0; j < 4; j++) { + data[(i * faceCanvas.width + 1) * 4 + j] = data[(i * faceCanvas.width + 2) * 4 + j]; + data[((i + 1) * faceCanvas.width - 2) * 4 + j] = data[((i + 1) * faceCanvas.width - 3) * 4 + j]; + } + } + for (j = 0; j < 4; j++) { + data[(faceCanvas.width + 1) * 4 + j] = data[(faceCanvas.width * 2 + 2) * 4 + j]; + data[(faceCanvas.width * 2 - 2) * 4 + j] = data[(faceCanvas.width * 3 - 3) * 4 + j]; + data[(faceCanvas.width * (faceCanvas.height - 2) + 1) * 4 + j] = data[(faceCanvas.width * (faceCanvas.height - 3) + 2) * 4 + j]; + data[(faceCanvas.width * (faceCanvas.height - 1) - 2) * 4 + j] = data[(faceCanvas.width * (faceCanvas.height - 2) - 3) * 4 + j]; + } + for (i = 1; i < faceCanvas.width - 1; i++) { + for (j = 0; j < 4; j++) { + data[i * 4 + j] = data[(i + faceCanvas.width) * 4 + j]; + data[(i + faceCanvas.width * (faceCanvas.height - 1)) * 4 + j] = data[(i + faceCanvas.width * (faceCanvas.height - 2)) * 4 + j]; + } + } + for (i = 1; i < faceCanvas.height - 1; i++) { + for (j = 0; j < 4; j++) { + data[(i * faceCanvas.width) * 4 + j] = data[(i * faceCanvas.width + 1) * 4 + j]; + data[((i + 1) * faceCanvas.width - 1) * 4 + j] = data[((i + 1) * faceCanvas.width - 2) * 4 + j]; + } + } + for (j = 0; j < 4; j++) { + data[j] = data[(faceCanvas.width + 1) * 4 + j]; + data[(faceCanvas.width - 1) * 4 + j] = data[(faceCanvas.width * 2 - 2) * 4 + j]; + data[(faceCanvas.width * (faceCanvas.height - 1)) * 4 + j] = data[(faceCanvas.width * (faceCanvas.height - 2) + 1) * 4 + j]; + data[(faceCanvas.width * faceCanvas.height - 1) * 4 + j] = data[(faceCanvas.width * (faceCanvas.height - 1) - 2) * 4 + j]; + } + + // Draw image width duplicated edge pixels on canvas + faceContext.putImageData(imgData, 0, 0); + + incLoaded.call(this); + }; + var incLoaded = function() { + if (this.width > 0) { + if (fallbackImgSize === undefined) + fallbackImgSize = this.width; + if (fallbackImgSize != this.width) + console.log('Fallback faces have inconsistent widths: ' + fallbackImgSize + ' vs. ' + this.width); + } else + faceMissing = true; + loaded++; + if (loaded == 6) { + fallbackImgSize = this.width; + container.appendChild(world); + callback(); + } + }; + faceMissing = false; + for (s = 0; s < 6; s++) { + var faceImg = new Image(); + faceImg.crossOrigin = globalParams.crossOrigin ? globalParams.crossOrigin : 'anonymous'; + faceImg.side = s; + faceImg.onload = onLoad; + faceImg.onerror = incLoaded; // ignore missing face to support partial fallback image + if (imageType == 'multires') { + faceImg.src = path.replace('%s', sides[s]) + '.' + image.extension; + } else { + faceImg.src = image[s].src; + } + } + fillMissingFaces(fallbackImgSize); + return; + } else if (!gl) { + console.log('Error: no WebGL support detected!'); + throw {type: 'no webgl'}; + } + if (imageType == 'cubemap') + fillMissingFaces(cubeImgWidth); + if (image.basePath) { + image.fullpath = image.basePath + image.path; + } else { + image.fullpath = image.path; + } + image.invTileResolution = 1 / image.tileResolution; + + var vertices = createCube(); + vtmps = []; + for (s = 0; s < 6; s++) { + vtmps[s] = vertices.slice(s * 12, s * 12 + 12); + vertices = createCube(); + } + + // Make sure image isn't too big + var maxWidth = 0; + if (imageType == 'equirectangular') { + maxWidth = gl.getParameter(gl.MAX_TEXTURE_SIZE); + if (Math.max(image.width / 2, image.height) > maxWidth) { + console.log('Error: The image is too big; it\'s ' + image.width + 'px wide, '+ + 'but this device\'s maximum supported size is ' + (maxWidth * 2) + 'px.'); + throw {type: 'webgl size error', width: image.width, maxWidth: maxWidth * 2}; + } + } else if (imageType == 'cubemap') { + if (cubeImgWidth > gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE)) { + console.log('Error: The image is too big; it\'s ' + cubeImgWidth + 'px wide, ' + + 'but this device\'s maximum supported size is ' + maxWidth + 'px.'); + throw {type: 'webgl size error', width: cubeImgWidth, maxWidth: maxWidth}; + } + } + + // Store horizon pitch and roll if applicable + if (params !== undefined) { + var horizonPitch = isNaN(params.horizonPitch) ? 0 : Number(params.horizonPitch), + horizonRoll = isNaN(params.horizonRoll) ? 0 : Number(params.horizonRoll); + if (horizonPitch !== 0 || horizonRoll !== 0) + pose = [horizonPitch, horizonRoll]; + } + + // Set 2d texture binding + var glBindType = gl.TEXTURE_2D; + + // Create viewport for entire canvas + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + + // Check precision support + if (gl.getShaderPrecisionFormat) { + var precision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT); + if (precision && precision.precision < 1) { + // `highp` precision not supported; https://stackoverflow.com/a/33308927 + fragEquiCubeBase = fragEquiCubeBase.replace('highp', 'mediump'); + } + } + + // Create vertex shader + vs = gl.createShader(gl.VERTEX_SHADER); + var vertexSrc = v; + if (imageType == 'multires') { + vertexSrc = vMulti; + } + gl.shaderSource(vs, vertexSrc); + gl.compileShader(vs); + + // Create fragment shader + fs = gl.createShader(gl.FRAGMENT_SHADER); + var fragmentSrc = fragEquirectangular; + if (imageType == 'cubemap') { + glBindType = gl.TEXTURE_CUBE_MAP; + fragmentSrc = fragCube; + } else if (imageType == 'multires') { + fragmentSrc = fragMulti; + } + gl.shaderSource(fs, fragmentSrc); + gl.compileShader(fs); + + // Link WebGL program + program = gl.createProgram(); + gl.attachShader(program, vs); + gl.attachShader(program, fs); + gl.linkProgram(program); + + // Log errors + if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) + console.log(gl.getShaderInfoLog(vs)); + if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) + console.log(gl.getShaderInfoLog(fs)); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) + console.log(gl.getProgramInfoLog(program)); + + // Use WebGL program + gl.useProgram(program); + + program.drawInProgress = false; + + // Set background clear color (does not apply to cubemap/fallback image) + var color = params.backgroundColor ? params.backgroundColor : [0, 0, 0]; + gl.clearColor(color[0], color[1], color[2], 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + + // Look up texture coordinates location + program.texCoordLocation = gl.getAttribLocation(program, 'a_texCoord'); + gl.enableVertexAttribArray(program.texCoordLocation); + + if (imageType != 'multires') { + // Provide texture coordinates for rectangle + if (!texCoordBuffer) + texCoordBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,1,1,1,1,-1,-1,1,1,-1,-1,-1]), gl.STATIC_DRAW); + gl.vertexAttribPointer(program.texCoordLocation, 2, gl.FLOAT, false, 0, 0); + + // Pass aspect ratio + program.aspectRatio = gl.getUniformLocation(program, 'u_aspectRatio'); + gl.uniform1f(program.aspectRatio, gl.drawingBufferWidth / gl.drawingBufferHeight); + + // Locate psi, theta, focal length, horizontal extent, vertical extent, and vertical offset + program.psi = gl.getUniformLocation(program, 'u_psi'); + program.theta = gl.getUniformLocation(program, 'u_theta'); + program.f = gl.getUniformLocation(program, 'u_f'); + program.h = gl.getUniformLocation(program, 'u_h'); + program.v = gl.getUniformLocation(program, 'u_v'); + program.vo = gl.getUniformLocation(program, 'u_vo'); + program.rot = gl.getUniformLocation(program, 'u_rot'); + + // Pass horizontal extent, vertical extent, and vertical offset + gl.uniform1f(program.h, haov / (Math.PI * 2.0)); + gl.uniform1f(program.v, vaov / Math.PI); + gl.uniform1f(program.vo, voffset / Math.PI * 2); + + // Set background color + if (imageType == 'equirectangular') { + program.backgroundColor = gl.getUniformLocation(program, 'u_backgroundColor'); + gl.uniform4fv(program.backgroundColor, color.concat([1])); + } + + // Create texture + program.texture = gl.createTexture(); + gl.bindTexture(glBindType, program.texture); + + // Upload images to texture depending on type + if (imageType == 'cubemap') { + // Load all six sides of the cube map + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image[1]); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image[3]); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image[4]); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image[5]); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image[0]); + gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image[2]); + } else { + if (image.width <= maxWidth) { + gl.uniform1i(gl.getUniformLocation(program, 'u_splitImage'), 0); + // Upload image to the texture + gl.texImage2D(glBindType, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); + } else { + // Image needs to be split into two parts due to texture size limits + gl.uniform1i(gl.getUniformLocation(program, 'u_splitImage'), 1); + + // Draw image on canvas + var cropCanvas = document.createElement('canvas'); + cropCanvas.width = image.width / 2; + cropCanvas.height = image.height; + var cropContext = cropCanvas.getContext('2d'); + cropContext.drawImage(image, 0, 0); + + // Upload first half of image to the texture + var cropImage = cropContext.getImageData(0, 0, image.width / 2, image.height); + gl.texImage2D(glBindType, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, cropImage); + + // Create and bind texture for second half of image + program.texture2 = gl.createTexture(); + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(glBindType, program.texture2); + gl.uniform1i(gl.getUniformLocation(program, 'u_image1'), 1); + + // Upload second half of image to the texture + cropContext.drawImage(image, -image.width / 2, 0); + cropImage = cropContext.getImageData(0, 0, image.width / 2, image.height); + gl.texImage2D(glBindType, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, cropImage); + + // Set parameters for rendering any size + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(glBindType, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(glBindType, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + + // Reactivate first texture unit + gl.activeTexture(gl.TEXTURE0); + } + } + + // Set parameters for rendering any size + if (imageType != "cubemap" && image.width <= maxWidth && + haov == 2 * Math.PI && (image.width & (image.width - 1)) === 0) + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_S, gl.REPEAT); // Only supported for power-of-two images in WebGL 1 + else + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(glBindType, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(glBindType, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + + } else { + // Look up vertex coordinates location + program.vertPosLocation = gl.getAttribLocation(program, 'a_vertCoord'); + gl.enableVertexAttribArray(program.vertPosLocation); + + // Create buffers + if (!cubeVertBuf) + cubeVertBuf = gl.createBuffer(); + if (!cubeVertTexCoordBuf) + cubeVertTexCoordBuf = gl.createBuffer(); + if (!cubeVertIndBuf) + cubeVertIndBuf = gl.createBuffer(); + + // Bind texture coordinate buffer and pass coordinates to WebGL + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertTexCoordBuf); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0,1,0,1,1,0,1]), gl.STATIC_DRAW); + gl.vertexAttribPointer(program.texCoordLocation, 2, gl.FLOAT, false, 0, 0); + + // Bind square index buffer and pass indices to WebGL + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertIndBuf); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2,0,2,3]), gl.STATIC_DRAW); + + // Bind vertex buffer + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertBuf); + gl.vertexAttribPointer(program.vertPosLocation, 3, gl.FLOAT, false, 0, 0); + + // Find uniforms + program.perspUniform = gl.getUniformLocation(program, 'u_perspMatrix'); + program.cubeUniform = gl.getUniformLocation(program, 'u_cubeMatrix'); + //program.colorUniform = gl.getUniformLocation(program, 'u_color'); + + program.level = -1; + + program.currentNodes = []; + program.nodeCache = []; + program.nodeCacheTimestamp = 0; + program.textureLoads = []; + + if (image.shtHash || image.equirectangularThumbnail) { + // Create vertex shader + previewVs = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(previewVs, v); + gl.compileShader(previewVs); + + // Create fragment shader + previewFs = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(previewFs, fragEquirectangular); + gl.compileShader(previewFs); + + // Link WebGL program + previewProgram = gl.createProgram(); + gl.attachShader(previewProgram, previewVs); + gl.attachShader(previewProgram, previewFs); + gl.linkProgram(previewProgram); + + // Log errors + if (!gl.getShaderParameter(previewVs, gl.COMPILE_STATUS)) + console.log(gl.getShaderInfoLog(previewVs)); + if (!gl.getShaderParameter(previewFs, gl.COMPILE_STATUS)) + console.log(gl.getShaderInfoLog(previewFs)); + if (!gl.getProgramParameter(previewProgram, gl.LINK_STATUS)) + console.log(gl.getProgramInfoLog(previewProgram)); + + // Use WebGL program + gl.useProgram(previewProgram); + + // Look up texture coordinates location + previewProgram.texCoordLocation = gl.getAttribLocation(previewProgram, 'a_texCoord'); + gl.enableVertexAttribArray(previewProgram.texCoordLocation); + + // Provide texture coordinates for rectangle + if (!texCoordBuffer) + texCoordBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,1,1,1,1,-1,-1,1,1,-1,-1,-1]), gl.STATIC_DRAW); + gl.vertexAttribPointer(previewProgram.texCoordLocation, 2, gl.FLOAT, false, 0, 0); + + // Pass aspect ratio + previewProgram.aspectRatio = gl.getUniformLocation(previewProgram, 'u_aspectRatio'); + gl.uniform1f(previewProgram.aspectRatio, gl.drawingBufferWidth / gl.drawingBufferHeight); + + // Locate psi, theta, focal length, horizontal extent, vertical extent, and vertical offset + previewProgram.psi = gl.getUniformLocation(previewProgram, 'u_psi'); + previewProgram.theta = gl.getUniformLocation(previewProgram, 'u_theta'); + previewProgram.f = gl.getUniformLocation(previewProgram, 'u_f'); + previewProgram.h = gl.getUniformLocation(previewProgram, 'u_h'); + previewProgram.v = gl.getUniformLocation(previewProgram, 'u_v'); + previewProgram.vo = gl.getUniformLocation(previewProgram, 'u_vo'); + previewProgram.rot = gl.getUniformLocation(previewProgram, 'u_rot'); + + // Pass horizontal extent + gl.uniform1f(previewProgram.h, 1.0); + + // Create texture + previewProgram.texture = gl.createTexture(); + gl.bindTexture(glBindType, previewProgram.texture); + + // Upload preview image to the texture + var previewImage, vext, voff; + var uploadPreview = function() { + gl.useProgram(previewProgram); + + gl.uniform1i(gl.getUniformLocation(previewProgram, 'u_splitImage'), 0); + gl.texImage2D(glBindType, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, previewImage); + + // Set parameters for rendering any size + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_S, gl.REPEAT); + gl.texParameteri(glBindType, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(glBindType, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(glBindType, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + + // Pass vertical extent and vertical offset + gl.uniform1f(previewProgram.v, vext); + gl.uniform1f(previewProgram.vo, voff); + + gl.useProgram(program); + }; + if (image.shtHash) { + previewImage = shtDecodeImage(image.shtHash); + // Vertical extent & offset are chosen to set the top and bottom + // pixels in the preview image to be exactly at the zenith and + // nadir, respectively, which matches the pre-calculated Ylm + vext = (2 + 1 / 31) / 2; + voff = 1 - (2 + 1 / 31) / 2; + uploadPreview(); + } + if (image.equirectangularThumbnail) { + if (typeof image.equirectangularThumbnail === 'string') { + if (image.equirectangularThumbnail.slice(0, 5) == 'data:') { + // Data URI + previewImage = new Image(); + previewImage.onload = function() { + vext = 1; + voff = 0; + uploadPreview(); + }; + previewImage.src = image.equirectangularThumbnail; + } else { + console.log('Error: thumbnail string is not a data URI!'); + throw {type: 'config error'}; + } + } else { + // ImageData / ImageBitmap / HTMLImageElement / HTMLCanvasElement + previewImage = image.equirectangularThumbnail; + vext = 1; + voff = 0; + uploadPreview(); + } + } + + // Reactivate main program + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertBuf); + gl.vertexAttribPointer(program.vertPosLocation, 3, gl.FLOAT, false, 0, 0); + gl.useProgram(program); + } + } + + // Check if there was an error + var err = gl.getError(); + if (err !== 0) { + console.log('Error: Something went wrong with WebGL!', err); + throw {type: 'webgl error'}; + } + + callback(); + }; + + /** + * Destroy renderer. + * @memberof Renderer + * @instance + */ + this.destroy = function() { + if (container !== undefined) { + if (canvas !== undefined && container.contains(canvas)) { + container.removeChild(canvas); + } + if (world !== undefined && container.contains(world)) { + container.removeChild(world); + } + } + if (gl) { + // The spec says this is only supposed to simulate losing the WebGL + // context, but in practice it tends to actually free the memory. + var extension = gl.getExtension('WEBGL_lose_context'); + if (extension) + extension.loseContext(); + } + }; + + /** + * Resize renderer (call after resizing container). + * @memberof Renderer + * @instance + */ + this.resize = function() { + var pixelRatio = window.devicePixelRatio || 1; + canvas.width = canvas.clientWidth * pixelRatio; + canvas.height = canvas.clientHeight * pixelRatio; + if (gl) { + if (gl.getError() == 1286) + handleWebGLError1286(); + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + if (imageType != 'multires') { + gl.uniform1f(program.aspectRatio, canvas.clientWidth / canvas.clientHeight); + } else if (image.shtHash) { + gl.useProgram(previewProgram); + gl.uniform1f(previewProgram.aspectRatio, canvas.clientWidth / canvas.clientHeight); + gl.useProgram(program); + } + } + }; + // Initialize canvas size + this.resize(); + + /** + * Set renderer horizon pitch and roll. + * @memberof Renderer + * @instance + * @param {number} horizonPitch - Pitch of horizon (in radians). + * @param {number} horizonRoll - Roll of horizon (in radians). + */ + this.setPose = function(horizonPitch, horizonRoll) { + horizonPitch = isNaN(horizonPitch) ? 0 : Number(horizonPitch); + horizonRoll = isNaN(horizonRoll) ? 0 : Number(horizonRoll); + if (horizonPitch === 0 && horizonRoll === 0) + pose = undefined; + else + pose = [horizonPitch, horizonRoll]; + }; + + /** + * Render new view of panorama. + * @memberof Renderer + * @instance + * @param {number} pitch - Pitch to render at (in radians). + * @param {number} yaw - Yaw to render at (in radians). + * @param {number} hfov - Horizontal field of view to render with (in radians). + * @param {Object} [params] - Extra configuration parameters. + * @param {number} [params.roll] - Camera roll (in radians). + * @param {string} [params.returnImage] - Return rendered image? If specified, should be 'ImageBitmap', 'image/jpeg', or 'image/png'. + */ + this.render = function(pitch, yaw, hfov, params) { + var focal, i, s, roll = 0; + if (params === undefined) + params = {}; + if (params.roll) + roll = params.roll; + + // Apply pitch and roll transformation if applicable + if (pose !== undefined) { + var horizonPitch = pose[0], + horizonRoll = pose[1]; + + // Calculate new pitch and yaw + var orig_pitch = pitch, + orig_yaw = yaw, + x = Math.cos(horizonRoll) * Math.sin(pitch) * Math.sin(horizonPitch) + + Math.cos(pitch) * (Math.cos(horizonPitch) * Math.cos(yaw) + + Math.sin(horizonRoll) * Math.sin(horizonPitch) * Math.sin(yaw)), + y = -Math.sin(pitch) * Math.sin(horizonRoll) + + Math.cos(pitch) * Math.cos(horizonRoll) * Math.sin(yaw), + z = Math.cos(horizonRoll) * Math.cos(horizonPitch) * Math.sin(pitch) + + Math.cos(pitch) * (-Math.cos(yaw) * Math.sin(horizonPitch) + + Math.cos(horizonPitch) * Math.sin(horizonRoll) * Math.sin(yaw)); + pitch = Math.asin(Math.max(Math.min(z, 1), -1)); + yaw = Math.atan2(y, x); + + // Calculate roll + var v = [Math.cos(orig_pitch) * (Math.sin(horizonRoll) * Math.sin(horizonPitch) * Math.cos(orig_yaw) - + Math.cos(horizonPitch) * Math.sin(orig_yaw)), + Math.cos(orig_pitch) * Math.cos(horizonRoll) * Math.cos(orig_yaw), + Math.cos(orig_pitch) * (Math.cos(horizonPitch) * Math.sin(horizonRoll) * Math.cos(orig_yaw) + + Math.sin(orig_yaw) * Math.sin(horizonPitch))], + w = [-Math.cos(pitch) * Math.sin(yaw), Math.cos(pitch) * Math.cos(yaw)]; + var roll_adj = Math.acos(Math.max(Math.min((v[0]*w[0] + v[1]*w[1]) / + (Math.sqrt(v[0]*v[0]+v[1]*v[1]+v[2]*v[2]) * + Math.sqrt(w[0]*w[0]+w[1]*w[1])), 1), -1)); + if (v[2] < 0) + roll_adj = 2 * Math.PI - roll_adj; + roll += roll_adj; + } + + // If no WebGL + if (!gl && (imageType == 'multires' || imageType == 'cubemap')) { + // Determine face transforms + s = fallbackImgSize / 2; + + var transforms = { + f: 'translate3d(-' + (s + 2) + 'px, -' + (s + 2) + 'px, -' + s + 'px)', + b: 'translate3d(' + (s + 2) + 'px, -' + (s + 2) + 'px, ' + s + 'px) rotateX(180deg) rotateZ(180deg)', + u: 'translate3d(-' + (s + 2) + 'px, -' + s + 'px, ' + (s + 2) + 'px) rotateX(270deg)', + d: 'translate3d(-' + (s + 2) + 'px, ' + s + 'px, -' + (s + 2) + 'px) rotateX(90deg)', + l: 'translate3d(-' + s + 'px, -' + (s + 2) + 'px, ' + (s + 2) + 'px) rotateX(180deg) rotateY(90deg) rotateZ(180deg)', + r: 'translate3d(' + s + 'px, -' + (s + 2) + 'px, -' + (s + 2) + 'px) rotateY(270deg)' + }; + focal = 1 / Math.tan(hfov / 2); + var zoom = focal * canvas.clientWidth / 2 + 'px'; + var transform = 'perspective(' + zoom + ') translateZ(' + zoom + ') rotateX(' + pitch + 'rad) rotateY(' + yaw + 'rad) '; + + // Apply face transforms + var faces = Object.keys(transforms); + for (i = 0; i < 6; i++) { + var face = world.querySelector('.pnlm-' + faces[i] + 'face'); + if (!face) + continue; // ignore missing face to support partial cubemap/fallback image + face.style.webkitTransform = transform + transforms[faces[i]]; + face.style.transform = transform + transforms[faces[i]]; + } + return; + } + + if (imageType != 'multires') { + // Calculate focal length from vertical field of view + var vfov = 2 * Math.atan(Math.tan(hfov * 0.5) / (gl.drawingBufferWidth / gl.drawingBufferHeight)); + focal = 1 / Math.tan(vfov * 0.5); + + // Pass psi, theta, roll, and focal length + gl.uniform1f(program.psi, yaw); + gl.uniform1f(program.theta, pitch); + gl.uniform1f(program.rot, roll); + gl.uniform1f(program.f, focal); + + if (dynamic === true) { + // Update texture if dynamic + if (imageType == 'equirectangular') { + gl.bindTexture(gl.TEXTURE_2D, program.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); + } + } + + // Draw using current buffer + gl.drawArrays(gl.TRIANGLES, 0, 6); + + } else { + // Draw SHT hash preview, if needed + var isPreview = (typeof image.shtHash !== 'undefined') || + (typeof image.equirectangularThumbnail !== 'undefined'); + var drawPreview = isPreview; + if (isPreview && program.currentNodes.length >= 6) { + drawPreview = false; + for (i = 0; i < 6; i++) { + if (!program.currentNodes[i].textureLoaded) { + drawPreview = true; + break; + } + } + } + if (drawPreview) { + gl.useProgram(previewProgram); + gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); + gl.vertexAttribPointer(previewProgram.texCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.bindTexture(gl.TEXTURE_2D, previewProgram.texture); + + // Calculate focal length from vertical field of view + vfov = 2 * Math.atan(Math.tan(hfov * 0.5) / (gl.drawingBufferWidth / gl.drawingBufferHeight)); + focal = 1 / Math.tan(vfov * 0.5); + + // Pass psi, theta, roll, and focal length + gl.uniform1f(previewProgram.psi, yaw); + gl.uniform1f(previewProgram.theta, pitch); + gl.uniform1f(previewProgram.rot, roll); + gl.uniform1f(previewProgram.f, focal); + + // Draw using current buffer + gl.drawArrays(gl.TRIANGLES, 0, 6); + + gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertBuf); + gl.vertexAttribPointer(program.vertPosLocation, 3, gl.FLOAT, false, 0, 0); + gl.useProgram(program); + } + + // Create perspective matrix + var perspMatrix = makePersp(hfov, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0); + + // Find correct zoom level + checkZoom(hfov); + + // Create rotation matrix + var matrix = identityMatrix3(); + matrix = rotateMatrix(matrix, -roll, 'z'); + matrix = rotateMatrix(matrix, -pitch, 'x'); + matrix = rotateMatrix(matrix, yaw, 'y'); + matrix = makeMatrix4(matrix); + + // Set matrix uniforms + gl.uniformMatrix4fv(program.perspUniform, false, transposeMatrix4(perspMatrix)); + gl.uniformMatrix4fv(program.cubeUniform, false, transposeMatrix4(matrix)); + + // Find current nodes + var rotPersp = rotatePersp(perspMatrix, matrix); + program.nodeCache.sort(multiresNodeSort); + if (program.nodeCache.length > 200 && + program.nodeCache.length > program.currentNodes.length + 50) { + // Remove older nodes from cache + var removed = program.nodeCache.splice(200, program.nodeCache.length - 200); + for (var j = 0; j < removed.length; j++) { + // Explicitly delete textures + gl.deleteTexture(removed[j].texture); + } + } + program.currentNodes = []; + + for (s = 0; s < 6; s++) { + var ntmp = new MultiresNode(vtmps[s], sides[s], 1, 0, 0, image.fullpath, null); + testMultiresNode(rotPersp, ntmp, pitch, yaw, hfov); + } + + program.currentNodes.sort(multiresNodeRenderSort); + + // Unqueue any pending requests for nodes that are no longer visible + for (i = pendingTextureRequests.length - 1; i >= 0; i--) { + if (program.currentNodes.indexOf(pendingTextureRequests[i].node) === -1) { + pendingTextureRequests[i].node.textureLoad = false; + pendingTextureRequests.splice(i, 1); + } + } + + // Allow one request to be pending, so that we can create a texture buffer for that in advance of loading actually beginning + if (pendingTextureRequests.length === 0) { + for (i = 0; i < program.currentNodes.length; i++) { + var node = program.currentNodes[i]; + if (!node.texture && !node.textureLoad) { + node.textureLoad = true; + + setTimeout(processNextTile, 0, node); + + // Only process one tile per frame to improve responsiveness + break; + } + } + } + + // Process one pending image tile + // This is synchronized to rendering to avoid dropping frames due + // to texture loading happening at an inopportune time. + if (program.textureLoads.length > 0) + program.textureLoads.shift()(); + + // Draw tiles + multiresDraw(!isPreview); + } + + if (params.returnImage !== undefined) { + if (window.createImageBitmap && params.returnImage == 'ImageBitmap') { + return createImageBitmap(canvas); + } else { + if (params.returnImage.toString().indexOf('image/') === 0) + return canvas.toDataURL(params.returnImage); + else + return canvas.toDataURL('image/png'); // Old default + } + } + }; + + /** + * Check if images are loading. + * @memberof Renderer + * @instance + * @returns {boolean} Whether or not images are loading. + */ + this.isLoading = function() { + if (gl && imageType == 'multires') { + for ( var i = 0; i < program.currentNodes.length; i++ ) { + if (!program.currentNodes[i].textureLoaded) { + return true; + } + } + } + return false; + }; + + /** + * Retrieve renderer's canvas. + * @memberof Renderer + * @instance + * @returns {HTMLElement} Renderer's canvas. + */ + this.getCanvas = function() { + return canvas; + }; + + /** + * Sorting method for multires nodes. + * @private + * @param {MultiresNode} a - First node. + * @param {MultiresNode} b - Second node. + * @returns {number} Base tiles first, then higher timestamp first. + */ + function multiresNodeSort(a, b) { + // Base tiles are always first + if (a.level == 1 && b.level != 1) { + return -1; + } + if (b. level == 1 && a.level != 1) { + return 1; + } + + // Higher timestamp first + return b.timestamp - a.timestamp; + } + + /** + * Sorting method for multires node rendering. + * @private + * @param {MultiresNode} a - First node. + * @param {MultiresNode} b - Second node. + * @returns {number} Lower zoom levels first, then closest to center first. + */ + function multiresNodeRenderSort(a, b) { + // Lower zoom levels first + if (a.level != b.level) { + return a.level - b.level; + } + + // Lower distance from center first + return a.diff - b.diff; + } + + /** + * Draws multires nodes. + * @param {bool} clear - Whether or not to clear canvas. + * @private + */ + function multiresDraw(clear) { + if (!program.drawInProgress) { + program.drawInProgress = true; + // Clear canvas + if (clear) + gl.clear(gl.COLOR_BUFFER_BIT); + // Determine tiles that need to be drawn + var node_paths = {}; + for (var i = 0; i < program.currentNodes.length; i++) + node_paths[program.currentNodes[i].parentPath] |= !(program.currentNodes[i].textureLoaded > 1); // !(undefined > 1) != (undefined <= 1) + // Draw tiles + for (i = 0; i < program.currentNodes.length; i++) { + if (program.currentNodes[i].textureLoaded > 1 && + node_paths[program.currentNodes[i].path] !== 0) { // 1 or undefined + //var color = program.currentNodes[i].color; + //gl.uniform4f(program.colorUniform, color[0], color[1], color[2], 1.0); + + // Pass vertices to WebGL + gl.bufferData(gl.ARRAY_BUFFER, program.currentNodes[i].vertices, gl.STATIC_DRAW); + + // Bind texture and draw tile + gl.bindTexture(gl.TEXTURE_2D, program.currentNodes[i].texture); // Bind program.currentNodes[i].texture to TEXTURE0 + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); + } + } + program.drawInProgress = false; + } + } + + /** + * Creates new multires node. + * @constructor + * @private + * @param {Float32Array} vertices - Node's vertices. + * @param {string} side - Node's cube face. + * @param {number} level - Node's zoom level. + * @param {number} x - Node's x position. + * @param {number} y - Node's y position. + * @param {string} path - Node's path. + * @param {string} parentPath - Node parent's path. + */ + function MultiresNode(vertices, side, level, x, y, path, parentPath) { + this.vertices = vertices; + this.side = side; + this.level = level; + this.x = x; + this.y = y; + this.path = path.replace('%s',side).replace('%l0',level-1).replace('%l',level).replace('%x',x).replace('%y',y); + this.parentPath = parentPath; + } + + /** + * Test if multires node is visible. If it is, add it to current nodes, + * load its texture, and load appropriate child nodes. + * @private + * @param {number[]} rotPersp - Rotated perspective matrix. + * @param {MultiresNode} node - Multires node to check. + * @param {number} pitch - Pitch to check at. + * @param {number} yaw - Yaw to check at. + * @param {number} hfov - Horizontal field of view to check at. + */ + function testMultiresNode(rotPersp, node, pitch, yaw, hfov) { + if (checkSquareInView(rotPersp, node.vertices)) { + // Calculate central angle between center of view and center of tile + var v = node.vertices; + var x = v[0] + v[3] + v[6] + v[ 9]; + var y = v[1] + v[4] + v[7] + v[10]; + var z = v[2] + v[5] + v[8] + v[11]; + var r = Math.sqrt(x*x + y*y + z*z); + var theta = Math.asin(z / r); + var phi = Math.atan2(y, x); + var ydiff = phi - yaw; + ydiff += (ydiff > Math.PI) ? -2 * Math.PI : (ydiff < -Math.PI) ? 2 * Math.PI : 0; + ydiff = Math.abs(ydiff); + node.diff = Math.acos(Math.sin(pitch) * Math.sin(theta) + Math.cos(pitch) * Math.cos(theta) * Math.cos(ydiff)); + + // Add node to current nodes and load texture if needed + var inCurrent = false; + for (var k = 0; k < program.nodeCache.length; k++) { + if (program.nodeCache[k].path == node.path) { + inCurrent = true; + program.nodeCache[k].timestamp = program.nodeCacheTimestamp++; + program.nodeCache[k].diff = node.diff; + program.currentNodes.push(program.nodeCache[k]); + break; + } + } + if (!inCurrent) { + //node.color = [Math.random(), Math.random(), Math.random()]; + node.timestamp = program.nodeCacheTimestamp++; + program.currentNodes.push(node); + program.nodeCache.push(node); + } + + // TODO: Test error + // Create child nodes + if (node.level < program.level) { + var cubeSize = image.cubeResolution * Math.pow(2, node.level - image.maxLevel); + var numTiles = Math.ceil(cubeSize * image.invTileResolution) - 1; + var doubleTileSize = cubeSize % image.tileResolution * 2; + var lastTileSize = (cubeSize * 2) % image.tileResolution; + if (lastTileSize === 0) { + lastTileSize = image.tileResolution; + } + if (doubleTileSize === 0) { + doubleTileSize = image.tileResolution * 2; + } + var f = 0.5; + if (node.x == numTiles || node.y == numTiles) { + f = 1.0 - image.tileResolution / (image.tileResolution + lastTileSize); + } + var i = 1.0 - f; + var children = []; + var vtmp, ntmp; + var f1 = f, f2 = f, f3 = f, i1 = i, i2 = i, i3 = i; + // Handle non-symmetric tiles + if (lastTileSize < image.tileResolution) { + if (node.x == numTiles && node.y != numTiles) { + f2 = 0.5; + i2 = 0.5; + if (node.side == 'd' || node.side == 'u') { + f3 = 0.5; + i3 = 0.5; + } + } else if (node.x != numTiles && node.y == numTiles) { + f1 = 0.5; + i1 = 0.5; + if (node.side == 'l' || node.side == 'r') { + f3 = 0.5; + i3 = 0.5; + } + } + } + // Handle small tiles that have fewer than four children + if (doubleTileSize <= image.tileResolution) { + if (node.x == numTiles) { + f1 = 0; + i1 = 1; + if (node.side == 'l' || node.side == 'r') { + f3 = 0; + i3 = 1; + } + } + if (node.y == numTiles) { + f2 = 0; + i2 = 1; + if (node.side == 'd' || node.side == 'u') { + f3 = 0; + i3 = 1; + } + } + } + + vtmp = new Float32Array([ + v[0], v[1], v[2], + v[0]*f1+v[3]*i1, v[1]*f+v[4]*i, v[2]*f3+v[5]*i3, + v[0]*f1+v[6]*i1, v[1]*f2+v[7]*i2, v[2]*f3+v[8]*i3, + v[0]*f+v[9]*i, v[1]*f2+v[10]*i2, v[2]*f3+v[11]*i3 + ]); + ntmp = new MultiresNode(vtmp, node.side, node.level + 1, node.x * 2, node.y * 2, image.fullpath, node.path); + children.push(ntmp); + if (!(node.x == numTiles && doubleTileSize <= image.tileResolution)) { + vtmp = new Float32Array([ + v[0]*f1+v[3]*i1, v[1]*f+v[4]*i, v[2]*f3+v[5]*i3, + v[3], v[4], v[5], + v[3]*f+v[6]*i, v[4]*f2+v[7]*i2, v[5]*f3+v[8]*i3, + v[0]*f1+v[6]*i1, v[1]*f2+v[7]*i2, v[2]*f3+v[8]*i3 + ]); + ntmp = new MultiresNode(vtmp, node.side, node.level + 1, node.x * 2 + 1, node.y * 2, image.fullpath, node.path); + children.push(ntmp); + } + if (!(node.x == numTiles && doubleTileSize <= image.tileResolution) && + !(node.y == numTiles && doubleTileSize <= image.tileResolution)) { + vtmp = new Float32Array([ + v[0]*f1+v[6]*i1, v[1]*f2+v[7]*i2, v[2]*f3+v[8]*i3, + v[3]*f+v[6]*i, v[4]*f2+v[7]*i2, v[5]*f3+v[8]*i3, + v[6], v[7], v[8], + v[9]*f1+v[6]*i1, v[10]*f+v[7]*i, v[11]*f3+v[8]*i3 + ]); + ntmp = new MultiresNode(vtmp, node.side, node.level + 1, node.x * 2 + 1, node.y * 2 + 1, image.fullpath, node.path); + children.push(ntmp); + } + if (!(node.y == numTiles && doubleTileSize <= image.tileResolution)) { + vtmp = new Float32Array([ + v[0]*f+v[9]*i, v[1]*f2+v[10]*i2, v[2]*f3+v[11]*i3, + v[0]*f1+v[6]*i1, v[1]*f2+v[7]*i2, v[2]*f3+v[8]*i3, + v[9]*f1+v[6]*i1, v[10]*f+v[7]*i, v[11]*f3+v[8]*i3, + v[9], v[10], v[11] + ]); + ntmp = new MultiresNode(vtmp, node.side, node.level + 1, node.x * 2, node.y * 2 + 1, image.fullpath, node.path); + children.push(ntmp); + } + for (var j = 0; j < children.length; j++) { + testMultiresNode(rotPersp, children[j], pitch, yaw, hfov); + } + } + } + } + + /** + * Creates cube vertex array. + * @private + * @returns {Float32Array} Cube vertex array. + */ + function createCube() { + return new Float32Array([ + -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, // Front face + 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // Back face + -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, // Up face + -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, // Down face + -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // Left face + 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1 // Right face + ]); + } + + /** + * Creates 3x3 identity matrix. + * @private + * @returns {Float32Array} Identity matrix. + */ + function identityMatrix3() { + return new Float32Array([ + 1, 0, 0, + 0, 1, 0, + 0, 0, 1 + ]); + } + + /** + * Rotates a 3x3 matrix. + * @private + * @param {number[]} m - Matrix to rotate. + * @param {number[]} angle - Angle to rotate by in radians. + * @param {string} axis - Axis to rotate about (`x`, `y`, or `z`). + * @returns {Float32Array} Rotated matrix. + */ + function rotateMatrix(m, angle, axis) { + var s = Math.sin(angle); + var c = Math.cos(angle); + if (axis == 'x') { + return new Float32Array([ + m[0], c*m[1] + s*m[2], c*m[2] - s*m[1], + m[3], c*m[4] + s*m[5], c*m[5] - s*m[4], + m[6], c*m[7] + s*m[8], c*m[8] - s*m[7] + ]); + } + if (axis == 'y') { + return new Float32Array([ + c*m[0] - s*m[2], m[1], c*m[2] + s*m[0], + c*m[3] - s*m[5], m[4], c*m[5] + s*m[3], + c*m[6] - s*m[8], m[7], c*m[8] + s*m[6] + ]); + } + if (axis == 'z') { + return new Float32Array([ + c*m[0] + s*m[1], c*m[1] - s*m[0], m[2], + c*m[3] + s*m[4], c*m[4] - s*m[3], m[5], + c*m[6] + s*m[7], c*m[7] - s*m[6], m[8] + ]); + } + } + + /** + * Turns a 3x3 matrix into a 4x4 matrix. + * @private + * @param {number[]} m - Input matrix. + * @returns {Float32Array} Expanded matrix. + */ + function makeMatrix4(m) { + return new Float32Array([ + m[0], m[1], m[2], 0, + m[3], m[4], m[5], 0, + m[6], m[7], m[8], 0, + 0, 0, 0, 1 + ]); + } + + /** + * Transposes a 4x4 matrix. + * @private + * @param {number[]} m - Input matrix. + * @returns {Float32Array} Transposed matrix. + */ + function transposeMatrix4(m) { + return new Float32Array([ + m[ 0], m[ 4], m[ 8], m[12], + m[ 1], m[ 5], m[ 9], m[13], + m[ 2], m[ 6], m[10], m[14], + m[ 3], m[ 7], m[11], m[15] + ]); + } + + /** + * Creates a perspective matrix. + * @private + * @param {number} hfov - Desired horizontal field of view. + * @param {number} aspect - Desired aspect ratio. + * @param {number} znear - Near distance. + * @param {number} zfar - Far distance. + * @returns {Float32Array} Generated perspective matrix. + */ + function makePersp(hfov, aspect, znear, zfar) { + var fovy = 2 * Math.atan(Math.tan(hfov/2) * gl.drawingBufferHeight / gl.drawingBufferWidth); + var f = 1 / Math.tan(fovy/2); + return new Float32Array([ + f/aspect, 0, 0, 0, + 0, f, 0, 0, + 0, 0, (zfar+znear)/(znear-zfar), (2*zfar*znear)/(znear-zfar), + 0, 0, -1, 0 + ]); + } + + /** + * Processes a loaded texture image into a WebGL texture. + * @private + * @param {Image} img - Input image. + * @param {WebGLTexture} tex - Texture to bind image to. + */ + function processLoadedTexture(img, tex) { + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindTexture(gl.TEXTURE_2D, null); + } + + var pendingTextureRequests = []; + + // Based on http://blog.tojicode.com/2012/03/javascript-memory-optimization-and.html + var loadTexture = (function() { + var cacheTop = 4; // Maximum number of concurrent loads + var textureImageCache = {}; + var crossOrigin; + function TextureImageLoader() { + var self = this; + this.texture = this.callback = null; + this.image = new Image(); + this.image.crossOrigin = crossOrigin ? crossOrigin : 'anonymous'; + var loadFn = function() { + program.textureLoads.push(function() { + if (self.image.width > 0 && self.image.height > 0) { // Ignore missing tile to support partial image + processLoadedTexture(self.image, self.texture); + self.callback(self.texture, true); + } else { + self.callback(self.texture, false); + } + releaseTextureImageLoader(self); + }); + }; + this.image.addEventListener('load', loadFn); + this.image.addEventListener('error', loadFn); // Ignore missing tile file to support partial image; otherwise retry loop causes high CPU load + } + + TextureImageLoader.prototype.loadTexture = function(src, texture, callback) { + this.texture = texture; + this.callback = callback; + this.image.src = src; + }; + + function PendingTextureRequest(node, src, texture, callback) { + this.node = node; + this.src = src; + this.texture = texture; + this.callback = callback; + } + + function releaseTextureImageLoader(til) { + if (pendingTextureRequests.length) { + var req = pendingTextureRequests.shift(); + til.loadTexture(req.src, req.texture, req.callback); + } else + textureImageCache[cacheTop++] = til; + } + + for (var i = 0; i < cacheTop; i++) + textureImageCache[i] = new TextureImageLoader(); + + return function(node, src, callback, _crossOrigin) { + crossOrigin = _crossOrigin; + var texture = gl.createTexture(); + if (cacheTop) + textureImageCache[--cacheTop].loadTexture(src, texture, callback); + else + pendingTextureRequests.push(new PendingTextureRequest(node, src, texture, callback)); + return texture; + }; + })(); + + /** + * Loads image and creates texture for a multires node / tile. + * @private + * @param {MultiresNode} node - Input node. + */ + function processNextTileFallback(node) { + loadTexture(node, node.path + '.' + image.extension, function(texture, loaded) { + node.texture = texture; + node.textureLoaded = loaded ? 2 : 1; + }, globalParams.crossOrigin); + } + + // Load images in separate thread when possible + var processNextTile; + if (window.Worker && window.createImageBitmap) { + function workerFunc() { + self.onmessage = function(e) { + var path = e.data[0], + crossOrigin = e.data[1]; + fetch(path, { + mode: 'cors', + credentials: crossOrigin == 'use-credentials' ? 'include' : 'same-origin' + }).then(function(response) { + return response.blob(); + }).then(function(blob) { + return createImageBitmap(blob); + }).then(function(bitmap) { + postMessage([path, true, bitmap], [bitmap]); + }).catch(function() { + postMessage([path, false]); + }); + }; + } + var workerFuncBlob = new Blob(['(' + workerFunc.toString() + ')()'], {type: 'application/javascript'}), + worker = new Worker(URL.createObjectURL(workerFuncBlob)), + texturesLoading = {}; + worker.onmessage = function(e) { + var path = e.data[0], + success = e.data[1], + bitmap = e.data[2]; + program.textureLoads.push(function() { + var texture, + loaded = false; + if (success) { // Ignore missing tile to support partial image + texture = gl.createTexture(); + processLoadedTexture(bitmap, texture); + loaded = true; + } + var node = texturesLoading[path]; + delete texturesLoading[path]; + if (node !== undefined) { + node.texture = texture; + node.textureLoaded = loaded ? 2 : 1; + } + }); + }; + processNextTile = function(node) { + // Since web worker is created from a Blob, we need the absolute URL + var path = new URL(node.path + '.' + image.extension, window.location).href; + texturesLoading[path] = node; + worker.postMessage([path, globalParams.crossOrigin]); + }; + } else { + processNextTile = processNextTileFallback; + } + + /** + * Finds and applies optimal multires zoom level. + * @private + * @param {number} hfov - Horizontal field of view to check at. + */ + function checkZoom(hfov) { + // Find optimal level + var newLevel = 1; + while ( newLevel < image.maxLevel && + gl.drawingBufferWidth > image.tileResolution * + Math.pow(2, newLevel - 1) * Math.tan(hfov / 2) * 0.707 ) { + newLevel++; + } + + // Apply change + program.level = newLevel; + } + + /** + * Rotates perspective matrix. + * @private + * @param {number[]} p - Perspective matrix. + * @param {number[]} r - Rotation matrix. + * @returns {Float32Array} Rotated matrix. + */ + function rotatePersp(p, r) { + return new Float32Array([ + p[ 0]*r[0], p[ 0]*r[1], p[ 0]*r[ 2], 0, + p[ 5]*r[4], p[ 5]*r[5], p[ 5]*r[ 6], 0, + p[10]*r[8], p[10]*r[9], p[10]*r[10], p[11], + -r[8], -r[9], -r[10], 0 + ]); + } + + /** + * Applies rotated perspective matrix to a 3-vector + * (last element is inverted). + * @private + * @param {number[]} m - Rotated perspective matrix. + * @param {number[]} v - Input 3-vector. + * @returns {Float32Array} Resulting 4-vector. + */ + function applyRotPerspToVec(m, v) { + return new Float32Array([ + m[ 0]*v[0] + m[ 1]*v[1] + m[ 2]*v[2], + m[ 4]*v[0] + m[ 5]*v[1] + m[ 6]*v[2], + m[11] + m[ 8]*v[0] + m[ 9]*v[1] + m[10]*v[2], + 1/(m[12]*v[0] + m[13]*v[1] + m[14]*v[2]) + ]); + } + + /** + * Checks if a vertex is visible. + * @private + * @param {number[]} m - Rotated perspective matrix. + * @param {number[]} v - Input vertex. + * @returns {number} 1 or -1 if the vertex is or is not visible, + * respectively. + */ + function checkInView(m, v) { + var vpp = applyRotPerspToVec(m, v); + var winX = vpp[0]*vpp[3]; + var winY = vpp[1]*vpp[3]; + var winZ = vpp[2]*vpp[3]; + var ret = [0, 0, 0]; + + if ( winX < -1 ) + ret[0] = -1; + if ( winX > 1 ) + ret[0] = 1; + if ( winY < -1 ) + ret[1] = -1; + if ( winY > 1 ) + ret[1] = 1; + if ( winZ < -1 || winZ > 1 ) + ret[2] = 1; + return ret; + } + + /** + * Checks if a square (tile) is visible. + * @private + * @param {number[]} m - Rotated perspective matrix. + * @param {number[]} v - Square's vertex array. + * @returns {boolean} Whether or not the square is visible. + */ + function checkSquareInView(m, v) { + var check1 = checkInView(m, v.slice(0, 3)); + var check2 = checkInView(m, v.slice(3, 6)); + var check3 = checkInView(m, v.slice(6, 9)); + var check4 = checkInView(m, v.slice(9, 12)); + var testX = check1[0] + check2[0] + check3[0] + check4[0]; + if ( testX == -4 || testX == 4 ) + return false; + var testY = check1[1] + check2[1] + check3[1] + check4[1]; + if ( testY == -4 || testY == 4 ) + return false; + var testZ = check1[2] + check2[2] + check3[2] + check4[2]; + return testZ != 4; + + + } + + /** + * On iOS (iPhone 5c, iOS 10.3), this WebGL error occurs when the canvas is + * too big. Unfortunately, there's no way to test for this beforehand, so we + * reduce the canvas size if this error is thrown. + * @private + */ + function handleWebGLError1286() { + console.log('Reducing canvas size due to error 1286!'); + canvas.width = Math.round(canvas.width / 2); + canvas.height = Math.round(canvas.height / 2); + } + + // Data for rendering SHT hashes + var shtB83chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~', + shtYlmStr = 'Bf[ff4fff|ffff0fffffBo@Ri5xag{Jmdf2+WiefCs@Ll7+Vi]Btag6' + + '[NmdgCv=Ho9;Qk;7zWiF_GsahDy:ErE?Mn$5+SkS_AyWiD#-CuJ[Iqp6;Nnx?7*SlE$' + + '*BxR@FtPA?Jq+%7:NnF*zAzn?CwIG@Ft-Y9?IrG+vA%w:AzGR?Cx*IF@EuI,nA+$*9%' + + 'Gu:A#xCR?ByJ-VB-*wA+J**9*ZBv:9%L.QD.*aB.O.v9-MF+$8,O:MG:*OD;a:UB:IO' + + ':n9:Q:KJ;#IG=u-KE=Hs:MC?T:IO=wEL?#%FJ@K**FI@Y;HV=pDU?*sCS@S.uCR[m;H' + + 'p=VDq?*SCs@s.QCt[r:Iw=OEz?#IF$@#*HF%@u:K$;KI+=uEK-=*sCM:?w:M+:HO.;a' + + 'CU;:%OCn?:z.Q..Ha;.ODv?-yFG$@,$-V;-Hw=+JH*?*lBP:?%%,n=+J*?%GQ:=#NCt' + + '?;y++v=%O:=zGt?:xHI,@-u,*z=zX?:wI+@,tEY??%r-$*;xt@,tP=?$qG%[:xn.#-:' + + 'u$[%qp];xnN?[*sl.y:-r-?yn$^+sks_=yoi:v=*o?;uk;[zoi,_+skh:s@zl[+pi];' + + 'tkg][xmhg;o@ti^xkg{$mhf|+oigf;f[ff_fff|ffff~fffff', + shtMaxYlm = 3.317, + shtYlm = []; + + /** + * Decodes an integer-encoded float. + * @private + * @param {number} i - Integer-encoded float. + * @param {number} maxVal - Maximum value of decoded float. + * @returns {number} Decoded float. + */ + function shtDecodeFloat(i, maxVal) { + return Math.pow(((Math.abs(i) - maxVal) / maxVal), 2) * (i - maxVal > 0 ? 1 : -1); + } + + /** + * Decodes encoded spherical harmonic transform coefficients. + * @private + * @param {number} val - Encoded coefficient. + * @param {number} maxVal - Maximum value of coefficients. + * @returns {number[]} Decoded coefficients; one per color channel [r, g, b]. + */ + function shtDecodeCoeff(val, maxVal) { + var quantR = Math.floor(val / (19 * 19)), + quantG = Math.floor(val / 19) % 19, + quantB = val % 19; + var r = shtDecodeFloat(quantR, 9) * maxVal, + g = shtDecodeFloat(quantG, 9) * maxVal, + b = shtDecodeFloat(quantB, 9) * maxVal; + return [r, g, b]; + } + + /** + * Decodes base83-encoded string to integers. + * @private + * @param {string} b83str - Encoded string. + * @param {number} length - Number of characters per integer. + * @returns {number[]} Decoded integers. + */ + function shtB83decode(b83str, length) { + var cnt = Math.floor(b83str.length / length), + vals = []; + for (var i = 0; i < cnt; i++) { + var val = 0; + for (var j = 0; j < length; j++) { + val = val * 83 + shtB83chars.indexOf(b83str[i * length + j]); + } + vals.push(val); + } + return vals; + } + + /** + * Renders pixel from spherical harmonic transform coefficients. + * @private + * @param {number[]} flm - Real spherical harmonic transform coefficients. + * @param {number[]} Ylm - 4pi-normalized spherical harmonics evaluated for ell, m, and lat. + * @param {number} lon - Longitude (radians). + * @returns {number} Pixel value. + */ + function shtFlm2pixel(flm, Ylm, lon) { + var lmax = Math.floor(Math.sqrt(flm.length)) - 1; + + // Precalculate sine and cosine coefficients + var cosm = Array(lmax + 1), + sinm = Array(lmax + 1); + sinm[0] = 0; + cosm[0] = 1; + sinm[1] = Math.sin(lon); + cosm[1] = Math.cos(lon); + for (var m = 2; m <= lmax; m++) { + sinm[m] = 2 * sinm[m - 1] * cosm[1] - sinm[m - 2]; + cosm[m] = 2 * cosm[m - 1] * cosm[1] - cosm[m - 2]; + } + + // Calculate value at pixel + var expand = 0, + cosidx = 0; + for (var i = 1; i <= lmax + 1; i++) + cosidx += i; + for (var l = lmax; l >= 0; l--) { + var idx = Math.floor((l + 1) * l / 2); + // First coefficient is 1 when using 4pi normalization + expand += idx !== 0 ? flm[idx] * Ylm[idx - 1] : flm[idx]; + for (m = 1; m <= l; m++) + expand += (flm[++idx] * cosm[m] + flm[idx + cosidx - l - 1] * sinm[m]) * Ylm[idx - 1]; + } + + return Math.round(expand); + } + + /** + * Renders image from spherical harmonic transform (SHT) hash. + * @private + * @param {string} shtHash - SHT hash. + * @returns {ImageData} Rendered image. + */ + function shtDecodeImage(shtHash) { + if (shtYlm.length < 1) { + // Decode Ylm if they're not already decoded + var ylmLen = shtYlmStr.length / 32; + for (var i = 0; i < 32; i++) { + shtYlm.push([]); + for (var j = 0; j < ylmLen; j++) + shtYlm[i].push(shtDecodeFloat(shtB83decode(shtYlmStr[i * ylmLen + j], 1), 41) * shtMaxYlm); + } + } + + // Decode SHT hash + var lmax = shtB83decode(shtHash[0], 1)[0], + maxVal = (shtDecodeFloat(shtB83decode(shtHash[1], 1), 41) + 1) * 255 / 2, + vals = shtB83decode(shtHash.slice(2), 2), + rVals = [], + gVals = [], + bVals = []; + for (var i = 0; i < vals.length; i++) { + var v = shtDecodeCoeff(vals[i], maxVal); + rVals.push(v[0]); + gVals.push(v[1]); + bVals.push(v[2]); + } + + // Render image + var lonStep = 0.03125 * Math.PI; + var img = []; + for (var i = 31; i >= 0; i--) { + for (var j = 0; j < 64; j++) { + img.push(shtFlm2pixel(rVals, shtYlm[i], (j + 0.5) * lonStep)); + img.push(shtFlm2pixel(gVals, shtYlm[i], (j + 0.5) * lonStep)); + img.push(shtFlm2pixel(bVals, shtYlm[i], (j + 0.5) * lonStep)); + img.push(255); + } + } + return new ImageData(new Uint8ClampedArray(img), 64, 32); + } +} + +// Vertex shader for equirectangular and cube +var v = [ +'attribute vec2 a_texCoord;', +'varying vec2 v_texCoord;', + +'void main() {', + // Set position + 'gl_Position = vec4(a_texCoord, 0.0, 1.0);', + + // Pass the coordinates to the fragment shader + 'v_texCoord = a_texCoord;', +'}' +].join(''); + +// Vertex shader for multires +var vMulti = [ +'attribute vec3 a_vertCoord;', +'attribute vec2 a_texCoord;', + +'uniform mat4 u_cubeMatrix;', +'uniform mat4 u_perspMatrix;', + +'varying mediump vec2 v_texCoord;', + +'void main(void) {', + // Set position + 'gl_Position = u_perspMatrix * u_cubeMatrix * vec4(a_vertCoord, 1.0);', + + // Pass the coordinates to the fragment shader + 'v_texCoord = a_texCoord;', +'}' +].join(''); + +// Fragment shader +var fragEquiCubeBase = [ +'precision highp float;', // mediump looks bad on some mobile devices + +'uniform float u_aspectRatio;', +'uniform float u_psi;', +'uniform float u_theta;', +'uniform float u_f;', +'uniform float u_h;', +'uniform float u_v;', +'uniform float u_vo;', +'uniform float u_rot;', + +'const float PI = 3.14159265358979323846264;', + +// Texture +'uniform sampler2D u_image0;', +'uniform sampler2D u_image1;', +'uniform bool u_splitImage;', +'uniform samplerCube u_imageCube;', + +// Coordinates passed in from vertex shader +'varying vec2 v_texCoord;', + +// Background color (display for partial panoramas) +'uniform vec4 u_backgroundColor;', + +'void main() {', + // Map canvas/camera to sphere + 'float x = v_texCoord.x * u_aspectRatio;', + 'float y = v_texCoord.y;', + 'float sinrot = sin(u_rot);', + 'float cosrot = cos(u_rot);', + 'float rot_x = x * cosrot - y * sinrot;', + 'float rot_y = x * sinrot + y * cosrot;', + 'float sintheta = sin(u_theta);', + 'float costheta = cos(u_theta);', + 'float a = u_f * costheta - rot_y * sintheta;', + 'float root = sqrt(rot_x * rot_x + a * a);', + 'float lambda = atan(rot_x / root, a / root) + u_psi;', + 'float phi = atan((rot_y * costheta + u_f * sintheta) / root);', +].join('\n'); + +// Fragment shader +var fragCube = fragEquiCubeBase + [ + // Look up color from texture + 'float cosphi = cos(phi);', + 'gl_FragColor = textureCube(u_imageCube, vec3(cosphi*sin(lambda), sin(phi), cosphi*cos(lambda)));', +'}' +].join('\n'); + +// Fragment shader +var fragEquirectangular = fragEquiCubeBase + [ + // Wrap image + 'lambda = mod(lambda + PI, PI * 2.0) - PI;', + + // Map texture to sphere + 'vec2 coord = vec2(lambda / PI, phi / (PI / 2.0));', + + // Look up color from texture + // Map from [-1,1] to [0,1] and flip y-axis + 'if(coord.x < -u_h || coord.x > u_h || coord.y < -u_v + u_vo || coord.y > u_v + u_vo)', + 'gl_FragColor = u_backgroundColor;', + 'else {', + 'if(u_splitImage) {', + // Image was split into two textures to work around texture size limits + 'if(coord.x < 0.0)', + 'gl_FragColor = texture2D(u_image0, vec2((coord.x + u_h) / u_h, (-coord.y + u_v + u_vo) / (u_v * 2.0)));', + 'else', + 'gl_FragColor = texture2D(u_image1, vec2((coord.x + u_h) / u_h - 1.0, (-coord.y + u_v + u_vo) / (u_v * 2.0)));', + '} else {', + 'gl_FragColor = texture2D(u_image0, vec2((coord.x + u_h) / (u_h * 2.0), (-coord.y + u_v + u_vo) / (u_v * 2.0)));', + '}', + '}', +'}' +].join('\n'); + +// Fragment shader +var fragMulti = [ +'varying mediump vec2 v_texCoord;', +'uniform sampler2D u_sampler;', +//'uniform mediump vec4 u_color;', + +'void main(void) {', + // Look up color from texture + 'gl_FragColor = texture2D(u_sampler, v_texCoord);', +// 'gl_FragColor = u_color;', +'}' +].join(''); + +return { + renderer: function(container, image, imagetype, dynamic) { + return new Renderer(container, image, imagetype, dynamic); + } +}; + +})(window, document); diff --git a/web/assets/pannellum/js/pannellum.js b/web/assets/pannellum/js/pannellum.js new file mode 100644 index 0000000..cb9a365 --- /dev/null +++ b/web/assets/pannellum/js/pannellum.js @@ -0,0 +1,3401 @@ +/* + * Pannellum - An HTML5 based Panorama Viewer + * Copyright (c) 2011-2021 Matthew Petroff + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +window.pannellum = (function(window, document, undefined) { + +'use strict'; + +/** + * Creates a new panorama viewer. + * @constructor + * @param {HTMLElement|string} container - The container (div) element for the + * viewer, or its ID. + * @param {Object} initialConfig - Initial configuration for viewer. + */ +function Viewer(container, initialConfig) { + +var _this = this; + +// Declare variables +var config, + renderer, + preview, + draggingHotSpot, + isUserInteracting = false, + latestInteraction = Date.now(), + onPointerDownPointerX = 0, + onPointerDownPointerY = 0, + onPointerDownPointerDist = -1, + onPointerDownYaw = 0, + onPointerDownPitch = 0, + keysDown = new Array(10), + fullscreenActive = false, + loaded, + error = false, + isTimedOut = false, + listenersAdded = false, + panoImage, + prevTime, + speed = {'yaw': 0, 'pitch': 0, 'hfov': 0}, + animating = false, + orientation = false, + orientationYawOffset = 0, + autoRotateStart, + autoRotateSpeed = 0, + origHfov, + origPitch, + animatedMove = {}, + externalEventListeners = {}, + specifiedPhotoSphereExcludes = [], + update = false, // Should we update when still to render dynamic content + eps = 1e-6, + resizeObserver, + hotspotsCreated = false, + destroyed = false; + +var defaultConfig = { + hfov: 100, + minHfov: 50, + multiResMinHfov: false, + maxHfov: 120, + pitch: 0, + minPitch: undefined, + maxPitch: undefined, + yaw: 0, + minYaw: -180, + maxYaw: 180, + roll: 0, + haov: 360, + vaov: 180, + vOffset: 0, + autoRotate: false, + autoRotateInactivityDelay: -1, + autoRotateStopDelay: undefined, + type: 'equirectangular', + northOffset: 0, + showFullscreenCtrl: true, + dynamic: false, + dynamicUpdate: false, + doubleClickZoom: true, + keyboardZoom: true, + mouseZoom: true, + showZoomCtrl: true, + autoLoad: false, + showControls: true, + orientationOnByDefault: false, + hotSpotDebug: false, + backgroundColor: [0, 0, 0], + avoidShowingBackground: false, + animationTimingFunction: timingFunction, + draggable: true, + dragConfirm: false, + disableKeyboardCtrl: false, + crossOrigin: 'anonymous', + targetBlank: false, + touchPanSpeedCoeffFactor: 1, + capturedKeyNumbers: [16, 17, 27, 37, 38, 39, 40, 61, 65, 68, 83, 87, 107, 109, 173, 187, 189], + friction: 0.15 +}; + +// Translatable / configurable strings +// Some strings contain '%s', which is a placeholder for inserted values +// When setting strings in external configuration, `\n` should be used instead of `
` to insert line breaks +defaultConfig.strings = { + // Labels + loadButtonLabel: 'Click to
Load
Panorama', + loadingLabel: 'Loading...', + bylineLabel: 'by %s', // One substitution: author + + // Errors + noPanoramaError: 'No panorama image was specified.', + fileAccessError: 'The file %s could not be accessed.', // One substitution: file URL + malformedURLError: 'There is something wrong with the panorama URL.', + iOS8WebGLError: "Due to iOS 8's broken WebGL implementation, only " + + "progressive encoded JPEGs work for your device (this " + + "panorama uses standard encoding).", + genericWebGLError: 'Your browser does not have the necessary WebGL support to display this panorama.', + textureSizeError: 'This panorama is too big for your device! It\'s ' + + '%spx wide, but your device only supports images up to ' + + '%spx wide. Try another device.' + + ' (If you\'re the author, try scaling down the image.)', // Two substitutions: image width, max image width + unknownError: 'Unknown error. Check developer console.', + twoTouchActivate: 'Use two fingers together to pan the panorama.', + twoTouchXActivate: 'Use two fingers together to pan the panorama horizontally.', + twoTouchYActivate: 'Use two fingers together to pan the panorama vertically.', + ctrlZoomActivate: 'Use %s + scroll to zoom the panorama.', // One substitution: key name +}; + +// Initialize container +container = typeof container === 'string' ? document.getElementById(container) : container; +container.classList.add('pnlm-container'); +container.tabIndex = 0; + +// Create container for ui +var uiContainer = document.createElement('div'); +uiContainer.className = 'pnlm-ui'; +container.appendChild(uiContainer); + +// Create container for renderer +var renderContainer = document.createElement('div'); +renderContainer.className = 'pnlm-render-container'; +container.appendChild(renderContainer); +var dragFix = document.createElement('div'); +dragFix.className = 'pnlm-dragfix'; +uiContainer.appendChild(dragFix); + +// Display about information on right click +var aboutMsg = document.createElement('span'); +aboutMsg.className = 'pnlm-about-msg'; +var aboutMsgLink = document.createElement('a'); +aboutMsgLink.href = 'https://pannellum.org/'; +aboutMsgLink.textContent = 'Pannellum'; +aboutMsg.appendChild(aboutMsgLink); +var aboutMsgVersion = document.createElement('span'); +// VERSION PLACEHOLDER FOR BUILD +aboutMsg.appendChild(aboutMsgVersion); +uiContainer.appendChild(aboutMsg); +dragFix.addEventListener('contextmenu', aboutMessage); + +// Create info display +var infoDisplay = {}; + +// Hot spot debug indicator +var hotSpotDebugIndicator = document.createElement('div'); +hotSpotDebugIndicator.className = 'pnlm-sprite pnlm-hot-spot-debug-indicator'; +uiContainer.appendChild(hotSpotDebugIndicator); + +// Panorama info +infoDisplay.container = document.createElement('div'); +infoDisplay.container.className = 'pnlm-panorama-info'; +infoDisplay.title = document.createElement('div'); +infoDisplay.title.className = 'pnlm-title-box'; +infoDisplay.container.appendChild(infoDisplay.title); +infoDisplay.author = document.createElement('div'); +infoDisplay.author.className = 'pnlm-author-box'; +infoDisplay.container.appendChild(infoDisplay.author); +uiContainer.appendChild(infoDisplay.container); + +// Load box +infoDisplay.load = {}; +infoDisplay.load.box = document.createElement('div'); +infoDisplay.load.box.className = 'pnlm-load-box'; +infoDisplay.load.boxp = document.createElement('p'); +infoDisplay.load.box.appendChild(infoDisplay.load.boxp); +infoDisplay.load.lbox = document.createElement('div'); +infoDisplay.load.lbox.className = 'pnlm-lbox'; +infoDisplay.load.lbox.innerHTML = '
'; +infoDisplay.load.box.appendChild(infoDisplay.load.lbox); +infoDisplay.load.lbar = document.createElement('div'); +infoDisplay.load.lbar.className = 'pnlm-lbar'; +infoDisplay.load.lbarFill = document.createElement('div'); +infoDisplay.load.lbarFill.className = 'pnlm-lbar-fill'; +infoDisplay.load.lbar.appendChild(infoDisplay.load.lbarFill); +infoDisplay.load.box.appendChild(infoDisplay.load.lbar); +infoDisplay.load.msg = document.createElement('p'); +infoDisplay.load.msg.className = 'pnlm-lmsg'; +infoDisplay.load.box.appendChild(infoDisplay.load.msg); +uiContainer.appendChild(infoDisplay.load.box); + +// Error message +infoDisplay.errorMsg = document.createElement('div'); +infoDisplay.errorMsg.className = 'pnlm-error-msg pnlm-info-box'; +uiContainer.appendChild(infoDisplay.errorMsg); + +// Interaction message +infoDisplay.interactionMsg = document.createElement('div'); +infoDisplay.interactionMsg.className = 'pnlm-interaction-msg pnlm-info-box'; +uiContainer.appendChild(infoDisplay.interactionMsg); + +// Create controls +var controls = {}; +controls.container = document.createElement('div'); +controls.container.className = 'pnlm-controls-container'; +uiContainer.appendChild(controls.container); + +// Load button +controls.load = document.createElement('button'); +controls.load.className = 'pnlm-load-button'; +controls.load.addEventListener('click', function() { + processOptions(); + load(); +}); +uiContainer.appendChild(controls.load); + +// Zoom controls +controls.zoom = document.createElement('div'); +controls.zoom.className = 'pnlm-zoom-controls pnlm-controls'; +controls.zoomIn = document.createElement('div'); +controls.zoomIn.className = 'pnlm-zoom-in pnlm-sprite pnlm-control'; +controls.zoomIn.addEventListener('click', zoomIn); +controls.zoom.appendChild(controls.zoomIn); +controls.zoomOut = document.createElement('div'); +controls.zoomOut.className = 'pnlm-zoom-out pnlm-sprite pnlm-control'; +controls.zoomOut.addEventListener('click', zoomOut); +controls.zoom.appendChild(controls.zoomOut); +controls.container.appendChild(controls.zoom); + +// Fullscreen toggle +controls.fullscreen = document.createElement('div'); +controls.fullscreen.addEventListener('click', toggleFullscreen); +controls.fullscreen.className = 'pnlm-fullscreen-toggle-button pnlm-sprite pnlm-fullscreen-toggle-button-inactive pnlm-controls pnlm-control'; +if (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled) + controls.container.appendChild(controls.fullscreen); + +// Device orientation toggle +controls.orientation = document.createElement('div'); +controls.orientation.addEventListener('click', function(e) { + if (orientation) + stopOrientation(); + else + startOrientation(); +}); +controls.orientation.addEventListener('mousedown', function(e) {e.stopPropagation();}); +controls.orientation.addEventListener('touchstart', function(e) {e.stopPropagation();}); +controls.orientation.addEventListener('pointerdown', function(e) {e.stopPropagation();}); +controls.orientation.className = 'pnlm-orientation-button pnlm-orientation-button-inactive pnlm-sprite pnlm-controls pnlm-control'; +var orientationSupport = false; +if (window.DeviceOrientationEvent && location.protocol == 'https:' && + navigator.userAgent.toLowerCase().indexOf('mobi') >= 0) { + // This user agent check is here because there's no way to check if a + // device has an inertia measurement unit. We used to be able to check if a + // DeviceOrientationEvent had non-null values, but with iOS 13 requiring a + // permission prompt to access such events, this is no longer possible. + controls.container.appendChild(controls.orientation); + orientationSupport = true; +} + +// Compass +var compass = document.createElement('div'); +compass.className = 'pnlm-compass pnlm-controls pnlm-control'; +uiContainer.appendChild(compass); + +// Load and process configuration +if (initialConfig.firstScene) { + // Activate first scene if specified in URL + mergeConfig(initialConfig.firstScene); +} else if (initialConfig.default && initialConfig.default.firstScene) { + // Activate first scene if specified in file + mergeConfig(initialConfig.default.firstScene); +} else { + mergeConfig(null); +} +processOptions(true); + +/** + * Initializes viewer. + * @private + */ +function init() { + // Display an error for IE 9 as it doesn't work but also doesn't otherwise + // show an error (older versions don't work at all) + // Based on: http://stackoverflow.com/a/10965203 + var div = document.createElement("div"); + div.innerHTML = ""; + if (div.getElementsByTagName("i").length == 1) { + anError(); + return; + } + + origHfov = config.hfov; + origPitch = config.pitch; + + var i, p; + + if (config.type == 'cubemap') { + panoImage = []; + for (i = 0; i < 6; i++) { + panoImage.push(new Image()); + panoImage[i].crossOrigin = config.crossOrigin; + } + infoDisplay.load.lbox.style.display = 'block'; + infoDisplay.load.lbar.style.display = 'none'; + } else if (config.type == 'multires') { + var c = JSON.parse(JSON.stringify(config.multiRes)); // Deep copy + // Avoid "undefined" in path, check (optional) multiRes.basePath, too + // Use only multiRes.basePath if it's an absolute URL + if (config.basePath && config.multiRes.basePath && + !(/^(?:[a-z]+:)?\/\//i.test(config.multiRes.basePath))) { + c.basePath = config.basePath + config.multiRes.basePath; + } else if (config.multiRes.basePath) { + c.basePath = config.multiRes.basePath; + } else if(config.basePath) { + c.basePath = config.basePath; + } + panoImage = c; + } else { + if (config.dynamic === true) { + panoImage = config.panorama; + } else { + if (config.panorama === undefined) { + anError(config.strings.noPanoramaError); + return; + } + panoImage = new Image(); + } + } + + // Configure image loading + if (config.type == 'cubemap') { + // Quick loading counter for synchronous loading + var itemsToLoad = 6; + + var onLoad = function() { + itemsToLoad--; + if (itemsToLoad === 0) { + onImageLoad(); + } + }; + + var onError = function(e) { + var a = document.createElement('a'); + a.href = e.target.src; + a.textContent = a.href; + anError(config.strings.fileAccessError.replace('%s', a.outerHTML)); + }; + + for (i = 0; i < panoImage.length; i++) { + p = config.cubeMap[i]; + if (p == "null") { // support partial cubemap image with explicitly empty faces + console.log('Will use background instead of missing cubemap face ' + i); + onLoad(); + } else { + if (config.basePath && !absoluteURL(p)) { + p = config.basePath + p; + } + panoImage[i].onload = onLoad; + panoImage[i].onerror = onError; + panoImage[i].src = sanitizeURL(p); + } + } + } else if (config.type == 'multires') { + onImageLoad(); + } else { + p = ''; + if (config.basePath) { + p = config.basePath; + } + + if (config.dynamic !== true) { + // Still image + if (config.panorama instanceof Image || config.panorama instanceof ImageData || + (window.ImageBitmap && config.panorama instanceof ImageBitmap)) { + panoImage = config.panorama; + onImageLoad(); + return; + } + + p = absoluteURL(config.panorama) ? config.panorama : p + config.panorama; + + panoImage.onload = function() { + window.URL.revokeObjectURL(this.src); // Clean up + onImageLoad(); + }; + + var xhr = new XMLHttpRequest(); + xhr.onloadend = function() { + if (xhr.status != 200) { + // Display error if image can't be loaded + var a = document.createElement('a'); + a.href = p; + a.textContent = a.href; + anError(config.strings.fileAccessError.replace('%s', a.outerHTML)); + } + var img = this.response; + parseGPanoXMP(img, p); + infoDisplay.load.msg.innerHTML = ''; + }; + xhr.onprogress = function(e) { + if (e.lengthComputable) { + // Display progress + var percent = e.loaded / e.total * 100; + infoDisplay.load.lbarFill.style.width = percent + '%'; + var unit, numerator, denominator; + if (e.total > 1e6) { + unit = 'MB'; + numerator = (e.loaded / 1e6).toFixed(2); + denominator = (e.total / 1e6).toFixed(2); + } else if (e.total > 1e3) { + unit = 'kB'; + numerator = (e.loaded / 1e3).toFixed(1); + denominator = (e.total / 1e3).toFixed(1); + } else { + unit = 'B'; + numerator = e.loaded; + denominator = e.total; + } + infoDisplay.load.msg.innerHTML = numerator + ' / ' + denominator + ' ' + unit; + } else { + // Display loading spinner + infoDisplay.load.lbox.style.display = 'block'; + infoDisplay.load.lbar.style.display = 'none'; + } + }; + try { + xhr.open('GET', p, true); + } catch (e) { + // Malformed URL + anError(config.strings.malformedURLError); + } + xhr.responseType = 'blob'; + xhr.setRequestHeader('Accept', 'image/*,*/*;q=0.9'); + xhr.withCredentials = config.crossOrigin === 'use-credentials'; + xhr.send(); + } + } + + if (config.draggable) + uiContainer.classList.add('pnlm-grab'); + uiContainer.classList.remove('pnlm-grabbing'); + + // Properly handle switching to dynamic scenes + update = config.dynamicUpdate === true; + if (config.dynamic && update) { + panoImage = config.panorama; + onImageLoad(); + } +} + +/** + * Test if URL is absolute or relative. + * @private + * @param {string} url - URL to test + * @returns {boolean} True if absolute, else false + */ +function absoluteURL(url) { + // From http://stackoverflow.com/a/19709846 + return new RegExp('^(?:[a-z]+:)?//', 'i').test(url) || url[0] == '/' || url.slice(0, 5) == 'blob:'; +} + +/** + * Create renderer and initialize event listeners once image is loaded. + * @private + */ +function onImageLoad() { + if (!renderer) + renderer = new libpannellum.renderer(renderContainer); + + // Only add event listeners once + if (!listenersAdded) { + listenersAdded = true; + dragFix.addEventListener('mousedown', onDocumentMouseDown, false); + document.addEventListener('mousemove', onDocumentMouseMove, false); + document.addEventListener('mouseup', onDocumentMouseUp, false); + if (config.mouseZoom) { + uiContainer.addEventListener('mousewheel', onDocumentMouseWheel, false); + uiContainer.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false); + } + if (config.doubleClickZoom) { + dragFix.addEventListener('dblclick', onDocumentDoubleClick, false); + } + container.addEventListener('mozfullscreenchange', onFullScreenChange, false); + container.addEventListener('webkitfullscreenchange', onFullScreenChange, false); + container.addEventListener('msfullscreenchange', onFullScreenChange, false); + container.addEventListener('fullscreenchange', onFullScreenChange, false); + if (typeof ResizeObserver === 'function') { + resizeObserver = new ResizeObserver(onDocumentResize); + resizeObserver.observe(container); + } else { + window.addEventListener('resize', onDocumentResize, false); + window.addEventListener('orientationchange', onDocumentResize, false); + } + if (!config.disableKeyboardCtrl) { + container.addEventListener('keydown', onDocumentKeyPress, false); + container.addEventListener('keyup', onDocumentKeyUp, false); + container.addEventListener('blur', clearKeys, false); + } + document.addEventListener('mouseleave', onDocumentMouseUp, false); + if (document.documentElement.style.pointerAction === '' && + document.documentElement.style.touchAction === '') { + dragFix.addEventListener('pointerdown', onDocumentPointerDown, false); + dragFix.addEventListener('pointermove', onDocumentPointerMove, false); + dragFix.addEventListener('pointerup', onDocumentPointerUp, false); + dragFix.addEventListener('pointerleave', onDocumentPointerUp, false); + } else { + dragFix.addEventListener('touchstart', onDocumentTouchStart, false); + dragFix.addEventListener('touchmove', onDocumentTouchMove, false); + dragFix.addEventListener('touchend', onDocumentTouchEnd, false); + } + + // Deal with MS pointer events + if (window.navigator.pointerEnabled) + container.style.touchAction = 'none'; + } + + renderInit(); + setHfov(config.hfov); // Possibly adapt HFOV after configuration and canvas is complete; prevents empty space on top or bottom by zooming out too much + setTimeout(function(){isTimedOut = true;}, 500); +} + +/** + * Parses Google Photo Sphere XMP Metadata. + * https://developers.google.com/photo-sphere/metadata/ + * @private + * @param {Image} image - Image to read XMP metadata from. + */ +function parseGPanoXMP(image, url) { + var reader = new FileReader(); + reader.addEventListener('loadend', function() { + var img = reader.result; + + // This awful browser specific test exists because iOS 8 does not work + // with non-progressive encoded JPEGs. + if (navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad).* os 8_/)) { + var flagIndex = img.indexOf('\xff\xc2'); + if (flagIndex < 0 || flagIndex > 65536) + anError(config.strings.iOS8WebGLError); + } + + var start = img.indexOf(' -1 && config.ignoreGPanoXMP !== true) { + var xmpData = img.substring(start, img.indexOf('') + 12); + + // Extract the requested tag from the XMP data + var getTag = function(tag) { + var result; + if (xmpData.indexOf(tag + '="') >= 0) { + result = xmpData.substring(xmpData.indexOf(tag + '="') + tag.length + 2); + result = result.substring(0, result.indexOf('"')); + } else if (xmpData.indexOf(tag + '>') >= 0) { + result = xmpData.substring(xmpData.indexOf(tag + '>') + tag.length + 1); + result = result.substring(0, result.indexOf('<')); + } + if (result !== undefined) { + return Number(result); + } + return null; + }; + + // Relevant XMP data + var xmp = { + fullWidth: getTag('GPano:FullPanoWidthPixels'), + croppedWidth: getTag('GPano:CroppedAreaImageWidthPixels'), + fullHeight: getTag('GPano:FullPanoHeightPixels'), + croppedHeight: getTag('GPano:CroppedAreaImageHeightPixels'), + topPixels: getTag('GPano:CroppedAreaTopPixels'), + heading: getTag('GPano:PoseHeadingDegrees'), + horizonPitch: getTag('GPano:PosePitchDegrees'), + horizonRoll: getTag('GPano:PoseRollDegrees'), + pitch: getTag('GPano:InitialViewPitchDegrees'), + yaw: getTag('GPano:InitialViewHeadingDegrees'), + hfov: getTag('GPano:InitialHorizontalFOVDegrees') + }; + + if (xmp.fullWidth !== null && xmp.croppedWidth !== null && + xmp.fullHeight !== null && xmp.croppedHeight !== null && + xmp.topPixels !== null) { + + // Set up viewer using GPano XMP data + if (specifiedPhotoSphereExcludes.indexOf('haov') < 0) + config.haov = xmp.croppedWidth / xmp.fullWidth * 360; + if (specifiedPhotoSphereExcludes.indexOf('vaov') < 0) + config.vaov = xmp.croppedHeight / xmp.fullHeight * 180; + if (specifiedPhotoSphereExcludes.indexOf('vOffset') < 0) + config.vOffset = ((xmp.topPixels + xmp.croppedHeight / 2) / xmp.fullHeight - 0.5) * -180; + if (xmp.heading !== null && specifiedPhotoSphereExcludes.indexOf('northOffset') < 0) { + // TODO: make sure this works correctly for partial panoramas + config.northOffset = xmp.heading; + if (config.compass !== false) { + config.compass = true; + } + } + if (xmp.horizonPitch !== null && xmp.horizonRoll !== null) { + if (specifiedPhotoSphereExcludes.indexOf('horizonPitch') < 0) + config.horizonPitch = xmp.horizonPitch; + if (specifiedPhotoSphereExcludes.indexOf('horizonRoll') < 0) + config.horizonRoll = xmp.horizonRoll; + } + + if (xmp.pitch !== null && specifiedPhotoSphereExcludes.indexOf('pitch') < 0) + config.pitch = xmp.pitch; + if (xmp.yaw !== null && specifiedPhotoSphereExcludes.indexOf('yaw') < 0) + config.yaw = xmp.yaw; + if (xmp.hfov !== null && specifiedPhotoSphereExcludes.indexOf('hfov') < 0) + config.hfov = xmp.hfov; + } + } + + // Load panorama + panoImage.src = window.URL.createObjectURL(image); + panoImage.onerror = function() { + // If the image fails to load, we check the Content Security Policy + // headers and see if they block loading images as blobs. If they + // do, we load the image directly from the URL. While this should + // allow the image to load, it does prevent parsing of XMP data. + function getCspHeaders() { + if (!window.fetch) + return null; + return window.fetch(document.location.href) + .then(function(resp){ + return resp.headers.get('Content-Security-Policy'); + }); + } + getCspHeaders().then(function(cspHeaders) { + if (cspHeaders) { + var invalidImgSource = cspHeaders.split(";").find(function(p) { + var matchstring = p.match(/img-src(.*)/); + if (matchstring) { + return !matchstring[1].includes("blob"); + } + }); + if (invalidImgSource) { + console.log('CSP blocks blobs; reverting to URL.'); + panoImage.crossOrigin = config.crossOrigin; + panoImage.src = url; + } + } + }); + }; + }); + if (reader.readAsBinaryString !== undefined) + reader.readAsBinaryString(image); + else + reader.readAsText(image); +} + +/** + * Displays an error message. + * @private + * @param {string} errorMsg - Error message to display. If not specified, a + * generic WebGL error is displayed. + */ +function anError(errorMsg) { + if (errorMsg === undefined) + errorMsg = config.strings.genericWebGLError; + infoDisplay.errorMsg.innerHTML = '

' + errorMsg + '

'; + controls.load.style.display = 'none'; + infoDisplay.load.box.style.display = 'none'; + infoDisplay.errorMsg.style.display = 'table'; + error = true; + loaded = undefined; + renderContainer.style.display = 'none'; + fireEvent('error', errorMsg); +} + +/** + * Hides error message display. + * @private + */ +function clearError() { + if (error) { + infoDisplay.load.box.style.display = 'none'; + infoDisplay.errorMsg.style.display = 'none'; + error = false; + renderContainer.style.display = 'block'; + fireEvent('errorcleared'); + } +} + +/** + * Displays an interaction message. + * @private + * @param {string} msg - Message to display. + */ +function showInteractionMessage(interactionMsg) { + infoDisplay.interactionMsg.style.opacity = 1; + + infoDisplay.interactionMsg.innerHTML = '

' + interactionMsg + '

'; + infoDisplay.interactionMsg.style.display = 'table'; + fireEvent('messageshown'); + + clearTimeout(infoDisplay.interactionMsg.timeout); + infoDisplay.interactionMsg.removeEventListener('transitionend', clearInteractionMessage); + infoDisplay.interactionMsg.timeout = setTimeout(function() { + infoDisplay.interactionMsg.style.opacity = 0; + infoDisplay.interactionMsg.addEventListener('transitionend', clearInteractionMessage); + }, 2000); +} + +/** + * Hides interaction message display. + * @private + */ +function clearInteractionMessage() { + infoDisplay.interactionMsg.style.opacity = 0; + infoDisplay.interactionMsg.style.display = 'none'; + fireEvent('messagecleared'); +} + +/** + * Displays about message. + * @private + * @param {MouseEvent} event - Right click location + */ +function aboutMessage(event) { + var pos = mousePosition(event); + aboutMsg.style.left = pos.x + 'px'; + aboutMsg.style.top = pos.y + 'px'; + clearTimeout(aboutMessage.t1); + clearTimeout(aboutMessage.t2); + aboutMsg.style.display = 'block'; + aboutMsg.style.opacity = 1; + aboutMessage.t1 = setTimeout(function() {aboutMsg.style.opacity = 0;}, 2000); + aboutMessage.t2 = setTimeout(function() {aboutMsg.style.display = 'none';}, 2500); + event.preventDefault(); +} + +/** + * Calculate mouse position relative to top left of viewer container. + * @private + * @param {MouseEvent} event - Mouse event to use in calculation + * @returns {Object} Calculated X and Y coordinates + */ +function mousePosition(event) { + var bounds = container.getBoundingClientRect(); + var pos = {}; + // pageX / pageY needed for iOS + pos.x = (event.clientX || event.pageX) - bounds.left; + pos.y = (event.clientY || event.pageY) - bounds.top; + return pos; +} + +/** + * Event handler for mouse clicks. Initializes panning. Prints center and click + * location coordinates when hot spot debugging is enabled. + * @private + * @param {MouseEvent} event - Document mouse down event. + */ +function onDocumentMouseDown(event) { + // Override default action + event.preventDefault(); + // But not all of it + container.focus(); + + // Only do something if the panorama is loaded + if (!loaded || !config.draggable || config.draggingHotSpot) { + return; + } + + // Calculate mouse position relative to top left of viewer container + var pos = mousePosition(event); + + // Log pitch / yaw of mouse click when debugging / placing hot spots + if (config.hotSpotDebug) { + var coords = mouseEventToCoords(event); + console.log('Pitch: ' + coords[0] + ', Yaw: ' + coords[1] + ', Center Pitch: ' + + config.pitch + ', Center Yaw: ' + config.yaw + ', HFOV: ' + config.hfov); + } + + // Turn off auto-rotation if enabled + stopAnimation(); + + stopOrientation(); + config.roll = 0; + + speed.hfov = 0; + + isUserInteracting = true; + latestInteraction = Date.now(); + + onPointerDownPointerX = pos.x; + onPointerDownPointerY = pos.y; + + onPointerDownYaw = config.yaw; + onPointerDownPitch = config.pitch; + + uiContainer.classList.add('pnlm-grabbing'); + uiContainer.classList.remove('pnlm-grab'); + + fireEvent('mousedown', event); + animateInit(); +} + +/** + * Event handler for double clicks. Zooms in at clicked location + * @private + * @param {MouseEvent} event - Document mouse down event. + */ +function onDocumentDoubleClick(event) { + if (config.minHfov === config.hfov) { + _this.setHfov(origHfov, 1000); + } else { + var coords = mouseEventToCoords(event); + _this.lookAt(coords[0], coords[1], config.minHfov, 1000); + } +} + +/** + * Calculate panorama pitch and yaw from location of mouse event. + * @private + * @param {MouseEvent} event - Document mouse down event. + * @returns {number[]} [pitch, yaw] + */ +function mouseEventToCoords(event) { + var pos = mousePosition(event); + var canvas = renderer.getCanvas(); + var canvasWidth = canvas.clientWidth, + canvasHeight = canvas.clientHeight; + var x = pos.x / canvasWidth * 2 - 1; + var y = (1 - pos.y / canvasHeight * 2) * canvasHeight / canvasWidth; + var focal = 1 / Math.tan(config.hfov * Math.PI / 360); + var s = Math.sin(config.pitch * Math.PI / 180); + var c = Math.cos(config.pitch * Math.PI / 180); + var a = focal * c - y * s; + var root = Math.sqrt(x*x + a*a); + var pitch = Math.atan((y * c + focal * s) / root) * 180 / Math.PI; + var yaw = Math.atan2(x / root, a / root) * 180 / Math.PI + config.yaw; + if (yaw < -180) + yaw += 360; + if (yaw > 180) + yaw -= 360; + return [pitch, yaw]; +} + +/** + * Event handler for mouse moves. Pans center of view. + * @private + * @param {MouseEvent} event - Document mouse move event. + */ +function onDocumentMouseMove(event) { + if (draggingHotSpot) { + moveHotSpot(draggingHotSpot, event); + } else if (isUserInteracting && loaded) { + latestInteraction = Date.now(); + var canvas = renderer.getCanvas(); + var canvasWidth = canvas.clientWidth, + canvasHeight = canvas.clientHeight; + var pos = mousePosition(event); + //TODO: This still isn't quite right + var yaw = ((Math.atan(onPointerDownPointerX / canvasWidth * 2 - 1) - Math.atan(pos.x / canvasWidth * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw; + speed.yaw = (yaw - config.yaw) % 360 * 0.2; + config.yaw = yaw; + + var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvasHeight / canvasWidth) * 180 / Math.PI; + + var pitch = ((Math.atan(pos.y / canvasHeight * 2 - 1) - Math.atan(onPointerDownPointerY / canvasHeight * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch; + speed.pitch = (pitch - config.pitch) * 0.2; + config.pitch = pitch; + } +} + +/** + * Event handler for mouse up events. Stops panning. + * @private + */ +function onDocumentMouseUp(event) { + if (draggingHotSpot && draggingHotSpot.dragHandlerFunc) + draggingHotSpot.dragHandlerFunc(event, draggingHotSpot.dragHandlerArgs); + draggingHotSpot = null; + + if (!isUserInteracting) { + return; + } + isUserInteracting = false; + if (Date.now() - latestInteraction > 15) { + // Prevents jump when user rapidly moves mouse, stops, and then + // releases the mouse button + speed.pitch = speed.yaw = 0; + } + uiContainer.classList.add('pnlm-grab'); + uiContainer.classList.remove('pnlm-grabbing'); + latestInteraction = Date.now(); + + fireEvent('mouseup', event); +} + +/** + * Event handler for touches. Initializes panning if one touch or zooming if + * two touches. + * @private + * @param {TouchEvent} event - Document touch start event. + */ +function onDocumentTouchStart(event) { + // Only do something if the panorama is loaded + if (!loaded || !config.draggable || draggingHotSpot) { + return; + } + + // Turn off auto-rotation if enabled + stopAnimation(); + + stopOrientation(); + config.roll = 0; + + speed.hfov = 0; + + // Calculate touch position relative to top left of viewer container + var pos0 = mousePosition(event.targetTouches[0]); + + onPointerDownPointerX = pos0.x; + onPointerDownPointerY = pos0.y; + + if (event.targetTouches.length == 2) { + // Down pointer is the center of the two fingers + var pos1 = mousePosition(event.targetTouches[1]); + onPointerDownPointerX += (pos1.x - pos0.x) * 0.5; + onPointerDownPointerY += (pos1.y - pos0.y) * 0.5; + onPointerDownPointerDist = Math.sqrt((pos0.x - pos1.x) * (pos0.x - pos1.x) + + (pos0.y - pos1.y) * (pos0.y - pos1.y)); + } + isUserInteracting = true; + latestInteraction = Date.now(); + + onPointerDownYaw = config.yaw; + onPointerDownPitch = config.pitch; + + fireEvent('touchstart', event); + animateInit(); +} + +/** + * Event handler for touch movements. Pans center of view if one touch or + * adjusts zoom if two touches. + * @private + * @param {TouchEvent} event - Document touch move event. + */ +function onDocumentTouchMove(event) { + if (!config.draggable) { + return; + } + + // Override default action + if (!config.dragConfirm) + event.preventDefault(); + if (loaded) { + latestInteraction = Date.now(); + } + if (isUserInteracting && loaded) { + var pos0 = mousePosition(event.targetTouches[0]); + var clientX = pos0.x; + var clientY = pos0.y; + + if (event.targetTouches.length == 2 && onPointerDownPointerDist != -1) { + var pos1 = mousePosition(event.targetTouches[1]); + clientX += (pos1.x - pos0.x) * 0.5; + clientY += (pos1.y - pos0.y) * 0.5; + var clientDist = Math.sqrt((pos0.x - pos1.x) * (pos0.x - pos1.x) + + (pos0.y - pos1.y) * (pos0.y - pos1.y)); + setHfov(config.hfov + (onPointerDownPointerDist - clientDist) * 0.1); + onPointerDownPointerDist = clientDist; + } + + // The smaller the config.hfov value (the more zoomed-in the user is), the faster + // yaw/pitch are perceived to change on one-finger touchmove (panning) events and vice versa. + // To improve usability at both small and large zoom levels (config.hfov values) + // we introduce a dynamic pan speed coefficient. + // + // Currently this seems to *roughly* keep initial drag/pan start position close to + // the user's finger while panning regardless of zoom level / config.hfov value. + var touchmovePanSpeedCoeff = (config.hfov / 360) * config.touchPanSpeedCoeffFactor; + + + if (!fullscreenActive && (config.dragConfirm == 'both' || config.dragConfirm == 'yaw') && event.targetTouches.length != 2) { + if (onPointerDownPointerX != clientX) { + if (config.dragConfirm == 'yaw') + showInteractionMessage(config.strings.twoTouchXActivate); + else + showInteractionMessage(config.strings.twoTouchActivate); + } + } else { + var yaw = (onPointerDownPointerX - clientX) * touchmovePanSpeedCoeff + onPointerDownYaw; + speed.yaw = (yaw - config.yaw) % 360 * 0.2; + config.yaw = yaw; + } + + + if (!fullscreenActive && (config.dragConfirm == 'both' || config.dragConfirm == 'pitch') && event.targetTouches.length != 2) { + if (onPointerDownPointerY != clientY) { + if (config.dragConfirm == 'pitch') + showInteractionMessage(config.strings.twoTouchYActivate); + else + showInteractionMessage(config.strings.twoTouchActivate); + } + } else { + var pitch = (clientY - onPointerDownPointerY) * touchmovePanSpeedCoeff + onPointerDownPitch; + speed.pitch = (pitch - config.pitch) * 0.2; + config.pitch = pitch; + } + + + if ((config.dragConfirm == 'yaw' || config.dragConfirm == 'pitch' || config.dragConfirm == 'both') && event.targetTouches.length == 2) { + clearInteractionMessage(); + event.preventDefault(); + } + + } +} + +/** + * Event handler for end of touches. Stops panning and/or zooming. + * @private + */ +function onDocumentTouchEnd() { + draggingHotSpot = null; + + isUserInteracting = false; + if (Date.now() - latestInteraction > 150) { + speed.pitch = speed.yaw = 0; + } + onPointerDownPointerDist = -1; + latestInteraction = Date.now(); + + fireEvent('touchend', event); +} + +var pointerIDs = [], + pointerCoordinates = []; +/** + * Event handler for touch starts in IE / Edge. + * @private + * @param {PointerEvent} event - Document pointer down event. + */ +function onDocumentPointerDown(event) { + if (event.pointerType == 'touch') { + // Only do something if the panorama is loaded + if (!loaded || !config.draggable) + return; + pointerIDs.push(event.pointerId); + pointerCoordinates.push({clientX: event.clientX, clientY: event.clientY}); + event.targetTouches = pointerCoordinates; + onDocumentTouchStart(event); + event.preventDefault(); + } +} + +/** + * Event handler for touch moves in IE / Edge. + * @private + * @param {PointerEvent} event - Document pointer move event. + */ +function onDocumentPointerMove(event) { + if (event.pointerType == 'touch') { + if (draggingHotSpot) { + moveHotSpot(draggingHotSpot, event); + return; + } + + if (!config.draggable) + return; + for (var i = 0; i < pointerIDs.length; i++) { + if (event.pointerId == pointerIDs[i]) { + pointerCoordinates[i].clientX = event.clientX; + pointerCoordinates[i].clientY = event.clientY; + event.targetTouches = pointerCoordinates; + onDocumentTouchMove(event); + event.preventDefault(); + return; + } + } + } +} + +/** + * Event handler for touch ends in IE / Edge. + * @private + * @param {PointerEvent} event - Document pointer up event. + */ +function onDocumentPointerUp(event) { + if (draggingHotSpot && draggingHotSpot.dragHandlerFunc) + draggingHotSpot.dragHandlerFunc(event, draggingHotSpot.dragHandlerArgs); + draggingHotSpot = null; + + if (event.pointerType == 'touch') { + var defined = false; + for (var i = 0; i < pointerIDs.length; i++) { + if (event.pointerId == pointerIDs[i]) + pointerIDs[i] = undefined; + if (pointerIDs[i]) + defined = true; + } + if (!defined) { + pointerIDs = []; + pointerCoordinates = []; + onDocumentTouchEnd(); + } + event.preventDefault(); + } +} + +/** + * Event handler for mouse wheel. Changes zoom. + * @private + * @param {WheelEvent} event - Document mouse wheel event. + */ +function onDocumentMouseWheel(event) { + // Only do something if the panorama is loaded and mouse wheel zoom is enabled + if (!loaded || (config.mouseZoom == 'fullscreenonly' && !fullscreenActive)) { + return; + } + + // Ctrl for zoom + if (!fullscreenActive && config.mouseZoom == 'ctrl' && !event.ctrlKey) { + var keyname = navigator.platform.indexOf('Mac') != -1 ? 'control' : 'ctrl'; + showInteractionMessage(config.strings.ctrlZoomActivate.replace('%s', '' + keyname + '')); + return; + } + clearInteractionMessage(); + + event.preventDefault(); + + // Turn off auto-rotation if enabled + stopAnimation(); + latestInteraction = Date.now(); + + if (event.wheelDeltaY) { + // WebKit + setHfov(config.hfov - event.wheelDeltaY * 0.05); + speed.hfov = event.wheelDelta < 0 ? 1 : -1; + } else if (event.wheelDelta) { + // Opera / Explorer 9 + setHfov(config.hfov - event.wheelDelta * 0.05); + speed.hfov = event.wheelDelta < 0 ? 1 : -1; + } else if (event.detail) { + // Firefox + setHfov(config.hfov + event.detail * 1.5); + speed.hfov = event.detail > 0 ? 1 : -1; + } + animateInit(); +} + +/** + * Event handler for key presses. Updates list of currently pressed keys. + * @private + * @param {KeyboardEvent} event - Document key press event. + */ +function onDocumentKeyPress(event) { + // Turn off auto-rotation if enabled + stopAnimation(); + latestInteraction = Date.now(); + + stopOrientation(); + config.roll = 0; + + // Record key pressed + var keynumber = event.which || event.keycode; + + // Override default action for keys that are used + if (config.capturedKeyNumbers.indexOf(keynumber) < 0) + return; + if (!fullscreenActive && (keynumber == 16 || keynumber == 17) && config.mouseZoom == 'ctrl') + // Disable ctrl / shift zoom when holding the ctrl key is required for + // scroll wheel zooming + return; + event.preventDefault(); + + // If escape key is pressed + if (keynumber == 27) { + // If in fullscreen mode + if (fullscreenActive) { + toggleFullscreen(); + } + } else { + // Change key + changeKey(keynumber, true); + } +} + +/** + * Clears list of currently pressed keys. + * @private + */ +function clearKeys() { + for (var i = 0; i < 10; i++) { + keysDown[i] = false; + } +} + +/** + * Event handler for key releases. Updates list of currently pressed keys. + * @private + * @param {KeyboardEvent} event - Document key up event. + */ +function onDocumentKeyUp(event) { + // Record key pressed + var keynumber = event.which || event.keycode; + + // Override default action for keys that are used + if (config.capturedKeyNumbers.indexOf(keynumber) < 0) + return; + event.preventDefault(); + + // Change key + changeKey(keynumber, false); +} + +/** + * Updates list of currently pressed keys. + * @private + * @param {number} keynumber - Key number. + * @param {boolean} value - Whether or not key is pressed. + */ +function changeKey(keynumber, value) { + var keyChanged = false; + switch(keynumber) { + // If minus key is released + case 109: case 189: case 17: case 173: + if (keysDown[0] != value) { keyChanged = true; } + keysDown[0] = value; break; + + // If plus key is released + case 107: case 187: case 16: case 61: + if (keysDown[1] != value) { keyChanged = true; } + keysDown[1] = value; break; + + // If up arrow is released + case 38: + if (keysDown[2] != value) { keyChanged = true; } + keysDown[2] = value; break; + + // If "w" is released + case 87: + if (keysDown[6] != value) { keyChanged = true; } + keysDown[6] = value; break; + + // If down arrow is released + case 40: + if (keysDown[3] != value) { keyChanged = true; } + keysDown[3] = value; break; + + // If "s" is released + case 83: + if (keysDown[7] != value) { keyChanged = true; } + keysDown[7] = value; break; + + // If left arrow is released + case 37: + if (keysDown[4] != value) { keyChanged = true; } + keysDown[4] = value; break; + + // If "a" is released + case 65: + if (keysDown[8] != value) { keyChanged = true; } + keysDown[8] = value; break; + + // If right arrow is released + case 39: + if (keysDown[5] != value) { keyChanged = true; } + keysDown[5] = value; break; + + // If "d" is released + case 68: + if (keysDown[9] != value) { keyChanged = true; } + keysDown[9] = value; + } + + if (keyChanged && value) { + if (typeof performance !== 'undefined' && performance.now()) { + prevTime = performance.now(); + } else { + prevTime = Date.now(); + } + animateInit(); + } +} + +/** + * Pans and/or zooms panorama based on currently pressed keys. Also handles + * panorama "inertia" and auto rotation. + * @private + */ +function keyRepeat() { + // Only do something if the panorama is loaded + if (!loaded) { + return; + } + + var isKeyDown = false; + + var prevPitch = config.pitch; + var prevYaw = config.yaw; + var prevZoom = config.hfov; + + var newTime; + if (typeof performance !== 'undefined' && performance.now()) { + newTime = performance.now(); + } else { + newTime = Date.now(); + } + if (prevTime === undefined) { + prevTime = newTime; + } + var diff = (newTime - prevTime) * config.hfov / 1200; + diff = Math.min(diff, 10.0); // Avoid jump if something goes wrong with time diff + + // If minus key is down + if (keysDown[0] && config.keyboardZoom === true) { + setHfov(config.hfov + (speed.hfov * 0.8 + 0.4) * diff); + isKeyDown = true; + } + + // If plus key is down + if (keysDown[1] && config.keyboardZoom === true) { + setHfov(config.hfov + (speed.hfov * 0.8 - 0.2) * diff); + isKeyDown = true; + } + + // If up arrow or "w" is down + if (keysDown[2] || keysDown[6]) { + // Pan up + config.pitch += (speed.pitch * 0.8 + 0.2) * diff; + isKeyDown = true; + } + + // If down arrow or "s" is down + if (keysDown[3] || keysDown[7]) { + // Pan down + config.pitch += (speed.pitch * 0.8 - 0.2) * diff; + isKeyDown = true; + } + + // If left arrow or "a" is down + if (keysDown[4] || keysDown[8]) { + // Pan left + config.yaw += (speed.yaw * 0.8 - 0.2) * diff; + isKeyDown = true; + } + + // If right arrow or "d" is down + if (keysDown[5] || keysDown[9]) { + // Pan right + config.yaw += (speed.yaw * 0.8 + 0.2) * diff; + isKeyDown = true; + } + + if (isKeyDown) + latestInteraction = Date.now(); + + // If auto-rotate + if (config.autoRotate) { + // Pan + if (newTime - prevTime > 0.001) { + var timeDiff = (newTime - prevTime) / 1000; + var yawDiff = (speed.yaw / timeDiff * diff - config.autoRotate * 0.2) * timeDiff; + yawDiff = (-config.autoRotate > 0 ? 1 : -1) * Math.min(Math.abs(config.autoRotate * timeDiff), Math.abs(yawDiff)); + config.yaw += yawDiff; + } + + // Deal with stopping auto rotation after a set delay + if (config.autoRotateStopDelay) { + config.autoRotateStopDelay -= newTime - prevTime; + if (config.autoRotateStopDelay <= 0) { + config.autoRotateStopDelay = false; + autoRotateSpeed = config.autoRotate; + config.autoRotate = 0; + } + } + } + + // Animated moves + if (animatedMove.pitch) { + animateMove('pitch'); + prevPitch = config.pitch; + } + if (animatedMove.yaw) { + animateMove('yaw'); + prevYaw = config.yaw; + } + if (animatedMove.hfov) { + animateMove('hfov'); + prevZoom = config.hfov; + } + + // "Inertia" + if (diff > 0 && !config.autoRotate) { + // "Friction" + var slowDownFactor = 1 - config.friction; + + // Yaw + if (!keysDown[4] && !keysDown[5] && !keysDown[8] && !keysDown[9] && !animatedMove.yaw) { + config.yaw += speed.yaw * diff * slowDownFactor; + } + // Pitch + if (!keysDown[2] && !keysDown[3] && !keysDown[6] && !keysDown[7] && !animatedMove.pitch) { + config.pitch += speed.pitch * diff * slowDownFactor; + } + // Zoom + if (!keysDown[0] && !keysDown[1] && !animatedMove.hfov) { + if (config.hfov > 90) { + // Slow down faster for wider HFOV + slowDownFactor *= 1 - (config.hfov - 90) / 90; + } + setHfov(config.hfov + speed.hfov * diff * slowDownFactor); + } + } + + prevTime = newTime; + if (diff > 0) { + speed.yaw = speed.yaw * 0.8 + (config.yaw - prevYaw) / diff * 0.2; + speed.pitch = speed.pitch * 0.8 + (config.pitch - prevPitch) / diff * 0.2; + speed.hfov = speed.hfov * 0.8 + (config.hfov - prevZoom) / diff * 0.2; + + // Limit speed + var maxSpeed = config.autoRotate ? Math.abs(config.autoRotate) : 5; + speed.yaw = Math.min(maxSpeed, Math.max(speed.yaw, -maxSpeed)); + speed.pitch = Math.min(maxSpeed, Math.max(speed.pitch, -maxSpeed)); + speed.hfov = Math.min(maxSpeed, Math.max(speed.hfov, -maxSpeed)); + } + + // Stop movement if opposite controls are pressed + if (keysDown[0] && keysDown[1]) { + speed.hfov = 0; + } + if ((keysDown[2] || keysDown[6]) && (keysDown[3] || keysDown[7])) { + speed.pitch = 0; + } + if ((keysDown[4] || keysDown[8]) && (keysDown[5] || keysDown[9])) { + speed.yaw = 0; + } +} + +/** + * Animates moves. + * @param {string} axis - Axis to animate + * @private + */ +function animateMove(axis) { + var t = animatedMove[axis]; + var normTime = Math.min(1, Math.max((Date.now() - t.startTime) / 1000 / (t.duration / 1000), 0)); + var result = t.startPosition + config.animationTimingFunction(normTime) * (t.endPosition - t.startPosition); + if ((t.endPosition > t.startPosition && result >= t.endPosition) || + (t.endPosition < t.startPosition && result <= t.endPosition) || + t.endPosition === t.startPosition) { + result = t.endPosition; + speed[axis] = 0; + delete animatedMove[axis]; + } + config[axis] = result; +} + +/** + * @param {number} t - Normalized time in animation + * @return {number} Position in animation + * @private + */ +function timingFunction(t) { + // easeInOutQuad from https://gist.github.com/gre/1650294 + return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; +} + +/** + * Event handler for document resizes. Updates viewer size and rerenders view. + * @private + */ +function onDocumentResize() { + // Resize panorama renderer (moved to onFullScreenChange) + //renderer.resize(); + //animateInit(); + + // Kludge to deal with WebKit regression: https://bugs.webkit.org/show_bug.cgi?id=93525 + onFullScreenChange('resize'); +} + +/** + * Initializes animation. + * @private + */ +function animateInit() { + if (animating) { + return; + } + animating = true; + animate(); +} + +/** + * Animates view, using requestAnimationFrame to trigger rendering. + * @private + */ +function animate() { + if (destroyed) { + return; + } + + render(); + if (autoRotateStart) + clearTimeout(autoRotateStart); + if (isUserInteracting || orientation === true) { + requestAnimationFrame(animate); + } else if (keysDown[0] || keysDown[1] || keysDown[2] || keysDown[3] || + keysDown[4] || keysDown[5] || keysDown[6] || keysDown[7] || + keysDown[8] || keysDown[9] || config.autoRotate || + animatedMove.pitch || animatedMove.yaw || animatedMove.hfov || + Math.abs(speed.yaw) > 0.01 || Math.abs(speed.pitch) > 0.01 || + Math.abs(speed.hfov) > 0.01) { + + keyRepeat(); + if (config.autoRotateInactivityDelay >= 0 && autoRotateSpeed && + Date.now() - latestInteraction > config.autoRotateInactivityDelay && + !config.autoRotate) { + config.autoRotate = autoRotateSpeed; + _this.lookAt(origPitch, undefined, origHfov, 3000); + } + requestAnimationFrame(animate); + } else if (renderer && (renderer.isLoading() || (config.dynamic === true && update))) { + requestAnimationFrame(animate); + } else { + if (_this.getPitch && _this.getYaw && _this.getHfov) + fireEvent('animatefinished', {pitch: _this.getPitch(), yaw: _this.getYaw(), hfov: _this.getHfov()}); + animating = false; + prevTime = undefined; + var autoRotateStartTime = config.autoRotateInactivityDelay - + (Date.now() - latestInteraction); + if (autoRotateStartTime > 0) { + autoRotateStart = setTimeout(function() { + config.autoRotate = autoRotateSpeed; + _this.lookAt(origPitch, undefined, origHfov, 3000); + animateInit(); + }, autoRotateStartTime); + } else if (config.autoRotateInactivityDelay >= 0 && autoRotateSpeed) { + config.autoRotate = autoRotateSpeed; + _this.lookAt(origPitch, undefined, origHfov, 3000); + animateInit(); + } + } +} + +/** + * Renders panorama view. + * @private + */ +function render() { + var tmpyaw; + + if (loaded) { + var canvas = renderer.getCanvas(); + + if (config.autoRotate !== false) { + // When auto-rotating this check needs to happen first (see issue #764) + if (config.yaw > 360) { + config.yaw -= 360; + } else if (config.yaw < -360) { + config.yaw += 360; + } + } + + // Keep a tmp value of yaw for autoRotate comparison later + tmpyaw = config.yaw; + + // Optionally avoid showing background (empty space) on left or right by adapting min/max yaw + var hoffcut = 0, + voffcut = 0; + if (config.avoidShowingBackground) { + var hfov2 = config.hfov / 2, + vfov2 = Math.atan2(Math.tan(hfov2 / 180 * Math.PI), (canvas.width / canvas.height)) * 180 / Math.PI, + transposed = config.vaov > config.haov; + if (transposed) { + voffcut = vfov2 * (1 - Math.min(Math.cos((config.pitch - hfov2) / 180 * Math.PI), + Math.cos((config.pitch + hfov2) / 180 * Math.PI))); + } else { + hoffcut = hfov2 * (1 - Math.min(Math.cos((config.pitch - vfov2) / 180 * Math.PI), + Math.cos((config.pitch + vfov2) / 180 * Math.PI))); + } + } + + // Ensure the yaw is within min and max allowed + var yawRange = config.maxYaw - config.minYaw, + minYaw = -180, + maxYaw = 180; + if (yawRange < 360) { + minYaw = config.minYaw + config.hfov / 2 + hoffcut; + maxYaw = config.maxYaw - config.hfov / 2 - hoffcut; + if (yawRange < config.hfov) { + // Lock yaw to average of min and max yaw when both can be seen at once + minYaw = maxYaw = (minYaw + maxYaw) / 2; + } + config.yaw = Math.max(minYaw, Math.min(maxYaw, config.yaw)); + } + + if (!(config.autoRotate !== false)) { + // When not auto-rotating, this check needs to happen after the + // previous check (see issue #698) + if (config.yaw > 360) { + config.yaw -= 360; + } else if (config.yaw < -360) { + config.yaw += 360; + } + } + + // Check if we autoRotate in a limited by min and max yaw + // If so reverse direction + if (config.autoRotate !== false && tmpyaw != config.yaw && + prevTime !== undefined) { // this condition prevents changing the direction initially + config.autoRotate *= -1; + } + + // Ensure the calculated pitch is within min and max allowed + var vfov = 2 * Math.atan(Math.tan(config.hfov / 180 * Math.PI * 0.5) / + (canvas.width / canvas.height)) / Math.PI * 180; + var minPitch = config.minPitch + vfov / 2, + maxPitch = config.maxPitch - vfov / 2; + var pitchRange = config.maxPitch - config.minPitch; + if (pitchRange < vfov) { + // Lock pitch to average of min and max pitch when both can be seen at once + minPitch = maxPitch = (minPitch + maxPitch) / 2; + } + if (isNaN(minPitch)) + minPitch = -90; + if (isNaN(maxPitch)) + maxPitch = 90; + config.pitch = Math.max(minPitch, Math.min(maxPitch, config.pitch)); + + renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {roll: config.roll * Math.PI / 180}); + + renderHotSpots(); + + // Update compass + if (config.compass) { + compass.style.transform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)'; + compass.style.webkitTransform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)'; + } + } +} + +/** + * Creates a new quaternion. + * @private + * @constructor + * @param {Number} w - W value + * @param {Number} x - X value + * @param {Number} y - Y value + * @param {Number} z - Z value + */ +function Quaternion(w, x, y, z) { + this.w = w; + this.x = x; + this.y = y; + this.z = z; +} + +/** + * Multiplies quaternions. + * @private + * @param {Quaternion} q - Quaternion to multiply + * @returns {Quaternion} Result of multiplication + */ +Quaternion.prototype.multiply = function(q) { + return new Quaternion(this.w*q.w - this.x*q.x - this.y*q.y - this.z*q.z, + this.x*q.w + this.w*q.x + this.y*q.z - this.z*q.y, + this.y*q.w + this.w*q.y + this.z*q.x - this.x*q.z, + this.z*q.w + this.w*q.z + this.x*q.y - this.y*q.x); +}; + +/** + * Converts quaternion to Euler angles. + * @private + * @returns {Number[]} [phi angle, theta angle, psi angle] + */ +Quaternion.prototype.toEulerAngles = function() { + var phi = Math.atan2(2 * (this.w * this.x + this.y * this.z), + 1 - 2 * (this.x * this.x + this.y * this.y)), + theta = Math.asin(2 * (this.w * this.y - this.z * this.x)), + psi = Math.atan2(2 * (this.w * this.z + this.x * this.y), + 1 - 2 * (this.y * this.y + this.z * this.z)); + return [phi, theta, psi]; +}; + +/** + * Converts device orientation API Tait-Bryan angles to a quaternion. + * @private + * @param {Number} alpha - Alpha angle (in degrees) + * @param {Number} beta - Beta angle (in degrees) + * @param {Number} gamma - Gamma angle (in degrees) + * @returns {Quaternion} Orientation quaternion + */ +function taitBryanToQuaternion(alpha, beta, gamma) { + var r = [beta ? beta * Math.PI / 180 / 2 : 0, + gamma ? gamma * Math.PI / 180 / 2 : 0, + alpha ? alpha * Math.PI / 180 / 2 : 0]; + var c = [Math.cos(r[0]), Math.cos(r[1]), Math.cos(r[2])], + s = [Math.sin(r[0]), Math.sin(r[1]), Math.sin(r[2])]; + + return new Quaternion(c[0]*c[1]*c[2] - s[0]*s[1]*s[2], + s[0]*c[1]*c[2] - c[0]*s[1]*s[2], + c[0]*s[1]*c[2] + s[0]*c[1]*s[2], + c[0]*c[1]*s[2] + s[0]*s[1]*c[2]); +} + +/** + * Computes current device orientation quaternion from device orientation API + * Tait-Bryan angles. + * @private + * @param {Number} alpha - Alpha angle (in degrees) + * @param {Number} beta - Beta angle (in degrees) + * @param {Number} gamma - Gamma angle (in degrees) + * @returns {Quaternion} Orientation quaternion + */ +function computeQuaternion(alpha, beta, gamma) { + // Convert Tait-Bryan angles to quaternion + var quaternion = taitBryanToQuaternion(alpha, beta, gamma); + // Apply world transform + quaternion = quaternion.multiply(new Quaternion(Math.sqrt(0.5), -Math.sqrt(0.5), 0, 0)); + // Apply screen transform + var angle = window.orientation ? -window.orientation * Math.PI / 180 / 2 : 0; + return quaternion.multiply(new Quaternion(Math.cos(angle), 0, -Math.sin(angle), 0)); +} + +/** + * Event handler for device orientation API. Controls pointing. + * @private + * @param {DeviceOrientationEvent} event - Device orientation event. + */ +function orientationListener(e) { + var q = computeQuaternion(e.alpha, e.beta, e.gamma).toEulerAngles(); + if (typeof(orientation) == 'number' && orientation < 10) { + // This kludge is necessary because iOS sometimes provides a few stale + // device orientation events when the listener is removed and then + // readded. Thus, we skip the first 10 events to prevent this from + // causing problems. + orientation += 1; + } else if (orientation === 10) { + // Record starting yaw to prevent jumping + orientationYawOffset = q[2] / Math.PI * 180 + config.yaw; + orientation = true; + requestAnimationFrame(animate); + } else { + config.pitch = q[0] / Math.PI * 180; + config.roll = -q[1] / Math.PI * 180; + config.yaw = -q[2] / Math.PI * 180 + orientationYawOffset; + } +} + +/** + * Initializes renderer. + * @private + */ +function renderInit() { + try { + var params = {}; + if (config.horizonPitch !== undefined) + params.horizonPitch = config.horizonPitch * Math.PI / 180; + if (config.horizonRoll !== undefined) + params.horizonRoll = config.horizonRoll * Math.PI / 180; + if (config.backgroundColor !== undefined) + params.backgroundColor = config.backgroundColor; + renderer.init(panoImage, config.type, config.dynamic, config.haov * Math.PI / 180, config.vaov * Math.PI / 180, config.vOffset * Math.PI / 180, renderInitCallback, params); + if (config.dynamic !== true) { + // Allow image to be garbage collected + panoImage = undefined; + } + } catch(event) { + // Panorama not loaded + + // Display error if there is a bad texture + if (event.type == 'webgl error' || event.type == 'no webgl') { + anError(); + } else if (event.type == 'webgl size error') { + anError(config.strings.textureSizeError.replace('%s', event.width).replace('%s', event.maxWidth)); + } else { + anError(config.strings.unknownError); + throw event; + } + } +} + +/** + * Triggered when render initialization finishes. Handles fading between + * scenes as well as showing the compass and hot spots and hiding the loading + * display. + * @private + */ +function renderInitCallback() { + // Fade if specified + if (config.sceneFadeDuration && renderer.fadeImg !== undefined) { + renderer.fadeImg.style.opacity = 0; + // Remove image + var fadeImg = renderer.fadeImg; + delete renderer.fadeImg; + setTimeout(function() { + renderContainer.removeChild(fadeImg); + fireEvent('scenechangefadedone'); + }, config.sceneFadeDuration); + } + + // Show compass if applicable + if (config.compass) { + compass.style.display = 'inline'; + } else { + compass.style.display = 'none'; + } + + // Show hotspots + createHotSpots(); + + // Hide loading display + infoDisplay.load.box.style.display = 'none'; + if (preview !== undefined) { + renderContainer.removeChild(preview); + preview = undefined; + } + loaded = true; + + animateInit(); + + fireEvent('load'); +} + +/** + * Creates hot spot element for the current scene. + * @private + * @param {Object} hs - The configuration for the hot spot + */ +function createHotSpot(hs) { + // Make sure hot spot pitch and yaw are numbers + hs.pitch = Number(hs.pitch) || 0; + hs.yaw = Number(hs.yaw) || 0; + + var div = document.createElement('div'); + div.className = 'pnlm-hotspot-base'; + if (hs.cssClass) + div.className += ' ' + hs.cssClass; + else + div.className += ' pnlm-hotspot pnlm-sprite pnlm-' + escapeHTML(hs.type); + + var span = document.createElement('span'); + if (hs.text) + span.innerHTML = escapeHTML(hs.text); + + var a; + if (hs.video) { + var video = document.createElement('video'), + vidp = hs.video; + if (config.basePath && !absoluteURL(vidp)) + vidp = config.basePath + vidp; + video.src = sanitizeURL(vidp); + video.controls = true; + video.style.width = hs.width + 'px'; + uiContainer.appendChild(div); + span.appendChild(video); + } else if (hs.image) { + var imgp = hs.image; + if (config.basePath && !absoluteURL(imgp)) + imgp = config.basePath + imgp; + a = document.createElement('a'); + a.href = sanitizeURL(hs.URL ? hs.URL : imgp, true); + if (config.targetBlank) { + a.target = '_blank'; + a.rel = 'noopener'; + } + span.appendChild(a); + var image = document.createElement('img'); + image.src = sanitizeURL(imgp); + image.style.width = hs.width + 'px'; + image.style.paddingTop = '5px'; + uiContainer.appendChild(div); + a.appendChild(image); + span.style.maxWidth = 'initial'; + } else if (hs.URL) { + a = document.createElement('a'); + a.href = sanitizeURL(hs.URL, true); + if (hs.attributes) { + for (var key in hs.attributes) { + a.setAttribute(key, hs.attributes[key]); + } + } else if (config.targetBlank) { + a.target = '_blank'; + a.rel = 'noopener'; + } + uiContainer.appendChild(a); + div.className += ' pnlm-pointer'; + span.className += ' pnlm-pointer'; + a.appendChild(div); + } else { + if (hs.sceneId) { + div.onclick = div.ontouchend = function() { + if (!div.clicked) { + div.clicked = true; + loadScene(hs.sceneId, hs.targetPitch, hs.targetYaw, hs.targetHfov); + } + return false; + }; + div.className += ' pnlm-pointer'; + span.className += ' pnlm-pointer'; + } + uiContainer.appendChild(div); + } + + if (hs.createTooltipFunc) { + hs.createTooltipFunc(div, hs.createTooltipArgs); + } else if (hs.text || hs.video || hs.image) { + div.classList.add('pnlm-tooltip'); + div.appendChild(span); + span.style.width = span.scrollWidth - 20 + 'px'; + span.style.marginLeft = -(span.scrollWidth - div.offsetWidth) / 2 + 'px'; + span.style.marginTop = -span.scrollHeight - 12 + 'px'; + } + if (hs.clickHandlerFunc) { + div.addEventListener('click', function(e) { + hs.clickHandlerFunc(e, hs.clickHandlerArgs); + }, 'false'); + if (document.documentElement.style.pointerAction === '' && + document.documentElement.style.touchAction === '') { + div.addEventListener('pointerup', function(e) { + hs.clickHandlerFunc(e, hs.clickHandlerArgs); + }, false); + } else { + div.addEventListener('touchend', function(e) { + hs.clickHandlerFunc(e, hs.clickHandlerArgs); + }, false); + } + div.className += ' pnlm-pointer'; + span.className += ' pnlm-pointer'; + } + if (hs.draggable) { + // Handle mouse by container event listeners + div.addEventListener('mousedown', function (e) { + if (hs.dragHandlerFunc) + hs.dragHandlerFunc(e, hs.dragHandlerArgs); + draggingHotSpot = hs; + }); + + if (document.documentElement.style.pointerAction === '' && + document.documentElement.style.touchAction === '') { + div.addEventListener('pointerdown', function (e) { + if (hs.dragHandlerFunc) + hs.dragHandlerFunc(e, hs.dragHandlerArgs); + draggingHotSpot = hs; + }); + } + + // Handle touch events by hotspot event listener + div.addEventListener('touchmove', function(e) { + moveHotSpot(hs, e.targetTouches[0]); + }); + div.addEventListener('touchend', function (e) { + if (hs.dragHandlerFunc) + hs.dragHandlerFunc(e, hs.dragHandlerArgs); + draggingHotSpot = null; + }); + } + + hs.div = div; +} + +/** + * Moves a curently displayed hot spot. + * @private + * @param {Object} hs - Hot spot to move. + * @param {MouseEvent} event - Mouse event to get coordinates from. + */ +function moveHotSpot(hs, event){ + var coords = mouseEventToCoords(event); + hs.pitch = coords[0]; + hs.yaw = coords[1]; + renderHotSpot(hs); +} + +/** + * Creates hot spot elements for the current scene. + * @private + */ +function createHotSpots() { + if (hotspotsCreated) return; + + if (!config.hotSpots) { + config.hotSpots = []; + } else { + // Sort by pitch so tooltip is never obscured by another hot spot + config.hotSpots = config.hotSpots.sort(function(a, b) { + return a.pitch < b.pitch; + }); + config.hotSpots.forEach(createHotSpot); + } + hotspotsCreated = true; + renderHotSpots(); +} + +/** + * Destroys currently created hot spot elements. + * @private + */ +function destroyHotSpots() { + var hs = config.hotSpots; + hotspotsCreated = false; + delete config.hotSpots; + if (hs) { + for (var i = 0; i < hs.length; i++) { + var current = hs[i].div; + if (current) { + while (current.parentNode && current.parentNode != uiContainer) { + current = current.parentNode; + } + uiContainer.removeChild(current); + } + delete hs[i].div; + } + } +} + +/** + * Renders hot spot, updating its position and visibility. + * @private + */ +function renderHotSpot(hs) { + var hsPitchSin = Math.sin(hs.pitch * Math.PI / 180), + hsPitchCos = Math.cos(hs.pitch * Math.PI / 180), + configPitchSin = Math.sin(config.pitch * Math.PI / 180), + configPitchCos = Math.cos(config.pitch * Math.PI / 180), + yawCos = Math.cos((-hs.yaw + config.yaw) * Math.PI / 180); + var z = hsPitchSin * configPitchSin + hsPitchCos * yawCos * configPitchCos; + if ((hs.yaw <= 90 && hs.yaw > -90 && z <= 0) || + ((hs.yaw > 90 || hs.yaw <= -90) && z <= 0)) { + hs.div.style.visibility = 'hidden'; + } else { + var yawSin = Math.sin((-hs.yaw + config.yaw) * Math.PI / 180), + hfovTan = Math.tan(config.hfov * Math.PI / 360); + hs.div.style.visibility = 'visible'; + // Subpixel rendering doesn't work in Firefox + // https://bugzilla.mozilla.org/show_bug.cgi?id=739176 + var canvas = renderer.getCanvas(), + canvasWidth = canvas.clientWidth, + canvasHeight = canvas.clientHeight; + var coord = [-canvasWidth / hfovTan * yawSin * hsPitchCos / z / 2, + -canvasWidth / hfovTan * (hsPitchSin * configPitchCos - + hsPitchCos * yawCos * configPitchSin) / z / 2]; + // Apply roll + var rollSin = Math.sin(config.roll * Math.PI / 180), + rollCos = Math.cos(config.roll * Math.PI / 180); + coord = [coord[0] * rollCos - coord[1] * rollSin, + coord[0] * rollSin + coord[1] * rollCos]; + // Apply transform + coord[0] += (canvasWidth - hs.div.offsetWidth) / 2; + coord[1] += (canvasHeight - hs.div.offsetHeight) / 2; + var transform = 'translate(' + coord[0] + 'px, ' + coord[1] + + 'px) translateZ(9999px) rotate(' + config.roll + 'deg)'; + if (hs.scale) { + transform += ' scale(' + (origHfov/config.hfov) / z + ')'; + } + hs.div.style.webkitTransform = transform; + hs.div.style.MozTransform = transform; + hs.div.style.transform = transform; + } +} + +/** + * Renders hot spots, updating their positions and visibility. + * @private + */ +function renderHotSpots() { + config.hotSpots.forEach(renderHotSpot); +} + +/** + * Merges a scene configuration into the current configuration. + * @private + * @param {string} sceneId - Identifier of scene configuration to merge in. + */ +function mergeConfig(sceneId) { + config = {}; + var k, s; + var photoSphereExcludes = ['haov', 'vaov', 'vOffset', 'northOffset', 'horizonPitch', 'horizonRoll']; + specifiedPhotoSphereExcludes = []; + + // Merge default config + for (k in defaultConfig) { + if (defaultConfig.hasOwnProperty(k)) { + config[k] = defaultConfig[k]; + } + } + + // Merge default scene config + for (k in initialConfig.default) { + if (initialConfig.default.hasOwnProperty(k)) { + if (k == 'strings') { + for (s in initialConfig.default.strings) { + if (initialConfig.default.strings.hasOwnProperty(s)) { + config.strings[s] = escapeHTML(initialConfig.default.strings[s]); + } + } + } else { + config[k] = initialConfig.default[k]; + if (photoSphereExcludes.indexOf(k) >= 0) { + specifiedPhotoSphereExcludes.push(k); + } + } + } + } + + // Merge current scene config + if ((sceneId !== null) && (sceneId !== '') && (initialConfig.scenes) && (initialConfig.scenes[sceneId])) { + var scene = initialConfig.scenes[sceneId]; + for (k in scene) { + if (scene.hasOwnProperty(k)) { + if (k == 'strings') { + for (s in scene.strings) { + if (scene.strings.hasOwnProperty(s)) { + config.strings[s] = escapeHTML(scene.strings[s]); + } + } + } else { + config[k] = scene[k]; + if (photoSphereExcludes.indexOf(k) >= 0) { + specifiedPhotoSphereExcludes.push(k); + } + } + } + } + config.scene = sceneId; + } + + // Merge initial config + for (k in initialConfig) { + if (initialConfig.hasOwnProperty(k)) { + if (k == 'strings') { + for (s in initialConfig.strings) { + if (initialConfig.strings.hasOwnProperty(s)) { + config.strings[s] = escapeHTML(initialConfig.strings[s]); + } + } + } else { + config[k] = initialConfig[k]; + if (photoSphereExcludes.indexOf(k) >= 0) { + specifiedPhotoSphereExcludes.push(k); + } + } + } + } +} + +/** + * Processes configuration options. + * @param {boolean} [isPreview] - Whether or not the preview is being displayed + * @private + */ +function processOptions(isPreview) { + isPreview = isPreview ? isPreview : false; + + // Process preview first so it always loads before the browser hits its + // maximum number of connections to a server as can happen with cubic + // panoramas + if (isPreview && 'preview' in config) { + var p = config.preview; + if (config.basePath && !absoluteURL(p)) + p = config.basePath + p; + preview = document.createElement('div'); + preview.className = 'pnlm-preview-img'; + preview.style.backgroundImage = "url('" + sanitizeURLForCss(p) + "')"; + renderContainer.appendChild(preview); + } + + // Handle different preview values + var title = config.title, + author = config.author; + if (isPreview) { + if ('previewTitle' in config) + config.title = config.previewTitle; + if ('previewAuthor' in config) + config.author = config.previewAuthor; + } + + // Reset title / author display + if (!config.hasOwnProperty('title')) + infoDisplay.title.innerHTML = ''; + if (!config.hasOwnProperty('author')) + infoDisplay.author.innerHTML = ''; + if (!config.hasOwnProperty('title') && !config.hasOwnProperty('author')) + infoDisplay.container.style.display = 'none'; + if (config.targetBlank) { + aboutMsgLink.rel = 'noopener'; + aboutMsgLink.target = '_blank'; + } + + // Fill in load button label and loading box text + controls.load.innerHTML = '

' + config.strings.loadButtonLabel + '

'; + infoDisplay.load.boxp.innerHTML = config.strings.loadingLabel; + + // Process other options + for (var key in config) { + if (config.hasOwnProperty(key)) { + switch(key) { + case 'title': + infoDisplay.title.innerHTML = escapeHTML(config[key]); + infoDisplay.container.style.display = 'inline'; + break; + + case 'author': + var authorText = escapeHTML(config[key]); + if (config.authorURL) { + var authorLink = document.createElement('a'); + authorLink.href = sanitizeURL(config.authorURL, true); + if (config.targetBlank) { + authorLink.target = '_blank'; + authorLink.rel = 'noopener'; + } + authorLink.innerHTML = escapeHTML(config[key]); + authorText = authorLink.outerHTML; + } + infoDisplay.author.innerHTML = config.strings.bylineLabel.replace('%s', authorText); + infoDisplay.container.style.display = 'inline'; + break; + + case 'fallback': + var link = document.createElement('a'); + link.href = sanitizeURL(config[key], true); + if (config.targetBlank) { + link.target = '_blank'; + link.rel = 'noopener'; + } + link.textContent = 'Click here to view this panorama in an alternative viewer.'; + var message = document.createElement('p'); + message.textContent = 'Your browser does not support WebGL.'; + message.appendChild(document.createElement('br')); + message.appendChild(link); + infoDisplay.errorMsg.innerHTML = ''; // Removes all children nodes + infoDisplay.errorMsg.appendChild(message); + break; + + case 'hfov': + setHfov(Number(config[key])); + break; + + case 'autoLoad': + if (config[key] === true && renderer === undefined) { + // Show loading box + infoDisplay.load.box.style.display = 'inline'; + // Hide load button + controls.load.style.display = 'none'; + // Initialize + init(); + } + break; + + case 'showZoomCtrl': + if (config[key] && config.showControls !== false) { + // Show zoom controls + controls.zoom.style.display = 'block'; + } else { + // Hide zoom controls + controls.zoom.style.display = 'none'; + } + break; + + case 'showFullscreenCtrl': + if (config[key] && config.showControls !== false && ('fullscreen' in document || 'mozFullScreen' in document || + 'webkitIsFullScreen' in document || 'msFullscreenElement' in document)) { + + // Show fullscreen control + controls.fullscreen.style.display = 'block'; + } else { + // Hide fullscreen control + controls.fullscreen.style.display = 'none'; + } + break; + + case 'hotSpotDebug': + if (config[key]) + hotSpotDebugIndicator.style.display = 'block'; + else + hotSpotDebugIndicator.style.display = 'none'; + break; + + case 'showControls': + if (!config[key]) { + controls.orientation.style.display = 'none'; + controls.zoom.style.display = 'none'; + controls.fullscreen.style.display = 'none'; + } + break; + + case 'orientationOnByDefault': + if (config[key]) + startOrientation(); + break; + } + } + } + + if (isPreview) { + // Restore original values if changed for preview + if (title) + config.title = title; + else + delete config.title; + if (author) + config.author = author; + else + delete config.author; + } +} + +/** + * Toggles fullscreen mode. + * @private + */ +function toggleFullscreen() { + if (loaded && !error) { + if (!fullscreenActive) { + try { + if (container.requestFullscreen) { + container.requestFullscreen(); + } else if (container.mozRequestFullScreen) { + container.mozRequestFullScreen(); + } else if (container.msRequestFullscreen) { + container.msRequestFullscreen(); + } else { + container.webkitRequestFullScreen(); + } + } catch(event) { + // Fullscreen doesn't work + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + } + } +} + +/** + * Event handler for fullscreen changes. + * @private + */ +function onFullScreenChange(resize) { + if (document.fullscreenElement || document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) { + controls.fullscreen.classList.add('pnlm-fullscreen-toggle-button-active'); + fullscreenActive = true; + } else { + controls.fullscreen.classList.remove('pnlm-fullscreen-toggle-button-active'); + fullscreenActive = false; + } + if (resize !== 'resize') + fireEvent('fullscreenchange', fullscreenActive); + // Resize renderer (deal with browser quirks and fixes #155) + renderer.resize(); + setHfov(config.hfov); + animateInit(); +} + +/** + * Increases panorama zoom. For use with zoom button. + * @private + */ +function zoomIn() { + if (loaded) { + setHfov(config.hfov - 5); + animateInit(); + } +} + +/** + * Decreases panorama zoom. For use with zoom button. + * @private + */ +function zoomOut() { + if (loaded) { + setHfov(config.hfov + 5); + animateInit(); + } +} + +/** + * Clamps horizontal field of view to viewer's limits. + * @private + * @param {number} hfov - Input horizontal field of view (in degrees) + * @return {number} - Clamped horizontal field of view (in degrees) + */ +function constrainHfov(hfov) { + // Keep field of view within bounds + var minHfov = config.minHfov; + if (config.type == 'multires' && renderer && !config.multiResMinHfov) { + minHfov = Math.min(minHfov, renderer.getCanvas().width / (config.multiRes.cubeResolution / 90 * 0.9)); + } + if (minHfov > config.maxHfov) { + // Don't change view if bounds don't make sense + console.log('HFOV bounds do not make sense (minHfov > maxHfov).'); + return config.hfov; + } + var newHfov = config.hfov; + if (hfov < minHfov) { + newHfov = minHfov; + } else if (hfov > config.maxHfov) { + newHfov = config.maxHfov; + } else { + newHfov = hfov; + } + // Optionally avoid showing background (empty space) on top or bottom by adapting newHfov + if (config.avoidShowingBackground && renderer && !isNaN(config.maxPitch - config.minPitch)) { + var canvas = renderer.getCanvas(); + newHfov = Math.min(newHfov, + Math.atan(Math.tan((config.maxPitch - config.minPitch) / 360 * Math.PI) / + canvas.height * canvas.width) * 360 / Math.PI); + } + return newHfov; +} + +/** + * Sets viewer's horizontal field of view. + * @private + * @param {number} hfov - Desired horizontal field of view in degrees. + */ +function setHfov(hfov) { + config.hfov = constrainHfov(hfov); + fireEvent('zoomchange', config.hfov); +} + +/** + * Stops auto rotation and animated moves. + * @private + */ +function stopAnimation() { + animatedMove = {}; + autoRotateSpeed = config.autoRotate ? config.autoRotate : autoRotateSpeed; + config.autoRotate = false; +} + +/** + * Loads panorama. + * @private + */ +function load() { + // Since WebGL error handling is very general, first we clear any error box + // since it is a new scene and the error from previous maybe because of lacking + // memory etc and not because of a lack of WebGL support etc + clearError(); + loaded = false; + + clearInteractionMessage(); + controls.load.style.display = 'none'; + infoDisplay.load.box.style.display = 'inline'; + init(); +} + +/** + * Loads scene. + * @private + * @param {string} sceneId - Identifier of scene configuration to merge in. + * @param {number} targetPitch - Pitch viewer should be centered on once scene loads. + * @param {number} targetYaw - Yaw viewer should be centered on once scene loads. + * @param {number} targetHfov - HFOV viewer should use once scene loads. + * @param {boolean} [fadeDone] - If `true`, fade setup is skipped. + */ +function loadScene(sceneId, targetPitch, targetYaw, targetHfov, fadeDone) { + if (!loaded) + fadeDone = true; // Don't try to fade when there isn't a scene loaded + loaded = false; + animatedMove = {}; + + // Set up fade if specified + var fadeImg, workingPitch, workingYaw, workingHfov; + if (config.sceneFadeDuration && !fadeDone) { + var data = renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {returnImage: 'ImageBitmap'}); + if (data !== undefined) { + if (data.then) + fadeImg = document.createElement('canvas'); + else + fadeImg = new Image(); // ImageBitmap isn't supported + fadeImg.className = 'pnlm-fade-img'; + fadeImg.style.transition = 'opacity ' + (config.sceneFadeDuration / 1000) + 's'; + fadeImg.style.width = '100%'; + fadeImg.style.height = '100%'; + if (data.then) { + data.then(function(img) { + fadeImg.width = img.width; + fadeImg.height = img.height; + fadeImg.getContext('2d').drawImage(img, 0, 0); + loadScene(sceneId, targetPitch, targetYaw, targetHfov, true); + }); + } else { + fadeImg.onload = function() { + loadScene(sceneId, targetPitch, targetYaw, targetHfov, true); + }; + fadeImg.src = data; + } + renderContainer.appendChild(fadeImg); + renderer.fadeImg = fadeImg; + return; + } + } + + // Set new pointing + if (targetPitch === 'same') { + workingPitch = config.pitch; + } else { + workingPitch = targetPitch; + } + if (targetYaw === 'same') { + workingYaw = config.yaw; + } else if (targetYaw === 'sameAzimuth') { + workingYaw = config.yaw + (config.northOffset || 0) - (initialConfig.scenes[sceneId].northOffset || 0); + } else { + workingYaw = targetYaw; + } + if (targetHfov === 'same') { + workingHfov = config.hfov; + } else { + workingHfov = targetHfov; + } + + // Destroy hot spots from previous scene + destroyHotSpots(); + + // Create the new config for the scene + mergeConfig(sceneId); + + // Stop motion + speed.yaw = speed.pitch = speed.hfov = 0; + + // Reload scene + processOptions(); + if (workingPitch !== undefined) { + config.pitch = workingPitch; + } + if (workingYaw !== undefined) { + config.yaw = workingYaw; + } + if (workingHfov !== undefined) { + config.hfov = workingHfov; + } + fireEvent('scenechange', sceneId); + load(); +} + +/** + * Stop using device orientation. + * @private + */ +function stopOrientation() { + window.removeEventListener('deviceorientation', orientationListener); + controls.orientation.classList.remove('pnlm-orientation-button-active'); + orientation = false; +} + +/** + * Start using device orientation. + * @private + */ +function startOrientation() { + if (!orientationSupport) + return; + if (typeof DeviceMotionEvent !== 'undefined' && + typeof DeviceMotionEvent.requestPermission === 'function') { + DeviceOrientationEvent.requestPermission().then(function(response) { + if (response == 'granted') { + orientation = 1; + window.addEventListener('deviceorientation', orientationListener); + controls.orientation.classList.add('pnlm-orientation-button-active'); + } + }); + } else { + orientation = 1; + window.addEventListener('deviceorientation', orientationListener); + controls.orientation.classList.add('pnlm-orientation-button-active'); + } +} + +/** + * Escapes HTML string (to mitigate possible DOM XSS attacks). + * @private + * @param {string} s - String to escape + * @returns {string} Escaped string + */ +function escapeHTML(s) { + if (!initialConfig.escapeHTML) + return String(s).split('\n').join('
'); + return String(s).split(/&/g).join('&') + .split('"').join('"') + .split("'").join(''') + .split('<').join('<') + .split('>').join('>') + .split('/').join('/') + .split('\n').join('
'); // Allow line breaks +} + +/** + * Removes possibility of XSS attacks with URLs. + * The URL cannot be of protocol 'javascript'. + * @private + * @param {string} url - URL to sanitize + * @param {boolean} href - True if URL is for link (blocks data URIs) + * @returns {string} Sanitized URL + */ +function sanitizeURL(url, href) { + try { + var decoded_url = decodeURIComponent(unescape(url)).replace(/[^\w:]/g, '').toLowerCase(); + } catch (e) { + return 'about:blank'; + } + if (decoded_url.indexOf('javascript:') === 0 || + decoded_url.indexOf('vbscript:') === 0) { + console.log('Script URL removed.'); + return 'about:blank'; + } + if (href && decoded_url.indexOf('data:') === 0) { + console.log('Data URI removed from link.'); + return 'about:blank'; + } + return url; +} + +/** + * Unescapes HTML entities. + * Copied from Marked.js 0.7.0. + * @private + * @param {string} url - URL to sanitize + * @param {boolean} href - True if URL is for link (blocks data URIs) + * @returns {string} Sanitized URL + */ +function unescape(html) { + // Explicitly match decimal, hex, and named HTML entities + return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig, function(_, n) { + n = n.toLowerCase(); + if (n === 'colon') return ':'; + if (n.charAt(0) === '#') { + return n.charAt(1) === 'x' ? String.fromCharCode(parseInt(n.substring(2), 16)) : String.fromCharCode(+n.substring(1)); + } + return ''; + }); +} + +/** + * Removes possibility of XSS attacks with URLs for CSS. + * The URL will be sanitized with `sanitizeURL()` and single quotes + * and double quotes escaped. + * @private + * @param {string} url - URL to sanitize + * @returns {string} Sanitized URL + */ +function sanitizeURLForCss(url) { + return sanitizeURL(url) + .replace(/"/g, '%22') + .replace(/'/g, '%27'); +} + +/** + * Checks whether or not a panorama is loaded. + * @memberof Viewer + * @instance + * @returns {boolean} `true` if a panorama is loaded, else `false` + */ +this.isLoaded = function() { + return Boolean(loaded); +}; + +/** + * Returns the pitch of the center of the view. + * @memberof Viewer + * @instance + * @returns {number} Pitch in degrees + */ +this.getPitch = function() { + return config.pitch; +}; + +/** + * Sets the pitch of the center of the view. + * @memberof Viewer + * @instance + * @param {number} pitch - Pitch in degrees + * @param {boolean|number} [animated=1000] - Animation duration in milliseconds or false for no animation + * @param {function} [callback] - Function to call when animation finishes + * @param {object} [callbackArgs] - Arguments to pass to callback function + * @returns {Viewer} `this` + */ +this.setPitch = function(pitch, animated, callback, callbackArgs) { + latestInteraction = Date.now(); + if (Math.abs(pitch - config.pitch) <= eps) { + if (typeof callback == 'function') + callback(callbackArgs); + return this; + } + animated = animated === undefined ? 1000: Number(animated); + if (animated) { + animatedMove.pitch = { + 'startTime': Date.now(), + 'startPosition': config.pitch, + 'endPosition': pitch, + 'duration': animated + }; + if (typeof callback == 'function') + setTimeout(function(){callback(callbackArgs);}, animated); + } else { + config.pitch = pitch; + } + animateInit(); + return this; +}; + +/** + * Returns the minimum and maximum allowed pitches (in degrees). + * @memberof Viewer + * @instance + * @returns {number[]} [minimum pitch, maximum pitch] + */ +this.getPitchBounds = function() { + return [config.minPitch, config.maxPitch]; +}; + +/** + * Set the minimum and maximum allowed pitches (in degrees). + * @memberof Viewer + * @instance + * @param {number[]} bounds - [minimum pitch, maximum pitch] + * @returns {Viewer} `this` + */ +this.setPitchBounds = function(bounds) { + config.minPitch = Math.max(-90, Math.min(bounds[0], 90)); + config.maxPitch = Math.max(-90, Math.min(bounds[1], 90)); + return this; +}; + +/** + * Returns the yaw of the center of the view. + * @memberof Viewer + * @instance + * @returns {number} Yaw in degrees + */ +this.getYaw = function() { + return (config.yaw + 540) % 360 - 180; +}; + +/** + * Sets the yaw of the center of the view. + * @memberof Viewer + * @instance + * @param {number} yaw - Yaw in degrees [-180, 180] + * @param {boolean|number} [animated=1000] - Animation duration in milliseconds or false for no animation + * @param {function} [callback] - Function to call when animation finishes + * @param {object} [callbackArgs] - Arguments to pass to callback function + * @returns {Viewer} `this` + */ +this.setYaw = function(yaw, animated, callback, callbackArgs) { + latestInteraction = Date.now(); + if (Math.abs(yaw - config.yaw) <= eps) { + if (typeof callback == 'function') + callback(callbackArgs); + return this; + } + animated = animated === undefined ? 1000: Number(animated); + yaw = ((yaw + 180) % 360) - 180; // Keep in bounds + if (animated) { + // Animate in shortest direction + if (config.yaw - yaw > 180) + yaw += 360; + else if (yaw - config.yaw > 180) + yaw -= 360; + + animatedMove.yaw = { + 'startTime': Date.now(), + 'startPosition': config.yaw, + 'endPosition': yaw, + 'duration': animated + }; + if (typeof callback == 'function') + setTimeout(function(){callback(callbackArgs);}, animated); + } else { + config.yaw = yaw; + } + animateInit(); + return this; +}; + +/** + * Returns the minimum and maximum allowed pitches (in degrees). + * @memberof Viewer + * @instance + * @returns {number[]} [yaw pitch, maximum yaw] + */ +this.getYawBounds = function() { + return [config.minYaw, config.maxYaw]; +}; + +/** + * Set the minimum and maximum allowed yaws (in degrees [-360, 360]). + * @memberof Viewer + * @instance + * @param {number[]} bounds - [minimum yaw, maximum yaw] + * @returns {Viewer} `this` + */ +this.setYawBounds = function(bounds) { + config.minYaw = Math.max(-360, Math.min(bounds[0], 360)); + config.maxYaw = Math.max(-360, Math.min(bounds[1], 360)); + return this; +}; + +/** + * Returns the horizontal field of view. + * @memberof Viewer + * @instance + * @returns {number} Horizontal field of view in degrees + */ +this.getHfov = function() { + return config.hfov; +}; + +/** + * Sets the horizontal field of view. + * @memberof Viewer + * @instance + * @param {number} hfov - Horizontal field of view in degrees + * @param {boolean|number} [animated=1000] - Animation duration in milliseconds or false for no animation + * @param {function} [callback] - Function to call when animation finishes + * @param {object} [callbackArgs] - Arguments to pass to callback function + * @returns {Viewer} `this` + */ +this.setHfov = function(hfov, animated, callback, callbackArgs) { + latestInteraction = Date.now(); + if (Math.abs(hfov - config.hfov) <= eps) { + if (typeof callback == 'function') + callback(callbackArgs); + return this; + } + animated = animated === undefined ? 1000: Number(animated); + if (animated) { + animatedMove.hfov = { + 'startTime': Date.now(), + 'startPosition': config.hfov, + 'endPosition': constrainHfov(hfov), + 'duration': animated + }; + if (typeof callback == 'function') + setTimeout(function(){callback(callbackArgs);}, animated); + } else { + setHfov(hfov); + } + animateInit(); + return this; +}; + +/** + * Returns the minimum and maximum allowed horizontal fields of view + * (in degrees). + * @memberof Viewer + * @instance + * @returns {number[]} [minimum HFOV, maximum HFOV] + */ +this.getHfovBounds = function() { + return [config.minHfov, config.maxHfov]; +}; + +/** + * Set the minimum and maximum allowed horizontal fields of view (in degrees). + * @memberof Viewer + * @instance + * @param {number[]} bounds - [minimum HFOV, maximum HFOV] + * @returns {Viewer} `this` + */ +this.setHfovBounds = function(bounds) { + config.minHfov = Math.max(0, bounds[0]); + config.maxHfov = Math.max(0, bounds[1]); + return this; +}; + +/** + * Set a new view. Any parameters not specified remain the same. + * @memberof Viewer + * @instance + * @param {number} [pitch] - Target pitch + * @param {number} [yaw] - Target yaw + * @param {number} [hfov] - Target HFOV + * @param {boolean|number} [animated=1000] - Animation duration in milliseconds or false for no animation + * @param {function} [callback] - Function to call when animation finishes + * @param {object} [callbackArgs] - Arguments to pass to callback function + * @returns {Viewer} `this` + */ +this.lookAt = function(pitch, yaw, hfov, animated, callback, callbackArgs) { + animated = animated === undefined ? 1000: Number(animated); + if (pitch !== undefined && Math.abs(pitch - config.pitch) > eps) { + this.setPitch(pitch, animated, callback, callbackArgs); + callback = undefined; + } + if (yaw !== undefined && Math.abs(yaw - config.yaw) > eps) { + this.setYaw(yaw, animated, callback, callbackArgs); + callback = undefined; + } + if (hfov !== undefined && Math.abs(hfov - config.hfov) > eps) { + this.setHfov(hfov, animated, callback, callbackArgs); + callback = undefined; + } + if (typeof callback == 'function') + callback(callbackArgs); + return this; +}; + +/** + * Returns the panorama's north offset. + * @memberof Viewer + * @instance + * @returns {number} North offset in degrees + */ +this.getNorthOffset = function() { + return config.northOffset; +}; + +/** + * Sets the panorama's north offset. + * @memberof Viewer + * @instance + * @param {number} heading - North offset in degrees + * @returns {Viewer} `this` + */ +this.setNorthOffset = function(heading) { + config.northOffset = Math.min(360, Math.max(0, heading)); + animateInit(); + return this; +}; + +/** + * Returns the panorama's horizon roll. + * @memberof Viewer + * @instance + * @returns {number} Horizon roll in degrees + */ +this.getHorizonRoll = function() { + return config.horizonRoll; +}; + +/** + * Sets the panorama's horizon roll. + * @memberof Viewer + * @instance + * @param {number} roll - Horizon roll in degrees [-90, 90] + * @returns {Viewer} `this` + */ +this.setHorizonRoll = function(roll) { + config.horizonRoll = Math.min(90, Math.max(-90, roll)); + renderer.setPose(config.horizonPitch * Math.PI / 180, config.horizonRoll * Math.PI / 180); + animateInit(); + return this; +}; + +/** + * Returns the panorama's horizon pitch. + * @memberof Viewer + * @instance + * @returns {number} Horizon pitch in degrees + */ +this.getHorizonPitch = function() { + return config.horizonPitch; +}; + +/** + * Sets the panorama's horizon pitch. + * @memberof Viewer + * @instance + * @param {number} pitch - Horizon pitch in degrees [-90, 90] + * @returns {Viewer} `this` + */ +this.setHorizonPitch = function(pitch) { + config.horizonPitch = Math.min(90, Math.max(-90, pitch)); + renderer.setPose(config.horizonPitch * Math.PI / 180, config.horizonRoll * Math.PI / 180); + animateInit(); + return this; +}; + +/** + * Start auto rotation. + * + * Before starting rotation, the viewer is panned to `pitch`. + * @memberof Viewer + * @instance + * @param {number} [speed] - Auto rotation speed / direction. If not specified, previous value is used. + * @param {number} [pitch] - The pitch to rotate at. If not specified, initial pitch is used. + * @param {number} [hfov] - The HFOV to rotate at. If not specified, initial HFOV is used. + * @param {number} [inactivityDelay] - The delay, in milliseconds, after which + * to automatically restart auto rotation if it is interupted by the user. + * If not specified, auto rotation will not automatically restart after it + * is stopped. + * @returns {Viewer} `this` + */ +this.startAutoRotate = function(speed, pitch, hfov, inactivityDelay) { + speed = speed || autoRotateSpeed || 1; + pitch = pitch === undefined ? origPitch : pitch; + hfov = hfov === undefined ? origHfov : hfov; + config.autoRotate = speed; + if (inactivityDelay !== undefined) + config.autoRotateInactivityDelay = inactivityDelay; + _this.lookAt(pitch, undefined, hfov, 3000); + animateInit(); + return this; +}; + +/** + * Stop auto rotation. + * @memberof Viewer + * @instance + * @returns {Viewer} `this` + */ +this.stopAutoRotate = function() { + autoRotateSpeed = config.autoRotate ? config.autoRotate : autoRotateSpeed; + config.autoRotate = false; + config.autoRotateInactivityDelay = -1; + return this; +}; + +/** + * Stops all movement. + * @memberof Viewer + * @instance + */ +this.stopMovement = function() { + stopAnimation(); + speed = {'yaw': 0, 'pitch': 0, 'hfov': 0}; +}; + +/** + * Returns the panorama renderer. + * @memberof Viewer + * @instance + * @returns {Renderer} + */ +this.getRenderer = function() { + return renderer; +}; + +/** + * Sets update flag for dynamic content. + * @memberof Viewer + * @instance + * @param {boolean} bool - Whether or not viewer should update even when still + * @returns {Viewer} `this` + */ +this.setUpdate = function(bool) { + update = bool === true; + if (renderer === undefined) + onImageLoad(); + else + animateInit(); + return this; +}; + +/** + * Calculate panorama pitch and yaw from location of mouse event. + * @memberof Viewer + * @instance + * @param {MouseEvent} event - Document mouse down event. + * @returns {number[]} [pitch, yaw] + */ +this.mouseEventToCoords = function(event) { + return mouseEventToCoords(event); +}; + +/** + * Change scene being viewed. + * @memberof Viewer + * @instance + * @param {string} sceneId - Identifier of scene to switch to. + * @param {number} [pitch] - Pitch to use with new scene + * @param {number} [yaw] - Yaw to use with new scene + * @param {number} [hfov] - HFOV to use with new scene + * @returns {Viewer} `this` + */ +this.loadScene = function(sceneId, pitch, yaw, hfov) { + if (loaded !== false) + loadScene(sceneId, pitch, yaw, hfov); + return this; +}; + +/** + * Get ID of current scene. + * @memberof Viewer + * @instance + * @returns {string} ID of current scene + */ +this.getScene = function() { + return config.scene; +}; + +/** + * Add a new scene. + * @memberof Viewer + * @instance + * @param {string} sceneId - The ID of the new scene + * @param {Object} config - The configuration of the new scene + * @returns {Viewer} `this` + */ +this.addScene = function(sceneId, config) { + initialConfig.scenes[sceneId] = config; + return this; +}; + +/** + * Remove a scene. + * @memberof Viewer + * @instance + * @param {string} sceneId - The ID of the scene + * @returns {boolean} False if the scene is the current scene or if the scene doesn't exists, else true + */ +this.removeScene = function(sceneId) { + if (config.scene === sceneId || !initialConfig.scenes.hasOwnProperty(sceneId)) + return false; + delete initialConfig.scenes[sceneId]; + return true; +}; + +/** + * Toggle fullscreen. + * @memberof Viewer + * @instance + * @returns {Viewer} `this` + */ +this.toggleFullscreen = function() { + toggleFullscreen(); + return this; +}; + +/** + * Get configuration of current scene. + * @memberof Viewer + * @instance + * @returns {Object} Configuration of current scene + */ +this.getConfig = function() { + return config; +}; + +/** + * Get viewer's container element. + * @memberof Viewer + * @instance + * @returns {HTMLElement} Container `div` element + */ +this.getContainer = function() { + return container; +}; + +/** + * Add a new hot spot. + * @memberof Viewer + * @instance + * @param {Object} hs - The configuration for the hot spot + * @param {string} [sceneId] - Adds hot spot to specified scene if provided, else to current scene + * @returns {Viewer} `this` + * @throws Throws an error if the scene ID is provided but invalid + */ +this.addHotSpot = function(hs, sceneId) { + if (sceneId === undefined && config.scene === undefined) { + // Not a tour + config.hotSpots.push(hs); + } else { + // Tour + var id = sceneId !== undefined ? sceneId : config.scene; + if (initialConfig.scenes.hasOwnProperty(id)) { + if (!initialConfig.scenes[id].hasOwnProperty('hotSpots')) { + initialConfig.scenes[id].hotSpots = []; // Create hot spots array if needed + if (id == config.scene) + config.hotSpots = initialConfig.scenes[id].hotSpots; // Link to current config + } + initialConfig.scenes[id].hotSpots.push(hs); // Add hot spot to config + } else { + throw 'Invalid scene ID!'; + } + } + if (sceneId === undefined || config.scene == sceneId) { + // Add to current scene + createHotSpot(hs); + if (loaded) + renderHotSpot(hs); + } + return this; +}; + +/** + * Remove a hot spot. + * @memberof Viewer + * @instance + * @param {string} hotSpotId - The ID of the hot spot + * @param {string} [sceneId] - Removes hot spot from specified scene if provided, else from current scene + * @returns {boolean} True if deletion is successful, else false + */ +this.removeHotSpot = function(hotSpotId, sceneId) { + if (sceneId === undefined || config.scene == sceneId) { + if (!config.hotSpots) + return false; + for (var i = 0; i < config.hotSpots.length; i++) { + if (config.hotSpots[i].hasOwnProperty('id') && + config.hotSpots[i].id === hotSpotId) { + // Delete hot spot DOM elements + var current = config.hotSpots[i].div; + while (current.parentNode != uiContainer) + current = current.parentNode; + uiContainer.removeChild(current); + delete config.hotSpots[i].div; + // Remove hot spot from configuration + config.hotSpots.splice(i, 1); + return true; + } + } + } else { + if (initialConfig.scenes.hasOwnProperty(sceneId)) { + if (!initialConfig.scenes[sceneId].hasOwnProperty('hotSpots')) + return false; + for (var j = 0; j < initialConfig.scenes[sceneId].hotSpots.length; j++) { + if (initialConfig.scenes[sceneId].hotSpots[j].hasOwnProperty('id') && + initialConfig.scenes[sceneId].hotSpots[j].id === hotSpotId) { + // Remove hot spot from configuration + initialConfig.scenes[sceneId].hotSpots.splice(j, 1); + return true; + } + } + } else { + return false; + } + } +}; + +/** + * This method should be called if the viewer's container is resized. + * @memberof Viewer + * @instance + */ +this.resize = function() { + if (renderer) + onDocumentResize(); +}; + +/** + * Check if device orientation control is supported. + * @memberof Viewer + * @instance + * @returns {boolean} True if supported, else false + */ +this.isOrientationSupported = function() { + return orientationSupport || false; +}; + +/** + * Stop using device orientation. + * @memberof Viewer + * @instance + */ +this.stopOrientation = function() { + stopOrientation(); +}; + +/** + * Start using device orientation (does nothing if not supported). + * @memberof Viewer + * @instance + */ +this.startOrientation = function() { + startOrientation(); +}; + +/** + * Check if device orientation control is currently activated. + * @memberof Viewer + * @instance + * @returns {boolean} True if active, else false + */ +this.isOrientationActive = function() { + return Boolean(orientation); +}; + +/** + * Subscribe listener to specified event. + * @memberof Viewer + * @instance + * @param {string} type - Type of event to subscribe to. + * @param {Function} listener - Listener function to subscribe to event. + * @returns {Viewer} `this` + */ +this.on = function(type, listener) { + externalEventListeners[type] = externalEventListeners[type] || []; + externalEventListeners[type].push(listener); + return this; +}; + +/** + * Remove an event listener (or listeners). + * @memberof Viewer + * @param {string} [type] - Type of event to remove listeners from. If not specified, all listeners are removed. + * @param {Function} [listener] - Listener function to remove. If not specified, all listeners of specified type are removed. + * @returns {Viewer} `this` + */ +this.off = function(type, listener) { + if (!type) { + // Remove all listeners if type isn't specified + externalEventListeners = {}; + return this; + } + if (listener) { + var i = externalEventListeners[type].indexOf(listener); + if (i >= 0) { + // Remove listener if found + externalEventListeners[type].splice(i, 1); + } + if (externalEventListeners[type].length === 0) { + // Remove category if empty + delete externalEventListeners[type]; + } + } else { + // Remove category of listeners if listener isn't specified + delete externalEventListeners[type]; + } + return this; +}; + +/** + * Fire listeners attached to specified event. + * @private + * @param {string} [type] - Type of event to fire listeners for. + */ +function fireEvent(type) { + if (type in externalEventListeners) { + // Reverse iteration is useful, if event listener is removed inside its definition + for (var i = externalEventListeners[type].length; i > 0; i--) { + externalEventListeners[type][externalEventListeners[type].length - i].apply(null, [].slice.call(arguments, 1)); + } + } + if (type === 'load') { + if (window.innerWidth < 480) viewer.setHfov(60, {animated:false}); + else if (window.innerWidth < 768) viewer.setHfov(80, {animated:false}); + else viewer.setHfov(110, {animated:false}); + } +} + +/** + * Destructor. + * @instance + * @memberof Viewer + */ +this.destroy = function() { + destroyed = true; + clearTimeout(autoRotateStart); + + if (renderer) + renderer.destroy(); + if (listenersAdded) { + document.removeEventListener('mousemove', onDocumentMouseMove, false); + document.removeEventListener('mouseup', onDocumentMouseUp, false); + container.removeEventListener('mozfullscreenchange', onFullScreenChange, false); + container.removeEventListener('webkitfullscreenchange', onFullScreenChange, false); + container.removeEventListener('msfullscreenchange', onFullScreenChange, false); + container.removeEventListener('fullscreenchange', onFullScreenChange, false); + if (resizeObserver) { + resizeObserver.disconnect(); + } else { + window.removeEventListener('resize', onDocumentResize, false); + window.removeEventListener('orientationchange', onDocumentResize, false); + } + container.removeEventListener('keydown', onDocumentKeyPress, false); + container.removeEventListener('keyup', onDocumentKeyUp, false); + container.removeEventListener('blur', clearKeys, false); + document.removeEventListener('mouseleave', onDocumentMouseUp, false); + } + container.innerHTML = ''; + container.classList.remove('pnlm-container'); +}; + +} + +return { + viewer: function(container, config) { + return new Viewer(container, config); + } +}; + +})(window, document); diff --git a/web/assets/pannellum/js/standalone.js b/web/assets/pannellum/js/standalone.js new file mode 100644 index 0000000..e0dbcf9 --- /dev/null +++ b/web/assets/pannellum/js/standalone.js @@ -0,0 +1,111 @@ +function anError(error, showHTML) { + var errorMsg = document.createElement('div'); + errorMsg.className = 'pnlm-info-box'; + var p = document.createElement('p'); + if (showHTML) + p.innerHTML = error; + else + p.textContent = error; + errorMsg.appendChild(p); + document.getElementById('container').appendChild(errorMsg); +} + +var viewer; +function parseURLParameters() { + var URL; + if (window.location.hash.length > 0) { + // Prefered method since parameters aren't sent to server + URL = window.location.hash.slice(1); + } else { + URL = window.location.search.slice(1); + } + if (!URL) { + // Display error if no configuration parameters are specified + anError('No configuration options were specified.'); + return; + } + URL = URL.split('&'); + var configFromURL = {}; + for (var i = 0; i < URL.length; i++) { + var option = URL[i].split('=')[0]; + var value = URL[i].split('=')[1]; + if (value === '') + continue; // Skip options with empty values in URL config + switch(option) { + case 'hfov': case 'pitch': case 'yaw': case 'haov': case 'vaov': + case 'minHfov': case 'maxHfov': case 'minPitch': case 'maxPitch': + case 'minYaw': case 'maxYaw': case 'vOffset': case 'autoRotate': + configFromURL[option] = Number(value); + break; + case 'autoLoad': case 'ignoreGPanoXMP': + configFromURL[option] = JSON.parse(value); + break; + case 'author': case 'title': case 'firstScene': case 'fallback': + case 'preview': case 'config': + configFromURL[option] = decodeURIComponent(value); + break; + case 'panorama': + value = decodeURIComponent(value).split(':')[1].replace(/ /gi, '_'); + var getMd5 = md5(value); + configFromURL[option] = 'https://upload.wikimedia.org/wikipedia/commons/' + getMd5.substring(0, 1) + '/' + getMd5.substring(0, 2) + '/' + value; + break; + default: + anError('An invalid configuration parameter was specified: ' + option); + return; + } + } + + var request; + + // Check for JSON configuration file + if (configFromURL.config) { + // Get JSON configuration file + request = new XMLHttpRequest(); + request.overrideMimeType('application/json'); + request.onload = function() { + if (request.status != 200) { + // Display error if JSON can't be loaded + var a = document.createElement('a'); + a.href = configFromURL.config; + a.textContent = a.href; + anError('The file ' + a.outerHTML + ' could not be accessed.', true); + return; + } + + var responseMap = JSON.parse(request.responseText); + + // Set JSON file location + if (responseMap.basePath === undefined) + responseMap.basePath = configFromURL.config.substring(0, configFromURL.config.lastIndexOf('/')+1); + + // Merge options + for (var key in responseMap) { + if (configFromURL.hasOwnProperty(key)) { + continue; + } + configFromURL[key] = responseMap[key]; + } + + // Set title + if ('title' in configFromURL) + document.title = configFromURL.title; + + // Create viewer + configFromURL.escapeHTML = true; + viewer = pannellum.viewer('container', configFromURL); + }; + request.open('GET', configFromURL.config); + request.send(); + return; + } + + // Set title + if ('title' in configFromURL) + document.title = configFromURL.title; + + // Create viewer + configFromURL.escapeHTML = true; + configFromURL.targetBlank = true; + viewer = pannellum.viewer('container', configFromURL); +} +parseURLParameters(); diff --git a/web/assets/pannellum/pannellum.htm b/web/assets/pannellum/pannellum.htm new file mode 100644 index 0000000..e7fcaa0 --- /dev/null +++ b/web/assets/pannellum/pannellum.htm @@ -0,0 +1,23 @@ + + + + + + Pannellum + + + + +
+ +
+ + + + + + diff --git a/web/index.html b/web/index.html index 2158a5b..9fd2194 100644 --- a/web/index.html +++ b/web/index.html @@ -40,7 +40,7 @@ - + @@ -76,7 +76,7 @@
Loading weather...
- Minimap + Minimap @@ -102,8 +102,8 @@

See for more assistance.
Contact details can be found under .

- - What's new: +
+
What's new: - - - +
+
+