Using Cardboard Camera and A-Frame to create a simple WebVR scene

I have been playing around with VR a bit lately after getting a new Android phone (Nexus 6P), and I thought I’d share a simple experiment I did using Google’s Cardboard Camera app, and the WebVR library A-Frame.

The result of this will be a simple WebVR scene that displays the photo captured from Cardboard Camera in a scene that you can look around.

1. Take a 360 photo

First off you will need to download and install the Cardboard Camera app, then take a photo using it.

Then choose ‘Open in gallery’ from the menu and share the image (I just emailed it to myself).

Save the photo to a new folder on your computer.

2. Create an HTML file

Next create an empty HTML file in the same folder as the image:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

3. Get the A-Frame library

Now visit the A-Frame website and download the library and save it the same folder as the HTML file, or use the hosted version. Then include it in the head of your HTML page using a script tag:

1
<script type="text/javascript" src="https://aframe.io/releases/latest/aframe.min.js"></script>

4. Create the WebVR scene

In the body of you HTML page you now need to construct the WebVR scene using the components provided by A-Frame. We need to make a scene to display it. We do that by adding an a-scene component and adding our objects inside.

1
2
3
4
<a-scene>
     <a-sky src="name_of_your_image.vr.jpg" segments-width="1000"></a-sky>
     <a-camera  cursor-visible="false"></a-camera>
</a-scene>

In the above example I have added an ‘a-sky’ component and an ‘a-camera’ component. Thy sky component renders a large sphere around the scene as a background, and it is using the image that we captured with Cardboard Camera. The camera component adds a new camera object at the centre of the scene (0, 0, 0).

5. Result

So the final HTML file should look this this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <a-sky src="name_of_your_image.vr.jpg" segments-width="1000"></a-sky>
        <a-camera  cursor-visible="false"></a-camera>
    </a-scene>
</body>
</html>

Now if you preview in your browser (Chrome) you should get a scene that you can spin around in using your mouse. If you view the page on a WebVR compatible mobile device your will be able to enter VR mode and put the device into a VR headset such as Google Cardboard.

Chrome:
vr1

Or on Android:

Screenshot_20160205-125631

You may need to add some extra pixels to the top and bottom of the image to prevent any distortion as the image is stretched around the sphere.

Recreating the Apple Watch UI using a hexagonal grid

Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI.

Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.

And an embedded demo, it works best on a touch screen although not an iPad:

The code can be found at this CodePen.

CSS Diamond grid

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows.

Here is a live demo of the grid:

READ MORE

Slide transition effects with CSS

Here are some slide transition experiments I created using CSS.

View Demo

You can view the source of the demos to see how they were made. They have all been tested and work in all the latest browsers – Chrome, Firefox, IE 10+.

There are 6 in total:

Card fall
t1
Card fall forward
t2
Carousel 3D rotate
t3
Cube rotate
t4
Scale and fade
t5
Vertical 2D Carousel
t6

Javascript voice control

Since Chrome 25 we have had access to the new Web Speech API which allows us to create web apps that can utilse voice to text or voice control with a microphone. I have been wanting to experiment with this for quite a while so I built simple example to using voice commands to control an e-learning module made with my e-learning framework. I recorded a video below demonstrating navigation through voice commands. After the video I will show show you how easy it is to set up this basic control.

The following link provides a tutorial on implementing a speech to text example: http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API

To use speech recognition for voice commands, this is how I implemented it:

1. Create a new speech recognition object

1
var recognition = new webkitSpeechRecognition();

2. Make the object continuously check the microphone

1
recognition.continuous = true;

3. Set the language to use. By default it will use the document’s language

1
recognition.lang = "en-AU";

4. Start the speech recognition

1
recognition.start();

5. Get results on the ‘onresult’ event

