JavaScript and the Wii U Browser

With all the talk of desktop, tablet, and mobile, there is another type of browser which tends to slip through the cracks – console browsers. In late 2012, Nintendo released it’s Wii U console, an eighth generation console which introduces a GamePad that features a second screen experience. The Wii U also features a NetFront browser powered by WebKit, making the programming model somewhat similar to that of Safari for iOS. This article explores the console’s browser, including the Wii U specific JavaScript API.

HTML5 Features

The Wii U likely possesses the most HTML5 compliant console based browser in existence today. Of course, this is to be expected, given that it is the newest. The Wii U scores a 258/500 on the HTML5 test – the highest among gaming browsers. While this number may not seem impressive (my installation of Chrome scores 448/500 with 13 bonus points), it is way up from the original Wii console’s score of 94/500.

So what features does the Wii U support? For starters, there are a number of DOM Level 3 events for handling keyboard and mouse style inputs. The browser also supports touch events for interfacing with the GamePad’s touch screen. Some of the other supported features include SVG, Canvas 2D Context, Session History, Web Storage, and Server-Sent Events. A more comprehensive list of features can be seen on WiiUBrew.

Accessing the Wii U GamePad

The Wii U browser exposes a special object, wiiu.gamepad, which allows JavaScript to read the current state of the GamePad. Nintendo provides a nice example page, which, when loaded in the Wii U browser, extracts the state information and displays it on screen. The GamePad state is obtained by calling the wiiu.gamepad.update() method. According to WiiUBrew, it is safe to call update() from a timer to get real time updates. Therefore, your initialization code will resemble the example shown below. In this example, we are querying the state of the GamePad every 20 milliseconds.

window.addEventListener("load", function(event) {
  if (window.wiiu) {
    setInterval(function() {
      var state = window.wiiu.gamepad.update();

      // process the current state
    }, 20);
  } else {
    // browser is not a Wii U
  }
}, false);

After querying the state of the GamePad, you must ensure that the data is valid. If the query was successful, an isDataValid flag will be set to one, otherwise it will be zero. You can also determine if the GamePad is connected using the isEnabled flag. According to WiiUBrew, these flags are located on the wiiu.gamepad object (i.e. wiiu.gamepad.isDataValid). However, the demo page provided by Nintendo checks for these flags on the state object returned from update(). Based on my own tests, both locations seem to be correct. So, using the Nintendo syntax, checking for valid data looks like the code shown below.

if(state.isEnabled && state.isDataValid) {
  // valid GamePad data
} else {
  // invalid GamePad data
}

Conclusion

This article has introduced some of the features of the new Wii U browser. Obviously, we haven’t fully covered reading from the touchscreen, buttons, and other input devices. Be on the lookout for an upcoming article which picks up where this one left off.