Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Custom widget without UI - some questions



  • 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>
    

    7295e489-367f-4904-8a15-9f0499d37bee-immagine.png

    Thank you very much :)



  • @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.



  • 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 :)



  • @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?


  • Lifetime Qt Champion

    @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.



  • @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)


Log in to reply