add HowToConnectDialog for guiding wireless device connections

src/howtoconnectdialog.cpp

@@ -0,0 +1,114 @@
+#include "howtoconnectdialog.h"
+
+HowToConnectDialog::HowToConnectDialog(QWidget *parent) : QDialog{parent}
+{
+    QVBoxLayout *mainLayout = new QVBoxLayout(this);
+    mainLayout->setContentsMargins(0, 20, 0, 0);
+    mainLayout->setSpacing(0);
+
+    auto *contentLayout = new QVBoxLayout();
+    m_loadingWidget = new ZLoadingWidget(false, this);
+    m_loadingWidget->setupContentWidget(contentLayout);
+    mainLayout->addWidget(m_loadingWidget);
+
+    contentLayout->setContentsMargins(16, 16, 16, 16);
+    contentLayout->setSpacing(12);
+
+    m_stackedWidget = new QStackedWidget(this);
+    m_stackedWidget->addWidget(createPage("Connect your device",
+                                          ":resources/connect.png",
+                                          QSize(200, 200))); // first page
+    m_stackedWidget->addWidget(createPage("Accept the pairing dialog",
+                                          ":/resources/trust.png")); // second
+    m_stackedWidget->addWidget(
+        createPage("You can now unplug it iDescriptor will connect to it "
+                   "automatically (iOS 17 or later is required)",
+                   ":/resources/ios-version.png")); // third
+    contentLayout->addWidget(m_stackedWidget, 1);
+
+    auto *navLayout = new QHBoxLayout();
+    navLayout->setContentsMargins(0, 0, 0, 0);
+    navLayout->setSpacing(10);
+    navLayout->addStretch();
+
+    m_prevButton = new ZIconWidget(
+        QIcon(":/resources/icons/MaterialSymbolsArrowLeftAlt.png"), "Previous");
+
+    m_nextButton = new ZIconWidget(
+        QIcon(":/resources/icons/MaterialSymbolsArrowRightAlt.png"), "Next");
+
+    m_prevButton->setFixedWidth(48);
+    m_nextButton->setFixedWidth(48);
+
+    navLayout->addWidget(m_prevButton);
+    navLayout->addWidget(m_nextButton);
+    navLayout->addStretch();
+    contentLayout->addLayout(navLayout);
+
+    connect(m_prevButton, &QPushButton::clicked, this, [this]() {
+        const int current = m_stackedWidget->currentIndex();
+        if (current > 0) {
+            m_stackedWidget->setCurrentIndex(current - 1);
+        }
+        updateNavigationButtons();
+    });
+
+    connect(m_nextButton, &QPushButton::clicked, this, [this]() {
+        const int current = m_stackedWidget->currentIndex();
+        if (current < m_stackedWidget->count() - 1) {
+            m_stackedWidget->setCurrentIndex(current + 1);
+        }
+        updateNavigationButtons();
+    });
+
+    connect(m_stackedWidget, &QStackedWidget::currentChanged, this,
+            [this](int) { updateNavigationButtons(); });
+
+    updateNavigationButtons();
+
+    QTimer::singleShot(500, this, &HowToConnectDialog::init);
+}
+
+void HowToConnectDialog::init() { m_loadingWidget->stop(); }
+
+QWidget *HowToConnectDialog::createPage(const QString &text,
+                                        const QString &imagePath,
+                                        const QSize &imageSize)
+{
+    auto *page = new QWidget(this);
+    page->setMaximumSize(500, 500);
+    auto *layout = new QVBoxLayout(page);
+    layout->setContentsMargins(0, 0, 0, 0);
+    layout->setSpacing(10);
+
+    auto *label = new QLabel(text, page);
+    label->setAlignment(Qt::AlignCenter);
+    label->setWordWrap(true);
+    QFont font = label->font();
+    font.setPointSize(16);
+    font.setBold(true);
+    label->setFont(font);
+
+    auto *imageLabel = new ResponsiveQLabel(page);
+    imageLabel->setPixmap(QPixmap(imagePath));
+    imageLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
+    // imageLabel->setMinimumSize(400, 200);
+    imageLabel->setMinimumSize(imageSize);
+    // imageLabel->setMaximumSize(600, 200);
+    imageLabel->setScaledContents(true);
+
+    layout->addStretch();
+    layout->addWidget(label);
+    layout->addWidget(imageLabel, 1, Qt::AlignHCenter);
+    layout->addStretch();
+
+    return page;
+}
+
+void HowToConnectDialog::updateNavigationButtons()
+{
+    const int index = m_stackedWidget->currentIndex();
+    const int last = m_stackedWidget->count() - 1;
+    m_prevButton->setEnabled(index > 0);
+    m_nextButton->setEnabled(index < last);
+}

