Displaying Images Side-by-Side in Qt with Scrollbars - qt

I'm a Qt newbie. I want to display 2 images side-by-side using Qt. Using Qt's Image Viewer Example, I want to add another scrollable image display, such that both images are displayed side-by-side.
The example code has this snippet for the ctor:
ImageViewer::ImageViewer()
{
imageLabel = new QLabel;
imageLabel->setBackgroundRole(QPalette::Base);
imageLabel->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabel->setScaledContents(true);
scrollArea = new QScrollArea;
scrollArea->setBackgroundRole(QPalette::Dark);
scrollArea->setWidget(imageLabel);
setCentralWidget(scrollArea);
...
If I understand it correctly, I want to get imageLabel to be only half width of the screen while another QLabel is displayed on the other half.
How can I do this?
Thanks.

If I understand correctly, this here should suffice:
// Left image
imageLabelLeft = new QLabel;
imageLabelLeft->setBackgroundRole(QPalette::Base);
imageLabelLeft->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabelLeft->setScaledContents(true);
scrollAreaLeft = new QScrollArea;
scrollAreaLeft->setBackgroundRole(QPalette::Dark);
scrollAreaLeft->setWidget(imageLabelLeft);
// Right image
imageLabelRight = new QLabel;
imageLabelRight->setBackgroundRole(QPalette::Base);
imageLabelRight->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabelRight->setScaledContents(true);
scrollAreaRight = new QScrollArea;
scrollAreaRight->setBackgroundRole(QPalette::Dark);
scrollAreaRight->setWidget(imageLabelRight);
// Do the layout
QWidget *centralWidget = new QWidget;
QHBoxLayout *layout = new QHBoxLayout(centralWidget);
layout->addWidget(scrollAreaLeft);
layout->addWidget(scrollAreaRight);
setCentralWidget(centralWidget);

Related

Small panel at the bottom of a QTreeWidget

I'm using QT 5.4.2 and trying to create a small panel at the bottom
of a subclassed QTreeWidget.
Here is the code:
void HmiScenarioAutoscriptPanel::searchEmitter() {
QWidget *child = new QWidget(ui->emitterTreeWidget);
//QMainWindow* child = new QMainWindow;
QLabel *labelSearch = new QLabel("Search");
QLineEdit *lineSearch = new QLineEdit();
lineSearch->setFixedSize(100, 20);
QHBoxLayout* layout = new QHBoxLayout(ui->emitterTreeWidget);
layout->setAlignment(Qt::AlignBottom);
layout->addWidget(child);
layout->addWidget(labelSearch);
layout->addWidget(lineSearch);
}
The label and search field correctly appear at the bottom of the tree,
however the fields overlap with the tree nodes (see image below).
Any idea why this behavior?
Ciao
Alf
enter image description here
It is not recommended to set layout on the tree widget. It is like other controls like a button, label etc..
I see that you are using designer. Add a blank widget (searchWidget) under the tree widget and then
void HmiScenarioAutoscriptPanel::searchEmitter() {
QWidget *child = new QWidget(ui->searchWidget);
//QMainWindow* child = new QMainWindow;
QLabel *labelSearch = new QLabel("Search", searchWidget);
QLineEdit *lineSearch = new QLineEdit(searchWidget);
lineSearch->setFixedSize(100, 20);
QHBoxLayout* layout = new QHBoxLayout(ui->searchWidget);
layout->setAlignment(Qt::AlignBottom);
layout->addWidget(child);
layout->addWidget(labelSearch);
layout->addWidget(lineSearch);
}
Just out of curiosity, why don't you add these using the designer as well?

How to create a scrollable widget using QHBoxLayout and QScrollArea

I am trying to create a widget with scrollable using the QHBoxLayout and QScrollArea but i am unable to succeed to create a GUI,here is my code can any one please suggest me where i need to change.
Any help would be appreciated
mainLayout = new QHBoxLayout(this);
mainLayout->setSizeConstraint(QLayout::SetMaximumSize);
QCheckBox *sam_box = new QCheckBox(this);
sam_box->setText("HAIIIIIIIIIII");
sam_box->setFixedSize(10000,10000);
QCheckBox *so_box = new QCheckBox(this);
so_box->setText("HOWWWWWWWWWWWW");
so_box->setFixedSize(150000,15000);
mainLayout->addWidget(sam_box);
mainLayout->addWidget(so_box);
QScrollArea *scrollarea = new QScrollArea(this);
scrollarea->setBackgroundRole(QPalette::Shadow);
scrollarea->setFixedSize(700,500);
scrollarea->setLayout(mainLayout);`
Here is my output screen
Thanks in advance,
Rohith.G
One way to achieve this is by below logic
centralwidget() -> QHBoxLayout-> QScrollArea -> QWidget-> add the check box
The code flow & comments will explain the logic in detail.
QWidget *wgt = new QWidget();//new code
wgt->setGeometry(0,0,500,500); //new code
//QHBoxLayout mainLayout = new QHBoxLayout(this);
QHBoxLayout *mainLayout = new QHBoxLayout(this->centralWidget());
mainLayout->setSizeConstraint(QLayout::SetMaximumSize);
//QCheckBox *sam_box = new QCheckBox(this);
QCheckBox *sam_box = new QCheckBox(wgt);
sam_box->setText("HAIIIIIIIIIII");
//sam_box->setFixedSize(10000,10000);
sam_box->setFixedSize(200,200); //make it small for quick testing
//QCheckBox *so_box = new QCheckBox(this);
QCheckBox *so_box = new QCheckBox(wgt);
so_box->setText("HOWWWWWWWWWWWW");
//so_box->setFixedSize(150000,15000);
so_box->setFixedSize(150,150); //make it small for quick testing
//mainLayout->addWidget(sam_box);
//mainLayout->addWidget(so_box);
QScrollArea *scrollarea = new QScrollArea();
scrollarea->setBackgroundRole(QPalette::Shadow);
//scrollarea->setFixedSize(700,500); //scroll area cant be resized
mainLayout->addWidget(scrollarea); //new code
//scrollarea->setLayout(mainLayout);
scrollarea->setWidget(wgt);
Below code will generate 30 QCheckBoxes added each ten in a vertical box layout and all the vertical layout in a horizontal box layout
QScrollArea *scrl = new QScrollArea();
scrl->setGeometry(0,0,300,300);
QWidget *wgtMain = new QWidget();
QHBoxLayout *hboxMain = new QHBoxLayout(wgtMain);
for(int iCount=0;iCount<3;iCount++){
QWidget *wgtSub = new QWidget();
QVBoxLayout *vboxSub = new QVBoxLayout(wgtSub);
for(int jCount=0;jCount<10;jCount++){
QCheckBox *chk = new QCheckBox("Check Box " + QString::number(jCount+1) + " of " + QString::number(iCount+1));
vboxSub->addWidget(chk);
}
hboxMain->addWidget(wgtSub);
}
scrl->setWidget(wgtMain);
scrl->show();

QMainWindow : Set widgets size with respect to screen size

I have a Qt class which inherits from QMainWindow. The constructor of the class creates two widgets which are added to a horizontal layout object as follows:
MyWindow::MyWindow()
{
resize(QDesktopWidget().availableGeometry(this).size());
display = new MyWidget(this);
display->setSizePolicy(QSizePolicy::Expanding,
QSizePolicy::Expanding);
current = new MyWidget(this);
current->setSizePolicy(QSizePolicy::Expanding,
QSizePolicy::Expanding);
QHBoxLayout *layout = new QHBoxLayout();
layout->addWidget(display);
layout->addWidget(current);
QFrame* frame = new QFrame();
frame->setFrameShape(QFrame::StyledPanel);
frame->setLayout(layout);
setCentralWidget(frame);
show();
}
This currently shows the widget side of side of each other. However, what I would like to do is have one of the widgets take 30% of the horizontal space while the other one occupies the other 70%. I would also like the widgets to expand or contract if one resizes the main window but keeping these ratios.
When you place a widget into a layout you can specify its stretch factor:
QHBoxLayout *layout = new QHBoxLayout();
layout->addWidget(display, 3);
layout->addWidget(current, 7);
http://doc.qt.io/qt-5/qboxlayout.html#addWidget

Qt- How to position UI elements like this?

I am creating a UI in Qt that has a QDockWidget containing a QPushButton and QLineEdit. Please refer to the attached mock-up. I have created the widget components and successfully got them up and running. However they are not positioned the way I want them to. Both the elements should float to the left making the extra space to the right stretch when the window is resized.
The code-
this->searchField = new QLineEdit; //"this" is a QDockWidget subclassed Object
searchField->setFixedWidth(200);
mainMenu = new Menu();
QHBoxLayout *layout= new QHBoxLayout;
QSpacerItem *filler = new QSpacerItem(1000, 10);
layout->addWidget(mainMenu->getMenuBar());
layout->addWidget(this->searchField);
layout->addSpacerItem(filler);
Any suggestion or help would be awesome!
Thanks for your time :)
http://qt-project.org/doc/qt-4.8/layout.html
http://qt-project.org/doc/qt-4.8/qboxlayout.html#addStretch
void QBoxLayout::addStretch ( int stretch = 0 )
Adds a stretchable space (a QSpacerItem) with zero minimum size and stretch factor stretch to the end of this box layout.
So this is what your new code would look like:
this->searchField = new QLineEdit;
searchField->setFixedWidth(200);
mainMenu = new Menu();
QHBoxLayout *layout= new QHBoxLayout;
layout->addWidget(mainMenu->getMenuBar());
layout->addWidget(this->searchField);
layout->addStretch(); // Added this
Hope that helps.

Image is not Displaying at center in QtForm

Hi I am using QLabel to show an image in QtForm.
My code goes like this
QVBoxLayout *layout = new QVBoxLayout;
QHBoxLayout *hLayout = new QHBoxLayout;
layout->setMargin(5);
QLabel *imageLabel = new QLabel;
QPixmap pixmap("/images/test.jpg");
imageLabel->setPixmap(pixmap);
imageLabel->setMask(pixmap.mask());
imageLabel->setMinimumSize(160, 160);
imageLabel->resize(500, 320);
layout->addWidget(imageLabel,0,Qt::AlignTop | Qt::AlignCenter);
hLayout->addItem(layout);
widget->setLayout(hLayout);
scrollArea->setWidget(widget);
setCentralWidget(scrollArea);
but the image is displaying at the left corner can any one suggest me to bring the image to centre to the form
I got solution,
QPixmap pixmap("images/test.png");
imageLabel->setPixmap(pixmap);
imageLabel->setMinimumSize(160, 160);
imageLabel->resize(500, 320);
imageLabel->setAlignment(Qt::AlignCenter);
scrollArea->setWidget(widget);
setCentralWidget(imageLabel);
Change the alignment of your QLabel's content:
imageLabel->setAlignment(Qt::AlignCenter);
If the setAlignment function didn't work alone, then use it with setSizePolicy.
imageLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
imageLabel->setAlignment(Qt::AlignCenter);

Resources