Harvesting Air Quality Data with a NodeMCU, SensorWeb and IFTTT


Project SensorWeb is an experiment from the Connected Devices group at Mozilla in open publishing of environmental data. I am excited about this experiment because we’ve had some serious air quality discoveries in Portland recently – our air is possibly the worst in the USA, and bad enough that mega-activists like Erin Brockovich are getting involved.

Screen Shot 2016-07-13 at 5.21.01 PM

A couple of weeks ago, Eddie and Evan from Project SensorWeb helped me put together a NodeMCU board and a PM2.5 sensor so I could set up an air quality sensor in Portland to report to their network. They’re still setting up the project so I haven’t gotten the configuration info from them yet…

But you don’t need the SensorWeb server to get your sensor up and running and pushing data to your own server! I want a copy of the data for myself anyway, to be able to do my own visualizations and notifications. I can…

View original post 248 more words


PM2.5 – A SensorWeb project by Mozilla

About SensorWeb

SensorWeb is a connected Device project by Mozilla. You can visit sensorweb.io 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 http://arduino.esp8266.com/stable/package_esp8266com_index.json  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 😀




Mozilla App Maker Hack – 1

Hola Fellas 🙂
My new experiment(on ubuntu platform 🙂 ) with Mozilla App Maker.
Recently “Habitat” branch patch landed in “developer” branch (main branch in app maker). This will make the running App maker locally easier and now no need to be depend on foreman and all other complex and crapy stuff 😉
All thanks to Scott Dwane (:thecount) for landing the patch 🙂

Getting Started :
This section covers how to get Appmaker running locally. The workflow is optimized for contributors.
Dependencies :
Make sure you have nodejs, npm, and git installed.
Build the System :
Step 1. Create a root mozilla-appmaker directory:

mkdir mozilla-appmaker
cd mozilla-appmaker

Step 2. Forking And Cloning The Repository
Fork this repository, and then clone your fork into the mozilla-appmaker directory:

git clone https://github.com/your_user_name/appmaker.git

Your directory structure should look like this:

├── appmaker/

Configure remote:(If you want to, otherwise it’s not necessary now for building)

cd appmaker
git remote add upstream https://github.com/mozilla-appmaker/appmaker.git
git fetch upstream

Environment Setup And Configuration
cd appmaker
Install Node packages:
npm install
Configure your env:

cp sample.env .env

It’s copying set of default settings for app to use and make setting up for first time easier.

Hope you won’t get any error till here 😉
Now run the following command and you are good to go…Yay!! 🙂

node app

You will something like this in terminal

rishav@rishav:~/mozilla-appmaker/appmaker$ node app
Setting PERSONA_AUDIENCE to be http://localhost:5001
Loaded 42 local components from ./public/bundles
Created locale mapping from 42 locale files, with 0 failures.
Express server listening on port 5001
Express server for noxmox listening on http://localhost:12319, serving content from /tmp/mox/

open your browser and in address bar Type :


Screenshot from 2014-09-13 22:31:31

More blogs are coming on App maker hacks and specially on Fusion of TogetherJS with App Maker 🙂
Stayed tunned…till then Happy HaCkInG 🙂

Ping on #app-maker irc channel or rishav006@gmail for any help 🙂

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 : http://blog.building-blocks.com/technical-tips/javascript-unit-testing-with-qunit-and-sinon-js

Flash Firefox OS 2.1 into your Tablet


Excited about flashing 2.1 into your device? Well am too excited!

Flashing can be done via Windows as well as Linux and I will be explaining both the ways:

Point to be remember:

1: You have remote debugging enabled on your device.

2: Screen lock should be off, because when screen is off, device is disconnected.

For Linux user:

Step 1: Navigate to this link.

Step 2: Download all files and extract all files into home directory.

Step 3: Open your terminal and navigate to your home directory by this command.

$ cd

Step 4: Install adb and fastboot package into your system.

$sudo apt-get install android-tools-adb
$sudo apt-get install android-tools-fastboot

Step 5: connect your device through usb and type $adb devices in terminal.

$ adb devices
List of devices attached 
FLATFISH_123456    device

it would show your device name.

if it doesn’t echo anything then try running…

View original post 404 more words