Comment faire défiler des images avec un curseur de défilement ?

Version imprimable

18/07/2017, 17h43
ikohleka

1 pièce(s) jointe(s)

Comment faire défiler des images avec un curseur de défilement ?
Bonjour,
J'ai un dossier avec plusieurs fichier nommé img_1.png, img_2.png etc .. qui sont des images en fonction du temps.
J'ai une fenêtre qui ressemble a ça
Pièce jointe 295065
Ce que j'aimerais maintenant c'est que pour chaque valeur de mon Slider, j'ai une image différente d'affiché

Pour le moment je charge une seule image comme cela
Code:

1 2 QLabel *image = new QLabel(&fenetre); QPixmap *pixmap_img = new QPixmap("./data_out/img/img_0.png");
Comment je peux connecter un Slider avec plusieurs noms de fichier ? Et comment fonctionne ensuite la construction des images ?
19/07/2017, 09h03
Bktero

Il faut déjà commencer par connecter le signal du slider à un slot dans lequel tu pourras changer l'image affichée. Pour l'instant tu peux te contenter de juste afficher quelque chose dans la console ou de mettre un breakpoint avec ton débogueur pour t'assurer de la bonne connection signal / slot. As-tu réussi à faire cela ?

Une fois que c'est fait, tu détermines le nom du fichier image, tu le charges et tu changes le pixmap de ton QLabel (http://doc.qt.io/qt-5/qlabel.html#pixmap-prop).

Avec un tuto j'ai pu connecter le slider avec une progressBar par exemple mais je n'arrive pas à voir qu'elle fonction utiliser pour voir mon image

Faut-il que je la créé ? avec un argument de type int qui serais mon indice d'image ?
Et c'est dans cette fonction que je change le pixmap de mon image ?

Edit:

J'ai écrit cette petite fonction :
Code:

1 2 3 4 5 6 7 void MaFenetre::indexChanged(int value) { QLabel *image = new QLabel(this); QString chemin = "./data_out/imgState/imgState_"; QPixmap *pixmap_img = new QPixmap(chemin.append(value).append(".png")); }
Je l'appel comme ceci dans mon main :

Code:

QObject::connect(m_slider, SIGNAL(valueChanged(int)), image, SLOT(indexChanged(int))) ;

Mais j'obtiens cette erreur :

Code:

QObject::connect: No such slot QLabel::indexChanged(int)

20/07/2017, 14h09
Bktero
Quelle version de Qt utilises-tu ? Dans les versions récentes, la manière de connecter signal et slot est plus simple. Voir http://doc.qt.io/qt-5.6/signalsandslots.html
Code:

1 2 3 void MaFenetre::indexChanged(int value) // ... QObject::connect(m_slider, SIGNAL(valueChanged(int)), image, SLOT(indexChanged(int)))
Ton slot est une fonction membre de MaFenetre, je doute que ton image soit de type MaFenetre. D'ailleurs, ton message d'erreur me fait croire que image est un QLabel ;)

Citation:

avec un argument de type int qui serais mon indice d'image ?
Et c'est dans cette fonction que je change le pixmap de mon image ?

Oui c'est l'idée. D'ailleurs, pourquoi recréer un label ? Il existe déjà, il juste changer ce qu'il affiche. Quand à la question de savoir ce que prend ton slot en paramètre, c'est une bonne question. Une idée simple est peut-être que l'entier passé en paramètre soit l'indice à accoler au nom générique de fichier. Au démarrage de ton application, tu peux déterminer combien d'images tu as et changer la plage couverte par le slider en conséquence.
20/07/2017, 14h21
ikohleka

Merci pour ta réponse très complète

J'utilise la version 5 de Qt mais sans utilisé d'IDE (juste un CMakeListe)

OK, c'était un peu flou sur certains points. Mon QLabel n'est en faite qu'un simple "cadre" ou je peux y placer des QPixmap par exemple ?

C'est exactement ce que je voulais faire, j'ai un variable qui me donne le nombre d'image que je vais produire donc j'ai cette ligne la pour mon slider :

Code:

m_slider->setRange(0,nombreImages);

Et ensuite mes images sont toute nommé img1,img2 etc

Il me reste un point d'ombre, comment le QLabel va changer sachant qu'il se trouve dans mon main et que le QPixmap se trouve dans ma fonction qui ne retourne rien ?
Et pour la connexion je pense voir, il ne faut pas que je lui demande un QLabel mais quelque chose de type MaFenetre
20/07/2017, 15h01
Bktero

MaFenetre contient un QLabel, 'image' (qui est ce QLabel) donc un champ de ta variable 'fenetre'. Puisque tu peux accéder à ce champ, tu peux utiliser les méthodes qu'il possède. Notamment celle que je t'ai donné plus tôt : http://doc.qt.io/qt-5/qlabel.html#pixmap-prop

Code:

m_slider->setRange(0,nombreImages);

C'est à ça que je pensais ;)

Auparavant, pour afficher seulement une image, j'utilisais cette ligne

Code:

image->setPixmap(pixmap_img->scaled(10*ncol,10*nrow,Qt::KeepAspectRatio));

