Integration into parcel bundler

swalter · September 15, 2022 at 6:18 PM

Hello,
I'm trying to embed the pano viewer into an existing project which is based on the parcel bundler. When i just load an additional script via the index.html, the embedpano function can not be found (Uncaught ReferenceError: embedpano is not defined).
Does anyone know how to manage this? Any help is greatly appreciated!
Sebastian

alexp · September 15, 2022 at 6:47 PM

You need to call the embedpano function after the krpano script is loaded.
As it's done in the krpano default html synchronously or use load event if you load script dynamically.

swalter · September 15, 2022 at 9:44 PM

Thanks for your reply. The problem with this method is that the krpano is then loaded in separately, so in the other scripts of my site I can not access the krpano object and its functions. I want to interactively switch on/off panoramas using different buttons than the ones offered in the viewer, for example.

alexp · September 15, 2022 at 9:53 PM

You can acces krpano object like this

Code

const krpano = document.getElementById('krpanoSWFObject').get('global');

Where krpanoSWFObject is the id that you pass to the embedpano

Code

embedpano({ id:"krpanoSWFObject"....})

swalter · September 16, 2022 at 4:17 PM

This does not work. The javascript is not loaded correctly. Here is an example:

index.html:

HTML

<html><body>
<divid="app"></div>
<scriptsrc="src/krpano.js"></script>
<script>
embedpano({
 xml:"tour.xml",
 target:"pano",
 html5:"only",
 mobilescale:1.0,
 passQueryParameters:"startscene,startlookat"
});
</script>
<divid="krpano" style="width: 100%; height: 100%;"></div>
<scriptsrc="src/index.js"></script>
</body>

Display More

index.js:

Code

import"./styles.css";


document.getElementById("app").innerHTML=`
<h1>Test krpano</h1>
<div>
 We should be able to access the krpano object.
 Also, we should get an error as the tour.xml is not present (nor are any other needed files).
</div>
`;
constkrpano=document.getElementById('krpano').get('global');

Display More

package.json:

Code

{
"name": "vanilla",
"version": "1.0.0",
"description": "JavaScript example starter project",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
 },
"dependencies": { "parcel-bundler": "^1.6.1" },
"devDependencies": {
"@babel/core": "7.2.0",
"typescript": "4.4.4"
 },
"resolutions": {
"@babel/preset-env": "7.13.8"
 },
"keywords": ["javascript", "starter"]
}

Display More

Error message:

Quote

document.getElementById(...).get is not a function

Live Sandbox: https://codesandbox.io/s/angry-varaha…kage.json:0-455

alexp · September 16, 2022 at 7:53 PM

It seems this error is specific to Codesandbox or Parcel.
For example this works fine locally, but have an error in Codesandbox https://codesandbox.io/s/admiring-daw…ile=/index.html

alexp · September 16, 2022 at 8:09 PM

When you use static template without bundler it works https://codesandbox.io/s/gallant-pate…ile=/index.html

Participate now!