Public Lab Research note


  • 4

WebJack: Testers needed!

by rmeister |

rmeister was awarded the Basic Barnstar by warren for their work in this research note.


This is a tutorial on how to test WebJack.

What is WebJack? WebJack is a JavaScript library that allows to communicate with an Arduino microcontroller via headphone jack. There is no need of a usual serial connection via USB or whatever, and therefore no drivers need to be installed. Instead, you can plug a cable into the headphone jack and open a website to begin data transfer. The aim of WebJack is to enable communication between smartphones (equipped with a browser) and Arduinos, without installing additional software on the phone.

I successfully tested WebJack with a handful of different mobile devices. To get WebJack working with as much devices as possible, I kindly ask for your help on testing at real life conditions!

What do you need to test WebJack?

Hardware:

  • Arduino/Genuino (currently only tested with the Uno)
  • 3 resistors
  • 1 capacitor
  • a 4-pin headphone connector (tip-ring-ring-sleeve)

Software:

  • Arduino IDE of your choice
  • SoftModem library

Everyone not equipped with an Arduino can switch to this alternative tutorial.

Now these are the steps to get it running:

1. Install SoftModem to your 'libraries' directory

Get the pre-configured version from the webjack branch: https://github.com/rmeister/SoftModem/tree/webjack

2. Load this sketch to the Arduino

#include <SoftModem.h>

SoftModem modem = SoftModem();

void setup() {
  Serial.begin(115200);
  Serial.println("Booting");
  delay(100);
  modem.begin();
}

void loop() {
  delay(150);
  uint8_t c[7] = {'W', 'e', 'b', 'J', 'a', 'c', 'k'};
  modem.write(c, 7);
}

It will repeat sending "WebJack" all the time.

3. Patch the hardware together

Use this circuit at your own risk. Just want to make sure I'm not responsible if you damage your phone or your Arduino ;)

SoftModem_sending_circuit.png

Ring 2 is the one closer to the sleeve. The resistors and the capacitor don't necessarily have to be of exactly the same values. I've build the circuit with three resistors of 1k Ohm and it worked well, too. The sum of R1 and R3 should not be much less than 1k Ohm. You also don't need a jack as pictured above, I just ripped of a cable and connected the wires of ring 2 and sleeve.

Here is a photo of my setup:

IMG_0138_web.JPG

4. Plug in the headphone connector

...and visit the demo page of WebJack. Here's a QR code for that, so you don't have to type it:

qr_webjack_demo.gif

Hint for Safari users: please switch to Chrome/Firefox/Opera. Safari does not support WebRTC yet.

The browser may ask if you permit to take recordings from the microphone: answer 'yes'. You should see the string "WebJack" ocurring multiple times in the "Received Data" box. If nothing appears after a couple of seconds, or if the output is very cryptic text, the test failed. Else, it was successful and you can skip the following step.

5. Feedback

Nothing appeared in the mentioned box? Then please go to this WebRTC recorder and record for about 5 seconds. Please save the recording and attach it with this information about your setup in the comments:

  • resistor/capacitor values
  • smartphone model
  • browser

That's it, thank you for your help! And of course I would also love to hear your feedback and suggestions in the comments if the test was successful!


Post your attempt to replicate this activity  Browse other activities for "webjack"


Replications (0)

None yet. Be the first to post one!



This is marked this as an activity for others to try.
Try it now   Click here to add some more details.


arduino alphatest sensors gsoc webjack headphone-jack include

barnstar:basic category:build activity:webjack

44 Comments

Hi Richard, These are great instructions! I don't have experience to read the wiring diagram, and can't tell from the photo exactly what the significant positions are on the breadboard, so i'm not sure if i can test this for you. I'll ask folks in my lab, but maybe you could upload another photo?


Hi Liz, thanks for your feedback! You can click on the photo to get a larger version. There the connections are visible more clearly. I'll see if I can get it even sharper.


Very nice! we have experimented with the same softModem library on the attiny85 for the same reason of an ultra cheap communication to send data to smart phones (and not letting apple or others know that we do). loads of early experiment here: http://hackteria.org/wiki/DIY_turbidity_meters#Turbi-2-Audio-SmartPhone_interface


