Developing a cross platform RAM meter using Neutralinojs

NeutralinoJs is a lightweight portable framework for developing web apps with native os functions. Today we have reached 160 stars on Github from the open source community. Take a look and give us a star if you are interested 😀.

Motivation 💪

Today we are going to build a “RAM meter” which shows the used portion of RAM as a percentage.

RAM Meter UI

Downloading Resources

Download a fresh copy of Neutralino SDK latest version (< 1MB with Windows and Linux support)

Download CSS percentage circle CSS script which provides colorful percentage circles.

Try executing the neutralino binary and check whether you are getting the default Neutralino app template. 👀

Developing the app

Design awesome UI

Simply link the circle.css and add some ids to identify elements via Javascript.

app/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NeutralinoJs</title>
<link rel="stylesheet" href="/assets/app.css">
<link rel="stylesheet" href="/assets/circle.css">
</head>
<body>
<div id="neutralinoapp">
<div id="meter" class="c100 p0 big">
<span id="percentage">0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
<script src="/neutralino.js"></script>
<script src="/assets/app.js"></script>
</body>
</html>

Writing the application

Write the application logic using Javascript. Here we can simply use Neutralino.computer.getRamUsage() to fetch current RAM status 😎.

app/assets/app.js

let myapp = {
myfunction : () => {
setInterval(() => {
Neutralino.computer.getRamUsage((data) => {
let percentage = parseInt(((data.ram.total - data.ram.available) / data.ram.total) * 100);
document.getElementById('percentage').innerHTML = `${percentage} %`;
document.getElementById('meter').className = `c100 p${percentage} big`

}, () => {});

},500);
}
};
Neutralino.init({
load: () => {
myapp.myfunction();
},
pingSuccessCallback : () => {

},
pingFailCallback : () => {
}
});

data contains the RAM’s total size and available size in bytes.

JSON response

{"ram":{"available":2156268,"total":8059452}}

Since the UI needs to be updated frequently we can put these things inside a setInerval() block.

Give a try to improve this simple RAM meter. Send us a PR if you have improved version 😋

Note : if you are running on Linux please use data instead of data.ram

Source code :

Happy coding!!