Les concepts cars des salons automobiles ont traditionnellement attiré l'attention par leur style de carrosserie scandaleux, mais les démonstrateurs avancés d'aujourd'hui mettent au moins autant l'accent sur les gadgets de haute technologie à l'intérieur. Les apparitions récentes de grandes marques automobiles ont impressionné le public avec de grands écrans tactiles qui centralisent l'accès à tout, des contacts du téléphone portable, du contenu multimédia et des médias sociaux à la navigation, à l'aide au stationnement et au diagnostic graphique du véhicule. Bon nombre des dernières voitures de milieu de gamme ont désormais été lancées avec une console centrale graphique pour la navigation, la communication et les diagnostics, tandis que les marques haut de gamme commencent à proposer des applications de voiture connectée offrant un accès Internet et des services à valeur ajoutée à leurs clients. Les demandes pour de telles innovations proviennent de plusieurs directions : les acheteurs de voitures attendent une expérience utilisateur améliorée, les législateurs imposent des systèmes visant à améliorer la sécurité routière et les constructeurs automobiles cherchent à se connecter plus étroitement avec leurs clients grâce à des services électroniques à valeur ajoutée. Un aspect commun des systèmes qui émergent actuellement est que l'unité principale à écran tactile représente le lien d'une diversité toujours croissante de signaux d'entrée tels que la télévision et le DVD, la vidéo en direct et les graphiques provenant de systèmes avancés d'aide à la conduite, les informations d'état provenant de divers capteurs du véhicule, Communications Bluetooth, GPS et cartographie, et contenu Internet tel que les mises à jour du trafic, les flux d'actualités et les notifications sur les réseaux sociaux. La conception de l'interface utilisateur est essentielle si les conducteurs veulent tirer le meilleur parti de l'interaction avec le système sans subir de distractions ou de surcharge d'informations. Les considérations des concepteurs s'étendent au-delà de la présentation et de la structure des menus pour englober de multiples façons d'interagir avec le système; le toucher, le geste et la commande vocale seront tous nécessaires, en plus du contrôle à l'aide des boutons de la console et du volant.

Pour tester les extraits de code dans ce tutoriel, vous aurez besoin des éléments suivants:

Création de la fenêtre dans Qt Designer

Résultat:

Affichage de la fenêtre

Résultat:


Affichage de la fenêtre:
 

//===============================================
// main.cpp
//===============================================
int main(int argc, char** argv) {
    QApplication lApp(argc, argv);
    GWindow lWindow;
    lWindow.show();
    return lApp.exec();
}
//===============================================
// GWindow.cpp
//===============================================
GWindow::GWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GWindow) {
    ui->setupUi(this);
}
//===============================================

Gestion d'une connexion signal/slot

Résultat:


Gestion d'une connexion signal/slot:

//===============================================
// main.cpp
//===============================================
int main(int argc, char** argv) {
    QApplication lApp(argc, argv);
    GWindow lWindow;
    lWindow.show();
    return lApp.exec();
}
//===============================================
// GWindow.cpp
//===============================================
GWindow::GWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GWindow) {
    ui->setupUi(this);
}
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
    qDebug() << __PRETTY_FUNCTION__;
}
//===============================================

Création d'une fenêtre QML

Résultat:


Programme principal:
 

//===============================================
// main.cpp
//===============================================
int main(int argc, char** argv) {
    QGuiApplication lApp(argc, argv);

    QQmlApplicationEngine lEngine;
    const QUrl url(u"qrc:/qml/main.qml"_qs);
    QObject::connect(&lEngine, &QQmlApplicationEngine::objectCreationFailed,
        &lApp, []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    lEngine.load(url);

    return lApp.exec();
}
//===============================================

Création d'une fenêtre QML:
 

//===============================================
// main.qml
//===============================================
Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("ReadyApp")
}
//===============================================

Définition des dimensions minimales

Résultat:


Définition des dimensions minimales: 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")
}
//===============================================

Création d'un rectangle

