[SLOVED] Horizontal RSS News animation + ListView + XmlListModel



  • Hello

    I try write simple RSS horizontal news.

    How can I add to my rss animation loop.

    this is my qml app:

    @import QtQuick 2.0
    import QtQuick.XmlListModel 2.0

    Rectangle {
    width: 800
    height: 600
    id: screen

    property string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml"
    property bool loading: rssModle.status == XmlListModel.Loading
    
    
    
    XmlListModel {
        id: rssModle
        source: "http://" + screen.currentFeed
        query: "/rss/channel/item"
    
        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "description"; query: "description/string()" }
    }
    
    
    Rectangle {
        anchors.left: screen.left
        anchors.right: screen.right
        anchors.bottom: screen.bottom
        id : footerBlock
        height: 30
        color: "black"
    
        ListView {
            width: parent.width
            height: parent.height
            orientation: ListView.Horizontal
            id : list
            model : rssModle
            delegate:  textDelegate
        }
    }
    
    Component {
        id: textDelegate
        Row {
            id: row
            spacing: 30
    
    
            Text {
    
                text: " - " + title + " - "
                color: "blue"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
            }
    
            Text {
                text: description.replace(/<(?:.|\n)*?&gt;/gm, '')
                color: "white"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
            }
        }
    }
    

    }
    @

    Thanks for Your help
    Darek



  • Hi,

    Did you check Animetion documentation from this "link":http://qt-project.org/doc/qt-5/qml-qtquick-animation.html? You can use "loops" property to set times animation will played. If you want to play animtion until you sopped it manually you should set loops value to "Animation.Infinite" something like this:
    @
    Rectangle {
    width: 100; height: 100; color: "green"
    RotationAnimation on rotation {
    loops: Animation.Infinite
    from: 0
    to: 360
    }
    }
    @



  • Hi,

    I add this code in my app, it's work but animation is only in first news (item)

    @import QtQuick 2.0
    import QtQuick.XmlListModel 2.0

    Rectangle {
    width: 800
    height: 600
    id: screen

    /*Rectangle {
        width: 100; height: 100; color: "green"
        RotationAnimation on x {
            loops: Animation.Infinite
            from: 0
            to: 360
        }
    }*/
    
    
    property string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml"
    property bool loading: rssModle.status == XmlListModel.Loading
    
    
    
    XmlListModel {
        id: rssModle
        source: "http://" + screen.currentFeed
        query: "/rss/channel/item"
        
        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "description"; query: "description/string()" }
    }
    
    
    Rectangle {
        anchors.left: screen.left
        anchors.right: screen.right
        anchors.bottom: screen.bottom
        id : footerBlock
        height: 30
        color: "black"
        
        ListView {
            width: parent.width
            height: parent.height
            orientation: ListView.Horizontal
            id : list
            model : rssModle
            delegate:  textDelegate
    
        }
    }
    
    
    
    
    
    Component {
        id: textDelegate
        Row {
            id: row
            spacing: 30
            
            
            RotationAnimation on x {
                loops: Animation.Infinite
                from: 0
                to: -10000
                duration: 1000
            }
            
            
            Text {
                
                text: " - " + title + " - "
                color: "blue"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
            }
            
            Text {
                text: description.replace(/<(?:.|\n)*?&gt;/gm, '')
                color: "red"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
                id: opis
                
            }
            
            
        }
        
        
    }
    

    }
    @



  • [quote author="darbor" date="1416838669"]Hi,

    I add this code in my app, it’s work but animation is only in first news (item)
    [/quote]

    In your code you have a Rectangle which show ListView. If you want to animation all items from list you must apply this animation to Rectangle or ListView something like this:
    @
    ListView {
    //Your code of list view to show news.

    NumberAnimation on x {
         loops: Animation.Infinite
         from: 0
         to: -10000
    }
    

    }
    @



  • Hi,

    Yeaaa, it's work, but...
    RSS news is dynamicaly and i don't know how can i calculate width of ListView to show all news and set properties "to:-xxxx" in NumberAnimation.
    I my case i set this properties to static:

    @import QtQuick 2.0
    import QtQuick.XmlListModel 2.0

    Rectangle {
    width: 800
    height: 600
    id: screen

    property string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml"
    property bool loading: rssModle.status == XmlListModel.Loading
    
    
    XmlListModel {
        id: rssModle
        source: "http://" + screen.currentFeed
        query: "/rss/channel/item"
        
        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "description"; query: "description/string()" }
    }
    
    
    Rectangle {
        anchors.left: screen.left
        anchors.right: screen.right
        anchors.bottom: screen.bottom
        id : footerBlock
        height: 30
        color: "black"
        ListView {
            width: 10000 /* static width - this is to small to show all news*/
            orientation: ListView.Horizontal
            id : list
            model : rssModle
            delegate:  textDelegate
    
            
            NumberAnimation on x {
                loops: Animation.Infinite
                from: 0
                to: -10000  /* static properties - how calculate width for all news rss*/
                duration: 10000
            }
            
        }
        
        
        
    }
    
    
    
    
    
    Component {
        id: textDelegate
        Row {
            id: row
            spacing: 30
            
            
            
            
            
            Text {
                
                text: " - " + title + " - "
                color: "blue"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
            }
            
            Text {
                text: description.replace(/<(?:.|\n)*?&gt;/gm, '')
                color: "red"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
                id: opis
                
            }
            
            
        }
        
        
    }
    

    }
    @



  • ListView has a contentWidth and contentHeight. You can use this property to get full size of your content in list view.



  • In my case data load from XmlListModel (asynch). I don't understand how set width ListView and "to: " after data loading.
    Could You show me some code to understand.



  • ListView has a signal which called when contentHeight was updated. You could subscribe this signal using code like this:
    @
    ListView {
    id: listVIewDatas
    //Your code of ListView
    onContentHeightChanged: {
    console.log("contentHeight: "+listVIewDatas.contentHeight);
    }

    onContentWidthChanged: {
         console.log("contentWidth: "+listVIewDatas.contentWidth);
    }
    

    }
    @



  • Yeeaaaa. Finaly it work :)
    Thanks for Your Help

    If someone has another idea, gladly I will know a new way.

    code:
    @import QtQuick 2.0
    import QtQuick.XmlListModel 2.0

    Rectangle {
    width: 800
    height: 600
    id: screen

    property string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml"
    property bool loading: rssModle.status == XmlListModel.Loading
    
    XmlListModel {
        id: rssModle
        source: "http://" + screen.currentFeed
        query: "/rss/channel/item"
        
        XmlRole { name: "title"; query: "title/string()" }
        XmlRole { name: "description"; query: "description/string()" }
        onStatusChanged: {
            if (status == XmlListModel.Ready) {
                
            }
        }
    }
    
    Rectangle {
        anchors.left: screen.left
        anchors.right: screen.right
        anchors.bottom: screen.bottom
        id : footerBlock
        height: 30
        color: "black"
        
        ListView {
            id : list
            //visible: rssModle.status == XmlListModel.Ready
            width: parent.width
            orientation: ListView.Horizontal
            model : rssModle
            delegate:  textDelegate
            
            onContentWidthChanged: {
                list.width = list.contentWidth
                looper.to = -list.contentWidth
                looper.duration = list.contentWidth*6
                looper.restart()
            }
            
            NumberAnimation on x {
                loops: Animation.Infinite
                id: looper
                from: footerBlock.width
            }
        }
    }
    
    Component {
        id: textDelegate
        Row {
            id: row
            spacing: 30
            
            Text {
                text: " - " + title + " - "
                color: "blue"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
            }
            
            Text {
                text: description.replace(/<(?:.|\n)*?&gt;/gm, '')
                color: "red"
                font { bold: true; family: "Helvetica"; pointSize: 17 }
                id: opis
            }
        }
    }
    

    }
    @


Log in to reply
 

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