My goal is to create a simple video player QWidget that allows for some overlayed graphics (think subtitles or similar).
I started with the naive approach, which was to use QVideoWidget with another set of QWidget on top (my overlays). Unfortunately this does not work because Qt does not allow widgets with transparent background to render on top of video. The background shows as black instead of the actual video.
Next idea is to use QGraphicsScene et al. which is supposed to allow this kind of compositing, so I create a dead simple setup like this:
// The widget we will use as viewport
auto viewport= new QWidget();
//Set an easily recognizable bg color for debugging
palette.setColor(QPalette::Window, Qt::green);
viewport->setPalette(palette);
viewport->setAutoFillBackground(true);
// Our scene
auto mScene=new QGraphicsScene(this);
// The video
auto mVideoItem = new QGraphicsVideoItem();
mVideoItem->setPos(0,0);
myVideoSource.setVideoOutput(mVideoItem); // ... not shown: setting up of the video source
mScene->addItem(mVideoItem);
// Yellow line starting at 0,0 for debugging
auto line=new QGraphicsLineItem (0,0,100,100);
line->setPos(0,0);
line->setPen(QPen(Qt::yellow, 2));
mScene->addItem(line);
// A Text string
auto text=new QGraphicsTextItem("Its Wednesday my dudes", mVideoItem);
text->setPos(10, 10);
// Our view
mView=new QGraphicsView;
mView->setScene(mScene);
mView->setViewport(viewport);
viewport->show()
Now this looks promising because I can see compositing works; the line and text render flawlessly on top of the video. However the video is positioned in a seemingly random place in the widget. (see screensdhot)
At this point I have tried every conceivable and inconceivable combination of
mVideoItem->setSize();
mVideoItem->setOffset();
mScene->setSceneRect();
mView->fitInView();
mView->ensureVisible();
mView->centerOn()
Trying to fill the viewport widget with the video item but nothing seems logical at all. Instead of centering the content, it seems to fly around the screen in logic defying ways and I have given up. I put my code in the viewport widget's resizeEvent and use the viewport widget's size() as the base.
So my question is; How can I fill viewport widget with video item on resize?
I dont think QGraphicsVideoItem is good for this task.
You can implement QAbstractVideoSurface that receives QVideoFrames and feeds them to QWidget that converts them to QImage, scales and draws them in paintEvent. Since you control paintEvent you can draw anything over your video, and get "fill viewport" feature for free.
Gist:
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Surface surface;
Widget widget(surface);
widget.show();
QMediaPlayer player;
player.setVideoOutput(&surface);
player.setMedia(QMediaContent(QUrl("path/to/media")));
player.play();
return a.exec();
}
bool Surface::present(const QVideoFrame &frame)
{
mFrame = frame;
emit frameReceived();
return true;
}
Widget::Widget(Surface &surface, QWidget *parent)
: QWidget{parent}, mSurface(surface)
{
connect(&mSurface,SIGNAL(frameReceived()),this,SLOT(update()));
}
void Widget::paintEvent(QPaintEvent *event)
{
QVideoFrame frame = mSurface.frame();
if (frame.map(QAbstractVideoBuffer::ReadOnly)) {
QPainter painter(this);
int imageWidth = mSurface.imageSize().width();
int imageHeight = mSurface.imageSize().height();
auto image = QImage(frame.bits(),
imageWidth,
imageHeight,
mSurface.imageFormat());
double scale1 = (double) width() / imageWidth;
double scale2 = (double) height() / imageHeight;
double scale = std::min(scale1, scale2);
QTransform transform;
transform.translate(width() / 2.0, height() / 2.0);
transform.scale(scale, scale);
transform.translate(-imageWidth / 2.0, -imageHeight / 2.0);
painter.setTransform(transform);
painter.drawImage(QPoint(0,0), image);
painter.setTransform(QTransform());
painter.setFont(QFont("Arial", 20));
int fontHeight = painter.fontMetrics().height();
int ypos = height() - (height() - imageHeight * scale) / 2 - fontHeight;
QRectF textRect(QPoint(0, ypos), QSize(width(), fontHeight));
QTextOption opt(Qt::AlignCenter);
painter.setPen(Qt::blue);
painter.drawText(textRect, "Subtitles sample", opt);
frame.unmap();
}
}
Full source: draw-over-video
Based on customvideosurface example from Qt.
Related
I am learning Qt5 and I use Qt 5.9.1. Now I have a problem: how to keep the graphics in the center of main window even when the size of main window changes?
Last year I learned MFC in my class and the teacher told us that in order to make the graphics always stay in the window, we should do as followings:
Let the origin of viewport be the center of client area;
Let the size of viewport be the size of client area;
Let the origin of window be the center of graphics' bounding rectangle;
Let the size of window be the size of graphics' bounding rectangle .
So I do the same thing in Qt5:
// main.cpp
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QtGuiApplication1 w;
// get the size and center of client area
// and then pass the values to QtGuiApplication
int width = QApplication::desktop()->availableGeometry().width();
int height = QApplication::desktop()->availableGeometry().height();
QPoint center = QApplication::desktop()->availableGeometry().center();
w.setViewport(center,width,height);
w.show();
return a.exec();
}
// GtGuiApplication.cpp
void QtGuiApplication1::paintEvent(QPaintEvent *)
{
QPainter painter(this);
// set the viewport
painter.setViewport(centerOfViewport.x(),centerOfViewport.y(), widthOfViewport, heightOfViewport);
static const QPointF points[4] = {
QPointF(10.0, 10.0),
QPointF(10.0, 80.0),
QPointF(50.0, 80.0),
QPointF(10.0, 10.0)
};
// set the window
painter.setWindow(30,45,40,70);
painter.drawPolyline(points, 4);
}
However all these things didn't work. Before I set the viewport and window:
And after I did the setting:
I do not understand what you indicate in the line, maybe it is fulfilled within MFC, but the rules are not accepted without analyzing them, you have to understand them and it seems that you want to apply them without understanding them correctly.
According to what you point out, you want the polygon to always be centered within the window, and in your code you use the size of the window which does not make sense since the window can be anywhere on the screen, from there we go badly.
If you want the center of the polygon to be the center of the window, then you must calculate both points considering in the first reference source the topleff of the rectangle bordering the polygon, and in the second the rectangle of the window, if we subtract both positions we obtain what must be moved by the painter so that both points coincide.
void QtGuiApplication1::paintEvent(QPaintEvent *)
{
QPainter painter(this);
static const QVector<QPointF> points = {
QPointF(10.0, 10.0),
QPointF(10.0, 80.0),
QPointF(50.0, 80.0),
QPointF(10.0, 10.0)
};
QPainterPath path;
path.addPolygon(QPolygonF(points));
QPointF center_path = path.boundingRect().center();
painter.translate(rect().center()-center_path);
painter.drawPath(path);
}
Let's say we have 2 qDeclarativeItem's laying on top of each other. Bottom item contains a background image (most of the time remaining unchanged). Top item contains a bunch of simple items (lines, arcs...) that can be directly edited by using a mouse.
Problem:
When painting on top layer, buttom layer is fully repainted too. Considering that I'm having a large image there, repainting it is very slow.
As an example of above said, here is some code.
Q_DECL_EXPORT int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QmlApplicationViewer viewer;
qmlRegisterType<BottomLayer>("Layer", 1, 0, "BottomLayer");
qmlRegisterType<UpperLayer>("Layer", 1, 0, "UpperLayer");
viewer.setMainQmlFile(QLatin1String("qml/main.qml"));
viewer.setViewportUpdateMode(QGraphicsView::MinimalViewportUpdate);
viewer.showExpanded();
return app.exec();
}
Background layer (painting the background image):
BottomLayer::BottomLayer(QDeclarativeItem *parent) : QDeclarativeItem(parent)
{
setFlag(QGraphicsItem::ItemHasNoContents, false);
image.load( "../img.png");
}
void BottomLayer::paint(QPainter* painter,const QStyleOptionGraphicsItem* option, QWidget* widget)
{
painter->drawImage( QRectF(0, 0, 1920, 1080), image );
}
Foreground layer (drawing lines):
UpperLayer::UpperLayer(QDeclarativeItem *parent) : QDeclarativeItem(parent)
{
setFlag(QGraphicsItem::ItemHasNoContents, false);
}
void UpperLayer::mousePosCanvasChanged(QPoint pos)
{
p2 = pos;
if(drawing)
update();
}
void UpperLayer::mouseDownCanvasChanged(QPoint pos)
{
p1 = pos;
drawing = true;
}
void UpperLayer::mouseUpCanvasChanged(QPoint pos)
{
drawing = false;
}
void UpperLayer::paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget)
{
QPen pen(Qt::red, 3, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
painter->setPen(pen);
painter->drawLine(p1, p2);
}
QML code
Rectangle {
width: 1920
height: 1080
color: "transparent"
MouseArea {
anchors.fill: parent
onMousePositionChanged: upper_layer.mousePosCanvasChanged(Qt.point(mouseX,mouseY));
onPressed: upper_layer.mouseDownCanvasChanged(Qt.point(mouseX,mouseY))
onReleased: upper_layer.mouseUpCanvasChanged(Qt.point(mouseX,mouseY))
}
BottomLayer{
anchors.fill: parent
}
UpperLayer {
id: upper_layer
anchors.fill: parent
}
}
What did I try:
I tried painting everything right on the screen with viewer.setAttribute(Qt::WA_PaintOnScreen, true), so I can avoid buffering overhead. This gives me the desired frame rate, but everything becomes flickery.
I thought about using the background image as a buffer and do the painting right on it. Considering that sometimes I have to clean after myself (ex. movind the item on the screen), this approach becomes too complex and unjustified.
I tried doing it with Graphics View Framework, so I can limit the repaint area to foreground item's clip rectangle. This however does not work as desired. If f.ex. I have a line going from top-left to bottom-right corner, the clipRectangle covers the whole image (everything is slow again).
I tried calculating the clipRectangle for every foreground item and passing it to update(QRect) and update(QRegion). This gives me the same performance as GraphicsViewFramework, but, now I can divide my items in several rectangles, repaint each separately and get an even smaller repaint area. If I go further with this approach, I can update every item pixel-by-pixel and avoid background repainting at all. However, I have a feeling that I'm doing something wrong. If it is possible to do it this way, isn't there something in Qt that can do everything for me?
P.S. If you have some other ideas that I can try, I'm interested to hear (read) them.
If the image is below all items and doesn't need to be moved, you could probably draw it in QGraphicsView'::drawBackground()
I am working with QT 5.7 and C++.
At the moment I try to get used to draw my own widgets with the QPainter class.
But I noticed a problem I couldn't solve.
I try to draw a border line extactly at the widget border but if I do so:
void MyWidget::paintEvent(QPaintEvent *event)
{
QPainter painter;
painter.begin(this);
painter.setBrush(Qt::cyan);
QBrush brush(Qt::black);
QPen pen(brush, 2);
painter.setPen(pen);
painter.drawRect(0, 0, size().width() - 1, size().height() - 1);
painter.end();
}
The Line is at the bottom and right site bigger than the others:
And before someone is telling me I have to remove the two -1 expressions,
you should know if I do this and also set the pen width to 1 there is no line anymore at the bottom and right side.
I think this artifact is caused by the "line aligment".
QT tries to tint the the pixels near the logical lines defined by the rectangle but actually because finally all have to be in pixels it has to decide.
If I am right, why there is no method to set the line aligment of the pen like in GDI+?
And how I can solve this?
Everything depends on whether you want the entire pen's width to be visible or not. By drawing the rectangle starting at 0,0, you're only showing half of the pen's width, and that makes things unnecessarily complicated - never mind that the line appears too thin. In Qt, the non-cosmetic pen is always drawn aligned to the middle of the line. Qt doesn't let you change it: you can change the drawn geometry instead.
To get it right for odd line sizes, you must give rectangle's coordinates as floating point values, and they must be fall in the middle of the line. So, e.g. if the pen is 3.0 units wide, the rectangle's geometry will be (1.5, 1.5, width()-3.0, width()-3.0).
Here's a complete example:
// https://github.com/KubaO/stackoverflown/tree/master/questions/widget-pen-wide-38019846
#include <QtWidgets>
class Widget : public QWidget {
Q_OBJECT
Q_PROPERTY(qreal penWidth READ penWidth WRITE setPenWidth)
qreal m_penWidth = 1.0;
protected:
void paintEvent(QPaintEvent *) override {
QPainter p{this};
p.setPen({Qt::black, m_penWidth, Qt::SolidLine, Qt::SquareCap, Qt::MiterJoin});
p.setBrush(Qt::cyan);
qreal d = m_penWidth/2.0;
p.drawRect(QRectF{d, d, width()-m_penWidth, height()-m_penWidth});
}
public:
explicit Widget(QWidget * parent = 0) : QWidget{parent} { }
qreal penWidth() const { return m_penWidth; }
void setPenWidth(qreal width) {
if (width == m_penWidth) return;
m_penWidth = width;
update();
}
QSize sizeHint() const override { return {100, 100}; }
};
int main(int argc, char ** argv) {
QApplication app{argc, argv};
QWidget top;
QVBoxLayout layout{&top};
Widget widget;
QSlider slider{Qt::Horizontal};
layout.addWidget(&widget);
layout.addWidget(&slider);
slider.setMinimum(100);
slider.setMaximum(1000);
QObject::connect(&slider, &QSlider::valueChanged, [&](int val){
widget.setPenWidth(val/100.0);
});
top.show();
return app.exec();
}
#include "main.moc"
I'm facing an annoying issue using Qt QGraphicsView framework.
I write a basic image viewer to display large B&W tiff images.
Images are displayed using a QGraphicsPixmapItem and added to the scene.
I also need to draw a colored rectangle around the viewport.
void ImageView::drawForeground( QPainter * painter, const QRectF & rect )
{
if( m_image ) {
qDebug() << "drawForeground(), rect = " << rect;
QBrush br(m_image->isValidated() ? Qt::green : Qt::red);
qreal w = 40. / m_scaleFactor;
QPen pen(br, w);
painter->save();
painter->setOpacity(0.5);
painter->setPen(pen);
painter->drawRect(rect);
painter->restore();
}
}
It works fine, at first glance.
But when I scroll the viewport content, things are getting ugly.
drawForeground() method is effectively called but it seems the content of the viewport is not erased before. So the drawing becomes horrible on screen.
Is there a better way to achieve it?
EDIT
As leems mentioned it, Qt internals don't alow me to achieve it with drawForeground().
I found a workaround by using a QGraphicsRectItem which gets resized in the viewportEvent().
Loos like:
bool ImageView::viewportEvent(QEvent *ev)
{
QRect rect = viewport()->rect();
if( m_image ) {
QPolygonF r = mapToScene(rect);
QBrush br2(m_image->isValidated() ? Qt::green : Qt::red);
qreal w2 = 40. / m_scaleFactor;
QPen pen2(br2, w2);
m_rect->setPen(pen2);
m_rect->setOpacity(0.5);
m_rect->setRect(r.boundingRect());
}
return QGraphicsView::viewportEvent(ev);
}
The code is not finalized but will basically looks like that.
It works fine, though it blinks a little bit when scrolling too fast...
I'm trying to set the background QBrush of a QMdiArea widget in Qt4 to a gradient of system colors.
Here's some code I have now:
QPrios::QPrios(int &argc, char **argv): QApplication(argc, argv)
{
// ...
QPalette pal = this->palette();
QLinearGradient grad;
grad.setColorAt(0, pal.text().color());
grad.setColorAt(1, pal.window().color());
_mdi->setBackground(QBrush(grad));
// ...
}
What happens is that the background becomes just a solid color, the one set with grad.setColorAt(1, pal.window().color());
What am I doing wrong?
Set the gradient's coordinate mode. You might also want to set the gradient's start and stop points at constructor if you want a vertical gradient.
QLinearGradient grad(QPointF(0, 0), QPointF(0, 1));
grad.setCoordinateMode(QGradient::ObjectBoundingMode);
grad.setColorAt(0, pal.text().color());
grad.setColorAt(1, pal.window().color());