Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Thumbnails using List Widget



  • I am making a Thumbnail using list widget. That store the bundle of an image. Now I want to display the image with a number just like If I add 5 images they display the number like 1 to 5.


  • Lifetime Qt Champion

    hi
    Cant you just use the normal text for that ?
    new QListWidgetItem(QIcon(":/xxx"), "the number")

    or what is the question exactly ?



  • @mrjj I am using this code for the thumbnail

    QPalette p;
    	this->ui->m_ThumblistWidget->setViewMode(QListWidget::IconMode);
    	this->ui->m_ThumblistWidget->setIconSize(QSize(100, 100));
    	this->ui->m_ThumblistWidget->setResizeMode(QListWidget::Adjust);
    	p.setBrush(QPalette::Window, Qt::transparent);
    	this->ui->m_ThumblistWidget->setPalette(p);
    	View>GenerateThumbList(this->ui->m_ThumblistWidget);
    

    Also i need to dynamically assign the number in the image


  • Lifetime Qt Champion

    @amarism

    on the full image or what you ?
    or under each item in the widgetlist ?



  • @mrjjI am attaching the image reference
    0_1528787927301_thumbnail.png

    This one is my thumbnail of list widget containing the 6 image but initially numbering is not there but I want to display the numbering in place one red mark is or bottom of every image like (1,2,3......)


  • Lifetime Qt Champion

    @amarism
    if you insert number as text when you create the
    QListWidgetItem in GenerateThumbList
    then it will show under each in list.

    you can use
    QString::number() to convert from int to number.



  • Can you show us the content of GenerateThumbList?





  • @amarism 😓 I meant the code



  • @VRonin for adding the image inside the listwidget
    QPalette p;
    this->ui->m_ThumblistWidget->setViewMode(QListWidget::IconMode);
    this->ui->m_ThumblistWidget->setIconSize(QSize(100, 100));
    this->ui->m_ThumblistWidget->setResizeMode(QListWidget::Adjust);
    p.setBrush(QPalette::Window, Qt::transparent);
    this->ui->m_ThumblistWidget->setPalette(p);
    View->GenerateThumbList(this->ui->m_ThumblistWidget);

    and i try to add numbering to every thumbnail image like this
    for (int i = 1; i <= this->ui->m_ThumblistWidget->count(); i++) {
    //this->ui->m_ThumblistWidget->addItem(new QListWidgetItem(NULL, i));
    }



  • What's inside View->GenerateThumbList(this->ui->m_ThumblistWidget);?



  • @VRonin generating the image in the form of thumbnails in view list



  • generating the image in the form of thumbnails in view list

    Can you show us the code that does that?


    A bit in the dark here but this is wrong

    for (int i = 1; i <= this->ui->m_ThumblistWidget->count(); i++) {
    //this->ui->m_ThumblistWidget->addItem(new QListWidgetItem(NULL, i));
    }
    

    it overrides what's already there. Try this:

    for (int i = 0, listCnt = ui->m_ThumblistWidget->count(); i < listCnt ; ++i) {
    QAbstractItemModel* const model = ui->m_ThumblistWidget->model();
    model->setData(model->index(i,0),i+1,Qt::EditRole);
    }
    


  • @VRonin THIS ONE ALSO NOT WORKING
    for (int i = 0, listCnt = ui->m_ThumblistWidget->count(); i < listCnt ; ++i) {
    QAbstractItemModel* const model = ui->m_ThumblistWidget->model();
    model->setData(model->index(i,0),i+1,Qt::EditRole);
    }



  • @amarism

    If you need to insert a text in the thumbnail, you must to use an QPainter and add a Text on Image

    Example:

    #include <QPainter>
    #include <QImage>
    #include <QFont>
    #include <QPen>
    #include <QString>
    
     ...
    
        QImage img(<image path>); // load image
    
        int number = 15;
    
        QPainter painter(&img); // Pass QImage to Editor
        painter.setPen(QPen(Qt::white));
        painter.setFont(QFont("Arial", 15, QFont::Bold));
    
        painter.drawText(img.rect(), Qt::AlignCenter, QString::number(number)); // insert number on center of image
    
       // insertImageToTable(img)
    
    


  • @KillerSmath In the QImage img(<load image>).
    I have the series of image. can I load it



  • Ok... let's see if an easy example helps:

    #include <QApplication>
    #include <QStyledItemDelegate>
    #include <QListWidget>
    class ImageDelegate : public QStyledItemDelegate{
        Q_DISABLE_COPY(ImageDelegate)
    public:
        explicit ImageDelegate(QObject* parent = Q_NULLPTR)
            :QStyledItemDelegate(parent)
        {}
        void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const Q_DECL_OVERRIDE{
            Q_ASSERT(index.isValid());
            QStyleOptionViewItem opt = option;
            initStyleOption(&opt, index);
            QStyle *style = option.widget ? option.widget->style() : QApplication::style();
            QPixmap backPix = index.data(Qt::DecorationRole).value<QPixmap>();
            if(!backPix.isNull())
                style->drawItemPixmap(painter,option.rect,Qt::AlignCenter,backPix.scaled(option.rect.size()));
            style->drawItemText(painter,option.rect,Qt::AlignBottom | Qt::AlignRight,option.palette,option.state & QStyle::State_Enabled,index.data(Qt::EditRole).toString());
        }
    };
    
    int main(int argc, char *argv[])
    {
        QApplication application(argc, argv);
        QListWidget wid;
        wid.setItemDelegate(new ImageDelegate(&wid));
        QAbstractItemModel* const model= wid.model();
        model->insertRows(0,5);
        QPixmap tempPix(30,30);
        const Qt::GlobalColor colors[] = {Qt::yellow,Qt::magenta,Qt::cyan,Qt::green,Qt::blue};
        for(int i=0;i<wid.count();++i){
            tempPix.fill(colors[i]);
            model->setData(model->index(i,0),tempPix,Qt::DecorationRole);
            model->setData(model->index(i,0),i+1,Qt::EditRole);
        }
        wid.show();
        return application.exec();
    }
    

Log in to reply