Blame platform-demos/fr/guitar-tuner.js.page

Packit 1470ea
Packit 1470ea
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="guide" style="task" id="guitar-tuner.js" xml:lang="fr">
Packit 1470ea
  <info>
Packit 1470ea
  <title type="text">Guitar tuner (JavaScript)</title>
Packit 1470ea
    <link type="guide" xref="js#examples"/>
Packit 1470ea
    <revision version="0.1" date="2012-03-09" status="stub"/>
Packit 1470ea
Packit 1470ea
    <credit type="author copyright">
Packit 1470ea
      <name>Susanna Huhtanen</name>
Packit 1470ea
      <email its:translate="no">ihmis.suski@gmail.com</email>
Packit 1470ea
      <years>2012</years>
Packit 1470ea
    </credit>
Packit 1470ea
Packit 1470ea
    <desc>Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME.</desc>
Packit 1470ea
  
Packit 1470ea
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
Packit 1470ea
      <mal:name>Luc Rebert,</mal:name>
Packit 1470ea
      <mal:email>traduc@rebert.name</mal:email>
Packit 1470ea
      <mal:years>2011</mal:years>
Packit 1470ea
    </mal:credit>
Packit 1470ea
  
Packit 1470ea
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
Packit 1470ea
      <mal:name>Alain Lojewski,</mal:name>
Packit 1470ea
      <mal:email>allomervan@gmail.com</mal:email>
Packit 1470ea
      <mal:years>2011-2012</mal:years>
Packit 1470ea
    </mal:credit>
Packit 1470ea
  
Packit 1470ea
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
Packit 1470ea
      <mal:name>Luc Pionchon</mal:name>
Packit 1470ea
      <mal:email>pionchon.luc@gmail.com</mal:email>
Packit 1470ea
      <mal:years>2011</mal:years>
Packit 1470ea
    </mal:credit>
Packit 1470ea
  
Packit 1470ea
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
Packit 1470ea
      <mal:name>Bruno Brouard</mal:name>
Packit 1470ea
      <mal:email>annoa.b@gmail.com</mal:email>
Packit 1470ea
      <mal:years>2011-12</mal:years>
Packit 1470ea
    </mal:credit>
Packit 1470ea
  
Packit 1470ea
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
Packit 1470ea
      <mal:name>Luis Menina</mal:name>
Packit 1470ea
      <mal:email>liberforce@freeside.fr</mal:email>
Packit 1470ea
      <mal:years>2014</mal:years>
Packit 1470ea
    </mal:credit>
Packit 1470ea
  </info>
Packit 1470ea
Packit 1470ea
  <title>Guitar tuner</title>
Packit 1470ea
Packit 1470ea
    <synopsis>
Packit 1470ea
      

Dans ce tutoriel, nous allons construire une petite application, Accordeur de guitare, utilisant JavaScript, GTK+ et GStreamer. Pour écrire et lancer tous les exemples de code vous-même, vous avez besoin d'un éditeur pour écrire le code, de Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

Packit 1470ea
   <list>
Packit 1470ea
      <item>

<link xref="#gstreamer">GStreamer pipelines</link>

</item>
Packit 1470ea
      <item>

<link xref="#script">Script for running the application</link>

</item>
Packit 1470ea
      <item>

<link xref="#imports">Libraries to import</link>

</item>
Packit 1470ea
      <item>

<link xref="#mainwindow">Creating the main window for the application</link>

</item>
Packit 1470ea
      <item>

<link xref="#buttons">Buttons for the tunes</link>

</item>
Packit 1470ea
      <item>

<link xref="#playSound">Making the sounds with GStreamer</link>

</item>
Packit 1470ea
      <item>

<link xref="#connecting">Connecting buttons to playSound</link>

</item>
Packit 1470ea
      <item>

<link xref="#guitarjs">The whole program</link>

</item>
Packit 1470ea
      <item>

<link xref="#terminal">Running the application form Terminal</link>

</item>
Packit 1470ea
    </list>
Packit 1470ea
  </synopsis>
Packit 1470ea
  

Après avoir suivi ce tutoriel, vous devriez voir ceci sur votre écran :

Packit 1470ea
  <media type="image" mime="image/png" src="media/guitar-tuner.png"/>
Packit 1470ea
  <section id="gstreamer">
Packit 1470ea
    <title>Les pipelines GStreamer</title>
Packit 1470ea
    

GStreamer est l'architecture multimédia de GNOME — vous pouvez vous en servir pour des jeux, des enregistrements, pour traiter des flux vidéo, audio, de webcam entre autres. Ici, nous allons nous en servir pour émettre des tonalités à une seule fréquence.

