implement with vue problem (ControlPanel,ref,controller)

Web
1

Hi, I’m starting developing vtk.js application with vue.

So, I practice vtk.js examples.

But there are some problems.

First, controlPanel doesn’t work. It just saying “undefined”.

I used addController() for controlPanel, and I put ref.value as argument but It doesn’t work either.

Second, I tried another example, mult MultiSliceImageMapper,

but reader.setUrl is not working.

.setUrl(${__BASE_PATH__}/data/volume/headsq.vti, { loadData: true })

I don’t know what that means ----> {BASE_PATH}.

I change it to relative path but browser can’t find my file.

What Can I do for this problem?

(my code is same as cutter example)

image
image1108×820 6.08 KB

2

Did you consider the following vue project template: GitHub - Kitware/vue-vtk-js: Vue.js based components for vtk.js ?

1 Like
3

${__BASE_PATH__} is used in our code base so when deployed on github.io we can add /vtk-js/. For you, you just need to provide a URL that your server is serving your data on…

Then the undefined part, it is most likely related to your build system and how you configured your loader.

But normally, none of that should really matter since the example is just showing you how to interact with the vtk.js classes and instances. The rest, especially if you are using Vue should be straight forward for you.

1 Like
4

That would be useful. Thank you.

5

Thank you.
I tried local url.
But It said “not Not allowed to load local resource:”
That means URL is only for server?
Then, how I can load local file?