Oh, that's so rad, @dusjagr! Why are you keeping it from apple? The WebRTC lib doesn't work on iOS anyhow, since it's not an open platform, but just curious. Or do you just mean getting data into an iOS device given that Apple's made that difficult?


Hi @dusjagr, thanks for that hint! Found a Safari compatible version of the FSK generator in your link section. At least sending data to the µC should work now.


Wow that's pretty exciting -- safari/iOS would be a huge feature to have.

I'm wondering if folks are interested enough in this project to submit a Mozfest proposal. It's a really neat use of html5 for sensor integration and they have an open science track. It's in London...

https://mozillafestival.org/proposals


@warren, i am referring to some barriers for connecting to iphones. conceptual barriers that can be circumvented exactly by this method. we use the browser, so no app has to be installed. the rest goes via the basic input plug and no one can ban me from plugin a microphone and making some chrips... also nice is, that the FSK is a method of transmitting data that is about 100 years old :-) http://www.theanthillsocial.co.uk/sites/theanthillsocial.co.uk/files/TheAppleBarrierTomKeene.pdf


A friend of mine just tested the demo site of the FSK generator with his iPhone (ios9.3.3). The script does not seem to work anymore :(


Just tested, didn't work.

Phone: Xiaomi MI3C, MIUI 7.1.2 (Android 4.4.4)
Component Values: R1, 2.2k; R2, 2.2k, C1, 2µF; R3, 10k. 

I also tried some other configurations and values but same thing.

One note of interest is that my phone sends out a pulse about every 40ms. This is the voltage between the sleeve and ring2 without the Arduino attached at all.

IMG_20160719_130825_HDR.jpg

This is with the Arduino sending its signal. Would the pulses be an issue?...hmmmm....

IMG_20160719_130951_HDR.jpg

Here is the audio (which comes through fine!).

myRecording00.wav


Wow, thanks @kinasmith!

Probably this pulses are sort of a presence detection for the microphone? Could be an issue, but most of the signals from your recording seem not to be influenced. Definitely an issue is the attenuation of the higher frequency. What browser did you use?


I was using Chrome. Didn't try any others. Just curious, but what is the function of the circuit?


It's a voltage divider (so your phone won't be damaged by a too large voltage) and a high-pass filter (removes DC voltage).

Would you give it a try with an other browser? :)


Probably you ment an other circuit, as I see you have a background in electronics engineering :D


Hah. That's flattering, but my background isn't electrical engineering...I just kind of stumbled into it. The circuit is pretty obvious now that I actually think about it, and you're right, the pulses my phone is sending out don't make difference on the actual signal.

This is the signal going into the phone with R3 @ 2.2k and C1 at 0.1µF.

IMG_20160719_145712_HDR.jpg

Also audio from Opera and Firefox. Same phone, still not working on either.

Opera.wav

Firefox.wav


Cool, looks good. Thanks for your effort!

Maybe try switching the wires to sleeve and ring2.


yeah. no dice...still doesn't work. I'll try it on a different phone when I get home.


Oh yes, the signal is still attenuated. Didn't see that on my phone yesterday.


What are you looking at specifically when you see that the higher frequencies are attenuated? What part of the waveform, can you highlight it?

I should have time tomorrow or Sat to test this out, i've been looking around for components to use to test it. The output of an Arduino is what, 5.5v? Or some other voltage for the serial pins? And what's the desired max for a headphone's ADC?

Thanks, Richard!


kinasmith_attenuation.png

For an (unequally) attenuated signal, the amplitudes for f_low and f_high are uneven. In this case, the amplitude for f_high is very low.

Cool, I'm curious to see your test results! Arduinos output is 5V. According to wikipedia the line level for consumer products is 0.447V. But I don't know if this holds true in our case, as microphones usually create much lower voltages. However, I could observe the following voltages:

Voltage | Components

0.3V | SoftModem shield

0.2V | R1 1k, R2 2k, R3 5k

0.5V | R1 1k, R2 1k, R3 1k

I think up to 0.5V should not be a problem at all.


OK, finally got some feedback, though not sure how helpful;

I actually got stuck on installing softmodem itself; error here: https://gist.github.com/jywarren/c30643cd06f8c0c5c32a66e50f1da05a

