Transparent QWidget overlay on gstreamer- video - qt

I am using gstreamer-1.0 and overlaying a video stream on a QVideoWidget in Qt . I want to add transparent label to show on the video . The problem is that when I add the label to the layout , of the widget I render the video on , and keep updating the label continuously it either:
- appears , but its background is the background of the window on which the video is rendered . I mean that the video is no longer rendered in the background of the label. (this is when label is updated faster than video frame rate)
-label doesn't appear and all that I have is the video (if label update rate is less than frame rate )
I tried adding a transparent widget to the video layout and adding the label to the new window but this also failed .
Here is my code
// videoWindow //this is the window on which video is rendered
layTimer=new QGridLayout();
dummyWidget=new QWidget();
timerLabel=new QLabel(dummyWidget);
videoWindow->setLayout(layTimer);
dummyWidget->setAttribute(Qt::WA_TranslucentBackground);
dummyWidget->setStyleSheet("background:transparent;");
timerLabel()->setStyleSheet("background:transparent;");
timerLabel()->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint | Qt::X11BypassWindowManagerHint );
dummyWidget->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint | Qt::X11BypassWindowManagerHint );
timerLabel()->setAttribute(Qt::WA_TranslucentBackground);
layTimer->addWidget(dummyWidget);
How can I solve this ? How can I display only text of the label on the video ?

Related

Tab text alignment in QTabWidget

I am using QTabWidget class of Qt.
In TabWidget i am dynamically adding new tab and setting the TextElideMode to right to display the toolbutton in tabBar.
tabWidget = new QTabWidget(this);
m_addNewTab = new QWidget(tabWidget);
m_addNewGridLayout = new QGridLayout(m_addNewTab);
m_addNewWebView = new MyWebView(m_addNewTab);
widget = new QWidget(m_addNewTab);
tb = new QToolButton(widget);
tb->setFixedHeight(20);
tb->setText("<");
tb1 = new QToolButton(widget);
tb1->setFixedHeight(20);
tb1->setText(">");
m_horizontalLayout = new QHBoxLayout(widget);
m_horizontalLayout->addWidget(tb);
m_horizontalLayout->addWidget(tb1);
Please see the below screen shot for the output of the sample application.
When the current tab is selected then both the toolbutton should display and text elide mode should be right but when tab is not selected then toolbutton should not be displayed but text elide mode should be left.
Here in below screen shot i am able to hide and show the toolbutton depending on tab selection but when the tab is not selected text elide mode is setting as right so we are able to see the unnecessary space (check last tab). Setting the text elide mode left also not working because we have already set the toolbutton at left side.
Can someone guide me how to remove the space (last tab from screen shot) when there is not tab selected ?
You'll have to:
Keep track of tab index and corresponding holding widget (let's say std::map<int,QToolButton> toolbutton_by_index
When QTabWidget.currentChanged is emitted, deactivate all widgets except the selected
You can do the 2nd part like this:
std::for_each(toolbutton_by_index.begin(), toolbutton_by_index.end(),
[&index](auto pair){
(pair.first == index)?pair.second->hide():pair.second->show()});

make quickwidget background transparent

I have created 2 QWidget and 1 QQuickWidget in main window. The QQuickWidget uses a source qml file. I want to set background transparent for two QWidgets and the QQuickWidget.
Can anyone help me to make the background of the QQuickWidget transparent so that my main window is also visible.
const auto m_QuickWidgetPtr = new QQuickWidget(this);
...
m_QuickWidgetPtr->setAttribute( Qt::WA_AlwaysStackOnTop );
m_QuickWidgetPtr->setAttribute( Qt::WA_TranslucentBackground );
m_QuickWidgetPtr->setClearColor( Qt::transparent );

QPushButton icon maximize on resize event

I have a question about resizing an icon on a QPushButton. Target system is Qt 4.8.6 on Linux. I am using QPushButton to create buttons with icons only, no text. I would like to have the icon as large as possible centered on the button including some margin.
I do not want the button size to adapt to the image size, I want the image size to adapt to the button size, while the button size adapts automaticly to the GUI size through QGridLayout or manually resizing.
When simply creating the button, the icon is only loaded small within the middle:
const QString fileName = "Bitmaps/btn.png";
if( !QFile( fileName ).exists() )
{
qDebug() << "File not found: " << fileName;
}
const QPixmap pixmap = QPixmap( fileName );
m_btn = new QPushButton( QIcon( pixmap ), "", this );
When resizing through manual setting, the icon does not scale:
m_btn->setGeometry( QRect( 100, 100, 50, 50 ) );
To get the icon size rescaled I need to manually call setIconSize(). I can call this within the resize event of the instanciating widget.
But handling the margin still has to be calculated manually.
m_btn->setIconSize( QSize( ( m_btn->size().width() - 12 ),
( m_btn->size().height() - 12 ) ) );
But, as I get from the Qt Documentation there is a Stylesheet based layout thing called "The Box Model" which is applied to QPushButton as well.
http://doc.qt.io/qt-4.8/stylesheet-customizing.html#box-model
So my question is, how do I configure the push button icon to fill the "content" area (marked as grey in the above document).
Possibly how do I configure it, that the icon resizes automaticly?
Your help is appreciated :-)

