Text labels and controls enhancements?

Web
1

Hi there,

with the release of version 16 and (maybe) soon 17, I am wondering if it could be possible to add vtkTextProperty and vtkTextActor to the VTK js; just like it is in C++ :slight_smile:
I would very much like to be able to place labels in rendering views, and control the fonts, colors, etc. The SpheresAndLabels example is far from what I would like to have.

In addition, I am wondering if it would be possible to have more than 1 html control panel. For instance, to allow top, bottom, right and left panels.

Cheers! Keep up the good work!

2

Hi,

Would being able to use vtkTextProperty and vtkTextActor with an SVG overlay be suitable (similar to the SpheresAndLabels), or do you require text to be in-scene?

You can add as many control panels as you want. The FullscreenRenderWIndow class is just a sampling of what you can do for a single control panel, so all you need to do is to add HTML to your app, position the panels with CSS, and then wire things up with JS.

3

Hi Forrest,
thanks you for you answer!

I think it’s very impractical to have to always update a coordslist as it is in SpheresAndLabels example, every time the camera moves. Specially for labels that should keep their positions fixed in relation to the camera instead of the scene. In C++, vtkTextProperty and vtkTextActor dont need to know what the scene is or how it is placed.
And adding SVG? I dont see the point, specially if these labels have to be updated by mouse picking/pointing.

Regarding the control panels, I am sure I dont quite understand what you mean. When I look at the examples, I see:

import controlPanel from './controller.html';
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ background: [0, 0, 0], controlPanelStyle: STYLE_CONTROL_PANEL });
fullScreenRenderer.addController(controlPanel);

I dont understand how one can add a second and a third html controller.

Cheers!

4

Plain HTML give you the control you are looking for. My guess is that you are not comfortable with HTML and JS and you are not realizing that you don’t need vtk.js to actually do what is natively available to you.

We could indeed implement it in vtk.js but for such simple use case, I would go the Web way.

For what is worth, you don’t have to update the coordinates from the 3D as like you said it is just the screen x,y. That example is definitely more complex than what you were hoping to get.

5

Here is a plain JS/HTML example of what could be a text widget.

6

Hey Sebastien,
Indeed, I am probably over complicating. And true, I am not an experienced js/html dev.
Thank you for your input
Cheers!

7

I am using VTK with WebAssembly, so might not help your immediate need with vtk.js, but the vtkScalarBarActor and vtkLegendActor are working fine for me in WebAssembly. These two actors have a lot of text in them so there must be a way to get text actors to work with vtk.js eventually.
Check out my VTK + WASM project:

http://www.weatherinfosystem.com/WebAssembly/SwisRadar/SwisRadar.aspx

Hit the Apply Site button to see the result.

1 Like