Packit 1470ea
    

Le concept de GStreamer est le suivant : il y a création d'un pipeline contenant plusieurs éléments de traitement en provenance d'une source à destination d'un collecteur (sortie). La source peut être un fichier image, une vidéo ou un fichier musical, par exemple, et la sortie un élément graphique ou une carte son.

Packit 1470ea
    

Entre la source et le collecteur, vous pouvez appliquer différents filtres et convertisseurs pour prendre en charge les effets, les conversions de format et ainsi de suite. Chaque élément du pipeline possède des propriétés pouvant être utilisées pour modifier son comportement.

Packit 1470ea
    <media type="image" mime="image/png" src="media/guitar-tuner-pipeline.png">
Packit 1470ea
      

Un exemple de pipeline GStreamer.

Packit 1470ea
    </media>
Packit 1470ea
  </section>
Packit 1470ea
  <section id="script">
Packit 1470ea
    <title>Script de lancement de l'application</title>
Packit 1470ea
    
Packit 1470ea
  #!/usr/bin/gjs]]>
Packit 1470ea
    

Cette ligne indique comment lancer le script. Elle doit être la première ligne de code et le script doit être exécutable. Pour donner les bonnes permissions, allez dans Terminal et lancer dans le dossier correct la commande : chmod +x nomduscript. Vous pouvez aussi utiliser le gestionnaire de fichiers graphique. Déplacez-vous dans le bon dossier où se trouve votre code, faites un clic-droit sur le fichier, sélectionnez Propriétés, cliquez sur l'onglet Permissions et cochez la case pour permettre l'exécution du fichier comme un programme.

Packit 1470ea
  </section>
Packit 1470ea
  <section id="imports">
Packit 1470ea
    <title>Bibliothèques à importer</title>
Packit 1470ea
    
Packit 1470ea
var Gtk = imports.gi.Gtk;
Packit 1470ea
var Gst = imports.gi.Gst;
Packit 1470ea
Packit 1470ea
const Mainloop = imports.mainloop;]]>
Packit 1470ea
    

Afin que le programme fonctionne, vous devez importer quelques bibliothèques d'introspection GObject à utiliser. Pour faire une interface graphique, nous avons besoin de Gtk et pour que Gstreamer fonctionne, nous avons besoin de Gst. Elles sont importées au début afin de pouvoir les utiliser partout ensuite. Nous importons également au début une boucle principale Mainloop pour prendre en charge le délai à utiliser avec les sons d'accordage.

Packit 1470ea
    </section>
Packit 1470ea
  <section id="mainwindow">
Packit 1470ea
    <title>Création de la fenêtre principale de l'application</title>
Packit 1470ea
    
Packit 1470ea
Gtk.init(null, 0);
Packit 1470ea
Gst.init(null, 0);
Packit 1470ea
Packit 1470ea
var guitarwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, border_width: 100});
Packit 1470ea
guitarwindow.title = "Guitar Tuner";
Packit 1470ea
guitarwindow.connect("destroy", function(){Gtk.main_quit()});
Packit 1470ea
Packit 1470ea
guitarwindow.show();
Packit 1470ea
Gtk.main();]]>
Packit 1470ea
    

L'importation de Gtk et Gst n'est pas suffisante, nous devons les initialiser afin qu'elles fonctionnent. Lorsque c'est fait, nous devons créer la fenêtre de l'application. Plus tard, nous allons placer tous les boutons pour faire les sons dans cette fenêtre. Afin que la fenêtre s'affiche, nous devons lui dire de s'afficher et nous avons besoin de lancer le code avec Gtk.main().

Packit 1470ea
  </section>
Packit 1470ea
  <section id="buttons">
Packit 1470ea
   <title>Les boutons pour les sons</title>
Packit 1470ea
   
Packit 1470ea
var guitar_box = new Gtk.ButtonBox ({orientation: Gtk.Orientation.VERTICAL, spacing: 10});
Packit 1470ea
Packit 1470ea
var E = new Gtk.Button({label: "E"});
Packit 1470ea
var A = new Gtk.Button({label: "A"});
Packit 1470ea
var D = new Gtk.Button({label: "D"});
Packit 1470ea
var G = new Gtk.Button({label: "G"});
Packit 1470ea
var B = new Gtk.Button({label: "B"});
Packit 1470ea
var e = new Gtk.Button({label: "e"});
Packit 1470ea
Packit 1470ea
guitar_box.add(E);
Packit 1470ea
guitar_box.add(A);
Packit 1470ea
guitar_box.add(D);
Packit 1470ea
guitar_box.add(G);
Packit 1470ea
guitar_box.add(B);
Packit 1470ea
guitar_box.add(e);
Packit 1470ea
Packit 1470ea
guitarwindow.add(guitar_box);
Packit 1470ea
Packit 1470ea
guitar_box.show_all();]]>
Packit 1470ea
   

Puisque Gtk.Window ne peut contenir qu'un seul élément graphique, nous devons créer quelque chose en dessous pour pouvoir ajouter tous les boutons nécessaires à l'intérieur. Dans cet exemple, nous utilisons Buttonbox. Après la création de Buttonbox, nous créons les boutons avec les étiquettes nécessaires. Après l'obtention des boutons, nous devons les ajouter au Buttonbox et celui-ci doit être ajouté au Gtk.Window et tout ce qui est dans Buttonbox doit être affiché.

Packit 1470ea
   

Après cette étape, vous devriez voir s'afficher une fenêtre à l'écran avec les 6 boutons. Pour l'instant, les boutons n'ont aucune action et nous verrons cela plus tard. Pour pouvoir connecter les signaux des boutons à quelque chose, il nous faut d'abord coder ce quelque chose.

Packit 1470ea
  </section>
Packit 1470ea
  <section id="playSound">
Packit 1470ea
   <title>Création des sons avec GStreamer</title>
Packit 1470ea
   
Packit 1470ea
var frequencies = {E: 329.63, A: 440,	D: 587.33,	G: 783.99,	B: 987.77,	e: 1318.5}
Packit 1470ea
Packit 1470ea
function playSound(frequency){
Packit 1470ea
  var pipeline = new Gst.Pipeline({name: "note"});
Packit 1470ea
  var source = Gst.ElementFactory.make("audiotestsrc","source");
Packit 1470ea
  var sink = Gst.ElementFactory.make("autoaudiosink","output");
Packit 1470ea
Packit 1470ea
  source.set_property('freq', frequency);
Packit 1470ea
  pipeline.add(source);
Packit 1470ea
  pipeline.add(sink);
Packit 1470ea
  source.link(sink);
Packit 1470ea
  pipeline.set_state(Gst.State.PLAYING);
Packit 1470ea
Packit 1470ea
  Mainloop.timeout_add(500, function () {
Packit 1470ea
    pipeline.set_state(Gst.State.NULL);
Packit 1470ea
	  return false;
Packit 1470ea
  });
Packit 1470ea
}]]>
Packit 1470ea
   

The first thing we need to do is decide what tunes we want to make when we push a button. The frequencies list takes care of that. After that we get to actually making the sounds with the function playSound. For function playSound we give as an input a frequency (that we just defined in the frequencies variable). First thing we need to construct is a pipeline, a source and a sink. For the source we set the frequency. To the pipeline we add both the source and the sink and then we tell it to keep playing. As a last thing we use the const Mainloop to get the pipeline to stop after a 500ms.

Packit 1470ea
   

Now we have the method of playing a tune when clicking a button. Next well make the connections between pushing a button and playing the correct sound from that button.

Packit 1470ea
  </section>
Packit 1470ea
  <section id="connecting">
Packit 1470ea
   <title>Connexion des boutons à playSound</title>
Packit 1470ea
   
Packit 1470ea
E.connect("clicked", function() {
Packit 1470ea
  playSound(frequencies.E);
Packit 1470ea
});
Packit 1470ea
A.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.A);
Packit 1470ea
});
Packit 1470ea
D.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.D);
Packit 1470ea
});
Packit 1470ea
G.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.G);
Packit 1470ea
});
Packit 1470ea
B.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.B);
Packit 1470ea
});
Packit 1470ea
e.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.e);
Packit 1470ea
});]]>
Packit 1470ea
   

The method of connecting button clicks to playSound with the correct tune

Packit 1470ea
   is by using the connect method of the button widget. So we choose a button
Packit 1470ea
   to be connected and type E.connect("clicked",
Packit 1470ea
   function(){playSound(frequencies.E);}); The connect
Packit 1470ea
   tells that when pushing E, something should happen. The clicked
Packit 1470ea
   tells the type of the signal happening to E and then in the
Packit 1470ea
   function(){}; we call playSound with the correct note that
Packit 1470ea
   should be associated with the button.

Packit 1470ea
  </section>
Packit 1470ea
  <section id="guitarjs">
Packit 1470ea
    <title>Le programme complet</title>
Packit 1470ea
    