Résultat:


Création d'un rectangle:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    Rectangle {
        width: 40; height: 40
        color: "black"
    }
}
//===============================================

Positionnement d'un rectangle vers le bas

Résultat:


Positionnement d'un rectangle vers le bas:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 40
        color: "black"
    }
}
//===============================================

Création d'un module d'une barre de tâches

Résultat:


Création d'un module de barre de tâches:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GBottomBar {

    }
}
//===============================================
// GBottomBar.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 40
    color: "black"
}
//===============================================

Création d'un rectangle

Résultat:


Création d'un rectangle:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    Rectangle {
        width: 50; height: 50
        color: "orange"
    }

    GBottomBar {

    }
}
//===============================================

Positionnement d'un rectangle vers la droite

Résultat:


Positionnement d'un rectangle vers le bas:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    Rectangle {
        anchors.top: parent.top
        anchors.bottom: bottomBar.top
        anchors.right: parent.right
        width: parent.width * 2/3
        color: "orange"
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================

Création d'un module d'un écran de droite

Résultat:


Création d'un module d'un écran de droite:
 

//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GRightScreen {

    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"
}
//===============================================

Création d'un rectangle

Résultat:


Création d'un rectangle:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    Rectangle {
        width: 50; height: 50
        color: "blue"
    }

    GRightScreen {

    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================

Positionnement d'un rectangle vers la gauche

Résultat:


Positionnement d'un rectangle vers la gauche:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    Rectangle {
        anchors.left: parent.left
        anchors.right: rightScreen.left
        anchors.top: parent.top
        anchors.bottom: bottomBar.top
        color: "blue"
    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================

Création d'un module d'un écran de gauche

Résultat:


Création d'un module d'un écran de gauche:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GLeftScreen.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: rightScreen.left
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    color: "blue"
}
//===============================================

Initialisation d'un plugin de cartographie

Résultat:


Initialisation d'un plugin de cartographie:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    id: rightScreen
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"

    Plugin {
        id: mapPlugin
        name: "osm"
    }
}
//===============================================

Intégration d'une cartographie

Résultat:


Intégration d'une cartographie :
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 400
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    id: rightScreen
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(59.91, 10.75)
        zoomLevel: 14
    }
}
//===============================================

Ajustement de la taille d'une application

Résultat:


Ajustement de la taille de l'application:
 

//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================

Intégration d'une image de voiture

Résultat:


Intégration d'une image de voiture:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GLeftScreen.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: rightScreen.left
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    color: "blue"

    Image {
        source: "/img/carRender.png"
    }
}
//===============================================

Modification de la largeur d'une image

Résultat:


Modification de la largeur d'une image: 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GLeftScreen.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: rightScreen.left
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    color: "blue"

    Image {
        width: parent.width * 0.75
        source: "/img/carRender.png"
    }
}
//===============================================

Conservation du ratio d'une image

Résultat:


Conservation du ratio d'une image:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GLeftScreen.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: rightScreen.left
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    color: "blue"

    Image {
        width: parent.width * 0.75
        fillMode: Image.PreserveAspectFit
        source: "/img/carRender.png"
    }
}
//===============================================

Centrage d'une image

Résultat:


Centrage d'une image: 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GLeftScreen.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: rightScreen.left
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    color: "blue"

    Image {
        anchors.centerIn: parent
        width: parent.width * 0.75
        fillMode: Image.PreserveAspectFit
        source: "/img/carRender.png"
    }
}
//===============================================

Modification d'une couleur de fond

Résultat:


Modification d'une couleur de fond: 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GLeftScreen.qml
//===============================================
Rectangle {
    anchors.left: parent.left
    anchors.right: rightScreen.left
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    color: "white"

    Image {
        anchors.centerIn: parent
        width: parent.width * 0.75
        fillMode: Image.PreserveAspectFit
        source: "/img/carRender.png"
    }
}
//===============================================

Intégration d'une icône de verrouillage

Résultat:


