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:// | ||
+ | |||
+ | ouvrir un terminal et entrer les commandes suivantes : | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - Sélectionnez n' | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - 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/ | ||
+ | |||
+ | - entrer N, c'est un mot de passe en lecture seul | ||
+ | |||
+ | - cette commande '' | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - contenu du fichier | ||
+ | |||
+ | < | ||
+ | # | ||
+ | |||
+ | # Start up the standard system desktop | ||
+ | unset SESSION_MANAGER | ||
+ | unset DBUS_SESSION_BUS_ADDRESS | ||
+ | |||
+ | / | ||
+ | |||
+ | [ -x / | ||
+ | [ -r $HOME/ | ||
+ | x-window-manager & | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - à 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 '' | ||
+ | |||
+ | =====Pour le démarrage automatique de TigerVNC===== | ||
+ | |||
+ | Dans un terminal entrer les commandes suivantes: | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - contenu du fichier, dans le fichier crée définir l' | ||
+ | |||
+ | < | ||
+ | [Unit] | ||
+ | Description=Remote desktop service (VNC) | ||
+ | After=syslog.target network.target | ||
+ | |||
+ | [Service] | ||
+ | Type=forking | ||
+ | User=l' | ||
+ | WorkingDirectory=/ | ||
+ | ExecStartPre=-/ | ||
+ | ExecStart=/ | ||
+ | ExecStop=/ | ||
+ | |||
+ | [Install] | ||
+ | WantedBy=multi-user.target | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | cette ligne corrige le problème '' | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | |||
+ | ====== puredata sur ubuntu server 23.04 ====== | ||
+ | |||
+ | source https:// | ||
+ | |||
+ | ===== installation de librairies à l'aide de deken dans puredata ===== | ||
+ | |||
+ | - dans puredata | ||
+ | |||
+ | - cliquer sur " | ||
+ | |||
+ | - 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 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== importation de la librairies dans le patch puredata ===== | ||
+ | |||
+ | - pour ce projet nous importerons iemlib et pdogg | ||
+ | |||
+ | - crée un objet nommer | ||
+ | < | ||
+ | |||
+ | - crée un objet nommer | ||
+ | < | ||
+ | |||
+ | ===== si l' | ||
+ | |||
+ | - dans puredata | ||
+ | |||
+ | - cliquer sur " | ||
+ | |||
+ | - puis cliquer sur " | ||
+ | |||
+ | - dans la première ligne doit se trouver le chemin d' | ||
+ | |||
+ | - il doit ressembler à celà ''/ | ||
+ | |||
+ | - dans puredata | ||
+ | |||
+ | - cliquer sur " | ||
+ | |||
+ | - puis cliquer sur " | ||
+ | |||
+ | - puis entrez le chemin précédament vu en y rajoutant le nom de la librairies iemlib, pdogg, oscx | ||
+ | |||
+ | - les chemins à rajouter ressemblerons respectivement à | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | ====== | ||
+ | |||
+ | ===== installation de nodejs sous ubuntu ===== | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | |||
+ | ===== installation de osc-js ===== | ||
+ | lien https:// | ||
+ | |||
+ | faire cette commande dans le même dossier que la où voulez crée le bridge.js/ | ||
+ | |||
+ | < | ||
+ | |||
+ | ===== création du bridge.js ===== | ||
+ | |||
+ | lien de la doc sur lequel le code est basé https:// | ||
+ | |||
+ | < | ||
+ | |||
+ | contenu du fichier, à noté qu'il faut remplacer certaine valeur en fonction de la configuration souhaité | ||
+ | |||
+ | < | ||
+ | const ws_host = " | ||
+ | const ws_port = port_ecouter_par_le_serveur; | ||
+ | |||
+ | const udp_host = " | ||
+ | const udp_port = port_ecouter_par_puredata; | ||
+ | |||
+ | const OSC = require(' | ||
+ | |||
+ | const config = { udpClient: {host :udp_host, port: udp_port}, //bridge setup | ||
+ | | ||
+ | } | ||
+ | const osc = new OSC( | ||
+ | { plugin: new OSC.BridgePlugin(config)}, | ||
+ | ); | ||
+ | osc.open() //bridge start | ||
+ | </ | ||
+ | |||
+ | ===== Pour le démarrage automatique du node ===== | ||
+ | |||
+ | ouvrir un terminal et entrer : | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - changer le chemin en fonction de où ce trouve le ficher bridge.js | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - puis faire la entrer la commande retourné | ||
+ | |||
+ | ==== - une fois tout setup voici les commandes utile en cas de crash : ==== | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | |||
+ | ====== création de la page web ====== | ||
+ | |||
+ | |||
+ | refaire la commande '' | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | - le contenu du fichier | ||
+ | |||
+ | < | ||
+ | .slider-wrapper input { | ||
+ | width: 20em; | ||
+ | height: 3em; | ||
+ | margin: 0; | ||
+ | transform-origin: | ||
+ | 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: | ||
+ | background-color: | ||
+ | } | ||
+ | bouton{ | ||
+ | color:# | ||
+ | } | ||
+ | body{ | ||
+ | background-color:# | ||
+ | } | ||
+ | p{ | ||
+ | color:# | ||
+ | } | ||
+ | h1{ | ||
+ | color:# | ||
+ | font-size: | ||
+ | } | ||
+ | |||
+ | h2{ | ||
+ | color:# | ||
+ | font-size: | ||
+ | } | ||
+ | |||
+ | h3{ | ||
+ | color:# | ||
+ | font-size: | ||
+ | } | ||
+ | li{ | ||
+ | color:# | ||
+ | } | ||
+ | a{ | ||
+ | text-decoration: | ||
+ | color:# | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | - le contenu du fichier | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | <meta http-equiv=" | ||
+ | |||
+ | <link charset=" | ||
+ | |||
+ | < | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | - le contenu du fichier | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <link charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <td> | ||
+ | <label for=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | | ||
+ | </td> | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | <table border=" | ||
+ | <td> | ||
+ | <label for=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | | ||
+ | </td> | ||
+ | <tr> | ||
+ | <td> | ||
+ | |||
+ | </td> | ||
+ | <td> | ||
+ | <button id=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <button class=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <table border = 0> | ||
+ | <tr> | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <audio controls=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | - le contenu du fichier, des valeurs son à changer en fonction du serveur | ||
+ | |||
+ | < | ||
+ | const ws_host = " | ||
+ | const ws_port = port_ecouter_par_le_serveur;// | ||
+ | |||
+ | //const ws_port = 8080; | ||
+ | var osc = new OSC( | ||
+ | {plugin: new OSC.WebsocketClientPlugin({host: | ||
+ | ); | ||
+ | | ||
+ | |||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | var msg = document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | |||
+ | | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim()+'/ | ||
+ | var bang = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | var str_road = document.getElementById(" | ||
+ | str_road = str_road +'/ | ||
+ | str_road = str_road.trim(); | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str_road, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | - le contenu du fichier | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | <link charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <td> | ||
+ | <label for=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | | ||
+ | </td> | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | <table border=" | ||
+ | <tr> | ||
+ | < | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <label for=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | minlength=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <label for=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | minlength=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <label for=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | minlength=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <button id=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <tr> | ||
+ | <td> | ||
+ | <button id=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <input type=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <input class=" | ||
+ | </td> | ||
+ | </tr> | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | - le contenu du fichier, des valeurs son à changer en fonction du serveur | ||
+ | |||
+ | < | ||
+ | const ws_host = " | ||
+ | const ws_port = port_ecouter_par_le_serveur; | ||
+ | |||
+ | var osc = new OSC( | ||
+ | {plugin: new OSC.WebsocketClientPlugin({host: | ||
+ | ); | ||
+ | | ||
+ | |||
+ | | ||
+ | var str = document.getElementById(" | ||
+ | var n1 = Number(document.getElementById(" | ||
+ | var n2 = Number(document.getElementById(" | ||
+ | var n3 = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str, | ||
+ | osc.send(message); | ||
+ | }); | ||
+ | |||
+ | | ||
+ | var message = new OSC.Message('/ | ||
+ | | ||
+ | |||
+ | }); | ||
+ | |||
+ | | ||
+ | var str = document.getElementById(" | ||
+ | var send_slider_h = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str, | ||
+ | osc.send(message); | ||
+ | |||
+ | }); | ||
+ | |||
+ | | ||
+ | var str = document.getElementById(" | ||
+ | var send_slider_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str, | ||
+ | osc.send(message); | ||
+ | |||
+ | }); | ||
+ | | ||
+ | var str = document.getElementById(" | ||
+ | var send_selector_h = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str, | ||
+ | osc.send(message); | ||
+ | |||
+ | }); | ||
+ | | ||
+ | var str = document.getElementById(" | ||
+ | var send_selector_v = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str, | ||
+ | osc.send(message); | ||
+ | |||
+ | }); | ||
+ | |||
+ | | ||
+ | var str = document.getElementById(" | ||
+ | var send_checkbox = Number(document.getElementById(" | ||
+ | var message = new OSC.Message(str, | ||
+ | osc.send(message); | ||
+ | |||
+ | }); | ||
+ | </ | ||