So this is what all the parts combined looks like. When running this code, you should be able to tune your guitar (if you have correctly calibrated speakers).

Packit 1470ea
      
Packit 1470ea
#!/usr/bin/gjs
Packit 1470ea
var Gtk = imports.gi.Gtk;
Packit 1470ea
var Gst = imports.gi.Gst;
Packit 1470ea
Packit 1470ea
const Mainloop = imports.mainloop;
Packit 1470ea
Packit 1470ea
Gtk.init(null, 0);
Packit 1470ea
Gst.init(null, 0);
Packit 1470ea
Packit 1470ea
var guitarwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, border_width: 100});
Packit 1470ea
guitarwindow.title = "Guitar Tuner";
Packit 1470ea
guitarwindow.connect("destroy", function(){Gtk.main_quit()});
Packit 1470ea
Packit 1470ea
var guitar_box = new Gtk.ButtonBox ({orientation: Gtk.Orientation.VERTICAL, spacing: 10});
Packit 1470ea
Packit 1470ea
var E = new Gtk.Button({label: "E"});
Packit 1470ea
var A = new Gtk.Button({label: "A"});
Packit 1470ea
var D = new Gtk.Button({label: "D"});
Packit 1470ea
var G = new Gtk.Button({label: "G"});
Packit 1470ea
var B = new Gtk.Button({label: "B"});
Packit 1470ea
var e = new Gtk.Button({label: "e"});
Packit 1470ea
Packit 1470ea
var frequencies = {E: 329.63, A: 440,	D: 587.33,	G: 783.99,	B: 987.77,	e: 1318.5}
Packit 1470ea
Packit 1470ea
Packit 1470ea
function playSound(frequency){
Packit 1470ea
  var pipeline = new Gst.Pipeline({name: "note"});
Packit 1470ea
Packit 1470ea
  var source = Gst.ElementFactory.make("audiotestsrc","source");
Packit 1470ea
  var sink = Gst.ElementFactory.make("autoaudiosink","output");
Packit 1470ea
Packit 1470ea
  source.set_property('freq', frequency);
Packit 1470ea
  pipeline.add(source);
Packit 1470ea
  pipeline.add(sink);
Packit 1470ea
  source.link(sink);
Packit 1470ea
  pipeline.set_state(Gst.State.PLAYING);
Packit 1470ea
Packit 1470ea
  Mainloop.timeout_add(500, function () {
Packit 1470ea
    pipeline.set_state(Gst.State.NULL);
Packit 1470ea
	  return false;
Packit 1470ea
});
Packit 1470ea
}
Packit 1470ea
Packit 1470ea
E.connect("clicked", function() {
Packit 1470ea
  playSound(frequencies.E);
Packit 1470ea
});
Packit 1470ea
A.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.A);
Packit 1470ea
});
Packit 1470ea
D.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.D);
Packit 1470ea
});
Packit 1470ea
G.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.G);
Packit 1470ea
});
Packit 1470ea
B.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.B);
Packit 1470ea
});
Packit 1470ea
e.connect("clicked", function(){
Packit 1470ea
  playSound(frequencies.e);
Packit 1470ea
});
Packit 1470ea
Packit 1470ea
guitar_box.add(E);
Packit 1470ea
guitar_box.add(A);
Packit 1470ea
guitar_box.add(D);
Packit 1470ea
guitar_box.add(G);
Packit 1470ea
guitar_box.add(B);
Packit 1470ea
guitar_box.add(e);
Packit 1470ea
Packit 1470ea
guitarwindow.add(guitar_box);
Packit 1470ea
Packit 1470ea
guitar_box.show_all();
Packit 1470ea
guitarwindow.show();
Packit 1470ea
Gtk.main();]]>
Packit 1470ea
  </section>
Packit 1470ea
Packit 1470ea
<section id="terminal">
Packit 1470ea
  <title>Exécution de l'application à partir de Terminal</title>
Packit 1470ea
  

Pour lancer cette application, ouvrez Terminal, allez dans le dossier où votre application est enregistrée et lancez

<screen> <output style="prompt">$ </output><input> GJS_PATH=`pwd` gjs guitarTuner.js</input> </screen>
Packit 1470ea
    </section>
Packit 1470ea
Packit 1470ea
<section id="impl">
Packit 1470ea
 <title>Implémentation de référence</title>
Packit 1470ea
 

Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="guitar-tuner/guitar-tuner.js">programme de référence</link>.

Packit 1470ea
</section>
Packit 1470ea
Packit 1470ea
Packit 1470ea
</page>