Bringing Firefox OS to Smart TVs

This article was peer reviewed by Agbonghama Collins and Simon Codrington. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

---

Debuting with Panasonic’s latest range of high end TV devices at CES this year, Firefox OS has now penetrated the Smart TV Market.

The Viera device range by Panasonic has received surprisingly positive reviews. With Firefox OS taking a new strategy this year, it might be a good time to revisit the Firefox OS environment once more.

SitePoint has published many articles on Firefox OS, but for this article let’s focus on how Firefox OS will work with TVs. I will cover how to set up your environment and the style guide of the TV operating system better.

Things to Bear in Mind

Developing apps for Firefox OS powered TVs is similar to its mobile device counterpart, but there are some differences to bear in mind when developing specifically for TV devices:

• Input / Control Mechanisms: Apps for Firefox OS on TV will be used via the help of a TV remote, not a keyboard, mouse or touchscreen. This is the most critical thing to keep in mind.
• Resolution: You will have to deal with Full HD (1920×1080) or Ultra HD (4K) resolutions. The Device Pixel Ratio on TVs is different to that of most mobile devices.

Preparing Your Environment

Note: The regular Gaia build procedure doesn’t work on a standard Windows environment. Windows users should use the tool, which builds Gaia inside a VM.

You need three main components to build the development environment:

• Desktop simulator: Download and install the latest Nightly Desktop Simulator (aka B2G Desktop), or build it yourself. Get the one appropriate for your system with b2g- at the begininng of the filename.
• Firefox Nightly/Developer Edition: You need Firefox Nightly or Firefox Developer Edition installed.
• A locally available fork of the Gaia repository: You can set this up by:
  • Forking the main Gaia repo on GitHub.
  • Clone your fork locally, git clone https://github.com/your-username/gaia.git
  • Add the upstream back to GitHub, git remote add upstream https://github.com/mozilla-b2g/gaia

Find more information on how to run your own Gaia build on the Mozilla Developer Network.

Note: Forking the Gaia repo and setting up the upstream is optional, but good practice in case you want to contribute back to the project.

To create a special Gaia profile for TV, run following command inside your repo folder:

make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1

When making changes, you can refresh the app (or browser window) to see the result. Rebuilding the profile and re-pushing it to the device is not needed. This method is perfect for rapid CSS/JS/HTML hacking.

Running the Simulator

Run the Firefox Desktop Simulator, setting a specified screen size, remote debug server and profile path:

path/to/b2g-bin -screen 1600x900 -start-debugger-server 6000 -profile /path/to/gaia/profile

Notes

• Specifying a resolution greater than your PC screen resolution will cause the system app to not work properly.
• b2gbin is inside the b2g package installed with the Firefox OS simulator.
• The exact profile path needed is displayed when you create your profile (by running the make command above).

Now you are ready to create your first apps for Firefox OS on TV. I recommend you read Mozilla’s Hello World tutorial to get started.

Understanding the UX

Mozilla have undertaken extensive user testing and research for the TV version of their operating system. Every key aspect of the UI and UX of Firefox OS is documented on Mozilla’s style guides, including an article on MDN.

The design philosophy behind Firefox OS for TV is based on, and resembles, elements of Google’s Material Design. The TV operating system takes advantage of the card metaphor, with each card representing an entry point to content or service. The cards align in a single file, as shown in this mockup:

These ‘base’ cards are called ‘card decks’, as they serve as aggregators for other sub-items. For example, the TV card deck could include over 200 cards, which are TV channels. Animations are fluid and natural, borrowing real life elements, as in Material Design. The style guide stresses that subtlety is key.

…it should be used as an accent to the interaction design, helping the user stay focused, and not dominate the experience.

The Home menu is where everything begins. Users access it by pressing the Home button on their remote control. It offers great customization capacities, to cater for a user’s preference.

The dashboard serves as the main hub for the OS, providing a single area in which users can see useful information. It comes as one of the default cards on the home page.

The dashboard is navigated via the directional pad of the remote.

• Right: Notifications
• Left: Upcoming TV shows
• Up: Music playback & controls
• Down: World clock

Finally, there are the Apps and Devices cards. These are stored in a similar fashion as Android (App Drawer) and can be pinned to the Home screen if the user wants.

Resources

If you want to delve deeper into the style guide of Firefox OS TV, look no further than the Mozilla Developer Network.

I recommend reading the TV Layout, Icon Design, Building Blocks, Interface & Animation Design, and the Animation settings guides.

For an overview of the current Firefox OS devices available (including TV’s), head to the Firefox OS Devices website. It’s maintained by Sören Hentzschel, a Mozilla volunteer, and is widely used within Mozilla.

Watching the Foxes?

With 5 high-end TV’s already released, it’s reassuring to see Panasonic partnering with Mozilla. Firefox OS hasn’t impressed as much as I hoped yet, so seeing a big company like Panasonic investing into Firefox OS is definitely helpful for Mozilla’s operating system.

The ecosystem is still in its early days, but it might be advantageous to be one of the early adopters and develop for Firefox OS TVs. Let’s see what Firefox OS on TV has to offer in 2016. What would you love to see?