From 09cba69b48e22914c5332cc1213b3c391cb8f233 Mon Sep 17 00:00:00 2001
From: z87 <z87@users.noreply.github.com>
Date: Mon, 4 May 2020 10:41:51 +0300
Subject: [PATCH] citra_qt: improve touchscreen mapping UI

---
 dist/qt_themes/qdarkstyle/style.qss           |   5 +
 src/citra_qt/CMakeLists.txt                   |   1 +
 .../configure_touch_from_button.cpp           | 358 ++++++++++++++++--
 .../configure_touch_from_button.h             |  41 +-
 .../configure_touch_from_button.ui            |  88 ++++-
 .../configuration/configure_touch_widget.h    |  61 +++
 6 files changed, 493 insertions(+), 61 deletions(-)
 create mode 100644 src/citra_qt/configuration/configure_touch_widget.h

diff --git a/dist/qt_themes/qdarkstyle/style.qss b/dist/qt_themes/qdarkstyle/style.qss
index 9814b06dd..a2b51c6dd 100644
--- a/dist/qt_themes/qdarkstyle/style.qss
+++ b/dist/qt_themes/qdarkstyle/style.qss
@@ -1236,3 +1236,8 @@ QToolButton:disabled,
 QPlainTextEdit:disabled {
     background-color: #2b2e31;
 }
