Performance Monitor using ElectronJS, Flot Chart and justgauge

Author: Shahim Sadakath


Hi Guys,


This time I made an experimental Electron JS application to monitor the CPU Usage and Memory Usage. Hope you like it.


1) Install and Create your electron JS app using the following commands. Note : You must install nodeJS before to run these commands.

 

> npm i -D electron@latest
> mkdir electronMonitor
> cd electronMonitor
> npm init

2) Then create file index.html and paste the html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Performance Monitor</title>

    <script src="Styles/flot/jquery.js" type="text/javascript"></script>
    <link href="Styles/css/bootstrap.min.css" rel="stylesheet">
    </script>
    <script src="Styles/js/justgage.js" type="text/javascript"></script>
    <script src="Styles/js/raphael-2.1.4.min.js" type="text/javascript"></script>
    <script src="Styles/flot/jquery.flot.js" type="text/javascript"></script>
    <script src="./window.js" type="text/javascript"></script>
</head>

<body>

    <div class="container">
        <h1>Performance Monitor</h1>
        <div class="row">

            <div class="col-md-12">
                <h3>CPU Performance</h3>
                <div class="card">

                    <div class="card-body">

                        <div id="cpuOverall" style="height: 300px; padding: 0px; position: relative;"></div>

                    </div>
                </div>


            </div>

        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu1" class="200x160px"></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu2" class="200x160px"></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu3" class="200x160px"></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu4" class="200x160px"></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu5" class="200x160px"></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu6" class="200x160px"></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu7" class="200x160px"></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-body">

                        <div id="cpu8" class="200x160px"></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-body">

                        <div id="memG"></div>

                    </div>
                </div>


            </div>

        </div>


    </div>


    </div>
</body>

</html>
3) Then create main.js and paste the below javascript code
const electron = require('electron');

function createWindow() {

let win = new electron.BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true

}

})

// and load the index.html of the app.

win.loadFile('index.html');

}

electron.app.on('ready', createWindow);

4) Then create window.js and paste the below javasctipt code

const os = require('os');

var cpuG = [];

var memG = null;

var lastMeasureTimes = [];

var cpuOverall = null;

let total = 0;

function setLastMeasureTimes(cpus) {

for (let i = 0; i < cpus.length; i++) {

lastMeasureTimes[i] = getCpuTimes(cpus[i]);

}

}

function getCpuTimes(cpu) {

return [

cpu.times.user,

cpu.times.sys,

cpu.times.idle,

];

}

var options = {

colors: ["blue"],

series: {

shadowSize: 1

},

lines: {

show: true,

lineWidth: 0.5,

fill: true,

fillColor: {

colors: [{

opacity: 0.1

}, {

opacity: 1

}]

}

},

yaxis: {

min: 0,

max: 100,

tickColor: "#eee",

tickFormatter: function (v) {

return v + "%";

}

},

xaxis: {

show: false,

},

grid: {

tickColor: "#eee",

borderWidth: 0,

}

};

var data = [];

var totalPoints = 250;

function getCpuData(val = -1) {

if (data.length > 0) data = data.slice(1);

// do a random walk

if (val < 0) {

while (data.length < totalPoints) {

data.push(0);

}

}

else

data.push(val);

// zip the generated y values with the x values

var res = [];

for (var i = 0; i < data.length; ++i) {

res.push([i, data[i]]);

}

return res;

}

setLastMeasureTimes(os.cpus());

setInterval(() => {

const cpus = os.cpus();

if (cpuOverall == null) {

overallData.push([index++, 0]);

cpuOverall = $.plot($("#cpuOverall"), [getCpuData()], options);

}

for (let i = 0; i < cpus.length; i++) {

if (cpuG[i] == null)

cpuG[i] = new JustGage({

id: "cpu" + (i + 1),

value: 0,

min: 0,

max: 100,

title: "CPU Core " + (i + 1)

});

}

if (memG == null) {

var initMem = process.getSystemMemoryInfo();

memG = new JustGage({

id: "memG",

value: parseInt(((initMem.total - initMem.free) / initMem.total) * 100),

min: 0,

max: 100,

title: "Memory Usage"

});

}

var initMem = process.getSystemMemoryInfo();

let usage = 0;

let overallUsage = 0, overallTotal = 0;

for (let i = 0; i < cpus.length; i++) {

const cpu = cpus[i];

let currentTimes = getCpuTimes(cpu);

total = (currentTimes[2] - lastMeasureTimes[i][2]) + (currentTimes[1] - lastMeasureTimes[i][1]) + (currentTimes[0] - lastMeasureTimes[i][0]);

usage = (currentTimes[1] - lastMeasureTimes[i][1]) + (currentTimes[0] - lastMeasureTimes[i][0]);

overallUsage += usage;

overallTotal += total;

cpuG[i].refresh((usage / total) * 100);

}

cpuOverall.setData([getCpuData(parseInt((overallUsage / overallTotal) * 100))]);

cpuOverall.draw();

memG.refresh(parseInt(((initMem.total - initMem.free) / initMem.total) * 100));

setLastMeasureTimes(cpus);

}, 1000);

 

 



Tags: ElectronJS NodeJS
Views: 125
Register for more exciting articles

Comments

Please login or register to post a comment.


There are currently no comments.