Changing fluently brightness of QPushButton icon - qt

I found a function to make QImage brighter and used in my Qt application.
I want to show simple "animation" of making button step by step brighter and than again step by step back to initial state after user click it.
Here my code:
void Widget::on_stopButton_clicked(){
player.stop();
for(int i = 0; i <= 50; ++i){
QImage* image = new QImage(":/Graphics/Graphics/StopButton.png");
changeBrightness(*image, i);
QPixmap* pixmap = new QPixmap(QPixmap::fromImage(*image));
ui->stopButton->setIcon(QIcon(*pixmap));
QThread::msleep(50);
}
}
It doesn't work as I expected...
I see only the final effect, so the last call:
changeBrightness(*image, 50);
It seems that user can see changes on form only after function ends, is it right?
Is there other way to make such "animation"?

You do not give Qt any time to redraw the widget after you update the button's image, because you are stuck in the loop. Only after you finished updating the image, Qt will be able to redraw your widget, which is why you only see the final result.
Look into QTimer. You can set its timeout to 50 milliseconds via QTimer::setInterval. Then connect a slot that changes the color of the button's image to QTimer::timeout. This slot will be much like your code, but without the loop. E.g. each call of the slot is a single iteration of your loop. Finally, to start or stop the animation, you call QTimer::start or QTimer::stop.

Related

Qt this->update() is not entirely updating the widget

I created a simple widget with a button, a slot for the button, a resize event and a paint event.
I expect when I click on the button it draws an ellipse at a random position and the button disappears.
But I get: the ellipse is drawn and the button is not hidden after this->update.
Even stranger, when I uncomment the button->hide(); every time I click it draws a new eclipse but the old ellipses are still there. Something is wrong with updating and the paint event.
If I resize the window by dragging with the mouse the update of the paint event works as expected. Only the last ellipse stays and the button is hidden.
My Qt version is Qt_5_15_2_MinGW_32_bit
Here is the code of the widget:
PATrackSetter::PATrackSetter(QWidget *parent) : QWidget(parent){
button = new PAButton(this);
connect(button,SIGNAL(clicked(int, QString, QString)),this,SLOT(on_TileClicked(int, QString, QString)));
button->setFixedSize(100, 100);
button->move(0,0);
button->show();
}
void PATrackSetter::paintEvent(QPaintEvent *){
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
QPen pen = QPen();
pen.setColor(Qt::yellow);
painter.setPen(pen);
painter.drawEllipse(100,rand() % 500 +10,5,5);
}
void PATrackSetter::resizeEvent(QResizeEvent *)
{
}
void PATrackSetter::on_TileClicked(int buttonID, QString buttonText, QString newButtonStatus){
button->hide();
this->update();
}
Can anyone see what I did wrong?
Edit:
I added more code to the project and I run into the same issue. I added the following lines into the MainWindow class and the updating inside the PATrackSetter widget doesn't work anymore as expected. I really dont understand why. But if I uncomment these lines it works again well.
QPalette paletteBGColor;
QBrush brush;
brush.setColor(Qt::black);
paletteBGColor.setBrush(QPalette::Background, brush);
this->setPalette(paletteBGColor);
Case closed.
If the button is not hidden then slot is not called. I guess you didn't put void on_TileClicked(int, QString, QString) in slots: section in header file, or signal/slot signatures don't match (in which case there must be warning in debug output in runtime).
When you are reimplementing paintEvent you should expect that every update on the QWidget, even manually or by the parent window, will call the paintEvent once. So, it's up to you to handle cleaning the previous state or draw on the previous drawings. The behavior you explained is quite normal.
It seems that you are not calling setGeometry on the PATrackSetter when you are instantiating it. So, in the update hierarchy, its size is not known and you should expect partial redraws and undefined behaviors.

Qt5: show notification popups

