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.
This article’s focus is 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?
Frequently Asked Questions about Firefox OS on Smart TVs
What is Firefox OS and how does it work on Smart TVs?
Firefox OS is an open-source operating system developed by Mozilla for smartphones and smart TVs. It is designed to provide a “pure” internet experience with apps that are actually websites, leveraging the power of HTML5. This means that any developer who knows how to write a website can write an app for Firefox OS. On Smart TVs, Firefox OS provides a user-friendly interface that allows you to access and manage your apps, games, and streaming services in one place.
How can I update Firefox OS on my Smart TV?
Updating Firefox OS on your Smart TV is usually done automatically. However, if you want to manually check for updates, you can do so by going to the settings menu on your TV, selecting the ‘About’ option, and then choosing ‘Check for updates’. If an update is available, your TV will download and install it.
What online video streaming apps can be installed on a Smart TV with Firefox OS?
Firefox OS supports a wide range of online video streaming apps. Some of the most popular ones include Netflix, YouTube, Amazon Prime Video, and Hulu. However, the availability of these apps may vary depending on your region and the specific model of your Smart TV.
How can I install apps on my Smart TV with Firefox OS?
Installing apps on a Smart TV with Firefox OS is straightforward. You can do this by navigating to the Firefox Marketplace from your TV’s home screen, searching for the app you want to install, and then following the on-screen instructions to download and install the app.
Can I customize the interface of my Smart TV with Firefox OS?
Yes, Firefox OS allows you to customize the interface of your Smart TV. You can rearrange the apps on your home screen, change the wallpaper, and even adjust the size and color of the text and icons.
Is Firefox OS available on all Smart TVs?
No, Firefox OS is not available on all Smart TVs. It is primarily found on Panasonic Smart TVs, as they were the first manufacturer to adopt this operating system. However, other manufacturers may also offer Firefox OS on some of their models.
How secure is Firefox OS on Smart TVs?
Firefox OS is designed with security in mind. It uses a permission-based security model, which means that apps need your permission to access certain features of your TV. Additionally, all apps are sandboxed, which means they are isolated from each other and from the system, preventing them from accessing data they shouldn’t.
Can I use Firefox OS on my Smart TV without an internet connection?
While Firefox OS is designed to provide a “pure” internet experience, you can still use some features of your Smart TV without an internet connection. However, to take full advantage of all the features and apps that Firefox OS offers, an internet connection is required.
Can I browse the web with Firefox OS on my Smart TV?
Yes, one of the key features of Firefox OS is its web browsing capability. You can browse the web just like you would on a computer, with support for multiple tabs, bookmarks, and even private browsing.
What is the future of Firefox OS on Smart TVs?
While Mozilla has stopped developing Firefox OS for smartphones, it continues to support and develop the OS for Smart TVs. This means that we can expect to see new features and improvements in the future. However, the exact direction of Firefox OS will depend on the needs and feedback of its users.
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.