Add grid overlay to player.

icons/resources.qrc

@@ -27,6 +27,7 @@
         <file>dark/32x32/video-television.png</file>
         <file>dark/32x32/view-filter.png</file>
         <file>dark/32x32/view-fullscreen.png</file>
+        <file>dark/32x32/view-grid.png</file>
         <file>dark/32x32/view-history.png</file>
         <file>dark/32x32/view-media-playlist.png</file>
         <file>dark/32x32/window-close.png</file>
@@ -58,6 +59,7 @@
         <file>light/32x32/video-television.png</file>
         <file>light/32x32/view-filter.png</file>
         <file>light/32x32/view-fullscreen.png</file>
+        <file>light/32x32/view-grid.png</file>
         <file>light/32x32/view-history.png</file>
         <file>light/32x32/view-media-playlist.png</file>
         <file>light/32x32/window-close.png</file>
@@ -84,6 +86,7 @@
         <file>oxygen/32x32/actions/speaker.png</file>
         <file>oxygen/32x32/actions/view-filter.png</file>
         <file>oxygen/32x32/actions/view-fullscreen.png</file>
+        <file>oxygen/32x32/actions/view-grid.png</file>
         <file>oxygen/32x32/actions/view-history.png</file>
         <file>oxygen/32x32/actions/view-media-playlist.png</file>
         <file>oxygen/32x32/actions/window-close.png</file>

other-resources.qrc

@@ -7,6 +7,5 @@
         <file>scripts/htmleditor.js</file>
         <file>scripts/web-animations.html</file>
         <file>scripts/web-animations.js</file>
-        <file>src/qml/vui_droparea.qml</file>
     </qresource>
 </RCC>

src/glwidget.cpp

@@ -55,6 +55,7 @@ using namespace Mlt;
 GLWidget::GLWidget(QObject *parent)
     : QQuickWidget(QmlUtilities::sharedEngine(), (QWidget*) parent)
     , Controller()
+    , m_grid(0)
     , m_shader(0)
     , m_glslManager(0)
     , m_initSem(0)
@@ -675,8 +676,12 @@ int GLWidget::reconfigure(bool isMulti)
 
 QPoint GLWidget::offset() const
 {
-    return QPoint(m_offset.x() - (MLT.profile().width()  * m_zoom -  width()) / 2,
-                  m_offset.y() - (MLT.profile().height() * m_zoom - height()) / 2);
+    if (m_zoom == 0.0) {
+        return QPoint(0,0);
+    } else {
+        return QPoint(m_offset.x() - (MLT.profile().width()  * m_zoom -  width()) / 2,
+                      m_offset.y() - (MLT.profile().height() * m_zoom - height()) / 2);
+    }
 }
 
 QImage GLWidget::image() const
@@ -723,6 +728,13 @@ void GLWidget::onFrameDisplayed(const SharedFrame &frame)
     quickWindow()->update();
 }
 
