Reading Image directory in Qml



  • 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.



  • noway



  • 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



  • 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
    

    }
    @



  • 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 .



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



  • Hi blam,

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



  • 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.



  • 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
    }# 


  • 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
    }
    @



  • thanks jpetrell a lot .now this code is working.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.