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.
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!!
