Welcome screen updates

Improve and update welcome screen:
- Reducing height and slicing page indicator away from tutorial images.
- Implement page indicator as a widget, interactive for page switching.
- Animate page in/out opacity when switching pages.
- Some refactoring.

Task-number: QT3DS-1853
Change-Id: Ide8887f80492ec1bfaab38aeedb0ba9df5bcb9c0
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>
Reviewed-by: Kaj Grönholm <kaj.gronholm@qt.io>

31 files changed, 323 insertions, 128 deletions

diff --git a/src/Authoring/Studio/Application/StudioTutorialPageIndicator.cpp b/src/Authoring/Studio/Application/StudioTutorialPageIndicator.cpp
new file mode 100644
index 00000000..3acce780
--- /dev/null
+++ b/src/Authoring/Studio/Application/StudioTutorialPageIndicator.cpp
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:GPL-EXCEPT$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "StudioTutorialPageIndicator.h"
+#include <QtGui/qpainter.h>
+#include <QtCore/qdebug.h>
+
+StudioTutorialPageIndicator::StudioTutorialPageIndicator(QWidget *parent)
+    : QWidget(parent)
+{
+    m_pixmapActive = QPixmap(":/images/Tutorial/dot_active.png");
+    m_pixmapInactive = QPixmap(":/images/Tutorial/dot_inactive.png");
+}
+
+void StudioTutorialPageIndicator::paintEvent(QPaintEvent *event)
+{
+    Q_UNUSED(event)
+    QPainter painter(this);
+    for (int i = 0; i < m_pageCount; i++) {
+        const QPixmap pixmap = (i == m_currentIndex) ? m_pixmapActive : m_pixmapInactive;
+        painter.drawPixmap(i * (m_dotSize + m_dotMargin), height() - m_dotSize, pixmap);
+    }
+}
+
+void StudioTutorialPageIndicator::mousePressEvent(QMouseEvent *event)
+{
+    int posX = event->pos().x();
+    int index = posX / (m_dotSize + m_dotMargin);
+    emit indexChanged(index);
+}
+
+void StudioTutorialPageIndicator::setCount(int count)
+{
+    m_pageCount = count;
+    int dotSize = m_pixmapActive.width();
+    int margin = 4;
+    setFixedSize(m_pageCount * (dotSize + margin), 80);
+}
+
+void StudioTutorialPageIndicator::setCurrentIndex(int index)
+{
+    m_currentIndex = index;
+    update();
+}
diff --git a/src/Authoring/Studio/Application/StudioTutorialPageIndicator.h b/src/Authoring/Studio/Application/StudioTutorialPageIndicator.h
new file mode 100644
index 00000000..6f47ecd0
--- /dev/null
+++ b/src/Authoring/Studio/Application/StudioTutorialPageIndicator.h
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:GPL-EXCEPT$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef STUDIOTUTORIALPAGEINDICATOR_H
+#define STUDIOTUTORIALPAGEINDICATOR_H
+
+#include <QtWidgets/qwidget.h>
+#include <QtGui/qevent.h>
+
+class StudioTutorialPageIndicator : public QWidget
+{
+    Q_OBJECT
+public:
+    explicit StudioTutorialPageIndicator(QWidget *parent = nullptr);
+
+    void setCount(int count);
+    void setCurrentIndex(int index);
+
+protected:
+    void paintEvent(QPaintEvent *event) override;
+    void mousePressEvent(QMouseEvent *event) override;
+
+signals:
+    void indexChanged(int index);
+
+private:
+    int m_pageCount = 0;
+    int m_currentIndex = 0;
+    int m_dotSize = 26;
+    int m_dotMargin = 4;
+    QPixmap m_pixmapActive;
+    QPixmap m_pixmapInactive;
+};
+
+#endif // STUDIOTUTORIALPAGEINDICATOR_H
diff --git a/src/Authoring/Studio/Application/StudioTutorialWidget.cpp b/src/Authoring/Studio/Application/StudioTutorialWidget.cpp
index b5b662e5..c6240531 100644
--- a/src/Authoring/Studio/Application/StudioTutorialWidget.cpp
+++ b/src/Authoring/Studio/Application/StudioTutorialWidget.cpp
@@ -29,6 +29,7 @@
 #include "ui_StudioTutorialWidget.h"
 #include "StudioUtils.h"
 #include <QtWidgets/qdesktopwidget.h>
