Reading Image directory in Qml

sanjayrathore36

Hi All,

I want to read the image directory and show the images in grid or in list.Please tell me in qml how i can read the particular directory
in QML. I am new in Qml.

Kxyu

noway

ngocketit

You can not do that directly with QML, but you can do that easily with C++ by writing a model that collects paths of images you want in the directory and use the model from inside QML, e.g, assigning it to the model property of the GridView or ListView. For how to write a model and plugin, see here:

http://doc.qt.nokia.com/4.7-snapshot/qdeclarativemodels.html#c-data-models,
http://doc.qt.nokia.com/4.7-snapshot/src-imports-folderlistmodel.html
http://doc.qt.nokia.com/4.7-snapshot/qml-extending-tutorial-index.html

blam

Using the FolderListModel plugin (which ngocketit linked to above) you can easily build something directly in QML like the following, which uses a ListView to display all the PNG files within the directory specified by the FolderListModel's "folder" property:

@
import QtQuick 1.0
import Qt.labs.folderlistmodel 1.0

ListView {
width: 400; height: 600

FolderListModel {
    id: folderModel
    nameFilters: ["*.png"]

    folder: "/path/to/my/images"
}

Component {
    id: fileDelegate
    Column {
        Image {
            width: 150; height: 150
            fillMode: Image.PreserveAspectFit
            smooth: true
            source: folderModel.folder + "/" + fileName
        }
        Text { text: fileName }
    }
}

model: folderModel
delegate: fileDelegate

}
@

sanjayrathore36

Hi blam,

thanks for your reply.but can you tell me how i can give the path in symbian because i am giving the
path like c:\photos. it is not showing me image it is giving error unable to open c: d: e .

blam

Do you need to add some permissions to your application to allow it to read from that location?

sanjayrathore36

Hi blam,

I am not getting what you want say.please explain..

akazad

Path Separators
Qt uses "/" as a universal directory separator in the same way that "/" is used as a path separator in URLs. If you always use "/" as a directory separator, Qt will translate your paths to conform to the underlying operating system.
Ref: http://doc.qt.nokia.com/4.7-snapshot/qml-folderlistmodel.html

if still error then you can try with add "file://" before the path, so this can be "file://c:/" for windows [probably for Symbian also same as Windows path, not so sure] AND "file:///home/more" for unix based.

hope it helps.

sanjayrathore36

hi ,

I tried this but its does not works

ListView {
width: 400; height: 600

    FolderListModel {
        id: folderModel
        nameFilters: ["*.JPG"]

        folder: "file://c:/photos"
    }

    Component {
        id: fileDelegate
        Column {
            Image {
                width: 150; height: 150
                fillMode: Image.PreserveAspectFit
                smooth: true
                source: folderModel.folder + "/" + fileName
            }
            Text { text: fileName }
        }
    }

    model: folderModel
    delegate: fileDelegate
}#

jpetrell

I tested blam's example on Symbian, it worked fine, though folder string required three "/" characters instead of two:
@
FolderListModel {
folder: "file:///c:/photos"
}
@

Also, remember that accessing data on the drives on the phone memory requires ReadUserData capability. Qml Viewer already has that capability, you only need to add it if you're running your QML as a standalone application. You can give the capability to your application by appending following lines in the Qt .pro application project file:
@symbian {
TARGET.CAPABILITY += ReadUserData
}
@

sanjayrathore36

thanks jpetrell a lot .now this code is working.