1
2
3
4
5
6
7
8
9
10
11
recognition.onresult = function (e) {
    // loop through the results
    for (var i = e.resultIndex; i < e.results.length; ++i) {
        // only get the final results
        if (e.results[i].isFinal) {
            // trim any whitespace from result and pass to our command handler
            // note: I am using jQuery here to trim the string because my e-learning demo already had jQuery included
            runCommand($.trim((e.results[i][0].transcript).toLowerCase()));
        }
    }
};

6. Set up a function to handle the commands

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function runCommand(command){

    switch (command) {
        case "alert" :
            alert("Hello");
            break;
        case "prompt" :
            prompt("Enter some text");
            break;
        case "confirm" :
            confirm("Confirm?");
            break;
    }
}

Melbourne train map in CSS

About three weeks ago I was showing my team at work the london CSS tube map and I jokingly put forward the challenge for the first person to make the Melbourne map in CSS gets a dollar. But after looking at the map properly I realised that it actually wouldn’t be that hard – far easier than the London tube map.

And so three weeks later here it is – the map is built entirely from HTML and CSS. No images were used. It should display correctly in all the latest browsers: Firefox, Chrome and IE 10+.

Click here to view the map in a new window.

Webcam to canvas or data URI with HTML5 and Javascript

This post has been sitting around unfinished since April so I thought I should finish it and get it out there.

In this post I am going to show how you can capture an image from a webcam via JavaScript and convert it to a Data URI which can then be saved in a database or displayed in an IMG tag.

Note: This is more of a proof of concept rather than a best practices example so the code is a bit messy and hacked together from various sources.

I have only tested this on Safari for iOS 6 and latest Chrome with a webcam. It may or may no work in other browsers.

View demo

All explanations for the the code and markup are in the code comments, so please read them for more detail.

READ MORE

Hover shine effect with pure CSS

This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works.

Live demo:

Click Me

Simple HTML markup:

1
<div class="myButton">Click Me</div>

And the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* normal button style */
.myButton {
    width: 110px;
    height: 30px;
    background-color:#0099cc;
    text-align: center;
    color: #FFF;
    position: relative;
}
/* button hover style if required */
.myButton:hover {
   
}
/* generated element for shine effect.
 * normal state is semi-transparent
 * white but with zero width. Set no
 * transition here for no mouse-leave
 * animations. Otherwise the effect
 * will play in reverse when your mouse
 * leaves the element
 */

.myButton:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
   
}
/* on hover we animate the width to
 * 100% and opacity to 0 so the element
 * grows and fades out
 */

.myButton:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

Windows 8 start screen in HTML, CSS and Javascript

About 7 or 8 months ago I built a tile based launch page at work to launch learning modules which looked similar to the Windows 8 start screen. When I had spare time I kept building on and adding 3D animations to match it even closer to Windows 8. Then I kind of forgot about it until this week when I stumbled upon this article Creating Windows-8-like 3D animations with CSS3 and jQuery which provides a tutorial on creating a similar effect.

I had been meaning to do a post on my laucher when I first started making it but it never happened. So now that that article reminded me I thought I should post it. I am not going to provide any explanations of the code or tutorials but rather just show a demo (It’s HTML and javascript so you can just view the source anyway). I have ripped a bunch of LMS related code out of it and turned it into a web page launcher.

Click a tile to launch an ‘app’ (in this case a website). Hover you mouse over the top or bottom right corner for the ‘charms’ bar to close the site and return to the start screen. I have currently only tested it in Chrome and on an iPad and there isn’t a way to get to the charms bar on iPad yet.

Click to launch demo

JS Transform Handles

The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a go myself. Below is a demo of what I came up with. It might not be the best solution but it works pretty well. I even implemented rotation but I had some issues with the scaling when the element was rotated. The demo has the rotation disabled but you can get the source by view the source of the frame. All JS, and CSS is in the one HTML file. Enabling the rotation is as simple as removing display none from the rotation handles CSS style.

The main reason I wanted to create transformable DIVs is for the next version of my Module Builder. I had experimented with transforming HTML via the AIR app but I think doing it directly in the HTML page.