# Client-Server of Python Server Menu

**URL:** <https://discourse.vtk.org/t/client-server-of-python-server-menu/5772>\
**Category:** Development\
**Created:** [May 13, 2021, 7:33pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772 "2021-05-13T19:33:04Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)\
**Post date:** [May 13, 2021, 7:33pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/1 "2021-05-13T19:33:04Z")

</div>

Dear All,

I am using the example web-project-templates-master that replicate an OpenGL window in the Python server side in a web browser client side. Now, if I want to create a menu with buttons in the server side (Python) how I replicate in the web browser and send back the buttons events to the server. (outside the OpenGL window).

Has VTK something to do that? If not, can anyone give suggestions how to do that over the example web-project-templates-master?

Thanks,

Luís Gonçalves

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 13, 2021, 11:52pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/2 "2021-05-13T23:52:15Z")

</div>

The template that you are using show you exactly how to do that with the slider and the resolution of the cone.

---

<div class="post-metadata">

**Author:** ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)\
**Post date:** [May 17, 2021, 10:33am UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/3 "2021-05-17T10:33:31Z")

</div>

I tried in “template.html” to put

```
  <v-icon v-text="Here" v-on:click="resetCamera()" />

```

instead of

```
   <v-icon v-text="`$resetCamera`" v-on:click="resetCamera()" />

```

and the text “Here” do not appear in the panel in the browser.

Can you please point where I can read about how to set links in the panel with pointers to a function in Python on the server? (like above but working)

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 17, 2021, 6:20pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/4 "2021-05-17T18:20:11Z")

</div>

- [icon/button](https://github.com/Kitware/web-project-templates/blob/master/vue-vtkjs-pvw-template/src/components/core/App/template.html#L20)
- [method](https://github.com/Kitware/web-project-templates/blob/master/vue-vtkjs-pvw-template/src/components/core/App/script.js#L29)
- [store](https://github.com/Kitware/web-project-templates/blob/master/vue-vtkjs-pvw-template/src/store/wslink.js#L114)
- [protocol (client)](https://github.com/Kitware/web-project-templates/blob/master/vue-vtkjs-pvw-template/src/protocols/Cone.js#L5)
- [protocol (server)](https://github.com/Kitware/web-project-templates/blob/master/vue-vtkjs-pvw-template/server/pvpython/pv_protocol.py#L19-L20)

You should be able to follow the same path for `vtk.cone.resolution.update` and the slider…

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 17, 2021, 6:22pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/5 "2021-05-17T18:22:34Z")

</div>

You mean the ICON with identifier HERE does not exist… Yes, that make sense…  
If you want to learn [Vuetify](https://vuetifyjs.com/en/), you can do so on their website…

---

<div class="post-metadata">

**Author:** ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)\
**Post date:** [May 24, 2021, 10:00pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/6 "2021-05-24T22:00:11Z")

</div>

I managed to display a existing icon (‘fa4’) that when clicked make an action in the server side (Python).  
How to display instead of an existing icon, display text?

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 24, 2021, 10:39pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/7 "2021-05-24T22:39:23Z")

</div>

You mean you want a button with text rather than an icon? Then use the button component rather than the icon component. The Vuetify documentation is very well done, you should read it.

Maybe try `<button>My text is here</button>`. And if you want to be fancy and use Vuetify like explained before, try `<v-btn>My text is here</v-btn>`. Notice the difference between `<v-icon />` and `<v-btn />`. One is for icons (no text), the other is for buttons that can be icon based or text based.

Does it make sense?

---

<div class="post-metadata">

**Author:** ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)\
**Post date:** [May 25, 2021, 2:23pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/8 "2021-05-25T14:23:41Z")

</div>

I have working the following in template.html

`<v-icon v-text="`$my\_icon`" v-on:click="my_icon()" />`

but the following do not works:

`<v-btn "My text is here" v-on:click="my_icon()"/>`

Where I find an example of using v-btn to make an action when pressed?

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 25, 2021, 2:44pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/9 "2021-05-25T14:44:05Z")

</div>

Yes it make sense. Just read my comment above.

```auto
<a>b</a> != <a "b" />

```

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 25, 2021, 2:46pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/10 "2021-05-25T14:46:05Z")

</div>

Maybe you need to watch a video on how to write HTML/XML? I’m not sure how I can help you more.

---

<div class="post-metadata">

**Author:** ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)\
**Post date:** [May 25, 2021, 2:49pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/11 "2021-05-25T14:49:59Z")

</div>

What I want is how I include the event in the v-btn html? The “click”.

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 25, 2021, 2:52pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/12 "2021-05-25T14:52:32Z")

</div>

How hard was it?

`<v-btn v-on:click="myMethod">My text goes here</v-btn>`

Guess what, you can even do that with a `div`

`<div @click="myMethod">My text goes here</div>`

---

<div class="post-metadata">

**Author:** ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)\
**Post date:** [May 25, 2021, 2:54pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/13 "2021-05-25T14:54:24Z")

</div>

Thanks. My HTML knowledge is very basic.

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [May 25, 2021, 2:55pm UTC](https://discourse.vtk.org/t/client-server-of-python-server-menu/5772/14 "2021-05-25T14:55:44Z")

</div>

Yes I noticed but they are a lot of resources online. If you read the Vuetify documentation what I wrote was in plain site.