added stats graph for FPS

Author: DevL0rd

SkyNX-Streamer/css/styles.css

@@ -30,4 +30,17 @@ label {
 }
 #consoleInput:focus {
     outline: none;
+}
+
+.chartpanel{
+    margin: 8px;
+    padding: 8px;
+    background: rgba(39, 39, 39, 0.9);
+    border-radius: 6px;
+    overflow: hidden;
+    color: white;
+    box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.7);
+}
+.chartTitle{
+    margin-left: 8px;
 }

SkyNX-Streamer/index.html

@@ -27,6 +27,8 @@
     <div id="navBar" class="customScroll rainbowScrollColor">
       <button id="main-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
         title="Streamer"><i class="fas fa-desktop"></i></button>
+      <button id="stats-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
+        title="Stats"><i class="fas fa-chart-pie"></i></button>
       <button id="settings-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
         title="Settings"><i class="fas fa-cogs"></i></button>
       <button id="console-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
@@ -51,7 +53,14 @@
           <label>More Settings coming soon..</label>
         </div>
       </div>
-
+    </div>
+    <div id="stats" class="contentArea contentAreaScrollable customScroll" style="display: none;">
+      <div class="chartpanel">
+        <h5 class="chartTitle">FPS</h5>
+        <div style="width: 100%; height: 150px;">
+          <canvas id="fpsChart"></canvas>
+        </div>
+      </div>
     </div>
     <div id="settings" class="contentArea contentAreaScrollable customScroll" style="display: none;">
       <div class="form-group">
@@ -113,6 +122,7 @@ <h1 style="color:rgb(206, 206, 206); font-size: 16px;">
     </div>
   </div>
   <script src="js/fontawesome-all.min.js"></script>
+  <script src="js/Chart.min.js"></script>
   <script>
     let $ = require('jquery');
     require('popper.js');
@@ -125,6 +135,7 @@ <h1 style="color:rgb(206, 206, 206); font-size: 16px;">
   <script src="./js/window.js"></script>
   <script src="./js/main.js"></script>
   <script src="./js/settings.js"></script>
+  <script src="./js/stats.js"></script>
   <script src="./js/console.js"></script>
 </body>
 

SkyNX-Streamer/js/Chart.min.js

@@ -6,6 +6,14 @@ ipcRenderer.on('log', function (event, genHtml) {
         var fps = genHtml.split("fps= ")[1].split(" ")[0];
         var bitrate = genHtml.split("bitrate=")[1].split(" ")[0];
         $("#statusbartext").html("Framrate: " + fps + " Bitrate: " + bitrate);
+        fpsChartData.datasets[0].data.push(parseInt(fps));
+        if (fpsChartData.datasets[0].data.length > 20) {
+            fpsChartData.datasets[0].data.shift();
+        }
+        if ($("#stats").is(":visible")) {
+            fpsChartData.labels = genrateLabelList("FPS", fpsChartData.datasets[0].data.length);
+            fpsChart.update(0);
+        }
     } else if (genHtml.includes("Connection timed out") || genHtml.includes("Waiting for connection")) {
         $("#statusbartext").html("Waiting for connection...");
     } else if (genHtml.includes("streamerProcess process exited")) {

SkyNX-Streamer/js/console.js

@@ -0,0 +1,58 @@
+function genrateLabelList(label, length) {
+    var labels = [];
+    while (length > 0) {
+        labels.push(label);
+        length--;
+    }
+    return labels;
+}
+var fpsChartData = {
+    labels: ['FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS', 'FPS'],
+    datasets: [{
+        label: 'FPS',
+        data: [0],
+        backgroundColor: 'rgba(0, 0, 255, 0.8)',
+        borderColor: 'rgba(255, 255, 255, 0)',
+        fillOpacity: .3,
+        fill: true,
+        borderWidth: 0
+    }]
+};
+
+var fpsChartctx = document.getElementById('fpsChart').getContext('2d');
+var fpsChart = new Chart(fpsChartctx, {
+    type: 'line',
+    data: fpsChartData,
+    options: {
+        maintainAspectRatio: false,
+        legend: {
+            display: false
+        },
+        elements: {
+            point: {
+                radius: 0
+            }
+        },
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true,
+                    max: 60
+                }
+            }],
+            xAxes: [{
+                gridLines: {
+                    display: false
+                },
+                ticks: {
+                    display: false //this will remove only the label
+                }
+            }]
+        }
+    }
+});
+$("#stats-btn").click(function () {
+    $(".contentArea").hide();
+    $("#stats").fadeIn(400);
+    $('#stats-btn').tooltip('hide');
+});