I have created a Flask proyect to show in real time some metrics from the computer. First I used chart.js and everything works fine.
Here is what I achived with using chart.js:
This library is not as fast as I need, so after investigating i found that I could use either uPlot or WebGL-plot.
I’m trying using webgl-plot.
This is what I’ve done so far. First of all this is the stucture that my proyect has:
-FLASK_WEBGL/
- .venv/
- static/
- css/
- base.css
- index.css
- scripts/
- webgl_scripts/
- All the scripts that appeare in the github repo under dist/
- script_cpu.js
- script_drive.js
- script_ram.js
- script_temp.js
- templates/
- base.html
- index.html
- app.py
My app.py, here I obtain all the data I need and save it in a json file:
import psutil, json, wmi
from flask import Flask, render_template
app = Flask(__name__, static_url_path='/static')
def get_cpu_temperature():
# Code to get cpu temperature
return temp
@app.route("/")
def index():
return render_template("index.html")
@app.route("/get_data")
def get_data():
temperature = get_cpu_temperature()
data = {
'temp_cpu': temperature if temperature is not None else 'N/A',
'cpu_percent': psutil.cpu_percent(),
'ram_percent': psutil.virtual_memory().percent,
'drive_percent': psutil.disk_usage('/').percent
}
return json.dumps(data)
In case it’s needed, this is what i get in 127.0.0.1/get_data:
{"temp_cpu": 53.8, "cpu_percent": 0.0, "ram_percent": 43.3, "drive_percent": 85.7}
This is th base.html and the index.html:
Base
Here I load the webplot.js.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="module" src="{{ url_for('static', filename='scripts/webgl_scripts/webglplot.js') }}"></script>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Index
For the example I’m only showing one of the elements to plot.
{% extends "base.html" %}
{% block title %} Metrics {% endblock %}
{% block content %}
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
</head>
<header>
<h1> Computer real time metrics </h1>
</header>
<main>
<div class="ram-container">
<div class="container-title"> <h2> RAM </h2> </div>
<div class="container-chart">
<canvas class="canvas" id="ram-chart"> </canvas>
<script type="module" src="{{ url_for('static', filename='scripts/script_ram.js') }}"></script>
</div>
</div>
</main>
{% endblock %}
Finally this is the script I’ve written, script_ram.js:
- First of all I create the plot where the data will be printed.
- Second I create the function
updateRAMData() where I parse th data from the json and save it in an array called ramData.
- At the end I set an interval so that every 2 seconds I can get the data and graph it.
var ramData = [];
function generatePlotInstance() {
const plot = new WebGLPlot();
plot.setData(ramData);
plot.setTitle("Gráfico de Uso de RAM");
plot.renderTo("ram-chart");
}
function updateRAMData() {
$.get('/get_data', function (data) {
try {
const parseData = JSON.parse(data);
const ramPercent = parseData.ram_percent;
const timestamp = Date.now();
ramData.push([timestamp, ramPercent]);
if (ramData.length > 450) { ramData.shift(); }
generatePlotInstance();
} catch (error) {
console.log('Error RAM', error);
}
});
}
setInterval(updateRAMData, 2000);
The problem I have is that in the console log of the navigator I get this error:
Error RAM ReferenceError: WebGLPlot is not defined
generatePlotInstance http://127.0.0.1:5000/static/scripts/script_ram.js:4
updateRAMData http://127.0.0.1:5000/static/scripts/script_ram.js:21
jQuery 7
c
fireWith
l
o
send
ajax
i
updateRAMData http://127.0.0.1:5000/static/scripts/script_ram.js:11
setInterval handler* http://127.0.0.1:5000/static/scripts/script_ram.js:29
script_ram.js:23:21
And I do not know how to solve it so I can see if the code I`ve written works.
