diff --git a/src/assets/css/mod_cpuinfo.css b/src/assets/css/mod_cpuinfo.css index c521eea3..3ea5edb5 100644 --- a/src/assets/css/mod_cpuinfo.css +++ b/src/assets/css/mod_cpuinfo.css @@ -61,6 +61,16 @@ div#mod_cpuinfo > div > div { margin: 0.278vh 0vh; } +div#mod_cpuinfo > div > div:last-child { + width: 95%; + border-top: 0.092vh dashed rgba(var(--color_r), var(--color_g), var(--color_b), 0.3); + padding-top: 0.838vh; +} +div#mod_cpuinfo > div > div:last-child > div { + width: 20%; + text-align: center; +} + div#mod_cpuinfo h1 { font-size: 1.3vh; line-height: 1.5vh; diff --git a/src/classes/cpuinfo.class.js b/src/classes/cpuinfo.class.js index 0c9aaa64..d272790c 100644 --- a/src/classes/cpuinfo.class.js +++ b/src/classes/cpuinfo.class.js @@ -18,24 +18,38 @@ class Cpuinfo { this.charts = []; this.si.cpu((data) => { let divide = Math.floor(data.cores/2); + this.divide = divide; let innercontainer = document.createElement("div"); innercontainer.setAttribute("id", "mod_cpuinfo_innercontainer"); innercontainer.innerHTML = `

CPU USAGE${data.manufacturer} ${data.brand}

# 1 - ${divide}
- ${data.speed}GHz

+ Avg. --%

# ${divide+1} - ${data.cores}
- ${data.speed}GHz

+ Avg. --%
-

TEMP
- --°C

- +
+

TEMP
+ --°C

+
+
+

MIN
+ --GHz

+
+
+

AVG
+ --GHz

+
+
+

MAX
+ --GHz

+
`; this.container.append(innercontainer); @@ -59,26 +73,7 @@ class Cpuinfo { })); } - // temperature chart - this.charts.push(new SmoothieChart({ - limitFPS: 30, - responsive: true, - millisPerPixel: 50, - grid:{ - fillStyle:'transparent', - strokeStyle:'transparent', - verticalSections:0, - borderVisible:false - }, - labels:{ - disabled: true - }, - yRangeFunction: () => { - return {min:20,max:120}; - } - })); - - for (var i = 0; i < data.cores+1; i++) { + for (var i = 0; i < data.cores; i++) { // Create TimeSeries this.series.push(new TimeSeries()); @@ -88,10 +83,7 @@ class Cpuinfo { strokeStyle: `rgb(${window.theme.r},${window.theme.g},${window.theme.b})` }; - if (i === data.cores) { - this.tempSerie = this.series.pop(); - this.charts[2].addTimeSeries(this.tempSerie, options); - } else if (i < divide) { + if (i < divide) { this.charts[0].addTimeSeries(serie, options); } else { this.charts[1].addTimeSeries(serie, options); @@ -101,32 +93,52 @@ class Cpuinfo { for (var i = 0; i < 2; i++) { this.charts[i].streamTo(document.getElementById(`mod_cpuinfo_canvas_${i}`), 500); } - this.charts[2].streamTo(document.getElementById(`mod_cpuinfo_canvas_${i}`), 2000); // Init updater this.updateCPUload(); this.updateCPUtemp(); + this.updateCPUspeed(); this.loadUpdater = setInterval(() => { this.updateCPUload(); }, 500); this.tempUpdater = setInterval(() => { this.updateCPUtemp(); }, 2000); + this.speedUpdater = setInterval(() => { + this.updateCPUspeed(); + }, 1000); }); } updateCPUload() { this.si.currentLoad((data) => { + let average = [[], []]; data.cpus.forEach((e, i) => { this.series[i].append(new Date().getTime(), e.load); + + if (i < this.divide) { + average[0].push(e.load); + } else { + average[1].push(e.load); + } + }); + average.forEach((stats, i) => { + average[i] = Math.round(stats.reduce((a, b) => a + b, 0)/stats.length); + document.getElementById(`mod_cpuinfo_usagecounter${i}`).innerText = `Avg. ${average[i]}%`; }); }); } updateCPUtemp() { this.si.cpuTemperature((data) => { - this.tempSerie.append(new Date().getTime(), data.main); document.getElementById("mod_cpuinfo_temp").innerText = `${data.main}°C`; }); } + updateCPUspeed() { + this.si.cpuCurrentspeed((data) => { + document.getElementById("mod_cpuinfo_speed_min").innerText = `${data.min}GHz`; + document.getElementById("mod_cpuinfo_speed_avg").innerText = `${data.avg}GHz`; + document.getElementById("mod_cpuinfo_speed_max").innerText = `${data.max}GHz`; + }); + } } module.exports = {