so I'm trying to make an app that displays the cpu usage, ram usage, gpu usage and disk usage to a bar graph. I'm at the point where I can display the total percent of ram used but I am not able to update the value in real time and show it to the bar graph. Any help would be greatly appreciated.
Code
dashboard.js
const os = require("os");
const fs = require("fs");
const { memoryUsage } = require("process");
const os_free_mem = os.freemem()
let free_mem = (Math.round(os_free_mem / (1024*1024)))
const os_total_mem = os.totalmem()
let total_mem = (Math.round(os_total_mem / (1024*1024)))
const cpu_usage = document.querySelector(".cpu_usage");
const ram_usage = document.querySelector(".ram_usage");
const gpu_usage = document.querySelector(".gpu_usage");
const disk_usage = document.querySelector(".disk_usage");
const free_mem_lbl = document.getElementById("mem")
const total_mem_lbl = document.getElementById("tmem")
// FUNCTIONS
function update_cpu_usage(cpu_usage, value) {
value = Math.round(value);
cpu_usage.querySelector(".cpu_usage_fill").style.width = `${value}%`;
}
function update_ram_usage(ram_usage, value) {
value = Math.round(value);
ram_usage.querySelector(".ram_usage_fill").style.width = `${value}%`;
}
function update_gpu_usage(gpu_usage, value) {
value = Math.round(value);
gpu_usage.querySelector(".gpu_usage_fill").style.width = `${value}%`;
}
function update_disk_usage(disk_usage, value) {
value = Math.round(value);
disk_usage.querySelector(".disk_usage_fill").style.width = `${value}%`;
}
function find_cpu_percent() {
var free_mem_percent = Math.round((free_mem / total_mem ) * 100);
free_mem_lbl.innerText = `${free_mem_percent}`
}
find_cpu_percent();
tmem.innerText = `${total_mem}`
update_cpu_usage(cpu_usage, 55);
update_ram_usage(ram_usage, free_mem_percent);
update_gpu_usage(gpu_usage, 24);
update_disk_usage(disk_usage, 75)
dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
<script src="https://kit.fontawesome.com/e637815e35.js" crossorigin="anonymous"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<div class="main">
<div class="sidebar">
<ul>
<li><a href="index.html"><ion-icon name="home-sharp"></ion-icon></a></li>
<li><a href="dashboard.html"><ion-icon name="speedometer-outline"></ion-icon></a></li>
<li><a href="create-rp.html"><i class="fas fa-clock-rotate-left"></i></a></li>
<li><a href="create-usb.html"><i class="fa-brands fa-usb"></i></a></li>
</ul>
</div>
<div class="main-content">
<h3>System Information</h3>
<!-- Usage Bars -->
<span class="cpu_text">CPU</span>
<div class="cpu_usage">
<div class="cpu_usage_fill"></div>
</div>
<span class="ram_text">RAM</span>
<div class="ram_usage">
<div class="ram_usage_fill"></div>
</div>
<span class="gpu_text">GPU</span>
<div class="gpu_usage">
<div class="gpu_usage_fill"></div>
</div>
<span class="disk_text">DISK</span>
<div class="disk_usage">
<div class="disk_usage_fill"></div>
</div>
<!-- System Specifications -->
<div class="specs">
<h3>System Specifications</h3>
<h5>CPU</h5>
<p class="info" id="cpu_name">CPU : </p>
<p class="info" id="cpu_speed">Speed :</p>
<p class="info" id="cpu_cores">Cores : </p>
<p id="mem" style="margin-left: 200px; font-size:40px"></p>
<p id="tmem" style="margin-left: 200px; font-size:40px"></p>
</div>
<script src="js/dashboard.js"></script>
</div>
</body>
</html>
