0

My ui created in qtdesign is not showing the images on raspberry pi 3B+ with LCD-screen. I added them to the ui via the resource and in qtDesign5 they do show up. I have tried to add the image as background for the QDialog, as background-image for the button and as image. And tried jpg, png and bmp files. None of the images are showing. What am I doing wrong?

This is how I am using the ui in my python-script.

#This program is a template for using a ui designed in QtDesign5
import sys
sys.path.append('/usr/lib/python3/dist-packages') #That's where PyQt5 is

from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWidgets import QDialog, QApplication
from PyQt5.uic import loadUi


class Life2Coding(QDialog):
    def __init__(self):
        super(Life2Coding, self).__init__()
        loadUi('DoorbellUi.ui', self)
        self.setWindowTitle('Life2Coding PyQt5 Gui')
        self.pushButton.clicked.connect(self.on_pushButton_clicked)
    @pyqtSlot()
    def on_pushButton_clicked(self):
        self.pushButton.cursor()#Dummy function

app=QApplication(sys.argv)
widget=Life2Coding()
widget.show()
sys.exit(app.exec_())        

My resource-file:

<RCC>
  <qresource prefix="bellimages">
    <file>roundGould.jpg</file>
  </qresource>
  <qresource prefix="bmps">
    <file>beldan.bmp</file>
  </qresource>
</RCC>

And this is my ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Dialog</class>
 <widget class="QDialog" name="Dialog">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>425</width>
    <height>304</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Dialog</string>
  </property>
  <property name="styleSheet">
   <string notr="true">background-color:rgb(0, 255, 255);
background:url(:/bellimages/roundGould.jpg)</string>
  </property>
  <widget class="QPushButton" name="pushButton">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>110</y>
     <width>401</width>
     <height>111</height>
    </rect>
   </property>
   <property name="sizePolicy">
    <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
     <horstretch>0</horstretch>
     <verstretch>0</verstretch>
    </sizepolicy>
   </property>
   <property name="font">
    <font>
     <family>Monotype Corsiva</family>
     <pointsize>48</pointsize>
     <italic>true</italic>
    </font>
   </property>
   <property name="cursor">
    <cursorShape>ArrowCursor</cursorShape>
   </property>
   <property name="styleSheet">
    <string notr="true">background-image: url(:/bmps/beldan.bmp);</string>
   </property>
   <property name="text">
    <string>Ding!Dong!</string>
   </property>
  </widget>
 </widget>
 <resources>
  <include location="qtScreendesign/qtResource.qrc"/>
 </resources>
 <connections/>
</ui>
  • You are probably missing the Qt image plugins. Are you using distro packages or a self built Qt ? – onion Jul 23 '18 at 12:33
  • Thanks for your help! distro packages, I think. I installed QtDesigner5 on my desktop and created this simple ui. It is my first experience with QtDesigner, so I am not even aware that it is possible to build your own Qt. Also I do not know how I can check if the plugin is missing and how I can add it. Can you maybe tell me? I did have to do "sys.path.append" to get the python-scrit to find the PyQt5 modules. can it be that the qtimage is in another path? – Tim van Steenbergen Jul 23 '18 at 14:40
  • If you are using raspbian, try installing the qt5-image-formats-plugins package. – onion Jul 24 '18 at 7:47
1

Try to change the rows of ui file:

background:url(:/bellimages/roundGould.jpg)</string>
<string notr="true">background-image: url(:/bmps/beldan.bmp);</string>

to:

background:url(roundGould.jpg)</string>
<string notr="true">background-image: url(beldan.bmp);</string>

Reading the code you posted I think that the .jpg and .bmp files you want to use are in the same folder as the .py file in which you use the loadUi command. I encountered the same problem in one of my projects and I solved it by editing the file path in the .ui file by deleting :/prefix, indicating only the names of the file.

If you convert your .ui file through the command:

pyuic5 DoorbellUi.ui -o DorbellUi.py 

the lines that refer to your images become:

Dialog.setStyleSheet("background-color:rgb(0, 255, 255);\n"
"background:url(:/bellimages/roundGould.jpg)")

self.pushButton.setStyleSheet("background-image: url(:/bmps/beldan.bmp);")

I think the error is in the way the path is specified. Try rewriting the path file name in .ui file.

  • 2
    Please try and explain your changes, instead of "change this to make it work". Much better to explain the problem and solution to the user. – Vincent P Nov 5 '18 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.