Visualization Components#

Components for data visualization

class ngapp.components.visualization.CameraView(
webgui: WebguiComponent,
*args,
**kwargs,
)#

Bases: Col

Camera view component

Parameters:

webgui (WebguiComponent)

class ngapp.components.visualization.Clipping(
webgui: WebguiComponent,
*args,
**kwargs,
)#

Bases: Col

Clipping component

Parameters:

webgui (WebguiComponent)

class ngapp.components.visualization.Colormap(
webgui: WebguiComponent,
*args,
**kwargs,
)#

Bases: Col

Colormap component

Parameters:

webgui (WebguiComponent)

set_colormap(min: float | None = None, max: float | None = None)#

Update colormap range.

If either min or max is provided, only those values are updated and the new range is pushed to the webgui. If both are omitted, the default range from the current webgui data is restored and sent to the front-end.

Parameters:

  • min (float | None)

  • max (float | None)

class ngapp.components.visualization.GeometryWebgui(
id: str = '',
caption: str | None = None,
namespace: bool = True,
**kwargs,
)#

Bases: Row

Geometry webgui component

Parameters:

  • id (str)

  • caption (str | None)

  • namespace (bool)

class ngapp.components.visualization.PlotlyComponent(id: str = '', filename: str = '', **kwargs)#

Bases: Component

Plotly plot component.

This component renders Plotly figures inside an ngapp application. It supports two main modes of operation:

  1. Inline mode (no filename): the figure data is sent to the

    browser and rendered directly in the client.

  2. File mode (filename set): the figure is exported as a

    static .png image and the Plotly JSON description is written to disk. This is useful for documentation and offline reports.

Basic usage (inline):

from ngapp.components.visualization import PlotlyComponent
import plotly.graph_objects as go

fig = go.Figure(data=[go.Scatter(y=[1, 3, 2, 4])])
plot = PlotlyComponent(id="my_plot")
plot.draw(fig)

File-based usage (for docs and reports):

plot = PlotlyComponent(filename="results/my_plot")
plot.draw(fig)

After calling draw(), results/my_plot.png and results/my_plot.json will be created.

Parameters:

  • id (str)

  • filename (str)

class ngapp.components.visualization.SolutionWebgui(
id: str = '',
caption: str | None = None,
namespace: bool = True,
show_clipping: bool = True,
show_view: bool = True,
**kwargs,
)#

Bases: Row

Solution webgui component

Parameters:

  • id (str)

  • caption (str | None)

  • namespace (bool)

  • show_clipping (bool)

  • show_view (bool)

class ngapp.components.visualization.WebgpuComponent(width='800px', height='600px', **kwargs)#

Bases: Component

GPU-accelerated 3D canvas for interactive scientific visualization.

This component integrates with the webgpu Python package to render 3D scenes directly in the browser using WebGPU. It provides a high-performance canvas for custom 3D scenes, supporting real-time updates and user interaction.

Key features#

  • Integrates with the webgpu Python ecosystem for advanced

    graphics.

  • Supports storing and restoring scenes, camera, and lighting

    state via the internal storage.

  • Handles mounting, unmounting, and frontend synchronization

    automatically.

  • Allows custom event handling for mouse and interaction events via

    click(), mousedown(), mouseup(), and mouseout() methods.

Minimal example#

from ngapp.components.visualization import WebgpuComponent
from webgpu import shapes, Scene

# Create the canvas component
canvas = WebgpuComponent(width="800px", height="600px")

# Build a simple scene using the built-in ShapeRenderer
shape = shapes.generate_cylinder(32, radius=1.0, height=2.0)
renderer = shapes.ShapeRenderer(shape)
scene = Scene([renderer])

# Render the scene on the canvas
canvas.draw(scene)

You can subclass WebgpuComponent and override click(), mousedown(), mouseup(), or mouseout() to react to user input on the canvas.

draw(scene, camera=None, light=None)#

