Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to create PathView dynamically
Forum Updated to NodeBB v4.3 + New Features

How to create PathView dynamically

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 2 Posters 898 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    rahul3349
    wrote on last edited by rahul3349
    #1

    I need to change arrangement of UI items on screen by pressing some key. Initially I've static view where UI items (e.g images) are arranged as per x,y value set. But on press of some key, these images should arrange in PathView(PathQuad)
    I've tried below method but I'm not able to arrange images in specified curve by PathQuad. Image is only displayed at 0,0 but text is arranged as per curve and I can move text along the curve.
    My requirement is that WindowImage.qml should not contain source at initially , source file is assigned only when key is pressed.

    Rectangle {
        id:root
        width : 720
        height : 640
    
      Component {
            id: delegate
            Item {
                //width: 80; height: 80
                opacity: PathView.iconOpacity
                scale: PathView.iconScale
            Column {
                Item{
                    id: wrapper
                    anchors.horizontalCenter: nameText.horizontalCenter
                    WindowImage { }  // defined in another qml file
                }
                Text {
                    id: nameText
                    text:name
                    font.pointSize: 16
                    color: wrapper.PathView.isCurrentItem ? "red" : "black"
                }
            }
            }
        }
    
     ListModel {
             id: appModel
             dynamicRoles:true
        }
    
    PathView {
            id:pathCntl
            anchors.fill: parent
            model: appModel
            delegate: delegate
            path: Path {
                startX: 100; startY: 220
                PathAttribute { name: "iconScale"; value: 1.0 }
                PathAttribute { name: "iconOpacity"; value: 1.0 }
                PathQuad { x: 720; y: 320; controlX: 640; controlY: 320 }
                PathAttribute { name: "iconScale"; value: 0.3 }
                PathAttribute { name: "iconOpacity"; value: 0.5 }
                PathQuad { x: 120; y: 100; controlX: 60; controlY: -75 }
            }
            focus: true
            Keys.onLeftPressed: {
                pathCntl.decrementCurrentIndex();
            }
            Keys.onPressed: {
                if ((event.key == Qt.Key_1) && (event.modifiers & Qt.AltModifier)) {
                    var windowImageComponent = Qt.createComponent("WindowImage.qml");
                    if (windowImageComponent.status != Component.Ready) {
                        console.warn("Error loading windowImage.qml: " +  windowImageComponent.errorString());
                        return;
                    }
                    console.log("windows added");
                    var windowContainer = windowImageComponent.createObject(root);
                    windowContainer.imgsrc = "images/green.jpg"
                    appModel.append(windowContainer)
                    appModel.append({name: "green"})
                }
            }
            Keys.onRightPressed: incrementCurrentIndex()
        }
    }
    

    WindowImage.qml

    import QtQuick 2.0
    
    Image {
       id:image
        source: imgsrc
    
      //  width: 64; height: 64
        property string imgsrc
    }
    

    Edited: Please use ``` (3 backticks) for posting code blocks - p3c0

    p3c0P 1 Reply Last reply
    0
    • R rahul3349

      I need to change arrangement of UI items on screen by pressing some key. Initially I've static view where UI items (e.g images) are arranged as per x,y value set. But on press of some key, these images should arrange in PathView(PathQuad)
      I've tried below method but I'm not able to arrange images in specified curve by PathQuad. Image is only displayed at 0,0 but text is arranged as per curve and I can move text along the curve.
      My requirement is that WindowImage.qml should not contain source at initially , source file is assigned only when key is pressed.

      Rectangle {
          id:root
          width : 720
          height : 640
      
        Component {
              id: delegate
              Item {
                  //width: 80; height: 80
                  opacity: PathView.iconOpacity
                  scale: PathView.iconScale
              Column {
                  Item{
                      id: wrapper
                      anchors.horizontalCenter: nameText.horizontalCenter
                      WindowImage { }  // defined in another qml file
                  }
                  Text {
                      id: nameText
                      text:name
                      font.pointSize: 16
                      color: wrapper.PathView.isCurrentItem ? "red" : "black"
                  }
              }
              }
          }
      
       ListModel {
               id: appModel
               dynamicRoles:true
          }
      
      PathView {
              id:pathCntl
              anchors.fill: parent
              model: appModel
              delegate: delegate
              path: Path {
                  startX: 100; startY: 220
                  PathAttribute { name: "iconScale"; value: 1.0 }
                  PathAttribute { name: "iconOpacity"; value: 1.0 }
                  PathQuad { x: 720; y: 320; controlX: 640; controlY: 320 }
                  PathAttribute { name: "iconScale"; value: 0.3 }
                  PathAttribute { name: "iconOpacity"; value: 0.5 }
                  PathQuad { x: 120; y: 100; controlX: 60; controlY: -75 }
              }
              focus: true
              Keys.onLeftPressed: {
                  pathCntl.decrementCurrentIndex();
              }
              Keys.onPressed: {
                  if ((event.key == Qt.Key_1) && (event.modifiers & Qt.AltModifier)) {
                      var windowImageComponent = Qt.createComponent("WindowImage.qml");
                      if (windowImageComponent.status != Component.Ready) {
                          console.warn("Error loading windowImage.qml: " +  windowImageComponent.errorString());
                          return;
                      }
                      console.log("windows added");
                      var windowContainer = windowImageComponent.createObject(root);
                      windowContainer.imgsrc = "images/green.jpg"
                      appModel.append(windowContainer)
                      appModel.append({name: "green"})
                  }
              }
              Keys.onRightPressed: incrementCurrentIndex()
          }
      }
      

      WindowImage.qml

      import QtQuick 2.0
      
      Image {
         id:image
          source: imgsrc
      
        //  width: 64; height: 64
          property string imgsrc
      }
      

      Edited: Please use ``` (3 backticks) for posting code blocks - p3c0

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      @rahul3349 I guess just like you added appended name you should append source path of image there itself.

      Item{
          id: wrapper
          anchors.horizontalCenter: nameText.horizontalCenter
          WindowImage { source: strpath }  // defined in another qml file
      }
      ...
      
      var windowContainer = windowImageComponent.createObject(root);
      //windowContainer.imgsrc = "images/green.jpg"
      appModel.append(windowContainer)
      appModel.append({name: "green", strpath: "images/green.jpg"})
      

      157

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved