APOTEK

User Tools

Site Tools

Trace:
nomades:giaso_interface_web
no way to compare when less than two revisions

Differences

This shows you the differences between two versions of the page.


—nomades:giaso_interface_web [2023/06/27 10:15] (current) – created - external edit 127.0.0.1
Line 1: Line 1:
 +====== Giaso - IDLE ======
 +
 +===== projet =====
 +
 +
 +
 +__les différentes étapes du projet :__
 +
 +
 +====== installer un VNC ======
 +
 +===== 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 :
 +
 +<code>sudo apt update</code>
 +
 +<code>sudo apt install xfce4 xfce4-goodies</code>
 +
 +- Sélectionnez n'importe quel gestionnaire d'affichage et appuyez sur Entrée
 +
 +<code>sudo apt install tigervnc-standalone-server</code>
 +
 +<code>vncserver</code>
 +
 + - 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
 +
 + 
 +<code>vncserver -kill :1</code>
 +
 +<code> nano ~/.vnc/xstartup</code>
 +
 + - contenu du fichier 
 +
 +<code>
 + #!/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 &
 +</code>
 +<code> chmod +x ~/.vnc/xstartup</code> 
 + 
 +<code> vncserver -localhost no :1</code> 
 + 
 + - à 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:
 +
 +<code>vncserver -kill :1</code>
 +
 +<code>cd /etc/systemd/system</code>
 +
 +<code> sudo nano tigervnc@:1.service</code>
 +
 + - contenu du fichier, dans le fichier crée définir l'**__user__** et le **__WorkingDirectory__**  en fonction de votre machine
 +
 +<code>
 +[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
 +</code>
 +
 +<code>sudo systemctl enable tigervnc@\:1.service</code>
 +
 +<code>sudo systemctl daemon-reload</code>
 +
 +cette ligne corrige le problème ''unable to contact settings server'': 
 +
 +<code>sudo apt install dbus-x11</code> 
 +
 +<code>sudo systemctl start tigervnc@:1</code>
 +
 +
 +====== puredata sur ubuntu server 23.04 ======
 +
 +source https://puredata.info/
 +
 +===== installation de librairies à l'aide de deken dans puredata =====
 +
 +- dans puredata 
 +
 +- cliquer sur "help" puis "find external"
 +
 +- ensuite dans le champ de saisie tapper iemlib et clique en dessous sur iemlib puis install en bas à droite 
 +
 +- ensuite faire de même pour pdogg et pour oscx
 +
 +{{:nomades:deken.gif|}}
 +
 +===== importation de la librairies dans le patch puredata =====
 +
 +- pour ce projet nous importerons iemlib et pdogg
 +
 +- crée un objet nommer 
 +<code>declare -lib iemlib</code>
 +
 +- crée un objet nommer 
 +<code>declare -lib pdogg</code>
 +
 +===== si l'importation des librairies dans puredata de fonctionne pas =====
 +
 +- dans puredata 
 +
 +- cliquer sur "help" puis "find external"
 +
 +- puis cliquer sur "edit" puis "preferences"
 +
 +- dans la première ligne doit se trouver le chemin d'installation noté le
 +
 +- il doit ressembler à celà ''/home/utilisateur/.local/lib/pd/extra/''
 +
 +- dans puredata 
 +
 +- cliquer sur "file" puis "preferences"
 +
 +- puis cliquer sur "path" puis "new"
 +
 +- puis entrez le chemin précédament vu en y rajoutant le nom de la librairies iemlib, pdogg, oscx
 +
 +- les chemins à rajouter ressemblerons respectivement à 
 +
 +<code>/home/utilisateur/.local/lib/pd/extra/iemlib</code>
 +
 +<code>/home/utilisateur/.local/lib/pd/extra/pdogg</code>
 +
 +<code>/home/utilisateur/.local/lib/pd/extra/oscx</code>
 +
 +======  Webapp, OSC et websockets ======
 + 
 +===== installation de nodejs sous ubuntu =====
 +
 +<code>sudo apt-get update</code>
 +<code>sudo apt-get install nodejs npm</code>
 +
 +
 +===== 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
 +
 +<code>npm i osc-js</code>
 +
 +===== création du bridge.js =====
 +
 +lien de la doc sur lequel le code est basé https://github.com/adzialocha/osc-js/wiki/PureData-&-MaxMSP
 +
 +<code>nano bridge.js</code>
 +
 +contenu du fichier, à noté qu'il faut remplacer certaine valeur en fonction de la configuration souhaité 
 +
 +<code>
 +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
 +</code>
 +
 +===== Pour le démarrage automatique du node =====
 +
 +ouvrir un terminal et entrer : 
 +
 +<code>sudo apt install npm</code>
 +
 +<code>sudo npm install -g pm2 </code>
 +
 +- changer le chemin en fonction de où ce trouve le ficher bridge.js
 +
 +<code>pm2 start le_chemin_du_fichier </code>
 +
 +<code>pm2 save</code> 
 +
 +<code>pm2 list</code>
 +
 +<code>pm2 startup</code> 
 +
 + - puis faire la entrer la commande retourné
 +
 +====  - une fois tout setup voici les commandes utile en cas de crash : ====
 +
 +
 +<code>pm2 list</code>
 +
 +<code>pm2 restart bridge.js</code>
 + 
 + 
 +====== 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
 + 
 +<code>cd le_chemin_ou_cree_les_pages_web</code>
 +
 +<code>sudo nano index.css</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +.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;
 +}
 +
 +</code>
 +
 +<code>sudo nano index.html</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +<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>
 +</code>
 +
 +<code>sudo nano 12_slider.html</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +<html>
 + <head>
 +    <!--<meta http-equiv="refresh" content="20">-->
 + <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>-->
 + <link charset="UTF8" href=".\index.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>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_0" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_1" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_2" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_3" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_4" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_5" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_6" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_7" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_8" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_9" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_10" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_vertical_11" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +    </tr>
 +   
 +    <tr>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_0" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_1" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_2" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_3" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_4" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_5" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_6" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_7" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_8" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_9" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_10" name="interupteur" value="1">
 +      </td>
 +      <td>
 +        <input class="increase" type="checkbox" id="toggle_11" name="interupteur" value="1">
 +      </td>
 +    </tr>
 +
 +    <tr>
 +      <td>
 +        <button class="bang" id="bang_0"></button>
 +      </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>
 +    </tr>
 +  </table>
 + <p></br></p>
 +
 +  <table border = 0>
 + <tr>
 + <td>
 + <p> PD instruments trigger:</p>
 + </td>
 + <td>
 + <input class="increase" type="checkbox" id="generative_toggle" name="interupteur" value="1">
 + </td>
 + </tr>
 +  </table>
 + <p></br></p>
 +    <audio controls="controls" preload="none"><source src="http://ice.piksel.org/giaso.ogg" type="application/ogg" /></audio> <!--ogg player-->
 +  </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>
 +</code>
 +<code>sudo nano 12_slider.js</code>
 +
 +- le contenu du fichier, des valeurs son à changer en fonction du serveur
 +
 +<code>
 +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})} //client websocket configuration
 +  );
 + osc.open(); // connect to websocket server
 +
 + document.getElementById('send').addEventListener('click', () => {
 +  var str_road = document.getElementById("str_road").value; //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_0').addEventListener('input', () => {
 +  var str_road = document.getElementById("str_road").value; //retrieving the value of the route/road input field
 +  str_road = str_road +'/slider'; //add /slider to route
 +  str_road = str_road.trim()+'/0'; //add silder number to route
 +  var send_slider_v = Number(document.getElementById("slider_vertical_0").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_1').addEventListener('input', () => {
 +  var str_road = document.getElementById("str_road").value;
 +  str_road = str_road +'/slider';
 +  str_road = str_road.trim()+'/1';
 +  var send_slider_v = Number(document.getElementById("slider_vertical_1").value);
 +  var message = new OSC.Message(str_road,send_slider_v);
 +  osc.send(message);
 + }); 
 + document.getElementById('slider_vertical_2').addEventListener('input', () => {
 +  var str_road = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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('toggle_0').addEventListener('click', () => {
 +  var str_road = document.getElementById("str_road").value;
 +  var send_checkbox = Number(document.getElementById("toggle_0").checked);
 +  str_road = str_road +'/toggle';
 +  str_road = str_road.trim()+'/0';
 +  var message = new OSC.Message(str_road,send_checkbox);
 +  osc.send(message);
 + });
 + document.getElementById('toggle_1').addEventListener('click', () => {
 +  var str_road = document.getElementById("str_road").value; ///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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value; 
 +  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('bang_0').addEventListener('click', () => { 
 +  var str_road = document.getElementById("str_road").value; //retrieving the value of the route/road input field
 +  str_road = str_road +'/bang'; //add /bang to route
 +  str_road = str_road.trim()+'/0'; //add bang number to route
 +  var bang = Number(document.getElementById("bang_0").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_1').addEventListener('click', () => {
 +  var str_road = document.getElementById("str_road").value;
 +  str_road = str_road +'/bang';
 +  str_road = str_road.trim()+'/1'; 
 +  var bang = Number(document.getElementById("bang_1").value);
 +  var message = new OSC.Message(str_road,bang);
 +  osc.send(message);
 +});
 +document.getElementById('bang_2').addEventListener('click', () => {  
 +  var str_road = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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 = document.getElementById("str_road").value;
 +  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('generative_toggle').addEventListener('click', () => {
 +  var str_road = document.getElementById("str_road").value; //retrieving the value of the route/road input field
 +  str_road = str_road +'/generative_toggle';//add /generative_toggle to route
 +  str_road = str_road.trim(); //removal of spaces from the route
 +  var send_checkbox = Number(document.getElementById("generative_toggle").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);
 +});
 +</code>
 +
 +<code>sudo nano test1.html</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +<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>
 +</code>
 +
 +<code>sudo nano test1.js</code>
 +
 +- le contenu du fichier, des valeurs son à changer en fonction du serveur
 +
 +<code>
 +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);
 +   
 + });
 +</code>
  
nomades/giaso_interface_web.txt · Last modified: 2023/06/27 10:15 by 127.0.0.1

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC0 1.0 Universal
CC0 1.0 Universal Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki