PM2.5 – A SensorWeb project by Mozilla

About SensorWeb

SensorWeb is a connected Device project by Mozilla. You can visit for more information

Initial requirements :-

  • Hardware required : PM2.5, ESP8266 Arduino (there are other arduino like boards too. checkout github repository for more details) and connecting male-female wires. Check out images for more clarity.
  • Download and install Arduino IDE. I followed this blog .
  • Clone the sensor-web arduino-station  from github for the firmware. This is used to configure your arduino ESP8266 board.
  • In firmware code, you need SSID and Password (i.e Wi-Fi name and password) for internet connection so that collected data can be uploaded to SensorWeb server.   Data can be seen as visualization on SensorWeb dashboard.
  • Also, you need API key and sensor id.  Either you can request these from its website by filling contribute form or you can mail them directly with your name, email, location. They will setup a station for you on the dashboard.

Installation and configuration steps for ESP8266 arduino and PM2.5 :-

  1. Wiring connection between PM2.5 and Arduino ESP8266IMG_20160622_161828
  2. As you can see in the image : PM2.5 sensor and arduino board. PM2.5 sensor has 8 pins (let’s say, leftmost as 1st and rightmost as 8th pin ). 1st – 2nd are power pins (Vin & GND) while 4th – 5th pins are data pins (Tx & Rx).
  3. Connect 1st pin and 2nd pin of PM2.5 to Vin (+ve) and GND (-ve) of arduino board respectively. You can see in above image : violet color wire for Vin and red color wire for GND.
  4. Connect 4th pin and 5th pin of PM2.5 to Tx and Rx of arduino board respectively.
  5. You are done with wiring connection. Yay! :). All are other pins of PM2.5 are not required now.
  6. Run the Arduino IDE (as root or administrator) and click on File and navigate to Preferences. Add  in Additional Boards Manager URLs:Screenshot from 2016-06-17 15-30-59
  7. Click on Tools and navigate to Boards > Boards Manager and search for ESP. Select & install esp2866photo446984252042618933Screenshot from 2016-06-22 17-27-23
  8. Now again click on Tools and navigate to ESP2866 modules and select NodeMCU 0.9 (ESP-12 module)photo446984252042618934
  9. Click on the File and open the firmware code in the IDE and modify the SSID, password, API key and Sensor id.
  10. Now click on the verify icon, then upload icon to flash the firmware to the ESP2866 arduino board.
  11. Now you are good to go 🙂 . Connect arduino with power source and after few minutes you can see your PM2.5 data on SensorWeb dashboard.

Note : While Flashing the firmware to arduino, remove all the wiring connection between PM2.5 and arduino.


Happy Hacking 😀





Gsoc_Part_2 : Bug 1020306 – Make the thread/message edit mode to match the style used by other applications

This is my another work which i did during my GSOC project 🙂
Here in this bug I implemented the new UX flow of SMS app.
This patch has merged with master. You can experience it FxOS nightly or in Latest version.

Thanks to Mentor Gabrile svelto, JulienW (SMS app owner) and UX designer Jenny & Fang for helping me out there 🙂

About the Bug :
The edit mode used for threads and messages is currently different than what’s offered by other gaia apps (e.g. the e-mail app). To pave the way for future functionality (such as mark-as-read) we should modify it to be more consistent with the rest of Gaia.

Purpose of this bug is to “Make the thread/message edit mode to match the style used by other applications “.

1. Select-all/Deselct-all button at top right corner (header) in thread-edit mode.
2. Delete button at bottom in thread-edit mode.
3. Addition of blue dot(for unread messages) in thread-edit mode.
4. change in postion of checkbox and blue dot (similar to email app or omega proposal) in thread-edit mode.
5. change in color of checkbox (from red to blue:similar to email app or omega proposal) in thread-edit mode.
6. Necessary changes/addition in menu option or header.
7. Almost Similar changes (1,2,5,6) for message-edit mode.

