[feat] show net traffic stats in control bar

src/localization/localization.h

@@ -25,16 +25,22 @@ static std::vector<std::string> connect = {u8"连接", "Connect"};
 static std::vector<std::string> recent_connections = {u8"近期连接",
                                                       "Recent Connections"};
 static std::vector<std::string> disconnect = {u8"断开连接", "Disconnect"};
-static std::vector<std::string> fullscreen = {u8" 全屏", " Fullscreen"};
+static std::vector<std::string> fullscreen = {u8"全屏", " Fullscreen"};
 static std::vector<std::string> show_net_traffic_stats = {
     u8"显示流量统计", "Show Net Traffic Stats"};
 static std::vector<std::string> hide_net_traffic_stats = {
     u8"隐藏流量统计", "Hide Net Traffic Stats"};
-static std::vector<std::string> exit_fullscreen = {u8" 退出全屏",
+static std::vector<std::string> video = {u8"视频", "Video"};
-                                                   " Exit fullscreen"};
+static std::vector<std::string> audio = {u8"音频", "Audio"};
-static std::vector<std::string> control_mouse = {u8" 控制", " Control"};
+static std::vector<std::string> data = {u8"数据", "Data"};
-static std::vector<std::string> release_mouse = {u8" 释放", " Release"};
+static std::vector<std::string> total = {u8"总计", "Total"};
-static std::vector<std::string> audio_capture = {u8" 声音", " Audio"};
+static std::vector<std::string> in = {u8"输入", "In"};
+static std::vector<std::string> out = {u8"输出", "Out"};
+static std::vector<std::string> exit_fullscreen = {u8"退出全屏",
+                                                   "Exit fullscreen"};
+static std::vector<std::string> control_mouse = {u8"控制", "Control"};
+static std::vector<std::string> release_mouse = {u8"释放", "Release"};
+static std::vector<std::string> audio_capture = {u8"声音", "Audio"};
 static std::vector<std::string> mute = {u8" 静音", " Mute"};
 static std::vector<std::string> settings = {u8"设置", "Settings"};
 static std::vector<std::string> language = {u8"语言:", "Language:"};

src/single_window/control_bar.cpp

@@ -3,12 +3,30 @@
 #include "rd_log.h"
 #include "render.h"
 
+int CountDigits(int number) {
+  if (number == 0) return 1;
+  return std::floor(std::log10(std::abs(number))) + 1;
+}
+
+int BitrateDisplay(uint64_t bitrate) {
+  int num_of_digits = CountDigits(bitrate);
+  if (num_of_digits <= 3) {
+    ImGui::Text("%d bps", bitrate / 1000);
+  } else if (num_of_digits > 3 && num_of_digits <= 6) {
+    ImGui::Text("%d kbps", bitrate / 1000);
+  } else {
+    ImGui::Text("%d mbps", bitrate / 1000000);
+  }
+  return 0;
+}
+
 int Render::ControlBar() {
   ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
 
+  ImVec2 mouse_button_pos = ImVec2(0, 0);
   if (control_bar_expand_) {
     ImGui::SetCursorPosX(
-        is_control_bar_in_left_ ? (control_window_width_ + 5.0f) : 41.0f);
+        is_control_bar_in_left_ ? (control_window_width_ + 5.0f) : 38.0f);
     // mouse control button
     ImDrawList* draw_list = ImGui::GetWindowDrawList();
 
@@ -21,6 +39,7 @@ int Render::ControlBar() {
           IM_COL32(178, 178, 178, 255), 1.0f);
     }
 
+    mouse_button_pos = ImGui::GetCursorScreenPos();
     float disable_mouse_x = ImGui::GetCursorScreenPos().x + 4.0f;
     float disable_mouse_y = ImGui::GetCursorScreenPos().y + 4.0f;
     std::string mouse = mouse_control_button_pressed_ ? ICON_FA_COMPUTER_MOUSE
