vtkScalarBarActor using trame's VtkLocalView


I’m trying to display a vtkScalarBarActor using a trame app’s VtkLocalView. However, the trame app displays only the 2 extreme colors of the bar, without all the intermediate colors. Additionally, the trame app’s bar doesn’t contain 5 labels (Although I specify it), and the font of the bar is bad as well.

Here’s a short code:

import vtk
import vtk.util.numpy_support
import numpy as np
# trame imports
import trame.app
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vuetify, vtk as vtk_widgets

def get_scalar_bar(colorTransferFunction):
    scalar_bar = vtk.vtkScalarBarActor()
    scalar_bar.SetTitle("Color Temp")
    scalar_bar.SetMaximumWidthInPixels(800 // 8)
    scalar_bar.SetMaximumHeightInPixels(800 // 3)
    return scalar_bar

def plot_color_bar():
    ren1 = vtk.vtkRenderer()

    colorTransferFunction = vtk.vtkColorTransferFunction()
    colorTransferFunction.AddRGBPoint(0.0, 0.69, 0.69, 0.69)
    colorTransferFunction.AddRGBPoint(1.0, 1.0, 0.3, 0.3)
    scalar_bar = get_scalar_bar(colorTransferFunction)

    renderWindow = vtk.vtkRenderWindow()

    renderWindowInteractor = vtk.vtkRenderWindowInteractor()


    # trame
    if True:
        server = trame.app.get_server(name="1234")
        state, ctrl = server.state, server.controller
        with SinglePageLayout(server) as layout:
            layout.title.set_text("2D View")
            with layout.content:
                with vuetify.VContainer(
                        classes="pa-0 fill-height",
                    view = vtk_widgets.VtkLocalView(renderWindow, ref="view")
                    ctrl.view_update = view.update
        server.start(port=1234, open_browser=True)

The bar should look like this (This is what I get using pure vtk without trame):
Screenshot from 2023-06-20 11-30-35

When I run the code above I get the following bar with trame:

This problem doesn’t occur when using VtkRemoteLocalView or VtkRemoteView.
Is there some kind of workaround to make the bar work on VtkLocalView? VtkRemoteLocalView and VtkRemoteView run slow on my computer.

I use the following versions (displaying “conda list” output):
python 3.11.3 h2755cc3_0_cpython conda-forge
trame 2.5.0 pyhd8ed1ab_1 conda-forge
trame-client 2.8.0 pyhd8ed1ab_0 conda-forge
trame-components 2.1.1 pyhd8ed1ab_0 conda-forge
trame-deckgl 2.0.2 pyhd8ed1ab_0 conda-forge
trame-markdown 2.0.2 pyhd8ed1ab_0 conda-forge
trame-matplotlib 2.0.2 pyhd8ed1ab_0 conda-forge
trame-plotly 2.1.1 pyhd8ed1ab_0 conda-forge
trame-rca 0.3.1 pyhd8ed1ab_0 conda-forge
trame-router 2.0.2 pyhd8ed1ab_0 conda-forge
trame-server 2.11.2 pyhd8ed1ab_0 conda-forge
trame-simput 2.3.2 pyhd8ed1ab_0 conda-forge
trame-vega 2.0.3 pyhd8ed1ab_0 conda-forge
trame-vtk 2.4.4 pyhd8ed1ab_0 conda-forge
trame-vuetify 2.2.4 pyhd8ed1ab_0 conda-forge
vtk 9.2.6 qt_py311h1234567_206 conda-forge
vtk-base 9.2.6 qt_py311h1234567_206 conda-forge
vtk-io-ffmpeg 9.2.6 qt_py311h1234567_206 conda-forge

Thanks in advance!

I found a workaround. It turns out it doesn’t interpolate the colors added to the transfer function. The workaround is to put more colors manually in the transfer function according to the original interpolation:

    for val in np.linspace(0, 1, 100):
        color = colorTransferFunction.GetColor(val)
        colorTransferFunction.AddRGBPoint(val, *color)

I guess we have 2 problems here. The first one is that the implementation/capabilities of the scalar bar in vtk.js are not fully inlined with the VTK/C++ one (nb labels, style). Secondly the colors should have been interpolated. And that second part is a bug in the way we capture the server state and set it on the client side.

Thanks for reporting such issue.

The bug is going to be fix today in the next release of trame-vtk.

Should be fixed in trame-vtk>=2.5.1 but another one for the basic lookup table is pending a vtk.js release.