Another important work was to write unit test for all these changes .
Patch Link:

Before Applying the patch :

20 21 23

Same for message edit mode…


After applying the Patch :    🙂

Screen Shot 2014-07-03 at 19.11.23 Screen Shot 2014-07-03 at 19.11.27 Screen Shot 2014-07-03 at 19.11.32 Screen Shot 2014-07-03 at 19.11.34 Screen Shot 2014-07-03 at 19.11.41 Screen Shot 2014-07-03 at 19.11.49 Screen Shot 2014-07-03 at 19.11.55 Screen Shot 2014-07-03 at 19.11.59 Screen Shot 2014-07-03 at 19.12.01


More blogs on newly added features in fxos && App maker hacks are coming soon.
Stayed tunned…till then Happy HaCkInG 🙂

Ping on #gaia irc channel or rishav006@gmail for any help 🙂

Gsoc_Part _3: Bug 1053119 – Adding contact images in Thread list edit mode of SMS app and modification in existing Transition/Animations :

After long time (about two months) finally i got time to write blog. 🙂
My GSOC project was on SMS application of Firefox OS. This Bug was one of the part of my project. This patch has merged with master. You can experience it FxOS nightly or in Latest version.

Thanks to Mentor Gabrile svelto, JulienW (SMS app owner) and UX designer Jenny for helping me out there 🙂

About the Bug :
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140715214327
Steps to reproduce:
>In SMS app there are contact images in thread list mode.
>Now here we are adding the contact images in thread list edit mode too.
Refactor the edit mode :
when we display the edit mode, we change some properties that we shouldn’t change. They trigger a reflow. Examples are: “left”, “padding”.
We need to change only “opacity” and “transform” to make the transition happen on the GPU, otherwise the animation is lost on the device.

Before applying the patch :
Thread List mode :
Thread List Edit mode :
Screen Shot 2014-05-03 at 04.55.56

After patching :

Thread List edit mode (Adding of contact images)

Other important job was to refactor the transition and animation in edit mode.
Till now when we display the edit mode, we change some properties that we shouldn’t change. They trigger a reflow. Examples are: “left”, “padding”.
We need to change only “opacity” and “transform” to make the transition happen on the GPU, otherwise the animation is lost on the device.

I replaced the existing rules with “opacity” and “transform” to bring out the same changes.

/* Lists: edit mode */
-.edit #threads-container[data-type=”list”] ul {
– padding: 0 1.5rem;

