problem in drwing several images on screen

[d@nyal]

Hi everybody,
I'm just a new to qt!

I'm going to implement a project, that I need to draw an unknown number of images on screen.
I tried 3 methods, but none of them worked.

1.
I tested QLabel for drawing a picture by the use of "pixmap".
As I said I need to paint an unknown number of images.[n*m, e.g. 2 or 6,...]

I tried like this... with the thought that this will add several(here 2) labels(pix) to my MainWindow:

QPixmap *pixmap_and = new QPixmap("../pix/AND.png");
    QLabel *label_1 = new QLabel(this);
    label_1->setPixmap(*pixmap_and);
    label_1->adjustSize();
    label_1->move(100,100);
 
    QLayout *layout_1 = this->layout();
    layout_1->addWidget( label_1 );
    label_1->move(200,200);
    layout_1->addWidget( label_1 );
 
    this->setLayout(layout_1);

QPixmap *pixmap_and = new QPixmap("../pix/AND.png");
    QLabel *label_1 = new QLabel(this);
    label_1->setPixmap(*pixmap_and);
    label_1->adjustSize();
    label_1->move(100,100);

    QLayout *layout_1 = this->layout();
    layout_1->addWidget( label_1 );
    label_1->move(200,200);
    layout_1->addWidget( label_1 );

    this->setLayout(layout_1);

To copy to clipboard, switch view to plain text mode 

I doesn't work!
I found that for drawing several images using QLabels I need to create several number of QLabels.
I tried to use a "vector" of "QLable". Unfortunately I couldn't do it because of several syntax problems.
would you guide me how can I implement that? (If it is possible!)

2.
I also tried QImage and QPainter.
I implemented a code like this :

QImage image("../pix/AND.png");
    if (!image.isNull())
        ui->label->setText("Image Loaded! ");   
    QPainter qpainter(this);
    qpainter.drawImage(100,100,image);
 
    image.load(":/pix/AND.png");
    qpainter.drawImage(100,100,image);

QImage image("../pix/AND.png");
    if (!image.isNull())
        ui->label->setText("Image Loaded! ");   
    QPainter qpainter(this);
    qpainter.drawImage(100,100,image);

    image.load(":/pix/AND.png");
    qpainter.drawImage(100,100,image);

To copy to clipboard, switch view to plain text mode 

As you see I used both pix in my hard and Qt resources. The image is sucsessfuly loaded. But I dont see anything
on screen. Is there any problem in my code?


3. I also tried this:

QPixmap pixmap_tmp;
    pixmap_tmp.load("../pix/AND.png");
    qpainter.drawPixmap(200,200,50,50,pixmap_tmp);
 
    pixmap_tmp.load(":/pix/AND.png");
    qpainter.drawPixmap(200,200,50,50,pixmap_tmp);

QPixmap pixmap_tmp;
    pixmap_tmp.load("../pix/AND.png");
    qpainter.drawPixmap(200,200,50,50,pixmap_tmp);

    pixmap_tmp.load(":/pix/AND.png");
    qpainter.drawPixmap(200,200,50,50,pixmap_tmp);

To copy to clipboard, switch view to plain text mode 

again I didn't see anything on screen. ?!


Thanks in advance for further helps,

[Talei]