Intégration d'une icône de verrouillage:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    id: rightScreen
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(48.57, 7.75)
        zoomLevel: 14
    }

    Image {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
        width: 15
        fillMode: Image.PreserveAspectFit
        source: "/img/lock.png"
    }
}
//===============================================

Intégration d'une icône de déverrouillage

Résultat:


Intégration d'une icône de déverrouillage:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    id: rightScreen
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(48.57, 7.75)
        zoomLevel: 14
    }

    Image {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
        width: 15
        fillMode: Image.PreserveAspectFit
        source: "/img/unlock.png"
    }
}
//===============================================

Création d'un gestionnaire de verrouillage

Création d'un gestionnaire de verrouillage:
 

//===============================================
// GSystem.h
//===============================================
class GSystem : public QObject {
    Q_OBJECT
    Q_PROPERTY(bool isCarLocked READ isCarLocked WRITE setCarLocked NOTIFY carLockedChanged)

public:
    explicit GSystem(QObject *parent = nullptr);
    ~GSystem();
    bool isCarLocked() const;

public slots:
    void setCarLocked(bool _isCarLocked);

signals:
    void carLockedChanged(bool _isCarLocked);

private:
    bool m_isCarLocked;
};
//===============================================
// GSystem.cpp
//===============================================
GSystem::GSystem(QObject *parent)
: QObject(parent)
, m_isCarLocked(true) {

}
//===============================================
bool GSystem::isCarLocked() const {
    return m_isCarLocked;
}
//===============================================
void GSystem::setCarLocked(bool _isCarLocked) {
    if(m_isCarLocked != _isCarLocked) {
        m_isCarLocked = _isCarLocked;
        emit carLockedChanged(m_isCarLocked);
    }
}
//===============================================

Initialisation d'un gestionnaire de verrouillage

Initialisation d'un gestionnaire de verrouillage:
 

//===============================================
// main.cpp
//===============================================
int main(int argc, char** argv) {
    QGuiApplication lApp(argc, argv);

    GSystem lSystemHandler;

    QQmlApplicationEngine lEngine;
    const QUrl url(u"qrc:/qml/main.qml"_qs);
    QObject::connect(&lEngine, &QQmlApplicationEngine::objectCreationFailed,
        &lApp, []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    lEngine.load(url);

    lEngine.rootContext()->setContextProperty("systemHandler", &lSystemHandler);

    return lApp.exec();
}
//===============================================

Utilisation d'un gestionnaire de verrouillage

Utilisation d'un gestionnaire de verrouillage:
 

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    id: rightScreen
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(48.57, 7.75)
        zoomLevel: 14
    }

    Image {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
        width: 15
        fillMode: Image.PreserveAspectFit
        source: ( systemHandler.isCarLocked ? "/img/lock.png" : "/img/unlock.png" )
    }
}
//===============================================

Alternance entre les icônes de verrouillage/déverrouillage

Résultat:


Alternance entre les icônes de verrouillage/déverrouillage:

//===============================================
// main.qml
//===============================================
Window {
    minimumWidth: 600
    minimumHeight: 300
    visible: true
    title: qsTr("ReadyApp")

    GLeftScreen {

    }

    GRightScreen {
        id: rightScreen
    }

    GBottomBar {
        id: bottomBar
    }
}
//===============================================
// GRightScreen.qml
//===============================================
Rectangle {
    id: rightScreen
    anchors.top: parent.top
    anchors.bottom: bottomBar.top
    anchors.right: parent.right
    width: parent.width * 2/3
    color: "orange"

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(48.57, 7.75)
        zoomLevel: 14
    }

    Image {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
        width: 15
        fillMode: Image.PreserveAspectFit
        source: ( systemHandler.isCarLocked ? "/img/lock.png" : "/img/unlock.png" )

        MouseArea {
            anchors.fill: parent
            onClicked: systemHandler.setCarLocked(!systemHandler.isCarLocked)
        }
    }
}
//===============================================