is there a way to set an image on a node?

[RichardEllicott]

i have been fighting with it trying to get an image, including trying to make a custom widget i can't seem to manage it.... interestingly i can make an image that sorta hovers over the top... but i wanted to make it play nice and stretch the node

i should note i'm on the PyPy version, seems to be:

NodeGraphQt 0.6.43
PySide6 6.10.1

compliments on the framework btw, it acts very naturally and allows a lot with little effort, lots of bits like focus and copy paste etc all as one liners

image over top example, but not as a widget

class CustomBaseNode(BaseNode):
    """
    Docstring for BaseNode2
    """

    __identifier__ = 'node'
    NODE_NAME = 'CustomBaseNode'

    def __init__(self):
        super().__init__()

    def set_image(self, image_path):
        """Load and set an image for this node"""
        pixmap = QtGui.QPixmap(image_path)

        if not pixmap.isNull():
            # Remove old pixmap if exists
            if self._pixmap_item:
                self.view.scene().removeItem(self._pixmap_item)

            # Scale pixmap to fit
            # scaled_pixmap = pixmap.scaled(64, 128, QtCore.Qt.AspectRatioMode.KeepAspectRatio,
                #   QtCore.Qt.TransformationMode.SmoothTransformation)

            scaled_pixmap = pixmap.scaled(64, 128, QtCore.Qt.AspectRatioMode.IgnoreAspectRatio,
                                          QtCore.Qt.TransformationMode.SmoothTransformation)

            # Create pixmap item as child of node view
            self._pixmap_item = QGraphicsPixmapItem(scaled_pixmap)
            self._pixmap_item.setParentItem(self.view)

            # Position it within the node (adjust as needed)
            self._pixmap_item.setPos(10, 30)

            print(f"Image loaded: {image_path}")
        else:
            print(f"Failed to load image: {image_path}")

[martin98-afk]

I implemented HTML image rendering using qwebengineview, but automatically adjusting nodes based on content size is still proving difficult.

# -*- coding: utf-8 -*-
from NodeGraphQt.constants import Z_VAL_NODE_WIDGET
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QSizePolicy
from Qt import QtWidgets, QtCore
from loguru import logger

from app.widgets.node_widget.base import CustomNodeBaseWidget

try:
    from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage
    HAS_WEBENGINE = True
except ImportError:
    QWebEngineView = None
    HAS_WEBENGINE = False
    from Qt import QtWidgets
    logger.error("警告: QtWebEngine not available. Chart will not render.")


class ChartWidget(QtWidgets.QWidget):
    valueChanged = QtCore.Signal(str)

    def __init__(self, parent=None, default_html=""):
        super().__init__(parent)
        self._html = default_html or "<center>等待图表...</center>"
        self.setStyleSheet("background-color: transparent; border: none;")
        layout = QtWidgets.QVBoxLayout(self)
        layout.setContentsMargins(0, 0, 0, 0)
        layout.setSpacing(0)

        if HAS_WEBENGINE:
            self.view = QWebEngineView(self)
            self.view.setAttribute(Qt.WA_TranslucentBackground)
            self.view.page().setBackgroundColor(Qt.transparent)
            self.view.setContextMenuPolicy(Qt.NoContextMenu)
            self.view.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Minimum)
            # ✅ 移除 maximumSize 限制！
            self.view.setMinimumSize(720, 520)  # 图表 700x500 + 边距
            self.view.setMaximumSize(720, 520)  # ← 也可以设最大值，避免拉伸失真
            self.view.setSizePolicy(
                QtWidgets.QSizePolicy.Expanding,
                QtWidgets.QSizePolicy.Expanding
            )
            layout.addWidget(self.view)
            self.set_value(self._html)
        else:
            self.fallback = QtWidgets.QLabel("需 QtWebEngine 支持图表")
            self.fallback.setAlignment(QtCore.Qt.AlignCenter)
            self.fallback.setSizePolicy(
                QtWidgets.QSizePolicy.Expanding,
                QtWidgets.QSizePolicy.Expanding
            )
            layout.addWidget(self.fallback)

    def set_value(self, html: str):
        self._html = html or "<center>无数据</center>"
        if HAS_WEBENGINE:
            self.view.setHtml(self._html, QtCore.QUrl("https://chart.local/"))
        self.valueChanged.emit(self._html)

    def get_value(self) -> str:
        return self._html

    def sizeHint(self):
        # 返回一个“推荐”尺寸，供节点布局参考
        return QtCore.QSize(720, 520)  # 推荐默认尺寸


class ChartWidgetWrapper(CustomNodeBaseWidget):
    def __init__(self, parent=None, name="", label="", default="", window=None):
        super().__init__(parent)
        self.setZValue(Z_VAL_NODE_WIDGET)
        self.set_name(name)
        widget = ChartWidget(default_html=default)
        self.set_custom_widget(widget)
        widget.valueChanged.connect(self.on_value_changed)

    def get_value(self):
        return self.get_custom_widget().get_value()

    def set_value(self, value: str):
        self.get_custom_widget().set_value(value)

[martin98-afk]

Solved! I used the size tag in the HTML to parse and modify the node size, and it worked quite well.

# -*- coding: utf-8 -*-
import re
from NodeGraphQt.constants import Z_VAL_NODE_WIDGET
from PyQt5.QtCore import Qt
from Qt import QtWidgets, QtCore
from loguru import logger

from app.widgets.node_widget.base import CustomNodeBaseWidget

try:
    from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage
    HAS_WEBENGINE = True
