How to use react-krpano-hooks to call xml and panos from other directory?

[AbuOmair1012]

Hi,

I am new in krpano so my question is dumb a bit, I used react-krpano-hooks library its wonderful, but the libarary reads panos and tour.xml from public which means in the same directory of the react app for ex " /home/my_react_app/public/ " .

so, how to make it read panos and tour.xml from other directories for ex from " /home/Desktop/my_data/ ". ?

[shinenic]

Hi, @AbuOmair1012

Is there any reason you want to read the files outside the react project for the folder structure?

Basically, most of the webserver frameworks will provide a public directory that the browser can access or download the files in it, so, it would help if you tried to make your pano/xml files in the public directory and make sure the file path is set in the hook.

[AbuOmair1012]

Hi @shinenic

Basically, I am developing an application the idea is the user will choose the pano by its name specifically. Is there any example to show how to input the tour.xml, krpano.js files, and the Panos?

I have tried >>

const { containerRef } = useKrpano({
   globalFunctions: {
     logNewScene: (scene) => {
       console.log('New scene: ', scene)
     },
   },
 })

return (
          <div
            ref={containerRef}
            style={{ width: '80%', height: '80%' }}
            scriptPath="./my_dir/krpano/krpano.js"
            embeddingParams={{ swf: "krpano.swf", xml: "./my_dir/krpano/tour.xml" }}

          />
)

the error >>>

Proxy error: Could not proxy request /krpano/krpano.js from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

[shinenic]

1. you should put all the file URLs in the hook, not div, you can check the document for the usage
2. the file URL should not be the relative path from your local folder i.e., when you enter the URL(e.g. localhost:3000/krpano/krpano.js) on your browser, you should be able to access the file as well

please take a look at the file structure in the README or the example folder in this repo.

also, can you describe how will the user select the pano & what's the full folder structure, and how you provide the static file from the server

[AbuOmair1012]

Let me describe a bit, my data are stored in my NAS and the react app should read the data from it. The folder structure is as below ...

As I knew the react-krpano reads the data by publishing it in a URL (e.g. localhost:3000/krpano/krpano.js) to be read by react-krpano, but what I want to do is to make react-krpano read the panos and tour.xml, form my Google Cloud. So the user going to choose a krpano folder from many krpano folders that he needs from a folders name list.

Is there a way to set the tour.xml and it's panos ?

My_NAS_Data
└─── folder1
│   krpano
│   └─── panos
│   └─── plugins
│         │  webvr.js
│         │  webvr.xml
│         │     ...
│    └─── skin
│         │   vtourskin.xml
│         │   vtourskin.png
│         │  ...
│    └─── krpano.html
│    └─── krpano.js
│    └─── tour.xml

└─── folder2
│   krpano
│   └─── panos
│   └─── plugins
│         │  webvr.js
│         │  webvr.xml
│         │     ...
│    └─── skin
│         │   vtourskin.xml
│         │   vtourskin.png
│         │  ...
│    └─── krpano.html
│    └─── krpano.js
│    └─── tour.xml

└─── folder3
│   krpano
│   └─── panos
│   └─── plugins
│         │  webvr.js
│         │  webvr.xml
│         │     ...
│    └─── skin
│         │   vtourskin.xml
│         │   vtourskin.png
│         │  ...
│    └─── krpano.html
│    └─── krpano.js
│    └─── tour.xml


...