.edit [data-type=”list”] li > a {
– left: -2rem;
+ transform: translateX(-1.5rem);
.edit [data-type=”list”] li > label {
opacity: 1;
pointer-events: auto;
– left: -2.4rem;
+ transform: translateX(2rem);
.edit [data-type=”list”] .danger {
– left: -1.3rem;
+ transform: translateX(2.5rem);
.edit [data-type=”list”] li > .pack-checkbox input ~ span:after {
opacity: 1;
– transform: translateX(4.5rem);
– left: -2.2rem;
+ transform: translateX(2.5rem);
.edit [data-type=”list”] li > a > aside.icon-unread {
– opacity: 1;
– left: 5rem;
+ transform: translateX(5rem);
.edit [data-type=”list”] li > a > p {
transform: translateX(5.0rem);
– margin-right: 3.5rem;
+ margin-right: 3.4rem;
-.edit #threads-container[data-type=”list”] aside.pack-end {
– margin: 0 0.5rem 0 -3rem;
+.edit [data-type=”list”] li[data-photo-url*=”blob:”] > a > p {
+ margin-right: 10rem;
.edit #threads-container[data-type=”list”] aside.pack-end span {
– transform: translateX(9.5rem);
+ transform: translateX(1.5rem);

More blogs on newly added features in fxos && App maker hacks are coming soon.
Stayed tunned…till then Happy HaCkInG 🙂

Ping on #gaia irc channel or rishav006@gmail for any help 🙂

Unit Testing

For those new to the concept of Unit Testing, the basic idea is to write a suite of automated tests which run against your code and test the smallest piece of functionality possible which usually means each method. You define a set of expected outputs for a set of inputs and ensure that the code does what you expect it to do.

A well designed unit test suite, once in place, gives various benefits: you can confidently change code safe in the knowledge that it still does what it was doing before; regressions can be seen immediately; new developers can get a sense of what the code is meant to do and how to use the API; you can design your API without having to write the client code – this makes it easier to divide up work and probably most importantly – coding to enable unit tests requires you to write loosely coupled code which is good for maintainability and flexibility. A poorly designed or incomplete test suite on the other hand can have some negative effects.

Javascript Unit Testing

There are a lot of JavaScript unit testing frameworks around now that Test Driven Development has become popular. Jasmine and jsUnit QUnit .Here we go with QUnit, which is developed to test jQuery, is the best fit.

QUnit provides a simple API. I only really used 4 functions:

  • module which provides access to setup and teardown methods.
  • test which defines a test as you might think.
  • ok an assertion.
  • equal also an assertion.

For those unfamiliar with Unit Testing parlance, an assertion is a test for the expected result. Just like in the English language you make an assertion, which could be true or false, in a unit test you do so with code. The functions setup and teardown provide a way to run code before and after each test is executed, enabling the state to be reset.

The ok assertion just takes a single argument which it expects to be a boolean. If it is true: the test passes, if it is false: the test fails.

The test function takes 2 arguments, the first is the name of the test and the second is a function which is the test. It’s imperative to follow a consistent structure with your test names and to be descriptive, remember unit test code is code too. If you don’t, you will be kicking yourself later when trying to debug why “mytest234” failed with “Object does not support this property or method”.

For example:

test("2 plus 2 should equal 4", function() {
   var expected = 4;
   var result = (2 + 3);
   ok(result == expected,"2 plus 2 was not 4, universe broken. Good luck fixing that.");

In the above test you can see that we’re using the test function and the ok function. Let’s get this working.

Source :

Gaia Hacks – Part 2

Some useful commands that i came across  while contributing to OPEN SOURCE  to  Mozilla  (Firefox OS: Gaia hack)

All commands are used on Linux system (Ubuntu 14.04)

Hack – 1.  Flashing your Geeksphone(Keon) with Latest nightly

Get the latest stable and nightly builds as self contained downloads for flashing your phone from here :


Download your particular build and extract the archive to your filesystem. The archive contains the images and commands required to flash the phone using Windows, Mac OS, or Linux. Before attempting to flash the phone make sure that you have enabled Remote debugging on the phone. This option can be set by launching the Settings app and navigating to the Device information -> More information -> Developer tab. Also do not attempt to flash the phone if the power level is below 50%.

Enabling remote debugging on the Firefox OS Settings app

For Linux

To flash a Keon from Ubuntu add the following rules to /etc/udev/rules.d/51-android.rules

SUBSYSTEM==”usb”, ATTR{idVendor}==”05c6″, ATTR{idProduct}==”8013″, MODE=”0666″
SUBSYSTEM==”usb”, ATTR{idVendor}==”18d1″, ATTR{idProduct}==”d00d”, MODE=”0666″

Open a Terminal (control-alt-t on Ubuntu) window and cd to the directory containing the extracted files. Run:


This should flash the new image to the phone. The phone will need to be set up again as all data will be cleared.

Hack – 2.  Flashing Latest Gaia repo to device

This development require installation of adb, the Android Debug Bridge. So first of all install adb .

Newer Linux distributions have adb already in their repositories. For Ubuntu 12.10 and later, run the following command:

sudo apt-get install android-tools-adb

Troubleshooting (If you get any error)

If you’re using a 64-bit install, and you get a “File not found” error when running ‘adb’ even though the file is present, you’ll need to install 32-bit compatibility libraries. To do this with apt:

sudo apt-get install ia32-libs

Restarting the b2g Process (if not running)

b2g is the equivalent of a XULRunner application running on the phone atop an Android-based kernel. Sometimes you may want to restart it; this is a way to reset the application environment without rebooting the entire device. You can do this by entering the following on your terminal while your device is connected to your computer (or while running the debugger):

adb shell killall b2g

Push to device

make install-gaia
make reset-gaia

With ADB (Android Debug Bridge) setup, these make targets will push Gaia to the device. install-gaia will just push updates of Gaia from your working directory to your device. reset-gaia will purge all existing configuration, profiles, web apps and database entries (a new settings database will be initialized) before pushing Gaia.

Now if you want to flash the master branch of your gaia repo

git checkout master
make install-gaia installs everything

if you want to flash some different branch you created, let’s say  branch :-  newbug

git checkout newbug
make install-gaia installs everything

If you want to flash any particular app say SMS instead of complete gaia repo

git checkout master (or newbug whichever you want)
APP=sms make install-gaia

One of my friend ask me how to make my own build app let’s say fitness app as default one (like Sms,Contact,Calendar which cannot be uninstall)

Simple Solution : Copy and paste your  app folder  in :  cd gaia/apps folder

Then push that app or complete repo to your device using above commands.

Hack – 3.   How to resolve ‘whitespace errors’ ? 

Whitespace errors ??   What the HELL is this (this was my reaction when i encountered first time 🙂 )

When you made some changes to your files (say some js file), then sometime it give whitespace errors (Check using jshint tool) when commiting changes which is difficult to find.If you are here, you’ve seen the trailing whitespace errors shown by Git when committing changes.

Following shell scripts will help you…

  1. In a terminal of some sort, go to your working git repository ($GIT_DIR) : (In our case : cd gaia)
    cd $GIT_DIR
  2. Now open a new file for writing:
    cat > .git/hooks/pre-commit
  3. Paste the following code in the terminal:

    if git-rev-parse --verify HEAD >/dev/null 2>&1 ; then
    # Initial commit: diff against an empty tree object
    # Find files with trailing whitespace
    for FILE in `exec git diff-index --check --cached $against -- | sed '/^[+-]/d' | sed -r 's/:[0-9]+:.*//' | uniq` ; do
    # Fix them!
    sed -i 's/[[:space:]]*$//' "$FILE"
    git add "$FILE"

  4. Hit “Enter” and then “Control+D” to end editing.
  5. Finally, make the file executable:
    chmod +x .git/hooks/pre-commit

Now every time you commit changes, Git will run the hook and clear trailing whitespace before actually saving the changes.

If you feel any problem then ping on irc channel #gaia or #b2g or join the gaia mailing list. You can ping me too on .

More blogs are coming on gaia and related hacks

Till then Happy Hacking !  🙂

Gaia Hacks – Part 1

Following are some useful commands that i came across  while contributing to OPEN SOURCE  to  Mozilla  (Firefox OS)

All commands are used on Linux system (Ubuntu 14.04)

Hack – 1.  How to Run Gaia in your nightly browser

Install nightly browser in your system

  • sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
  • sudo apt-get update
  • sudo apt-get install firefox-trunk

Getting the Source code

To get the source code for Gaia, fork us on GitHub and then clone your fork using git.This repo is around 1GB so have patience while clonning the repo.

$ git clone

Now go to your gaia directory.

cd gaia

After the above is complete, you are ready to make your local Gaia profile. Inside the gaia directory, which you should be in now, run:

DEBUG=1 make

The process above is going to do a bunch of things and the first time you run it, it is going to take some time so my suggestion is, take a break and make yourself some coffee. Once the above has completed the last line of output should be something like:

Profile Ready: please run [b2g|firefox]
-profile /Users/schalkneethling/mozilla/projects/gaia/profile

Now that we have our profile and nightly browser, let’s join the two. Open up a terminal (command line) and enter the following:This will open nightly browser and gaia running in browser 🙂

/path/to/nightly-browser -profile /path/to/profile

Something like this:-

rishav@rishav:~$ /usr/bin/firefox-trunk -profile /home/rishav/mozilla/gaia/profile-debug/ -no-remote
Screenshot from 2014-06-01 01:19:30

Hack – 2.  How to Update your forked gaia repo

Now another important thing.There is lots of changes takes place daily in master branch of mozilla-b2g/gaia repo.It’s not necessary for running gaia but it’s good if you update your forked gaia repo daily so that you will get updated with new changes.

git remote add upstream

Then run ‘git remote -v‘  you should see four lines, two called ‘origin’ (your fork) and two called ‘upstream’ (the mozilla-b2g original repo).

then, fetch from upstream repo:

git fetch upstream

Wait until gets all the changes, then go into your master branch (if you are not) and update it with the upstream master branch

git checkout master

git merge upstream/master

Once you have done that do ‘git push – -all‘  to push the updates into your fork (origin).

Hack – 3.  How to Run gaia unit-test

First of all what is unit test? 🙂

As part of the Gaia/B2G source code, we have  various unit tests available to run, for testing different aspects of Gaia and B2G.

Install nodejs and npm in your system.

The first thing you will need to do is open two terminals and go into main gaia directory in both terminals.

Now we need to set an environment variable to point to nightly firefox into both terminals.

We can do this by following command :

export FIREFOX=/path/to/your/nightly/firefox

Basically the FIREFOX environment variable has to point to nightly firefox binary.

Now after done with this, run following command in one of the terminal:


This will download a bunch of things and open the nightly browser.Now we are ready to run the unit test.

Now go to other terminal and run this command.This will run the unit test for SMS app.

make test-agent-test APP=sms

You can do this with any app whether it is contact, setting, calendar, sms etc….

If you run   ‘make test-agent-test‘    it will run unit test for all the app i.e complete gaia.

Best thing, once you start the unit test for any app (say sms), then if you make any changes in the code related to that app it will run the unit-test automatically and also very quickly 🙂

If you feel any problem then ping on irc channel #gaia or #b2g or join the gaia mailing list. You can ping me too on .

More blogs are coming on this till then

Happy Hacking  🙂






Finally official coding period of Gsoc 2014  began from 21st may. First part of my gsoc project is  Bug 829820 Ability to mark selected SMS threads as read After a long discussion ,i think around one month, We arrived at important conclusions. As new features is landing for  SMS app, we planned to redesign new UI-flow  for SMS app.Thanks to Omega who designed the new UI-flow and my mentor Gabriele Svelto  who suggested more  changes and planned how to carried out these changes.

Finally me and my mentor decided to split this bug into smaller one so that it will become easy to track all the changes.

The idea would be to split it in the following bugs:
- Refactor the existing edit mode to use Omega's proposal 
  but w/o additional features (i.e. delete only),this would include 
  the thread edit mode too (UI should be rather compatible).
- Add mark-as-read mode to the thread list edit mode.
  From here i am extending my gsoc project.
- Add undo for both delete and mark-as-read in both modes.

I worked on the first section in this week.I refactor the existing edit mode to use Omega’s Proposal but without additional feature (i.e delete only), this would include the thread edit mode too.Apart from these i added select all and deselect all in one button.When we select all threads then it will show ‘deselect all’  button, other wise it will show ‘select all’  button.All codes are in my github forked repo.Link of the patch for this first section

Below are some screen shots of SMS app after landing this patch

Screen Shot 2014-05-03 at 04.55.46 Screen Shot 2014-05-03 at 04.55.50 Screen Shot 2014-05-03 at 04.55.56 Screen Shot 2014-05-03 at 04.56.00 Screen Shot 2014-05-03 at 04.56.04 Screen Shot 2014-05-03 at 04.56.07 Screen Shot 2014-05-03 at 04.56.14