You are not logged in.

Integration into parcel bundler

swalter

Beginner

  • "swalter" started this thread

Posts: 3

  • Send private message

1

Thursday, September 15th 2022, 6:18pm

Integration into parcel bundler

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? *confused* Any help is greatly appreciated!
Sebastian

This post has been edited 1 times, last edit by "swalter" (Sep 15th 2022, 6:28pm)

alexp

Beginner

Posts: 18

  • Send private message

2

Thursday, September 15th 2022, 6:47pm

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

Beginner

  • "swalter" started this thread

Posts: 3

  • Send private message

3

Thursday, September 15th 2022, 9:44pm

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

Beginner

Posts: 18

  • Send private message

4

Thursday, September 15th 2022, 9:53pm

You can acces krpano object like this

Source code

 
1

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

Where krpanoSWFObject is the id that you pass to the embedpano

Source code

 
1

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

swalter

Beginner

  • "swalter" started this thread

Posts: 3

  • Send private message

5

Friday, September 16th 2022, 4:17pm

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

index.html:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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>

index.js:

Source code

 
1
2
3
4
5
6
7
8
9
10

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');

package.json:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
"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"]
}

Error message:

Quoted

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

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

alexp

Beginner

Posts: 18

  • Send private message

6

Friday, September 16th 2022, 7:53pm

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-dawn-0…ile=/index.html

alexp

Beginner

Posts: 18

  • Send private message

7

Friday, September 16th 2022, 8:09pm

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

Similar threads