×

Discussion Board

Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Dec 2010
    Posts
    21

    Qml page with multi images

    Hello,
    I have an issue with images and selections.
    I've draw an Schematic about my problem with PAINT

    NOW




    MY WISH


    please help me
    Thanks

  2. #2
    Nokia Developer Expert
    Join Date
    Jun 2012
    Posts
    55

    Re: Qml page with multi images

    What does imagepicker contain ? Perhaps you can add a simple property / property alias in imagepicker.qml that you modify based on which image was clicked to populate imagepicker?

    Br,
    Villep

  3. #3
    Registered User
    Join Date
    Dec 2010
    Posts
    21

    Re: Qml page with multi images

    I'm not expert on "property string, alias" and "signal"
    pls help me

    Code:
    import QtMobility.gallery 1.1
    import com.nokia.symbian 1.1
    import QtQuick 1.1
    
    Page {
        id: resimsec
        width: 360
        height: 640
    
        GridView {
            id: gridci
            cellHeight: 120
            cellWidth: 120
            anchors.bottom: toolbar1.top
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: parent.top
            model: DocumentGalleryModel {
                rootType: DocumentGallery.Image
                properties: [ "url" ]
            }
    
            delegate:
    
            Image {
                id: image1
                source: url
                smooth: false
                fillMode: Image.PreserveAspectCrop
                clip: true
                asynchronous: true
                sourceSize.width: 120
                width: 120
                height: 120
    
                MouseArea {
                    id: tikalani
                    anchors.fill: parent
                    onClicked: {
                        window.pageStack.pop();
                    }
                }
    
                BusyIndicator {
                    id: busyindicator1
                    width: 40
                    height: 40
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    running: true
                    visible: (image1.status == Image.Loading) ? true : false
                }
            }
        }
    
        ToolBar {
            id: toolbar1
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
    
            ToolButton {
                id: toolbutton1
                text: ""
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                iconSource: "toolbar-back"
                onClicked: window.pageStack.pop()
            }
        }
    }

  4. #4
    Nokia Developer Expert
    Join Date
    Jun 2012
    Posts
    55

    Re: Qml page with multi images

    What do you have in your MainPage.qml on the Image onClicked? Are all your images from the document gallery?

    Br,
    Villep

  5. #5
    Registered User
    Join Date
    Dec 2010
    Posts
    21

    Re: Qml page with multi images

    the item in the MainPage

    stil1

    Code:
    import QtQuick 1.1
    import com.nokia.symbian 1.1
    
    Item {
        width: 360
        height: 360
    
        property string bordercolor: "white"
        property int borderround: 0
        property string resim: image1.source
    
        Rectangle {
            id: rectangle1
            radius: 20
            border.width: 20
            border.color: "#ffffff"
            anchors.fill: parent
    
            Flickable {
                id: flickable1
                x: 10
                y: 10
                width: 340
                height: 340
                clip: true
                contentHeight: image1.height * image1.scale
                contentWidth: image1.width * image1.scale
    
                BusyIndicator {
                    id: busyindicator1
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    running: true
                    platformInverted: true
                    visible: (image1.status == Image.Loading) ? true : false
                }
    
                Image {
                    id: image1
                    smooth: true
                    source: resim
                    asynchronous: true
                    sourceSize.width: 1200                
                }
    
                PinchArea{
                    id: pinching
                    anchors.fill: parent
                    pinch.minimumScale: flickable1.width / image1.width
                    pinch.maximumScale: 5
                    pinch.minimumRotation: 0
                    pinch.maximumRotation: 360
                    pinch.target: image1
                }
    
                MouseArea {
                    id: mousearea
                    anchors.fill: parent
                    onPressAndHold: secimmenu.open()
                }
    
                ContextMenu {
                     id: secimmenu
                     MenuLayout {
                         MenuItem {
                             text: "Change Image"
                             onClicked: window.pageStack.push(resimsec1)
                         }                     
                         MenuItem {
                             text: "Delete Image"
                             onClicked: resim = ""
                         }                     
                     }
                 }
            }
        }
    
        Rectangle {
            id: rectangle3
            color: "#00ffffff"
            anchors.fill: parent
            anchors.topMargin: 0
            border.color: bordercolor
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            border.width: 20
            anchors.leftMargin: 0
        }
    
        Rectangle {
            id: rectangle2
            color: "#00ffffff"
            radius: borderround
            anchors.fill: parent
            border.color: bordercolor
            anchors.topMargin: 0
            anchors.rightMargin: 0
            border.width: 20
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
    
            Button {
                id: button1
                text: "Choose Image"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: window.pageStack.push(resimsec1)
                visible: ( resim == "" ) ? true : false
            }
        }
    }


    imagepicker
    Code:
    import QtMobility.gallery 1.1
    import com.nokia.symbian 1.1
    import QtQuick 1.1
    
    Page {
        id: resimsec
        width: 360
        height: 640
    
        property alias akinorta: gridci.model
    
        GridView {
            id: gridci
            cellHeight: 120
            cellWidth: 120
            anchors.bottom: toolbar1.top
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: parent.top
            model: akinorta
            delegate:
            Image {
                id: image1
                source: url
                smooth: false
                fillMode: Image.PreserveAspectCrop
                clip: true
                asynchronous: true
                sourceSize.width: 120
                width: 120
                height: 120
    
                MouseArea {
                    id: tikalani
                    anchors.fill: parent
                    onClicked: { stil1.resim = url; window.pageStack.pop(); }
                }
    
                BusyIndicator {
                    id: busyindicator1
                    width: 40
                    height: 40
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    running: true
                    visible: (image1.status == Image.Loading) ? true : false
                }
            }
        }
    
        ToolBar {
            id: toolbar1
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
    
            ToolButton {
                id: toolbutton1
                text: ""
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                iconSource: "toolbar-back"
                onClicked: window.pageStack.pop()
            }
        }
    }

  6. #6
    Nokia Developer Expert
    Join Date
    Jun 2012
    Posts
    55

    Re: Qml page with multi images

    You can probably do something like.
    In your Imagepicker.qml
    Code:
    //Add these to the Page
    property alias imageModel : gridci.model
    property string selectedImage : ""
    
    /* Then in your GridView delegate the MouseArea change onClicked to*/    
    onClicked: { selectedImage = url; window.pageStack.pop(); }
    Then you can select the model you want to use for the gallery. Also to access the selected image you can simply:
    Code:
    //Imagepicker with id picker
    Imagepicker { 
       id: picker 
       imageModel: DocumentGalleryModel {
          id: model
          rootType: DocumentGallery.Image
          properties: [ "url" ]
       }
    }
    
    Image {
       id: image1
       source: picker.selectedImage
    }
    Br,
    Villep

  7. #7
    Registered User
    Join Date
    Dec 2010
    Posts
    21

    Re: Qml page with multi images

    thank you i'll give you feedback after I've tried

  8. #8
    Registered User
    Join Date
    Dec 2010
    Posts
    21

    Re: Qml page with multi images

    didn't work.
    when i select any image from imagepicker
    all of images are being same

    sorry for my previous post
    I will change the code for MainPage

    Code:
     
    
    import QtQuick 1.1
    import com.nokia.symbian 1.1
    import QtMobility.gallery 1.1
    
    Item {
        width: 360
        height: 360
    
        property string bordercolor: "white"
        property int borderround: 0
        //property string resim2: image1.source
        //property string resim3: image2.source
    
        Rectangle {
            id: rectangle1
            width: 180
            height: 360
            color: "#ffffff"
            border.width: 20
            border.color: "#ffffff"
    
            ResimSecme {
               id: picker
               imageModel: DocumentGalleryModel {
                  id: model
                  rootType: DocumentGallery.Image
                  properties: [ "url" ]
               }
            }
    
            Flickable {
                id: flickable1
                x: 10
                y: 10
                width: 160
                height: 340
                clip: true
                contentHeight: image1.height
                contentWidth: image1.width
    
                BusyIndicator {
                    id: busyindicator1
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    running: true
                    platformInverted: true
                    visible: (image1.status == Image.Loading) ? true : false
                }
    
                Image {
                    id: image1
                    smooth: true
                    source: resimsecme.selectedImage
                    asynchronous: true
                    sourceSize.width: 1280
                }
    
                PinchArea{
                    id: pinching1
                    anchors.fill: parent
                    pinch.minimumScale: flickable1.width / image1.width
                    pinch.maximumScale: 5
                    pinch.minimumRotation: 0
                    pinch.maximumRotation: 360
                    pinch.target: image1
                }
    
                MouseArea {
                    id: mousearea
                    anchors.fill: parent
                    onPressAndHold: secimmenu.open()
                }
    
                ContextMenu {
                     id: secimmenu
                     MenuLayout {
                         MenuItem {
                             text: "Delete Image"
                             onClicked: resim2 = ""
                         }
                         MenuItem {
                             text: "Change Picture"
                             onClicked: window.pageStack.push(resimsecme)
                         }
                     }
                 }
            }
        }
    
        Rectangle {
            id: rectangle3
            width: 180
            height: 360
            color: "#00ffffff"
            border.color: bordercolor
            border.width: 20
        }
    
        Rectangle {
            id: rectangle2
            width: 180
            height: 360
            color: "#00ffffff"
            radius: borderround
            border.color: bordercolor
            border.width: 20
    
            Button {
                id: button1
                text: "Choose"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                visible:(image1.source == "") ? true : false
                onClicked: window.pageStack.push(resimsecme)
            }
        }
    
        Rectangle {
            id: rectangle4
            x: 180
            width: 180
            height: 360
            color: "#ffffff"
            border.color: "#ffffff"
            border.width: 20
    
            Flickable {
                id: flickable2
                x: 10
                y: 10
                width: 160
                height: 340
                clip: true
                contentWidth: image2.width
                contentHeight: image2.height
    
                BusyIndicator {
                    id: busyindicator2
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    running: true
                    platformInverted: true
                    visible: (image2.status == Image.Loading) ? true : false
                }
    
                Image {
                    id: image2
                    smooth: true
                    source: resimsecme.selectedImage
                    asynchronous: true
                    sourceSize.width: 1280
                }
    
                PinchArea{
                    id: pinching2
                    anchors.fill: parent
                    pinch.minimumScale: flickable2.width / image2.width
                    pinch.maximumScale: 5
                    pinch.minimumRotation: 0
                    pinch.maximumRotation: 360
                    pinch.target: image2
                }
    
                MouseArea {
                    id: mousearea2
                    anchors.fill: parent
                    onPressAndHold: secimmenu2.open()
                }
    
                ContextMenu {
                     id: secimmenu2
                     MenuLayout {
                         MenuItem {
                             text: "Delete"
                             onClicked: resim3 = ""
                         }
                         MenuItem {
                             text: "Change Image"
                             onClicked: window.pageStack.push(resimsecme)
                         }
                     }
                 }
            }
        }
    
        Rectangle {
            id: rectangle6
            x: 180
            width: 180
            height: 360
            color: "#00ffffff"
            radius: borderround
            border.color: bordercolor
            border.width: 20
        }
    
        Rectangle {
            id: rectangle5
            x: 180
            width: 180
            height: 360
            color: "#00ffffff"
            border.color: bordercolor
            border.width: 20
    
            Button {
                id: button2
                text: "Choose"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                visible:(image2.source == "") ? true : false
                onClicked: window.pageStack.push(resimsecme)
            }
        }
    }

Similar Threads

  1. Multi page form or multi taps
    By zohirey2 in forum Symbian User Interface
    Replies: 2
    Last Post: 2009-06-04, 11:57
  2. About multi-page view
    By charles_happysunny in forum Symbian User Interface
    Replies: 1
    Last Post: 2009-04-08, 07:48
  3. Multi Page Dialog
    By amitaggarwal in forum Symbian
    Replies: 6
    Last Post: 2008-04-18, 09:53
  4. multi-page form
    By Co2009 in forum Symbian User Interface
    Replies: 3
    Last Post: 2008-04-18, 09:49
  5. Multi-page dialogs
    By Carolinline in forum Symbian Tools & SDKs
    Replies: 0
    Last Post: 2006-11-06, 10:13

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×