I think what You need is, QStandardItemModel that stores images, and ListView to display them.
You can scale QPixmap to fit display area, and implement click or double click on the List to display full size. ( <- I assume that You want to display i.e. 24 images, that obviously won't fit on the screen).
If that's not the case, then here ( qLabExample..zip ) is an example that displays up to 4 images in 4 QLabels, code is quick draft and not perfect, but You will get the idea.

Best luck

[d@nyal]

I think what You need is, QStandardItemModel that stores images, and ListView to display them.
You can scale QPixmap to fit display area, and implement click or double click on the List to display full size. ( <- I assume that You want to display i.e. 24 images, that obviously won't fit on the screen).
If that's not the case, then here ( qLabExample..zip ) is an example that displays up to 4 images in 4 QLabels, code is quick draft and not perfect, but You will get the idea.

Best luck

Hi Talei,
Thanks for reply!

The example was clear and I got the general idea...
-----
In your program your inserted images into a "QList" and setted them to "a" Qlabel by the use of a pixmap. It automatically showed them vertically. If I want to show some of them vertically, what shall i do? (see the picture to get my intention)

Thanks,

[Talei]

I guess that is a homework, and I saw that You are student of electrical engineering, so due to sentiment of the old days at uni (same department ), I prepared examples for you.

As I said earlier, QLabel is not a way to go, because You really don't know haw many images user loads, and writing Your own code is, in my opinion, reinventing the wheel, and You are using qt because You don't want to do that, so why not to use a proper qt class to do the job for You?
Here qLabImg_example..zip is an example that change layout to horizontal, code is buggy and gave an error but ... it's a draft and you will get general idea.
And here qStdModelExample&#46.zip is what You, in my opinion, should do, using QStandardModel and listView.


Best luck

[d@nyal]

Thanks for answer!

I guess that is a homework, and I saw that You are student of electrical engineering, so due to sentiment of the old days at uni (same department ), I prepared examples for you.

As I said earlier, QLabel is not a way to go, because You really don't know haw many images user loads, and writing Your own code is, in my opinion, reinventing the wheel, and You are using qt because You don't want to do that, so why not to use a proper qt class to do the job for You?
Here qLabImg_example..zip is an example that change layout to horizontal, code is buggy and gave an error but ... it's a draft and you will get general idea.
And here qStdModelExample&#46.zip is what You, in my opinion, should do, using QStandardModel and listView.

Best luck

What I'm going to do is to visualize several digital gates(AND, OR, XOR, .... ) based on input of the program.
so I need to plot:
1- several gates(pictures) in different levels.
2- wires that connect gates.


now I'm not sure about 2 things with "QStandardModel":
1. possibility of drawing lines on the QListView. (I tried to draw some lines on your example, but I failed! )
2. location of each gate. I mean is it possible to adjust position of each gate(and their distances) in plan?

Thanks in advance,
-------------
* P.S: Its not a homework. Its part of research project for optimizing digital gate design.

[d@nyal]

I solved my problem with help of "qLabImg_example..zip" example. (Thanks to "Talei")
I defined a method for ploting "gates":

void MainWindow::darwAGate(int x,int y,int gate_code)
{
    //load images:
    QPixmap *pixmap_nand = new QPixmap("../pix/NAND.png");
 
    QHBoxLayout *h_layout = new QHBoxLayout();
    QLabel *label_tmp = new QLabel(this);
    label_tmp->setGeometry(x,y,gate_width_pixel,gate_height_pixel);
    label_tmp->setPixmap(*pixmap_nand);
    h_layout->addWidget( label_tmp );
    this->setLayout(h_layout);
}

void MainWindow::darwAGate(int x,int y,int gate_code)
{
    //load images:
    QPixmap *pixmap_nand = new QPixmap("../pix/NAND.png");
    
    QHBoxLayout *h_layout = new QHBoxLayout();
    QLabel *label_tmp = new QLabel(this);
    label_tmp->setGeometry(x,y,gate_width_pixel,gate_height_pixel);
    label_tmp->setPixmap(*pixmap_nand);
    h_layout->addWidget( label_tmp );
    this->setLayout(h_layout);
}

To copy to clipboard, switch view to plain text mode 

I thinks its possible to plot several pics by the use of dynamic memory allocation("delete" and new) if I don't want to define a separate function/method.... but I didn't try that ...

[Talei]

Hello,
I checked yesterday before sleep but didn't reply due to fatigue.
So...

QListView allows You not only to display images the way I showed in example, it can also display grid, between each "image". Think of it as n*m matrix, or spreadsheet, it's not exactly that way, but my point here is that You can span grids. And that way you can cheat displaying connection between in/out gates. But that would require a lot of tweaking and is probably not the way to go. (Change listView to tableView in example and set same model to see the difference, maybe table is what You want after all ).
Alternatively You could subclass one of the widget, that looks closest to Your desired widget that "holds" all the gates, then reimplement paint function, and paint image yourself. Prepare png for gates keeping in mind that in/out for each gates should be in the same position for each gate type. Then simply copy png onto screen.

But the problem is connection between gates. So what You could do is to implement A Star (A*) algorithm (path finding) and firstly copy all gates onto screen (for A* mark this area as blocked, in row manner ), then mark output of the gate as START for A*, and proper input of another gate as END for A*. How to find position of out/in of gates? As stated before prepare accordingly png so those place will be at fixed position + png offset. Lines could be painted on anothe QPixmap so if there is a need to modification You could implement that as well (simply deleting old connection grid, and repainting new one). That way You could draw a really complex gates, not only simple one. Again that is probably not what you want due to complexity, and I assume that you have predefined png for connections as well.

Then you could use QGraphicsView, see /qt/examples/graphicsview, especially qt/examples/graphicsview/diagramscene, for examples. I didn't do much work with this, so I can't point you any useful examples that You could use, but last example should give You general idea how to paint these pngs.

Also I assume that program only draw gates, and don't allow any modification/correction, so, as stated before You could pull it off with QListView but I think easiest way would be going with QGraphicsView, because that allow You scrolling, zooming, etc...

Best luck with you project
EDIT: I forget about QPainter, that can draw shapes, lines, etc.. So you could place in table at col 0 row 1-2 gate png, at col 1 row 1-2 span and draw connections, and at col 2 row 1-2 gates pngs.

[d@nyal]

Hello,
I checked yesterday before sleep but didn't reply due to fatigue.
So...

QListView allows You not only to display images the way I showed in example, it can also display grid, between each "image". Think of it as n*m matrix, or spreadsheet, it's not exactly that way, but my point here is that You can span grids. And that way you can cheat displaying connection between in/out gates. But that would require a lot of tweaking and is probably not the way to go. (Change listView to tableView in example and set same model to see the difference, maybe table is what You want after all ).
Alternatively You could subclass one of the widget, that looks closest to Your desired widget that "holds" all the gates, then reimplement paint function, and paint image yourself. Prepare png for gates keeping in mind that in/out for each gates should be in the same position for each gate type. Then simply copy png onto screen.

But the problem is connection between gates. So what You could do is to implement A Star (A*) algorithm (path finding) and firstly copy all gates onto screen (for A* mark this area as blocked, in row manner ), then mark output of the gate as START for A*, and proper input of another gate as END for A*. How to find position of out/in of gates? As stated before prepare accordingly png so those place will be at fixed position + png offset. Lines could be painted on anothe QPixmap so if there is a need to modification You could implement that as well (simply deleting old connection grid, and repainting new one). That way You could draw a really complex gates, not only simple one. Again that is probably not what you want due to complexity, and I assume that you have predefined png for connections as well.

Then you could use QGraphicsView, see /qt/examples/graphicsview, especially qt/examples/graphicsview/diagramscene, for examples. I didn't do much work with this, so I can't point you any useful examples that You could use, but last example should give You general idea how to paint these pngs.

Also I assume that program only draw gates, and don't allow any modification/correction, so, as stated before You could pull it off with QListView but I think easiest way would be going with QGraphicsView, because that allow You scrolling, zooming, etc...

Best luck with you project
EDIT: I forget about QPainter, that can draw shapes, lines, etc.. So you could place in table at col 0 row 1-2 gate png, at col 1 row 1-2 span and draw connections, and at col 2 row 1-2 gates pngs.

Alright thanks Telei !