mod_cpuinfo

Author: GitSquared

src/assets/css/mod_cpuinfo.css

@@ -0,0 +1,77 @@
+div#mod_cpuinfo {
+    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_cpuinfo::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_cpuinfo::after {
+    content: "";
+    border-right: 1px solid rgba(190, 230, 193, 0.3);
+    position: relative;
+    right: -1px;
+    top: -12px;
+    height: 9px;
+}
+
+div#mod_cpuinfo > div#mod_cpuinfo_innercontainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+div#mod_cpuinfo > div > div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin: 3px 0px;
+}
+
+div#mod_cpuinfo h1 {
+    font-size: 16px;
+    margin: 0px;
+}
+
+div#mod_cpuinfo em {
+    font-family: var(--font_main);
+    font-style: normal;
+}
+
+div#mod_cpuinfo span {
+    width: 1em;
+    position: relative;
+    top: 4px;
+    right: 3px;
+    text-align: center;
+    overflow: hidden;
+    display: inline-block;
+}
+
+div#mod_cpuinfo i {
+    font-style: normal;
+    font-size: 14px;
+    opacity: 0.5;
+}
+
+div#mod_cpuinfo canvas {
+    width: 76%;
+    height: 45px;
+    border-top: 1px dashed rgba(190, 230, 193, 0.3);
+    border-bottom: 1px dashed rgba(190, 230, 193, 0.3);
+    margin: 5px 0px;
+}

src/classes/cpuinfo.class.js

@@ -0,0 +1,94 @@
+class Cpuinfo {
+    constructor(parentId) {
+        if (!parentId) throw "Missing parameters";
+
+        this.si = require("systeminformation");
+
+        // Create initial DOM
+        this.parent = document.getElementById(parentId);
+        this.parent.innerHTML += `<div id="mod_cpuinfo">
+            <div id="mod_cpuinfo_innercontainer"></div>
+        </div>`;
+        this.container = document.getElementById("mod_cpuinfo_innercontainer");
+
+        // Init Smoothie
+        let TimeSeries = require("smoothie").TimeSeries;
+        let SmoothieChart = require("smoothie").SmoothieChart;
+
+        this.series = [];
+        this.charts = [];
+        this.si.cpu((data) => {
+            let createCoresDOM = () => {
+                return new Promise((resolve, reject) => {
+                    let timeId = setTimeout(reject, 1000); // Fail after 1s
+                    for (var i = 0; i < data.cores; i++) {
+                        // Create DOM
+                        this.container.innerHTML += `<div>
+                        <h1>CORE <em>#<span>${i}</span></em><br><i>% USED</i></h1>
+                        <canvas id="mod_cpuinfo_canvas_${i}" height="60"></canvas>
+                        </div>`;
+
+                        if (i === data.cores-1) {
+                            clearTimeout(timeId); // Clear fail timer
+                            resolve(true);
+                        }
+                    }
+                });
+            };
+            async function waitForCoresDOM() {
+                let result = createCoresDOM();
+                return await result;
+            }
+            waitForCoresDOM().then(() => {
+                for (var i = 0; i < data.cores; i++) {
+                    // Create TimeSeries
+                    this.series.push(new TimeSeries());
+
+                    // Create charts
+                    let serie = this.series[i];
+                    let chart = new SmoothieChart({
+                        limitFPS: 30,
+                        responsive: true,
+                        millisPerPixel: 50,
+                        grid:{
+                            fillStyle:'transparent',
+                            strokeStyle:'transparent',
+                            verticalSections:0,
+                            borderVisible:false
+                        },
+                        labels:{
+                            disabled: true
+                        },
+                        yRangeFunction: () => {
+                            return {min:0,max:100};
+                        }
+                    });
+
+                    chart.addTimeSeries(serie, {lineWidth:1.7,strokeStyle:'#bee6c1'});
+                    chart.streamTo(document.getElementById(`mod_cpuinfo_canvas_${i}`), 500);
+
+                    this.charts.push(chart);
+                }
+
+                // Init updater
+                this.updateInfo();
+                this.infoUpdater = setInterval(() => {
+                    this.updateInfo();
+                }, 500);
+            }, () => {
+                console.error("[mod_cpuinfo]: Error when creating DOM.");
+            });
+        });
+    }
+    updateInfo() {
+        this.si.currentLoad((data) => {
+            data.cpus.forEach((e, i) => {
+                this.series[i].append(new Date().getTime(), e.load);
+            });
+        });
+    }
+}
+
+module.exports = {
+    Cpuinfo
+};