+#include <QtGui/qpainter.h>
 
 StudioTutorialWidget::StudioTutorialWidget(QWidget *parent, bool goToFileDialog,
                                            bool showProjectButtons) :
@@ -46,6 +47,8 @@ StudioTutorialWidget::StudioTutorialWidget(QWidget *parent, bool goToFileDialog,
             &StudioTutorialWidget::handleBack);
     connect(m_ui->studioTutorialForward, &QPushButton::clicked, this,
             &StudioTutorialWidget::handleFwd);
+    connect(m_ui->pageIndicator, &StudioTutorialPageIndicator::indexChanged, this,
+            &StudioTutorialWidget::handleIndexChange);
     connect(m_ui->studioTutorialShowAgain, &QCheckBox::stateChanged, this,
             &StudioTutorialWidget::handleDoNotShowAgainChange);
     connect(m_ui->studioTutorialNew, &QPushButton::clicked, this,
@@ -54,6 +57,11 @@ StudioTutorialWidget::StudioTutorialWidget(QWidget *parent, bool goToFileDialog,
             &StudioTutorialWidget::handleOpenSample);
 
     OnInitDialog(goToFileDialog);
+
+    if (m_showProjectButtons)
+        m_ui->studioTutorialNew->setText(tr("Create New"));
+    else
+        m_ui->studioTutorialNew->setText(tr("OK"));
 }
 
 StudioTutorialWidget::~StudioTutorialWidget()
@@ -70,43 +78,28 @@ void StudioTutorialWidget::OnInitDialog(bool goToFileDialog)
     // populate welcome screen images
     getImageList();
     m_imgIter = m_welcomeImages->begin();
+    m_imgIterPrev = m_imgIter;
+    m_pageOutPixmap = getScaledPic(m_imgIterPrev);
+    m_pageInPixmap = getScaledPic(m_imgIter);
+    m_backgroundPixmap = QPixmap(":/images/Tutorial/background.png");
 
-    // do we go straight to last page with file dialog buttons?
-    int page = goToFileDialog ? m_welcomeImages->size() - 1 : 0;
-    // based on first PNG, get the scale that we need to fit welcome
+    // based on background PNG, get the scale that we need to fit welcome
     // screen and buttons comfortably on display
-    m_displayScale = getDisplayScalingForImage(m_imgIter);
-    QSize picSize = getPicSize(m_imgIter);
+    m_displayScale = getDisplayScalingForImage(m_backgroundPixmap);
+    QSize backgroundSize = m_backgroundPixmap.size();
     QRect screenRect = QApplication::desktop()->availableGeometry(
                 QApplication::desktop()->screenNumber(this));
     QSize windowSize = screenRect.size();
-    m_ui->verticalWidget->setFixedSize(picSize);
-
-    move(screenRect.x() + (windowSize.width() - picSize.width()) / 2,
-         screenRect.y() + (windowSize.height() - picSize.height()) / 2);
-
-    if (!m_welcomeImages->isEmpty()) {
-        for (int i = 0; i < page && m_imgIter != m_welcomeImages->end(); ++i)
-            m_imgIter++;
-
-        m_ui->studioTutorialShowAgain->setVisible(false);
-        m_ui->checkBoxLabel->setVisible(false);
-        if (*m_imgIter == m_welcomeImages->last() || m_imgIter == m_welcomeImages->end()) {
-            if (m_imgIter == m_welcomeImages->end())
-                m_imgIter--;
-            m_ui->studioTutorialForward->setVisible(false);
-            m_ui->studioTutorialOpen->setVisible(true);
-            m_ui->studioTutorialNew->setVisible(true);
-        } else {
-            if (m_imgIter == m_welcomeImages->begin()) {
-                m_ui->studioTutorialBack->setVisible(false);
-                m_ui->studioTutorialShowAgain->setVisible(true);
-                m_ui->checkBoxLabel->setVisible(true);
-            }
-            m_ui->studioTutorialOpen->setVisible(false);
-            m_ui->studioTutorialNew->setVisible(false);
-        }
-    }
+
+    m_ui->verticalWidget->setFixedSize(backgroundSize);
+
+    move(screenRect.x() + (windowSize.width() - backgroundSize.width()) / 2,
+         screenRect.y() + (windowSize.height() - backgroundSize.height()) / 2);
+
+    // do we go straight to last page with file dialog buttons?
+    int initPage = goToFileDialog ? m_welcomeImages->size() - 1 : 0;
+    m_imgIter = m_welcomeImages->begin() + initPage;
+    updateButtons();
 
     QSettings settings;
     m_ui->studioTutorialShowAgain->setChecked(!settings.value("showWelcomeScreen").toBool());
