3

When I deploy my QML only program to the desktop using the Ubuntu SDK, images that I have placed in the same folder as Main.qml can be accessed and displayed correctly in the application using source: "Pics/testpic.png"

When deployed to armhf device they cannot be accessed in this manner and instead results in errors like

QML QQuickImage: Cannot open: file:///opt/click.ubuntu.com

What is the best method to get the click package to incorporate a folder of pictures into the binary where they can be accessed and used by the application?

If I change the source to a web address it will happily show any picture I point it to, so it's able to display images fine but doesn't have access to my own images folder.

There is a similarish question here

Add image files in Ubuntu QML app with C++ plugins (qrc)

and koukouviou adds a footnote to his question:

I ended up creating a qmake project instead of a cmake project and achieved embedding the image in the binary. For my needs that's OK, since I'm just developing a simple proof-of-concept app

So 'embedding the image in the binary' sounds like exactly what I want to do.

Can anyone run through how to do this with me?

Just to note, I have attempted a number of 'stab in the dark' attempts at this.

  • Added a .qrc file (which appears to be the solution for a 'qml with C++' app) but access via source: ":/Pics/testpic.png" or source: "qrc:/Pics/testpic.png" resulted in the same Cannot open: file etc.

  • Also tried adding the folder in the project pane on the left of the SDK. It showed up under "extra files" but still seems to not be accessible when deployed to armhf device.

Any help with this would be very much appreciated.


Edit: A Quick Outline of Where I went Wrong...

Thanks to koukouviou for steering me onto the right path.

My main problem was that I started a QML App with Simple UI(qmake) project. I put it together and tested it by deploying to the Desktop and when I was happy enough with it I tried deploying to an armhf Device. It was then that I found that the images wouldn't show.

I had no C++ code in my project so it seemed unnecessary to be using any of the 'C++' project Templates, so I made some attempts to 'fix' my problem but I was still using the 'QML App with Simple UI' project Template.

Adding a QT Resource file to a QML App with Simple UI project looks like it should work: the .qrc file can be added and populated with your images but any reference to source: "qrc:/Pics/testpic.png" failed.

As far as I am aware it is not possible to use your own Image files with a 'QML App with Simple UI' and deploy it to an armhf Device.

After reading koukouviou's answer I finally thought I'd just have to bite the bullet and start a project using C++ code. This time I chose QtQuick App with QML UI (qmake) which has the description 'Creates a C++ Ubuntu application project with a sample UI containing a Label and a Button'.

As previously mentioned, I had avoided this before because I had no C++ code in my application & no real understanding of how to use C++ in this (or any) context, but I was glad to find that it wasn't necessary for me to adjust or add any C++ code and I could just make my changes to Main.qml and add my Image files to the Resources. There was, in fact, already a .qrc resource file in the project tree by default.

2
+50

This is what I did to embed an image in the "binary":

I'm using a qmake project with the default folder structure in Ubuntu SDK. I made a directory to store my images: project_name/backend/your_click/images. With the backend folder I created a new resource file resource_file.qrc that contains the following:

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file>images/bigredbutton.png</file>
</qresource>
</RCC>

To create the qrc file I think you can right-click, Add New ..., Qt, Qt Resource File and manually edit the file, or manually create it from scratch. I don't remember which one worked for me, try them out and let me know, I will edit the answer for others that may run into the same problem in the future.

In my Main.qml file I use the image like this:

Image {
    id: btn
    width: 250; height: 250
    fillMode: Image.PreserveAspectFit
    source: "qrc:images/bigredbutton.png"
    MouseArea {
    ...
    }

Here's a screenshot of my project structure, it might help. Project structure with qrc file

4
  • thanks koukouviou - I'll check this out & get back to you (probably be another day or so). – pHeLiOn Jun 8 '16 at 18:18
  • hope it works for you, if you find any other peculiarities let me know to update the answer to reflect them for future reference – koukouviou Jun 8 '16 at 18:47
  • Success! After looking at your project tree that you helpfully provided I figured I'd need to try a different project type. My main stupidity was that I'd chosen a QML app with simple UI (qmake) & because it worked fine deployed to Desktop I'd been sticking with that and trying to 'fix' the armhf deployment. I'd even added a QT Resource file to the project and it looked like it should work, but calls to source: "qrc:/Pics/testpic1.png" then failed for both desktop & armhf. A new project using QtQuick App with QML UI (qmake) has a .qrc off the bat & all is good. Will edit my question... – pHeLiOn Jun 9 '16 at 13:24
  • Glad to hear it worked! Happy developing :) – koukouviou Jun 9 '16 at 20:51

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.