webgl


Chromium Embedded Framework

chromiumHTML5 is a fantastic app framework, but there are many environments where you cannot rely on the features support of the browser (specially when dealing against Internet Explorer, old windows versions or environments where you cannot freely upgrade the browsers). Recently I found this problem trying to package Mobialia Chess 3D for Windows 8. Microsoft provides some tools to package HTML apps to native apps, but they will run with the Internet Explorer engine, lacking features like WebGL, WebRTC, etc.

Chromium Embedded Framework (CEF) is a library that allows to embed a Chromium webview in your native Windows or Mac desktop application. So you can convert any HTML5 to a traditional desktop app (and I bet some users to try guessing if Mobialia Chess 3D is an HTML5 app). You can also create a Windows/Mac installer to  distribute the app (I used InnoSetup, but this is another story…).

Using CEF requires a small knowledge about Windows/Mac desktop app development. I created a Windows app using Visual Studio Express, it was not very difficult, because CEF includes a “cefclient” sample project that you can use as a template to start your project development.

The main problem that I found was the size, embedding CEF will add 45Mb size to your installed application. I also found other minor problems like the lack of mp3 sound support (due to license problems) solved converting the sound files to ogg.

CEF is already used by great desktop applications like Steam, Evernote or Spotify, so it’s a great option to consider in your developments.


3D Chess Google+ Hangout Plugin

gplus-hangout-60x230-normalThose days I’m working in Mobialia Chess&Chess at ICC with a lot of bug fixes and some new features… and as a side project I developed a “Mobialia Chess 3D” Google+ Hangout Plugin to play 3D Chess inside a Hangout.

You can start a chess hangout pressing the “Hangout” button in http://chess.mobialia.com or directly with the image button in this post. All the participants in the hangout can move the pieces, so it can be used to play video-call chess games or to teach chess lessons.

Technically it wasn’t very hard, the Google+ Hangouts API offers a shared state and notifications when the state changes, you can get all the API information at https://developers.google.com/+/hangouts/

I was thinking to use this API since I saw some hangout API demos by +Paul Kinlan at the BCN DevFest 2011, and recently  I had the final idea watching a Quobis WebRTC webinar.

I had only problems accessing frames from different domains, (prohibited to avoid Cross-Site-Scripting, XSS, attacks) because the hangout is hosted in a Google domain and the chess app in a different one.

To bypass those problems I used the HTML5 window.postMessage() API to send and receive messages between frames. You can send messages to frames in other domains passing two parameters to postMessage(): the message and the domain of the receiving frame:

<script type="text/javascript">
var message = "";
document.getElementById('iframeid').contentWindow.postMessage(message, "http://www.domain.com");
</script>
<iframe id="iframeid" height="100%" width="100%" src="http://www.domain.com/iframe.html"></iframe>

and in the receiving frame you must set a message listener:

window.addEventListener("message", function messageReceived(evt) {
    console.log("Receiving message from " + evt.origin + " : " + evt.data);
    //...
}

Note that you receive the origin domain, crucial because the domain of the hangout is different each time.


Google Chrome Frame

Recently I’m hearing that Internet Explorer 10 (IE) is great, etc. but IE continues lacking some standards like WebGL. I’m working with WebGL in some HTML5 projects like:

and I couldn’t make the IEWebGL plugin work (it requires a different initialization). But Google has a great solution: the Chrome Frame, it’s an Internet Explorer plugin that runs an embedded Chrome, making possible for some advanced web apps to run into IE. Not great enough? It works with IE 6,7, 8 and 9!

Using it in a web page is extremely easy: Adding this header to your web page, IE will use Google Chrome Frame if installed:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

And you can also add this javascript code asking the user to install Chrome Frame if it isn’t available:

<!--[if IE]>
  <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
  </script>

  <div id="prompt">
  </div>

  <script>
    window.attachEvent("onload", function() {
    CFInstall.check({
      mode: "overlay",
      node: "prompt"
    });
  });
  </script>
<![endif]-->

More Google Chrome Frame resources:


DevFest-X BCN 2012

For those who don’t follow me in the social networks, I’m now a co-organizator of the GDG Vigo (Google Developers Group), founded by Reinaldo Aguilera. In this group we are organizating a lot of interesting (and free!) Android and HTML5 activities (speechs, codelabs…) near Vigo, Galicia. Join to our Google Group and stay tuned!

This year I also went to the Barcelona DevFest, but as GDG Vigo we tried to help with the organization.

We participated in a Three.js codelab with Ricardo Cabello (Mr.Doob) showing how to make a very simple WebGL game in some simple steps. Slides are available at:

http://www.alonsoruibal.com/slides/codelab_three.js/

and source code is hosted in github: https://github.com/albertoruibal/codelab_three.js/

In another session I also told my experience migrating some Mobialia apps from Android to HTML5 with GWT, those slides are at http://www.alonsoruibal.com/slides/android2gwt/

Thanks Google, GDG Barcelona and GDG Tarrragona for the organization of such great event!