Local AJAX calls with IE11

Here is a little snippet to get local AJAX (with jQuery) working when running content locally in IE 11. Local content is not allowed to use the XMLHttpRequest but it can use the proprietary ActiveXObject, so this tells jQuery to always use the ActiveXObject if it’s available.

I needed to use this to run local content on a Surface RT which doesn’t have IIS or any other browsers. This allowed me to run content that relied on AJAX from the desktop in IE modern.

1
2
3
4
5
6
7
8
9
10
11
$.ajaxSetup({
    xhr: function()  {
        if ('ActiveXObject' in window) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        else
        {
            return new XMLHttpRequest();
        }
    }
});

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

Inspiring Inspiration #14

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

READ MORE

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

Happy New Year!

Well it’s now 2014 and it’s looking to be a great year. I have a trip to Canada planned which will be exciting. I bought a new camera just before Christmas – a Sony A7R – which I am loving so far. I can’t wait to take it over to Canada. I am hoping the web industry will begin to settle down a bit as the excitement over the millions of JavaScript and CSS frameworks, libraries and pre-processors that seem to come out every week slow down and the tools consolidate. I hope to see this year some good news for Adobe AIR too. I feel like it has kind of died over the last 12 months with nothing really exciting happening. Opening up to new platforms such as Windows 8 (metro) would be massive, allowing us to create truly cross platform apps with a single code base. iOS and Android is great, but unfortunately they are not the only two platforms around now and it’s usefulness is lagging.

Over the past year my JS and CSS knowledge has skyrocketed, partly thanks to the professional development and R&D opportunities at my current job. I have developed a HTML/CSS/JS based e-learning framework and accompanying authoring tool built on Adobe AIR for my current employer which has consumed most of my time over the last 18 months. I’ll try to make more posts this year, but I know every one always says that

Top Posts from 2013

I thought I’d list some of the most popular posts made this year on Purple Squirrels so here they are:

Also, the cover picture for this post was taken on my new A7R last night in Ocean Grove, Victoria.

Happy 2014!

Reverse engineering Captivate for HTML5 widgets

Adobe Captivate is pretty horrible, especially the HTML5 output. I feel like I’m banging my head against a wall every time I use it. The HTML5 output is riddled with bugs and most of the features simply don’t work. If there is one upside to the HTML5 publishing though (and there aren’t many), it’s the ability to access almost anything in the Captivate movie due to the openness of JavaScript and work around its frustrations. I thought I would document a couple issues I faced which could potentially help someone else out. If you’re trying to figure out how to create a HTML5 widget then see my post on Creating HTML5 widgets for Adobe Captivate 6/7.

Problem 1: Create a custom slide index widget

This is pretty much impossible in the Flash publish. I needed a widget that would automatically get all the slide labels and generate an index. After a bit of digging thanks to Chrome’s dev tools, I discovered that most slide information can be found in the ‘toc’ global object on main Captivate window.

Below is a snippet of code that can be used in the HTML5 widget to get all slide names:

1
2
3
4
5
6
7
8
9
10
11
var mainWindow = window.parent; // get captivate main window, widgets are loaded into an iframe

// get list of slides
var slides = mainWindow.toc.mainMovie.stage.slides;

// get slide labels
var i = 0, lgt = slides.length;
for (i; i < lgt; ++i){
  // log all slide labels to the console, you could add them to your custom menu
  console.log( mainWindow.toc.movieProperties[slides[i]].lb );
}

Problem 2: Setting variables doesn’t work properly

Another bug I found in Captivate HTML5 widgets was sometimes setting a variable on the varHandle object doesn’t trigger a change in the movie, such as the cpCmndGotoSlide variable, which tells the movie to go to a particular slide. I found the following snippet to work more reliably:

1
2
// use the main movie's executeAction to set the variable
mainWindow.toc.mainMovie.executeAction("cpCmndGotoSlide = 2"]); // go to slide 3

I hope someone else will find this useful.

Inspiring Inspiration #13

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

READ MORE

Setting up BSQSimulator with CCV

I decided to compile the links and instructions for setting up BSQSimulator for my own future reference and to hopefully help others out. The directions are buried in the NUIGroup forums somewhere and can sometimes be difficult to find, with different versions requiring various MS Surface files.

The files you’ll need:

BSQSimulator2 (beta) direct download
http://nuigroup.com/?ACT=28&fid=18&aid=7724_evLAPcRQso47Q2MgySzN

BSQSimulator driver
https://code.google.com/p/bsqsimulator/downloads/detail?name=Driver_Final.rar&can=2&q=

Surface Runtime
http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=26716

 

Setup in this order:

  1. Install the Surface Runtime
  2. Install the driver for your platform (x86 or x64)
  3. Run BSQSimulator2 as administrator

That’s it! You should be good to go now.

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.