+void GLWidget::setGrid(int grid)
+{
+    m_grid = grid;
+    emit gridChanged();
+    quickWindow()->update();
+}
+
 void GLWidget::setZoom(float zoom)
 {
     m_zoom = zoom;

src/glwidget.h

@@ -49,6 +49,7 @@ class GLWidget : public QQuickWidget, public Controller, protected QOpenGLFuncti
 {
     Q_OBJECT
     Q_PROPERTY(QRect rect READ rect NOTIFY rectChanged)
+    Q_PROPERTY(int grid READ grid NOTIFY gridChanged)
     Q_PROPERTY(float zoom READ zoom NOTIFY zoomChanged)
     Q_PROPERTY(QPoint offset READ offset NOTIFY offsetChanged)
 
@@ -81,13 +82,15 @@ class GLWidget : public QQuickWidget, public Controller, protected QOpenGLFuncti
     QObject* videoWidget() { return this; }
     Filter* glslManager() const { return m_glslManager; }
     QRect rect() const { return m_rect; }
+    int grid() const { return m_grid; }
     float zoom() const { return m_zoom * MLT.profile().width() / m_rect.width(); }
     QPoint offset() const;
     QImage image() const;
     void requestImage() const;
 
 public slots:
     void onFrameDisplayed(const SharedFrame& frame);
+    void setGrid(int grid);
     void setZoom(float zoom);
     void setOffsetX(int x);
     void setOffsetY(int y);
@@ -103,12 +106,14 @@ public slots:
     void paused();
     void playing();
     void rectChanged();
+    void gridChanged();
     void zoomChanged();
     void offsetChanged();
     void imageReady();
 
 private:
     QRect m_rect;
+    int m_grid;
     GLuint m_texture[3];
     QOpenGLShaderProgram* m_shader;
     QPoint m_dragStart;

src/player.cpp

@@ -232,6 +232,34 @@ Player::Player(QWidget *parent)
     m_zoomButton->setCheckable(true);
     m_zoomButton->setToolTip(tr("Toggle zoom"));
     toolbar->addWidget(m_zoomButton);
+
+    // Add grid display button to toolbar.
+    m_gridButton = new QToolButton;
+    QMenu* gridMenu = new QMenu(this);
+    m_gridActionGroup = new QActionGroup(this);
+    QAction* action = nullptr;
+    action = gridMenu->addAction(tr("2x2 Grid"), this, SLOT(grid2()));
+    action->setCheckable(true);
+    m_gridDefaultAction = action;
+    m_gridActionGroup->addAction(action);
+    action = gridMenu->addAction(tr("3x3 Grid"), this, SLOT(grid3()));
+    action->setCheckable(true);
+    m_gridActionGroup->addAction(action);
+    action = gridMenu->addAction(tr("4x4 Grid"), this, SLOT(grid4()));
+    action->setCheckable(true);
+    m_gridActionGroup->addAction(action);
+    action = gridMenu->addAction(tr("16x16 Grid"), this, SLOT(grid16()));
+    action->setCheckable(true);
+    m_gridActionGroup->addAction(action);
+    connect(m_gridButton, SIGNAL(toggled(bool)), SLOT(toggleGrid(bool)));
+    m_gridButton->setMenu(gridMenu);
+    m_gridButton->setIcon(QIcon::fromTheme("view-grid", QIcon(":/icons/oxygen/32x32/actions/view-grid")));
+    m_gridButton->setPopupMode(QToolButton::MenuButtonPopup);
+    m_gridButton->setCheckable(true);
+    m_gridButton->setToolTip(tr("Toggle grid display on the player"));
+    toolbar->addWidget(m_gridButton);
+
+    // Add volume control to toolbar.
     toolbar->addAction(actionVolume);
     m_volumeWidget = toolbar->widgetForAction(actionVolume);
 
@@ -255,6 +283,7 @@ Player::Player(QWidget *parent)
     connect(m_positionSpinner, SIGNAL(valueChanged(int)), this, SLOT(seek(int)));
     connect(m_positionSpinner, SIGNAL(editingFinished()), this, SLOT(setFocus()));
     connect(this, SIGNAL(endOfStream()), this, SLOT(pause()));
+    connect(this, SIGNAL(gridChanged(int)), MLT.videoWidget(), SLOT(setGrid(int)));
     connect(this, SIGNAL(zoomChanged(float)), MLT.videoWidget(), SLOT(setZoom(float)));
     connect(m_horizontalScroll, SIGNAL(valueChanged(int)), MLT.videoWidget(), SLOT(setOffsetX(int)));
     connect(m_verticalScroll, SIGNAL(valueChanged(int)), MLT.videoWidget(), SLOT(setOffsetY(int)));
@@ -970,3 +999,44 @@ void Player::toggleZoom(bool checked)
     else if (m_zoomToggleFactor == 2.0f)
         zoomIn();
 }
+
+void Player::grid2()
+{
+    m_gridButton->setChecked(true);
+    m_gridDefaultAction = m_gridActionGroup->actions()[0];
+    emit gridChanged(2);
+}
+
+void Player::grid3()
+{
+    m_gridButton->setChecked(true);
+    m_gridDefaultAction = m_gridActionGroup->actions()[1];
+    emit gridChanged(3);
+}
+
+void Player::grid4()
+{
+    m_gridButton->setChecked(true);
+    m_gridDefaultAction = m_gridActionGroup->actions()[2];
+    emit gridChanged(4);
+}
+
+void Player::grid16()
+{
+    m_gridButton->setChecked(true);
+    m_gridDefaultAction = m_gridActionGroup->actions()[3];
+    emit gridChanged(16);
+}
+
+void Player::toggleGrid(bool checked)
+{
+    QAction* action = m_gridActionGroup->checkedAction();
+    if(!checked) {
+        if(action)
+            action->setChecked(false);
+        emit gridChanged(0);
+    } else {
+        if(!action)
+            m_gridDefaultAction->trigger();
+    }
+}

src/player.h

@@ -31,6 +31,7 @@ class TimeSpinBox;
 class QFrame;
 class QSlider;
 class QAction;
+class QActionGroup;
 class QScrollBar;
 class QToolButton;
 class QTabBar;
@@ -79,6 +80,7 @@ class Player : public QWidget
     void nextSought(int currentPosition);
     void nextSought();
     void zoomChanged(float zoom);
+    void gridChanged(int grid);
     void scrolledHorizontally(int x);
     void scrolledVertically(int y);
     void tabIndexChanged(int index);
@@ -151,6 +153,9 @@ public slots:
     QAction* m_zoomOutAction25;
     QAction* m_zoomOutAction10;
     QAction* m_zoomInAction;
+    QToolButton* m_gridButton;
+    QActionGroup* m_gridActionGroup;
+    QAction* m_gridDefaultAction;
     float m_zoomToggleFactor;
     QTabBar* m_tabs;
     bool m_pauseAfterOpen;
@@ -180,6 +185,11 @@ private slots:
     void zoomOut10();
     void zoomIn();
     void toggleZoom(bool checked);
+    void grid2();
+    void grid3();
+    void grid4();
+    void grid16();
+    void toggleGrid(bool checked);
     void onFadeOutFinished();
 };
 

