Performance Monitor using ElectronJS, Flot Chart and justgauge

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);

.NET Force

Search This Blog

Performance Monitor using ElectronJS, Flot Chart and justgauge

Comments

Post a Comment