[SLOVED] Horizontal RSS News animation + ListView + XmlListModel

darbor

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

shav

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

darbor

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

}
@

shav

[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
}

}
@

darbor

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

}
@

shav

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

darbor

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.

shav

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);
}

}
@

darbor

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

}
@