src/qml/filters/size_position/SizePositionVUI.qml

@@ -1,6 +1,5 @@
 /*
  * Copyright (c) 2014-2018 Meltytech, LLC
- * Author: Dan Dennedy <dan@dennedy.org>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -19,29 +18,19 @@
 import QtQuick 2.1
 import Shotcut.Controls 1.0
 
-Flickable {
+VuiBase {
     property string rectProperty
     property string fillProperty
     property string distortProperty
     property string halignProperty
     property string valignProperty
-
-    width: 400
-    height: 200
-    interactive: false
-    clip: true
     property real zoom: (video.zoom > 0)? video.zoom : 1.0
     property rect filterRect
     property bool blockUpdate: false
     property string startValue: '_shotcut:startValue'
     property string middleValue: '_shotcut:middleValue'
     property string endValue:  '_shotcut:endValue'
 
-    contentWidth: video.rect.width * zoom
-    contentHeight: video.rect.height * zoom
-    contentX: video.offset.x
-    contentY: video.offset.y
-
     function getAspectRatio() {
         return (filter.get(fillProperty) === '1' && filter.get(distortProperty) === '0')? producer.sampleAspectRatio : 0.0
     }
@@ -105,26 +94,34 @@ Flickable {
         blockUpdate = false
     }
 
-    DropArea { anchors.fill: parent }
-
-    Item {
-        id: videoItem
-        x: video.rect.x
-        y: video.rect.y
-        width: video.rect.width
-        height: video.rect.height
-        scale: zoom
-
-        RectangleControl {
-            id: rectangle
-            widthScale: video.rect.width / profile.width
-            heightScale: video.rect.height / profile.height
-            aspectRatio: getAspectRatio()
-            handleSize: Math.max(Math.round(8 / zoom), 4)
-            borderSize: Math.max(Math.round(1.33 / zoom), 1)
-            onWidthScaleChanged: setHandles(filterRect)
-            onHeightScaleChanged: setHandles(filterRect)
-            onRectChanged: setFilter(getPosition())
+    Flickable {
+        anchors.fill: parent
+        interactive: false
+        clip: true
+        contentWidth: video.rect.width * zoom
+        contentHeight: video.rect.height * zoom
+        contentX: video.offset.x
+        contentY: video.offset.y
+
+        Item {
+            id: videoItem
+            x: video.rect.x
+            y: video.rect.y
+            width: video.rect.width
+            height: video.rect.height
+            scale: zoom
+
+            RectangleControl {
+                id: rectangle
+                widthScale: video.rect.width / profile.width
+                heightScale: video.rect.height / profile.height
+                aspectRatio: getAspectRatio()
+                handleSize: Math.max(Math.round(8 / zoom), 4)
+                borderSize: Math.max(Math.round(1.33 / zoom), 1)
+                onWidthScaleChanged: setHandles(filterRect)
+                onHeightScaleChanged: setHandles(filterRect)
+                onRectChanged: setFilter(getPosition())
+            }
         }
     }