I'm writing an image viewer which allows me to do some actions. As a visual feedback to some actions (like copy/move/delete/..) I'd like to have a decent popup in the middle of my application window which informs about what has been done and which disappears after about a second.
Of course I can just use a Widget and and modify it to fit my needs:
placed in the middle/on top of application window (regardless of layout)
disappears after a given time
no interaction/focus possible - clicking on the notification should be like clicking on what's behind of it
decent style (e.g. transparent and easily readable)
.. I'm just wondering if there's something dedicated for this purpose
(I'm NOT talking about tray notifications which appear near to some task barof the window manager)
You can achieve a nice popup fade in/fade out effect using animation effects in qt ,sample code is given below :
QGraphicsOpacityEffect* effect=new QGraphicsOpacityEffect();
this->label->setGraphicsEffect(effect);
this->label->setStyleSheet("border: 3px solid gray;border-radius:20px;background-color:#ffffff;color:gray");
this->label->setAlignment(Qt::AlignCenter);
this->label->setText("Your Notification");
QPropertyAnimation* a=new QPropertyAnimation(effect,"opacity");
a->setDuration(1000); // in miliseconds
a->setStartValue(0);
a->setEndValue(1);
a->setEasingCurve(QEasingCurve::InBack);
a->start(QPropertyAnimation::DeleteWhenStopped);
this->label->show();
connect(this->timer,&QTimer::timeout,this,&Notifier::fadeOut);
this->timer->start(2000); // 1000 ms to make the notification opacity full and 1000 seconds to call the fade out so total of 2000ms.
and your fadeout method as:
void fadeOut(){
QGraphicsOpacityEffect *effect = new QGraphicsOpacityEffect();
this->label->setGraphicsEffect(effect);
QPropertyAnimation *a = new QPropertyAnimation(effect,"opacity");
a->setDuration(1000); // it will took 1000ms to face out
a->setStartValue(1);
a->setEndValue(0);
a->setEasingCurve(QEasingCurve::OutBack);
a->start(QPropertyAnimation::DeleteWhenStopped);
connect(a,SIGNAL(finished()),this->label,SLOT(hide()));
}
It sound like you want to use a QMessageBox. For instance:
QMessageBox* msgbox = new QMessageBox(this);
msgbox->setWindowTitle("Note");
msgbox->setText("Successfully copied item foobar");
msgbox->open();
You might want to change the modality according to your desire and implement a timer to close the dialog.
QTimer* timer = new QTimer(this);
QObject::connect(timer, SIGNAL(timeout()), msgbox, SLOT(close()));
QObject::connect(timer, SIGNAL(timeout()), timer, SLOT(stop()));
QObject::connect(timer, SIGNAL(timeout()), timer, SLOT(deleteLater()));
timer->start(1000);
Note: Example code, not tested.
Dont know if you are in python or C, but may have a look to this:
http://doc.qt.io/qt-4.8/qmessagebox.html
Nevertheless, I would go for a new window (QWidget) and modify it. Its only a couple of lines, and the automatic close you can do by a Qtimer.

How to set animated icon to QPushButton in Qt5?

QPushButton can have icon, but I need to set animated icon to it. How to do this?
I created new class implemented from QPushButton but how to replace icon from QIcon to QMovie?
This can be accomplished without subclassing QPushButton by simply using the signal / slot mechanism of Qt. Connect the frameChanged signal of QMovie to a custom slot in the class that contains this QPushButton. This function will apply the current frame of the QMovie as the icon of the QPushButton. It should look something like this:
// member function that catches the frameChanged signal of the QMovie
void MyWidget::setButtonIcon(int frame)
{
myPushButton->setIcon(QIcon(myMovie->currentPixmap()));
}
And when allocating your QMovie and QPushButton members ...
myPushButton = new QPushButton();
myMovie = new QMovie("someAnimation.gif");
connect(myMovie,SIGNAL(frameChanged(int)),this,SLOT(setButtonIcon(int)));
// if movie doesn't loop forever, force it to.
if (myMovie->loopCount() != -1)
connect(myMovie,SIGNAL(finished()),myMovie,SLOT(start()));
myMovie->start();
Since I had to solve this problem for a project of mine today, I just wanted to drop the solution I found for future people, because this question has lots of views and I considered the solution quite elegant. The solution was posted here. It sets the icon of the pushButton every time, the frame of the QMovie changes:
auto movie = new QMovie(this);
movie->setFileName(":/sample.gif");
connect(movie, &QMovie::frameChanged, [=]{
pushButton->setIcon(movie->currentPixmap());
});
movie->start();
This also has the advantage, that the icon will not appear, until the QMovie was started. Here is also the python solution, I derived for my project:
#'hide' the icon on the pushButton
pushButton.setIcon(QIcon())
animated_spinner = QtGui.QMovie(":/icons/images/loader.gif")
animated_spinner.frameChanged.connect(updateSpinnerAniamation)
def updateSpinnerAniamation(self):
#'hide' the text of the button
pushButton.setText("")
pushButton.setIcon(QtGui.QIcon(animated_spinner.currentPixmap()))
Once you want to show the spinner, just start the QMovie:
animated_spinner.start()
If the spinner should disappear again, then stop the animation and 'hide' the spinner again. Once the animation is stopped, the frameChanged slot won't update the button anymore.
animated_spinner.stop()
pushButton.setIcon(QtGui.QIcon())

qradiobutton issue

i have a problem with radio button.
I've created a groupbox with two radio buttons and set it exclusive so when one is checked the other one is unchecked.
when i check one it connects to a slot that as a function so it does an action, more specifically change the scale and transform the value from a Slider.
the problem is when i clicked by mistake the already checked button, because even if it already checked it still connects to the function and the value of the slider is changed again, which i don't want.
here's the code from them:
//Conect change from MM or PIXEL, making the change in the scale
connect(ui->radioButton, SIGNAL(pressed())), this, SLOT(mm()));
connect(ui->radioButton_2, SIGNAL(pressed()), this, SLOT(pixel()));
is there a way to block it when it has been already checked before?
I'll post here the mm() and pixel() functions:
// Function to transform the slider scale from pixel to mm
void planevolume::mm()
{
// Set the sliders ranges and connections
// X Slider
double xvaluem=ui->Slider->value();
ui->Slider->setRange(xmin, xmax/(256.0/3.0), 1.0/(256.0/3.0));
ui->Slider->setValue(xvaluem/(256.0/3.0));
ui->Slider->setScale(xmin, (xmax+1.0)/(256.0/3.0), ((xmax+1.0)/16.0)/(256.0/3.0));
connect(ui->Slider, SIGNAL(valueChanged(double)), ui->lcdNumber, SLOT(display(double)));
// Y Slider
double yvaluem=ui->Slider_2->value();
ui->Slider_2->setRange(ymin, ymax/(512.0), 1.0/(512.0));
ui->Slider_2->setValue(yvaluem/(512.0));
ui->Slider_2->setScale(ymin, (ymax+1.0)/512.0, (((ymax+1.0)/16.0)/512.0));
connect(ui->Slider_2, SIGNAL(valueChanged(double)), ui->lcdNumber_2, SLOT(display(double)));
// Z Slider
double zvaluem=ui->Slider_3->value();
ui->Slider_3->setRange(zmin, zmax/(64.0/3.0), 1.0/(64.0/3.0));
ui->Slider_3->setValue(zvaluem/(64.0/3.0));
ui->Slider_3->setScale(zmin, (zmax+1.0)/(64.0/3.0),(((zmax+1.0)/16.0)/(64.0/3.0)));
connect(ui->Slider_3, SIGNAL(valueChanged(double)), ui->lcdNumber_3, SLOT(display(double)));
}
// Function to transform the slider scale from mm to pixel
void planevolume::pixel()
{
// Set the sliders ranges and connections
// X Slider
double xvaluep=ui->Slider->value();
ui->Slider->setRange(xmin, xmax, 1.0);
ui->Slider->setValue(xvaluep*(256.0/3.0));
ui->Slider->setScale(xmin, xmax+1.0, (xmax+1.0)/16.0);
connect(ui->Slider, SIGNAL(valueChanged(double)), ui->lcdNumber, SLOT(display(double)));
// Y Slider
double yvaluep=ui->Slider_2->value();
ui->Slider_2->setRange(ymin, ymax, 1.0);
ui->Slider_2->setValue(yvaluep*(512.0));
ui->Slider_2->setScale(ymin, ymax+1.0, (ymax+1.0)/16.0);
connect(ui->Slider_2, SIGNAL(valueChanged(double)), ui->lcdNumber_2, SLOT(display(double)));
// Z Slider
double zvaluep=ui->Slider_3->value();
ui->Slider_3->setRange(zmin, zmax, 1.0);
ui->Slider_3->setValue(zvaluep*(64.0/3.0));
ui->Slider_3->setScale(zmin, zmax+1.0, (zmax+1.0)/16.0);
connect(ui->Slider_3, SIGNAL(valueChanged(double)), ui->lcdNumber_3, SLOT(display(double)));
}
Instead of using the pressed() signal you might try to use the toggled(bool) signal. This signal is only emitted if the button changes state. Take a look at: http://doc.qt.io/qt-4.8/qabstractbutton.html#toggled
EDIT: If both buttons are connected to toggled(bool), then checking one will uncheck the other and also trigger the signal. But note that the signal has a bool that gives the new state of the button. Your slots must also have this bool parameter, i.e., in your case you need to rewrite your slots as void planevolume::mm(bool on) and void planevolume::pixel(bool on).
Once you have done this, you can simply check the value of the parameter. If it is false it means that the button was checked and now has just been unchecked. Then, the first line of both your functions can be as simple as
if (!on) return;
meaning, that if the radio button has just been unchecked, do not do anything, just go away.
I think the best option is to store a int value related to which option box is selected. Each time you click on an option box, check if it is already selected by using the variable, and then decide.
Regards,

