1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2018
    Messages : 3
    Points : 2
    Points
    2

    Par défaut Réalisation d'une animation graphique

    Bonjour à tous,

    Je débute sur Qt Creator et en C++ par la même occasion.
    J'ai acquis quelques compétences en réalisant les tutos disponible sur OpenClasRoom, je me lance des à présent sur un projet.

    J'ai créé la partie mécanique et électronique d'une pompe qui remplie une reservoir. Je souhaiterais recevoir les informations sur l'état du reservoir et commander la pompe via une application Qt.

    J'ai réalisé la partie dialogue entre le microprocesseur et mon application ainsi que les champs de commande.
    J'aimerais maintenant réaliser une animation graphique de mon reservoir évoluant au cours du temps.
    Je souhaiterais donc un peu d'aide sur la manière de la réaliser.

    Je pensais faire le dessin du reservoir sur un logiciel de dessin vectoriel, l'importer dans un layout de mon application et placer un rectangle au niveau du contenant du reservoir qui lui évoluerais en fonction du volume du liquide présent dans mon reservoir. Est ce une bonne idée ? Est ce possible d'avoir une bonne en rajoutant une forme d'une bibliothèque Qt sur une image emportée ?
    Pour dessiner des formes sur Qt j'ai vu deux façons de procéder, soit en utilisant de QPainter soit de Qt Graphics mais je ne comprends pas bien qu'elle est la différence entre les deux ni la méthode la plus adaptée à ma situation.

    J'aimerais vraiment que mon application soit esthétique et bien faite, je m'en remets donc à vos connaissances pour m'aiguiller sur les différentes fonction à utiliser et sur la manière d'appréhender mon animation.

  2. #2
    Membre averti
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2010
    Messages
    215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : mai 2010
    Messages : 215
    Points : 359
    Points
    359

    Par défaut

    Bonjour,

    Il y a plusieurs possibilités, cela dépend du "rendu" que cela doit avoir.

    1) Progress Bar + Stylesheet
    Si c'est simplement pour afficher le niveau du réservoir, le plus simple à mon avis est d'utiliser une progress bar. Voici un exemple utilisant une progress bar et les "stylesheet": https://forum.qt.io/topic/3265/custo...r-in-mobile/11

    Et voici le code extrait du lien ci-dessus:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    Widget::Widget(QWidget parent)
    : QWidget(parent)
    {
    QVBoxLayout pLayout = new QVBoxLayout(this);
    setLayout(pLayout);
     
    QSlider* pSlider = new QSlider(Qt::Horizontal, this);
    pLayout->addWidget(pSlider);
    pProgressBar = new QProgressBar(this);
    pLayout->addWidget(pProgressBar);
    pProgressBar->setRange(0, 100);
    pSlider->setRange(0, 100);
    pSlider->setValue(70);
    batteryLevelChanged(70);
    pProgressBar->setTextVisible(false);
     
    connect(pSlider, SIGNAL(valueChanged(int)), this, SLOT(batteryLevelChanged(int)));
    }
     
    void Widget::batteryLevelChanged(int nValue)
    {
    pProgressBar->setValue(nValue);
    QString myStyleSheet = " QProgressBar::chunk {"
    " background-color: ";
     
    if(30 >= nValue)
    {
        myStyleSheet.append("red;");
    }
    else if(80 >= nValue)
    {
        myStyleSheet.append("yellow;");
    }
    else
    {
        myStyleSheet.append("green;");
    }
    myStyleSheet.append("     width: 10px;"\
                        "     margin: 0.5px;"\
                        " }");
    pProgressBar->setStyleSheet(myStyleSheet);
    }
    2. QPainter
    Il est possible aussi de dessiner sois même, en utilisant QPainter. Mais honnêtement, à moins que le visuel soit vraiment important, c'est un peu ce compliqué la vie. Je ne sais pas si les objets QGraphics soit adapté pour cela, je ne les ai jamais utilisés.

    3. Images
    Des images prédéfinies, tout simplement, et on affiche celle qui correspond au niveau du réservoir, on peut par exemple faire une image par palier de 5%. 0, 5, 10, etc...

    4. Pour aller plus loin et avoir un rendu visuel joli, avec des animations et même des particules, je recommanderais fortement d'utiliser QML plutôt que C++ pour la partie graphique. Voici un exemple, c'est pour une batterie, mais je pense que cela pourrait facilement s'adapter à votre cas:
    http://quitcoding.com/?page=work#quitbattery

    Pour ma part je pense que les meilleurs choix sont les points 1. et 4. Mais c'est personnel, et cela dépend surtout du résultat que l'on veut obtenir. Si vous êtes débutant en programmation, les choix 1. ou 3. ma paraissent les plus adaptés si vous ne voulez pas perdre trop de temps pour de la cosmétique.

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2018
    Messages : 3
    Points : 2
    Points
    2

    Par défaut

    Bonjour,

    Je vous remercie pour ces différentes propositions.

    QProgressBar ne me plait pas trop, j'aimerais que mon application ait un vraie visuel et pas simplement une barre de progression.

    Jouer avec différentes images représentant différents pallier est une bonne idée mais je ne l'utiliserai qu'en dernier recours.

    Je ne connaissais pas QML, je vais m'y pencher, les rendus ont l'air vraiment super ! Ce language est il compliqué à prendre en main ? Est il simple à associer à mon code C++ ?
    Si QML est trop chronophage j'essayerai la méthode QPainter. Je pense mettre du temps a dessiner mes objets mais un fois réalisé il me serra très simple de créer des animations. Quand pensez vous ?

  4. #4
    Membre averti
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2010
    Messages
    215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : mai 2010
    Messages : 215
    Points : 359
    Points
    359

    Par défaut

    Il faut trouver un équilibre entre le temps que vous avez à y consacrer et le rendu que vous souhaiter avoir. Mais autant commencer avec quelques chose de simple et essayer de l'améliorer par la suite. Faire de jolies animations, cohérentes et réalistes, ce n'est pas forcément si simple.

    L'utilisation de QPainter ma paraît être une bonne idée pour bien se familiariser avec les mécanismes d'affichage. Néanmoins cela risque de prendre un peu de temps au début, mais je ne pense pas que cela soit une perte de temps.

    Pour ce qui est de QML, c'est assez facile à prendre en main, et Qt fourni pas mal d'exemples pour la communication entre C++ et QML, mais cela va forcément nécessiter un temps d'adaptation. cela permet de faire de très beau rendus, néanmoins cela demande quand même un minimum de connaissances et de pratique pour arriver à un résultat comme l'exemple mentionné dans mon poste précédent.
    Mais en vous basant sur cet exemple, vous pourrez peut-être réutiliser une bonne parties du codes et l'adapté a vos besoins sans trop d'effort.

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2018
    Messages : 3
    Points : 2
    Points
    2

    Par défaut

    Je vais suivre vos conseils, je vais faire une première version fonctionnelle avec QPainter et je m'initierai à QML plus tard.
    Je vous remercie pour votre aide, bonne continuation.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [PPT-2003] réalisation d'une animation bielle / manivelle
    Par emmfor dans le forum Powerpoint
    Réponses: 4
    Dernier message: 03/11/2011, 21h06
  2. Réalisation d'une animation flash
    Par cleminute dans le forum Flash
    Réponses: 5
    Dernier message: 08/06/2011, 16h50
  3. Réalisation d'une interface graphique
    Par drunkskater dans le forum Caml
    Réponses: 3
    Dernier message: 22/12/2010, 00h32
  4. Réponses: 4
    Dernier message: 05/11/2007, 12h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo