Le murmure des arbres
Serveur web et Apache2 sur ubuntu 20.04
- installation de apache2
  - pour vérifier que apache2 écouter bien le port souhaiter
Webapp, OSC et websockets

Le murmure des arbres

projet

Depuis plusieurs années, les artistes sonores et compositeurs de l’association Apo33 cherchent à percer le langage des arbres. Ils ont enregistré des arbres sur plusieurs continents et ont constitué une librairie avec laquelle ils mêlent des sons gutturaux qu’ils réalisent avec leur voix. Sur une base de borborygmes et de sons de gorge inspirés du son des arbres enregistrés, ces voix de bois créent un espace de discussion, poésie sonore détournée de l’écoute intime des arbres. Le noyau, la structure interne de ces arbres anciens amplifiés devient sonorités craquantes à travers leur fragile bout des doigts sur lesquels nous attachons des micro-contacts. Quand on écoute ces arbres, nous avons l'impression d’accéder à des centaines de secrets et d’histoires cachés au sein même des feuilles bruissantes et des profonds grognements provenant de leur tronc. Les arbres nous parlent, il nous faut juste les écouter.

Dans le cadre de cette nouvelle composition nous souhaitons continuer une des recherches que nous menons sur ces relations entre écoute, nature, environnement et compositions musicales. Il s'agit plus précisément de nos recherches sur le langage des arbres et le mystère qui entoure un des organismes vivants le plus important de notre planète. Pour cela nous avons mis en place une installation sonore permanente en ligne qui permet de mixer et de transformer en temps-réel les sons enregistrés via une interface web et une application pour smartphone. Nous invitons le public à venir participer à une composition musicale participative où chacun peut créer sa propre musique et sa propre écoute tout en partageant avec le public à travers le monde.

les différentes étapes du projet :

installer un VNC sur ubuntu 20.04

installation de TigerVNC pour le contrôle à distance

source https://bytexd.com/how-to-install-configure-vnc-server-on-ubuntu/

ouvrir un terminal et entrer les commandes suivantes :

sudo apt update

sudo apt install xfce4 xfce4-goodies

- Sélectionnez n'importe quel gestionnaire d'affichage et appuyez sur Entrée

sudo apt install tigervnc-standalone-server

vncserver

- vous serez invité à taper 2 fois le mot de passe nécessaire qui servira pour la connection à TigerVNC

- pour la ligne Would you like to enter a view-only password (y/n)?

- entrer N, c'est un mot de passe en lecture seul

- cette commande vncpasswd servira à changer le mot de passe si nécessaire

vncserver -kill :1

 nano ~/.vnc/xstartup

- contenu du fichier

 #!/bin/sh

# Start up the standard system desktop
unset SESSION_MANAGER
unset DBUS_SESSION_BUS_ADDRESS

/usr/bin/startxfce4

[ -x /etc/vnc/xstartup ] && exec /etc/vnc/xstartup
[ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources
x-window-manager &

 chmod +x ~/.vnc/xstartup

 vncserver -localhost no :1

- à ce stade on peut ce connecter à l'aide d'un vncviewer avec l'ip de la machine ou l'ip du routeur avec redirection de port configurer

- le port utilisé par TigerVNC est le 5901 par défaut

Pour le démarrage automatique de TigerVNC

Dans un terminal entrer les commandes suivantes:

vncserver -kill :1

cd /etc/systemd/system

 sudo nano tigervnc@:1.service

- contenu du fichier, dans le fichier crée définir l'user et le WorkingDirectory en fonction de votre machine

[Unit]
Description=Remote desktop service (VNC)
After=syslog.target network.target

[Service]
Type=forking
User=l'utilisateur
WorkingDirectory=/home/utilisateur
ExecStartPre=-/usr/bin/vncserver -kill :1
ExecStart=/usr/bin/vncserver -localhost no :1
ExecStop=/usr/bin/vncserver -kill :1

[Install]
WantedBy=multi-user.target

sudo systemctl enable tigervnc@\:1.service

sudo systemctl daemon-reload

cette ligne corrige le problème unable to contact settings server:

sudo apt install dbus-x11

sudo systemctl start tigervnc@:1

Serveur web et Apache2 sur ubuntu 20.04

installation de apache2

source https://doc.ubuntu-fr.org/lamp

ouvrez un terminal et entrer les commandes suivantes :

sudo apt install apache2 mariadb-server php-mysql libapache2-mod-php php-gd php-json php-curl php-mbstring php-intl php-imagick php-xml php-zip

cd /etc/apache2/sites-available

sudo nano 000-default.conf

remplacé <VirtualHost *:80> par

<VirtualHost *:8080>

 cd  /etc/apache/

sudo nano ports.conf

- remplacé la ligne Listen 80 par le port d'écouter souhaité ici 8080

Listen 8080

systemctl restart apache2

pour vérifier que apache2 écouter bien le port souhaiter

netstat -tlpn| grep apache

ss -tlpn| grep apache

Webapp, OSC et websockets

installation de nodejs sous ubuntu

sudo apt-get update

sudo apt-get install nodejs npm

installation de osc-js

lien https://github.com/adzialocha/osc-js/

faire cette commande dans le même dossier que la où voulez crée le bridge.js/page web pour simplifié cela

npm i osc-js

création du bridge.js

lien de la doc sur lequel le code est basé https://github.com/adzialocha/osc-js/wiki/PureData-&-MaxMSP

nano bridge.js

contenu du fichier, à noté qu'il faut remplacer certaine valeur en fonction de la configuration souhaité

const ws_host = "ip_interface_serveur"; //ip  server
const ws_port = port_ecouter_par_le_serveur; //port define for server websocket

const udp_host = "localhost"; //server host puredata
const udp_port = port_ecouter_par_puredata; //server host puredata

const OSC = require('osc-js') //Import the library osc-js

const config = { udpClient: {host :udp_host, port: udp_port}, //bridge setup
                 wsServer: {host: ws_host, port: ws_port,}, //bridge setup
}
const osc = new OSC(
    { plugin: new OSC.BridgePlugin(config)}, //bridge setup, websocket server is included in the BridgePlugin
    );
osc.open() //bridge start

Pour le démarrage automatique du node

ouvrir un terminal et entrer :

sudo apt install npm

sudo npm install -g pm2

- changer le chemin en fonction de où ce trouve le ficher bridge.js

pm2 start le_chemin_du_fichier

pm2 save

pm2 list

pm2 startup

- puis faire la entrer la commande retourné

- une fois tout setup voici les commandes utile en cas de crash :

pm2 list

pm2 restart bridge.js

création de la page web

refaire la commande npm i osc-js si le dossier de la page web n'est pas le même que celui du bridge.js

cd le_chemin_ou_cree_les_pages_web

sudo nano index.css

- le contenu du fichier

.slider-wrapper input {
    width: 20em;
    height: 3em;
    margin: 0;
    transform-origin: 10em 10em ;
    transform: rotate(-90deg);
  }
.slider-wrapper {
    display: inline-block;
    width: 2em;
    height: 18em;
    padding: 0;
}
.increase {
    width:3em;
    height:3em;
}
.bang{
    width: 3em ;
    height: 3em;
    border-radius: 50%;
    background-color: #DFDFDF;
}
bouton{
	color:#DFDFDF;
}
body{
	background-color:#313638;
}
p{
	color:#DFDFDF;
}
h1{
	color:#ffffff;
	font-size:250%;
}

h2{
	color:#dddddd;
	font-size:200%;
}

h3{
	color:#bbbbbb;
	font-size:150%;
}
li{
	color:#DFDFDF;
}
a{
	text-decoration: none;
	color:#ffffff;
}

sudo nano index.html

- le contenu du fichier

<html>

	<head>

		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

		<link charset="UTF8" href=".\index.css" rel="stylesheet" type="text/css" />

		<title>Page index</title>

	</head>

	

	<body>

		<div>

			<p>

				<ul>

				<li><a href= ".\test1.html"> <h3>Page test 1</h3></a></li>

				<li><a href= ".\12_slider.html"><h3> Page 12 sliders</h3></a></li>

				</ul>

			</p>

			

		</div>

	</body>

</html>

sudo nano 12_slider.css

- le contenu du fichier

.slider {
  -webkit-appearance: none;
   background: #CCC;
   background-image:linear-gradient(
      to right, 
      #22841a 30%, #81c124 45%, #c2f288 99%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
     
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #81c124;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 35px;
  background: #000;
  cursor: pointer;
}


.slider-wrapper {
    display: inline-block;
    width: 2em;
    height: 18em;
    padding: 0;
}


.slider-wrapper input {
    width: 20em;
    height: 0.5em;
    margin: 1.5em;
    transform-origin: 10em 10em ;
    transform: rotate(-90deg);
  }


/* Hide the default checkbox */
.increase {
  display: none;
}

/* Create a circular shape for the checkbox */
.custom-checkbox {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #ccc;
  overflow: hidden;
}

/* Add a checkmark icon inside the checkbox when it's checked */
.custom-checkbox:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show the checkmark icon when the checkbox is checked */
.increase:checked + .custom-checkbox:before {
  opacity: 1;
}

/* Style the label element */
.custom-checkbox-label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: 14px;
}

/* Align the checkbox and label vertically */
.custom-checkbox-label span {
  display: inline-block;
  vertical-align: middle;
}

.bang{
    width: 3em ;
    height: 3em;
    border-radius: 50%;
    background-color: #DFDFDF;
    
}
.logo_apo33{
	width: 10em ;
    height: auto;
}

.more_info{
	color:#bbbbbb;
	font-size:120%;
}
body{
	background-color:#313638;
}
p{
	color:#DFDFDF;
}
h1{
	color:#ffffff;
	font-size:250%;
}

h2{
	color:#dddddd;
	font-size:200%;
}

h3{
	color:#bbbbbb;
	font-size:150%;

li{
	color:#DFDFDF;
}
a{
	text-decoration: none;
	color:#ffffff;
}

sudo nano 12_slider.html

- le contenu du fichier

<html>
	<head>
		<!--<meta http-equiv="refresh" content="20">-->
		<!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>-->
		<link charset="UTF8" href=".\12_slider.css" rel="stylesheet" type="text/css" />
		<title>page 12 slider</title>
	</head>
  <body>
  <!--
    <table>
    <td>
      <label for="str_road"><p>route/road :</p></label>
    </td>
    <td>
      <input type="text" id="str_road" name="str" 
       minlength="0" maxlength="100">
    </td>
    </table>

    <p><br/></p>

    <table border="0">
      <td>
        <label for="msg"><p>Message :</p></label>
      </td>
      <td>
        <input type="text" id="msg" name="msg" 
         minlength="0" maxlength="100">
      </td>
      <tr>
        <td>

        </td>
        <td>
          <button id="send">send the message</button>
        </td>
      </tr>
    </table>

   <p><br/></p>
	-->
	<table border="0">
	<tr>
		<td>
			<h1>Le murmure des arbres</h1>
		</td>
		<td>
			<img class ="logo_apo33" src="./logo_apo33.png" alt="logo apo33">
		</td>
	</tr>
   </table>
   <table border="0">
    <tr>
	 <td>
	  <h3>Mixing</h3>
	 </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_1" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_2" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_3" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_4" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_5" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_6" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_7" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_8" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_9" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_10" min="0" max="127" value="0" step="1">
        </div>
      </td>
      <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_11" min="0" max="127" value="0" step="1">
        </div>
      </td>
	  <td>
        <div class="slider-wrapper">
          <input class="slider" type="range" id="slider_vertical_12" min="0" max="127" value="0" step="1">
        </div>
      </td>
    </tr>
    <tr>
		<td>
		  <h3>pitch</h3>
		 </td>
		<td>
			<label class="custom-checkbox-label" for="toggle_1">
			<input class="increase" type="checkbox" id="toggle_1" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_2">
			<input class="increase" type="checkbox" id="toggle_2" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_3">
			<input class="increase" type="checkbox" id="toggle_3" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_4">
			<input class="increase" type="checkbox" id="toggle_4" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_5">
			<input class="increase" type="checkbox" id="toggle_5" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_6">
			<input class="increase" type="checkbox" id="toggle_6" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_7">
			<input class="increase" type="checkbox" id="toggle_7" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_8">
			<input class="increase" type="checkbox" id="toggle_8" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_9">
			<input class="increase" type="checkbox" id="toggle_9" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_10">
			<input class="increase" type="checkbox" id="toggle_10" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_11">
			<input class="increase" type="checkbox" id="toggle_11" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
		<td>
			<label class="custom-checkbox-label" for="toggle_12">
			<input class="increase" type="checkbox" id="toggle_12" name="interupteur" value="1">
			<span class="custom-checkbox"></span></label>
		</td>
    </tr>
	
    <tr>
	<td>
	  <h3>sound</h3>
	 </td>
      <td>
        <button class="bang" id="bang_1"></button>
      </td>
      <td>
        <button class="bang" id="bang_2"></button>
      </td>
      <td>
        <button class="bang" id="bang_3"></button>
      </td>
      <td>
        <button class="bang" id="bang_4"></button>
      </td>
      <td>
        <button class="bang" id="bang_5"></button>
      </td>
      <td>
        <button class="bang" id="bang_6"></button>
      </td>
      <td>
        <button class="bang" id="bang_7"></button>
      </td>
      <td>
        <button class="bang" id="bang_8"></button>
      </td>
      <td>
        <button class="bang" id="bang_9"></button>
      </td>
      <td>
        <button class="bang" id="bang_10"></button>
      </td>
      <td>
        <button class="bang" id="bang_11"></button>
      </td>
      <td>
        <button class="bang" id="bang_12"></button>
      </td>
	  
    </tr>
	</table>
	<p></br></p>
	<div>
		<audio controls="controls" preload="none"><source src="http://apo33.org:8000/arbres.ogg" type="application/ogg" /></audio> <!--ogg player-->
	</div>
	
	<p></br></p>
	<div>
	<p>Developed by Julien Ottavi, programmation by Max Siliphayvanh, visual by Jenny Pickett - artistic concept by OttaviPickett and Apo33</p>
	<p>
	<a class="more_info" href= "https://apo33.org/">More Info here</a>
	</p>
	</div

</body>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/adzialocha/osc-js/lib/osc.js"></script>
    <!--<script type="text/javascript" src="node_modules/osc-js/lib/osc.min.js"></script> --> 
    <script type="text/javascript" src='./12_slider.js'></script> <!-- for import the script 12_slider.js-->
</html>

sudo nano 12_slider.js

- le contenu du fichier, des valeurs son à changer en fonction du serveur

const ws_host = "ip_publique_serveur";//public ip of the websocket server
const ws_port = port_ecouter_par_le_serveur;//port websocket server

//const ws_port = 8080; 
 var osc = new OSC(
  {plugin: new OSC.WebsocketClientPlugin({host: ws_host, port: ws_port,secure: false})} //client websocket configuration
  );
 osc.open(); // connect to websocket server

 /**
 document.getElementById('send').addEventListener('click', () => {
   var str_road ="";  //retrieving the value of the route/road input field
  var msg = document.getElementById("msg").value; //retrieving the value of the Message input field
  var message = new OSC.Message(str_road,msg);
  osc.send(message);
 });
 **/
 document.getElementById('slider_vertical_1').addEventListener('input', () => {
  var str_road =""; 
  str_road = str_road +'/slider'; //add /slider to route
  str_road = str_road.trim()+'/1'; //add silder number to route
  var send_slider_v = Number(document.getElementById("slider_vertical_1").value); //retrieving the value of the slider of the web page
  var message = new OSC.Message(str_road,send_slider_v); //message creation before sending
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_2').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/2';
  var send_slider_v = Number(document.getElementById("slider_vertical_2").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_3').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/3';
  var send_slider_v = Number(document.getElementById("slider_vertical_3").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_4').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/4';
  var send_slider_v = Number(document.getElementById("slider_vertical_4").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_5').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/5';
  var send_slider_v = Number(document.getElementById("slider_vertical_5").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_6').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/6';
  var send_slider_v = Number(document.getElementById("slider_vertical_6").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_7').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/7';
  var send_slider_v = Number(document.getElementById("slider_vertical_7").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_8').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/8';
  var send_slider_v = Number(document.getElementById("slider_vertical_8").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_9').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/9';
  var send_slider_v = Number(document.getElementById("slider_vertical_9").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_10').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/10';
  var send_slider_v = Number(document.getElementById("slider_vertical_10").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_11').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/11';
  var send_slider_v = Number(document.getElementById("slider_vertical_11").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_12').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/12';
  var send_slider_v = Number(document.getElementById("slider_vertical_12").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('toggle_1').addEventListener('click', () => {
   var str_road ="";  ///retrieving the value of the route/road input field
  str_road = str_road +'/toggle'; //add /toggle to route
  str_road = str_road.trim()+'/1'; //add toggle number to route
  var send_checkbox = Number(document.getElementById("toggle_1").checked);//retrieving the value of the toggle/checkbox of the web page
  var message = new OSC.Message(str_road,send_checkbox); //message creation before sending
  osc.send(message);
 });
 document.getElementById('toggle_2').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/2';
  var send_checkbox = Number(document.getElementById("toggle_2").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_3').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/3';
  var send_checkbox = Number(document.getElementById("toggle_3").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_4').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/4';
  var send_checkbox = Number(document.getElementById("toggle_4").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_5').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/5';
  var send_checkbox = Number(document.getElementById("toggle_5").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_6').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/6';
  var send_checkbox = Number(document.getElementById("toggle_6").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_7').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/7';
  var send_checkbox = Number(document.getElementById("toggle_7").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_8').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/8';
  var send_checkbox = Number(document.getElementById("toggle_8").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_9').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/9';
  var send_checkbox = Number(document.getElementById("toggle_9").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_10').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/10';
  var send_checkbox = Number(document.getElementById("toggle_10").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_11').addEventListener('click', () => {
   var str_road ="";  
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/11';
  var send_checkbox = Number(document.getElementById("toggle_11").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_12').addEventListener('click', () => {
   var str_road =""; 
  var send_checkbox = Number(document.getElementById("toggle_12").checked);
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/12';
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('bang_1').addEventListener('click', () => { 
   var str_road ="";  //retrieving the value of the route/road input field
  str_road = str_road +'/bang'; //add /bang to route
  str_road = str_road.trim()+'/1'; //add bang number to route
  var bang = Number(document.getElementById("bang_1").value); //retrieving the value of the bouton of the web page
  var message = new OSC.Message(str_road,bang); //message creation before sending
  osc.send(message);
});
document.getElementById('bang_2').addEventListener('click', () => {  
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/2';  
  var bang = Number(document.getElementById("bang_2").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_3').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/3';
  var bang = Number(document.getElementById("bang_3").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_4').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/4';
  var bang = Number(document.getElementById("bang_4").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_5').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/5';
  var bang = Number(document.getElementById("bang_5").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_6').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/6';
  var bang = Number(document.getElementById("bang_6").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_7').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/7';
  var bang = Number(document.getElementById("bang_7").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_8').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/8';
  var bang = Number(document.getElementById("bang_8").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_9').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/9';
  var bang = Number(document.getElementById("bang_9").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_10').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/10';
  var bang = Number(document.getElementById("bang_10").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_11').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/11';
  var bang = Number(document.getElementById("bang_11").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_12').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/12'; 
  var bang = Number(document.getElementById("bang_12").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});

sudo nano test1.html

- le contenu du fichier

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<link charset="UTF8" href=".\index.css" rel="stylesheet" type="text/css" />
		<title>page test1 </title>
	</head>
  <body>
    <table>
    <td>
      <label for="str"><p>texte/route :</p></label>
    </td>
    <td>
      <input type="text" id="str" name="str" value="/" 
       minlength="0" maxlength="100">
    </td>
    </table>
    <p><br/></p>
  
    <table border="0">
      <tr>
        <p>Message</p>
      </tr>
    <tr>
      <td>
        <label for="n1"><p>nombre n°1 :</p></p></label>
      </td>
      <td>
        <input type="number" id="n1" name="n1" 
        minlength="0" maxlength="100">
      </td>
    </tr>
    <tr>
      <td>
        <label for="n2"><p>nombre n°2 :</p></label>
      </td>
      <td>
        <input type="number" id="n2" name="n2" 
        minlength="0" maxlength="100">
      </td>
    </tr>
    <tr>
      <td>
        <label for="n3"><p>nombre n°3 :</p></label>
      </td>
      <td>
        <input type="number" id="n3" name="n3" 
        minlength="0" maxlength="100">
      </td>
    </tr>
    <tr>
      <td>
        <button id="send">Send Message</button>
      </td>
    </tr>
    </table>
   <p><br/></p>
   <table border="0">
    <tr>
      <td>
        <button id="send_bang">Send /bang</button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="range" id="slider_h" min="0" max="127" value="0" step="1">
      </td>
      <td>
        <div class="slider-wrapper">
          <input type="range" id="slider_v" min="0" max="127" value="0" step="1">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input type="range" id="selector_h"min="0" max="7" value="0" step="1" list="steplist">
        <datalist id="steplist">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        </datalist>
      </td>
      <td>
        <div class="slider-wrapper">
        <input type="range" id="selector_v"min="0" max="7" value="0" step="1" list="steplist">
        <datalist id="steplist">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        </datalist>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input class="increase" type="checkbox" id="interupteur" name="interupteur" value="1">
      </td>
    </tr>
  </table>

</body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/adzialocha/osc-js/lib/osc.js"></script> <!--ou <script type="text/javascript" src="node_modules/osc-js/lib/osc.min.js"></script>--> 
    <script type="text/javascript" src='./test1.js'></script>
</html>

sudo nano test1.js

- le contenu du fichier, des valeurs son à changer en fonction du serveur

const ws_host = "ip_publique_serveur";
const ws_port = port_ecouter_par_le_serveur;

 var osc = new OSC(
  {plugin: new OSC.WebsocketClientPlugin({host: ws_host, port: ws_port})}
  );
 osc.open(); // connect by default to ws://localhost:8080

 document.getElementById('send').addEventListener('click', () => {
  var str = document.getElementById("str").value;
  var n1 = Number(document.getElementById("n1").value);
  var n2 = Number(document.getElementById("n2").value);
  var n3 = Number(document.getElementById("n3").value);
  var message = new OSC.Message(str,n1,n2,n3);
  osc.send(message);
 });
 
 document.getElementById('send_bang').addEventListener('click', () => {
   var message = new OSC.Message('/bang');
   osc.send(message);
   
 });

 document.getElementById('slider_h').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_slider_h = Number(document.getElementById("slider_h").value);
  var message = new OSC.Message(str,send_slider_h);
  osc.send(message);
   
 });

 document.getElementById('slider_v').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_slider_v = Number(document.getElementById("slider_v").value);
  var message = new OSC.Message(str,send_slider_v);
  osc.send(message);
   
 });
 document.getElementById('selector_h').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_selector_h = Number(document.getElementById("selector_h").value);
  var message = new OSC.Message(str,send_selector_h);
  osc.send(message);
   
 });
 document.getElementById('selector_v').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_selector_v = Number(document.getElementById("selector_v").value);
  var message = new OSC.Message(str,send_selector_v);
  osc.send(message);
   
 });
 
 document.getElementById('interupteur').addEventListener('click', () => {
  var str = document.getElementById("str").value;
  var send_checkbox = Number(document.getElementById("interupteur").checked);
  var message = new OSC.Message(str,send_checkbox);
  osc.send(message);
   
 });

Installation processing sous windows et des librairies nécessaire

source du code processing https://github.com/jottavi/Le-murmure-des-arbres

Tout d'abord téléchargez la dernière version de Processing sur https://processing.org/download

- allez dans le dossier téléchargement puis clique droit extraire ici

- puis cliquer sur le dossier et exécuter processing.exe

Ouvrez le programme. En haut à droite on peut voir un onglet écrit Java. Cliquez dessus et sélectionnez ajouter un mode. Une deuxième fenêtre s'affiche, installer « Android mode » : vous pouvez maintenant alterner entre les modes « Java » et « Android ».

Sur votre téléphone Android

vous devez effectuez le « debugging usb ». Attention, depuis la version 4.2 d’Android, le menu Options de développement n’apparaît plus par défaut dans les options de paramétrage, pour cela :

Ouvrez les paramètres

Système

« About phone »

Appuyez 7 fois sur « Build number » : vous êtes maintenant développeur

Revenez à la page précédente et sélectionnez « Développer options »

Activez « Usb debugging »

Ensuite branchez votre appareil en USB sur l'ordinateur. Si le fichier SDK est correctement installé, vous devriez le voir apparaître dans Processing, dans l'onglet « Android » puis « Devices ». Attendre une demande d’autorisation sur votre téléphone pour le mode debugging.

Toujours dans processing, allez sur l'onglet sketch et sélectionnez « manage librairies ». Une nouvelle fenêtre s'ouvre, dans celle-ci cliquez sur sur le champ de saisie, c'est ici que vous allez ajouter les éléments nécessaire à faire fonctionner le code :

- OSCP5 : librairie permettant d'envoyer et recevoir des informations entre plusieurs logiciels/ordinateurs

- controlP5 : permet la création de fader, bouton, potard ,…

Entrez le code suivant dans processing :

import android.os.StrictMode;
import oscP5.*;
import netP5.*;
import controlP5.*; //librairies nécessaire à notre programme
ControlP5 controlP5;
OscP5 oscP5;
NetAddress myRemoteLocation;

boolean overButton = false;
int y_mixing_1 = 140;
int y_Pitch_1 = y_mixing_1 + 500 + 60;
int y_Sound_1 = y_Pitch_1 + 150 + 60;

int y_mixing_2 = y_Sound_1 + 150 + 60;
int y_Pitch_2 = y_mixing_2 + 500 + 60;
int y_Sound_2 = y_Pitch_2 + 150 + 60;

int colonne_1 = 20 ;
int colonne_2 = 190 ; 
int colonne_3 = 360 ; 
int colonne_4 = 530 ; 
int colonne_5 = 700 ; 
int colonne_6 = 870 ; 
int colonne_7 = colonne_6 + 150 ;

color couleur_active = color(138, 176, 92);
color couleur_premier_plan = color(39,109,35);

color couleur_de_fond_slider = color(189, 255, 0);

color couleur_active_pitch = color(76, 187, 23);
color couleur_premier_plan_pitch = color(39,109,35);
color couleur_de_fond_pitch = color(128,128,128);

color couleur_active_sound = color(151, 186, 112);
boolean slider_n = false;

//void setup est la partie où nous initialisons notre code avant de le faire tourner
void setup() {
  fullScreen();
  orientation(PORTRAIT); //plein écran en mode portrait
  smooth();
  frameRate(60); //vitesse à laquelle l 'écran s'actualise (ici 60 images / seconde)
  //création d'une nouvelle instance oscP5, c'est ce qui va nous permettre de communiquer avec pd
  oscP5 = new OscP5(this, 10000 ); //le port 12000 est celui sur lequel le routeur écoute
  myRemoteLocation = new NetAddress("80.12.93.238", 10000); //adresse ip et port d envoi
  //myRemoteLocation = new NetAddress("192.168.10.139", 10000); //adresse ip et port d envoi
  
  controlP5 = new ControlP5(this); //création d'un nouveau controller
 
  controlP5.addSlider("slider1",0,127).setPosition(colonne_1, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);
  controlP5.addSlider("slider2",0,127).setPosition(colonne_2, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);  
  controlP5.addSlider("slider3",0,127).setPosition(colonne_3, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider4",0,127).setPosition(colonne_4, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider5",0,127).setPosition(colonne_5, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider6",0,127).setPosition(colonne_6, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);

  controlP5.addToggle("toggle1",false).setPosition(colonne_1, y_Pitch_1).setSize(150,150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle2",false).setPosition(colonne_2, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle3",false).setPosition(colonne_3, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle4",false).setPosition(colonne_4, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle5",false).setPosition(colonne_5, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle6",false).setPosition(colonne_6, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
     
  controlP5.addBang("bang1").setPosition(colonne_1, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang2").setPosition(colonne_2, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang3").setPosition(colonne_3, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang4").setPosition(colonne_4, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang5").setPosition(colonne_5, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang6").setPosition(colonne_6, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
 
  controlP5.addSlider("slider7",0,127).setPosition(colonne_1, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider8",0,127).setPosition(colonne_2, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);  
  controlP5.addSlider("slider9",0,127).setPosition(colonne_3, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider10",0,127).setPosition(colonne_4, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider11",0,127).setPosition(colonne_5, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider12",0,127).setPosition(colonne_6, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);
  
  controlP5.addToggle("toggle7",false).setPosition(colonne_1, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle8",false).setPosition(colonne_2, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle9",false).setPosition(colonne_3, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle10",false).setPosition(colonne_4, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle11",false).setPosition(colonne_5, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle12",false).setPosition(colonne_6, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  
  controlP5.addBang("bang7").setPosition(colonne_1, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang8").setPosition(colonne_2, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang9").setPosition(colonne_3, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang10").setPosition(colonne_4, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang11").setPosition(colonne_5, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang12").setPosition(colonne_6, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);

}

void controlEvent(ControlEvent theEvent) {
  StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
  StrictMode.setThreadPolicy(policy);
   if(theEvent.isController()) { 
     print("control event from : "+theEvent.getController().getName());
     println(", value : "+theEvent.getController().getValue());
   
   if(theEvent.getController().getName()=="slider1") {
     if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/1"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
       }
   }
    if(theEvent.getController().getName()=="slider2") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/2"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider3") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/3"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider4") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/4"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider5") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/5"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider6") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/6"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
    
   }
    if(theEvent.getController().getName()=="slider7") {
      if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/7"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider8") {
    if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/8"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
    }
   }
    if(theEvent.getController().getName()=="slider9") {
    if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/9"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
    }
   }
    if(theEvent.getController().getName()=="slider10") {
      if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/10"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider11") {
      if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/11"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider12") {
      if(slider_n){
      OscMessage myMessage = new OscMessage("/slider/12"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
      slider_n = true;
   }
   if(theEvent.getController().getName()=="toggle1") {
    OscMessage myMessage = new OscMessage("/toggle/1"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
   if(theEvent.getController().getName()=="toggle2") {
    OscMessage myMessage = new OscMessage("/toggle/2"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle3") {
    OscMessage myMessage = new OscMessage("/toggle/3"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle4") {
    OscMessage myMessage = new OscMessage("/toggle/4"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle5") {
    OscMessage myMessage = new OscMessage("/toggle/5"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle6") {
    OscMessage myMessage = new OscMessage("/toggle/6"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle7") {
    OscMessage myMessage = new OscMessage("/toggle/7"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle8") {
    OscMessage myMessage = new OscMessage("/toggle/8"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle9") {
    OscMessage myMessage = new OscMessage("/toggle/9"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle10") {
    OscMessage myMessage = new OscMessage("/toggle/10"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle11") {
    OscMessage myMessage = new OscMessage("/toggle/11"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle12") {
    OscMessage myMessage = new OscMessage("/toggle/12"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang1") {
    OscMessage myMessage = new OscMessage("/bang/1"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang2") {
    OscMessage myMessage = new OscMessage("/bang/2"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle3") {
    OscMessage myMessage = new OscMessage("/bang/3"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle4") {
    OscMessage myMessage = new OscMessage("/bang/4"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang5") {
    OscMessage myMessage = new OscMessage("/bang/5"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang6") {
    OscMessage myMessage = new OscMessage("/bang/6"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang7") {
    OscMessage myMessage = new OscMessage("/bang/7"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang8") {
    OscMessage myMessage = new OscMessage("/bang/8"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang9") {
    OscMessage myMessage = new OscMessage("/bang/9"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang10") {
    OscMessage myMessage = new OscMessage("/bang/10"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang11") {
    OscMessage myMessage = new OscMessage("/bang/11"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang12") {
    OscMessage myMessage = new OscMessage("/bang/12"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
 }
}

void draw() {  
  background(34,73,18); // couleur de fond de votre écran
  text();
  if (overButton == true) {
    fill(255);
  } else {
    noFill();
  }
  rect(colonne_1, y_Sound_2 + 150 + 30 + 50, 450, 120);
  line(colonne_2, y_Sound_2 + 150 + 30 + 50 + 100 , colonne_3, y_Sound_2 + 150 + 30 + 50 + 20);
  line(colonne_3 - 50,  y_Sound_2 + 150 + 30 + 50 + 20, colonne_3, y_Sound_2 + 150 + 30 + 50 + 20);
  line(colonne_3, y_Sound_2 + 150 + 30 + 50 + 20, colonne_3, y_Sound_2 + 150 + 30 + 50 + 20 + 50);
}
void mousePressed() {
  if (overButton) { 
    link("http://apo33.org:8000/arbres.ogg");
  }
}

void mouseMoved() { 
  checkButtons(); 
}
  
void mouseDragged() {
  checkButtons(); 
}

void checkButtons() {
  if (mouseX > colonne_1 && mouseX < colonne_1 + 450 && mouseY > y_Sound_2 + 150 + 30 + 50 && mouseY < y_Sound_2 + 150 + 30 + 50 + 120) {
    overButton = true;   
  } else {
    overButton = false;
  }
}
void text(){
  
  textSize(75); 
  text("Le murmure des arbres", 20,60); 
  textSize(80);
  text("APO33", 800, 80);  
  textSize(40); 
  text("version 0.1-2", 560, 95);  
  
  textSize(40); 
  text("Mixing 1", colonne_1,  y_mixing_1 - 20);
  line(colonne_2, y_mixing_1 - 30 , colonne_7, y_mixing_1 - 30);
  text("Pitch 1", 20,  y_Pitch_1 - 20 );  
  line(colonne_2, y_Pitch_1 - 30 , colonne_7, y_Pitch_1 - 30);
  text("Sound 1", 20,  y_Sound_1 - 20 );  
  line(colonne_2, y_Sound_1 - 30 , colonne_7, y_Sound_1 - 30);
  text("Mixing 2", 20,  y_mixing_2 - 20);
  line(colonne_2, y_mixing_2 - 30 , colonne_7, y_mixing_2 - 30);
  text("Pitch 2", 20,  y_Pitch_2 - 20 );  
  line(colonne_2, y_Pitch_2 - 30 , colonne_7, y_Pitch_2 - 30);
  text("Sound 2", 20,  y_Sound_2 - 20 );  
  line(colonne_2, y_Sound_2 - 30 , colonne_7, y_Sound_2 - 30);
  line(colonne_1, y_Sound_2 + 150 + 20 , colonne_7, y_Sound_2 + 150 + 20);

  textSize(35); 
  text("Listen Live here:", colonne_1,  y_Sound_2 + 150 + 60 );
  
  textSize(32); 
  text("Developed by Julien Ottavi, programmation by Max Siliphayvanh, visual by Jenny Pickett - artistic concept by OttaviPickett and Apo33" ,
  colonne_4  ,  y_Sound_2  + 150 + 30 , 570 , 180 );
  //rect(  colonne_4  ,  y_Sound_2  + 150 + 30 , 570 , 180 );
  line(colonne_4 - 20, y_Sound_2 + 150 + 30 , colonne_4 - 20, y_Sound_2 + 150 + 180 + 30);
  text("info: apo33.org", colonne_5,  y_Sound_2 + 150 + 180 + 30);

}

Pour les premiers tests, il est préférable que le téléphone soit connecté au même wifi que l'ordinateur.

Dans Processing, allez dans “sketche permission” se trouvant dans l’onglet “Android”, il est important d’ajouter l’option ACCESS_NETWORK_STATE et internet .

Après avoir copié le code dans Processing, vous devez appuyer sur le bouton Play en haut à gauche.

Sur le téléphone, l'application devrait maintenant apparaître.

Pour trouver le fichier .APK il faut aller voir dans la console de Processing où il est écrit qu'un nouveau dossier à été créé ==⇒ Build folder : emplacement du dossier Ensuite allez dans “App”, puis “Build”, puis “Outputs”, puis “APK”, puis “Debug”. Le fichier .APK servira ensuite à télécharger l’appli sur un autre appareil Android. Il faut bien penser à donner l’autorisation pour le téléchargement car le téléphone se méfie si l’appli ne provient pas du store android.

Table of Contents

Le murmure des arbres

projet

installer un VNC sur ubuntu 20.04

installation de TigerVNC pour le contrôle à distance

Pour le démarrage automatique de TigerVNC

Serveur web et Apache2 sur ubuntu 20.04

installation de apache2

pour vérifier que apache2 écouter bien le port souhaiter

Webapp, OSC et websockets

installation de nodejs sous ubuntu

installation de osc-js

création du bridge.js

Pour le démarrage automatique du node

création de la page web

Installation processing sous windows et des librairies nécessaire

Sur votre téléphone Android