It seems it's set up for timers on the ATMega 328 only, says this person? -- https://github.com/marcosdiez/arms22/issues/2#issuecomment-144633033

This is on the Nanite841: http://www.watterott.com/en/Wattuino-Nanite841 - https://github.com/cpldcpu/Nanite, which is ATTiny85-based.

I actually got the "SoftSerial" library on this a long time ago, not SoftModem. I'm curious, does SoftSerial just do square wave 0s and 1s, instead of two-tone? https://codebender.cc/sketch:279140#Nanite841%20SoftSerial.ino

I can get a more conventional Arduino soon and try again, but looking for ATTiny softmodem, i find:

Thanks, Richard!


It looks like SoftModem-for-attiny85 doesn't include this line: https://github.com/rmeister/SoftModem/blob/webjack/SoftModem.cpp#L273-L304

//  Brief carrier tone before each transmission
...
size_t SoftModem::write(const uint8_t *buffer, size_t size)

I'd tackle this, but I think perhaps you know more about this than I... though I could give it a try.

It doesn't really seem like the conversion was too onerous, however. It seems like SoftModem could be modified with a constructor parameter to be usable with either ATMega or ATTiny architectures. What do you think? https://github.com/l1q1d/SoftModem-for-attiny85/commit/b6f08ca9ade1263b788dcde94fb0f4aefa65431c


Maybe we should create an issue on the WebJack project so as not to make this thread too long.

I made some progress (rather crudely) copying over the 2-parameter write(const uint8_t *buffer, size_t size) method from the version of the SoftModem library you linked to, into the SoftModemTiny library I found, and got bogged down in some C errors (statics not defined in scope). I'm pretty rusty in C, though.



Another question... I see that voltage on a 'nanite' arduino clone is ~3v, and I'm wondering; peak to peak line load seems to be around -1.5-1.5v for some cases ("pro" standard...?). based on this doc, if I'm reading it right: https://en.m.wikipedia.org/wiki/Line_level

Also looking at http://electronics.stackexchange.com/questions/28404/what-is-the-voltage-range-of-a-standard-headphone-jack-from-a-phone

Reason I ask is that in the past, I've plugged this nanite with no voltage control into the headphone port of an old iMac, and just recorded audio directly into GarageBand. I know this is a risk, but I'm not sure if the peak/trough max range accounts for being DC (which'd be a 3v swing in positive) or something... or if the ADC in the iMac is just pretty robust. This was with SoftSerial, not SoftModem (which as mentioned I haven't gotten working on an ATTiny yet).

And I'm not much of an electronics person, so I may just be totally off here, but from the line level wiki page, is amplitude based on change in voltage? It sounds a bit more complex. Trying to learn a bit about this here: http://electronics.stackexchange.com/questions/86703/in-a-line-level-audio-signal-what-function-of-voltage-produces-amplitude

Long story short, I'm interested to try just plugging this directly into an old Android phone, and seeing if I can receive SoftModem messages directly off the Tx/Rx pins.


If the nanite's output is 3V, then the voltage at your phone will be about 3V as well for the first few periods. But after a couple of periods the maximum voltage (=amplitude) will swing into the half of that. The third picture from kinasmith displays this behaviour very well.

I'm confident the ADC of your phone is robust enough, but I can not guarrantee that it will not break.


Oh, cool! I heard that "dimming" occur when I piped the sound through a small amplifier, but didn't know it was supposed to be that way. Neat. Thanks, I'll try as soon as I try the new attiny code. Thanks!


Cool, thanks for your effort!


I also have a Leonardo I can test this out on, I'll dig it up.


Hmm, the Leonardo also failed to compile with similar errors to the ATTiny -- odd; I wonder if there's something wrong with my setup in general...

https://gist.github.com/jywarren/c6f2fe9cd2003ea58d48e4d9048e4817


Leonardo is again a different processor with different names for the timers used in the library. I think we can fix that with some #ifdef's in the lib.


Ugh, sorry -- i posted my Leonardo test in the wrong place -- here: https://publiclab.org/notes/rmeister/07-18-2016/webjack-test-without-arduino#c15121


@rmeister -- WebJack is a lovely piece of work!

I connected a thermistor to a Pro Mini, used the voltage divider and capacitor setup recommended above, and it all worked very easily, using your nice sketch examples and the very clean demo code.

