QML Book Animation

Comments

Hamishwillee - @gnuton - did you get permission to publish?

Hi @gnuton

Did you request permission from Martin before publishing this? I think its an excellent example, but we need to be sure that Martin is happy with his code appearing under the Nokia Developer terms and conditions. Please confirm.

regards

Hamish

hamishwillee 06:34, 4 November 2011 (EET)

Gnuton - Code has been released under GNU Public License

That code has been released under GPL license and I mentioned its author in this post.

Is it enough? Anyway I will drop a mail right now and I will let you know.

gnuton 09:20, 4 November 2011 (EET)

UPDATE: Martin agreed. Here is his reply: "thank you for promoting my book implementation. I'm happy to see it onForum Nokia. :)"

Pycage - gnuton has my permission

Don't worry, I gave gnuton my permission to publish this. I'm actually happy to see it promoted by gnuton. :)

Martin

pycage 09:46, 4 November 2011 (EET)

Hamishwillee - Licensing

Hi Gnuton, Martin

Thanks very much for clarifying.

One potential problem is that anything uploaded to this site is made available under the site terms and conditions, which may not be compatible with GPL. Can this code be re-licensed/made available under the site T&Cs? It is possible to add a disclaimer explaining the separate licencing terms of this code, but this can be confusing to readers, and in any case the more liberal the terms the better for this sort of example code.

Regards Hamish

PS

FYI This is an excellent example. It's only "flaw" from a real ebook point of view is that you need to hard code the text displayed in order to ensure content is properly paged. The Simple QML EBook Reader‎ example isn't as "pretty" but solves this problem by using the underlying Qt text model to deliver pages as images (so you get all the layout stuff for free).

hamishwillee 00:28, 7 November 2011 (EET)

NielsMayer - Book Animation for YouTube Videos

See also my FeedBook demo/app which turns a YouTube feed into a "book" using a modified version of Martin Grimme's code.

http://www.youtube.com/watch?v=fx_EJtCu46U

Modified version of Martin Grimme's "BookAnimation" ( http://lists.meego.com/pipermail/meego-community/2011-March/003624.html ) providing a dynamically generated YouTube JSON Feed through a "Book" interface. Perhaps useful for touch-based browsing of video, or just a GUI novelty.

To run (assuming you've got lastest QtSDK installed):

$ svn co http://ytd-meego.googlecode.com/svn/trunk/playground/FeedBook/
$ cd FeedBook
$ qmlviewer main.qml

For some reason, when I use qmlviewer to record itself in video, the sound doesn't get reproduced... sorry.

NielsMayer 18:39, 10 November 2011 (EET)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: File:BookAnimation.tar.gz

---

Tested with

Devices(s): Nokia N900

---

Compatibility

Platform(s): Qt 4.7 and later

Device(s): All

---

Article

Keywords: Qt, QML, 3D, ListView, Sliding

Created: gnuton (30 Jun 2011)

Last edited: hamishwillee (30 Jan 2013)

See Also

Simple QML EBook Reader‎

Introduction

The great community around Maemo/MeeGo has always new cool things to show. In this article I would like to introduce you the Martin Grimme's Book Animation component, a QML component which adds a nice page flip effect.

The video below show us how it performs on the Nokia N900. The media player is loading...

The code

The Animation Book component is implemented in four files which are in the same directory. This directory can be imported and used in your project easily.

The base elements you need to use in your app are the following ones:

• Book - is a component which contains a Repeater element that holds maximum 4 items per time.
• BookBehavior - is a MouseArea that performs animations and loads items in from the model to the Book.
• Page - a Rectangle

The code below shows an easy way to use Book Animation.

import Qt 4.7
import "qmlbook"
 
Rectangle {
    width: 640
    height: 480
 
    Book {
        anchors.fill: parent
 
        pageDelegate: Page {
            // The page delegate may contain anything as contents; simple text,
            // images, or even complex QML hierarchies
            contents: Item {
                anchors.fill: parent
                Text {
                    anchors.centerIn: parent
                    width: parent.width - 32
                    wrapMode: Text.WordWrap
                    // access your pages' properties using the "page" object
                    text: page.text
                }
                Text {
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 16
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width - 32
                    horizontalAlignment: (page.number % 2 == 0) ? Text.AlignRight
                                                                : Text.AlignLeft
                    text: "<i> " + page.number + " </i>"
                }
            }
        }
 
        // The BookBehavior element handles user interaction and fills the
        // pages from a model
        BookBehavior {
            id: bookBehavior
            model: BookModel { }
        }
    }
}