HTML5 Battery API

W3C have recently [ 28th August 2014] introduced  Battery API which is compatible with browsers. Previously Mozilla had Battery API for their Firefox OS.

The aim of this experiment is to write a certain line of code so we can use in both Firefox OS and also as Chrome Extension.

Here we need several files

index.html
app.js
manifest.webapp for Firefox OS
manifest.json  for Chrome

I would like to explain only the API part 

First we have to get whether it is Firefox environment or Chrome.

Then after that we can easily get the battery level, battery charging time,  battery dis charging time and level of charge.

battery.charging is used to know whether we are charging.
battery.level is used to know the current battery level.
battery.dischargingTime  is used to know how long it will take to discharge.
battery.chargingTime  is used to know how long it will take to charge.

Then you can easily load your app to Firefox OS and Chrome extension. The output will be displayed as below

Chrome Extension Battery API
Chrome Extension Battery API
Firefox Battery API
Firefox Battery API

You can also download the source code from Github and try in your local machine.

Advertisements

Official Mozilla Gear Store to get Rare Swags from Mozilla

Everyone loves to get swag from organisation all over the world. Usually they are given to encourage more contributors and the technology lovers. Mozilla Swags are very easy to get but only thing is we need to do small contribution. If we do contribution without seeing anything other than that then everything automatically comes. But some of us don’t find enough time to contribute to open source project but we need gear.

Mozilla Gear
Mozilla Gear

To give your special ones with Exciting Mozilla gears, Mozilla foundation has started a official website which has some exciting list of the gears which can be purchased. We can purchase Gear through their website.

All the money which we give to buy will be going to Mozilla Foundation. To learn more you can check the FAQ page.

Hope many will enjoy purchasing your orders. Have fun.

Signing Up for Firefox Accounts

Recently Firefox is pushing Firefox Accounts for concentrating on large usage of Firefox products. Many have been asking how to sign up for Firefox Account. Signing up for Firefox account is much easier than signing up for any other online account. In this tutorial I will be using Firefox Developer Edition browser for Signing up.

First We have to click on Open Menu button then click on Sign to Sync.
or
We can do Open Menu then click on Preference and then Sync

Sync Option under Preference
Sync Option under Preference

Then Click on Create Account

Sign up account for Firefox Accounts
Sign up account for Firefox Accounts

Enter your desired Email ID and the Password you need.

Enter the Year of birth.
Then Click on Signup. 
Confirm Message after creating a account
Then a conformation Message will be coming to your account. Click on Verify button on the mail to get started.
Verification message in the mail
Verification message in the mail

With this you can use the bookmarks between a PC and another PC, you can sign in to the marketplace for commenting, you can sync between PC and android device.

Firefox Accounts

Recently Firefox Marketplace developers might have got the mails to update to Firefox Accounts.

It is one of the interesting update as Far as I know. It has lot of benefits for Firefox OS app user, developers, Firefox OS apps developers.
For Firefox Browser Users
Currently Firefox has provided an option to sync our bookmarks between Firefox browsers of two different devices. It will be very helpful with the Firefox Accounts.
In Future we can see Video calling service between our friends which will be using the Firefox accounts. On the recent Firefox Developer browser release we can easily see this Video calling feature in beta version.
For Firefox OS app Users
We can keep track of the apps we have install so it will be helpful for us to install the apps which we had in our previous Firefox OS device.
If we lose our device we can easily locate them in the maps.
Note if you use same persona mail ID for Firefox accounts also it will be easily transfer all contents to Firefox Accounts.

Get Started With Mozilla’s WebIDE

Yesterday Mozilla has introduced their new Browser for developers. In that we have seen there are lot of tools which Mozilla has on its own to help developers. Among that most interesting developer tool is Web IDE. The aim of the WebIDE is to help developers to write the HTML5 codes which are very specific to Mobile devices.

Web IDE on Firefox
Web IDE on Firefox
When you see to Toolbar the last button which is circular in shape with pencil is the WebIDE. We can easily click on it to open the WebIDE.
Web IDE
Web IDE
When we open we can see the simple screen of Web IDE as above. As you can see the structure of the WebIDE is very simple.
Project button : From this we Create the new app, we can open the existing packaged app or hosted app or we can set the preference according to our need.
Runtime  button: We have the option to do Monitor of the application, and when the application is running in the simulator we can easily take the screenshot, we can know about the run time information and also the permission table information about the particular application.
View Button: It helps us to install / uninstall various simulators available.
Open App: We use it for open the existing apps, When the simulator is running we can ask interact with the Firefox OS apps (like alarm, call screen)
In the right most side we have a drop down with which we can select the list of Firefox OS Simulator, we can also connect with the devices attached like Firefox OS device.

Firefox Introduced Developer Edition of Browser

Its 10th anniversary for Firefox Browser. Contributors all over the world and developers of Firefox  decided to give the best to the developers. They created a new browser which will have easy access to all the developers tools.

This browser has easy navigation for all the developer tools. It has got some extra features than current Firefox browser (Firefox 33)
Some of the interesting tools are as follows
WebIDE
It is one of the very important tool with which we will be developing the Firefox OS app and test them in the Firefox OS simulator.
You can make changes and run them easily without much stress.
You can easily debug the things for your applications.
Valence (previously called Firefox Tools Adapter)
It will help the developer to connect to the
  • Safari on iOS
  • Chrome on Android
  • Local Host
  • Remote Host

Valence will be present with WebIDE and we can choose according to our need.

Along with this we have also got more developer tools which are also present previously in Firefox.

  • Page Inspector– to check each and every element in the Web page.
  • Web Console – see logged information associated with a Web page and use Web Console and interact with a Web page using JavaScript.
  • Network Monitor – we can learn about various request going from our browser on the particular page.
  • Style Editor –  Used for editing the CSS of each and every page.
  • Web Audio Editor – inspect and interact with Web Audio API in real time to ensure that all audio nodes are connected in the way you expect.
  • Responsive Design Mode –We can resize our browser and can know how it will look at different sizes.
  • JavaScript Debugger – step through JavaScript code and examine or modify its state to help track down bugs.

Some of the exciting things we can see other than developer tools is video calling feature. It will be available to current Firefox after few days.

You may like to check Dave Camp video about Developer tools. He is currently the Director of Firefox developer tools

 You can download here.