Web App to interact with a USB-Connected Teensy

Status
Not open for further replies.

Davidelvig

Well-known member
What's the best practice for interacting with a browser app (say, HTML5), connecting to a Teensy's running instance?

I'd like to send and receive data between the browser app and the Teensy app for:
- viewing and changing the Teensy App's config
- harvest logging from the Teensy

I've not found an answer in my forum searches, though I don't know that I have the right search terms.

I've looked a bit into the Web MIDI API - which might work in Chrome (only?) for exchanging MIDI messages over USB MIDI.
I've found a Web MIDI sample app here which sees my Teensy MIDI device, and receives it messages.

Are there other standard ways that are commonly used for these purposes listed above?

Thanks!
 
Midi is the easiest and yes only chrome supports it, there are plugins to allow safari to use it but they are pretty buggy.

The best way is to use System exclusive messages because you can send and receive arrays, however the MIDI standard only allows for the “data” bytes to use 7-bits, 8-bit bytes are reserved for “status” bytes.

This is fine to transfer strings back and forth but if you need to pass a byte that is higher than 127 then you have to split bytes on each end before transmission and merge them when they are received.
 
Thanks! It look promising, though a bit of a work-around. I can work through the 7-8 bit translations on both ends, but a bit of a pain.

It does appear to be a "hole" in the browser-to-device armor. I've not investigated why Chrome allows it and others don't.

I see that Web MIDI API may be a subset of WebUSB - they talk about Arduino device connectivity here in developers.google.com

I was hoping someone would say: "Here, use this Teensy function, and this JavaScript snippet and you're good to go! Everyone does it this way!"
 
How about USB serial, NodeJS and SocketIO

Out of the Box there is Jonny 5, but you can just use a simple serial library between the Teensy and the node instance.
Data transfer using SocketIO is really simple.
 
Thanks, @macrosil!
It looks like this approach flashes Firmata to the Teensy, and the app logic would be written on the PC with JavaScript. Is that right?

I’m looking for a JavaScript (or other web app solution in th browser) to interact with my app’s logic on the Teensy. E.g exchanging data over Serial
 
Last edited:
Yes metadata, sorry its Johny- Five and I not actually using as to much for what I wanted.
I have NodeJs on Rpi running Web server with SocketI/O
Pi is connected to Teensy via Serial.
NodeJS polls teensy via serial for data packet.
Teeensy sends encapsulated data packets to Nodejs (start / stop byte, CRC16, packet length and data etc)
Node stores data in local variables.

Browser connect to NodeJS via HTML and then data is transferred from NODE <-> browser via SocketI/O
This is in both directions so you can update values in the browser via scoketIO to NodeJS and then NodeJS sends a serial packet back to the Teensy.
For instance I have a simple calendar webpage where I can update a timed event on the teensy.

Regards
 
Got it, thanks.

Installing NodeJS won't be an option for my type of customers.

Seems like Web MIDI and Chrome are still the option to beat for non-technical customers connecting to their product that houses my Teensy.
 
I had something like this working about a year and a half ago, but now I am having problems getting it to work again. The first problem I ran into in Chrome was that it seems like the web midi api requires that you use HTTPS instead of HTTP. Without HTTPs, this part would fail:

Code:
window.onload = function () {
             console.log("STARTUP !!!!");
         	
         
         	if (navigator.requestMIDIAccess) {
         		console.log('Browser supports MIDI!');
         		navigator.requestMIDIAccess()
         			.then(onMIDISuccess, onMIDIFailure);		
         	} else {
         		console.log('NO support for MIDI!');
         	}         	
         }

That no longer fails, but my Teensy LC device is not showing in Chrome. If I use MIDI-OX, I can see two devices: my Teensy and my internal sound card. But Chrome is only recognizing my internal sound card and not the TEENSY. In Arduino, my USB port is set to Serial + MIDI. Here's my code to show the recognized midi devices in chrome:


Code:
function onMIDISuccess(midiAccess) {
         
           var list = [];
           var str = '';
           var note =   40;
           var outputs = midiAccess.outputs;
         	
           list=outputs.values();
         
           console.log("Device list: ");
           var device = list.next();
         
	   //loop through devices			
          while (!device.done) {
		VAR = device.value;
         	console.log(VAR.name);
         	if (VAR.name == "Teensy MIDI") {
         		console.log("FOUND TEENSY !!!!!");
         		teensyDevice = VAR;     				
        	}					

      		device = list.next();
       	  }	
         	
       	  //Send a test note
       	  if (teensyDevice != null) {
       		console.log("sending note...");
       		teensyDevice.send( [0x9F, note, 2] );		         		
       	}         	       
}

Any ideas why the Teensy isn't showing up?
 
how comfortable are you with php or server side scripting? I use it to communicate with my teensy via tycommander and serial commands. I use the json output from tycommander to detect multiple teensy boards. I can push firmware from the web console as well using tytools.
 
I had something like this working about a year and a half ago, but now I am having problems getting it to work again. The first problem I ran into in Chrome was that it seems like the web midi api requires that you use HTTPS instead of HTTP.

Yes, correct. This is not mandated by the Web MIDI specification but is something that Chrome changed in mid-2019, and Firefox will also require when their implementation ships (actually the Firefox implementation may ship at first with SYSEX disabled completely.

This is originally motivated by the possibility of SYSEX messages to do pretty much anything, including (on some poorly-thought-out devices) to re-flash the firmware, potentially re-doing the USB stack of the MIDI device. The concern was that a hostile web page could re-flash a known MIDI device to be, say, a keyboard or mouse and inject content which appeared to be from the user. Not very likely but it has been demonstrated.
 
Status
Not open for further replies.
Back
Top