+
+/* touchscreen mapping widget */
+TouchScreenPreview {
+    qproperty-dotHighlightColor: #3daee9;
+}
diff --git a/src/citra_qt/CMakeLists.txt b/src/citra_qt/CMakeLists.txt
index 1b6243460..eea517bc6 100644
--- a/src/citra_qt/CMakeLists.txt
+++ b/src/citra_qt/CMakeLists.txt
@@ -72,6 +72,7 @@ add_executable(citra-qt
     configuration/configure_touch_from_button.cpp
     configuration/configure_touch_from_button.h
     configuration/configure_touch_from_button.ui
+    configuration/configure_touch_widget.h
     configuration/configure_ui.cpp
     configuration/configure_ui.h
     configuration/configure_ui.ui
diff --git a/src/citra_qt/configuration/configure_touch_from_button.cpp b/src/citra_qt/configuration/configure_touch_from_button.cpp
index add1f1f6d..17e979b54 100644
--- a/src/citra_qt/configuration/configure_touch_from_button.cpp
+++ b/src/citra_qt/configuration/configure_touch_from_button.cpp
@@ -5,10 +5,14 @@
 #include <QInputDialog>
 #include <QKeyEvent>
 #include <QMessageBox>
+#include <QMouseEvent>
+#include <QResizeEvent>
 #include <QStandardItemModel>
 #include <QTimer>
 #include "citra_qt/configuration/configure_touch_from_button.h"
+#include "citra_qt/configuration/configure_touch_widget.h"
 #include "common/param_package.h"
+#include "core/3ds.h"
 #include "input_common/main.h"
 #include "ui_configure_touch_from_button.h"
 
@@ -64,15 +68,17 @@ static QString ButtonToText(const Common::ParamPackage& param) {
 }
 
 ConfigureTouchFromButton::ConfigureTouchFromButton(
-    QWidget* parent, std::vector<Settings::TouchFromButtonMap> touch_maps, int default_index)
-    : QDialog(parent), touch_maps(touch_maps), selected_index(default_index),
-      ui(std::make_unique<Ui::ConfigureTouchFromButton>()),
-      timeout_timer(std::make_unique<QTimer>()), poll_timer(std::make_unique<QTimer>()) {
+    QWidget* parent, const std::vector<Settings::TouchFromButtonMap>& touch_maps,
+    const int default_index)
+    : QDialog(parent), ui(std::make_unique<Ui::ConfigureTouchFromButton>()), touch_maps(touch_maps),
+      selected_index(default_index), timeout_timer(std::make_unique<QTimer>()),
+      poll_timer(std::make_unique<QTimer>()) {
 
     ui->setupUi(this);
     binding_list_model = std::make_unique<QStandardItemModel>(0, 3, this);
     binding_list_model->setHorizontalHeaderLabels({tr("Button"), tr("X"), tr("Y")});
     ui->binding_list->setModel(binding_list_model.get());
+    ui->bottom_screen->SetCoordLabel(ui->coord_label);
 
     SetConfiguration();
     UpdateUiDisplay();
@@ -85,7 +91,8 @@ void ConfigureTouchFromButton::showEvent(QShowEvent* ev) {
     QWidget::showEvent(ev);
 
     // width values are not valid in the constructor
-    const int w = ui->binding_list->contentsRect().width() / binding_list_model->columnCount();
+    const int w =
+        ui->binding_list->viewport()->contentsRect().width() / binding_list_model->columnCount();
     if (w > 0) {
         ui->binding_list->setColumnWidth(0, w);
         ui->binding_list->setColumnWidth(1, w);
@@ -102,20 +109,11 @@ void ConfigureTouchFromButton::SetConfiguration() {
 }
 
 void ConfigureTouchFromButton::UpdateUiDisplay() {
-    const bool have_maps = !touch_maps.empty();
-
     ui->button_delete->setEnabled(touch_maps.size() > 1);
-    ui->button_rename->setEnabled(have_maps);
-    ui->binding_list->setEnabled(have_maps);
-    ui->button_add_bind->setEnabled(have_maps);
     ui->button_delete_bind->setEnabled(false);
 
     binding_list_model->removeRows(0, binding_list_model->rowCount());
 
-    if (!have_maps) {
-        return;
-    }
-
     for (const auto& button_str : touch_maps[selected_index].buttons) {
         Common::ParamPackage package{button_str};
         QStandardItem* button = new QStandardItem(ButtonToText(package));
@@ -124,6 +122,9 @@ void ConfigureTouchFromButton::UpdateUiDisplay() {
         QStandardItem* xcoord = new QStandardItem(QString::number(package.Get("x", 0)));
         QStandardItem* ycoord = new QStandardItem(QString::number(package.Get("y", 0)));
         binding_list_model->appendRow({button, xcoord, ycoord});
+
+        int dot = ui->bottom_screen->AddDot(package.Get("x", 0), package.Get("y", 0));
+        button->setData(dot, data_role_dot);
     }
 }
 
@@ -138,16 +139,22 @@ void ConfigureTouchFromButton::ConnectEvents() {
             &ConfigureTouchFromButton::DeleteMapping);
     connect(ui->button_rename, &QPushButton::clicked, this,
             &ConfigureTouchFromButton::RenameMapping);
-    connect(ui->button_add_bind, &QPushButton::clicked, this,
-            &ConfigureTouchFromButton::NewBinding);
     connect(ui->button_delete_bind, &QPushButton::clicked, this,
             &ConfigureTouchFromButton::DeleteBinding);
     connect(ui->binding_list, &QTreeView::doubleClicked, this,
             &ConfigureTouchFromButton::EditBinding);
     connect(ui->binding_list->selectionModel(), &QItemSelectionModel::selectionChanged, this,
-            [this](const QItemSelection& selected, const QItemSelection& deselected) {
-                ui->button_delete_bind->setEnabled(!selected.indexes().isEmpty());
-            });
+            &ConfigureTouchFromButton::OnBindingSelection);
+    connect(binding_list_model.get(), &QStandardItemModel::itemChanged, this,
+            &ConfigureTouchFromButton::OnBindingChanged);
+    connect(ui->binding_list->model(), &QStandardItemModel::rowsAboutToBeRemoved, this,
+            &ConfigureTouchFromButton::OnBindingDeleted);
+    connect(ui->bottom_screen, &TouchScreenPreview::DotAdded, this,
+            &ConfigureTouchFromButton::NewBinding);
+    connect(ui->bottom_screen, &TouchScreenPreview::DotSelected, this,
+            &ConfigureTouchFromButton::SetActiveBinding);
+    connect(ui->bottom_screen, &TouchScreenPreview::DotMoved, this,
+            &ConfigureTouchFromButton::SetCoordinates);
     connect(ui->buttonBox, &QDialogButtonBox::accepted, this,
             &ConfigureTouchFromButton::ApplyConfiguration);
 
@@ -169,10 +176,10 @@ void ConfigureTouchFromButton::SaveCurrentMapping() {
     auto& map = touch_maps[selected_index];
     map.buttons.clear();
     for (int i = 0, rc = binding_list_model->rowCount(); i < rc; ++i) {
-        auto bind_str = binding_list_model->index(i, 0)
-                            .data(Qt::ItemDataRole::UserRole + 1)
-                            .toString()
-                            .toStdString();
+        const auto bind_str = binding_list_model->index(i, 0)
+                                  .data(Qt::ItemDataRole::UserRole + 1)
+                                  .toString()
+                                  .toStdString();
         if (bind_str.empty()) {
             continue;
         }
@@ -197,7 +204,7 @@ void ConfigureTouchFromButton::NewMapping() {
         SaveCurrentMapping();
     }
     touch_maps.emplace_back(Settings::TouchFromButtonMap{name.toStdString(), {}});
-    selected_index = touch_maps.size() - 1;
+    selected_index = static_cast<int>(touch_maps.size()) - 1;
 
     ui->mapping->addItem(name);
     ui->mapping->setCurrentIndex(selected_index);
@@ -226,7 +233,7 @@ void ConfigureTouchFromButton::RenameMapping() {
     touch_maps[selected_index].name = new_name.toStdString();
 }
 
-void ConfigureTouchFromButton::GetButtonInput(int row_index, bool is_new) {
+void ConfigureTouchFromButton::GetButtonInput(const int row_index, const bool is_new) {
     binding_list_model->item(row_index, 0)->setText(tr("[press key]"));
 
     input_setter = [this, row_index, is_new](const Common::ParamPackage& params,
@@ -253,15 +260,21 @@ void ConfigureTouchFromButton::GetButtonInput(int row_index, bool is_new) {
 
     grabKeyboard();
     grabMouse();
+    qApp->setOverrideCursor(QCursor(Qt::CursorShape::ArrowCursor));
     timeout_timer->start(5000); // Cancel after 5 seconds
     poll_timer->start(200);     // Check for new inputs every 200ms
 }
 
-void ConfigureTouchFromButton::NewBinding() {
+void ConfigureTouchFromButton::NewBinding(const QPoint& pos) {
     QStandardItem* button = new QStandardItem();
     button->setEditable(false);
-    binding_list_model->appendRow(
-        {button, new QStandardItem(QStringLiteral("0")), new QStandardItem(QStringLiteral("0"))});
+    QStandardItem* xcoord = new QStandardItem(QString::number(pos.x()));
+    QStandardItem* ycoord = new QStandardItem(QString::number(pos.y()));
+
+    int dot_id = ui->bottom_screen->AddDot(pos.x(), pos.y());
+    button->setData(dot_id, data_role_dot);
+
+    binding_list_model->appendRow({button, xcoord, ycoord});
     ui->binding_list->setFocus();
     ui->binding_list->setCurrentIndex(button->index());
 
@@ -277,13 +290,86 @@ void ConfigureTouchFromButton::EditBinding(const QModelIndex& qi) {
 void ConfigureTouchFromButton::DeleteBinding() {
     const int row_index = ui->binding_list->currentIndex().row();
     if (row_index >= 0) {
+        ui->bottom_screen->RemoveDot(
+            binding_list_model->index(row_index, 0).data(data_role_dot).toInt());
         binding_list_model->removeRow(row_index);
     }
 }
 
-void ConfigureTouchFromButton::SetPollingResult(const Common::ParamPackage& params, bool cancel) {
+void ConfigureTouchFromButton::OnBindingSelection(const QItemSelection& selected,
+                                                  const QItemSelection& deselected) {
+    ui->button_delete_bind->setEnabled(!selected.isEmpty());
+    if (!selected.isEmpty()) {
+        const auto dot_data = selected.indexes().first().data(data_role_dot);
+        if (dot_data.isValid()) {
+            ui->bottom_screen->HighlightDot(dot_data.toInt());
+        }
+    }
+    if (!deselected.isEmpty()) {
+        const auto dot_data = deselected.indexes().first().data(data_role_dot);
+        if (dot_data.isValid()) {
+            ui->bottom_screen->HighlightDot(dot_data.toInt(), false);
+        }
+    }
+}
+
+void ConfigureTouchFromButton::OnBindingChanged(QStandardItem* item) {
+    if (item->column() == 0) {
+        return;
+    }
+
+    const bool blocked = binding_list_model->blockSignals(true);
+    item->setText(QString::number(std::clamp(
+        item->text().toInt(), 0,
+        (item->column() == 1 ? Core::kScreenBottomWidth : Core::kScreenBottomHeight) - 1)));
+    binding_list_model->blockSignals(blocked);
+
+    const auto dot_data = binding_list_model->index(item->row(), 0).data(data_role_dot);
+    if (dot_data.isValid()) {
+        ui->bottom_screen->MoveDot(dot_data.toInt(),
+                                   binding_list_model->item(item->row(), 1)->text().toInt(),
+                                   binding_list_model->item(item->row(), 2)->text().toInt());
+    }
+}
+
+void ConfigureTouchFromButton::OnBindingDeleted(const QModelIndex& parent, int first, int last) {
+    for (int i = first; i <= last; ++i) {
+        auto ix = binding_list_model->index(i, 0);
+        if (!ix.isValid()) {
+            return;
+        }
+        const auto dot_data = ix.data(data_role_dot);
+        if (dot_data.isValid()) {
+            ui->bottom_screen->RemoveDot(dot_data.toInt());
+        }
+    }
+}
+
+void ConfigureTouchFromButton::SetActiveBinding(const int dot_id) {
+    for (int i = 0; i < binding_list_model->rowCount(); ++i) {
+        if (binding_list_model->index(i, 0).data(data_role_dot) == dot_id) {
+            ui->binding_list->setCurrentIndex(binding_list_model->index(i, 0));
+            ui->binding_list->setFocus();
+            return;
+        }
+    }
+}
+
+void ConfigureTouchFromButton::SetCoordinates(const int dot_id, const QPoint& pos) {
+    for (int i = 0; i < binding_list_model->rowCount(); ++i) {
+        if (binding_list_model->item(i, 0)->data(data_role_dot) == dot_id) {
+            binding_list_model->item(i, 1)->setText(QString::number(pos.x()));
+            binding_list_model->item(i, 2)->setText(QString::number(pos.y()));
+            return;
+        }
+    }
+}
+
+void ConfigureTouchFromButton::SetPollingResult(const Common::ParamPackage& params,
+                                                const bool cancel) {
     releaseKeyboard();
     releaseMouse();
+    qApp->restoreOverrideCursor();
     timeout_timer->stop();
     poll_timer->stop();
     for (auto& poller : device_pollers) {
@@ -296,8 +382,14 @@ void ConfigureTouchFromButton::SetPollingResult(const Common::ParamPackage& para
 }
 
 void ConfigureTouchFromButton::keyPressEvent(QKeyEvent* event) {
-    if (!input_setter || !event)
+    if (!input_setter && event->key() == Qt::Key_Delete) {
+        DeleteBinding();
+        return;
+    }
+
+    if (!input_setter) {
         return QDialog::keyPressEvent(event);
+    }
 
     if (event->key() != Qt::Key_Escape) {
         SetPollingResult(Common::ParamPackage{InputCommon::GenerateKeyboardParam(event->key())},
@@ -312,10 +404,210 @@ void ConfigureTouchFromButton::ApplyConfiguration() {
     accept();
 }
 
-const int ConfigureTouchFromButton::GetSelectedIndex() {
+int ConfigureTouchFromButton::GetSelectedIndex() const {
     return selected_index;
 }
 
-const std::vector<Settings::TouchFromButtonMap> ConfigureTouchFromButton::GetMaps() {
+std::vector<Settings::TouchFromButtonMap> ConfigureTouchFromButton::GetMaps() const {
     return touch_maps;
-};
\ No newline at end of file
+}
+
+TouchScreenPreview::TouchScreenPreview(QWidget* parent) : QFrame(parent) {
+    setBackgroundRole(QPalette::ColorRole::Base);
+}
+
+TouchScreenPreview::~TouchScreenPreview() = default;
+
+void TouchScreenPreview::SetCoordLabel(QLabel* const label) {
+    coord_label = label;
+}
+
+int TouchScreenPreview::AddDot(const int device_x, const int device_y) {
+    QFont dot_font{QStringLiteral("monospace")};
+    dot_font.setStyleHint(QFont::Monospace);
+    dot_font.setPointSize(20);
+
+    QLabel* dot = new QLabel(this);
+    dot->setAttribute(Qt::WA_TranslucentBackground);
+    dot->setFont(dot_font);
+    dot->setText(QChar(0xD7)); // U+00D7 Multiplication Sign
+    dot->setAlignment(Qt::AlignmentFlag::AlignCenter);
+    dot->setProperty(prop_id, ++max_dot_id);
+    dot->setProperty(prop_x, device_x);
+    dot->setProperty(prop_y, device_y);
+    dot->setCursor(Qt::CursorShape::PointingHandCursor);
+    dot->setMouseTracking(true);
+    dot->installEventFilter(this);
+    dot->show();
+    PositionDot(dot, device_x, device_y);
+    dots.emplace_back(max_dot_id, dot);
+    return max_dot_id;
+}
+
+void TouchScreenPreview::RemoveDot(const int id) {
+    for (auto dot_it = dots.begin(); dot_it < dots.end(); ++dot_it) {
+        if (dot_it->first == id) {
+            dot_it->second->deleteLater();
+            dots.erase(dot_it);
+            return;
+        }
+    }
+}
+
+void TouchScreenPreview::HighlightDot(const int id, const bool active) const {
+    for (const auto& dot : dots) {
+        if (dot.first == id) {
+            // use color property from the stylesheet, or fall back to the default palette
+            if (dot_highlight_color.isValid()) {
+                dot.second->setStyleSheet(
+                    active ? QStringLiteral("color: %1").arg(dot_highlight_color.name())
+                           : QString{});
+            } else {
+                dot.second->setForegroundRole(active ? QPalette::ColorRole::LinkVisited
+                                                     : QPalette::ColorRole::NoRole);
+            }
+            return;
+        }
+    }
+}
+
+void TouchScreenPreview::MoveDot(const int id, const int device_x, const int device_y) const {
+    for (const auto& dot : dots) {
+        if (dot.first == id) {
+            dot.second->setProperty(prop_x, device_x);
+            dot.second->setProperty(prop_y, device_y);
+            PositionDot(dot.second, device_x, device_y);
+            return;
+        }
+    }
+}
+
+void TouchScreenPreview::resizeEvent(QResizeEvent* event) {
+    if (ignore_resize) {
+        return;
+    }
+
+    const int target_width = std::min(width(), height() * 4 / 3);
+    const int target_height = std::min(height(), width() * 3 / 4);
+    if (target_width == width() && target_height == height()) {
+        return;
+    }
+    ignore_resize = true;
+    setGeometry((parentWidget()->contentsRect().width() - target_width) / 2, y(), target_width,
+                target_height);
+    ignore_resize = false;
+
+    if (event->oldSize().width() != target_width || event->oldSize().height() != target_height) {
+        for (const auto& dot : dots) {
+            PositionDot(dot.second);
+        }
+    }
+}
+
+void TouchScreenPreview::mouseMoveEvent(QMouseEvent* event) {
+    if (!coord_label) {
+        return;
+    }
+    const auto point = MapToDeviceCoords(event->x(), event->y());
+    if (point.has_value()) {
+        coord_label->setText(QStringLiteral("X: %1, Y: %2").arg(point->x()).arg(point->y()));
+    } else {
+        coord_label->clear();
+    }
+}
+
+void TouchScreenPreview::leaveEvent(QEvent* event) {
+    if (coord_label) {
+        coord_label->clear();
+    }
+}
+
+void TouchScreenPreview::mousePressEvent(QMouseEvent* event) {
+    if (event->button() == Qt::MouseButton::LeftButton) {
+        const auto pos = MapToDeviceCoords(event->x(), event->y());
+        if (pos.has_value()) {
+            emit DotAdded(*pos);
+        }
+    }
+}
+
+bool TouchScreenPreview::eventFilter(QObject* obj, QEvent* event) {
+    switch (event->type()) {
+    case QEvent::Type::MouseButtonPress: {
+        const auto mouse_event = static_cast<QMouseEvent*>(event);
+        if (mouse_event->button() != Qt::MouseButton::LeftButton) {
+            break;
+        }
+        emit DotSelected(obj->property(prop_id).toInt());
+
+        drag_state.dot = qobject_cast<QLabel*>(obj);
+        drag_state.start_pos = mouse_event->globalPos();
+        return true;
+    }
+    case QEvent::Type::MouseMove: {
+        if (!drag_state.dot) {
+            break;
+        }
+        const auto mouse_event = static_cast<QMouseEvent*>(event);
+        if (!drag_state.active) {
+            drag_state.active =
+                (mouse_event->globalPos() - drag_state.start_pos).manhattanLength() >=
+                QApplication::startDragDistance();
+            if (!drag_state.active) {
+                break;
+            }
+        }
+        auto current_pos = mapFromGlobal(mouse_event->globalPos());
+        current_pos.setX(std::clamp(current_pos.x(), contentsMargins().left(),
+                                    contentsMargins().left() + contentsRect().width()));
+        current_pos.setY(std::clamp(current_pos.y(), contentsMargins().top(),
+                                    contentsMargins().top() + contentsRect().height()));
+        const auto device_coord = MapToDeviceCoords(current_pos.x(), current_pos.y());
+        if (device_coord.has_value()) {
+            drag_state.dot->setProperty(prop_x, device_coord->x());
+            drag_state.dot->setProperty(prop_y, device_coord->y());
+            PositionDot(drag_state.dot, device_coord->x(), device_coord->y());
+            emit DotMoved(drag_state.dot->property(prop_id).toInt(), *device_coord);
+            if (coord_label) {
+                coord_label->setText(
+                    QStringLiteral("X: %1, Y: %2").arg(device_coord->x()).arg(device_coord->y()));
+            }
+        }
+        return true;
+    }
+    case QEvent::Type::MouseButtonRelease: {
+        drag_state.dot.clear();
+        drag_state.active = false;
+        return true;
+    }
+    default:
+        break;
+    }
+    return obj->eventFilter(obj, event);
+}
+
+std::optional<QPoint> TouchScreenPreview::MapToDeviceCoords(const int screen_x,
+                                                            const int screen_y) const {
+    const float t_x = 0.5f + static_cast<float>(screen_x - contentsMargins().left()) *
+                                 (Core::kScreenBottomWidth - 1) / contentsRect().width();
+    const float t_y = 0.5f + static_cast<float>(screen_y - contentsMargins().top()) *
+                                 (Core::kScreenBottomHeight - 1) / contentsRect().height();
+    if (t_x >= 0.5f && t_x < Core::kScreenBottomWidth && t_y >= 0.5f &&
+        t_y < Core::kScreenBottomHeight) {
+
+        return QPoint{static_cast<int>(t_x), static_cast<int>(t_y)};
+    }
+    return std::nullopt;
+}
+
+void TouchScreenPreview::PositionDot(QLabel* const dot, const int device_x,
+                                     const int device_y) const {
+    dot->move(static_cast<int>(
+                  static_cast<float>(device_x >= 0 ? device_x : dot->property(prop_x).toInt()) *
+                      (contentsRect().width() - 1) / (Core::kScreenBottomWidth - 1) +
+                  contentsMargins().left() - static_cast<float>(dot->width()) / 2 + 0.5f),
+              static_cast<int>(
+                  static_cast<float>(device_y >= 0 ? device_y : dot->property(prop_y).toInt()) *
+                      (contentsRect().height() - 1) / (Core::kScreenBottomHeight - 1) +
+                  contentsMargins().top() - static_cast<float>(dot->height()) / 2 + 0.5f));
+}
diff --git a/src/citra_qt/configuration/configure_touch_from_button.h b/src/citra_qt/configuration/configure_touch_from_button.h
index 20ba97e5f..d9a684813 100644
--- a/src/citra_qt/configuration/configure_touch_from_button.h
+++ b/src/citra_qt/configuration/configure_touch_from_button.h
@@ -7,12 +7,14 @@
 #include <functional>
 #include <memory>
 #include <optional>
+#include <vector>
 #include <QDialog>
 #include "core/settings.h"
 
-class QKeyEvent;
+class QItemSelection;
 class QModelIndex;
 class QStandardItemModel;
+class QStandardItem;
 class QTimer;
 
 namespace Common {
@@ -34,33 +36,40 @@ class ConfigureTouchFromButton : public QDialog {
 
 public:
     explicit ConfigureTouchFromButton(QWidget* parent,
-                                      std::vector<Settings::TouchFromButtonMap> touch_maps,
-                                      int default_index = 0);
+                                      const std::vector<Settings::TouchFromButtonMap>& touch_maps,
+                                      const int default_index = 0);
     ~ConfigureTouchFromButton() override;
 
-    const int GetSelectedIndex();
-    const std::vector<Settings::TouchFromButtonMap> GetMaps();
+    int GetSelectedIndex() const;
+    std::vector<Settings::TouchFromButtonMap> GetMaps() const;
 
 public slots:
     void ApplyConfiguration();
+    void NewBinding(const QPoint& pos);
+    void SetActiveBinding(const int dot_id);
+    void SetCoordinates(const int dot_id, const QPoint& pos);
 
 protected:
-    void showEvent(QShowEvent* ev);
+    virtual void showEvent(QShowEvent* ev) override;
+    virtual void keyPressEvent(QKeyEvent* event) override;
+
+private slots:
+    void NewMapping();
+    void DeleteMapping();
+    void RenameMapping();
+    void EditBinding(const QModelIndex& qi);
+    void DeleteBinding();
+    void OnBindingSelection(const QItemSelection& selected, const QItemSelection& deselected);
+    void OnBindingChanged(QStandardItem* item);
+    void OnBindingDeleted(const QModelIndex& parent, int first, int last);
 
 private:
     void SetConfiguration();
     void UpdateUiDisplay();
     void ConnectEvents();
-    void NewMapping();
-    void DeleteMapping();
-    void RenameMapping();
-    void NewBinding();
-    void EditBinding(const QModelIndex& qi);
-    void DeleteBinding();
-    void GetButtonInput(int row_index, bool is_new);
-    void SetPollingResult(const Common::ParamPackage& params, bool cancel);
+    void GetButtonInput(const int row_index, const bool is_new);
+    void SetPollingResult(const Common::ParamPackage& params, const bool cancel);
     void SaveCurrentMapping();
-    void keyPressEvent(QKeyEvent* event) override;
 
     std::unique_ptr<Ui::ConfigureTouchFromButton> ui;
     std::unique_ptr<QStandardItemModel> binding_list_model;
@@ -71,4 +80,6 @@ private:
     std::unique_ptr<QTimer> poll_timer;
     std::vector<std::unique_ptr<InputCommon::Polling::DevicePoller>> device_pollers;
     std::optional<std::function<void(const Common::ParamPackage&, const bool)>> input_setter;
+
+    static constexpr int data_role_dot = Qt::ItemDataRole::UserRole + 2;
 };
diff --git a/src/citra_qt/configuration/configure_touch_from_button.ui b/src/citra_qt/configuration/configure_touch_from_button.ui
index c022c7858..974400c8a 100644
--- a/src/citra_qt/configuration/configure_touch_from_button.ui
+++ b/src/citra_qt/configuration/configure_touch_from_button.ui
@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>500</width>
-    <height>450</height>
+    <height>500</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -21,6 +21,9 @@
        <property name="text">
         <string>Mapping:</string>
        </property>
+       <property name="textFormat">
+        <enum>Qt::PlainText</enum>
+       </property>
       </widget>
      </item>
      <item>
@@ -86,7 +89,11 @@
      <item>
       <widget class="QLabel" name="label_2">
        <property name="text">
-        <string>Double-click to change a field.</string>
+        <string>Click the bottom area to add a point, then press a button to bind.
+Drag points to change position, or double-click table cells to edit values.</string>
+       </property>
+       <property name="textFormat">
+        <enum>Qt::PlainText</enum>
        </property>
       </widget>
      </item>
@@ -103,17 +110,10 @@
        </property>
       </spacer>
      </item>
-     <item>
-      <widget class="QPushButton" name="button_add_bind">
-       <property name="text">
-        <string>Add</string>
-       </property>
-      </widget>
-     </item>
      <item>
       <widget class="QPushButton" name="button_delete_bind">
        <property name="text">
-        <string>Delete</string>
+        <string>Delete point</string>
        </property>
       </widget>
      </item>
@@ -139,14 +139,76 @@
     </widget>
    </item>
    <item>
-    <widget class="QDialogButtonBox" name="buttonBox">
-     <property name="standardButtons">
-      <set>QDialogButtonBox::Cancel|QDialogButtonBox::Ok</set>
+    <widget class="TouchScreenPreview" name="bottom_screen">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="minimumSize">
+      <size>
+       <width>160</width>
+       <height>120</height>
+      </size>
+     </property>
+     <property name="baseSize">
+      <size>
+       <width>320</width>
+       <height>240</height>
+      </size>
+     </property>
+     <property name="cursor">
+      <cursorShape>CrossCursor</cursorShape>
+     </property>
+     <property name="mouseTracking">
+      <bool>true</bool>
+     </property>
+     <property name="autoFillBackground">
+      <bool>true</bool>
+     </property>
+     <property name="frameShape">
+      <enum>QFrame::StyledPanel</enum>
+     </property>
+     <property name="frameShadow">
+      <enum>QFrame::Sunken</enum>
      </property>
     </widget>
    </item>
+   <item>
+    <layout class="QHBoxLayout" name="horizontalLayout_3">
+     <item>
+      <widget class="QLabel" name="coord_label">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Expanding" vsizetype="Preferred">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="textFormat">
+        <enum>Qt::PlainText</enum>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QDialogButtonBox" name="buttonBox">
+       <property name="standardButtons">
+        <set>QDialogButtonBox::Cancel|QDialogButtonBox::Ok</set>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </item>
   </layout>
  </widget>
+ <customwidgets>
+  <customwidget>
+   <class>TouchScreenPreview</class>
+   <extends>QFrame</extends>
+   <header>citra_qt/configuration/configure_touch_widget.h</header>
+   <container>1</container>
+  </customwidget>
+ </customwidgets>
  <resources/>
  <connections>
   <connection>
diff --git a/src/citra_qt/configuration/configure_touch_widget.h b/src/citra_qt/configuration/configure_touch_widget.h
new file mode 100644
index 000000000..567330fa0
--- /dev/null
+++ b/src/citra_qt/configuration/configure_touch_widget.h
@@ -0,0 +1,61 @@
+// Copyright 2020 Citra Emulator Project
+// Licensed under GPLv2 or any later version
+// Refer to the license.txt file included.
+
+#pragma once
+
+#include <optional>
+#include <utility>
+#include <vector>
+#include <QFrame>
+#include <QPointer>
+
+class QLabel;
+
+// Widget for representing touchscreen coordinates
+class TouchScreenPreview : public QFrame {
+    Q_OBJECT
+    Q_PROPERTY(QColor dotHighlightColor MEMBER dot_highlight_color)
+
+public:
+    TouchScreenPreview(QWidget* parent);
+    ~TouchScreenPreview() override;
+
+    void SetCoordLabel(QLabel* const);
+    int AddDot(const int device_x, const int device_y);
+    void RemoveDot(const int id);
+    void HighlightDot(const int id, const bool active = true) const;
+    void MoveDot(const int id, const int device_x, const int device_y) const;
+
+signals:
+    void DotAdded(const QPoint& pos);
+    void DotSelected(const int dot_id);
+    void DotMoved(const int dot_id, const QPoint& pos);
+
+protected:
+    virtual void resizeEvent(QResizeEvent*) override;
+    virtual void mouseMoveEvent(QMouseEvent*) override;
+    virtual void leaveEvent(QEvent*) override;
+    virtual void mousePressEvent(QMouseEvent*) override;
+    virtual bool eventFilter(QObject*, QEvent*) override;
+
+private:
+    std::optional<QPoint> MapToDeviceCoords(const int screen_x, const int screen_y) const;
+    void PositionDot(QLabel* const dot, const int device_x = -1, const int device_y = -1) const;
+
+    bool ignore_resize = false;
+    QPointer<QLabel> coord_label;
+
+    std::vector<std::pair<int, QLabel*>> dots;
+    int max_dot_id = 0;
+    QColor dot_highlight_color;
+    static constexpr char prop_id[] = "dot_id";
+    static constexpr char prop_x[] = "device_x";
+    static constexpr char prop_y[] = "device_y";
+
+    struct {
+        bool active = false;
+        QPointer<QLabel> dot;
+        QPoint start_pos;
+    } drag_state;
+};