Render a 3D scene on the webgpu canvas. Go to the webgpu documentation for more details on how to create scenes.

Args:

scene: A webgpu.scene.Scene, BaseRenderer, or list of renderers. camera: Optional camera settings. light: Optional lighting settings.

Returns:

The active scene object.

screenshot()#

Capture the current canvas as a GPU texture (raw image data).

Returns:

The image data as a numpy array or backend-specific object.

screenshot_as_data_url(format='image/png')#

Get a screenshot of the canvas as a data URL (e.g., for embedding in HTML).

Args:

format: Image format, e.g., “image/png”.

Returns:

Data URL string containing the image.

screenshot_as_image(format='png')#

Get a screenshot of the canvas as an image (e.g., PIL Image).

Args:

format: Image format, e.g., “png” or “jpeg”.

Returns:

Image object.

class ngapp.components.visualization.WebguiComponent(
id: str = '',
caption: str | None = None,
webgui_data: dict[str, Any] | None = None,
**kwargs,
)#

Bases: Component

Webgui component

Parameters:

  • id (str)

  • caption (str | None)

  • webgui_data (dict[str, Any] | None)

static canvas_button(
ui_icon: str = '',
ui_label: str = '',
ui_tooltip: str = '',
on_click: Callable[[Any], None] | None = None,
**kwargs,
) → QBtn#

Create a canvas button

Parameters:

  • ui_icon (str) – Icon name

  • ui_label (str) – Button label

  • ui_tooltip (str) – Tooltip text

  • on_click (Callable[[Any], None] | None) – Callback function

  • kwargs – Additional arguments for QBtn

Return type:

QBtn

clear()#

Clear webgui canvas

create_screenshot(width: int = 1042, height: int = 852) → None#

Create a screenshot of the webgui. The image is stored in the storage as a base64 encoded string.

Parameters:

  • width (int) – (int) Width of the screenshot. Defaults to 1042.

  • height (int) – (int) Height of the screenshot. Defaults to 852.

  • depends_on – (list[str] | None) List of job IDs that this job depends on.

Return type:

None

draw(
*args,
data: dict | None = None,
redraw=False,
**kwargs,
) → dict#

draw object (arguments compatible with netgen.webgui.Draw)

Parameters:

data (dict | None)

Return type:

dict

on_draw(callback: Callable) → None#

Set callback for draw event

Parameters:

callback (Callable)

Return type:

None

property radius: float#

Return characteristic radius from webgui data.

Falls back to 1.0 if no mesh_radius entry is present.

property screenshot#

Get the webgui screenshot

set_camera(data: dict | None = None) → None#

Set camera

Parameters:

data (dict | None)

Return type:

None

set_clipping_plane(data: dict) → None#

Set clipping plane

Parameters:

data (dict)

Return type:

None

set_color(
*,
faces: dict[int, list[float]] | list[float] | None = None,
edges: dict[int, list[float]] | list[list[float]] | None = None,
) → None#

Set color of faces and edges

Parameters:

  • faces (dict[int, list[float]] | list[float] | None)

  • edges (dict[int, list[float]] | list[list[float]] | None)

Return type:

None

set_colormap(data: dict | None = None) → None#

Set colormap.

data should contain keys such as min and max. If omitted, an empty payload is sent so that the front-end can decide on sensible defaults.

Parameters:

data (dict | None)

Return type:

None

property slot_buttons: list[Component]#

Get custom components to webgui buttons

property slot_canvas: list[Component]#

Get custom components to webgui canvas

toggle_fullscreen() → None#

Toggle fullscreen

Return type:

None

toggle_mesh() → None#

Toggle mesh

Return type:

None

update_camera_settings()#

Request updated camera settings from the front-end.

property webgui_data: dict[str, Any]#

get webgui data (either from file, input or dynamic data)

ngapp.components.visualization.generate_webgui_html(data, filename)#

Generates an html file with the given webgui data.