How to display fix banner between QMenubar and QToolBar in QMainWindow

How can I show fixed banner (with some widget like label and button ) in between
QMenuBar and QToolBar ?
Similarly like QStatusBar but in between QMenuBar and QToolBar.
I tried to implement using QToolBar.
// toolbar Banner with lable inside it.
QLabel * bannerLabel = new QLabel(" bannerToobar with label banner.");
bannerLabel->setAlignment( Qt::AlignVCenter );
ui.bannerToobar->addWidget( bannerLabel );
ui.bannerToobar->setAllowedAreas(Qt::ToolBarArea::TopToolBarArea);
ui.bannerToobar->setMovable( false );
QSize banner_sz = ui.bannerToobar->size();
ui.bannerToobar->setFixedHeight( banner_sz.height() * 2 );
QSizePolicy banner_szPolicy( QSizePolicy::Policy::Maximum, QSizePolicy::Policy::Fixed );
banner_szPolicy.setHorizontalStretch(255);
ui.bannerToobar->setSizePolicy( banner_szPolicy );
but i can't prevent user from draging mainToolbar and droping in the same row as my
bannerToolbar
You can force it to wrap initially using QMainWindow::addToolBarBreak, but I don't know a way to prevent it from being put back there later by the user (except for making the toolbars non-moveable).
If there was a QToolbar::dockLocationChanged signal (which seems to have been requsted and resolved in https://bugreports.qt-project.org/browse/QTBUG-1274, but I still don't see the signal anywhere), I suppose you could use insertToolBarBreak to fix it up whenever things have changed. Maybe there's some hackish way you could get notified when the toolbars move.
Or you could use QMainWindow::setMenuWidget to place a widget containing both your QMenuBar and something else into the menu area of the QMainWindow. This could get tricky if you want to support styles (mac/gnome/etc) where the menubar gets lifted out of your window to the top-of-screen and the toolbar gets unified with the window title decorations. But the idea of a banner between menubar and toolbar just naturally has problems in such cases :-)

Qt, making UI that shrinks and expands

I'm trying to learn how to create the layout of my Qt Symbian application so that it will expand/shrink and fit into the screen size of different devices.
In my default ui I have added a QTabWidget with five tabs that I want to fit into the screen of the device. I have two problems:
How can I make the tabs to shrink to always fit into the screen of the device, or is that not possible? What if one device has a width of 240px and another a width of 400px. As you can see now (Nokia Emulator) the tabs go outside of the screen. (And I don't want to use ScrollButtons)
As you can see in the red part of the picture (Nokia Emulator
) there is some spacing in the UI that I don't want. Instead I want the QTabWidget to fill the whole screen (all the red part).
In summary I'm learning right now and it would be great if you could give me some tips about where to look for more info regarding these problems with building an UI that fits into many devices and screen resolutions. Thanks!
This is the code in my UI file:
void setupUi(QMainWindow *UITest)
{
if (UITest->objectName().isEmpty())
UITest->setObjectName(QString::fromUtf8("UITest"));
UITest->resize(284, 167);
QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
sizePolicy.setHorizontalStretch(0);
sizePolicy.setVerticalStretch(0);
sizePolicy.setHeightForWidth(UITest->sizePolicy().hasHeightForWidth());
UITest->setSizePolicy(sizePolicy);
centralwidget = new QWidget(UITest);
centralwidget->setObjectName(QString::fromUtf8("centralwidget"));
verticalLayout = new QVBoxLayout(centralwidget);
verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));
tabWidget = new QTabWidget(centralwidget);
tabWidget->setObjectName(QString::fromUtf8("tabWidget"));
tabWidget->setTabPosition(QTabWidget::South);
tabWidget->setUsesScrollButtons(false);
tab = new QWidget();
tab->setObjectName(QString::fromUtf8("tab"));
tabWidget->addTab(tab, QString());
...More tabs...
verticalLayout->addWidget(tabWidget);
UITest->setCentralWidget(centralwidget);
retranslateUi(UITest);
QMetaObject::connectSlotsByName(UITest);
} // setupUi
void retranslateUi(QMainWindow *UITest)
{
UITest->setWindowTitle(QApplication::translate("UITest", "UITest", 0, QApplication::UnicodeUTF8));
UITest->setStyleSheet(QApplication::translate("UITest", "background: red;\n" "padding: 0px;", 0, QApplication::UnicodeUTF8));
tabWidget->setStyleSheet(QApplication::translate("UITest", "background: white;\n" "margin: 0px;\n" "padding: 0px;", 0, QApplication::UnicodeUTF8));
} // retranslateUi
In main.cpp showMaximized() is used to show my widget as I also want the menu buttons in the bottom.
How do you show the widget? I suggest using the showFullScreen method to show it - that might do it.

Resources