@@ -87,9 +106,17 @@ int Render::ControlBar() {
 
     ImGui::SameLine();
     // net traffic stats button
+    bool button_color_style_pushed = false;
+    if (net_traffic_stats_button_pressed_) {
+      ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(66 / 255.0f, 150 / 255.0f,
+                                                    250 / 255.0f, 1.0f));
+      button_color_style_pushed = true;
+    }
     std::string net_traffic_stats = ICON_FA_SIGNAL;
     if (ImGui::Button(net_traffic_stats.c_str(), ImVec2(25, 25))) {
       net_traffic_stats_button_pressed_ = !net_traffic_stats_button_pressed_;
+      control_window_height_is_changing_ = true;
+      net_traffic_stats_button_pressed_time_ = ImGui::GetTime();
       net_traffic_stats_button_label_ =
           net_traffic_stats_button_pressed_
               ? localization::hide_net_traffic_stats
@@ -97,9 +124,9 @@ int Render::ControlBar() {
               : localization::show_net_traffic_stats
                     [localization_language_index_];
     }
-
+    if (button_color_style_pushed) {
-    if (net_traffic_stats_button_pressed_) {
+      ImGui::PopStyleColor();
-      NetTrafficStats();
+      button_color_style_pushed = false;
     }
 
     ImGui::SameLine();
@@ -141,7 +168,7 @@ int Render::ControlBar() {
   }
 
   ImGui::SetCursorPosX(
-      is_control_bar_in_left_ ? (control_window_width_ * 2 - 18.0f) : 3.0f);
+      is_control_bar_in_left_ ? (control_window_width_ * 2 - 20.0f) : 5.0f);
 
   std::string control_bar =
       control_bar_expand_
@@ -152,6 +179,15 @@ int Render::ControlBar() {
     control_bar_expand_ = !control_bar_expand_;
     control_bar_button_pressed_time_ = ImGui::GetTime();
     control_window_width_is_changing_ = true;
+
+    if (!control_bar_expand_) {
+      control_window_height_ = 40;
+      net_traffic_stats_button_pressed_ = false;
+    }
+  }
+
+  if (net_traffic_stats_button_pressed_ && control_bar_expand_) {
+    NetTrafficStats(mouse_button_pos);
   }
 
   ImGui::PopStyleVar();
@@ -159,75 +195,54 @@ int Render::ControlBar() {
   return 0;
 }
 
-int Render::NetTrafficStats() {
+int Render::NetTrafficStats(ImVec2 mouse_button_pos) {
-  const ImGuiViewport* viewport = ImGui::GetMainViewport();
+  ImGui::SetCursorPos(ImVec2(
-  ImGui::SetNextWindowPos(ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+      is_control_bar_in_left_ ? (control_window_width_ + 5.0f) : 5.0f, 40.0f));
-                                  connection_status_window_width_) /
-                                     2,
-                                 (viewport->WorkSize.y - viewport->WorkPos.y -
-                                  connection_status_window_height_) /
-                                     2));
 
-  ImGui::SetNextWindowSize(ImVec2(connection_status_window_width_,
+  if (ImGui::BeginTable("split", 3, ImGuiTableFlags_BordersH,
-                                  connection_status_window_height_));
+                        ImVec2(control_window_max_width_ - 10.0f,
-  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+                               control_window_max_height_ - 40.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("NetTrafficStatsWindow", nullptr,
-               ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
-                   ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
-                   ImGuiWindowFlags_NoSavedSettings);
-  ImGui::PopStyleVar(2);
-  ImGui::PopStyleColor();
-
-  if (ImGui::BeginTable("split", 3)) {
-    int row = 0;
     ImGui::TableNextColumn();
     ImGui::Text(" ");
     ImGui::TableNextColumn();
-    ImGui::Text("In");
+    ImGui::Text(localization::in[localization_language_index_].c_str());
     ImGui::TableNextColumn();
-    ImGui::Text("Out");
+    ImGui::Text(localization::out[localization_language_index_].c_str());
 
     ImGui::TableNextRow();
     ImGui::TableNextColumn();
-    ImGui::Text("Video");
+    ImGui::Text(localization::video[localization_language_index_].c_str());
     ImGui::TableNextColumn();
-    ImGui::Text("%d", net_traffic_stats_.video_in);
+    BitrateDisplay(net_traffic_stats_.video_in);
     ImGui::TableNextColumn();
-    ImGui::Text("%d", net_traffic_stats_.video_out);
+    BitrateDisplay(net_traffic_stats_.video_out);
 
     ImGui::TableNextRow();
     ImGui::TableNextColumn();
-    ImGui::Text("Audio");
+    ImGui::Text(localization::audio[localization_language_index_].c_str());
     ImGui::TableNextColumn();
-    ImGui::Text("%d", net_traffic_stats_.audio_in);
+    BitrateDisplay(net_traffic_stats_.audio_in);
     ImGui::TableNextColumn();
-    ImGui::Text("%d", net_traffic_stats_.audio_out);
+    BitrateDisplay(net_traffic_stats_.audio_out);
 
     ImGui::TableNextRow();
     ImGui::TableNextColumn();
-    ImGui::Text("Total");
+    ImGui::Text(localization::data[localization_language_index_].c_str());
     ImGui::TableNextColumn();
-    ImGui::Text("%d", net_traffic_stats_.total_in);
+    BitrateDisplay(net_traffic_stats_.data_in);
     ImGui::TableNextColumn();
-    ImGui::Text("%d", net_traffic_stats_.total_out);
+    BitrateDisplay(net_traffic_stats_.data_out);
+
+    ImGui::TableNextRow();
+    ImGui::TableNextColumn();
+    ImGui::Text(localization::total[localization_language_index_].c_str());
+    ImGui::TableNextColumn();
+    BitrateDisplay(net_traffic_stats_.total_in);
+    ImGui::TableNextColumn();
+    BitrateDisplay(net_traffic_stats_.total_out);
+
     ImGui::EndTable();
   }
 
-  ImGui::SetCursorPosX(connection_status_window_width_ * 6 / 19);
-  ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
-
-  // ok
-  ImGui::SetWindowFontScale(0.5f);
-  if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
-      ImGui::IsKeyPressed(ImGuiKey_Enter)) {
-    net_traffic_stats_button_pressed_ = false;
-  }
-
-  ImGui::End();
-  ImGui::PopStyleVar();
   return 0;
 }

src/single_window/control_window.cpp

@@ -17,6 +17,21 @@ int Render::ControlWindow() {
     }
   }
 
+  time_duration = ImGui::GetTime() - net_traffic_stats_button_pressed_time_;
+  if (control_window_height_is_changing_) {
+    if (control_bar_expand_ && net_traffic_stats_button_pressed_) {
+      control_window_height_ =
+          control_window_min_height_ +
+          (control_window_max_height_ - control_window_min_height_) * 4 *
+              time_duration;
+    } else if (control_bar_expand_ && !net_traffic_stats_button_pressed_) {
+      control_window_height_ =
+          control_window_max_height_ -
+          (control_window_max_height_ - control_window_min_height_) * 4 *
+              time_duration;
+    }
+  }
+
   ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1, 1, 1, 1));
   ImGui::PushStyleVar(ImGuiStyleVar_WindowMinSize, ImVec2(0, 0));
   ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 10.0f);
