Présentation de Compositor

Introduction

La présentation de 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’un Qt Wayland Compositor avec Qt, consultez l'exemple Minimal Qml.

Grille d'applications

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 permet l’interaction.
• Un mode aperçu, dans lequel toutes les fenêtres d’application sont visibles sous forme de grille. Un clic sur une fenêtre de la grille permet de la sélectionner. Le compositeur passe alors 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 niveau supérieur, celle-ci est connectée à une extension de shell. L’exemple ne prend en charge que l’extension XdgShell; le client s’y connectera donc.

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 mode plein écran. De plus, les surfaces sont ajoutées à une extension « ListModel » pour faciliter leur accès.

Ce modèle est utilisé par une extension « Repeater » pour créer des éléments « ShellSurfaceItems » à l’intérieur d’un « 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 composant « MouseArea » qui recouvre l’élément et intercepte toutes les entrées de la souris et tactiles. Celui-ci n’est actif que lorsque le compositeur est en mode aperçu et active l’application sur laquelle l’utilisateur a cliqué.

Lorsque le compositeur passe en mode plein écran, le même composant « Grid » est utilisé, mais il est mis à l’échelle et déplacé vers une position où la cellule sélectionnée occupe toute la fenêtre du compositeur. L’idée est de « zoomer » sur la cellule sélectionnée, permettant ainsi à 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 } }
    }
]

Au bas de la fenêtre se trouve un bouton permettant de basculer entre les modes. Il peut être utilisé pour faire réapparaître la grille d’applications lorsque le compositeur est en mode plein écran.

Cet exemple illustre une façon dont le compositeur peut afficher les clients selon différents modes. Une autre méthode pour obtenir des effets similaires consiste à créer plusieurs éléments ` Qt Quick ` faisant référence à la même surface. Consultez l’exemple « Multi Output » pour une démonstration.

Projet d'exemple sur code.qt.io