[refactor] update stream window rendering for high-DPI scaling support

src/gui/assets/layouts/layout_relative.h

@@ -0,0 +1,91 @@
+/*
+ * @Author: DI JUNKUN
+ * @Date: 2024-06-14
+ * Copyright (c) 2024 by DI JUNKUN, All Rights Reserved.
+ */
+
+#ifndef _LAYOUT_STYLE_H_
+#define _LAYOUT_STYLE_H_
+
+#include "render.h"
+
+#define TITLE_BAR_HEIGHT 0.0625f
+#define TITLE_BAR_BUTTON_WIDTH 0.0625f
+#define TITLE_BAR_BUTTON_HEIGHT 0.0625f
+#define STATUS_BAR_HEIGHT 0.05f
+#define MENU_WINDOW_WIDTH_CN 300
+#define MENU_WINDOW_HEIGHT_CN 280
+#define LOCAL_WINDOW_WIDTH_CN 300
+#define LOCAL_WINDOW_HEIGHT_CN 280
+#define REMOTE_WINDOW_WIDTH_CN 300
+#define REMOTE_WINDOW_HEIGHT_CN 280
+#define MENU_WINDOW_WIDTH_EN 190
+#define MENU_WINDOW_HEIGHT_EN 245
+#define IPUT_WINDOW_WIDTH 160
+#define INPUT_WINDOW_PADDING_CN 66
+#define INPUT_WINDOW_PADDING_EN 96
+#define SETTINGS_WINDOW_WIDTH_CN 202
+#define SETTINGS_WINDOW_WIDTH_EN 248
+#if USE_CUDA
+#if _WIN32
+#define SETTINGS_WINDOW_HEIGHT_CN 405
+#define SETTINGS_WINDOW_HEIGHT_EN 405
+#else
+#define SETTINGS_WINDOW_HEIGHT_CN 375
+#define SETTINGS_WINDOW_HEIGHT_EN 375
+#endif
+#else
+#if _WIN32
+#define SETTINGS_WINDOW_HEIGHT_CN 375
+#define SETTINGS_WINDOW_HEIGHT_EN 375
+#else
+#define SETTINGS_WINDOW_HEIGHT_CN 345
+#define SETTINGS_WINDOW_HEIGHT_EN 345
+#endif
+#endif
+#define SELF_HOSTED_SERVER_CONFIG_WINDOW_WIDTH_CN 228
+#define SELF_HOSTED_SERVER_CONFIG_WINDOW_WIDTH_EN 275
+#define SELF_HOSTED_SERVER_CONFIG_WINDOW_HEIGHT_CN 195
+#define SELF_HOSTED_SERVER_CONFIG_WINDOW_HEIGHT_EN 195
+#define LANGUAGE_SELECT_WINDOW_PADDING_CN 120
+#define LANGUAGE_SELECT_WINDOW_PADDING_EN 167
+#define VIDEO_QUALITY_SELECT_WINDOW_PADDING_CN 120
+#define VIDEO_QUALITY_SELECT_WINDOW_PADDING_EN 167
+#define VIDEO_FRAME_RATE_SELECT_WINDOW_PADDING_CN 120
+#define VIDEO_FRAME_RATE_SELECT_WINDOW_PADDING_EN 167
+#define VIDEO_ENCODE_FORMAT_SELECT_WINDOW_PADDING_CN 120
+#define VIDEO_ENCODE_FORMAT_SELECT_WINDOW_PADDING_EN 167
+#define ENABLE_HARDWARE_VIDEO_CODEC_CHECKBOX_PADDING_CN 171
+#define ENABLE_HARDWARE_VIDEO_CODEC_CHECKBOX_PADDING_EN 218
+#define ENABLE_TURN_CHECKBOX_PADDING_CN 171
+#define ENABLE_TURN_CHECKBOX_PADDING_EN 218
+#define ENABLE_SRTP_CHECKBOX_PADDING_CN 171
+#define ENABLE_SRTP_CHECKBOX_PADDING_EN 218
+#define ENABLE_SELF_HOSTED_SERVER_CHECKBOX_PADDING_CN 171
+#define ENABLE_SELF_HOSTED_SERVER_CHECKBOX_PADDING_EN 218
+#define ENABLE_AUTOSTART_PADDING_CN 171
+#define ENABLE_AUTOSTART_PADDING_EN 218
+#define ENABLE_DAEMON_PADDING_CN 171
+#define ENABLE_DAEMON_PADDING_EN 218
+#define ENABLE_MINIZE_TO_TRAY_PADDING_CN 171
+#define ENABLE_MINIZE_TO_TRAY_PADDING_EN 218
+#define SELF_HOSTED_SERVER_HOST_INPUT_BOX_PADDING_CN 90
+#define SELF_HOSTED_SERVER_HOST_INPUT_BOX_PADDING_EN 137
+#define SELF_HOSTED_SERVER_PORT_INPUT_BOX_PADDING_CN 90
+#define SELF_HOSTED_SERVER_PORT_INPUT_BOX_PADDING_EN 137
+#define SETTINGS_SELECT_WINDOW_WIDTH 73
+#define SELF_HOSTED_SERVER_INPUT_WINDOW_WIDTH 130
+#define SETTINGS_OK_BUTTON_PADDING_CN 65
+#define SETTINGS_OK_BUTTON_PADDING_EN 83
+#define SELF_HOSTED_SERVER_CONFIG_OK_BUTTON_PADDING_CN 78
+#define SELF_HOSTED_SERVER_CONFIG_OK_BUTTON_PADDING_EN 91
+#define UPDATE_NOTIFICATION_OK_BUTTON_PADDING_CN 162
+#define UPDATE_NOTIFICATION_OK_BUTTON_PADDING_EN 146
+#define UPDATE_NOTIFICATION_RESERVED_HEIGHT 120
+#define REQUEST_PERMISSION_WINDOW_WIDTH_CN 130
+#define REQUEST_PERMISSION_WINDOW_HEIGHT_CN 125
+#define REQUEST_PERMISSION_WINDOW_WIDTH_EN 260
+#define REQUEST_PERMISSION_WINDOW_HEIGHT_EN 125
+#define REQUEST_PERMISSION_WINDOW_CHECKBOX_PADDING_CN 90
+#define REQUEST_PERMISSION_WINDOW_CHECKBOX_PADDING_EN 210
+#endif

src/gui/panels/local_peer_panel.cpp

@@ -1,6 +1,6 @@
 #include <random>
 
-#include "layout.h"
+#include "layout_relative.h"
 #include "localization.h"
 #include "rd_log.h"
 #include "render.h"
@@ -8,20 +8,27 @@
 namespace crossdesk {
 
 int Render::LocalWindow() {
-  ImGui::SetNextWindowPos(ImVec2(-1.0f, title_bar_height_), ImGuiCond_Always);
+  ImGuiIO& io = ImGui::GetIO();
+  float local_window_width = io.DisplaySize.x * 0.5f;
+  float local_window_height =
+      io.DisplaySize.y * (1 - TITLE_BAR_HEIGHT - STATUS_BAR_HEIGHT);
+  float local_window_button_width = io.DisplaySize.x * 0.046f;
+  float local_window_button_height = io.DisplaySize.y * 0.075f;
+
+  ImGui::SetNextWindowPos(ImVec2(0.0f, io.DisplaySize.y * TITLE_BAR_HEIGHT),
+                          ImGuiCond_Always);
   ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
 
-  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(0, 0, 0, 0));
   ImGui::BeginChild("LocalDesktopWindow",
-                    ImVec2(local_window_width_, local_window_height_),
+                    ImVec2(local_window_width, local_window_height),
                     ImGuiChildFlags_None,
-                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                    ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                         ImGuiWindowFlags_NoBringToFrontOnFocus);
   ImGui::PopStyleColor();
 
-  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + main_window_text_y_padding_);
+  ImGui::SetCursorPos(
-  ImGui::Indent(main_child_window_x_padding_);
+      ImVec2(io.DisplaySize.x * 0.045f, io.DisplaySize.y * 0.02f));
 
   ImGui::TextColored(
       ImVec4(0.0f, 0.0f, 0.0f, 0.5f), "%s",
@@ -30,18 +37,16 @@ int Render::LocalWindow() {
   ImGui::Spacing();
   {
     ImGui::SetNextWindowPos(
-        ImVec2(main_child_window_x_padding_,
+        ImVec2(io.DisplaySize.x * 0.045f, io.DisplaySize.y * 0.15f),
-               title_bar_height_ + main_child_window_y_padding_),
         ImGuiCond_Always);
     ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(239.0f / 255, 240.0f / 255,
                                                    242.0f / 255, 1.0f));
     ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
     ImGui::BeginChild(
-        "LocalDesktopWindow_1",
+        "LocalDesktopPanel",
-        ImVec2(local_child_window_width_, local_child_window_height_),
+        ImVec2(local_window_width * 0.8f, local_window_height * 0.43f),
         ImGuiChildFlags_Border,
-        ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+        ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-            ImGuiWindowFlags_NoTitleBar |
             ImGuiWindowFlags_NoBringToFrontOnFocus);
     ImGui::PopStyleVar();
     ImGui::PopStyleColor();
@@ -52,7 +57,7 @@ int Render::LocalWindow() {
 
       ImGui::Spacing();
 
-      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
+      ImGui::SetNextItemWidth(io.DisplaySize.x * 0.25f);
       ImGui::SetWindowFontScale(1.0f);
       ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
 
@@ -76,8 +81,8 @@ int Render::LocalWindow() {
       ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0));
       ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0, 0, 0, 0));
       ImGui::SetWindowFontScale(0.5f);
