Processing for FirefoxOS
Screen capture of Firefox OS (Desktop build on Ubuntu) with installed Web app written in Processing
With Firefox OS getting closer to it’s release we will finally get our free mobile operating system (RIP Maemo). Based on a Linux kernel it boots into the runtime engine behind Firefox running webapps written in HTML, Javascript and other open web APIs. In short, it’s a mobile OS powered by Javascript. Magical!
Since processing.js ships with version 2 of Processing, our favorite creative coding tool now is one of the most powerful languages for creating HTML5 animations, interactive apps and games.
Here I will show the necessary steps for running apps written in Processing on Firefox OS.
Installing Firefox OS on the Desktop
Desktop builds are now available for the 3 major OS, for Linux you have to follow these steps:
- Download and extract latest build from here.
- Install Gaia: git clone git://github.com/mozilla-b2g/gaia
- Create a new profile: make -C gaia profile
- Run Firefox OS: b2g/b2g -profile gaia/profile
More info on the Mozilla Wiki.
Building a web app
Firefox OS apps are just Web apps written with standard web technologies like HTML, CSS and JavaScript. For installing them and managing the application repository you need the Open Web apps JavaScript API.
The manifest file
The only difference between a web page and a web app is the manifest file. It contains parameters like the name, the icon and the location of your app. Here an example of a manifest, your app might need more fields:
{
"name":"Gravedad",
"developer": {
"name":"Gerald Kogler",
"url":"http://go.yuri.at"
},
"description":"Processing on Boot2Gecko test",
"launch_path": "firefoxos/gravedad/index.html",
"icons":{
"64":"http://go.yuri.at/firefoxos/gravedad/processing.png"
}
}
Installing the Web app
Mozilla Marketplace will be the official app catalog but you can also distribute your app directly from your site. Calling navigator.mozApps.install() causes the browser to load the manifest and ask the user to install the application. Here the snipped calling the manifest file:
var gManifestName = "http://go.yuri.at/firefoxos/gravedad/manifest.webapp";
var req = navigator.mozApps.install(gManifestName);
req.onsuccess = function() {
//installed
}
req.onerror = function(errObj) {
//error on install
}
You can try and install the example from here.
Detecting the device resolution
Since Processing comes from the Java world working with a fixed resolution, we have to use processing.js system variables for detecting the device resolution. System variable screen contains the dimensions of the screen and you could make your app fullscreen using screen.width and screen.height. But as we want to make it also work as web page in the browser I recommend to use jquery to detect the window or document size:
size(jQuery(document).width(),jQuery(document).height());
To apply them to your Web app you have to tweak your CSS file: Put the <canvas> tag inside a <div style=”position:fixed; width:100%; height:100%;></div> and put margin and padding to 0 for your <body> tag.
To dive deeper into Open Web apps development, you should read through the app FAQ as there are some things to have in mind. For example, you can’t host more than one app on the same origin.
Tags: B2G, Firefox OS, gaia, mobile, processing.js, processing.org