@@ -117,60 +110,81 @@ void StudioTutorialWidget::OnInitDialog(bool goToFileDialog)
 void StudioTutorialWidget::paintEvent(QPaintEvent *event)
 {
     Q_UNUSED(event)
-    if (m_palette)
-        return;
 
-    m_palette = new QPalette;
-    QPixmap pic = getScaledPic(m_imgIter);
-    pic.setDevicePixelRatio(devicePixelRatio());
-    m_palette->setBrush(QPalette::Window, pic);
-    setPalette(*m_palette);
-    resize(pic.size());
-    setFixedSize(size());
-}
+    QPainter painter(this);
 
-void StudioTutorialWidget::handleFwd()
-{
-    if (*m_imgIter != m_welcomeImages->last()) {
-        QPixmap pic = getNextScaledPic();
-        m_palette->setBrush(QPalette::Window, pic);
+    if (!m_palette) {
+        m_palette = new QPalette;
+        m_palette->setBrush(QPalette::Window, m_backgroundPixmap);
         setPalette(*m_palette);
+        resize(m_backgroundPixmap.size());
+        setFixedSize(size());
+    }
+
+    // Make tutorial images to scale to full background width, vertically centered,
+    // while keeping correct aspect ratio
+    qreal aspectRatio = (qreal) m_pageInPixmap.height() / m_pageInPixmap.width();
+    int rectHeight = size().width() * aspectRatio;
+    QRect rect(0, (size().height() / 2) - (rectHeight / 2),
+               size().width(), rectHeight);
+
+    qreal pageOutOpacity = 1.0 - m_pageInOpacity;
 
-        m_ui->studioTutorialBack->setVisible(true);
-        m_ui->studioTutorialShowAgain->setVisible(false);
-        m_ui->checkBoxLabel->setVisible(false);
+    if (pageOutOpacity > 0.0) {
+        painter.setOpacity(pageOutOpacity);
+        painter.drawPixmap(rect, m_pageOutPixmap);
+    }
+    if (m_pageInOpacity > 0.0) {
+        painter.setOpacity(m_pageInOpacity);
+        painter.drawPixmap(rect, m_pageInPixmap);
     }
 
-    if (*m_imgIter == m_welcomeImages->last()) {
-        m_ui->studioTutorialForward->setVisible(false);
-        m_ui->studioTutorialOpen->setVisible(m_showProjectButtons);
-        if (m_showProjectButtons)
-            m_ui->studioTutorialNew->setText(tr("Create New"));
-        else
-            m_ui->studioTutorialNew->setText(tr("OK"));
-        m_ui->studioTutorialNew->setVisible(true);
+    if (m_pageInOpacity < 1.0) {
+        // Page switching animation still going on
+        qreal opacityAnimationStep = qreal(m_opacityTime.restart()) / 300.0;
+        m_pageInOpacity += opacityAnimationStep;
+        m_pageInOpacity = qMin(m_pageInOpacity, 1.0);
+        update();
     }
 }
 
-void StudioTutorialWidget::handleBack()
+void StudioTutorialWidget::animateInOut()
 {
-    if (*m_imgIter != m_welcomeImages->first()) {
-        QPixmap pic = getPrevScaledPic();
-        m_palette->setBrush(QPalette::Window, pic);
-        setPalette(*m_palette);
+    m_pageOutPixmap = getScaledPic(m_imgIterPrev);
+    m_pageInPixmap = getScaledPic(m_imgIter);
+    m_pageInOpacity = 0.0;
+    m_opacityTime.start();
+    update();
+}
 
-        m_ui->studioTutorialForward->setVisible(true);
-        m_ui->studioTutorialShowAgain->setVisible(false);
-        m_ui->checkBoxLabel->setVisible(false);
+void StudioTutorialWidget::handleFwd()
+{
+    if (*m_imgIter != m_welcomeImages->last()) {
+        m_imgIterPrev = m_imgIter;
+        m_imgIter++;
+        updateButtons();
+        animateInOut();
+    }
+}
 
-        m_ui->studioTutorialOpen->setVisible(false);
-        m_ui->studioTutorialNew->setVisible(false);
+void StudioTutorialWidget::handleBack()
+{
+    if (*m_imgIter != m_welcomeImages->first()) {
+        m_imgIterPrev = m_imgIter;
+        m_imgIter--;
+        updateButtons();
+        animateInOut();
     }
+}
 
-    if (*m_imgIter == m_welcomeImages->first()) {
-        m_ui->studioTutorialBack->setVisible(false);
-        m_ui->studioTutorialShowAgain->setVisible(true);
-        m_ui->checkBoxLabel->setVisible(true);
+void StudioTutorialWidget::handleIndexChange(int index)
+{
+    index = qBound(0, index, m_welcomeImages->size() - 1);
+    if (index != page()) {
+        m_imgIterPrev = m_imgIter;
+        m_imgIter = m_welcomeImages->begin() + index;
+        updateButtons();
+        animateInOut();
     }
 }
 
@@ -203,6 +217,8 @@ void StudioTutorialWidget::getImageList()
 
     while (it->hasNext())
         m_welcomeImages->append(it->next());
+
+    m_ui->pageIndicator->setCount(m_welcomeImages->size());
 }
 
 int StudioTutorialWidget::page() const
@@ -213,23 +229,13 @@ int StudioTutorialWidget::page() const
     return i;
 }
 
-QPixmap StudioTutorialWidget::getNextScaledPic()
-{
-    return getScaledPic(++m_imgIter);
-}
-
-QPixmap StudioTutorialWidget::getPrevScaledPic()
-{
-    return getScaledPic(--m_imgIter);
-}
-
 QPixmap StudioTutorialWidget::getScaledPic(const QList<QString>::iterator &iter)
 {
     QPixmap picOrig = QPixmap(*iter);
     QPixmap pic = picOrig;
     if (m_displayScale < 1.0) {
         // Limit to the maximum size of @2x images
-        pic = picOrig.scaledToHeight(qMin(1800.0, m_displayScale * picOrig.height()),
+        pic = picOrig.scaledToHeight(qMin(1200.0, m_displayScale * picOrig.height()),
                                      Qt::SmoothTransformation);
     }
 
@@ -237,15 +243,8 @@ QPixmap StudioTutorialWidget::getScaledPic(const QList<QString>::iterator &iter)
     return pic;
 }
 
-QSize StudioTutorialWidget::getPicSize(const QList<QString>::iterator &iter)
-{
-    return getScaledPic(iter).size();
-}
-
-qreal StudioTutorialWidget::getDisplayScalingForImage(const QList<QString>::iterator &iter)
+qreal StudioTutorialWidget::getDisplayScalingForImage(const QPixmap &picOrig)
 {
-    QPixmap picOrig = QPixmap(*iter);
-
     // Note that high DPI scaling has an effect on the display
     // resolution returned by QApplication::desktop()->availableGeometry().
     // DPI scaling factor is integer and taken from the primary screen.
@@ -267,3 +266,18 @@ qreal StudioTutorialWidget::getDisplayScalingForImage(const QList<QString>::iter
         return 1.0;
     }
 }
+
+void StudioTutorialWidget::updateButtons()
+{
+    bool isFirst = (*m_imgIter == m_welcomeImages->first());
+    bool isLast = (*m_imgIter == m_welcomeImages->last());
+
+    m_ui->studioTutorialBack->setVisible(!isFirst);
+    m_ui->studioTutorialForward->setVisible(!isLast);
+    m_ui->studioTutorialOpen->setVisible(isLast && m_showProjectButtons);
+    m_ui->studioTutorialNew->setVisible(isLast);
+    m_ui->studioTutorialShowAgain->setVisible(isFirst);
+    m_ui->checkBoxLabel->setVisible(isFirst);
+
+    m_ui->pageIndicator->setCurrentIndex(page());
+}
diff --git a/src/Authoring/Studio/Application/StudioTutorialWidget.h b/src/Authoring/Studio/Application/StudioTutorialWidget.h
index bb3c33bd..e55f5efb 100644
--- a/src/Authoring/Studio/Application/StudioTutorialWidget.h
+++ b/src/Authoring/Studio/Application/StudioTutorialWidget.h
@@ -32,6 +32,7 @@
 #include <QtCore/qlist.h>
 #include <QtCore/qstring.h>
 #include <QtCore/qsettings.h>
+#include <QtCore/qdatetime.h>
 #include <QtGui/qpixmap.h>
 #include <QtGui/qpalette.h>
 #include <QtWidgets/qdialog.h>
@@ -68,6 +69,7 @@ protected:
 public:
     void handleFwd();
     void handleBack();
+    void handleIndexChange(int index);
     void handleDoNotShowAgainChange(int state);
     void handleOpenSample();
     void handleCreateNew();
@@ -78,20 +80,25 @@ private:
 
     QList<QString> *m_welcomeImages;
     QList<QString>::iterator m_imgIter;
+    QList<QString>::iterator m_imgIterPrev;
 
     QPalette *m_palette;
+    QPixmap m_pageInPixmap;
+    QPixmap m_pageOutPixmap;
+    QPixmap m_backgroundPixmap;
 
     qreal m_displayScale;
+    qreal m_pageInOpacity = 0.0;
+    QTime m_opacityTime;
 
     bool m_showProjectButtons;
 
     void getImageList();
+    void updateButtons();
+    void animateInOut();
 
     QPixmap getScaledPic(const QList<QString>::iterator &iter);
-    QPixmap getPrevScaledPic();
-    QPixmap getNextScaledPic();
-    qreal getDisplayScalingForImage(const QList<QString>::iterator &iter);
-    QSize getPicSize(const QList<QString>::iterator &iter);
+    qreal getDisplayScalingForImage(const QPixmap &picOrig);
 };
 
 #endif // STUDIOTUTORIALWIDGET_H
diff --git a/src/Authoring/Studio/Application/StudioTutorialWidget.ui b/src/Authoring/Studio/Application/StudioTutorialWidget.ui
index 2ec4fe7d..f7e9dd64 100644
--- a/src/Authoring/Studio/Application/StudioTutorialWidget.ui
+++ b/src/Authoring/Studio/Application/StudioTutorialWidget.ui
@@ -245,47 +245,76 @@
           <enum>QLayout::SetMaximumSize</enum>
          </property>
          <item>
+          <widget class="QWidget" name="leftSpacer">
+           <property name="minimumSize">
+            <size>
+             <width>160</width>
+             <height>80</height>
+            </size>
+           </property>
+          </widget>
+         </item>
+         <item>
           <spacer name="horizontalSpacer">
            <property name="orientation">
             <enum>Qt::Horizontal</enum>
            </property>
-           <property name="sizeHint" stdset="0">
+          </spacer>
+         </item>
+         <item>
+          <widget class="StudioTutorialPageIndicator" name="pageIndicator" native="true">
+           <property name="minimumSize">
             <size>
-             <width>40</width>
-             <height>20</height>
+             <width>200</width>
+             <height>40</height>
             </size>
            </property>
+          </widget>
+         </item>
+         <item>
+          <spacer name="horizontalSpacer">
+           <property name="orientation">
+            <enum>Qt::Horizontal</enum>
+           </property>
           </spacer>
          </item>
          <item>
-          <layout class="QVBoxLayout" name="buttons">
-           <item>
-            <widget class="QPushButton" name="studioTutorialOpen">
-             <property name="focusPolicy">
-              <enum>Qt::NoFocus</enum>
-             </property>
-             <property name="accessibleName">
-              <string>studioTutorialOpen</string>
-             </property>
-             <property name="text">
-              <string>Open Sample Project</string>
-             </property>
-            </widget>
-           </item>
-           <item>
-            <widget class="QPushButton" name="studioTutorialNew">
-             <property name="focusPolicy">
-              <enum>Qt::NoFocus</enum>
-             </property>
-             <property name="accessibleName">
-              <string>studioTutorialNew</string>
-             </property>
-             <property name="text">
-              <string>Create New</string>
-             </property>
-            </widget>
-           </item>
-          </layout>
+          <widget class="QWidget" name="buttonsArea" native="true">
+           <property name="minimumSize">
+            <size>
+             <width>160</width>
+             <height>80</height>
+            </size>
+           </property>
+           <layout class="QVBoxLayout" name="buttons">
+            <item>
+             <widget class="QPushButton" name="studioTutorialOpen">
+              <property name="focusPolicy">
+               <enum>Qt::NoFocus</enum>
+              </property>
+              <property name="accessibleName">
+               <string>studioTutorialOpen</string>
+              </property>
+              <property name="text">
+               <string>Open Sample Project</string>
+              </property>
+             </widget>
+            </item>
+            <item>
+             <widget class="QPushButton" name="studioTutorialNew">
+              <property name="focusPolicy">
+               <enum>Qt::NoFocus</enum>
+              </property>
+              <property name="accessibleName">
+               <string>studioTutorialNew</string>
+              </property>
+              <property name="text">
+               <string>Create New</string>
+              </property>
+             </widget>
+            </item>
+           </layout>
+          </widget>
          </item>
         </layout>
        </widget>
@@ -295,6 +324,14 @@
    </item>
   </layout>
  </widget>
+ <customwidgets>
+  <customwidget>
+   <class>StudioTutorialPageIndicator</class>
+   <extends>QWidget</extends>
+   <header>StudioTutorialPageIndicator.h</header>
+   <container>1</container>
+  </customwidget>
+ </customwidgets>
  <resources>
   <include location="../images.qrc"/>
  </resources>
diff --git a/src/Authoring/Studio/Qt3DStudio.pro b/src/Authoring/Studio/Qt3DStudio.pro
index 988757a4..d2cce53b 100644
--- a/src/Authoring/Studio/Qt3DStudio.pro
+++ b/src/Authoring/Studio/Qt3DStudio.pro
@@ -216,7 +216,8 @@ HEADERS += \
     Palettes/Project/EditPresentationIdDlg.h \
     Application/ProjectFile.h \
     Application/PresentationFile.h \
-    Palettes/Project/ChooseImagePropertyDlg.h
+    Palettes/Project/ChooseImagePropertyDlg.h \
+    Application/StudioTutorialPageIndicator.h
 
 FORMS += \
     MainFrm.ui \
@@ -387,7 +388,8 @@ SOURCES += \
     Palettes/Project/EditPresentationIdDlg.cpp \
     Application/ProjectFile.cpp \
     Application/PresentationFile.cpp \
-    Palettes/Project/ChooseImagePropertyDlg.cpp
+    Palettes/Project/ChooseImagePropertyDlg.cpp \
+    Application/StudioTutorialPageIndicator.cpp
 
 RESOURCES += \
     MainFrm.qrc \
diff --git a/src/Authoring/Studio/images.qrc b/src/Authoring/Studio/images.qrc
index f0c9cedd..ef0fc1bd 100644
--- a/src/Authoring/Studio/images.qrc
+++ b/src/Authoring/Studio/images.qrc
@@ -255,6 +255,12 @@
         <file>images/zoom_out@2x.png</file>
         <file>images/zoom_in.png</file>
         <file>images/zoom_in@2x.png</file>
+        <file>images/Tutorial/background.png</file>
+        <file>images/Tutorial/background@2x.png</file>
+        <file>images/Tutorial/dot_active.png</file>
+        <file>images/Tutorial/dot_active@2x.png</file>
+        <file>images/Tutorial/dot_inactive.png</file>
+        <file>images/Tutorial/dot_inactive@2x.png</file>
         <file>images/Tutorial/screens/1x/1.png</file>
         <file>images/Tutorial/screens/1x/2.png</file>
         <file>images/Tutorial/screens/1x/3.png</file>
diff --git a/src/Authoring/Studio/images/Tutorial/background.png b/src/Authoring/Studio/images/Tutorial/background.png
new file mode 100644
index 00000000..374eb982
--- /dev/null
+++ b/src/Authoring/Studio/images/Tutorial/background.png
diff --git a/src/Authoring/Studio/images/Tutorial/background@2x.png b/src/Authoring/Studio/images/Tutorial/background@2x.png
new file mode 100644
index 00000000..d6235212
--- /dev/null
+++ b/src/Authoring/Studio/images/Tutorial/background@2x.png
diff --git a/src/Authoring/Studio/images/Tutorial/dot_active.png b/src/Authoring/Studio/images/Tutorial/dot_active.png
new file mode 100644
index 00000000..009e5f85
--- /dev/null
+++ b/src/Authoring/Studio/images/Tutorial/dot_active.png
diff --git a/src/Authoring/Studio/images/Tutorial/dot_active@2x.png b/src/Authoring/Studio/images/Tutorial/dot_active@2x.png
new file mode 100644
index 00000000..59ab92bb
--- /dev/null
+++ b/src/Authoring/Studio/images/Tutorial/dot_active@2x.png
diff --git a/src/Authoring/Studio/images/Tutorial/dot_inactive.png b/src/Authoring/Studio/images/Tutorial/dot_inactive.png
new file mode 100644
index 00000000..0550db1e
--- /dev/null
+++ b/src/Authoring/Studio/images/Tutorial/dot_inactive.png
diff --git a/src/Authoring/Studio/images/Tutorial/dot_inactive@2x.png b/src/Authoring/Studio/images/Tutorial/dot_inactive@2x.png
new file mode 100644
index 00000000..697d1db0
--- /dev/null
+++ b/src/Authoring/Studio/images/Tutorial/dot_inactive@2x.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/1.png b/src/Authoring/Studio/images/Tutorial/screens/1x/1.png
index f4d0317e..b20c2154 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/1.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/1.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/2.png b/src/Authoring/Studio/images/Tutorial/screens/1x/2.png
index 7453a9d3..d890a8f8 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/2.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/2.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/3.png b/src/Authoring/Studio/images/Tutorial/screens/1x/3.png
index 074a6d1e..41a9ea8a 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/3.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/3.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/4.png b/src/Authoring/Studio/images/Tutorial/screens/1x/4.png
index 0035e68c..fd43b00c 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/4.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/4.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/5.png b/src/Authoring/Studio/images/Tutorial/screens/1x/5.png
index d9c6d78d..8204a1bb 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/5.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/5.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/6.png b/src/Authoring/Studio/images/Tutorial/screens/1x/6.png
index ac3b60a3..8f878f7b 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/6.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/6.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/7.png b/src/Authoring/Studio/images/Tutorial/screens/1x/7.png
index 71c3e815..39aaf6dc 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/7.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/7.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/8.png b/src/Authoring/Studio/images/Tutorial/screens/1x/8.png
index 5a64f101..adfbb798 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/8.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/8.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/1x/9.png b/src/Authoring/Studio/images/Tutorial/screens/1x/9.png
index 7da87667..5a3401f0 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/1x/9.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/1x/9.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/1.png b/src/Authoring/Studio/images/Tutorial/screens/2x/1.png
index f9e58dd3..1cea5bfa 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/1.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/1.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/2.png b/src/Authoring/Studio/images/Tutorial/screens/2x/2.png
index c1486aff..a95f4cfd 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/2.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/2.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/3.png b/src/Authoring/Studio/images/Tutorial/screens/2x/3.png
index 4e704c89..d8d3cf42 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/3.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/3.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/4.png b/src/Authoring/Studio/images/Tutorial/screens/2x/4.png
index 0a155f1c..a27debc9 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/4.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/4.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/5.png b/src/Authoring/Studio/images/Tutorial/screens/2x/5.png
index 62c18ade..1723dad6 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/5.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/5.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/6.png b/src/Authoring/Studio/images/Tutorial/screens/2x/6.png
index 7ab446f2..4a552b84 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/6.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/6.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/7.png b/src/Authoring/Studio/images/Tutorial/screens/2x/7.png
index 6832e234..0efe714d 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/7.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/7.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/8.png b/src/Authoring/Studio/images/Tutorial/screens/2x/8.png
index abe45002..2b97b613 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/8.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/8.png
diff --git a/src/Authoring/Studio/images/Tutorial/screens/2x/9.png b/src/Authoring/Studio/images/Tutorial/screens/2x/9.png
index 2d4e5110..a9b2317f 100644
--- a/src/Authoring/Studio/images/Tutorial/screens/2x/9.png
+++ b/src/Authoring/Studio/images/Tutorial/screens/2x/9.png