Panel Control

--- title: Systeme de communication entre NodeJS, Madmapper et arduino published: true description: Réalisation d'un système autorisant la communication entre NodeJS et arduino en passant par madmapper tags: - arduino - madmapper - nodejs - midi cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wqtgr4zy3kvnqy7asas.jpg --- Dans le cadre de création d'une pièce d'escape game, nous expérimentons le logiciel Madmapper pour gérer toute la partie audio visuelle. La projection vidéo, le son et la lumière sont au centre de l'univers du jeu. Concernant les interactions avec les joueurs et les énigmes, nous souhaitons contrôler ces instruments par Arduino. Dans les prévisions, nous souhaitons contrôler la salle via une application web afin d'y accéder depuis n'importe quel périphérique (mobile, desktop...) Les énigmes sont gérés sur arduino, madmapper récupère l'information et une application Web nous informe du status de la room et éventuellement nous permet de déclancher . Bonne surprise, Madmapper intègre Firmata. C'est un outil de contrôle Arduino facilitant la communication entre ce dernier et un logiciel tier. Ce qui permet de nouvelles possibilités d'interaction. Concernant l'application Web, pour mon confort, elle est en NodeJS. # Problématique Intuitivement, aillant Firmata sur le Arduino, je pensais pouvoir contrôler ce dernier avec un montage parallèle entre Madmapper et NodeJS. ![azdazd](https://i.imgur.com/Q6H6ilR.jpg) Malheureusement, si le Arduino est en communication avec Madmapper, NodeJS ne peut interagir avec le Arduino car le port et occupé. Je pars donc sur un montage en série des applications pour simplifier le flux d'information. ![montage serie](https://i.imgur.com/sE7jWmv.jpg) Dans cet exemple, nous allons préparer un interrupteur pour allumer et éteindre une LED. > Note : Pour ce développement, je suis sous un environnement Windows, ce qui affect la création de périphérique virtuel par NodeJs. C'est pour cela que nous installerons des applications tier pour palier à certain problème. # Hardware et Software * Arduino Uno * [Petit montage électrique avec une LED et une résistance](https://www.robot-maker.com/ouvrages/wp-content/uploads/2016/07/montageLed-1024x732.png) * [MadMapper](https://madmapper.com/) * [Midi-OX](http://www.midiox.com) * [LoopMidi](https://www.tobias-erichsen.de/software/loopmidi.html) * [IDE Arduino](https://www.arduino.cc/en/software) * [VSCode](https://code.visualstudio.com/) * [NodeJs](https://nodejs.org/en/) * [EasyMidi](https://www.npmjs.com/package/easymidi) * [Express](https://www.npmjs.com/package/express) # Preparation de l'environnement de travail ## LoopMidi Le logiciel permet de créer un périphérique midi virtuel. Il nous permet de communiquer entre l'app NodeJs et Madmapper. Une fois l'installation effectuée, déclare un nouveau périphérique en lui indiquant un nom (1) en cliquant sur le "+" en bas à gauche de la fenêtre. (2) ![ajouter un périphérique midi](https://i.imgur.com/v4nsaXf.png) > Personnellement, j'ai laissé le nom par défaut ## Midi-OX Midi-OX est un logiciel de consultation de log Midi. Une fois le périphérique sélectionné, nous pouvons consulter les communications IN et OUT avec ce dernier. Ouvrez Midi-OX et le moniteur si ce dernier ne s'ouvre pas automatiquement ![midi-ox monitor](https://i.imgur.com/Rq66FCl.png) Allez dans Options->Midi Devices pour lier Midi-OX à LoopMidi ![midi-ox options](https://i.imgur.com/ElJZUE0.png) Sélectionne le périphérique que vous avez créé avec LoopMidi dans la partie "MIDI Inputs" (1) et "Microsoft GS Wavetable Synth" dans "MIDI Outputs" (3). Si tout est ok, ils apparaîtront respectivement dans "Port Map Objects" (2) et "Port Mapping" (3). ![midi-ox midi inputs](https://i.imgur.com/33AdU57.png) Validez la sélection avec le bouton "OK". Un message "Opened MIDI INPUT" et "Opened MIDI OUTPUT" apparaîtront dans le moniteur ![monitor midi-ox](https://i.imgur.com/6JcALyO.png) Lors des tests, nous pourrons observer les logs dans ce moniteur. ## Installation de Firmata dans le Arduino Uno et communication avec MadMapper Une très bonne vidéo explique tout cela [ici](https://www.youtube.com/watch?v=muosra5uIAs) :) # Communication NodeJs et MadMapper Pour communiquer avec MadMapper depuis NodeJs, nous allons envoyer un signal MIDI depuis NodeJs et l'interpréter dans MadMapper ## EasyMidi Afin de déclencher un signal midi, nous allons utiliser le périphérique virtuel LoopMidi avec NodeJs. Dans votre dossier de projet : Initialisez le projet : ``` npm init ``` Installez easymidi : ``` npm intall easymidi ``` Et créé le script main.js : ``` let easymidi = require("easymidi") //on déclare easymidi let output = new easymidi.Output("loopMIDI Port") //On connecte easymidi au periphérique midi virtuel loopMIDI grâce à son nom // on envoi le signal midi output.send("cc", { controller: 37, // numéro de la commande value: 127, // valeur de la commande [0-127] channel: 0 // channel midi }) ``` Dans le cadre de notre interrupteur, nous allons utiliser l'opérateur "change control" qui change d'état quand on l'active et reste dans ce même état jusqu'à ce qu'on le déclenche de nouveau (un interrupteur en somme). Le numéro contrôleur 37 est reconnue comme une commande "change control". En fonction de cette valeur, il peut être reconnu comme un changement de pitch ou de modulation ou beaucoup d'autre commande. Entre 30 et 40 (à vérifier) sont reconnues les commandes de type Gate. > Note : il est possible de créer un périphérique midi virtuel à la volée avec easymidi. Cependant, Windows bloque sa création : ``` MidiOutWinMM::openVirtualPort: cannot be implemented in Windows MM MIDI API! ``` > Je n'ai pas essayé avec d'autres OS mais la plupart des tutos trouvé sur YouTube sont iOS et semble fonctionner sans trop de difficultés. [source](https://www.youtube.com/watch?v=vW2Lve_hMzg) En lançant le script, une ligne apparaît dans la console de log de Midi-OX. ![log monitor](https://i.imgur.com/kGJHXr6.png) Nous pourrons donc par la suite configurer un déclencheur avec MadMappeur avec cette commande. ## Création page web express À présent, nous allons modifier le script pour créer une page web et y afficher un bouton pour déclencher plus facilement la commande midi avec express. Installation de express ``` npm install express ``` Ajoutez le fichier index.html pour le front ``` Panel Control ``` Et le back ``` let easymidi = require("easymidi") let express = require('express') let output = new easymidi.Output("loopMIDI Port") const app = express() let is_on = false; app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }) app.post('/click', (req, res)=>{ console.log('received') output.send("cc", { controller: 37, value: (is_on) ? 0:127, channel: 0 }) is_on = !is_on; res.sendStatus(201); }) app.listen(3000) ``` Coté front, le but est simple: lorsqu'on clique sur le bouton, on envoie une requête POST au endpoint "/click" pour allumer ou éteindre la LED. Coté back, nous mettons en place l'API: Implémentation de express ``` let express = require('express') const app = express() ``` Création de l'index ``` app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }) ``` Création de l'endpoint ``` let is_on = false; app.post('/click', (req, res)=>{ console.log('received') output.send("cc", { controller: 37, value: (is_on) ? 0:127, channel: 0 }) is_on = !is_on; res.sendStatus(201); }) ``` À présent, nous pouvons tester le script et voir le resultat dans la console de log de Midi-OX. Le script est prêt ## Parametrage d'action midi sur MadMapper Rendez-vous sur MadMapper et connectez l'application au Arduino avec le module Firmata. Ensuite, choisissez un pin (je préconise le Pin3 pour le test) et cliquez sur le bouton "OUTPUT" pour activer la sortie. ![pin3](https://i.imgur.com/yOAltC5.png) La LED s'illumine. Dans le cas contraire, il faut sélectioner de nouveau le model du Arduino et le port pour forcer la connexion. Continuons avec click droit sur le bouton "OUTPUT" -> Add Control -> MIDI ![learn midi 1](https://i.imgur.com/7v7Vyac.png) Dans le nouveau panneau qui apparaît, clique sur le bouton "Learn" ![learn midi 2](https://i.imgur.com/35dFR4M.png) execute l'application NodeJs ``` node main.js ``` et clique sur le bouton ON/OFF de votre page. MadMapper va alors capturer l'information et l'assigner au bouton "OUTPUT" Désormais, chaque fois que vous cliquerez sur ce bouton "ON/OFF" vous commanderez la LED :D Félicitations !

madmapper

Systeme de communication entre NodeJS, Madmapper et arduino

Join Our Newsletter. No Spam, Only the good stuff.