src/howtoconnectdialog.h

@@ -0,0 +1,39 @@
+#ifndef HOWTOCONNECTDIALOG_H
+#define HOWTOCONNECTDIALOG_H
+
+#include "iDescriptor-ui.h"
+#include "responsiveqlabel.h"
+#include "zloadingwidget.h"
+#include <QDialog>
+#include <QHBoxLayout>
+#include <QLabel>
+#include <QPushButton>
+#include <QStackedWidget>
+#include <QString>
+#include <QTimer>
+#include <QVBoxLayout>
+#include <QWidget>
+
+class QPushButton;
+class QStackedWidget;
+class QWidget;
+
+class HowToConnectDialog : public QDialog
+{
+    Q_OBJECT
+
+public:
+    explicit HowToConnectDialog(QWidget *parent = nullptr);
+
+private:
+    void init();
+    QWidget *createPage(const QString &text, const QString &imagePath,
+                        const QSize &imageSize = QSize(400, 200));
+    void updateNavigationButtons();
+    ZLoadingWidget *m_loadingWidget{nullptr};
+    QStackedWidget *m_stackedWidget{nullptr};
+    ZIconWidget *m_prevButton{nullptr};
+    ZIconWidget *m_nextButton{nullptr};
+};
+
+#endif // HOWTOCONNECTDIALOG_H

src/welcomewidget.cpp

@@ -64,9 +64,23 @@ void WelcomeWidget::setupUI()
     m_imageLabel->setAlignment(Qt::AlignCenter);
 
     imageAndWirelessDevicesLayout->addWidget(m_imageLabel, 0, Qt::AlignHCenter);
+    QVBoxLayout *explorerWithIntructionLayout = new QVBoxLayout();
     NetworkDevicesToConnectWidget *networkDevicesWidget =
         new NetworkDevicesToConnectWidget();
-    imageAndWirelessDevicesLayout->addWidget(networkDevicesWidget);
+    m_howToConnectLabel = createStyledLabel("How to connect a wireless device?",
+                                            12, true, COLOR_HYPERLINK);
+    m_howToConnectLabel->setWordWrap(false);
+    QPalette howToConnectLabelPalette = m_howToConnectLabel->palette();
+    howToConnectLabelPalette.setColor(QPalette::WindowText, COLOR_HYPERLINK);
+    m_howToConnectLabel->setPalette(howToConnectLabelPalette);
+    m_howToConnectLabel->setCursor(Qt::PointingHandCursor);
+
+    connect(m_howToConnectLabel, &ZLabel::clicked, this,
+            &WelcomeWidget::showHowToConnectDialog);
+    explorerWithIntructionLayout->addWidget(networkDevicesWidget);
+    explorerWithIntructionLayout->addWidget(m_howToConnectLabel, 0,
+                                            Qt::AlignCenter);
+    imageAndWirelessDevicesLayout->addLayout(explorerWithIntructionLayout);
 
     m_mainLayout->addLayout(imageAndWirelessDevicesLayout);
     m_mainLayout->addSpacing(10);
@@ -135,3 +149,8 @@ ZLabel *WelcomeWidget::createStyledLabel(const QString &text, int fontSize,
 
     return label;
 }
+
+void WelcomeWidget::showHowToConnectDialog()
+{
+    HowToConnectDialog(this).exec();
+}

src/welcomewidget.h

@@ -20,6 +20,7 @@
 #ifndef WELCOMEWIDGET_H
 #define WELCOMEWIDGET_H
 
+#include "howtoconnectdialog.h"
 #include "iDescriptor-ui.h"
 #include <QHBoxLayout>
 #include <QLabel>
@@ -45,6 +46,9 @@ private:
     QLabel *m_imageLabel;
     ZLabel *m_instructionLabel;
     ZLabel *m_githubLabel;
+    ZLabel *m_howToConnectLabel;
+
+    void showHowToConnectDialog();
 };
 
 #endif // WELCOMEWIDGET_H