I'll be posting about this soon, but I used the rickshaw.js graphing library to get scrolling sensor readings -- below, you can see me holding the the thermistor, then putting it in some ice water, then taking it out and warming it up again ...

https://www.youtube.com/watch?v=GtJW1Dlt3cg

Cheers, and thanks!


@donblair - Thanks Don, that demo looks awesome! Happy to see that WebJack is in use :)

I gladly try to answer questions if there are any issues with WebJack.

Thanks again, Richard


That is the coolest. Here's the video embedded!

I wonder if we could read the data off the audio track of the video...


Don, could you open a PR of your graph example page so we can include it in the WebJack demos? PUHLEEEEEEZZEEEEEEE??????


OMG that totally worked!!! Over open air too -- no cable!

Screen_Shot_2016-09-15_at_12.19.42_PM.png


From my laptop to a neighboring desktop, with the volume turned up. It worked better when I held it up to the microphone a bit.


Hi, I noted that on the WebJack page, the illustration shows the use of the 5v pin, but here it's not shown. Is it essential? I seem to have been transmitting without it, actually -- and I'm curious because why is a 4-pin cable necessary?

Ah - i think i figured it out -- even if we only use 3 pins, we need the extra ring to connect with the A/V port of a smartphone or similar device, since that's how we are using both input and output from that device.

Thanks!


Not sure what 5V pin you mean, but yes a 4-pin cable is need to connect to the microphone input of smartphones/mobile devices.


Well, just asking about the positive pin shown on the Fritzing diagram -- 5 volts -- which is not on the diagrams on this page. Thanks!


hi webjackologists, i'd like to share our recent developments of another Audio based communication, and especially the bootloader for programming Attiny85. no more USB, no more drivers, just music... the core of the bootloader is here: https://github.com/ChrisMicro/TinyAudioBoot developed by c. haberer and b. prakosa

and we have been heaviliy testing it for a synth-application, but i believe it can be very powerful for all kinda cheap and easy to use sensor applications. https://github.com/8BitMixtape/8Bit-Mixtape-NEO/wiki

greets from santiago, marc


This is beautiful - it does seem like -- please correct me if i miread -- this is for programming an Attiny, and focuses on Arduino IDE => microcontroller via the hex 2 WAV converter -- whereas WebJack is a web-based (javascript) implementation of an encoder/decoder, with a focus almost entirely on communication with an already-programmed microcontroller.

If this is correct, it seems we may have focused on completely complementary projects, which would be beautiful!

A few thoughts --

  1. I'm looking for any info on baud rate or bit rate in the WAV assembly. My thought was that it's possible WebJack could directly generate the audio to program, rather than going through the Arduino IDE. Not instead of, but just as a possible option.
  2. Maybe some integration with the nodejs-based https://github.com/noopkat/avrgirl work... not sure, but at minimum, cloud-based hex generation with https://github.com/noopkat/avr-pizza

And many other ideas -- thanks so much @dusjagr for clueing us in to this amazing work!


Ah - sampleRate -- 44100 -- is probably hertz, so that's helpful. It's in:

https://github.com/ChrisMicro/TinyAudioBoot/blob/master/java_source/waveFile/WriteExample.java#L11


yip. just discussing on our other mail list of the "Center for Alternative Coconut Research". below the response from Christoph.

and yes, sofar we focused on a bootloader, so non-geeks, can easily change the code on the board. great for musicians or other non-tech people, and we can share synthizers on a website as .wav files. similar for wearable applications of the attiny85. the original code is ancient... developed for the atmega168, but not yet for 328.

we also worked on a real-time communication, again for the synth, we mostly want to sent "to" the microcontroller to change settings/parameters, but the other way around will happen soon aswell. some web-based interface is also on the horizon. https://github.com/8BitMixtape/8Bit-Mixtape-NEO/wiki/4_6-Real-Time-Communication

greetings from hamamatsu, marc

Response, says its 10x faster: Hi Marc,

if the webjack people would do any coding for the project, I would strongly recommend that they move to the digital differential manchester coding as I use it in the bootloader. The coding principle is 10x faster than the one they use and it is much easier to implement and the calculation load for the microcontroller is less.

Cheers, Christoph


You must be logged in to comment.