VNC-151 Add FPS chart visualization

Author: quickiwiki

app/constants.js

@@ -21,5 +21,12 @@ export const UI_SETTING_STREAM_MODES = {
 export const UI_SETTING_PROFILE_OPTIONS = {
     MAIN: 0,
     BASELINE: 1,
-    HIGH: 2,
+    HIGH: 2
 };
+
+export const UI_FPS_CHART = {
+    WIDTH: 200,
+    HEIGHT: 50,
+    MAX_POINTS: 60,
+    MAX_FPS_VALUE: 120
+};

app/styles/base.css

@@ -354,6 +354,16 @@ select:active {
   visibility: hidden;
 }
 
+#noVNC_fps_chart {
+  top: 40px;
+  left: auto;
+  right: 0;
+  position: fixed;
+  background: #9fa5a2d4;
+  visibility: hidden;
+  display: flex;
+}
+
 /* ----------------------------------------
  * Control Bar
  * ----------------------------------------

index.html

@@ -77,6 +77,11 @@
     <div id="noVNC_connection_stats">
         Loading statistics...
     </div>
+    <div id="noVNC_fps_chart">
+        <svg width="200" height="50">
+            <path id="noVNC_fps_chart_path" fill="#00ffa2d4" stroke="#00ffa2d4" stroke-width="1"/>
+        </svg>
+    </div>
 
     <!-- noVNC Control Bar -->
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">