-      if (ImGui::Button(ICON_FA_COPY,
+      if (ImGui::Button(ICON_FA_COPY, ImVec2(local_window_button_width,
-                        ImVec2(22 * dpi_scale_, 38 * dpi_scale_))) {
+                                             local_window_button_height))) {
         local_id_copied_ = true;
         ImGui::SetClipboardText(client_id_);
         copy_start_time_ = ImGui::GetTime();
@@ -87,17 +92,10 @@ int Render::LocalWindow() {
 
       double time_duration = ImGui::GetTime() - copy_start_time_;
       if (local_id_copied_ && time_duration < 1.0f) {
-        const ImGuiViewport* viewport = ImGui::GetMainViewport();
         ImGui::SetNextWindowPos(
-            ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+            ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
-                    notification_window_width_) /
-                       2,
-                   (viewport->WorkSize.y - viewport->WorkPos.y -
-                    notification_window_height_) /
-                       2));
-
         ImGui::SetNextWindowSize(
-            ImVec2(notification_window_width_, notification_window_height_));
+            ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
         ImGui::PushStyleColor(
             ImGuiCol_WindowBg,
             ImVec4(1.0f, 1.0f, 1.0f, 1.0f - (float)time_duration));
@@ -116,7 +114,7 @@ int Render::LocalWindow() {
             [localization_language_index_];
         auto text_width = ImGui::CalcTextSize(text.c_str()).x;
         ImGui::SetCursorPosX((window_width - text_width) * 0.5f);
-        ImGui::SetCursorPosY(window_height * 0.5f);
+        ImGui::SetCursorPosY(window_height * 0.4f);
         ImGui::PushStyleColor(ImGuiCol_Text,
                               ImVec4(0, 0, 0, 1.0f - (float)time_duration));
         ImGui::Text("%s", text.c_str());
@@ -135,7 +133,7 @@ int Render::LocalWindow() {
                   localization::password[localization_language_index_].c_str());
       ImGui::SetWindowFontScale(1.0f);
 
-      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
+      ImGui::SetNextItemWidth(io.DisplaySize.x * 0.25f);
       ImGui::Spacing();
 
       ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
@@ -157,55 +155,34 @@ int Render::LocalWindow() {
       ImGui::SetWindowFontScale(0.5f);
       auto l_x = ImGui::GetCursorScreenPos().x;
       auto l_y = ImGui::GetCursorScreenPos().y;
-      if (ImGui::Button(ICON_FA_EYE,
+      if (ImGui::Button(
-                        ImVec2(22 * dpi_scale_, 38 * dpi_scale_))) {
+              show_password_ ? ICON_FA_EYE : ICON_FA_EYE_SLASH,
+              ImVec2(local_window_button_width, local_window_button_height))) {
         show_password_ = !show_password_;
       }
 
-      if (!show_password_) {
-        ImDrawList* draw_list = ImGui::GetWindowDrawList();
-        draw_list->AddLine(
-            ImVec2(l_x + 3.0f * dpi_scale_, l_y + 12.5f * dpi_scale_),
-            ImVec2(l_x + 20.3f * dpi_scale_, l_y + 26.5f * dpi_scale_),
-            IM_COL32(239, 240, 242, 255), 2.0f);
-        draw_list->AddLine(
-            ImVec2(l_x + 3.0f * dpi_scale_, l_y + 11.0f * dpi_scale_),
-            ImVec2(l_x + 20.3f * dpi_scale_, l_y + 25.0f * dpi_scale_),
-            IM_COL32(0, 0, 0, 255), 1.5f);
-      }
-
       ImGui::SameLine();
 
-      if (ImGui::Button(ICON_FA_PEN,
+      if (ImGui::Button(ICON_FA_PEN, ImVec2(local_window_button_width,
-                        ImVec2(22 * dpi_scale_, 38 * dpi_scale_))) {
+                                            local_window_button_height))) {
         show_reset_password_window_ = true;
       }
       ImGui::SetWindowFontScale(1.0f);
       ImGui::PopStyleColor(3);
 
       if (show_reset_password_window_) {
-        const ImGuiViewport* viewport = ImGui::GetMainViewport();
-
         ImGui::SetNextWindowPos(
-            ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+            ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
-                    connection_status_window_width_) /
+        ImGui::SetNextWindowSize(
-                       2,
+            ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
-                   (viewport->WorkSize.y - viewport->WorkPos.y -
-                    connection_status_window_height_) /
-                       2));
-
-        ImGui::SetNextWindowSize(ImVec2(connection_status_window_width_,
-                                        connection_status_window_height_));
 
         ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
-
         ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
         ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
         ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
 
         ImGui::Begin("ResetPasswordWindow", nullptr,
-                     ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                     ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                         ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                          ImGuiWindowFlags_NoSavedSettings);
         ImGui::PopStyleVar(2);
         ImGui::PopStyleColor();
@@ -220,9 +197,9 @@ int Render::LocalWindow() {
         ImGui::SetCursorPosY(window_height * 0.2f);
         ImGui::Text("%s", text.c_str());
 
-        ImGui::SetCursorPosX((window_width - IPUT_WINDOW_WIDTH / 2) * 0.5f);
+        ImGui::SetCursorPosX(window_width * 0.33f);
         ImGui::SetCursorPosY(window_height * 0.4f);
-        ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH / 2);
+        ImGui::SetNextItemWidth(window_width * 0.33f);
 
         ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
 

src/gui/panels/recent_connections_panel.cpp

@@ -1,3 +1,4 @@
+#include "layout_relative.h"
 #include "localization.h"
 #include "rd_log.h"
 #include "render.h"
@@ -5,25 +6,25 @@
 namespace crossdesk {
 
 int Render::RecentConnectionsWindow() {
-  ImGui::SetNextWindowPos(
+  ImGuiIO& io = ImGui::GetIO();
-      ImVec2(0, title_bar_height_ + local_window_height_ - 1.0f),
+  float recent_connection_window_width = io.DisplaySize.x;
+  float recent_connection_window_height =
+      io.DisplaySize.y * (0.46f - STATUS_BAR_HEIGHT);
+  ImGui::SetNextWindowPos(ImVec2(0, io.DisplaySize.y * 0.55f),
                           ImGuiCond_Always);
   ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 0.0f));
   ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   ImGui::BeginChild(
       "RecentConnectionsWindow",
-      ImVec2(main_window_width_, main_window_height_ - title_bar_height_ -
+      ImVec2(recent_connection_window_width, recent_connection_window_height),
-                                     local_window_height_ - status_bar_height_ +
-                                     1.0f),
       ImGuiChildFlags_Border,
-      ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+      ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-          ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
           ImGuiWindowFlags_NoBringToFrontOnFocus);
   ImGui::PopStyleVar();
   ImGui::PopStyleColor();
 
-  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + main_window_text_y_padding_);
+  ImGui::SetCursorPos(
-  ImGui::Indent(main_child_window_x_padding_);
+      ImVec2(io.DisplaySize.x * 0.045f, io.DisplaySize.y * 0.02f));
 
   ImGui::TextColored(
       ImVec4(0.0f, 0.0f, 0.0f, 0.5f), "%s",
@@ -37,35 +38,40 @@ int Render::RecentConnectionsWindow() {
 }
 
 int Render::ShowRecentConnections() {
-  float recent_connection_window_padding = 25.0f * dpi_scale_;
+  ImGuiIO& io = ImGui::GetIO();
-  float recent_connection_window_width =
+  float recent_connection_panel_width = io.DisplaySize.x * 0.912f;
-      main_window_width_ - 2 * recent_connection_window_padding;
+  float recent_connection_panel_height = io.DisplaySize.y * 0.29f;
-  ImGui::SetCursorPosX(recent_connection_window_padding);
+  float recent_connection_image_height = recent_connection_panel_height * 0.6f;
-  ImVec2 sub_window_pos = ImGui::GetCursorPos();
+  float recent_connection_image_width = recent_connection_image_height * 16 / 9;
-  std::map<std::string, ImVec2> sub_containers_pos;
   float recent_connection_sub_container_width =
-      recent_connection_image_width_ + 16.0f * dpi_scale_;
+      recent_connection_image_width * 1.2f;
   float recent_connection_sub_container_height =
-      recent_connection_image_height_ + 36.0f * dpi_scale_;
+      recent_connection_image_height * 1.4f;
+  float recent_connection_button_width = recent_connection_image_width * 0.15f;
+  float recent_connection_button_height =
+      recent_connection_image_height * 0.25f;
+  float recent_connection_dummy_button_width =
+      recent_connection_image_width - 2 * recent_connection_button_width;
+
+  ImGui::SetCursorPos(
+      ImVec2(io.DisplaySize.x * 0.045f, io.DisplaySize.y * 0.1f));
+
+  std::map<std::string, ImVec2> sub_containers_pos;
   ImGui::PushStyleColor(ImGuiCol_ChildBg,
                         ImVec4(239.0f / 255, 240.0f / 255, 242.0f / 255, 1.0f));
   ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
-  ImGui::BeginChild("RecentConnectionsContainer",
+  ImGui::BeginChild(
-                    ImVec2(recent_connection_window_width,
+      "RecentConnectionsContainer",
-                           recent_connection_sub_container_height * 1.1f),
+      ImVec2(recent_connection_panel_width, recent_connection_panel_height),
       ImGuiChildFlags_Border,
-                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+      ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
           ImGuiWindowFlags_NoBringToFrontOnFocus |
           ImGuiWindowFlags_AlwaysHorizontalScrollbar |
-                        ImGuiWindowFlags_NoScrollbar |
           ImGuiWindowFlags_NoScrollWithMouse);
   ImGui::PopStyleVar();
   ImGui::PopStyleColor();
   size_t recent_connections_count = recent_connections_.size();
   int count = 0;
-  float button_width = 22 * dpi_scale_;
-  float button_height = 22 * dpi_scale_;
   for (auto& it : recent_connections_) {
     sub_containers_pos[it.first] = ImGui::GetCursorPos();
     std::string recent_connection_sub_window_name =
@@ -75,11 +81,8 @@ int Render::ShowRecentConnections() {
                       ImVec2(recent_connection_sub_container_width,
                              recent_connection_sub_container_height),
                       ImGuiChildFlags_None,
-                      ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                      ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                          ImGuiWindowFlags_NoMove |
+                          ImGuiWindowFlags_NoBringToFrontOnFocus);
-                          ImGuiWindowFlags_NoTitleBar |
-                          ImGuiWindowFlags_NoBringToFrontOnFocus |
-                          ImGuiWindowFlags_NoScrollbar);
     std::string connection_info = it.first;
 
     // remote id length is 9
@@ -118,15 +121,16 @@ int Render::ShowRecentConnections() {
       it.second.remote_host_name = "unknown";
     }
 
-    ImVec2 image_screen_pos =
+    ImVec2 image_screen_pos = ImVec2(
-        ImVec2(ImGui::GetCursorScreenPos().x + 5.0f * dpi_scale_,
+        ImGui::GetCursorScreenPos().x + recent_connection_image_width * 0.04f,
-               ImGui::GetCursorScreenPos().y + 5.0f * dpi_scale_);
+        ImGui::GetCursorScreenPos().y + recent_connection_image_height * 0.08f);
-    ImVec2 image_pos = ImVec2(ImGui::GetCursorPosX() + 5.0f * dpi_scale_,
+    ImVec2 image_pos =
-                              ImGui::GetCursorPosY() + 5.0f * dpi_scale_);
+        ImVec2(ImGui::GetCursorPosX() + recent_connection_image_width * 0.05f,
+               ImGui::GetCursorPosY() + recent_connection_image_height * 0.08f);
     ImGui::SetCursorPos(image_pos);
-    ImGui::Image((ImTextureID)(intptr_t)it.second.texture,
+    ImGui::Image(
-                 ImVec2((float)recent_connection_image_width_,
+        (ImTextureID)(intptr_t)it.second.texture,
-                        (float)recent_connection_image_height_));
+        ImVec2(recent_connection_image_width, recent_connection_image_height));
 
     // remote id display button
     {
@@ -135,16 +139,17 @@ int Render::ShowRecentConnections() {
       ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0, 0, 0, 0.2f));
 
       ImVec2 dummy_button_pos =
-          ImVec2(image_pos.x, image_pos.y + recent_connection_image_height_);
+          ImVec2(image_pos.x, image_pos.y + recent_connection_image_height);
       std::string dummy_button_name = "##DummyButton" + it.second.remote_id;
       ImGui::SetCursorPos(dummy_button_pos);
       ImGui::SetWindowFontScale(0.6f);
       ImGui::Button(dummy_button_name.c_str(),
-                    ImVec2(recent_connection_image_width_ - 2 * button_width,
+                    ImVec2(recent_connection_dummy_button_width,
-                           button_height));
+                           recent_connection_button_height));
       ImGui::SetWindowFontScale(1.0f);
-      ImGui::SetCursorPos(
+      ImGui::SetCursorPos(ImVec2(
-          ImVec2(dummy_button_pos.x + 2.0f, dummy_button_pos.y + 1.0f));
+          dummy_button_pos.x + recent_connection_dummy_button_width * 0.05f,
+          dummy_button_pos.y + recent_connection_button_height * 0.05f));
       ImGui::SetWindowFontScale(0.65f);
       ImGui::Text("%s", it.second.remote_id.c_str());
       ImGui::SetWindowFontScale(1.0f);
@@ -167,16 +172,18 @@ int Render::ShowRecentConnections() {
     ImGui::SetWindowFontScale(0.5f);
     // trash button
     {
-      ImVec2 trash_can_button_pos = ImVec2(
+      ImVec2 trash_can_button_pos =
-          image_pos.x + recent_connection_image_width_ - 2 * button_width,
+          ImVec2(image_pos.x + recent_connection_image_width -
-          image_pos.y + recent_connection_image_height_);
+                     2 * recent_connection_button_width,
+                 image_pos.y + recent_connection_image_height);
       ImGui::SetCursorPos(trash_can_button_pos);
       std::string trash_can = ICON_FA_TRASH_CAN;
       std::string recent_connection_delete_button_name =
           trash_can + "##RecentConnectionDelete" +
           std::to_string(trash_can_button_pos.x);
       if (ImGui::Button(recent_connection_delete_button_name.c_str(),
-                        ImVec2(button_width, button_height))) {
+                        ImVec2(recent_connection_button_width,
+                               recent_connection_button_height))) {
         show_confirm_delete_connection_ = true;
         delete_connection_name_ = it.first;
       }
@@ -192,14 +199,16 @@ int Render::ShowRecentConnections() {
     // connect button
     {
       ImVec2 connect_button_pos =
-          ImVec2(image_pos.x + recent_connection_image_width_ - button_width,
+          ImVec2(image_pos.x + recent_connection_image_width -
-                 image_pos.y + recent_connection_image_height_);
+                     recent_connection_button_width,
+                 image_pos.y + recent_connection_image_height);
       ImGui::SetCursorPos(connect_button_pos);
       std::string connect = ICON_FA_ARROW_RIGHT_LONG;
       std::string connect_to_this_connection_button_name =
           connect + "##ConnectionTo" + it.first;
       if (ImGui::Button(connect_to_this_connection_button_name.c_str(),
-                        ImVec2(button_width, button_height))) {
+                        ImVec2(recent_connection_button_width,
+                               recent_connection_button_height))) {
         ConnectTo(it.second.remote_id, it.second.password.c_str(),
                   it.second.remember_password);
       }
@@ -211,20 +220,20 @@ int Render::ShowRecentConnections() {
 
     if (count != recent_connections_count - 1) {
       ImVec2 line_start =
-          ImVec2(image_screen_pos.x + recent_connection_image_width_ +
+          ImVec2(image_screen_pos.x + recent_connection_image_width * 1.19f,
-                     20.0f * dpi_scale_,
                  image_screen_pos.y);
-      ImVec2 line_end = ImVec2(
+      ImVec2 line_end =
-          image_screen_pos.x + recent_connection_image_width_ +
+          ImVec2(image_screen_pos.x + recent_connection_image_width * 1.19f,
-              20.0f * dpi_scale_,
+                 image_screen_pos.y + recent_connection_image_height +
-          image_screen_pos.y + recent_connection_image_height_ + button_height);
+                     recent_connection_button_height);
       ImGui::GetWindowDrawList()->AddLine(line_start, line_end,
                                           IM_COL32(0, 0, 0, 122), 1.0f);
     }
 
     count++;
-    ImGui::SameLine(
+    ImGui::SameLine(0, count != recent_connections_count
-        0, count != recent_connections_count ? (25.0f * dpi_scale_) : 0.0f);
+                           ? (recent_connection_image_width * 0.165f)
+                           : 0.0f);
   }
 
   ImGui::EndChild();
@@ -237,32 +246,30 @@ int Render::ShowRecentConnections() {
 }
 
 int Render::ConfirmDeleteConnection() {
-  const ImGuiViewport* viewport = ImGui::GetMainViewport();
+  ImGuiIO& io = ImGui::GetIO();
-  ImGui::SetNextWindowPos(ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+  ImGui::SetNextWindowPos(
-                                  connection_status_window_width_) /
+      ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
-                                     2,
+  ImGui::SetNextWindowSize(
-                                 (viewport->WorkSize.y - viewport->WorkPos.y -
+      ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
-                                  connection_status_window_height_) /
-                                     2));
 
-  ImGui::SetNextWindowSize(ImVec2(connection_status_window_width_,
-                                  connection_status_window_height_));
   ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
   ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
   ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
   ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
 
   ImGui::Begin("ConfirmDeleteConnectionWindow", nullptr,
-               ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+               ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                   ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                    ImGuiWindowFlags_NoSavedSettings);
   ImGui::PopStyleVar(2);
   ImGui::PopStyleColor();
 
+  auto connection_status_window_width = ImGui::GetWindowSize().x;
+  auto connection_status_window_height = ImGui::GetWindowSize().y;
+
   std::string text =
       localization::confirm_delete_connection[localization_language_index_];
-  ImGui::SetCursorPosX(connection_status_window_width_ * 6 / 19);
+  ImGui::SetCursorPosX(connection_status_window_width * 0.33f);
-  ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+  ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
 
   // ok
   ImGui::SetWindowFontScale(0.5f);
@@ -281,12 +288,9 @@ int Render::ConfirmDeleteConnection() {
     show_confirm_delete_connection_ = false;
   }
 
-  auto window_width = ImGui::GetWindowSize().x;
-  auto window_height = ImGui::GetWindowSize().y;
-
   auto text_width = ImGui::CalcTextSize(text.c_str()).x;
-  ImGui::SetCursorPosX((window_width - text_width) * 0.5f);
+  ImGui::SetCursorPosX((connection_status_window_width - text_width) * 0.5f);
-  ImGui::SetCursorPosY(window_height * 0.2f);
+  ImGui::SetCursorPosY(connection_status_window_height * 0.2f);
   ImGui::Text("%s", text.c_str());
   ImGui::SetWindowFontScale(1.0f);
 

src/gui/panels/remote_peer_panel.cpp

@@ -1,4 +1,4 @@
-#include "layout.h"
+#include "layout_relative.h"
 #include "localization.h"
 #include "rd_log.h"
 #include "render.h"
@@ -8,21 +8,28 @@ namespace crossdesk {
 static int InputTextCallback(ImGuiInputTextCallbackData* data);
 
 int Render::RemoteWindow() {
-  ImGui::SetNextWindowPos(ImVec2(local_window_width_ + 1.0f, title_bar_height_),
+  ImGuiIO& io = ImGui::GetIO();
+  float remote_window_width = io.DisplaySize.x * 0.5f;
+  float remote_window_height =
+      io.DisplaySize.y * (1 - TITLE_BAR_HEIGHT - STATUS_BAR_HEIGHT);
+  float remote_window_arrow_button_width = io.DisplaySize.x * 0.1f;
+  float remote_window_arrow_button_height = io.DisplaySize.y * 0.078f;
+
+  ImGui::SetNextWindowPos(
+      ImVec2(io.DisplaySize.x * 0.5f, io.DisplaySize.y * TITLE_BAR_HEIGHT),
       ImGuiCond_Always);
   ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
 
-  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(0, 0, 0, 0));
   ImGui::BeginChild("RemoteDesktopWindow",
-                    ImVec2(remote_window_width_, remote_window_height_),
+                    ImVec2(remote_window_width, remote_window_height),
                     ImGuiChildFlags_None,
-                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                    ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                         ImGuiWindowFlags_NoBringToFrontOnFocus);
   ImGui::PopStyleColor();
 
-  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + main_window_text_y_padding_);
+  ImGui::SetCursorPos(
-  ImGui::Indent(main_child_window_x_padding_ - 1.0f);
+      ImVec2(io.DisplaySize.x * 0.057f, io.DisplaySize.y * 0.02f));
 
   ImGui::TextColored(
       ImVec4(0.0f, 0.0f, 0.0f, 0.5f), "%s",
@@ -31,8 +38,7 @@ int Render::RemoteWindow() {
   ImGui::Spacing();
   {
     ImGui::SetNextWindowPos(
-        ImVec2(local_window_width_ + main_child_window_x_padding_ - 1.0f,
+        ImVec2(io.DisplaySize.x * 0.557f, io.DisplaySize.y * 0.15f),
-               title_bar_height_ + main_child_window_y_padding_),
         ImGuiCond_Always);
     ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(239.0f / 255, 240.0f / 255,
                                                    242.0f / 255, 1.0f));
@@ -40,10 +46,9 @@ int Render::RemoteWindow() {
 
     ImGui::BeginChild(
         "RemoteDesktopWindow_1",
-        ImVec2(remote_child_window_width_, remote_child_window_height_),
+        ImVec2(remote_window_width * 0.8f, remote_window_height * 0.43f),
         ImGuiChildFlags_Border,
-        ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+        ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-            ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
             ImGuiWindowFlags_NoBringToFrontOnFocus);
     ImGui::PopStyleVar();
     ImGui::PopStyleColor();
@@ -53,7 +58,7 @@ int Render::RemoteWindow() {
           "%s", localization::remote_id[localization_language_index_].c_str());
 
       ImGui::Spacing();
-      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
+      ImGui::SetNextItemWidth(io.DisplaySize.x * 0.25f);
       ImGui::SetWindowFontScale(1.0f);
       ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
       if (re_enter_remote_id_) {
@@ -76,7 +81,8 @@ int Render::RemoteWindow() {
                                 static_cast<int (*)(int)>(&isspace)),
                       remote_id.end());
       if (ImGui::Button(ICON_FA_ARROW_RIGHT_LONG,
-                        ImVec2(55 * dpi_scale_, 38 * dpi_scale_)) ||
+                        ImVec2(remote_window_arrow_button_width,
+                               remote_window_arrow_button_height)) ||
           enter_pressed) {
         connect_button_pressed_ = true;
         bool found = false;
@@ -182,20 +188,13 @@ int Render::ConnectTo(const std::string& remote_id, const char* password,
         memcpy(&props->params_, &params_, sizeof(Params));
         props->params_.user_id = props->local_id_.c_str();
         props->peer_ = CreatePeer(&props->params_);
-        props->control_window_min_width_ =
+
-            props->control_window_min_width_ * dpi_scale_;
+        props->control_window_width_ = title_bar_button_height_ * 7.5f;
-        props->control_window_min_height_ =
+        props->control_window_height_ = title_bar_button_height_ * 1.16f;
-            props->control_window_min_height_ * dpi_scale_;
+        props->control_window_min_width_ = title_bar_button_height_ * 0.65f;
-        props->control_window_max_width_ =
+        props->control_window_min_height_ = title_bar_button_height_ * 1.16f;
-            props->control_window_max_width_ * dpi_scale_;
+        props->control_window_max_width_ = title_bar_button_height_ * 7.5f;
-        props->control_window_max_height_ =
+        props->control_window_max_height_ = title_bar_button_height_ * 6.0f;
-            props->control_window_max_height_ * dpi_scale_;
-        props->control_window_width_ =
-            props->control_window_width_ * dpi_scale_;
-        props->control_window_height_ =
-            props->control_window_height_ * dpi_scale_;
-        // props->control_bar_pos_x_ = props->control_bar_pos_x_ * dpi_scale_;
-        // props->control_bar_pos_y_ = props->control_bar_pos_y_ * dpi_scale_;
 
         if (!props->peer_) {
           LOG_INFO("Create peer [{}] instance failed", props->local_id_);

src/gui/render.cpp

@@ -11,7 +11,7 @@
 #include "device_controller_factory.h"
 #include "fa_regular_400.h"
 #include "fa_solid_900.h"
-#include "layout.h"
+#include "layout_relative.h"
 #include "localization.h"
 #include "platform.h"
 #include "rd_log.h"
@@ -661,21 +661,28 @@ int Render::CreateMainWindow() {
 
   ImGui::SetCurrentContext(main_ctx_);
 
-  dpi_scale_ = SDL_GetDisplayContentScale(SDL_GetPrimaryDisplay());
-  LOG_INFO("System DPI scale before window creation: [{}]", dpi_scale_);
-
-  UpdateWindowSizeWithDpiScale(dpi_scale_);
-
   if (!SDL_CreateWindowAndRenderer(
           "Remote Desk", (int)main_window_width_, (int)main_window_height_,
           SDL_WINDOW_HIGH_PIXEL_DENSITY | SDL_WINDOW_BORDERLESS |
               SDL_WINDOW_HIDDEN,
           &main_window_, &main_renderer_)) {
-    LOG_ERROR("Error creating main_window_ and main_renderer_: {}",
+    LOG_ERROR("Error creating MainWindow and MainRenderer: {}", SDL_GetError());
-              SDL_GetError());
     return -1;
   }
 
+  float dpi_scale = SDL_GetDisplayContentScale(SDL_GetPrimaryDisplay());
+  if (std::abs(dpi_scale_ - dpi_scale) > 0.01f) {
+    dpi_scale_ = dpi_scale;
+
+    main_window_width_ = (int)(main_window_width_ * dpi_scale_);
+    main_window_height_ = (int)(main_window_height_ * dpi_scale_);
+    stream_window_width_ = (int)(stream_window_width_ * dpi_scale_);
+    stream_window_height_ = (int)(stream_window_height_ * dpi_scale_);
+
+    SDL_SetWindowSize(main_window_, (int)main_window_width_,
+                      (int)main_window_height_);
+  }
+
   SDL_SetWindowResizable(main_window_, false);
 
   // for window region action
@@ -752,8 +759,6 @@ int Render::CreateStreamWindow() {
 
   SetupFontAndStyle(false);
 
-  SDL_SetRenderScale(stream_renderer_, dpi_scale_, dpi_scale_);
-
   ImGui_ImplSDL3_InitForSDLRenderer(stream_window_, stream_renderer_);
   ImGui_ImplSDLRenderer3_Init(stream_renderer_);
 
@@ -913,9 +918,10 @@ int Render::DrawMainWindow() {
   ImGui_ImplSDL3_NewFrame();
   ImGui::NewFrame();
 
+  ImGuiIO& io = ImGui::GetIO();
   ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   ImGui::SetNextWindowPos(ImVec2(0, 0), ImGuiCond_Always);
-  ImGui::SetNextWindowSize(ImVec2(main_window_width_, main_window_height_),
+  ImGui::SetNextWindowSize(ImVec2(io.DisplaySize.x, io.DisplaySize.y),
                            ImGuiCond_Always);
   ImGui::Begin("MainRender", nullptr,
                ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
@@ -927,7 +933,7 @@ int Render::DrawMainWindow() {
 
   MainWindow();
 
-  UpdateNotificationWindow();
+  // UpdateNotificationWindow();
 
 #ifdef __APPLE__
   if (show_request_permission_window_) {
@@ -938,7 +944,6 @@ int Render::DrawMainWindow() {
   ImGui::End();
 
   // Rendering
-  ImGuiIO& io = ImGui::GetIO();
   (void)io;
   ImGui::Render();
   SDL_SetRenderScale(main_renderer_, io.DisplayFramebufferScale.x,
@@ -964,10 +969,11 @@ int Render::DrawStreamWindow() {
   StreamWindow();
 
   if (!fullscreen_button_pressed_) {
+    ImGuiIO& io = ImGui::GetIO();
     ImGui::SetNextWindowPos(ImVec2(0, 0), ImGuiCond_Always);
     ImGui::SetNextWindowSize(
-        ImVec2(stream_window_width_,
+        ImVec2(io.DisplaySize.x,
-               fullscreen_button_pressed_ ? 0 : title_bar_height_),
+               fullscreen_button_pressed_ ? 0 : title_bar_button_height_),
         ImGuiCond_Always);
     ImGui::Begin("StreamWindowTitleBar", nullptr,
                  ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoDecoration |

src/gui/render.h

@@ -294,6 +294,8 @@ class Render {
   /* ------ all windows property start ------ */
   float title_bar_width_ = 640;
   float title_bar_height_ = 30;
+  float title_bar_button_width_ = 30;
+  float title_bar_button_height_ = 30;
   /* ------ all windows property end ------ */
 
   /* ------ main window property start ------ */

src/gui/toolbars/control_bar.cpp

@@ -32,32 +32,29 @@ int LossRateDisplay(float loss_rate) {
 }
 
 int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
-  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f * dpi_scale_);
+  float button_width = title_bar_button_height_ * 0.8f;
+  float button_height = title_bar_button_height_ * 0.8f;
+  float line_padding = title_bar_button_height_ * 0.12f;
+  float line_thickness = title_bar_button_height_ * 0.07f;
 
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
   if (props->control_bar_expand_) {
-    float button_width = 24.0f * dpi_scale_;
+    ImGui::SetCursorPosX(props->is_control_bar_in_left_
-    float button_height = 24.0f * dpi_scale_;
+                             ? props->control_window_width_ * 1.02f
-    float line_padding = 4.0f * dpi_scale_;
+                             : props->control_window_width_ * 0.23f);
 
-    ImGui::SetCursorPosX(
-        props->is_control_bar_in_left_
-            ? (props->control_window_width_ + 5.0f * dpi_scale_)
-            : 50.0f * dpi_scale_);
-    // mouse control button
     ImDrawList* draw_list = ImGui::GetWindowDrawList();
-
+    if (!props->is_control_bar_in_left_) {
-    if (props->is_control_bar_in_left_) {
       draw_list->AddLine(
-          ImVec2(ImGui::GetCursorScreenPos().x - 5.0f * dpi_scale_,
+          ImVec2(ImGui::GetCursorScreenPos().x - button_height * 0.48f,
-                 ImGui::GetCursorScreenPos().y - 7.0f * dpi_scale_),
+                 ImGui::GetCursorScreenPos().y + button_height * 0.2f),
-          ImVec2(ImGui::GetCursorScreenPos().x - 5.0f * dpi_scale_,
+          ImVec2(ImGui::GetCursorScreenPos().x - button_height * 0.48f,
-                 ImGui::GetCursorScreenPos().y - 7.0f * dpi_scale_ +
+                 ImGui::GetCursorScreenPos().y + button_height * 0.8f),
-                     props->control_window_height_),
+          IM_COL32(178, 178, 178, 255), 2.0f);
-          IM_COL32(178, 178, 178, 255), 1.0f);
     }
 
     std::string display = ICON_FA_DISPLAY;
-    ImGui::SetWindowFontScale(0.5f);
+    ImGui::SetWindowFontScale(0.8f);
     if (ImGui::Button(display.c_str(), ImVec2(button_width, button_height))) {
       ImGui::OpenPopup("display");
     }
@@ -66,7 +63,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     ImVec2 btn_size_actual = ImGui::GetItemRectSize();
 
     if (ImGui::BeginPopup("display")) {
-      ImGui::SetWindowFontScale(0.5f);
+      ImGui::SetWindowFontScale(0.8f);
       for (int i = 0; i < props->display_info_list_.size(); i++) {
         if (ImGui::Selectable(props->display_info_list_[i].name.c_str())) {
           props->selected_display_ = i;
@@ -90,7 +87,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
         std::to_string(props->selected_display_ + 1).c_str());
     ImVec2 text_pos =
         ImVec2(btn_min.x + (btn_size_actual.x - text_size.x) * 0.5f,
-               btn_min.y + (btn_size_actual.y - text_size.y) * 0.5f - 2.0f);
+               btn_min.y + (btn_size_actual.y - text_size.y) * 0.35f);
     ImGui::GetWindowDrawList()->AddText(
         text_pos, IM_COL32(0, 0, 0, 255),
         std::to_string(props->selected_display_ + 1).c_str());
@@ -103,6 +100,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     std::string mouse = props->mouse_control_button_pressed_
                             ? ICON_FA_COMPUTER_MOUSE
                             : ICON_FA_COMPUTER_MOUSE;
+    ImGui::SetWindowFontScale(0.8f);
     if (ImGui::Button(mouse.c_str(), ImVec2(button_width, button_height))) {
       if (props->connection_established_) {
         start_keyboard_capturer_ = !start_keyboard_capturer_;
@@ -117,7 +115,6 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     }
 
     if (!props->mouse_control_button_pressed_) {
-      float line_thickness = 2.0f * dpi_scale_;
       draw_list->AddLine(ImVec2(disable_mouse_x, disable_mouse_y),
                          ImVec2(mouse_x + button_width - line_padding,
                                 mouse_y + button_height - line_padding),
@@ -143,6 +140,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     std::string audio = props->audio_capture_button_pressed_
                             ? ICON_FA_VOLUME_HIGH
                             : ICON_FA_VOLUME_HIGH;
+    ImGui::SetWindowFontScale(0.8f);
     if (ImGui::Button(audio.c_str(), ImVec2(button_width, button_height))) {
       if (props->connection_established_) {
         props->audio_capture_button_pressed_ =
@@ -162,7 +160,6 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     }
 
     if (!props->audio_capture_button_pressed_) {
-      float line_thickness = 2.0f * dpi_scale_;
       draw_list->AddLine(ImVec2(disable_audio_x, disable_audio_y),
                          ImVec2(audio_x + button_width - line_padding,
                                 audio_y + button_height - line_padding),
@@ -187,6 +184,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
       button_color_style_pushed = true;
     }
     std::string net_traffic_stats = ICON_FA_SIGNAL;
+    ImGui::SetWindowFontScale(0.8f);
     if (ImGui::Button(net_traffic_stats.c_str(),
                       ImVec2(button_width, button_height))) {
       props->net_traffic_stats_button_pressed_ =
@@ -210,6 +208,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     // fullscreen button
     std::string fullscreen =
         fullscreen_button_pressed_ ? ICON_FA_COMPRESS : ICON_FA_EXPAND;
+    ImGui::SetWindowFontScale(0.8f);
     if (ImGui::Button(fullscreen.c_str(),
                       ImVec2(button_width, button_height))) {
       fullscreen_button_pressed_ = !fullscreen_button_pressed_;
@@ -229,6 +228,7 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
     ImGui::SameLine();
     // close button
     std::string close_button = ICON_FA_XMARK;
+    ImGui::SetWindowFontScale(0.8f);
     if (ImGui::Button(close_button.c_str(),
                       ImVec2(button_width, button_height))) {
       CleanupPeer(props);
@@ -236,20 +236,27 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
 
     ImGui::SameLine();
 
-    if (!props->is_control_bar_in_left_) {
+    if (props->is_control_bar_in_left_) {
-      draw_list->AddLine(ImVec2(ImGui::GetCursorScreenPos().x - 3.0f,
+      draw_list->AddLine(
-                                ImGui::GetCursorScreenPos().y - 7.0f),
+          ImVec2(ImGui::GetCursorScreenPos().x + button_height * 0.2f,
-                         ImVec2(ImGui::GetCursorScreenPos().x - 3.0f,
+                 ImGui::GetCursorScreenPos().y + button_height * 0.2f),
-                                ImGui::GetCursorScreenPos().y - 7.0f +
+          ImVec2(ImGui::GetCursorScreenPos().x + button_height * 0.2f,
-                                    props->control_window_height_),
+                 ImGui::GetCursorScreenPos().y + button_height * 0.8f),
-                         IM_COL32(178, 178, 178, 255), 1.0f);
+          IM_COL32(178, 178, 178, 255), 2.0f);
-    }
     }
 
-  ImGui::SetCursorPosX(
+    ImGui::SameLine();
-      props->is_control_bar_in_left_
+  }
-          ? (props->control_window_width_ * 2 - 20.0f * dpi_scale_)
+
-          : 5.0f * dpi_scale_);
+  float expand_button_pos_x =
+      props->control_bar_expand_ ? (props->is_control_bar_in_left_
+                                        ? props->control_window_width_ * 1.9f
+                                        : props->control_window_width_ * 0.03f)
+                                 : (props->is_control_bar_in_left_
+                                        ? props->control_window_width_ * 1.02f
+                                        : props->control_window_width_ * 0.23f);
+
+  ImGui::SetCursorPosX(expand_button_pos_x);
 
   std::string control_bar =
       props->control_bar_expand_
@@ -258,13 +265,13 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
           : (props->is_control_bar_in_left_ ? ICON_FA_ANGLE_RIGHT
                                             : ICON_FA_ANGLE_LEFT);
   if (ImGui::Button(control_bar.c_str(),
-                    ImVec2(15.0f * dpi_scale_, 25.0f * dpi_scale_))) {
+                    ImVec2(button_height * 0.6f, button_height))) {
     props->control_bar_expand_ = !props->control_bar_expand_;
     props->control_bar_button_pressed_time_ = ImGui::GetTime();
     props->control_window_width_is_changing_ = true;
 
     if (!props->control_bar_expand_) {
-      props->control_window_height_ = 35 * dpi_scale_;
+      props->control_window_height_ = props->control_window_min_height_;
       props->net_traffic_stats_button_pressed_ = false;
     }
   }
@@ -280,12 +287,13 @@ int Render::ControlBar(std::shared_ptr<SubStreamWindowProperties>& props) {
 
 int Render::NetTrafficStats(std::shared_ptr<SubStreamWindowProperties>& props) {
   ImGui::SetCursorPos(ImVec2(props->is_control_bar_in_left_
-                                 ? (props->control_window_width_ + 5.0f)
+                                 ? props->control_window_width_ * 1.02f
-                                 : 5.0f,
+                                 : props->control_window_width_ * 0.02f,
-                             35.0f * dpi_scale_));
+                             props->control_window_min_height_));
+  ImGui::SetWindowFontScale(0.8f);
   if (ImGui::BeginTable("NetTrafficStats", 4, ImGuiTableFlags_BordersH,
-                        ImVec2(props->control_window_max_width_ - 10.0f,
+                        ImVec2(props->control_window_max_width_ * 0.9f,
-                               props->control_window_max_height_ - 60.0f))) {
+                               props->control_window_max_height_ - 0.9f))) {
     ImGui::TableSetupColumn("", ImGuiTableColumnFlags_WidthFixed);
     ImGui::TableSetupColumn("", ImGuiTableColumnFlags_WidthStretch);
     ImGui::TableSetupColumn("", ImGuiTableColumnFlags_WidthStretch);
@@ -344,9 +352,12 @@ int Render::NetTrafficStats(std::shared_ptr<SubStreamWindowProperties>& props) {
     ImGui::Text("FPS");
     ImGui::TableNextColumn();
     ImGui::Text("%d", props->fps_);
+    ImGui::TableNextColumn();
+    ImGui::TableNextColumn();
 
     ImGui::EndTable();
   }
+  ImGui::SetWindowFontScale(1.0f);
 
   return 0;
 }

src/gui/toolbars/status_bar.cpp

@@ -1,34 +1,38 @@
+#include "layout_relative.h"
 #include "localization.h"
 #include "render.h"
 
 namespace crossdesk {
 
 int Render::StatusBar() {
+  ImGuiIO& io = ImGui::GetIO();
+  float status_bar_width = io.DisplaySize.x;
+  float status_bar_height = io.DisplaySize.y * STATUS_BAR_HEIGHT;
+
   ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   static bool a, b, c, d, e;
-  ImGui::SetNextWindowPos(
+  ImGui::SetNextWindowPos(ImVec2(0, io.DisplaySize.y * (1 - STATUS_BAR_HEIGHT)),
-      ImVec2(0, main_window_height_ - status_bar_height_ - 1),
                           ImGuiCond_Always);
 
   ImGui::BeginChild(
-      "StatusBar", ImVec2(main_window_width_, status_bar_height_ + 1),
+      "StatusBar", ImVec2(status_bar_width, status_bar_height),
       ImGuiChildFlags_Border,
       ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoBringToFrontOnFocus);
 
-  ImVec2 dot_pos = ImVec2(13.0f * dpi_scale_,
+  ImVec2 dot_pos = ImVec2(status_bar_width * 0.025f,
-                          (main_window_height_ - status_bar_height_) * 1.025f);
+                          io.DisplaySize.y * (1 - STATUS_BAR_HEIGHT * 0.5f));
   ImDrawList* draw_list = ImGui::GetWindowDrawList();
-  draw_list->AddCircleFilled(dot_pos, 5.0f * dpi_scale_,
+  draw_list->AddCircleFilled(dot_pos, status_bar_height * 0.2f,
                              ImColor(signal_connected_ ? 0.0f : 1.0f,
                                      signal_connected_ ? 1.0f : 0.0f, 0.0f),
                              100);
-  draw_list->AddCircle(dot_pos, 6.0f * dpi_scale_, ImColor(1.0f, 1.0f, 1.0f),
+  draw_list->AddCircle(dot_pos, status_bar_height * 0.25f,
-                       100);
+                       ImColor(1.0f, 1.0f, 1.0f), 100);
 
   ImGui::SetWindowFontScale(0.6f);
   draw_list->AddText(
-      ImVec2(25.0f * dpi_scale_,
+      ImVec2(status_bar_width * 0.045f,
-             (main_window_height_ - status_bar_height_) * 1.003f),
+             io.DisplaySize.y * (1 - STATUS_BAR_HEIGHT * 0.9f)),
       ImColor(0.0f, 0.0f, 0.0f),
       signal_connected_
           ? localization::signal_connected[localization_language_index_].c_str()

src/gui/toolbars/title_bar.cpp

@@ -1,40 +1,85 @@
+#include "layout_relative.h"
 #include "localization.h"
 #include "rd_log.h"
 #include "render.h"
 
-#define BUTTON_PADDING 36.0f * dpi_scale_
 #define NEW_VERSION_ICON_RENDER_TIME_INTERVAL 2000
 
 namespace crossdesk {
 
 int Render::TitleBar(bool main_window) {
-  ImGui::PushStyleColor(ImGuiCol_MenuBarBg, ImVec4(1.0f, 1.0f, 1.0f, 0.0f));
+  ImGuiIO& io = ImGui::GetIO();
-  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  float title_bar_width = title_bar_width_;
-  ImGui::SetNextWindowPos(ImVec2(0, 0), ImGuiCond_Always);
+  float title_bar_height = title_bar_height_;
-  ImGui::BeginChild(
+  float title_bar_button_width = title_bar_button_width_;
-      main_window ? "MainTitleBar" : "StreamTitleBar",
+  float title_bar_button_height = title_bar_button_height_;
-      ImVec2(main_window ? main_window_width_ : stream_window_width_,
+  if (main_window) {
-             title_bar_height_),
+    title_bar_width = io.DisplaySize.x;
-      ImGuiChildFlags_Border,
+    title_bar_height = io.DisplaySize.y * (TITLE_BAR_HEIGHT + 0.01f);
-      ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_NoDecoration |
+    title_bar_button_width = io.DisplaySize.x * TITLE_BAR_BUTTON_WIDTH;
-          ImGuiWindowFlags_NoBringToFrontOnFocus);
+    title_bar_button_height = io.DisplaySize.y * TITLE_BAR_BUTTON_HEIGHT;
+    title_bar_height_ = title_bar_height;
+    title_bar_button_width_ = title_bar_button_width;
+    title_bar_button_height_ = title_bar_button_height;
+  } else {
+    title_bar_width = io.DisplaySize.x;
+    title_bar_height = title_bar_button_height_;
+    title_bar_button_width = title_bar_button_width_;
+    title_bar_button_height = title_bar_button_height_;
+  }
 
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0, 0));
+  ImGui::SetNextWindowPos(ImVec2(0, 0), ImGuiCond_Always);
+  ImGui::BeginChild(main_window ? "MainTitleBar" : "StreamTitleBar",
+                    ImVec2(title_bar_width, title_bar_height),
+                    ImGuiChildFlags_Border,
+                    ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
+                        ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleVar();
   ImGui::PopStyleColor();
 
+  // get draw list
   ImDrawList* draw_list = ImGui::GetWindowDrawList();
-  if (ImGui::BeginMenuBar()) {
+
-    ImGui::SetWindowFontScale(0.8f);
+  ImGui::SetCursorPos(
-    ImGui::SetCursorPosX(
+      ImVec2(title_bar_width - title_bar_button_width * 3, 0.0f));
-        (main_window ? main_window_width_ : stream_window_width_) -
-        (BUTTON_PADDING * 3 - 3.0f * dpi_scale_));
-    ImGui::PushStyleColor(ImGuiCol_HeaderHovered, ImVec4(0, 0, 0, 0.1f));
-    ImGui::PushStyleColor(ImGuiCol_HeaderActive,
-                          ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   if (main_window) {
-      float bar_pos_x = ImGui::GetCursorPosX() + 6 * dpi_scale_;
+    float bar_pos_x = title_bar_width - title_bar_button_width * 3 +
-      float bar_pos_y = ImGui::GetCursorPosY() + 15 * dpi_scale_;
+                      title_bar_button_width * 0.33f;
-      std::string menu_button = "    ";  // ICON_FA_BARS;
+    float bar_pos_y = title_bar_button_height * 0.5f;
-      if (ImGui::BeginMenu(menu_button.c_str())) {
+
+    // draw menu icon
+    float menu_bar_line_size = title_bar_button_width * 0.33f;
+    draw_list->AddLine(
+        ImVec2(bar_pos_x, bar_pos_y - title_bar_button_height * 0.15f),
+        ImVec2(bar_pos_x + menu_bar_line_size,
+               bar_pos_y - title_bar_button_height * 0.15f),
+        IM_COL32(0, 0, 0, 255));
+    draw_list->AddLine(ImVec2(bar_pos_x, bar_pos_y),
+                       ImVec2(bar_pos_x + menu_bar_line_size, bar_pos_y),
+                       IM_COL32(0, 0, 0, 255));
+    draw_list->AddLine(
+        ImVec2(bar_pos_x, bar_pos_y + title_bar_button_height * 0.15f),
+        ImVec2(bar_pos_x + menu_bar_line_size,
+               bar_pos_y + title_bar_button_height * 0.15f),
+        IM_COL32(0, 0, 0, 255));
+
+    std::string title_bar_menu_button = "##title_bar_menu";  // ICON_FA_BARS;
+    std::string title_bar_menu = "##title_bar_menu";
+
+    ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
+    ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0.1f));
+    ImGui::PushStyleColor(ImGuiCol_ButtonActive,
+                          ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+    if (ImGui::Button(
+            title_bar_menu_button.c_str(),
+            ImVec2(title_bar_button_width, title_bar_button_height))) {
+      ImGui::OpenPopup(title_bar_menu.c_str());
+    }
+    ImGui::PopStyleColor(3);
+
+    if (ImGui::BeginPopup(title_bar_menu.c_str())) {
       ImGui::SetWindowFontScale(0.6f);
       if (ImGui::MenuItem(
               localization::settings[localization_language_index_].c_str())) {
@@ -43,11 +88,9 @@ int Render::TitleBar(bool main_window) {
 
       show_new_version_icon_in_menu_ = false;
 
-        std::string about_str =
+      std::string about_str = localization::about[localization_language_index_];
-            localization::about[localization_language_index_];
       if (update_available_) {
-          auto now_time =
+        auto now_time = std::chrono::duration_cast<std::chrono::milliseconds>(
-              std::chrono::duration_cast<std::chrono::milliseconds>(
                             std::chrono::steady_clock::now().time_since_epoch())
                             .count();
 
@@ -79,8 +122,7 @@ int Render::TitleBar(bool main_window) {
         ImGui::BeginTooltip();
         ImGui::SetWindowFontScale(0.5f * dpi_scale_);
         std::string new_version_available_str =
-              localization::new_version_available
+            localization::new_version_available[localization_language_index_] +
-                  [localization_language_index_] +
             ": " + latest_version_;
         ImGui::Text("%s", new_version_available_str.c_str());
         ImGui::SetWindowFontScale(1.0f);
@@ -92,17 +134,6 @@ int Render::TitleBar(bool main_window) {
       show_new_version_icon_in_menu_ = true;
     }
 
-      float menu_bar_line_size = 15.0f * dpi_scale_;
-      draw_list->AddLine(ImVec2(bar_pos_x, bar_pos_y - 6),
-                         ImVec2(bar_pos_x + menu_bar_line_size, bar_pos_y - 6),
-                         IM_COL32(0, 0, 0, 255));
-      draw_list->AddLine(ImVec2(bar_pos_x, bar_pos_y),
-                         ImVec2(bar_pos_x + menu_bar_line_size, bar_pos_y),
-                         IM_COL32(0, 0, 0, 255));
-      draw_list->AddLine(ImVec2(bar_pos_x, bar_pos_y + 6),
-                         ImVec2(bar_pos_x + menu_bar_line_size, bar_pos_y + 6),
-                         IM_COL32(0, 0, 0, 255));
-
     if (update_available_ && show_new_version_icon_in_menu_) {
       auto now_time = std::chrono::duration_cast<std::chrono::milliseconds>(
                           std::chrono::steady_clock::now().time_since_epoch())
@@ -139,87 +170,104 @@ int Render::TitleBar(bool main_window) {
     ImGui::SetWindowFontScale(1.2f);
   }
 
-    ImGui::PopStyleColor(2);
+  ImGui::SetCursorPos(ImVec2(
-
+      title_bar_width - title_bar_button_width * (main_window ? 2 : 3), 0.0f));
   ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
-    ImGui::SetCursorPosX(main_window
-                             ? (main_window_width_ - BUTTON_PADDING * 2)
-                             : (stream_window_width_ - BUTTON_PADDING * 3));
   ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0.1f));
-    ImGui::PushStyleColor(ImGuiCol_ButtonActive,
+  ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
-                          ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
 
-    float minimize_pos_x = ImGui::GetCursorPosX() + 12.0f * dpi_scale_;
+  float minimize_pos_x = title_bar_width -
-    float minimize_pos_y = ImGui::GetCursorPosY() + 15.0f * dpi_scale_;
+                         title_bar_button_width * (main_window ? 2 : 3) +
+                         title_bar_button_width * 0.33f;
+  float minimize_pos_y = title_bar_button_height * 0.5f;
   std::string window_minimize_button = "##minimize";  // ICON_FA_MINUS;
   if (ImGui::Button(window_minimize_button.c_str(),
-                      ImVec2(BUTTON_PADDING, 30.0f * dpi_scale_))) {
+                    ImVec2(title_bar_button_width, title_bar_button_height))) {
     SDL_MinimizeWindow(main_window ? main_window_ : stream_window_);
   }
-    draw_list->AddLine(ImVec2(minimize_pos_x, minimize_pos_y),
+  draw_list->AddLine(
-                       ImVec2(minimize_pos_x + 12 * dpi_scale_, minimize_pos_y),
+      ImVec2(minimize_pos_x, minimize_pos_y),
+      ImVec2(minimize_pos_x + title_bar_button_width * 0.33f, minimize_pos_y),
       IM_COL32(0, 0, 0, 255));
-    ImGui::PopStyleColor(2);
+  ImGui::PopStyleColor(3);
 
   if (!main_window) {
-      ImGui::SetCursorPosX(stream_window_width_ - BUTTON_PADDING * 2);
+    ImGui::SetCursorPos(
+        ImVec2(title_bar_width - title_bar_button_width * 2, 0.0f));
+    ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
     ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0.1f));
     ImGui::PushStyleColor(ImGuiCol_ButtonActive,
                           ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
 
     if (window_maximized_) {
-        float pos_x_top = ImGui::GetCursorPosX() + 11 * dpi_scale_;
+      float pos_x_top = title_bar_width - title_bar_button_width * 1.65f;
-        float pos_y_top = ImGui::GetCursorPosY() + 11 * dpi_scale_;
+      float pos_y_top = title_bar_button_height * 0.36f;
-        float pos_x_bottom = ImGui::GetCursorPosX() + 13 * dpi_scale_;
+      float pos_x_bottom = title_bar_width - title_bar_button_width * 1.6f;
-        float pos_y_bottom = ImGui::GetCursorPosY() + 9 * dpi_scale_;
+      float pos_y_bottom = title_bar_button_height * 0.28f;
       std::string window_restore_button =
           "##restore";  // ICON_FA_WINDOW_RESTORE;
-        if (ImGui::Button(window_restore_button.c_str(),
+      if (ImGui::Button(
-                          ImVec2(BUTTON_PADDING, 30.0f * dpi_scale_))) {
+              window_restore_button.c_str(),
+              ImVec2(title_bar_button_width, title_bar_button_height))) {
         SDL_RestoreWindow(stream_window_);
         window_maximized_ = false;
       }
-        draw_list->AddRect(
+      draw_list->AddRect(ImVec2(pos_x_top, pos_y_top),
-            ImVec2(pos_x_top, pos_y_top),
+                         ImVec2(pos_x_top + title_bar_button_height * 0.33f,
-            ImVec2(pos_x_top + 12 * dpi_scale_, pos_y_top + 12 * dpi_scale_),
+                                pos_y_top + title_bar_button_height * 0.33f),
                          IM_COL32(0, 0, 0, 255));
       draw_list->AddRect(ImVec2(pos_x_bottom, pos_y_bottom),
-                           ImVec2(pos_x_bottom + 12 * dpi_scale_,
+                         ImVec2(pos_x_bottom + title_bar_button_height * 0.33f,
-                                  pos_y_bottom + 12 * dpi_scale_),
+                                pos_y_bottom + title_bar_button_height * 0.33f),
                          IM_COL32(0, 0, 0, 255));
+      if (ImGui::IsItemHovered()) {
         draw_list->AddRectFilled(
-            ImVec2(pos_x_top + 1 * dpi_scale_, pos_y_top + 1 * dpi_scale_),
+            ImVec2(pos_x_top + title_bar_button_height * 0.02f,
-            ImVec2(pos_x_top + 11 * dpi_scale_, pos_y_top + 11 * dpi_scale_),
+                   pos_y_top + title_bar_button_height * 0.01f),
-            IM_COL32(255, 255, 255, 255));
+            ImVec2(pos_x_top + title_bar_button_height * 0.32f,
+                   pos_y_top + title_bar_button_height * 0.31f),
+            IM_COL32(229, 229, 229, 255));
       } else {
-        float maximize_pos_x = ImGui::GetCursorPosX() + 12 * dpi_scale_;
+        draw_list->AddRectFilled(
-        float maximize_pos_y = ImGui::GetCursorPosY() + 10 * dpi_scale_;
+            ImVec2(pos_x_top + title_bar_button_height * 0.02f,
+                   pos_y_top + title_bar_button_height * 0.01f),
+            ImVec2(pos_x_top + title_bar_button_height * 0.32f,
+                   pos_y_top + title_bar_button_height * 0.31f),
+            IM_COL32(255, 255, 255, 255));
+      }
+    } else {
+      float maximize_pos_x = title_bar_width - title_bar_button_width * 1.5f -
+                             title_bar_button_height * 0.165f;
+      float maximize_pos_y = title_bar_button_height * 0.33f;
       std::string window_maximize_button =
           "##maximize";  // ICON_FA_SQUARE_FULL;
-        if (ImGui::Button(window_maximize_button.c_str(),
+      if (ImGui::Button(
-                          ImVec2(BUTTON_PADDING, 30.0f * dpi_scale_))) {
+              window_maximize_button.c_str(),
+              ImVec2(title_bar_button_width, title_bar_button_height))) {
         SDL_MaximizeWindow(stream_window_);
         window_maximized_ = !window_maximized_;
       }
-        draw_list->AddRect(ImVec2(maximize_pos_x, maximize_pos_y),
+      draw_list->AddRect(
-                           ImVec2(maximize_pos_x + 12, maximize_pos_y + 12),
+          ImVec2(maximize_pos_x, maximize_pos_y),
+          ImVec2(maximize_pos_x + title_bar_button_height * 0.33f,
+                 maximize_pos_y + title_bar_button_height * 0.33f),
           IM_COL32(0, 0, 0, 255));
     }
-      ImGui::PopStyleColor(2);
+    ImGui::PopStyleColor(3);
   }
 
-    ImGui::SetCursorPosX(
+  float xmark_button_pos_x = title_bar_width - title_bar_button_width;
-        (main_window ? main_window_width_ : stream_window_width_) -
+  ImGui::SetCursorPos(ImVec2(xmark_button_pos_x, 0.0f));
-        BUTTON_PADDING);
+  ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
   ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(1.0f, 0, 0, 1.0f));
   ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(1.0f, 0, 0, 0.5f));
 
-    float xmark_pos_x = ImGui::GetCursorPosX() + 18 * dpi_scale_;
+  float xmark_pos_x = xmark_button_pos_x + title_bar_button_width * 0.5f;
-    float xmark_pos_y = ImGui::GetCursorPosY() + 16 * dpi_scale_;
+  float xmark_pos_y = title_bar_button_height * 0.5f;
-    float xmark_size = 12.0f * dpi_scale_;
+  float xmark_size = title_bar_button_width * 0.33f;
   std::string close_button = "##xmark";  // ICON_FA_XMARK;
   if (ImGui::Button(close_button.c_str(),
-                      ImVec2(BUTTON_PADDING, 30.0f * dpi_scale_))) {
+                    ImVec2(title_bar_button_width, title_bar_button_height))) {
 #if _WIN32
     if (enable_minimize_to_tray_) {
       tray_->MinimizeToTray();
@@ -237,20 +285,15 @@ int Render::TitleBar(bool main_window) {
                      ImVec2(xmark_pos_x + xmark_size / 2 - 1.5f,
                             xmark_pos_y + xmark_size / 2 - 0.5f),
                      IM_COL32(0, 0, 0, 255));
-    draw_list->AddLine(ImVec2(xmark_pos_x + xmark_size / 2 - 1.75f,
+  draw_list->AddLine(
+      ImVec2(xmark_pos_x + xmark_size / 2 - 1.75f,
              xmark_pos_y - xmark_size / 2 + 0.75f),
-                       ImVec2(xmark_pos_x - xmark_size / 2,
+      ImVec2(xmark_pos_x - xmark_size / 2, xmark_pos_y + xmark_size / 2 - 1.0f),
-                              xmark_pos_y + xmark_size / 2 - 1.0f),
       IM_COL32(0, 0, 0, 255));
 
-    ImGui::PopStyleColor(2);
+  ImGui::PopStyleColor(3);
 
-    ImGui::PopStyleColor();
-  }
-
-  ImGui::EndMenuBar();
   ImGui::EndChild();
-  ImGui::PopStyleColor();
   return 0;
 }
 }  // namespace crossdesk

src/gui/windows/connection_status_window.cpp

@@ -7,42 +7,39 @@ namespace crossdesk {
 
 bool Render::ConnectionStatusWindow(
     std::shared_ptr<SubStreamWindowProperties>& props) {
-  const ImGuiViewport* viewport = ImGui::GetMainViewport();
+  ImGuiIO& io = ImGui::GetIO();
   bool ret_flag = false;
-  ImGui::SetNextWindowPos(ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
-                                  connection_status_window_width_) /
-                                     2,
-                                 (viewport->WorkSize.y - viewport->WorkPos.y -
-                                  connection_status_window_height_) /
-                                     2));
 
-  ImGui::SetNextWindowSize(ImVec2(connection_status_window_width_,
+  ImGui::SetNextWindowPos(
-                                  connection_status_window_height_));
+      ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
+  ImGui::SetNextWindowSize(
+      ImVec2(io.DisplaySize.x * 0.33f, io.DisplaySize.y * 0.33f));
 
   ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
-
+  ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
-  ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
   ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
   ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
 
   ImGui::Begin("ConnectionStatusWindow", nullptr,
-               ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+               ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                   ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                    ImGuiWindowFlags_NoSavedSettings);
   ImGui::PopStyleVar(2);
   ImGui::PopStyleColor();
 
+  auto connection_status_window_width = ImGui::GetWindowSize().x;
+  auto connection_status_window_height = ImGui::GetWindowSize().y;
+
   ImGui::SetWindowFontScale(0.5f);
   std::string text;
 
   if (ConnectionStatus::Connecting == props->connection_status_) {
     text = localization::p2p_connecting[localization_language_index_];
-    ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+    ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-    ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+    ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
   } else if (ConnectionStatus::Connected == props->connection_status_) {
     text = localization::p2p_connected[localization_language_index_];
-    ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+    ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-    ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+    ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
     // ok
     if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
         ImGui::IsKeyPressed(ImGuiKey_Enter) ||
@@ -51,8 +48,8 @@ bool Render::ConnectionStatusWindow(
     }
   } else if (ConnectionStatus::Disconnected == props->connection_status_) {
     text = localization::p2p_disconnected[localization_language_index_];
-    ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+    ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-    ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+    ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
     // ok
     if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
         ImGui::IsKeyPressed(ImGuiKey_Enter) ||
@@ -61,8 +58,8 @@ bool Render::ConnectionStatusWindow(
     }
   } else if (ConnectionStatus::Failed == props->connection_status_) {
     text = localization::p2p_failed[localization_language_index_];
-    ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+    ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-    ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+    ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
     // ok
     if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
         ImGui::IsKeyPressed(ImGuiKey_Enter) ||
@@ -71,8 +68,8 @@ bool Render::ConnectionStatusWindow(
     }
   } else if (ConnectionStatus::Closed == props->connection_status_) {
     text = localization::p2p_closed[localization_language_index_];
-    ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+    ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-    ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+    ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
     // ok
     if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
         ImGui::IsKeyPressed(ImGuiKey_Enter) ||
@@ -87,11 +84,9 @@ bool Render::ConnectionStatusWindow(
         text = localization::reinput_password[localization_language_index_];
       }
 
-      auto window_width = ImGui::GetWindowSize().x;
+      ImGui::SetCursorPosX(connection_status_window_width * 0.336f);
-      auto window_height = ImGui::GetWindowSize().y;
+      ImGui::SetCursorPosY(connection_status_window_height * 0.4f);
-      ImGui::SetCursorPosX((window_width - IPUT_WINDOW_WIDTH / 2) * 0.5f);
+      ImGui::SetNextItemWidth(connection_status_window_width * 0.33f);
-      ImGui::SetCursorPosY(window_height * 0.4f);
-      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH / 2);
 
       ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
 
@@ -109,15 +104,16 @@ bool Render::ConnectionStatusWindow(
       ImVec2 text_size = ImGui::CalcTextSize(
           localization::remember_password[localization_language_index_]
               .c_str());
-      ImGui::SetCursorPosX((window_width - text_size.x) * 0.5f - 13.0f);
+      ImGui::SetCursorPosX((connection_status_window_width - text_size.x) *
+                           0.45f);
       ImGui::Checkbox(
           localization::remember_password[localization_language_index_].c_str(),
           &(props->remember_password_));
       ImGui::SetWindowFontScale(0.5f);
       ImGui::PopStyleVar();
 
-      ImGui::SetCursorPosX(window_width * 0.315f);
+      ImGui::SetCursorPosX(connection_status_window_width * 0.325f);
-      ImGui::SetCursorPosY(window_height * 0.75f);
+      ImGui::SetCursorPosY(connection_status_window_height * 0.75f);
       // ok
       if (ImGui::Button(
               localization::ok[localization_language_index_].c_str()) ||
@@ -140,14 +136,14 @@ bool Render::ConnectionStatusWindow(
       }
     } else if (password_validating_) {
       text = localization::validate_password[localization_language_index_];
-      ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+      ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-      ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+      ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
     }
   } else if (ConnectionStatus::NoSuchTransmissionId ==
              props->connection_status_) {
     text = localization::no_such_id[localization_language_index_];
-    ImGui::SetCursorPosX(connection_status_window_width_ * 3 / 7);
+    ImGui::SetCursorPosX(connection_status_window_width * 0.43f);
-    ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+    ImGui::SetCursorPosY(connection_status_window_height * 0.67f);
     // ok
     if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
         ImGui::IsKeyPressed(ImGuiKey_Enter)) {
@@ -158,11 +154,9 @@ bool Render::ConnectionStatusWindow(
     }
   }
 
-  auto window_width = ImGui::GetWindowSize().x;
-  auto window_height = ImGui::GetWindowSize().y;
   auto text_width = ImGui::CalcTextSize(text.c_str()).x;
-  ImGui::SetCursorPosX((window_width - text_width) * 0.5f);
+  ImGui::SetCursorPosX((connection_status_window_width - text_width) * 0.5f);
-  ImGui::SetCursorPosY(window_height * 0.2f);
+  ImGui::SetCursorPosY(connection_status_window_height * 0.2f);
   ImGui::Text("%s", text.c_str());
   ImGui::SetWindowFontScale(1.0f);
 

src/gui/windows/control_window.cpp

@@ -53,11 +53,11 @@ int Render::ControlWindow(std::shared_ptr<SubStreamWindowProperties>& props) {
       ImVec2(props->control_window_width_, props->control_window_height_),
       ImGuiCond_Always);
 
-  ImGui::SetNextWindowPos(ImVec2(0, title_bar_height_ + 1), ImGuiCond_Once);
+  ImGui::SetNextWindowPos(ImVec2(0, title_bar_height_), ImGuiCond_Once);
 
   float pos_x = 0;
   float pos_y = 0;
-  float y_boundary = fullscreen_button_pressed_ ? 0 : (title_bar_height_ + 1);
+  float y_boundary = fullscreen_button_pressed_ ? 0 : title_bar_height_;
 
   if (props->reset_control_bar_pos_) {
     float new_cursor_pos_x = 0;
@@ -94,7 +94,7 @@ int Render::ControlWindow(std::shared_ptr<SubStreamWindowProperties>& props) {
   } else if (!props->reset_control_bar_pos_ &&
                  ImGui::IsMouseReleased(ImGuiMouseButton_Left) ||
              props->control_window_width_is_changing_) {
-    if (props->control_window_pos_.x <= stream_window_width_ / 2) {
+    if (props->control_window_pos_.x <= stream_window_width_ * 0.5f) {
       if (props->control_window_pos_.y + props->control_window_height_ >
           stream_window_height_) {
         pos_y = stream_window_height_ - props->control_window_height_;
@@ -118,18 +118,16 @@ int Render::ControlWindow(std::shared_ptr<SubStreamWindowProperties>& props) {
         }
       }
       props->is_control_bar_in_left_ = true;
-    } else if (props->control_window_pos_.x > stream_window_width_ / 2) {
+    } else if (props->control_window_pos_.x > stream_window_width_ * 0.5f) {
       pos_x = 0;
       pos_y =
           (props->control_window_pos_.y >= y_boundary &&
            props->control_window_pos_.y <=
                stream_window_height_ - props->control_window_height_)
               ? props->control_window_pos_.y
-              : (props->control_window_pos_.y < (fullscreen_button_pressed_
+              : (props->control_window_pos_.y <
-                                                     ? 0
+                         (fullscreen_button_pressed_ ? 0 : title_bar_height_)
-                                                     : (title_bar_height_ + 1))
+                     ? (fullscreen_button_pressed_ ? 0 : title_bar_height_)
-                     ? (fullscreen_button_pressed_ ? 0
-                                                   : (title_bar_height_ + 1))
                      : (stream_window_height_ - props->control_window_height_));
 
       if (props->control_bar_expand_) {
@@ -205,9 +203,9 @@ int Render::ControlWindow(std::shared_ptr<SubStreamWindowProperties>& props) {
 
   std::string control_child_window_title =
       props->remote_id_ + "ControlChildWindow";
-  ImGui::BeginChild(
+  ImGui::BeginChild(control_child_window_title.c_str(),
-      control_child_window_title.c_str(),
+                    ImVec2(props->control_window_width_ * 2.0f,
-      ImVec2(props->control_window_width_ * 2, props->control_window_height_),
+                           props->control_window_height_),
                     ImGuiChildFlags_Border, ImGuiWindowFlags_NoDecoration);
   ImGui::PopStyleColor();
 

src/gui/windows/main_window.cpp

@@ -1,3 +1,4 @@
+#include "layout_relative.h"
 #include "localization.h"
 #include "rd_log.h"
 #include "render.h"
@@ -5,14 +6,20 @@
 namespace crossdesk {
 
 int Render::MainWindow() {
-  ImGui::SetNextWindowPos(ImVec2(0, title_bar_height_), ImGuiCond_Always);
+  ImGuiIO& io = ImGui::GetIO();
+  float local_remote_window_width = io.DisplaySize.x;
+  float local_remote_window_height =
+      io.DisplaySize.y * (0.56f - TITLE_BAR_HEIGHT);
+
+  ImGui::SetNextWindowPos(ImVec2(0.0f, io.DisplaySize.y * (TITLE_BAR_HEIGHT)),
+                          ImGuiCond_Always);
   ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 0.0f));
   ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
-  ImGui::BeginChild("DeskWindow",
+  ImGui::BeginChild(
-                    ImVec2(main_window_width_, local_window_height_),
+      "DeskWindow",
+      ImVec2(local_remote_window_width, local_remote_window_height),
       ImGuiChildFlags_Border,
-                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+      ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
-                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
           ImGuiWindowFlags_NoBringToFrontOnFocus);
   ImGui::PopStyleVar();
   ImGui::PopStyleColor();
@@ -20,9 +27,8 @@ int Render::MainWindow() {
   LocalWindow();
 
   ImDrawList* draw_list = ImGui::GetWindowDrawList();
-  draw_list->AddLine(
+  draw_list->AddLine(ImVec2(io.DisplaySize.x * 0.5f, io.DisplaySize.y * 0.1f),
-      ImVec2(main_window_width_ / 2, title_bar_height_ + 15.0f * dpi_scale_),
+                     ImVec2(io.DisplaySize.x * 0.5f, io.DisplaySize.y * 0.53f),
-      ImVec2(main_window_width_ / 2, title_bar_height_ + 225.0f * dpi_scale_),
                      IM_COL32(0, 0, 0, 122), 1.0f);
 
   RemoteWindow();

src/gui/windows/stream_window.cpp

@@ -69,9 +69,13 @@ int Render::StreamWindow() {
       ImGuiWindowFlags_NoBringToFrontOnFocus | ImGuiWindowFlags_NoMove;
 
   if (!fullscreen_button_pressed_) {
-    ImGui::SetNextWindowPos(ImVec2(20.0f * dpi_scale_, 0), ImGuiCond_Always);
+    ImGui::SetNextWindowPos(
-    ImGui::SetNextWindowSize(ImVec2(0, 30.0f * dpi_scale_), ImGuiCond_Always);
+        ImVec2(title_bar_height_ * 0.2f, title_bar_height_ * 0.2f),
-    ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 8.0f));
+        ImGuiCond_Always);
+    ImGui::SetNextWindowSize(
+        ImVec2(title_bar_height_ * 4.0f, title_bar_height_ * 0.8f),
+        ImGuiCond_Always);
+    ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 0.0f));
     ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);
     ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(0, 0, 0, 0.0f));
     ImGui::Begin("TabBar", nullptr,