JSgrapheur est une bibliothèque en JavaScript pour insérer des graphiques dans des pages Web. Elle présente les caractéristiques suivantes :
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="JSgrapheur.js"></script> <style> body { text-align: center; } </style> </head> <body> <script> JST=new JSgrapheur(); JST.axe_horizontal({ minimum: -10, maximum: 10 }); JST.axe_vertical({ minimum: -10, maximum: 9 }); x=[-7,7,5,-5,-7]; y=[7,4,-5,-8,7]; JST.graphe({ abscisse: x, ordonnee: y }); JST.tracer(); </script> </body> </html>
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color : #111; text-align: center; } </style> <script src="JSgrapheur.js"></script> </head> <body> <div id="graphique"></div> <script> unite_angles="rad"; // "deg" ou "rad" pour les fonctions trigonométriques JST=new JSgrapheur(); JST.couleurs({ fond: "#222", cadre: "#777", quadrillage: "#444", texte: "#aaa" }); JST.fond({ id: "graphique", titre: "Exemple de graphique", largeur: 600, hauteur: 400 }); JST.axe_horizontal({ minimum: -11, maximum: 10, graduation: 2, label: "Abscisses" }); JST.axe_vertical({ minimum: -10, maximum: 9, graduation: 2, label: "Ordonnées" }); x1=JST.suite({ debut: -10, fin: 0, nombre_valeurs: 80 }); y1=JST.calcul({ fonction: "8*sin(t)", variable: "t", valeurs_variable: x1 }); x2=JST.suite({ debut: -10, fin: 10, nombre_valeurs: 181 }); y2=JST.calcul({ fonction: "3*sqrt(u)", variable: "u", valeurs_variable: x2 }); JST.graphe({ abscisse: x1, ordonnee: y1, couleur: "#0a0" }); JST.graphe({ abscisse: x2, ordonnee: y2, couleur: "#d70" }); JST.tracer(); </script> </body> </html>
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color : #111; text-align: center; } </style> <script src="JSgrapheur.js"></script> </head> <body> <div id="graphique"></div> <script> JST=new JSgrapheur(); JST.fond({ id: "graphique", titre: "Graphique animé", largeur: 600, hauteur: 400 }); JST.couleurs({ fond: "#222", cadre: "#777", quadrillage: "#444", texte: "#aaa" }); JST.axe_horizontal({ minimum: 0, maximum: 12, label: "Abscisses" }); JST.axe_vertical({ minimum: -1, maximum: 1, label: "Ordonnées" }); x=JST.suite({ debut: 0, fin: 12, nombre_valeurs: 40 }); t=0; courbe_animee=function() { y=JST.calcul({ fonction: "cos(t)*sin(x-1.5*t)", variable: "x", valeurs_variable: x }); JST.graphe({ abscisse: x, ordonnee: y, couleur: "#d70" }); JST.tracer(); t=t+0.05; }; setInterval(courbe_animee,20); </script> </body> </html>
Il s'agit d'afficher sous la forme d'un graphique évolutif des données,
issues d'un capteur par exemple, envoyées périodiquement dans un fichier.
Le programme en Python ci-dessous permet d'effectuer un test.
Il produit des données enregistrées dans le fichier valeurs.js
.
#!/usr/bin/python3 import numpy as np import time tab_x = np.linspace(-10,10,100) ch_x = "x = "+str(list(tab_x))+";\n" num = 0 while True : tab_x += 0.2 tab_y = np.sin(tab_x) ch_y = "y = "+str(list(tab_y))+";" fichier = open("valeur.js", "w") fichier.write(ch_x) fichier.write(ch_y) fichier.close() print("Bloc",num) num += 1 time.sleep(0.05)
L'exemple de page HTML ci-dessous affiche ces données. Cette page peut s'installer sur un serveur Web mais fonctionne aussi en local. Le programme en Python produisant les coordonnées de 20 points chaque seconde, le code en JavaScript les récupère également 20 fois par seconde.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color : #111; text-align: center; } </style> <script src="JSgrapheur.js"></script> <script> function tester() { JST.graphe({ abscisse: x, ordonnee: y }); JST.tracer(); document.body.removeChild(document.body.lastChild); script_complementaire=document.createElement("script"); script_complementaire.src="valeur.js"; document.body.appendChild(script_complementaire); } onload=function() { setInterval(tester, 50); }; </script> </head> <body> <div id="graphique"></div> <script> script_complementaire=document.createElement("script"); script_complementaire.src="valeur.js"; document.body.appendChild(script_complementaire); JST=new JSgrapheur(); JST.fond({ id: "graphique", titre: "Graphique animé", largeur: 600, hauteur: 400 }); JST.couleurs({ fond: "#222", cadre: "#777", quadrillage: "#444", texte: "#aaa" }); JST.axe_horizontal({ minimum: -10, maximum: 10, label: "Abscisses" }); JST.axe_vertical({ minimum: -1.1, maximum: 1.1, label: "Ordonnées" }); </script> </body>
Résultat :
Une clé SDR (software defined radio traduit en français par radio logicielle) capte les ondes hertziennes pour les convertir en données numériques, transmises via le port USB. Il s'agit de les récupérer et de les afficher en temps réel.
Pour cela, une solution consiste à se servir de sdrvm, un interpréteur de JavaScript en ligne de commande, tourné vers la radio logicielle. Il est possble d'installer sdrvm sur un ordinateur ou d'utiliser la version présente sur DragonOS, une distribution de GNU/Linux. DragonOS existe dans une version pour PC et une version pour Raspberry Pi.
Pour fonctionner pleinement, cet interpréteur commercial nécessite de s'acquitter
d'une licence, facultative pour un usage restreint.
La commande sdrvm
suivie de l'option -f
prend en paramètre le nom du fichier à interpréter.
Comme précédemment, les données sont enregistrées dans le fichier valeurs.js
.
$ ./sdrvm -f spectre.js
Exemple de fichier spectre.js
:
var rx = Soapy.makeDevice({query : 'driver=rtlsdr' }); rx.setRxCenterFreq(97); rx.setRxSampleRate(2.56e6); rx.setGain(40); rx.dump(); // Affiche les informations de la carte radio var num = 0, fifo_from_rx = Queues.create('input'), tfr=1024; // Transformation de Fourier rapide if( !fifo_from_rx.ReadFromRx( rx ) ) { print('Lecture du flux impossible'); exit(); } var IQBlock = new IQData(); print('Lecture du flux'); while( fifo_from_rx.isFromRx() ) { if( IQBlock.readFromQueue( fifo_from_rx ) ) { // IQBlock.dump(); // Affiche les informations du bloc IQ var ps = IQBlock.getPowerSpectrum(tfr); IO.fwrite("valeur.js","x=" + JSON.stringify(ps.frequencies) + ";\n"); IO.fappend("valeur.js","y=" + JSON.stringify(ps.spectrum) + ";\n"); print( 'Bloc ' + num ); num++ ; } }
La page HTML ci-dessous produit le spectre. Les données provenant de la clé SDR avec une fréquence relativement élevée, le code en JavaScrit affiche les courbes les unes à la suite des autres sans délai.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color : #111; text-align: center; } </style> <script src="JSgrapheur.js"></script> <script> tester=function() { JST.graphe({ abscisse: x, ordonnee: y }); JST.axe_horizontal({ minimum: x[0], maximum: x[x.length-1], label: "Fréquence (MHz)", graduation: 0.1 }); JST.tracer(); document.body.removeChild(document.body.lastChild); script_complementaire=document.createElement("script"); script_complementaire.src="valeur.js"; document.body.appendChild(script_complementaire); requestAnimationFrame(tester) }; onload=tester; </script> </head> <body> <div id="graphique"></div> <script> script_complementaire=document.createElement("script"); script_complementaire.src="valeur.js"; document.body.appendChild(script_complementaire); JST=new JSgrapheur(); JST.fond({ id: "graphique", titre: "Spectre", largeur: 600, hauteur: 400 }); JST.couleurs({ fond: "#222", cadre: "#777", quadrillage: "#444", texte: "#aaa" }); JST.axe_vertical({ minimum: -70, maximum: -20, label: "Niveau (dB FS)", graduation: 10 }); </script> </body> </html>
Résultat :