Don't repaint instantly after setVisble in Qt

I'm using QPushButton in my mineSweeping game.
After changing from easy mode to hard mode, the number of QPushButton is supposed to change from 9x9 to 30x16.
So, I add QPushButton with the largest number(which is of hard mode) to GridLayout in constructor of MainWindow.
btnArr = new QPushButton[HARD_WIDTH * HARD_HEIGHT]; // member element
int index = 0;
for (int i = 0; i < HARD_HEIGHT; ++i) {
for (int j = 0; j < HARD_WIDTH; ++j) {
ui->mainGrid->addWidget(&btnArr[index], i, j, 1, 1,
Qt::AlignCenter);
++index;
}
}
Then if the user change mode(e.g.: easy mode to hard mode), resetBtn(HARD_WIDTH, HARD_HEIGHT); will be called.
void MainWindow::resetBtn(const int width, const int height)
{
int index = 0;
for (int i = 0; i < HARD_HEIGHT; ++i) {
for (int j = 0; j < HARD_WIDTH; ++j) {
if (j < width && i < height) {
btnArr[index].setVisible(true);
} else {
btnArr[index].setVisible(false);
}
++index;
}
}
}
The problem is that it seems the widget repaints each time setVisible is called. So in the hard mode case, it will be called 30x16 times, which caused strange effect like this:
So how can I set the widget not repaint during this loop?
Thanks in advance.
I think that you are trying to solve the wrong problem. You shouldn't be updating the widgets like this. If you necessarily want to, then hiding the parent widget of the layout before the change and showing it again afterwards should work.
A better approach is to use QStackedWidget and have all the boards prepared initially. Switching to a different board is then simply a matter of switching the active widget.
The total number of QPushButton is really big: 30x16 = 480!!! I don't use to make people change their programming logic, but in this case I think that using QPushButtons is not the better approach. The layout must have a really bad time trying to move the objects as they are added, and perhaps you are reaching some internal limit in refresh time for the layout to be repainted.
What I would have done is a custom widget with a custom paintEvent method. There you can divide its width and height in the number of columns and rows that you wish and paint the cells with pixmaps as the game is played.
For the mouse interaction, the best would have been to override the mousePressEvent with a custom logic that calculates the mouse position in the grid and calls the corresponding methods or emits signals indicating the position of the event. Not very hard to code. You can also use the event->buttons() method to know which mouse button was pressed and emit different signals if you wish.
I don't use to answer telling that it is better to change your whole program, but in this case I think you are going "the hard way". I know this is not the kind of answer you are looking for, but consider this possibility.
You could try calling setUpdatesEnabled(false) on the parent widget before doing those "massive" changes, and re-enable it once all is done.
Maybe I'm wrong but as far as I know Qt doesn't render the widget right after setVisible() is called. Rendering happens as a result of a 'render' event, except if you call render() manually.
From the official Qt doc (http://qt-project.org/doc/qt-4.8/qwidget.html#paintEvent):
Qt also tries to speed up painting by merging multiple paint events
into one. When update() is called several times or the window system
sends several paint events, Qt merges these events into one event with
a larger region (see QRegion::united()). The repaint() function does
not permit this optimization, so we suggest using update() whenever
possible.
My instincts tell me that it's not a painting problem rather a layouting (not enough space to present every button in 'hard mode').
Also I think you shouldn't use Qt::AlignCenter when you add your buttons to the layout, it will try to centerize every button in the layout. You should rather centerize the parent widget of the layout (if you don't have one create one and centerize it) and set size-policies correctly (QWidget setSizePolicy).
But as #Mat suggested if this really is a painting problem you can use setUpdatesEnabled(false/true) (if setUpdatesEnabled solves your problem please accept #Mat 's solution)
Try to enabling/disabling instead of visible/invisible:
void MainWindow::resetBtn(const int width, const int height)
{
int index = 0;
for (int i = 0; i < HARD_HEIGHT; i++)
for (int j = 0; j < HARD_WIDTH; j++)
btnArr[index++].setEnabled(j < width && i < height);
}

Resources