mod_conninfo

Author: GitSquared

src/_renderer.js

@@ -123,7 +123,7 @@ initMods = () => {
     window.mods.cpuinfo = new Cpuinfo("mod_column_left");
 
     // Right column
-    
+    window.mods.conninfo = new Conninfo("mod_column_right");
 
     document.querySelectorAll(".mod_column").forEach((e) => {
         e.setAttribute("class", "mod_column activated");

src/assets/css/mod_conninfo.css

@@ -0,0 +1,69 @@
+div#mod_conninfo {
+    border-top: 1px solid rgba(190, 230, 193, 0.3);
+    font-family: var(--font_main_light);
+    letter-spacing: 1px;
+    padding: 7px 0px;
+    display: flex;
+}
+
+div#mod_conninfo::before {
+    content: "";
+    border-left: 1px solid rgba(190, 230, 193, 0.3);
+    align-self: flex-start;
+    position: relative;
+    left: -1px;
+    top: -12px;
+    height: 9px;
+}
+
+div#mod_conninfo::after {
+    content: "";
+    border-right: 1px solid rgba(190, 230, 193, 0.3);
+    position: relative;
+    right: -1px;
+    top: -12px;
+    height: 9px;
+}
+
+div#mod_conninfo_innercontainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+div#mod_conninfo h1 {
+    font-size: 16px;
+    margin: 0px;
+    width: 98%;
+}
+
+div#mod_conninfo i {
+    font-style: normal;
+    font-size: 13px;
+    opacity: 0.5;
+    text-align: right;
+    width: 50%;
+    display: inline-block;
+    position: relative;
+    bottom: 1px;
+}
+
+div#mod_conninfo canvas {
+    width: 100%;
+    height: 100px;
+    border-top: 1px dashed rgba(190, 230, 193, 0.3);
+    border-bottom: 1px dashed rgba(190, 230, 193, 0.3);
+    margin: 5px 0px;
+}
+
+div#mod_conninfo canvas#mod_conninfo_canvas_top {
+    border-bottom: none;
+    margin-bottom: 0px;
+}
+
+div#mod_conninfo canvas#mod_conninfo_canvas_bottom {
+    border-top: 1.5px solid rgba(190, 230, 193, 0.4);
+    margin-top: -1px;
+}

src/classes/conninfo.class.js

@@ -0,0 +1,71 @@
+class Conninfo {
+    constructor(parentId) {
+        if (!parentId) throw "Missing parameters";
+
+        this.si = require("systeminformation");
+
+        // Create DOM
+        this.parent = document.getElementById(parentId);
+        this.parent.innerHTML += `<div id="mod_conninfo">
+            <div id="mod_conninfo_innercontainer">
+                <h1>NETWORK TRAFFIC<i>DOWN / UP, KBPS</i></h1>
+                <canvas id="mod_conninfo_canvas_top"></canvas>
+                <canvas id="mod_conninfo_canvas_bottom"></canvas>
+            </div>
+        </div>`;
+
+        // Init Smoothie
+        let TimeSeries = require("smoothie").TimeSeries;
+        let SmoothieChart = require("smoothie").SmoothieChart;
+
+        // Set chart options
+        let chartOptions = [{
+            limitFPS: 40,
+            responsive: true,
+            millisPerPixel: 70,
+            interpolation: 'linear',
+            grid:{
+                millisPerLine: 5000,
+                fillStyle:'transparent',
+                strokeStyle:'rgba(190,230,193,0.4)',
+                verticalSections:3,
+                borderVisible:false
+            },
+            labels:{
+                fontSize: 10,
+                fillStyle: '#bee6c1',
+                precision: 0
+            }
+        }];
+        chartOptions.push(Object.assign({}, chartOptions[0]));  // Deep copy object, see http://jsben.ch/bWfk9
+        chartOptions[0].minValue = 0;
+        chartOptions[1].maxValue = 0;
+
+        // Create chart
+        this.series = [new TimeSeries(), new TimeSeries()];
+        this.charts = [new SmoothieChart(chartOptions[0]), new SmoothieChart(chartOptions[1])];
+
+        this.charts[0].addTimeSeries(this.series[0], {lineWidth:1.7,strokeStyle:'#bee6c1'});
+        this.charts[1].addTimeSeries(this.series[1], {lineWidth:1.7,strokeStyle:'#bee6c1'});
+
+        this.charts[0].streamTo(document.getElementById("mod_conninfo_canvas_top"), 1000);
+        this.charts[1].streamTo(document.getElementById("mod_conninfo_canvas_bottom"), 1000);
+
+        // Init updater
+        this.updateInfo();
+        this.infoUpdater = setInterval(() => {
+            this.updateInfo();
+        }, 1000);
+    }
+    updateInfo() {
+        this.si.networkStats((data) => {
+            let time = new Date().getTime();
+            this.series[0].append(time,data.tx_sec);
+            this.series[1].append(time, -data.rx_sec);
+        });
+    }
+}
+
+module.exports = {
+    Conninfo
+};

src/ui.html

@@ -15,13 +15,17 @@
         <link rel="stylesheet" href="assets/css/mod_column.css" />
         <link rel="stylesheet" href="assets/css/mod_clock.css" />
         <link rel="stylesheet" href="assets/css/mod_sysinfo.css" />
+        <link rel="stylesheet" href="assets/css/mod_cpuinfo.css" />
+        <link rel="stylesheet" href="assets/css/mod_conninfo.css" />
 
         <!-- Load main modules classes -->
         <script src="classes/terminal.class.js"></script>
         <script src="classes/keyboard.class.js"></script>
         <!-- Load secondary modules classes -->
         <script src="classes/clock.class.js"></script>
         <script src="classes/sysinfo.class.js"></script>
+        <script src="classes/cpuinfo.class.js"></script>
+        <script src="classes/conninfo.class.js"></script>
     </head>
     <body style="background: #090b0a;">
         <section id="boot_screen">