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 Foxbox 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
- Specifying a resolution greater than your PC screen resolution will cause the system app to not work properly.
- b2gbin is inside the
b2gpackage installed with the Firefox OS simulator.
- The exact profile path needed is displayed when you create your profile (by running the
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.
If you want to delve deeper into the style guide of Firefox OS TV, look no further than the Mozilla Developer Network.
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?
Elio is a open source designer and founder of Ura Design. He coordinates community initiatives at SitePoint as well. Further, as a board member at Open Labs Hackerspace, he promotes free software and open source locally and regionally. Elio founded the Open Design team at Mozilla and is a Creative Lead at Glucosio and Visual Designer at The Tor Project. He co-organizes OSCAL and gives talks as a Mozilla Tech Speaker at various conferences. When he doesn’t write for SitePoint, he scribbles his musings on his personal blog.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well