A Gizmo for your VR Cardboard

Jean Vouillon posted an awesome Cardboard hack on the Sketchfab forum: he connected a controler using a MakeyMakey to his phone, allowing him to navigate in VR. Let’s see how he did it!

This is an article in our API Spotlight series, highlighting projects that customize our viewer through our API.

First of all, even if I’m just mentioning iOS in the following text, I am pretty sure that you can achieve the same thing with your Android device.

Today, it is very easy to experiment VR with a smartphone and a cardboard viewer. But once the device is inside the viewer, interaction and navigation become a problem.

One simple solution, is to have a controller connected to your device, you can use without the need to look at it.

1 – The MakeyMakey

The MakeyMakey is a tiny Arduino based board which allows to connect, via USB, a computer to virtually anything in order to create funny experiments.

Moreover, the MakeyMakey can be plugged to your iOS device via an Apple’s USB Camera Adapter (Lightning or 30 pins) and can be seen as an external keyboard. However, to do so, you have to make some changes in the internal settings of the board, using the Arduino application.

Don’t worry, no need to be an electronic wizard! Eric Rosenbaum, co-inventor of the MakeyMakey, wrote a great post, detailing the steps to follow. (Note, that the url of the defitech.ch article, mentioned in the post, has changed to http://www.defitech.ch/handigeek.php?item=172)

If the procedure went well, you should be able, for example, to navigate the lines of a note by touching simultaneously one of the arrows and the « earth » area from the front face. At last, don’t worry about the « usb io board…» error message popping out each time you connect your MakeyMakey: just dismiss it!

2 – The Gizmo

To make a (quick and dirty) joystick from the MakeyMakey, you just need a solderable breadboard (recommended size 47mm x 95mm, which matches the size of the MakeyMakey), a 3×6 11mm straight pin header, a five-ways push button and of course some wire and a soldering iron.

Position the 3 sets of pin header on the breadboard, in order to plug it on top of the MakeyMakey, then the push button. Now the game consists of appropriately connecting the pins of the connector to the pins of the push button. You can check the annotations of the model below for more precision.

https://sketchfab.com/models/133659f0c8b149baa74d5c930c49ed47

3 – The Code

Now it’s code time! First, copy and paste the exemplar code given on the Sketchfab viewer API page in a text file and save it as a html file.

Start by adding the parameter cardboard : 1 at the end of the initialization, in order to have the stereoscopic view. For the sake of this tutorial I’m going to keep things simple. The idea is to intercept keystrokes, particularly W,S,A and D (and just because I wired my board this way!), to trigger actions like moving the camera forward, backward, and around the target. This can be achieved by inserting, where you can read the comments // API is ready to use // Insert your code here the following code:

document.onkeypress = function(event){
    var unicode=event.keyCode? event.keyCode : event.charCode;
    …
}

Each time a key is pressed, this function is called and the variable unicode set to the code of the key: 97 for A, 100 for D, 115 for S and 119 for W. So, by using a switch statement it is easy to associate a specific action to a key:

switch(unicode)
                    {
                        case 119: //W - UP
                            action…
                        break;
                        case 97: //A - DOWN
                            action…
                        break;
                        case 115: //S - LEFT
                            action…
                        break;
                        case 100: //D - RIGHT
                            action…
                        break;
                        default:
                            default action
                        break;
}

Because each action changes the camera position, the api.lookat( ) function must be called after the switch to have the view updated.

One drawback, is that iOS does not allow key repeat, therefore you must repeatedly push the switch button to have a continuous movement.
However, you can get around this problem by putting the actions in a loop function and using the switch to set flags. In this case, a push starts the movement and another one stops it.

You can test this example and I encourage you to take a look at the source code which is largely commented. Not being a code ‘guru’, I’m pretty sure there are better ways to achieve the same results, so be indulgent!

Conclusion:

In my opinion, the MakeyMakey is a great way to play around with VR experiments. Of course, because you must write your own html file, you can’t use this gizmo with the VR button from the Sketchfab 3D player. May be, it could be great to have some keyboard shortcuts wired in the player, in order to be used with such external device?

Thanks Jean!

You can find more of Jean’s work here on Sketchfab.