I have a QWidget-based overlay widget which should paint some text and take place over the central widget of my application. The problem is that I can't set background of overlay widget to be transparent. What I already tried:
setPalette(Qt::transparent);
setAttribute( Qt::WA_TranslucentBackground, true );
setAttribute( Qt::WA_OpaquePaintEvent, true );
setAutoFillBackground(false);
setStyleSheet("QWidget{background-color: transparent;}");
setAttribute(Qt::WA_NoSystemBackground);
My best guess to show an overlay widget, is convert the widget to a window, resize it to it's contents and move them to the desired position manually.
MainWindow Example, showing the overlay widget in the center of the video widget:
Mwindow::Mwindow()
{
widget = new Widget(this);
}
void Mwindow::widgetSizeMove()
{
if (widget->width() <= videoWidget->width() && widget->height() <= videoWidget->height())
{
widget->setWindowOpacity(1); // Show the widget
QPoint p = videoWidget->mapToGlobal(videoWidget->pos());
int x = p.x() + (videoWidget->width() - widget->width()) / 2;
int y = p.y() + (videoWidget->height() - widget->height()) / 2;
widget->move(x, y);
widget->raise();
}
else
{
widget->setWindowOpacity(0); // Hide the widget
}
}
bool Mwindow::event(QEvent *event)
{
switch (event->type())
{
case QEvent::Show:
widget->show();
QTimer::singleShot(50, this, SLOT(widgetSizeMove()));
//Wait until the Main Window be shown
break;
case QEvent::WindowActivate:
case QEvent::Resize:
case QEvent::Move:
widgetSizeMove();
break;
default:
break;
}
return QMainWindow::event(event);
}
Widget Example:
Widget::Widget(QWidget *parent) : QWidget(parent)
{
setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
setAttribute(Qt::WA_NoSystemBackground);
setAttribute(Qt::WA_TranslucentBackground);
setAttribute(Qt::WA_PaintOnScreen);
setAttribute(Qt::WA_TransparentForMouseEvents);
}
void Widget::paintEvent(QPaintEvent*)
{
QPainter p(this);
QString text = "Some foo goes here";
QFontMetrics metrics(p.font());
resize(metrics.size(0, text));
p.drawText(rect(), Qt::AlignCenter, text);
}
Example when showing a video with LibVLC:
On Linux works with:
setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_NoSystemBackground);
setAttribute(Qt::WA_TranslucentBackground);
setAttribute(Qt::WA_TransparentForMouseEvents);
The best solution is provided by Gökmen Göksel in one of the comments of this article
setStyleSheet("background-color: rgba(0,0,0,0)");
Related
I'm trying to animate a widget that is inside a grid and a container, whenever hovered it is animated being expanded horizontally.
As the widget is inside of a container it gets cut because it cant expand above the parent widget area.
What I thought: when the widget is hovered, the code changes her parent to the centralWidget then it can expand above other widgets, and when it's no longer hovered restore her 'original' parent.
An example:
As it could be seen in the gif below, before hovering:
The widget is 'attached' to the GridLayout and inside of the Widget container.
After the mouse leaves:
It's no longer attached to the GridLayout / Widget.
I tried to 'restore' the widget to her parent with:
this->setParent(widgetParent);
But it didn't work or I may be doing something wrong.
I could not think of another way of doing all this (expanding a widget inside of a container above her parent limits), any different suggestion is welcome.
class AnimatedButton : public QPushButton
{
Q_OBJECT
public:
QPropertyAnimation* anim;
struct WidgetPos { int x = 0; int y = 0; int w = 0; int h = 0; };
WidgetPos wp;
QWidget* widgetParent;
QWidget* centralwidget;
void CreateAnimation(QByteArray propertyName)
{
if (propertyName == "geometry")
{
anim = new QPropertyAnimation(this, propertyName);
this->anim->setDuration(100);
this->anim->setEasingCurve(QEasingCurve::Linear);
this->wp.x = this->x();
this->wp.y = this->y();
this->wp.w = this->width();
this->wp.h = this->height();
}
}
AnimatedButton(QWidget* parent = 0) : QPushButton(parent)
{
widgetParent = parent;
this->installEventFilter(this);
}
bool eventFilter(QObject* obj, QEvent* event)
{
if (event->type() == QEvent::Enter)
{
if (!this->wp.x)
this->CreateAnimation("geometry");
// setParent to the central widget so the widget can resize above her default parent area.
this->setParent(this->centralwidget);
this->show();
this->anim->stop();
this->anim->setStartValue(
QRect(this->x(), this->y(), this->width(), this->height()));
this->anim->setEndValue(
QRect(this->x(), this->y(), (this->wp.w + 200) - this->width(), this->height()));
this->anim->start();
}
else if (event->type() == QEvent::Leave)
{
this->anim->stop();
this->anim->setStartValue(
QRect(this->x(), this->y(), (this->wp.w + 200) - this->width(), this->height()));
this->anim->setEndValue(
QRect(this->wp.x, this->wp.y, this->wp.w, this->wp.h));
this->anim->start();
// Restore default parent (--------NOT WORKING---------)
this->setParent(widgetParent);
this->show();
}
return QWidget::eventFilter(obj, event);
}
};
QtWidgetsApplication::QtWidgetsApplication(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
// Pass the central widget to the AnimatedButton class.
ui.pushButton->centralwidget = ui.centralWidget;
return;
}
I've got four QLineEdit placed inside of a QLineEdits, where I want the first the parent to look as if it is in focus when any of the containing ones is selected. Note: I don't want the focus to actually change, just the "focus frame" (the thin blue border) to appear on the parent LineEdit.
I've tried to draw a rect, but while it works on Windows I'm running into issues of the drawn rectangle not looking like a proper rectangle on ex. Linux, where it is supposed to be rounded. Is there a way to fix this OR, if possible, just make it draw itself as focused despite focus not being on it?
Here's my attempt at drawing a custom rect, but haven't been able to make it successfully mirror the OS style properly.
if (childHasFocus) {
QPainter painter(this);
QLineEdit textBox;
QColor color = textBox.palette().color(QPalette::Highlight);
painter.setPen(color);
QRect rect;
rect.setTopLeft(QPoint(0,0));
rect.setWidth(this->width() - 1);
rect.setHeight(this->height() - 1);
painter.drawRect(rect);
}
EDIT: Added an image of the desired look. Note that I'm trying to get it to look like other LineEdits focusframe independent of OS, so hardcoding a blue rectangle won't work due to ex. Linux having a rounded focusframe.
Desired look:
Here's how to do it. Its a very basic class that draws the focus frame if any of the childs have focus. On focus change, we do an update (which can probably be optimized a bit to avoid unnecessary repaints).
Screenshot:
class IPEdit : public QWidget
{
public:
IPEdit(QWidget *parent = nullptr)
: QWidget(parent)
{
delete layout();
auto l = new QHBoxLayout(this);
setFocusProxy(&a);
setAttribute(Qt::WA_Hover);
for (auto *w : {&a, &b, &c, &d}) {
l->addWidget(w);
w->installEventFilter(this);
}
}
bool eventFilter(QObject *o, QEvent *e) override
{
if (e->type() == QEvent::FocusIn || e->type() == QEvent::FocusOut) {
update();
}
return QWidget::eventFilter(o, e);
}
void paintEvent(QPaintEvent *e) override
{
QStyleOptionFrame opt;
opt.initFrom(this);
opt.frameShape = QFrame::StyledPanel;
opt.state |= QStyle::State_Sunken;
// clear mouseOver and focus state
// update from relevant widgets
opt.state &= ~(QStyle::State_HasFocus | QStyle::State_MouseOver);
const auto widgets = {&a, &b, &c, &d};
for (const QWidget *w : widgets) {
if (w->hasFocus()) {
opt.state |= QStyle::State_HasFocus;
}
}
opt.rect = contentsRect();
QPainter paint(this);
paint.setClipRegion(e->region());
paint.setRenderHints(QPainter::Antialiasing);
style()->drawControl(QStyle::CE_ShapedFrame, &opt, &paint, this);
}
private:
QLineEdit a;
QLineEdit b;
QLineEdit c;
QLineEdit d;
};
QlineEdit class is also a qwidget, use the setFocus method
https://doc.qt.io/qt-6/qwidget.html#setFocus
I have QScrollArea which has QVBoxLayout where I place widgets and one of them is QTextBrowser and I want to make QTextBrowser to have size of its content and to remove its scrollbars.
I inherited QTextBrowser, changed sizePolicy, hid scrollbars and overrided sizeHint() like this:
TextBrowserWidget::TextBrowserWidget(QWidget* parent)
: QTextBrowser(parent)
{
setSizePolicy(
QSizePolicy::Preferred,
QSizePolicy::Minimum);
setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}
QSize TextBrowserWidget::sizeHint() const
{
if (document()) {
auto docSize = document()->size();
return QSize(docSize.width(), docSize.height() + 10);
} else
return QTextBrowser::sizeHint();
}
But this works with delay, at first widget becomes small and after 1-2 seconds it becomes bigger.
I am not sure if it's good solution. What is the right way to do it?
TextBrowserWidget::TextBrowserWidget(QWidget* parent)
: QTextBrowser(parent)
{
setSizePolicy(
QSizePolicy::Minimum,
QSizePolicy::MinimumExpanding);
connect(
this, &TextBrowserWidget::textChanged,
this, &TextBrowserWidget::updateSize);
setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}
QSize TextBrowserWidget::sizeHint()
{
updateSize();
return QTextBrowser::sizeHint();
}
void TextBrowserWidget::updateSize()
{
document()->setTextWidth(viewport()->size().width());
auto docSize = document()->size().toSize();
setMinimumWidth(docSize.width());
setMinimumHeight(docSize.height() + 10);
}
I tried to implement a way for changing the background when an SVG button is pressed and reseting when it is released. My problem is that the mouseReleaseEvent is not called when I hide the QSvgWidget on which the mousePressEvent was called.
Here is my code:
SvgButton.cpp
#include "SvgButton.h"
SVGButton::SVGButton(QByteArray backgroundImage, QWidget *parent) :
QPushButton(parent)
{
this->init(backgroundImage);
}
SVGButton::SVGButton(QString backgroundImagePath, QWidget *parent) : QPushButton(parent)
{
SVGDom normalBackgroundImage(backgroundImagePath);
this->init(normalBackgroundImage.byteArray());
}
void SVGButton::init(QByteArray backgroundImage)
{
setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred);
_backgroundImageWidget = new QSvgWidget();
_backgroundImageWidget->load(backgroundImage);
setLayout(new QHBoxLayout(this));
layout()->addWidget(_backgroundImageWidget);
this->setFlat(true);
}
void SVGButton::select()
{
this -> setStyleSheet("background-color:rgba(0, 0, 0, 10);");
}
void SVGButton::deselect()
{
this -> setStyleSheet("background-color:rgba(0, 0, 0, 0)");
}
int SVGButton::tag()
{
return _tag;
}
void SVGButton::setTag(int tag)
{
_tag = tag;
}
void SVGButton::paintEvent(QPaintEvent *)
{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}
SVGButton::~SVGButton()
{
delete _backgroundImageWidget;
}
and BaseNavigationButton.cpp
#include "BaseNavigationButton.h"
const int kButtonWidth = 140;
const int kButtonHeight = 70;
BaseNavigationButton::BaseNavigationButton(QString backgroundImagePath, QString pressedBackgroundImagePath, QWidget *parent)
: SVGButton(backgroundImagePath, parent)
{
this->setMinimumSize(kButtonWidth, kButtonHeight);
if (!pressedBackgroundImagePath.isNull())
{
SVGDom pressedBackgroundImage(pressedBackgroundImagePath);
_pressedBackgroundImageWidget = new QSvgWidget();
_pressedBackgroundImageWidget->load(pressedBackgroundImage.byteArray());
layout()->addWidget(_pressedBackgroundImageWidget);
_pressedBackgroundImageWidget->hide();
}
else
{
_pressedBackgroundImageWidget = NULL;
}
}
void BaseNavigationButton::mouseReleaseEvent(QMouseEvent * event)
{
qDebug() << "SVGButton::mouseReleaseEvent";
if (_pressedBackgroundImageWidget) {
_backgroundImageWidget->setVisible(false);
_pressedBackgroundImageWidget->setVisible(true);
//_backgroundImageWidget->show();
//_pressedBackgroundImageWidget->hide();
}
QPushButton::mouseReleaseEvent(event);
//emit released();
}
void BaseNavigationButton::mousePressEvent(QMouseEvent *event)
{
qDebug() << "SVGButton::mousePressEvent";
if(_pressedBackgroundImageWidget)
{
_backgroundImageWidget->setVisible(true);
_pressedBackgroundImageWidget->setVisible(false);
}
QPushButton::mousePressEvent(event);
// emit pressed();
}
BaseNavigationButton::~BaseNavigationButton()
{
if (_pressedBackgroundImageWidget)
{
delete _pressedBackgroundImageWidget;
}
}
The SVGDom basically just create a ByteArray from the SVG images. The code works, it is relatively correct, the only problem is that I described above.
When you hide a QWidget, it lose the focus, and a Widget --or some child widget-- must have the focus in order to the events work on it.
Try this simple example:
Press the mouse button when the cursor is over a button.
Move the pointer out of the button without release the mouse button.
Release the mouse button.
As you will see, this not will trigger the button clicked --clicked is a mousePressEvent followed by a mouseReleaseEvent-- event.
Hence, you cannot receive mouse buttons events from hidden objects.
What can I do to implement the "mouse pressed" style behaviour?
If by "mouse pressed style behaviour" you mean: "I want my widget style change when I press the mouse button".
Well, you can use the setStyleSheet function and applpy a CSS style to your widget. See Qt Style Sheets Examples
I want to change the color of an ellipse when I move my mouse over it.
But I haven't found anything from reference and auto-complete from Qt Creator.
Do you guys know how to do it?
Some of my code:
void DrawingWidget::paintEvent(QPaintEvent *event) {
QPainter painter(this);
painter.fillRect(event->rect(), Qt::white);
for(int i = 0; i < pointList.size(); i++) {
if (pointList[i].x() >= 0 && pointList[i].y() >= 0)
painter.drawEllipse(pointList[i], 10, 10);
}
painter.drawLines(lineList);
m_mainWindow->updateCount();
}
Mouse press event handler:
void DrawingWidget::mousePressEvent(QMouseEvent *event) {
if (event->button() == Qt::LeftButton
&& event->buttons() == Qt::LeftButton) {
// DO STUFFF
}
}
Mouse move event handler:
void DrawingWidget::mouseMoveEvent(QMouseEvent *event) {
if (m_mainWindow->getSelectedTool() == MainWindow::moveVertexTool) {
m_x = event->x();
m_y = event->y();
if (isPointNear(m_x, m_y)) {
//STUFF
}
update();
}
}
}
Now I just need a mouse OVER event (handler).
I think what you are looking for are enter and leave events.
Use QWidget::underMouse() for check if the widget is under the mouse cursor.
For example:
void IconButton::paintEvent(QPaintEvent *)
{
QPainter painter(this);
// Note isDown should really use the active state but in most styles
// this has no proper feedback
QIcon::Mode mode = QIcon::Disabled;
if (isEnabled()) {
if (isDown())
mode = QIcon::Selected;
else
mode = underMouse() ? QIcon::Active : QIcon::Normal;
}
QPixmap pixmap = icon().pixmap(iconSize(), mode);
QRect pixmapRect = QRect(0, 0, pixmap.width(), pixmap.height());
pixmapRect.moveCenter(rect().center());
if (m_autoHide)
painter.setOpacity(m_iconOpacity);
painter.drawPixmap(pixmapRect, pixmap);
}
This value is not updated properly during drag and drop operations.