Donc je vois comment ajouter un pixmap au QLabel, mais ce que je ne vois pas trop c'est ou placer mon QLabel et mon QPixmap et comment ce fait la relation entre les deux

Pour le moment je déclare un QLabel dans mon main et dans ma fonction maFenetre (peut être est il plus judicieux de le mettre que dans le main ?) et mon QPixmap que je veux changer à chaque valeur de mon slider serait dans ma fonction maFenetre

J'ai essayé de changer ma fonction comme cela
Code:

1 2 3 4 5 6 7 void MaFenetre::indexChanged(int value) { QLabel *monImage = new QLabel(this); QString chemin = "./data_out/imgState/imgState_"; QPixmap *pixmap_img = new QPixmap(chemin.append(QString::number(value)).append(".png")); monImage->setPixmap(pixmap_img->scaled(10*55,10*37,Qt::KeepAspectRatio)); }
Mais cette erreur survient :

Code:

main.cpp:211:99: error: no matching function for call to ‘QObject::connect(QSlider*&, const char [19], QLabel&, const char [30])’

Donc je vois pas trop :/

1 pièce(s) jointe(s)

N'ayant pas 50 images avec les bons noms sous la main, j'ai fait un code qui affiche un texte avec un QLabel au lieu de changer le pixmap, mais la démarche est la même.

Header :

Code:

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
#ifndef MAFENETRE_HPP
#define MAFENETRE_HPP
 
#include <QMainWindow>
 
#include <QLabel>
#include <QSlider>
#include <QVBoxLayout>
#include <QWidget>
 
class MaFenetre : public QMainWindow
{
    Q_OBJECT
 
public:
    explicit MaFenetre(QWidget *parent = 0);
 
private slots:
    void changeImage(int index);
 
private:
    QWidget central;
    QVBoxLayout layout;
    QLabel image;
    QSlider slider;
};
 
#endif // MAFENETRE_HPP

Source :

Code:

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
#include "MaFenetre.hpp"
 
MaFenetre::MaFenetre(QWidget *parent) :
    QMainWindow(parent)
{
    // Customize window
    setWindowTitle("Slider to control images");
 
    // Add content to hierarchy
    image.setText("this is a label");
    layout.addWidget(&image);
 
    slider.setRange(0, 50);
    slider.setOrientation(Qt::Horizontal);
    layout.addWidget(&slider);
 
    central.setLayout(&layout);
    setCentralWidget(&central);
 
    // Connect signals and slots
    QObject::connect(&slider, &QSlider::valueChanged, this, &MaFenetre::changeImage);
}
 
void MaFenetre::changeImage(int index)
{
    image.setText(QString::number(index));
}

Résultat :
Pièce jointe 295758

Un énorme merci a toi Bktero ! ça marche nickel !
Pour les personnes qui cherche a faire cela, voici mon code :

MaFenetre.h

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class MaFenetre : public QWidget
{
    public:
        MaFenetre();
        MaFenetre(int m_ncol,int m_nrow,int m_simTime);
 
    private:
        QSlider *m_slider;
        QLabel *image;
        int m_index;
 
     public slots :
         void indexChanged(int value);    
};

MaFenetre.cpp

Code:

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
 
MaFenetre::MaFenetre(int ncol,int nrow,int simTime) : QWidget()
{
    m_ncol = ncol; //Le nombre de pixels en x
    m_nrow = nrow; //Le nombre de pixels en y
    m_simTime = simTime; //Le nombre total d'image
 
    QGridLayout *gridLayout = new QGridLayout; //un second Layout pour faire autre chose
    //...
 
    m_slider =new QSlider(Qt::Horizontal);
    image = new QLabel(this);
    QPixmap *pixmap_img = new QPixmap("./data_out/imgState/imgState_0.png");
 
    image->setPixmap(pixmap_img->scaled(10*m_ncol,10*m_nrow,Qt::KeepAspectRatio));
    m_slider->setRange(0,m_simTime-1);
    QObject::connect(m_slider, &QSlider::valueChanged, this, &MaFenetre::indexChanged) ;
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(image,1.0);
    layout->addWidget(m_slider,1.0);
 
    QGridLayout *layoutPrincipal = new QGridLayout; //Addition des deux Layout
    layoutPrincipal->addLayout(gridLayout,0,3,1,1);
    layoutPrincipal->addLayout(layout,0,0,3,3); 
 
    QPushButton *boutonQuitter = new QPushButton("Quitter");
    QWidget::connect(boutonQuitter, SIGNAL(clicked()), qApp, SLOT(quit()));
    layoutPrincipal->addWidget(boutonQuitter,3,3,1,1); // Ajout du bouton
 
    this->setLayout(layoutPrincipal);
}
 
void MaFenetre::indexChanged(int value)
{
    QString chemin = "./data_out/imgState/imgState_";
    QPixmap *pixmap_img = new QPixmap(chemin.append(QString::number(value)).append(".png"));
    image->setPixmap(pixmap_img->scaled(10*m_ncol,10*m_ncol,Qt::KeepAspectRatio));
}

Je passe en résolu !