JSGRAPHEUR

Introduction

JSgrapheur est une bibliothèque en JavaScript pour insérer des graphiques dans des pages Web. Elle présente les caractéristiques suivantes :

Télécharger

Utilisation basique

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>

Résultat

Utilisation avancée

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>

Résultat

Animation

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>

Résultat

Test d'affichage en temps réel

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 :

Exemple d'affichage en temps réel

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 :