Paint stencilling with HTML5 canvas

I have recently been playing around with re-writing my Spray paint stencils in Flash using JavaScript and HTML5’s canvas element. One thing I discovered is that since SVGs are natively supported in browsers I can have stencils scaled to any size and remain crisp, unlike the Flash version which used transparent PNGs.

I have implemented stencils, including having a muck layer, and stickers – graphics that you can place and cut out through stencils. When I first started playing around I was writing it all plain JavaScript, but eventually I converted everything over to TypeScript which allowed me to easily separate everything out into their own classes with event listening/dispatching capabilities. Almost mimicking the way things were written in AS3.

Below is a video of the early prototype, I will provide a live demo when it is more ready for public use.

Inspiring Inspiration #16

A collection of cool video, motion graphics and interface design.

READ MORE

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.

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;
    }
}

Creating a mathematical colour picker

The most common technique for creating a colour picker (at least in the ActionScript world) seems to use a colour wheel bitmap and then getting the colour of the pixel that was clicked on. I found that this was not a very accurate way to go about it and decided to build a colour picker that gave colours based on calculations in a HSV cube – Hue on the Z axis, Saturation on X axis, and Value on the Y axis.

Of course a 3D cube colour picker would be pretty hard to use, so what we end up with is a vertical hue slider, then an area that determines the saturation and value like so:

picker

READ MORE

Inspiring Inspiration #13

A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…

READ MORE

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

Inspiring Inspiration #10

A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…

READ MORE

Uploading video from iPad to server with AIR for iOS

In this part 2 post following on from Record and play back video with AIR for iOS on iPad I will show you how to take your freshly recorded video and upload it to a web server using PHP.

Assuming you have a MovieClip or some other button labeled ‘uploadbtn’ you first need to add a click event handler to it to trigger the upload.

1
uploadbtn.addEventListener(MouseEvent.CLICK, onUpload);

Now for the click handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function onUpload(e:MouseEvent):void
{
    // create a URLRequest for the PHP file on you server (we'll get to the PHP later)
    var URLrequest:URLRequest = new URLRequest("http://www.yourdomain.com/uploadFile.php");
   
    // videoFile is a File object we created in the last post which references the recorded video
    // attach the various listeners for errors, progress, complete
    videoFile.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadDataComplete);
    videoFile.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    videoFile.addEventListener(IOErrorEvent.IO_ERROR, handleError);
    videoFile.addEventListener(Event.COMPLETE, completeHandler);
   
    // call upload on the File object and pass in the URLRequest
    videoFile.upload(URLrequest);
}

Now we can create the handlers for the attached listeners:

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
function progressHandler(e:ProgressEvent):void
{
    // just tracing the percentage of progress - you could show it in a progress bar
    trace("Uploading... " + Math.ceil(100 * (e.bytesLoaded / e.bytesTotal)) + "%");
}

function completeHandler(e:Event):void
{
    // upload process is complete
    trace(videoFile.name + " has been uploaded.\n");
}

function uploadDataComplete(e:DataEvent):void
{
    //everything is complete, trace the message returned from the PHP script which is in XML format
    var xml:XML = new XML(e.data);
   
    trace(xml.message);
}



function handleError(e:IOErrorEvent):void
{
    // simple error handler traces the error
    trace("Upload Error:" + e.text);
}

That is all that is required for the ActionScript side of things. Now for the PHP script. This is a very basic script and you should provide some security and validation on any production code.

All you need to do is save this into a blank PHP file and upload it to your server to the location matching the address in you URLRequest above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php

// variable for return message
$message = "";

// the directory to place the video relative to this PHP script
$directory = "uploads/";

// get the number of files already in the directory and increment the number for the new one
// video from the iPad is always .MOV format
$fileCount = count (glob ($directory."*.MOV"));
$newName = $directory."video" . ( $fileCount + 1) . ".MOV";

// move uploaded file with new name into directory specified above
if (move_uploaded_file($_FILES["Filedata"]["tmp_name"], $newName)){
    // create a successful message if all went ok
    $message =  "<result><status>OK</status><message>$file_name uploaded successfully.</message></result>";
}else{
    // create a failed message if something went wrong
    $message =  "<result><status>FAIL</status><message>$file_name did not upload successfully.</message></result>";
}

echo $message;
?>

That is all that’s required to upload a video from the iPad to a web server. It is surprisingly simple for how hard it was for me to work out.

I hope this helps somebody out!

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.