Search code examples
pythonpyqt5fbs

Using FBS's get resource method in qss definitions?


I have a seperate qss stylesheet that contains my stylesheet definitions for my entire app. I need to add a close button as background image since I couldnt find documentation on using inbuilt icons.

customTabBar::close-button {
    padding: 0px;
    margin: 0px;
    border-radius: 2px;
    border-color: rgba(0, 0, 0, 50%);
    background-image: url(%(closeIcon)s);
    background-position: center center;
    background-repeat: none;
}

from fbs_runtime.application_context.PyQt5 import ApplicationContext

import qstylizer.parser


customIcons = {
    "customTabBar::closeButton.backgroundImage": f"url({app.get_resource('ui/close.png')})",
}

app = ApplicationContext()

with open(app.get_resource("app.qss"), "r") as stylesheet:
    css = qstylizer.parser.parse(stylesheet.read())
    for key, value in customIcons.items():
        property = key.split(".")
        css[property[0]][property[1]].setValue(value)
    app.app.setStyleSheet(css.toString())

the files are stored in the default fbs structure, under src/main/resource/base/ui/*.png

since I cannot use fstrings with curly braces being a part of qt. And this answer using python string formatting, but I keep getting key errors due to me having some rgba color values that also have % in it.

Since I cant use %ages or curly braces, I was thinking of building a qproperty out of get_resource, but I am not sure how. I need my qss cross compatible and cannot escape my curly braces.

My main problem is that the image wont be available when I package the application wtih fbs, using FBS freeze


Solution

  • As per @eyllanesc 's suggestion, this was my solution. the rcc file,

    <RCC>
      <qresource>
        <file alias="closeIcon">close.png</file>
      </qresource>
    </RCC>
    

    the shell command,

    pyrcc5 -o resources.py resources.rcc
    

    and here is the style sheet.

    TabBarPlus::close-button {
        background-image: url(:/closeIcon);
        padding: 0px;
        margin: 0px;
        border-radius: 2px;
        background-position: center center;
        background-repeat: none;
    }