@@ -96,6 +111,24 @@ int Render::ControlWindow() {
     }
   }
 
+  if (control_bar_expand_ && control_window_height_is_changing_) {
+    if (net_traffic_stats_button_pressed_) {
+      if (control_window_height_ >= control_window_max_height_) {
+        control_window_height_ = control_window_max_height_;
+        control_window_height_is_changing_ = false;
+      } else {
+        control_window_height_is_changing_ = true;
+      }
+    } else {
+      if (control_window_height_ <= control_window_min_height_) {
+        control_window_height_ = control_window_min_height_;
+        control_window_height_is_changing_ = false;
+      } else {
+        control_window_height_is_changing_ = true;
+      }
+    }
+  }
+
   ImGui::Begin("ControlWindow", nullptr,
                ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoResize |
                    ImGuiWindowFlags_NoScrollbar |

src/single_window/render.cpp

@@ -69,7 +69,16 @@ SDL_HitTestResult Render::HitTestCallback(SDL_Window* window,
   return SDL_HITTEST_NORMAL;
 }
 
-Render::Render() {}
+Render::Render() {
+  net_traffic_stats_.video_in = 0;
+  net_traffic_stats_.video_out = 0;
+  net_traffic_stats_.audio_in = 0;
+  net_traffic_stats_.audio_out = 0;
+  net_traffic_stats_.data_in = 0;
+  net_traffic_stats_.data_out = 0;
+  net_traffic_stats_.total_in = 0;
+  net_traffic_stats_.total_out = 0;
+}
 
 Render::~Render() {}
 
@@ -511,8 +520,7 @@ int Render::SetupFontAndStyle(bool is_main_window) {
   io.ConfigFlags |=
       ImGuiConfigFlags_NavEnableKeyboard;  // Enable Keyboard Controls
   io.ConfigFlags |=
-      ImGuiConfigFlags_NavEnableGamepad;             // Enable Gamepad Controls
+      ImGuiConfigFlags_NavEnableGamepad;  // Enable Gamepad Controls
-  io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;  // Enable Docking
 
   // Load Fonts
   ImFontConfig config;

src/single_window/render.h

@@ -64,7 +64,7 @@ class Render {
   int DrawMainWindow();
   int DrawStreamWindow();
   int ConfirmDeleteConnection();
-  int NetTrafficStats();
+  int NetTrafficStats(ImVec2 mouse_button_pos);
 
  public:
   static void OnReceiveVideoBufferCb(const XVideoFrame *video_frame,
@@ -184,6 +184,8 @@ class Render {
   int main_window_height_before_maximized_ = 480;
   int control_window_min_width_ = 20;
   int control_window_max_width_ = 200;
+  int control_window_min_height_ = 40;
+  int control_window_max_height_ = 150;
   int control_window_width_ = 200;
   int control_window_height_ = 40;
   int local_window_width_ = 320;
@@ -285,7 +287,9 @@ class Render {
   bool streaming_ = false;
   bool is_client_mode_ = false;
   bool is_control_bar_in_left_ = true;
+  bool is_control_bar_in_top_ = true;
   bool control_window_width_is_changing_ = false;
+  bool control_window_height_is_changing_ = false;
   bool reload_recent_connections_ = true;
   bool hostname_sent_ = false;
   bool show_confirm_delete_connection_ = false;
@@ -295,6 +299,7 @@ class Render {
   double copy_start_time_ = 0;
   double regenerate_password_start_time_ = 0;
   double control_bar_button_pressed_time_ = 0;
+  double net_traffic_stats_button_pressed_time_ = 0;
 
   ImVec2 control_winodw_pos_;
 

src/single_window/render_callback_func.cpp

@@ -351,7 +351,7 @@ void Render::NetStatusReport(const char *client_id, size_t client_id_size,
     LOG_INFO("Net mode: [{}]", int(render->traversal_mode_));
   }
 
-  if (net_traffic_stats) {
+  if (net_traffic_stats && nullptr == strstr(client_id, "C-")) {
     render->net_traffic_stats_.video_in = net_traffic_stats->video_in;
     render->net_traffic_stats_.video_out = net_traffic_stats->video_out;
     render->net_traffic_stats_.audio_in = net_traffic_stats->audio_in;