except ImportError:
    QWebEngineView = None
    HAS_WEBENGINE = False
    from Qt import QtWidgets
    logger.error("警告: QtWebEngine not available. Chart will not render.")


class ChartWidget(QtWidgets.QWidget):
    valueChanged = QtCore.Signal(str)
    sizeHintChanged = QtCore.Signal()

    def __init__(self, parent=None, default_html=""):
        super().__init__(parent)
        self._html = default_html or "<center>等待图表...</center>"
        self.setStyleSheet("background-color: transparent; border: none;")
        layout = QtWidgets.QVBoxLayout(self)
        layout.setContentsMargins(0, 0, 0, 0)
        layout.setSpacing(0)

        if HAS_WEBENGINE:
            self.view = QWebEngineView(self)
            self.view.setAttribute(Qt.WA_TranslucentBackground)
            self.view.page().setBackgroundColor(Qt.transparent)
            self.view.setContextMenuPolicy(Qt.NoContextMenu)
            layout.addWidget(self.view)
            self.set_value(self._html)
        else:
            self.fallback = QtWidgets.QLabel("需 QtWebEngine 支持图表")
            self.fallback.setAlignment(QtCore.Qt.AlignCenter)
            self.fallback.setSizePolicy(
                QtWidgets.QSizePolicy.Expanding,
                QtWidgets.QSizePolicy.Expanding
            )
            layout.addWidget(self.fallback)

    def set_value(self, html: str):
        self._html = html or "<center>无数据</center>"
        if HAS_WEBENGINE:
            self.view.setHtml(self._html, QtCore.QUrl("https://chart.local/"))
            content_w, content_h = self._extract_size_from_html(html)
            self.view.setMinimumSize(content_w, content_h)
        self.updateGeometry()
        self.sizeHintChanged.emit()
        self.valueChanged.emit(self._html)

    def _extract_size_from_html(self, html: str):
        """从 HTML 中提取 style="width:...px;height:...px" 的尺寸"""
        width_match = re.search(r'width\s*:\s*(\d+)px', html, re.IGNORECASE)
        height_match = re.search(r'height\s*:\s*(\d+)px', html, re.IGNORECASE)

        width = int(width_match.group(1)) if width_match else 700
        height = int(height_match.group(1)) if height_match else 500
        # 添加内边距（避免贴边）
        padding_w = 20
        padding_h = 20  # 标题栏高度
        return width + padding_w, height + padding_h

    def get_value(self) -> str:
        return self._html

    def sizeHint(self):
        # 注意：sizeHint 在初次布局时使用，但后续会被真实尺寸覆盖
        w, h = self._extract_size_from_html(self._html)
        return QtCore.QSize(w, h)


class ChartWidgetWrapper(CustomNodeBaseWidget):
    def __init__(self, parent=None, name="", label="", default="", window=None):
        super().__init__(parent)
        self.setZValue(Z_VAL_NODE_WIDGET)
        self.set_name(name)
        widget = ChartWidget(default_html=default)
        self.set_custom_widget(widget)
        widget.valueChanged.connect(self.on_value_changed)
        # ✅ 监听尺寸请求
        widget.sizeHintChanged.connect(self._update_node)

    def _update_node(self):
        if self.node.graph is not None:
            QtCore.QTimer.singleShot(0, self.node.graph.viewer().force_update)

    def get_value(self):
        return self.get_custom_widget().get_value()

    def set_value(self, value: str):
        self.get_custom_widget().set_value(value)

also you need to customize _align_widget function in nodeItem to use it's sizeHint to deside the node size.

    def _align_widgets_horizontal(self, v_offset):
        if not self._widgets:
            return
        rect = self.boundingRect()
        y = rect.y() + v_offset
        inputs = [p for p in self.inputs if p.isVisible()]
        outputs = [p for p in self.outputs if p.isVisible()]
        for widget in self._widgets.values():
            if not widget.isVisible():
                continue
            real_widget = widget.widget()
            if real_widget is not None:
                w_size = real_widget.sizeHint()
                widget_width = w_size.width()
                widget_height = w_size.height()
            else:
                br = widget.boundingRect()
                widget_width = br.width()
                widget_height = br.height()

            if self._align == 'left':
                x = rect.left() + 10
                widget.widget().setTitleAlign('left')
            elif self._align == 'right':
                x = rect.right() - widget_width - 10
                widget.widget().setTitleAlign('right')
            elif self._align == 'center':
                x = rect.center().x() - (widget_width / 2)
                widget.widget().setTitleAlign('center')
            else:
                if not inputs:
                    x = rect.left() + 10
                    widget.widget().setTitleAlign('left')
                elif not outputs:
                    x = rect.right() - widget_width - 10
                    widget.widget().setTitleAlign('right')
                else:
                    x = rect.center().x() - (widget_width / 2)
                    widget.widget().setTitleAlign('center')

            widget.setPos(x, y)
            y += widget_height + 8 

[RichardEllicott]

@martin98-afk
interesting thanks for the reply... can i ask which version you used? (just incase you're not aware, NodeGraphQt.version)

yeah it's complicated maybe cos i'm using PySide6, the framework apparently would work with PyQt5, PySide2 or PySide6 .... myself i'm trying to get just an image working as a widget, not a full on browser, i have like i say an image displayed

[RichardEllicott]

@martin98-afk
i think i worked out in the end that PyQt5 and defiantly PySide2 are not supported on Python 3.13+ (probably earlier maybe it's last about 3.10)

so that solution may work for that but it's gonna break... NodeGraphQt support i'm not sure where it's at but the API is likely a bit too flaky for my purposes, nice if there was a simple neat solution but i think it's that the majority of it was built with older QT apis