Adding local camera window and json configuration (#61)

* Add camera window widget and json configuration

* Hide and show size grip based on focus of the widget

* Add Json properties documentation and corrected the default values of the json properties

* Add icons in .qrc file

* Correction of a bug where the camera visibility button appeared when it shouldn't have

* Add parameter name to the gui readme

* General code corrections and improvements

* Correct wrong comparison for default camera window position

* Correct a bug where the camera's position didnt set properly

* Add camera style enum for readability, remove useless forward declarations and correct code style

* Change setLocalCameraStyle to use CameraStyle enum

opentera_webrtc_robot_gui/CMakeLists.txt

@@ -11,6 +11,7 @@ find_package(catkin REQUIRED COMPONENTS
     opentera_webrtc_ros_msgs
     roscpp
     rospy
+    roslib
     std_msgs
     sensor_msgs
 )
@@ -34,13 +35,15 @@ set(srcs
     src/ROSCameraView.cpp
     src/ConfigDialog.cpp
     src/Statistics.cpp
+    src/LocalCameraWindow.cpp
 )
 
 set(headers
     src/MainWindow.h
     src/ROSCameraView.h
     src/ConfigDialog.h
     src/Statistics.h
+    src/LocalCameraWindow.h
 )
 
 set(uis
@@ -242,11 +245,9 @@ install(TARGETS ${PROJECT_NAME}_node
 # )
 
 ## Mark other files for installation (e.g. launch and bag files, etc.)
-# install(FILES
-#   # myfile1
-#   # myfile2
-#   DESTINATION ${CATKIN_PACKAGE_SHARE_DESTINATION}
-# )
+install(FILES src/resources/DeviceProperties.json
+    DESTINATION ${CATKIN_PACKAGE_SHARE_DESTINATION}/src/resources
+)
 
 #############
 ## Testing ##

opentera_webrtc_robot_gui/README.md

@@ -5,3 +5,33 @@
 The GUI is written with Qt 5.12+ and displays stream information (ROS images) from the WebRTC connection. It will utimately be used to display internal robot state, control the microphone and camera usage and enable calling from the robot's side. At the moment, calls are initiated from the web with [opentera-webrtc-teleop-frontend](https://github.com/introlab/opentera-webrtc-teleop-frontend) and sessions are automatically joined.
 
 > The GUI is unfinished at the moment but usable to display basic video streams.
+
+## Customization 
+
+In order to adjust the gui to different screen sizes, aspect ratios and resolutions, a series of properties can be changed from a JSON file. By default this json file is named deviceProperties and can be found in the resources folder. It can however by overriden by using the ros parameter `device_properties_path`. The following properties are available.
+
+### width and height
+
+The desired resolution of the window, by default 600px by 1024px.
+
+### diagonal length
+
+The diagonal length of the window on the user's screen. This will adjust the size of certain UI elements, in order to be visible on smaller and bigger screens, by default 7 inches.
+
+### defaultLocalCameraWidth and defaultLocalCameraHeight
+
+During a session, the local camera shrinks down to a small window that's draggable and resizable. These parameters state the camera window's default size and have default values of 320px by 240px. These match the aspect ratio of the opentera-webrtc-ros demo video stream, but it's recommended that these be changed to match the aspect ratio of whatever is the incoming video, in order to remove black bars.
+
+### defaultLocalCameraOpacity
+
+The local camera window's default opacity, it can also be changed from the configuration menu. By default has an value of 90%.
+
+### defaultLocalCameraX and defaultLocalCameraY
+
+The default position of the camera window in X and Y coordinates. Noting that the top left is the (0, 0) point. These values can be negative wich will place the window from the opposite side. These properties respectively have default values of 10px and -10px, wich places the window 10 pixels from the borders at the bottom left.
+
+
+
+
+
+

opentera_webrtc_robot_gui/src/ConfigDialog.cpp

@@ -1,39 +1,54 @@
 #include "ConfigDialog.h"
 #include "MainWindow.h"
 
-#include "ui_ConfigDialog.h"
-
-ConfigDialog::ConfigDialog(MainWindow* parent) : m_ui(new Ui::ConfigDialog())
+ConfigDialog::ConfigDialog(MainWindow* parent)
 {
-    m_ui->setupUi(this);
+    m_ui.setupUi(this);
     setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint | Qt::WindowTitleHint);
 
     // Sliders
-    m_ui->micVolumeSlider->setValue(100);
-    connect(m_ui->micVolumeSlider, &QSlider::valueChanged, parent, &MainWindow::onMicVolumeSliderValueChanged);
-    m_ui->volumeSlider->setValue(100);
-    connect(m_ui->volumeSlider, &QSlider::valueChanged, parent, &MainWindow::onVolumeSliderValueChanged);
+    m_ui.micVolumeSlider->setValue(100);
+    connect(m_ui.micVolumeSlider, &QSlider::valueChanged, parent, &MainWindow::onMicVolumeSliderValueChanged);
+    m_ui.volumeSlider->setValue(100);
+    connect(m_ui.volumeSlider, &QSlider::valueChanged, parent, &MainWindow::onVolumeSliderValueChanged);
+    m_ui.opacitySlider->setValue(parent->m_deviceProperties.defaultLocalCameraOpacity);
+    connect(m_ui.opacitySlider, &QSlider::valueChanged, parent, &MainWindow::onOpacitySliderValueChanged);
 }
 
-ConfigDialog::~ConfigDialog() {}
-
-
 int ConfigDialog::getMicVolumeSliderValue()
 {
-    return m_ui->micVolumeSlider->value();
+    return m_ui.micVolumeSlider->value();
 }
 
 void ConfigDialog::setMicVolumeSliderValue(int value)
 {
-    m_ui->micVolumeSlider->setValue(value);
+    m_ui.micVolumeSlider->setValue(value);
 }
 
 int ConfigDialog::getVolumeSliderValue()
 {
-    return m_ui->volumeSlider->value();
+    return m_ui.volumeSlider->value();
 }
 
 void ConfigDialog::setVolumeSliderValue(int value)
 {
-    m_ui->volumeSlider->setValue(value);
+    m_ui.volumeSlider->setValue(value);
+}
+
+int ConfigDialog::getOpacitySliderValue()
+{
+    return m_ui.opacitySlider->value();
+}
+
+void ConfigDialog::setOpacitySliderValue(int value)
+{
+    if (value == 0)
+    {
+        m_lastOpacityValue = m_ui.opacitySlider->value();
+    }
+    if (m_ui.opacitySlider->value() == 0)
+    {
+        value = m_lastOpacityValue;
+    }
+    m_ui.opacitySlider->setValue(value);
 }

opentera_webrtc_robot_gui/src/ConfigDialog.h

@@ -2,13 +2,8 @@
 #define _CONFIG_DIALOG_H_
 
 #include <QDialog>
+#include "ui_ConfigDialog.h"
 
-QT_BEGIN_NAMESPACE
-    namespace Ui
-    {
-        class ConfigDialog;
-    }
-QT_END_NAMESPACE
 
 class MainWindow;
 
@@ -18,15 +13,20 @@ class ConfigDialog : public QDialog
 
 public:
     ConfigDialog(MainWindow* parent = nullptr);
-    ~ConfigDialog();
+    ~ConfigDialog() = default;
 
     int getMicVolumeSliderValue();
     void setMicVolumeSliderValue(int value);
     int getVolumeSliderValue();
     void setVolumeSliderValue(int value);
+    int getOpacitySliderValue();
+    void setOpacitySliderValue(int value);
 
 protected:
-    Ui::ConfigDialog* m_ui;
+    Ui::ConfigDialog m_ui;
+
+private:
+    int m_lastOpacityValue;
 };
 
 #endif  //#define _CONFIG_DIALOG_H_

opentera_webrtc_robot_gui/src/LocalCameraWindow.cpp

@@ -0,0 +1,105 @@
+#include "LocalCameraWindow.h"
+#include "MainWindow.h"
+
+LocalCameraWindow::LocalCameraWindow(MainWindow* parent) : QDialog{parent}, m_parent{parent}
+{
+    setWindowFlags(Qt::FramelessWindowHint | Qt::WindowTitleHint | Qt::Tool | Qt::Dialog);
+    setAttribute(Qt::WA_DeleteOnClose);
+    setAttribute(Qt::WA_TranslucentBackground);
+    setFocusPolicy(Qt::StrongFocus);
+    setWindowOpacity(m_parent->m_deviceProperties.defaultLocalCameraOpacity / 100);
+    QVBoxLayout* layout = new QVBoxLayout();
+    layout->setMargin(0);
+    setLayout(layout);
+    setVisible(false);
+    resize(m_parent->m_deviceProperties.defaultLocalCameraWidth, m_parent->m_deviceProperties.defaultLocalCameraHeight);
+}
+
+void LocalCameraWindow::addCamera(QWidget* cameraView)
+{
+    layout()->addWidget(cameraView);
+    moveToDefaultPosition();
+    setVisible(true);
+}
+
+void LocalCameraWindow::removeCamera(QWidget* cameraView)
+{
+    layout()->removeWidget(cameraView);
+    setVisible(false);
+}
+
+void LocalCameraWindow::moveToDefaultPosition()
+{
+    QRect mainWindowRect = m_parent->getCameraSpace();
+    int x = m_parent->m_deviceProperties.defaultLocalCameraX;
+    int y = m_parent->m_deviceProperties.defaultLocalCameraY;
+
+    int newX = (x >= 0) ? mainWindowRect.left() + x : mainWindowRect.right() - width() + x;
+    int newY = (y >= 0) ? mainWindowRect.top() + y : mainWindowRect.bottom() - height() + y;
+    move(newX, newY);
+}
+
+void LocalCameraWindow::adjustPositionFromBottomLeft(QSize oldWindowSize, QSize newWindowSize)
+{
+    QPoint destination(pos().x(), pos().y() + (newWindowSize.height() - oldWindowSize.height()));
+    destination = adjustPositionToBorders(destination);
+    move(destination);
+}
+
+void LocalCameraWindow::followMainWindow(QPoint positionDiff)
+{
+    move(pos() + positionDiff);
+}
+
+void LocalCameraWindow::mousePressEvent(QMouseEvent* event)
+{
+    m_pos = event->pos();
+    if (event->buttons() & Qt::LeftButton)
+    {
+        setSizeGripEnabled(true);
+    }
+}
+
+void LocalCameraWindow::focusOutEvent(QFocusEvent* event)
+{
+    if (isSizeGripEnabled())
+    {
+        setSizeGripEnabled(false);
+    }
+}
+
+void LocalCameraWindow::mouseMoveEvent(QMouseEvent* event)
+{
+    if (event->buttons() & Qt::LeftButton)
+    {
+        QPoint diff = event->pos() - m_pos;
+        move(adjustPositionToBorders(pos() + diff));
+    }
+}
+
+QPoint LocalCameraWindow::adjustPositionToBorders(QPoint pos)
+{
+    QRect mainWindowRect = m_parent->getCameraSpace();
+    if (pos.x() < mainWindowRect.left())
+    {
+        pos.setX(mainWindowRect.left());
+    }
+    else if (pos.x() > mainWindowRect.right() - width())
+    {
+        pos.setX(mainWindowRect.right() - width());
+    }
+
+    if (pos.y() < mainWindowRect.top())
+    {
+        pos.setY(mainWindowRect.top());
+    }
+    else if (pos.y() > mainWindowRect.bottom() - height())
+    {
+        pos.setY(mainWindowRect.bottom() - height());
+    }
+
+    setMaximumWidth(mainWindowRect.right() - pos.x());
+    setMaximumHeight(mainWindowRect.bottom() - pos.y());
+
+    return pos;
+}

opentera_webrtc_robot_gui/src/LocalCameraWindow.h

@@ -0,0 +1,33 @@
+#ifndef _LOCAL_CAMERA_WINDOW_H_
+#define _LOCAL_CAMERA_WINDOW_H_
+
+#include <QDialog>
+
+class MainWindow;
+
+class LocalCameraWindow : public QDialog
+{
+    Q_OBJECT
+
+public:
+    LocalCameraWindow(MainWindow* parent = nullptr);
+
+    void addCamera(QWidget* cameraView);
+    void removeCamera(QWidget* cameraView);
+    void moveToDefaultPosition();
+    void adjustPositionFromBottomLeft(QSize oldWindowSize, QSize newWindowSize);
+    void followMainWindow(QPoint positionDiff);
+
+protected:
+    void mousePressEvent(QMouseEvent* event) override;
+    void mouseMoveEvent(QMouseEvent* event) override;
+    void focusOutEvent(QFocusEvent* event) override;
+
+private:
+    QPoint m_pos;
+    MainWindow* m_parent;
+
+    QPoint adjustPositionToBorders(QPoint pos);
+};
+
+#endif