alvarobyrne / hydra-browserglue-johnny-five

hydra glued to arduino using browserglue

hydra-browserglue-johnny-five

hydra (web, repositorio) pegado a arduino usando browserglue y johnny-five; hydra controlado por arduino/ arduino controlando a hydra	hydra (web app, repo) glued to arduino with browserglue using johnny-five; hydra controlled by arduino/arduino controlling hydra

1 browserglue: ejecutable / executable - servidor / server

1.1

Aquí se usa browserglue un software que expone varias conecciones OSC al navegador usando websockets	Here browserglue is used, a software which "exposes multiple OSC connections to the browser through WebSockets"
Para empezar, bajá el servidor de browserglue que es un ejecutable disponible mac/win/linux en los releases de browser glue.	To begin with, download the browserglue server which is an executable available for win/mac/linux from their releases page at github,
Ejecutalo después de bajarlo, entonces se lanza el servidor que va a enrutar los mensajes de osc que generemos con johhny-five y los va a enviar vía websockets al navegador, a hydra	One then has launched a server which will route OSC messages generated with johnny-five and send them via websockets to the browser, to hydra
en windows bajar archivos ejecutables es dificil en cuanto que el sistema operativo lanza advertencias y trata de impedir que bajés este tipo de archivos: toca confirmar varias veces que querés bajar el archivo y ejecutarlo	in windows, downloading executable files is not as straightforward: the operating system will try to prevent you and warn you at multiple steps that downloading such file is not recommended

2 johnny-five

2.0 prerrequisitos / requirements

Tenés que tener instalados node ( y npm, que se instala cuando se instala node)	must have node installed (and npm which is installed with node)
Tenes que tener un arduino con el sketch de StandardFirmata cargado. Éste se encuentra en los ejemplos del software de arduino, como se muestra en la imagen	You must have an arduino with the standard firmata sketch uploaded. It is found in the examples sketches of the arduino software, as shown in the figure

2.1

descargá este repo o clonalo y, en la línea de comandos, en la carpeta en la que descargaste o clonaste el repo, ejecutá (en la línea de comandso):	download this repo or clone it and, in a terminal window, in the folder you downloaded or cloned it, run (in the terminal console):

npm install

2.3

En este repositorio se usa el ejemplo del sensor más sencillo: un potenciometro el ejemplo, el código	In this repo we use the example of the simplest sensor potentiometer example, potentiometer code.

En este punto debés conectar el arduino a tu computador/ordenador como habitualmente se hace a través de un puerto usb	At this point you must connect the arduino to your computer through a usb port
y, en el archivo index.js (de este repositorio), se le adiciona el envío de mensajes OSC	and, at the index.js file (in this repo), OSC message sending has been added
ejecutá el programa con el siguiente commando	run this file with the command line tool

node index.js

ahí ya podés mover la perilla del potenciometro y se están enviando mensajes OSC con los valores del voltaje en el potencimetro	now one can move the potentiometers knob and OSC messages are being sent with
a continuación se describe cómo recibir/escuchar esos mensajes en hydra	in what follows we explain how to listen/receive such messages in hydra
el servidor descrito en la sección 1.1 está enrutando esos mensajes OSC al navegador, ahora hay que ejecutar cierto código en el navegador que escuche esos mensajes y los use	the server described in section 1.1 is routing those messages to the browser, now some code should be ran in the browser in order to receive the messages and use them

3 hydra y browserglue client

3.0

En esta sección se presenta el código que tenés que ejecutar en hydra	In this section the code which must be executed at hydra is shown
Ejecutá estas lineas una por una, si ejecutás todo el sketch de una, no te va a funcionar (esto tal vez no es cierto pero mejor hacelo así , ja ja)	Run this lines one by one, it won't work if you run all the sketch at once(this might not be true, but better do so, ha ha)

3.1

Cargá browserglue en hydra ejecutando la siguiente línea de código,esto es, oprimí ctrl+enter con el cursor sobre la linea misma	Load browserglue into hydra running the following line of code, that is, press ctrl+enter with cursor caret on the line itself

await import("https://unpkg.com/browserglue")

3.2

Creá un cliente de browserglue	Create a browserglue client

window.bg = new browserglue.Client();

3.3

Las siguientes lineas de código crean un canal de comunicación usando websockects que se comunica con el ejecutable de la sección 1.1 de este documento	The next portion of code creates a browserglue channel that bridges with the executable refered at section 1.1 above
los valores de la variables address y senderPort deben coincidir con los valores de las mismas variables en el código del archivo index.js	the values of variables address and senderPort must be the same as the values of the variableswith the same name in the index.js file.

address = "/foo"
senderPort = 4000
channel = await bg.addChannel(address, senderPort);

3.4

código encargado de escuchar los mensajes enviados por el canal y de usar el valor en un boceto de hydra	code in charge of receiving the websocket messages and use the value received in hydra functions

pot=0
norm = 1/1024;
channel.on('message', async msg => {
  console.log('msg: ', msg.args[0]);
  pot = msg.args[0]*norm;
  
});


//finally, for example
osc(()=>1+pot*200).out()

3.5

captura de pantalla del código funcionando: hay más código en la captura que el código explicado en este documento, es código que puede ser de ayuda al desarrollar un boceto	screenshot of working code: there's more code on the screenshot than the explained in this doc, it is just code that might help while developing the a sketch

aunque puede que el boceto no se ejecute adecaudamente al hacerle click al siguiente link (porque hay que ejecutar ciertas líneas con un retraso entre sí) , ahí está el código en hydra web-app. Esto al parecer no es cierto, a veces funciona	Although the sketch might not run properly when clicking on the following link (since there must be some delay between the execution of some lines) the code is there. This might not be true, sometimes it works
el código completo del boceto de hydra también está en el archivo hydra-sketch.js de este repo	the whole hydra sketch code is also at file hydra-sketch.js in this repo

a gist would have been enough