Gluon/Creator

Overlay-based semi-interactive introductory tour

Inspired by the N9's tour. Provide an interactive tour of all the important elements of Creator.

Code for a transparent QML overlay (added to main.cpp line 58)

QDeclarativeView* view = new QDeclarativeView( QUrl::fromLocalFile( KGlobal::dirs()->locate( "appdata", "introduction.qml" ) ), window );
view->setStyleSheet("background: transparent");
view->setResizeMode( QDeclarativeView::SizeRootObjectToView );
view->setGeometry( window->rect() );
view->rootContext()->setContextProperty( "targetRect", window->findChild<QWidget*>( "ComponentsDock" )->frameGeometry() );
view->show();

Contents of introduction.qml:

import QtQuick 1.0

Item {
    Rectangle {
        id: topOverlay;
        
        anchors.top: parent.top;
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: viewport.top;
        
        opacity: 0.5;
        color: "black";
    }

    Rectangle {
        id: leftOverlay;
        
        anchors.top: topOverlay.bottom;
        anchors.left: parent.left;
        anchors.right: viewport.left;
        anchors.bottom: bottomOverlay.top;
        
        opacity: 0.5;
        color: "black";
    }
    Rectangle {
        id: rightOverlay;
        
        anchors.top: topOverlay.bottom;
        anchors.left: viewport.right;
        anchors.right: parent.right;
        anchors.bottom: bottomOverlay.top;
        
        opacity: 0.5;
        color: "black";
    }
    Rectangle {
        id: bottomOverlay;
        
        anchors.top: viewport.bottom;
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        
        opacity: 0.5;
        color: "black";
    }
    
    Item {
        id: viewport;
        
        width: parent.width / 2;
        height: parent.height / 2;
        x: parent.width / 4;
        y: parent.height / 4;
        
        Behavior on width { NumberAnimation { duration: 500; } }
        Behavior on height { NumberAnimation { duration: 500; } }
        Behavior on x { NumberAnimation { duration: 500; } }
        Behavior on y { NumberAnimation { duration: 500; } }
    }
    
    MouseArea {
        anchors.fill: parent;
        
        //drag.target: viewport;
        
        onClicked: { 
            viewport.x = targetRect.x;
            viewport.y = targetRect.y;
            viewport.width = targetRect.width; 
            viewport.height = targetRect.height; 
        }
    }
}