Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Contributor
bb10developer
Posts: 2
Registered: ‎05-15-2012
My Device: Blackberry 10 Dev Alpha
Accepted Solution

Loading image from URL

I'm new to Blackberry 10 development and I'm trying to load an image from the web into a ImageView control on a ListView.

 

My QML for the ListView looks like this:

ListView {
    id: titlesListView
    objectName: "titlesListView" 

    listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
                layout: StackLayout {
                    layoutDirection: LayoutDirection.LeftToRight
                }
                ImageView {
                    imageSource: ListItemData.boxArt
                }
                Label {
                    text: ListItemData.title
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal
                    }
                }
            }
        }
    ]
}

Then I use a GroupDataModel class to provide the data:

GroupDataModel *model = new GroupDataModel(QStringList() << "title" << "boxArt");
 
QVariantMap map;
map["title"] = "Test Title";
map["boxArt"] = "http://www.foo.com/bar.jpg";
model->insert(map);
 
ListView *listView = findControl<ListView>("titlesListView");
listView->setDataModel(model);

 

At runtime I am getting this error in the logs:

Unsupported scheme (http) used in url

 

Does this really mean that it's not possible to load an image from a URL or am I going about it in the wrong way?

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Loading image from URL

I started replying this morning, then realized I was merely speculating and should let someone who knows the answer respond.

Nobody has, so I'll speculate. :smileyhappy:

I think there's a good chance, assuming this is supposed to work (or does, for example, in the equivalent QtGui classes), that this is simply another unfinished feature in Cascades and you'll have to wait, or reimplement it in custom code with a background loader thread or something like that.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
ekke
Posts: 1,553
Registered: ‎04-08-2010
My Device: Z10 (red Limited Edition), Q10, Z30
My Carrier: Telekom.de, O2, Vodafone

Re: Loading image from URL

from my discussions at BB10Jam I know that this is work-in-progress and a sample app will follow soon.

It's important for me, too to get Images from URL. In my case a JSON of Conference-Speakers contains the Image URL's of the Speakers I want to display in a List.

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development Mobile Apps BlackBerry 10 Cascades
Cascades - Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org videos: http://www.youtube.com/user/ekkescorner http://vimeo.com/ekkescorner/videos
bb10-development: http://appbus.org Twitter: @ekkescorner
Retired
alarsson
Posts: 5
Registered: ‎04-10-2012
My Device: Curve

Re: Loading image from URL

Ekke is right, Cascades currently does not support loading images from URL. It's a very reasonable feature but we just didn't have time to put it in yet.

 

It should be pretty simple to build your own class to do this for now, like Peter9477 suggests.

 

Cheers!

 

Anders

Developer
jheron
Posts: 188
Registered: ‎01-27-2012
My Device: playbook

Re: Loading image from URL

With standard qml you can use Qt.resolvedUrl ( http://doc-snapshot.qt-project.org/4.8/qml-qt.html#resolvedUrl-method

And in Qt c++ use QUrl http://qt-project.org/doc/qt-4.8/QUrl.html

Good Luck!

Jon

 

New Developer
evandempsey
Posts: 4
Registered: ‎05-21-2012
My Device: Dev Alpha

Re: Loading image from URL

There is some nice code here that shows you how to download data from a URL and load it into a QPixmap. It should be easy enough to wrap it up in a class to do what you want.

 

http://qt-project.org/wiki/Download_Data_from_URL

New Contributor
bb10developer
Posts: 2
Registered: ‎05-15-2012
My Device: Blackberry 10 Dev Alpha

Re: Loading image from URL

OK I was finally able to get this working.

 

Here's some sample code to show how it was done:

App::App()
{
    //QNetworkAccessManager m_manager;
    connect(&m_manager, SIGNAL(finished(QNetworkReply*)),
         this, SLOT(replyFinished(QNetworkReply*)));
}

void App::setImage(const QString &url)
{
	m_manager.get(QNetworkRequest(QUrl(url)));
}

void App::replyFinished(QNetworkReply* reply)
{
    QByteArray data = reply->readAll();

    QImage qimage;
    qimage.loadFromData(data);

    int width = qimage.width();
    int height = qimage.height();
    PixelBufferData pixelBuffer = PixelBufferData(PixelBufferData::RGBX, width, height, width, qimage.bits());

    Image image = Image(pixelBuffer);
    m_imageView->setImage(image);
}

 

Developer
level32
Posts: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha

Re: Loading image from URL

How did you bind the image to the ListItemComponent? 

New Contributor
bigo132
Posts: 9
Registered: ‎02-02-2012
My Device: 9700

Re: Loading image from URL

[ Edited ]

Hi,

 

I used same code, it can load image successful, but some surprised happened, when i load the below image by the follow code, it display the image which change blue to red, and the background change the black but actually it is black. please see the attches.

 

void CascadeImage::handleNetworkData(QNetworkReply *reply)
{
if (!reply->error()) {
// Let's get ALL the data
const QByteArray response(reply->readAll());
QImage QImg;
QImg.loadFromData(response);
if (!QImg.isNull())
{
PixelBufferData pbd(PixelBufferData::RGBX, QImg.width(), QImg.height(), QImg.width(), QImg.bits());
imageView->setImage(Image(pbd));
}
}
// Cleanup
reply->deleteLater();
}

 

Here is the image url:

 

http://img.sc115.com/uploads/png/110125/201101251220241969.png

 

 

New Contributor
GaryHomewood
Posts: 6
Registered: ‎07-05-2012
My Device: BB10

Re: Loading image from URL

I'd love to see how this is done. I'm new to C++/QML so at the moment I don't quite understand how retrieving the image in C++ and binding to the datamodel/QML works.

 

It would be a very good candidate for a sample application, because it is such a common requirement.