Custom widget without UI - some questions

jim87

Hello!

I'm developing my first widget from scratch, starting from a plain QWidget.

The widget, for now, is as follows:

from pathlib import Path
from typing import Optional

from blueprint.models import Function
from PySide6.QtWidgets import QLabel, QSizePolicy, QVBoxLayout, QWidget


class FunctionWidget(QWidget):
    fn: Function
    header: QWidget

    def __init__(self, function: Function, parent: Optional[QWidget] = None, *args, **kwargs) -> None:
        super().__init__(parent, *args, **kwargs)

        self.fn = function
        self.setup_ui()

    def setup_ui(self) -> None:
        widget_layout = QVBoxLayout()
        self.setLayout(widget_layout)

        self.header = QWidget(self)
        header_layout = QVBoxLayout()
        self.header.setLayout(header_layout)

        svg_data = Path(__file__).parent.joinpath(
            'images', 'background', 'spectrum-gradient.svg').read_text()
        self.header.setStyleSheet(
            f'background-image: url("data:image/svg+xml,{svg_data}")')

        header_size_policy = QSizePolicy()
        header_size_policy.setVerticalPolicy(QSizePolicy.Policy.Minimum)

        self.header.setSizePolicy(header_size_policy)

        header_label = QLabel(self.header)
        header_label.setText(f'f(x) - {self.fn.name}')
        header_label.setMargin(2)
        header_label.setSizePolicy(header_size_policy)
        header_layout.addWidget(header_label)

        subheader_label = QLabel(self.header)
        subheader_label.setText(self.fn.module)
        subheader_label.setStyleSheet('font-style: italic')
        subheader_label.setSizePolicy(header_size_policy)
        header_layout.addWidget(subheader_label)

        widget_layout.addWidget(self.header)

        content_widget = QWidget(self)
        widget_layout.addWidget(content_widget)

I've already some issues though because of the following:

background SVG item is not rendered, and an error log is raised (see after the list)
the header is not shrinking to keep space for itself only (see screenshot after)

May you please help me?

SVG error:

Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>
Could not create pixmap from data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1200 800'><rect fill='#ffff00' width='1200' height='800'/><defs><radialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ff8000'/><stop  offset='1' stop-color='#ff8000' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#00ff19'/><stop  offset='1' stop-color='#00ff19' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9900ff'/><stop  offset='1' stop-color='#9900ff' stop-opacity='0'/></radialGradient><radialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#ffff00'/><stop  offset='1' stop-color='#ffff00' stop-opacity='0'/></radialGradient><radialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#FF0000'/><stop  offset='1' stop-color='#FF0000' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#0CF'/><stop  offset='1' stop-color='#0CF' stop-opacity='0'/></radialGradient></defs><rect fill='url(#a)' width='1200' height='800'/><rect fill='url(#b)' width='1200' height='800'/><rect fill='url(#c)' width='1200' height='800'/><rect fill='url(#d)' width='1200' height='800'/><rect fill='url(#e)' width='1200' height='800'/><rect fill='url(#f)' width='1200' height='800'/></svg>

Thank you very much :)

Pl45m4

@jim87 said in Custom widget without UI - some questions:

background-image: url("data:image/svg+xml,{svg_data}")')

Try to set the path to the SVG-file instead of the SVG-data.
I dont know if this function can handle svg code directly. AFAIK base64 encoded data works and filepaths of course.

Ref
Maybe @mrjj knows :)

Edit:

Regarding your 2nd question:

A widget in a layout can still grow according to its stretch in this layout.

https://doc.qt.io/qt-5/layout.html#adding-widgets-to-a-layout

jim87

Ok, a few points:

apparently Qt supports a subset of SVG, not the entire standard, and that SVG seems to be (partially?) incompatible (I've tried with the file path URL, too, without success, base64 encoding or whatever else). I've folded up with a PNG version of the SVG (the image won't increase in size so much to justify a SVG image).
Height: fixed setting vertical policy to QSizePolicy.Policy.Maximum

Thanks :)

Pl45m4

@jim87 said in Custom widget without UI - some questions:

I've tried with the file path URL, too, without success

How? and what does it say?

Christian Ehrlicher

@jim87 said in Custom widget without UI - some questions:

apparently Qt supports a subset of SVG, not the entire standard,

What do you mean with 'Standard'? There is no single SVG standard but a lot of them. Qt Support SVG 1.2 Tiny according the documentation.

jim87

@Pl45m4 both using url("{abs_path_to_file}") and using base64 encoded image (url("data:image/svg+xml;base64,{base64_encoded_svg}")) the error is always the same: Could not create pixmap from ....

@Christian-Ehrlicher apparently this graphic is SVG 1.1 Basic compatible, but it's not Tiny compatible: a list of attributes are not supported by it (like cx, cy, id, r, gradientUnits, radialGradient, offset, step-color, etc)