Vue d'ensemble du compositeur

Introduction

Overview Compositor montre comment sélectionner et activer une application à partir d'une grille de clients actuellement connectés.

Pour une introduction aux principes de base de la création d'une application avec Qt, voir l'exemple minimal de Qt. Qt Wayland Compositor avec Qt, voir l'exemple Qtml minimal.

Grille d'application

Dans cet exemple, le compositeur prend en charge deux modes de fonctionnement différents :

• Un mode plein écran, dans lequel une seule fenêtre d'application occupe toute la fenêtre du compositeur et est interchangeable.
• Un mode d'aperçu, dans lequel toutes les fenêtres d'application sont visibles dans une grille. En cliquant sur une fenêtre de la grille, on la sélectionne. Le compositeur passe en mode plein écran et affiche la fenêtre d'application sélectionnée.

Lorsqu'un client se connecte au compositeur et crée une surface de premier niveau, celle-ci est connectée à une extension shell. L'exemple ne prenant en charge que l'extension XdgShell, le client s'y connectera.

XdgShell {
    onToplevelCreated: (toplevel, xdgSurface) => {
        toplevels.append({xdgSurface});
        toplevel.sendFullscreen(Qt.size(win.pixelWidth, win.pixelHeight));
    }
}

Pour chaque surface, nous demandons au client de la configurer en plein écran. En outre, les surfaces sont ajoutées à un site ListModel pour en faciliter l'accès.

Ce modèle est utilisé par Repeater pour créer ShellSurfaceItems à l'intérieur de Grid. Le composant Grid positionne les éléments dans une grille.

Repeater {
    model: toplevels
    Item {
        width: win.width
        height: win.height
        ShellSurfaceItem {
            anchors.fill: parent
            shellSurface: xdgSurface
            onSurfaceDestroyed: toplevels.remove(index)
        }
        MouseArea {
            enabled: grid.overview
            anchors.fill: parent
            onClicked: {
                grid.selected = index;
                grid.overview = false;
            }
        }
    }
}

Pour chacun des éléments, nous créons un MouseArea qui couvre l'élément et intercepte toutes les entrées de la souris et du toucher. Ce composant n'est actif que lorsque le compositeur est en mode aperçu et active l'application sur laquelle on a cliqué.

Lorsque le compositeur passe en mode plein écran, le même composant Grid est utilisé, mais il est mis à l'échelle et translaté de manière à ce que la cellule sélectionnée remplisse la fenêtre du compositeur. L'idée est de "zoomer" sur la cellule sélectionnée, ce qui permet à l'utilisateur d'interagir avec l'application qu'elle contient.

transform: [
    Scale {
        xScale: grid.overview ? (1.0/grid.columns) : 1
        yScale: grid.overview ? (1.0/grid.columns) : 1
        Behavior on xScale { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
        Behavior on yScale { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
    },
    Translate {
        x: grid.overview ? 0 : win.width * -grid.selectedColumn
        y: grid.overview ? 0 : win.height * -grid.selectedRow
        Behavior on x { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
        Behavior on y { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
    }
]

En bas de la fenêtre, un bouton permet de passer d'un mode à l'autre. Il peut être utilisé pour ramener la grille d'application lorsque le compositeur est en mode plein écran.

Cet exemple montre une façon de faire en sorte que le compositeur visualise les clients dans différents modes. Une autre façon d'obtenir des effets similaires est de créer plusieurs éléments Qt Quick qui font référence à la même surface. Voir l'exemple Multi Output pour une démonstration.

Exemple de projet @ code.qt.io