Forum Rule: Always post complete source code & details to reproduce any issue!
Results 1 to 13 of 13

Thread: Web App to interact with a USB-Connected Teensy

  1. #1
    Senior Member Davidelvig's Avatar
    Join Date
    Aug 2015
    Location
    Wisconsin
    Posts
    268

    Web App to interact with a USB-Connected Teensy

    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!

  2. #2
    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.

  3. #3
    Senior Member Davidelvig's Avatar
    Join Date
    Aug 2015
    Location
    Wisconsin
    Posts
    268
    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!"

  4. #4
    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.

  5. #5
    Senior Member Davidelvig's Avatar
    Join Date
    Aug 2015
    Location
    Wisconsin
    Posts
    268
    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 by Davidelvig; 01-22-2020 at 12:44 PM.

  6. #6
    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

  7. #7
    Browser code for data transfer is Javascript using SocketIO calls.

  8. #8
    You could just run NodeJS on your PC with local server and do the same approach.

  9. #9
    Senior Member Davidelvig's Avatar
    Join Date
    Aug 2015
    Location
    Wisconsin
    Posts
    268
    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.

  10. #10
    Junior Member
    Join Date
    Mar 2020
    Posts
    2
    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?

  11. #11
    Junior Member
    Join Date
    Mar 2020
    Posts
    2
    Quote Originally Posted by G_Reno View Post
    Any ideas why the Teensy isn't showing up?
    For whatever reason, the Teensy is showing up now as an output device. Not sure why.
    Last edited by G_Reno; 03-02-2020 at 06:58 PM.

  12. #12
    Senior Member crees's Avatar
    Join Date
    Dec 2016
    Location
    Utah
    Posts
    214
    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.

  13. #13
    Senior Member
    Join Date
    Nov 2012
    Location
    Boston, MA, USA
    Posts
    1,111
    Quote Originally Posted by G_Reno View Post
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •