IoT Project - Wifi Enabled Portable Display

The wifi enabled portable display.

After experimenting with and reading a lot about IoT technologies, I decided to create something. So here my first IoT project: The wifi enabled portable display. This tiny little display connects to a internet over Wifi and waits for messages. It is possible to send text messages or images to the display via Internet , from your PC , mobile phone or tablet. Checkout the below video to see it in action :

Project Goals

Before we get into details, I want to go over list of goals which I had set for this project:

  • Create a low cost wifi enabled display using ESP8266 and 128x64 bit OLED display. It had to be portable and battery powered.
  • The display should be able to show text messages and monochrome graphics. It should automatically scroll long text messages (which cannot fit on screen).
  • Create a GUI front-end which can be used with desktop or mobile browser to send images and text to the display.
  • The display should handle interruptions in Wifi/Internet connection. It should automatically try to reconnect in case it gets disconnected.
  • Use mostly open source tools and free stuff for software development.

High Level Design

High level design showing components and how they are interfaced

The above diagram illustrates the high level design of the project. The table given below summarizes important software and hardware design decisions

Hardware DesignSoftware Design
The board consists of a single ESP8266 module which handles CPU tasks and networking. There is no microcontroller. For me the cost of all components was around USD 15 (here in India).The ESP8266 is using the NodeMCU firmware . All the code to control the display is written in Lua.
I have used a 128x64 bit OLED display, which allows for displaying of descent number of characters and monochrome bitmap graphics.To show things on OLED display, I have used the U8gLib which is available out of the box with NodeMCU firmware.
The display is interfaced with ESP8266 using I2C protocol. This is interesting, because we only require 2 PINs.The MQTT protocol is used to send data to the display. The ESP8266 subscribes to a MQTT broker and listens for messages.
The board works on 3.3v and is mainly designed to be powered via battery. When powered by battery (6v-20v) , a 78L33 based regulator provides 3.3v . There is also the provision to bypass the regulator and provide 3.3v regulated input to board.There is a HTML based front end , which uses Websocket to push messages over MQTT to the display. This front end has been written using AngularJs and Paho library .This makes it possible to send messages to the display using any PC or mobile device.
The board has PINs for serial communication with ESP8266. These can be used to modify software inside ESP8266 and debugging.MQTT hosting provider was CloudMQTT. They have a free plan which awesome for DIY enthusiasts, really grateful to them. to try out their desigs.

The Hardware

The hardware used for this project is very similar to what I have described in my previous article . The only difference being , there is an additonal voltage regulator circuit. I have used 78L33 regulator IC which can convert 6-20V to 3.3v(regulated) with max current of 100mA. I use four AA batteries to power the board. In my tests I have found that the circuit takes around 70-80mA, so choice if regulator is well suited for it. On the circuit board the output of voltage regulator is connected via jumper to rest of the components. The ground PIN is exposed on the board, which allows powering the board from an external 3.3v regulated source. The Tx and Rx pins of ESP8266 are also exposed, which allows for upgrading the software very easily.

Schematic diagram of the board and PINout.

Actual circuit showing PINs and jumper setting.

The Software

This is where things get very exciting. As I have already stated, the board uses an ESP8266 with NodeMCU firmware as a CPU. This means all the code for board is written in Lua. I won’t go into details of the code in this article, you can download it from here. The most challenging part about writing the software was getting the timings correct. There are three important things which the software does, which are:

  • Scrolling of text in case of long messages.
  • Displaying of ‘New Message’ splash screen on receiving new message for couple of seconds.
  • Executing the ‘picture loop’ of U8glib (library for interfacing the display) at regular interval.
  • Checking if the board is connected to internet at regular intervals and trying to connect if disconnected.

The most challenging part was use of timers to make above actions possible (forget multithreading or fancy programing constructs !). One problem which I have not been able to overcome is , being able to read complete binary data for a 128x64 bit image. As a result, I changed the code to only accept and display 96x64 bit images. This problem could be due to speed at which my program is able to read data from socket or something to do with internal buffers. Honestly speaking, I have given up on debugging and finding a fix for this issue. With NodeMCU it is simply very time consuming and painful.

Talking to the display from Internet

Okay, so we have a display which connects to internet and waits for messages. But what good is it, if there is nobody to send a message. To address this, I have created a HTML front-end which uses Paho (MQTT over Websocket) javascript library and AngularJs . This front-end, (as shown in the video) can be used to send text and image messages to the display. I have only tested it with Chrome and IE on Windows 8, but it should work with any browser which supports File API and WebSocket.

Downloads and instructions.

Here is list of files downloads:

File NameComments
messenger.htmlThe GUI front-end to send messages to the display. It uses following libraries from CDN:
mqqtws31.jsThe Paho MQTT library. Download it from their website and place in same folder as messenger.html
smart_lcd.luaContains LUA code for the hardware. Needs to be written to ESP8266 as main.lua. Please refer to my old article for details. Also do not forget to change wifi networkId/password and MQTT server details in this file (check out the header.)
smart_lcd_init.luaNeeds to be written to ESP8266 as init.lua. This contains 'dofile('main.lua')' statement, which executes our code when the board powers up. Here again refer to my old article on writing this file along with smart_lcd.lua to ESP8266
Sample 96x64 bit monochrome bitmap images

Right Click over the images and select 'Save ..' in your browser to save these images.

Finally

Hope you liked reading about my first IoT project. I have learned quite a bit about IoT while making this project. This project is an excellent example of how hardware and software work together to make things work. There are many interesting things you can do with this little device, which I will be covering in future articles. As always, suggestions and feedback are always welcomed !

Thanks to:

Interfacing 128x64 pixel OLED display with ESP8266 (with NodeMCU)

Someone rightly said ,

“A picture is worth a thousand words” !

In the electronics world we can say this translates to,

“ A display is worth a thousand LEDs”.

I have always wanted to add some sort of display to my microcontroller projects. The main issues I faced with this were:

  • The most common LCD is 16x2 character display, which is large in size, heavy and needs lots of pins for interfacing. Also it does not support graphics (in short , ‘not so cool’).
  • Your microcontroller needs to have a library to support the display and necessary I/O pins. I know Arduino has both, but something like ATTiny85 will struggle. Even with an ATMega you quickly run out of PINs after interfacing most displays.
  • I don’t like the idea of adding a breakout board or a shield just to support a display.
  • Cost and availability are always a problem (If you live in US/Europe, you are lucky :-) )

Meet the supercool OLED display !

128x64 pixel monochrome OLED display.

Recently, I was doing a project using standalone ESP8266 and wanted to add a display to it. I have discussed about ESP8266 before on my website and I’ll say this again: “At times, I find it more interesting than Arduino”. I have the most common (and cheap) type of ESP8266 module which exposes only 2 GPIO pins. Initially, I was thinking of adding a microcontroller to my project so that I can interface a display. After some research on the internet , I came across this 128x64 pixel monochrome OLED display. It is tiny and supercool, because:

  • Cost is around USD 9 (in India), which is OK.
  • OLED, so no backlight required, self illuminating.
  • Can be controlled with just 2 pins (using I2C bus protocol).
  • Lightweight, tiny and has low power consumption.
  • Operates on 3.3v, so can be directly interfaced with ESP8266.
  • Supports graphics ! NodeMCU has built in support for such displays.

So, I dropped the idea to use a microcontroller and promptly ordered this. I2C is a nice little bus protocol which I was not aware of until now. The best part about it is , it requires only two PINS (GPIOs will do) and multiple devices can be attached to a single I2C bus.

The hardware part

I have covered the process of flashing ESP8266 with NodeMCU firmware in my previous article , so I am skipping that part. I am assuming that you already have a ESP8266 with NodeMCU firmware. Given below is the circuit diagram. One thing to note is, I have added pull-up resistors (R1 and R2) to be on safe side. My research suggests that OLED display has internal pull-ups , but I was not willing to experiment. The recommended value of pull-up resistors is 4.7KOhm, but I had couple of 6.8KOhm ones lying around, so decided to use those. Please check the PINs on your OLED display. Many displays will have more PINs (compared to mine) to support SPI. Mine had only 4 pins, so connections were straightforward.

Connecting components.

Summary of connections:

ESP8266 PINConnected to:
VCCTo 3.3v PIN of UART and OLED display.
GNDGND of UART bridge and of OLED display.
TXRX
RXTX
CH_PD3.3v
GPIO 0SCL Pin of the OLED display. Also pulled-up to VCC using 4.7KOhm resistor
GPIO 1SDA Pin of the OLED display. Also pulled-up to VCC using 4.7KOhm resistor

Important

Most USB to serial adapters support 5v. If you apply 5v to VCC pin of the ESP8266 module it will get damaged permanently. I can tell this from my experience :-) . So please ensure that your serial converter is 3.3v compatible. You can get a serial converter which supports both, 5v and 3.3v pretty cheap.

The software part

Given below is LUA code to display some text on the display. The code is fairly straightforward. It first initializes I2C on GPIO0 and GPIO2, then uses U8glib library bindings available in NodeMCU to draw some text. I will cover U8glib in more detail in my next article. To send the code to ESP8266, use luatool as explained in my previous article .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        
a = true
-- setup I2c and connect display
function init_i2c_display()
i2c.setup(0, 4, 3, i2c.SLOW)
disp = u8g.ssd1306_128x64_i2c(0x3c)
end
-- the draw() routine
function draw()
disp:setFont(u8g.font_6x10)
disp:drawStr( 30, 10, "Hello IoT!")
disp:drawLine(0, 25, 128, 25);
disp:setFont(u8g.font_chikita)
disp:drawStr( 5, 40, "More cool stuff coming soon")
disp:drawStr( 30, 50, "on ashishware.com")
end

function display()
disp:firstPage()
repeat
draw()
until disp:nextPage() == false
display();
end
init_i2c_display()
display()

Conclusion

It is fascinating to see how technology is evolving day by day. In just under USD 10-15 , we have a wifi enabled device with cool little display. I’ll write more on this pretty soon. Until then, feel free to make and experiment.

Wifi detector using ESP8266 and NodeMCU

In this article I will show you, how we can create a very basic wifi network detector using a ESP8266 module, a LED and some code. If you are new to ESP8266 I strongly recommend you read my introductory article on it. We will use a ordinary LED connected to one of the GPIO pins of ESP8266 to indicate status of network. If network is available(and is in range) the LED will be on. If network is unavailable or out of range the LED will start blinking. The best part of this project is, it does not need a separate micro-controller and can be battery powered.

The Hardware

You will need following items:

  • USB to UART bridge (should support 3.3v).
  • ESP8266 with NodeMCU firmware .
  • A normal LED and 1KOhm resistor.
  • A breadboard.
  • Jumper wires .

The USB to UART bridge is required to transfer our program to the ESP8266. We will write a program in Lua to search for a wifi network at regular intervals and control the LED. We will use a python based tool called Lua_tool to transfer our programs to ESP8266.

Important

Most USB to serial adapters support 5v. If you apply 5v to VCC pin of the module it will get damaged permanently. I can tell you from my experience :-) . So please ensure that your serial converter is 3.3v compatible. You can get a serial converter which supports both, 5v and 3.3v pretty cheap.

The Software

Given below is a very simple Lua script (wifi_detect.lua), which is used to detect a wifi network and control the blinking of the LED.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pin = 4
ssid = 'your_wif_nw_ssid'
is_pwm = false
function check(t)
for k,v in pairs(t) do
if k == ssid then
if is_pwm then pwm.stop(4) end
is_pwm = false
gpio.mode(pin,gpio.OUTPUT)
gpio.write(pin,gpio.HIGH)
return end
end
if is_pwm == false then
pwm.setup(4, 1, 512)
pwm.start(4)
is_pwm = true
end
end
tmr.alarm(0, 5000, 1, function() wifi.sta.getap(check) end )

The pin variable is assigned an integer which corresponds to GPIO2 pin of the ESP8266 module. Next, the ssid variable should be set to the SSID (name) of your wifi network. The check function iterates through list of ssids of all available wifi networks and searches for the specified network (your_wifi_nw_ssid in this case). If it finds one, it sets the GPIO2 pin to high, which makes the LED glow steady. If no matching ssid was found, it starts pwm (pulse-width modulation) on GPIO2 which makes the LED blink.

The first parameter in the call to pwm.setup is the index for GPIO2 team. The next parameter is frequency, in our script it is 1 Hz. The last parameter is duty cycle, whose max values is 1023. A value of 512 means 50% duty cycle. This means that for each second the pin will be high 50% time and low for remaining period. This makes the LED blink. The last line, starts a timer which runs our script repeatedly after every 5 seconds.

Writing the Lua script to ESP8266 module

As described earlier, we will use a python based program , called lua_tool to write our Lua script to the wifi module. To do this, first connect the module to a USB to UART bridge as shown below. The value of current limiting resistor should be greater than 470ohm in my opinion, I have used 1KOhm. Also, I am assuming that you have already burned the NodeMCU firmware to your wifi module. Please read my earlier article on ESP8266 for more details.

Connecting components.

So connect USB to UART bridge to USB port of your PC and serial port pins of the bridge to the ESP8266 as shown above. Now you will need to download Lua_tool and Python 2.7 (don’t use the latest version). Once you have installed Python, you can create a upload.bat file with following contents:

1
C:\Python27\python luatool.py --port COM4 --src wifi_detect.lua --dest main.lua --baud 9600

Make sure to specify the correct port, on my machine the bridge always creates COM4 serial port. Run the batch file. Assuming that it ran successfully, you can now execute your script by connecting to COM4 using Putty and simpy typing:

1
dofile('main.lua')    

If you want your program to run automatically on every boot, create a new file called detector_init.lua with following content:

1
2
3
print('init.lua ver 1.2')
wifi.setmode(wifi.STATION)
dofile("main.lua")

The modify the contents of batch file to:

1
2
C:\Python27\python luatool.py --port COM4 --src wifi_detect.lua --dest main.lua --baud 9600
C:\Python27\python luatool.py --port COM4 --src detector_init.lua --dest init.lua --baud 9600

The NodeMCU firmware executes the init.lua after ESP8266 restarts, adding the dofile(‘main.lua’) command executes main.lua file which contains our wifi detector script. Test the program by switching on/off your wifi router and by moving your ESP8266 far from your router. The LED should blink if your wifi network is found.

Final thoughts

This project was simple and fun. It required no special parts and allowed us to program and learn about the ESP8266 module. We actually ended up creating something useful with very effort. Do try it out and share your experience. Thanks for reading !

Quick introduction to the ESP8266 wifi module

IoT (Internet of things) is a hot topic these days. Simply put, IoT refers to a network of small interconnected devices that can communicate with each other.In last few years, we have seen steady flow of inexpensive and powerful programable embedded devices/boards. Arduino is an excellent example. These days every other gadget or device wants to have the ability to connect to internet wirelessly. In this article I will introduce you to the ESP8266 module which you can use in your next IoT inspired project.

What is a ESP8266 module ?

ESP8266 is an IC created by Espressif Systems, which offers wifi networking cabilities. A module, simply integrates this IC with some other components and becomes an easy to use component.In this article I have described the most common form of ESP8266 which comes as a 8 pin module.

Some of its most important features are:

  • Low cost (USD 2 -5 per piece !)
  • Works in normal as well as access point mode.
  • Low voltage operation (3.3v).
  • Serial interface to program/communicate with the module.
  • Has everything required for wifi networking (supply only power).
  • 64KBytes of instruction RAM, 96KBytes of data RAM and 64KBytes boot ROM.
  • Two GPIO pins (support PWM).
  • Ability to be programmed/flashed via serial interface.
  • Can be easily interfaced with a microcontroller or used standalone.
  • Choice of different firmwares.

Though the features of the module look impressive, those of the chip itself are even more amazing. It has lot more GPIO pins and features which are not fully exposed by this particular module.

Programming the ESP8266 module

This is where the module really shines. There are two popular firmwares it can support, Espressif firmware and NodeMCU . the Espressif firmware is AT commands based. Some modules come with this firmware pre-loaded. The NodeMCU firmware basically adds a Lua interpreter to the module. It then becomes possible to use NodeMCU’s rich API to send Lua scripts to the module over serial port. I find it simply amazing to be able to program such a small device using a language like Lua. This also gives me an opportunity to learn Lua. There is also Micro Python firmware for the module which I haven’t expored much.

Toolchains are available for loading different types of firmwares to the module. Loading firmware is done over serial port by connecting GPIO0 pin of the module to GND. In the next section I will be discussing procedure to load the NodeMCU firmware into ESP8266 module and using it.

Burning the NodeMCU firmware

You will need the following things:

  • USB to UART Serial converter (should support 3.3v)
  • A breadboard
  • Jumper cables
  • The latest version of NodeMCU firmware
  • NodeMCU flasher tool for windows (since I am using windows)
  • Putty for windows (or any other program that allows communicating with COM port)

To burn firmware into ESP9266 module, you need to connect it to your serial converter as shown below.

ESP8266 module pin layout

Important

Most USB to serial adapters support 5v. If you apply 5v to VCC pin of the module it will get damaged permanently. I can tell you from my experience :-) . So please ensure that your serial converter is 3.3v compatible. You can get a serial converter which supports both, 5v and 3.3v pretty cheap.

ESP8266 PINSerial converter PIN
VCCTo 3.3v PIN
GNDGND
TXRX
RXTX
CH_PD3.3v
GPIO 0GND

Next connect your serial converter to your PC’s USB port. In ‘Device Manager’ you should be able to see a new COM port as shown below. On my PC, my converter creates a COM4 port.

Virtual COM4 port created by USB to serial converter

Now unzip the ESP8266 flasher tool and run ‘ESP8266Flasher.exe’. Once the program starts click on the ‘Config’ tab and select the downloaded Node MCU firmware file.

Select the firmware file

Click on the ‘Operation’ tab , select the correct COM port and click on ‘Flash’ button. If everything was setup right, you should see a progressbar on the screen showing status of firmware update. The whole process can take around 2-3 minutes.

Clicking the 'Flash' button will burn the firmware to the module.

If nothing happens after clikcing ‘Flash’ , check the connections and re-confirm if selected COM port is correct. You can also change the baud rate and retry.
Once the firmware update is over, you can disconnect the ESP8266 module. Now disconnect GPIO0 from GND, and connect the module back to the serial converter as before. Start Putty.exe and select a ‘serial’ connection as shown below. Then click on ‘Open’. You should be able to see a terminal window with a ‘<’ prompt. Try following command:

1
2
majorVer,minorVer,devVer  = node.info();
print("Firmware: "..majorVer.."."..minorVer.."."..devVer)

Putty console showing Lua commands and output.

You should see the version number of the Node MCU firmware. This indicates that you have successfuly installed NodeMCU firmware on your ESP8266 module.

What next ?

What I really like the most about this module is it allows you to program in a higher-level language without much hassle. Burning firmware and interfacing is also super easy. In some ways I find it more interesting than Arduino (especially if I can get a module with more GPIO pins). Once you have the firmware installed, you should take out some time to visit the API documentation page and play with your module. The interactive Lua enviornment is a joy to work with, in my opinion. You can experiment and learn a lot.

You will quickly realize that when you disconnect the module, your programs are lost. In my next article, I will post information on saving Lua scripts directly to the module itself. Then it is possible to auto-run your Lua script everytime the module is switched on. Keep reading my website for more on this awesome device.

Creating a web application with CouchDB and AngularJS

It has been a long time I posted something on my website. I was busy learning about NoSQL , mainly CouchDB. So, in this article I show you how to create a basic portfolio management web application using CouchDB and AngularJS. Our application will allow the user to add entries to a stock portfolio. Each entry will capture name of the stock, quantity, price, transaction type (bought/sold) and the date when the transaction was carried out. Also a section on the page will show list of entries in the portfolio and allow deleting and selecting a particular entry (for editing).

What is so special about CouchDB ?

Difference between ordinary NoSQL and CouchDB

As you may have already read, many NoSQL databases store data in form of documents, so does CouchDB. What is different with CouchDB is it acts like a webserver for your application. Yes, a single server that acts like a database and application server. Using a framework like AngularJS and flexibility offered by schema-less design of CouchDB, a broad category of web applications can be created painlessly and fast. In this article, I cover the process of creating the Portfolio application with CouchDB.

What do we need.

We need the following things:

  • CouchDB installed on your local machine. Please visit their website to download binaries for your OS. I have used Windows in this tutorial.
  • NodeJS installed on your system.
  • AngularJS and Bootstrap (which we will pickup from CDN).
  • Some knowledge and experience with AngularJS/javascript and JSON (not mandatory).

Creating our database

Luckily, CouchDB comes with online administrative tool by default, know as Futon. You can access Futon by starting CouchDB and visiting following URL http://localhost:5984/_utils/. Using Futon, let us create our first CouchDB database, called ‘portfolioapp’. This should be very easy. Since this is a NoSQL database, we don’t have to worry about the schema. We can concentrate directly on creating our front-end/GUI.

Futon showing the newly created database.

Using CouchApp to scaffold our application

As you might have realized, we didn’t do much. All we did was created a empty database. In this section, we will use AngularJS and create a front-end (GUI). Here, I would like to introduce a tool called CouchApp. This is a very handy tool which can help you create folder structure for your application and add your application files (HTML, images, scripts) to CouchDB very easy. For this tutorial we are using the NodeJS based version of CouchApp. So, to install CoucApp do this:

1
2
3
4
C:\>cd  apps
C:\apps>npm install couchapp
C:\apps>couchapp boiler portfolioApp
C:\apps>cd portfolioApp

The first command simply navigates to a directory where we want to create the new application. Paths may vary on your system, so please remmeber that. Second command installs CouchApp to this directory.The third line creates a new directory ‘portfolioApp’ with boilerplate code our application. For some reasons, third line gives me an error on my machine (Windows), but the directory is created successfully. At this stage if you open C:\apps\portfolioApp\attachments directory, this is what it should look like:

Files added by CouchApp during scaffolding.

There is nothing particulary important about the directory structure. We can change it to our liking. Our application will consist of only two files, a HTML page and javascript file containing angular code. So we delete everything from this folder first. Download the zip file containing the code. copy the html file from the downloaded archive and paste in C:\apps\portfolioApp\attachments folder. Copy the scripts\portfolio.js file from the archive and paste in C:\apps\portfolioApp\attachments\scripts (you may have to create the scripts folder if you deleted it.)

One important thing which we need to do is create a CouchDB view which will show list of stocks in our portfolio. This is a one time activity, which we can be accomplish via Futon. We can also have CouchApp do this for us every time we deploy our application to CouchDB. Simply modify the C:\apps\portfolioApp\app.js file which was generated by CouchApp and change the line

1
ddoc.views = {};

to

1
2
3
4
5
6
7
ddoc.views = {
"show_all": {
"map": "function(doc) { emit(null, { '_rev':doc._rev,'_id':doc._id , 'stockName':doc.stockName," +
"'price': doc.price,'quantity':doc.quantity,'action': doc.action,'date': doc.date});}"
}
};

Interesting thing to note is we have not definied a schema anywhere in our database, yet we are creating a view which assumes and uses some properties from our documents. This is fine because our application makes sure that every document it creates will have these fields. Hence we have not done any checking or error handling in the view (which we should ideally do). Thats it, we are done. We have created a GUI to perform CRUD operations for our application.

Understanding the code

The front-end application (GUI) to consists of a HTML page and a javascript file. The total code is less than 200 lines (including HTML and javascript). AngularJS with its templating and MVVM(two-way binding) capabilities allows us to achieve client side functionality with very little code. In our javascript, we create a service, called ‘portfolioRepository’ to handle iteraction with CouchDB. This service contains methods to perform CRUD operations using the Rest API provided by CouchDB. All it does is make ajax calls to couchDB. One important this to note is we had created a CouchDB view to display list of portfolio items. For displaying the list on GUI we simply a send HTTP GET request to query the view and get results. Given below is code for the service:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
angular.module('portFolio')
.service("portfolioRepository", ['$http', function ($http) {
this.createItem = function (data) {
var req = {
method: 'PUT',
url: '/portfolioapp/' + data._id,
data: data,
};
return $http(req);
}
this.getAllItems = function () {
var req = {
method: 'GET',
url: '/portfolioapp/_design/app/_view/show_all'
};
return $http(req);
}
this.deleteItem = function (data) {
var req = {
method: 'DELETE',
url: '/portfolioapp/' + data._id + '?rev=' + data._rev
};
return $http(req);
}
}]);

Next, we created a controller called ‘portfolioController’ which is bound to our HTML template for display and entry of data. Explaining it in detail is beyhond the scope of this article, but if you have worked with any MVVM framework , you will get an idea. Give below is full code for our controller :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  angular.module('portFolio')
.controller('portfolioController', ["portfolioRepository","$filter", function (portfolioRepository,$filter) {
var ctr = this;
this.serverError = "";
function refreshData() {
portfolioRepository.getAllItems().success(function (d) {
ctr.portfolioItems = d.rows.map(function (o) { return o.value; })
});
ctr.currentItem = {};
}
refreshData();
this.saveItem = function () {
if (!this.currentItem.stockName) return;
if (!this.currentItem._id) {
this.currentItem._id = "client1" + ((new Date()).getTime()).toString();
portfolioRepository.createItem(this.currentItem)
.success(function () { refreshData(); })
.error(function () { ctr.serverError = "Unable to save." });
this.currentItem = {};
}
else {
portfolioRepository.createItem(this.currentItem)
.success(function () { refreshData(); })
.error(function () { ctr.serverError = "Unable to save." });
}
}
this.deleteItem = function (index) {
portfolioRepository.deleteItem(this.portfolioItems[index])
.success(function () { refreshData(); })
.error(function () { ctr.serverError = "Unable to delete." });
}
this.createNew = function () {
this.currentItem = {};
}
this.setSelectedItem = function (i) {
this.currentItem = angular.copy(this.portfolioItems[i]);
this.currentItem.date = $filter('date')(this.currentItem.date,"yyyy-MM-dd");
}
}]);

The portfolioApp/attachments/index.html is our view which binds to the controller and allows user to view/add/edit/delete items. You can have a look at the file, it contains angular expressions for binding and event handlers on user actions.

Uploading the application to CouchDB and running it

To upload the app to CouchDB using CouchApp simply execute:

1
C:\apps\portfolioApp>push app.js http://localhost:5984/portfolioapp

If everything went successful this is what you should be able to see using Futon. Our files are uploaded as special type of document with id ‘_design/app’ . Inside this documents all individual files are stored as fields.

You can now run the application by accessing http://localhost:5984/portfolioapp/\_design/app/index.html.

Try adding a couple of records like I did. You should be able to see those in our UI as well as inside CouchDB with Futon.

UI showing the two newly added records.

New records in the database.

Final thoughts

I hope this tutorial helps to illustrate how CouchDB can act as database and application server at the same time. This feature can be very useful for certain types of applications (like reporting, data entry, web based adminstrative tools, data driven websites, etc). Tools like Node.js and AngularJS have advocated standardization and consolidation of programing language and tools for creating web applications. CouchDB tries to take this a little further by trying to remove distinction between an application server and database server by binding them with popular and well adopted technologies like javascript, JSON and REST.

Free portable IDE (with autocompletion) for scripting in C#

I am sure many of you might have wished to have a portable C# compiler + editor combo which you can carry with you anywhere. Sometime ago, I had the same need. Unfortunately there exists no version of ‘Visual Studio’ which can be termed ‘light weight/portable’. Hence, I started researching for ways to create a portable compiler + editor setup which allowed me to write and run C# code without installing Visual Studio.

I was pleasantly surprised to know that my good old friend Notepad++ , with the help of CS-Script plug-in , allowed me to do what I wanted. Before I take you through the process of setting up Notepad++ and CS-Script for C# coding, I would like to thank everyone involved in making of these two piece of software, wholeheartedly.

First, download the zipped version of Notepad++ (ignore if you already have it). Unzip it to a folder. Then , from the main menu, select Plugins -> Plugin Manager -> CS-Script (C# autocompletion) Click install, and this should install the CS-Script plug-in.

Once you have the plug-in installed, you might want to create a keyboard shortcut to launch your C# programs. So, go to Settings -> Shortcut Mapper ... -> Plugins Command and select an appropriate key combination. In the below screen shot I have selected ‘ALT + 5’. Make sure the shortcut is unique and not already in use.

Now its time to try out your setup. But before that, I would recommend using a dark theme for C# editing for that ‘cool nerd’ effect. Go to Settings -> Style Configurator and select a theme of your choice. I have selected ‘Black board’ theme in the below screen shot.

Now we are almost done. Create a new file in Notepad++ . Then from ‘Language’ menu select C -> C#. Write your code and hit ‘ALT + 5’. If there are no errors , your code should run. You should be able to see the ‘Output Panel’ at the bottom of your screen. If not, goto Plugins -> CS-Script -> Output Panel. In the ‘Output Panel’, if ‘Intercept StdOut’ is checked, compilation errors will be shown. A very handy feature.

And yes, I almost missed the part about autocompletion. You definitely will appreciate the (somewhat limited) autocompletion support which the CS-Script plugin offers. Please do not expect this to be anywhere near what Visual Studio or other paid tools offer, but I think its a really useful. The size of the whole setup is less than 8 MB when zipped, which in my opinion is pretty awesome. I have used this setup to write many small programs in C# and have fun.

Before, I end this article, I would also like to mention Linqpad , which is wonderful tool for c# scripting and doing other wonderful things with databases. at the time of writing this article, autocompletion was not offered with free version of linqpad. however, using notepad++ has its own advantages. very soon, i am planning to write about using notepad++ as query tool for ms sql, so stay tuned. please feel free to share your experiences or suggestions by leaving comments below !

What can you do with Raspberry pi and Raspbmc OS


If you are new to ‘Raspberry pi‘ (a.k.a Raspi) like me, you might be wondering which operating system should you use with your Raspi. in this post, I will summarize what you can do with Raspbmc operating system . The Raspbmc OS is actually port of the famous XBMC project for Raspi. so here are some things you can accomplish

DIY Hometheater system

Yes, this is the primary objective of the Raspbmc system. It converts your RasPi into a full-blown home theater system with ample of connectivity options. You can:

  • Play music, full HD videos and image slideshows of content locally stored on your RasPi’s SD card or any storage device attached via USB to RasPi. For attaching USB hard disks you will need a powered USB hub .
  • You can play media from any UpnP/DLNA servers.
  • You can stream local media from RasPi to any compatible device via UpnP/DLNA.
  • You can use the built-in slideshow function to view photos. It is possible to play music in the background when viewing a slideshow.
  • You can see a very cool visualization during music playback.

Look Ma ! no seperate remote needed.

If you have a HDMI TV which supports CEC (I think most HDMI TVs do !) , your existing TV remote is more than sufficient for using most of the functionality offered by Raspbmc. Even text entry is supported via onscreen keyboard, though it is bit painful. From my personal experience, I am happy using a single remote for TV and RasPi. It is even possible to turn off your TV and RasPi using the remote. However, before doing that please make sure that your TV’s USB port is not powering the ‘Raspberry pi’. What I have observed is the TV switches off completely before RasPi can shutdown properly, which can lead to SD card curroption.

Make your TV smart

Yes, if you don’t own one of those ‘state of the art’ smart TVs then ‘Raspberry pi’ is here to make your TV smart and keep it that way for a long time to come. Raspbmc which actually is an XBMC port, benefits from hundreds of add-ons which extend functionality of XBMC. There are many add-on repositories from where you can download these. Think of a well-known media streaming site and the chances are it will have a XBMC plugin ( Youtube, Dailymotion, Ppandora, Shoutcast, Netflix…). This is probably most distinguishing feature of XBMC/Raspbmc.

Control it from your smartphone

There are few nice XBMC remote apps available for smartphones. They allow you to use your mobile phone as remote over wifi. Some apps even allow you to stream to your mobile device or download your files.

Filesharing the easy way

If you want to transfer files between any device and Raspbmc, all you need is SFTP client on your device. I strongly recommend this method to transfer files, instead of using mobile apps or other programs. There are many SFTP clients available for smartphones, which make it super easy to transfer videos from your mobile to ‘Raspberry pi’.

Install custom software (like BitTorrentSync )

The biggest advantage of using an open hardware and software is, it allows for limitmess customization. Since Raspbmc is a full-fledged linux system, it allows you to install additional software and do cool things. For example, you may want to use a software like BitTorrentSync to keep your media content in sync across devices. You can also download and themes to personalize your XBMC experience.

Once you start using Raspbmc, you will quickly realize why the XBMC project has received so much appreciation and respect among home theater lovers. I will strongly recommend ‘Raspberry pi’ + Raspbmc to anyone who is thinking of buying a smart TV. I would rather suggest spending money saved on getting a larger display or better music system.

When to use knockout.js and when not to for ASP.NET developers

Recently javascript libraries like knockout.js have received lot of attention. Beyond any doubt, knockout.js is a really wonderful little library which allows you do MVVM inside browser using javascript. Now let us come to the question,

Do I really need to us knockout.js in my ASP.NET (MVC/ WebAPI) application ?.

My personal response to this question would be as follows:

Do you really need MVVM or you can live with form-post model ?

Most ASP.NET developers are fairly familar with form-post model. This approach relies on browser (or javascript to some extent) to serilaize a form and post it. If you are sending data to a ASP.NET MVC application, there are no problems with this. However, if you are posting to WebAPI (or any other json based service), form-post model may not be suitable. In such scenarios, you can consider using knockout.js.

Form-post Model

MVVM style design

Do you really want your HTML to be generated on client ?

This again, is a big factor. If you are using ASP.NET MVC, then you already have capability of generating HTML at server side. You could well leverage it. If your entire application (server-side) is done using WebAPI, then using knockout.js is a good option. This is also true for web applications which are designed as RESTful services which are created to work with JSON/XML. No matter what javascript framework you use, generating HTML dynamically at client side and achieving binding to in-memory javascript object will have some performance overhead for the browser. But by doing so, you may be saving roundtrips to the server, which can compensate for any performance loss. I believe, its a tough decision to be made and must depend on circumstances.

Is your UI suited for MVVM ?

In my opinion, UIs with repeating sections , with supportfor inline addition and deletion are best suited for MVVM. A grid with inline add/delete functionality is a good example of this. Many a times, each row of the grid is collection of controls or a sub-grid itself. The form-post model will work in such scenarios, but it is very painful to manipulate DOM when user clicks on Add or Delete. In such scenarios, using knockout.js or MVVM is recommended in my opinion. The ‘automatic UI refresh’ is another great feature of knockout.js which can save you from writing (and testing!) lengthy javscript code.

What about the ‘learning curve’ ?

There is a slight learning curve when using knockout.js. A bigger problem is ‘getting stuck while doing something which is not readily supported’. When we encounter such a problem, it is extremely important to handle it in a proper way. Using ‘hacks’ to deal with such scenarios can cause un-expected behaviour when running inside untested enviornment (different browser, different version of *.js). In short, try to create more than one POC , before you take decision to use knockout.js on a large scale.

My conclusion

In short, if form-post model allows you to achieve something without writing lots of javascript code, go for it. However, if you find yourself writing lots (read hundreds of lines) of javascript code to dynamically generate HTML on browser or interactively refresh UI sections based on user inputs, you should probably switch to knockout.js (or similar tool).

Entity Framework Seperating Entities from Data Layer

Desired seperation of layers when using Entity Framework

The ‘ADO.NET Entity Framework’ introduces many new features which were not available with ‘LINQ to SQL’. One of the most important feature is it allows for ‘Code First’ approach. This approach has following characteristics:

  • Entities matching the domain model are created first and not the database.
  • DbContext is typcially handwritten and it can take care of creating/accessing database for us.

However, one important aspect is generally overlooked. What ‘Code First’ approach allows us to do is, it allows for using normal POCOs (Plain Old CLR Objects) as ‘Entities’. An extension of this feature is that your ‘Entities’ and ‘DBContext’ can reside in different layers. This is extremely useful from reusability and unit-testability standpoint. In the below code notice that the Entities and DBContext lie in different namespaces (and projects, however the DBContext needs to have a reference to Entities project though).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
namespace BusinessEntities
{
public partial class Student
{
public Student()
{
this.ContactInfoes = new HashSet<ContactInfo>();
}

public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public Nullable<System.DateTime> DateOfBirth { get; set; }

public virtual ICollection<ContactInfo> ContactInfoes { get; set; }
}

public partial class ContactInfo
{
public int Id { get; set; }
public int StudentId { get; set; }
public string AddressLine1 { get; set; }
public string AddressLine2 { get; set; }
public string Zip { get; set; }
public string PhoneNumber { get; set; }

public virtual Student Student { get; set; }
}
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
namespace Data
{

public partial class MyDBContext : DbContext
{
public MyDBContext() : base("MyDBContext") { }

public DbSet<ContactInfo> ContactInfoes { get; set; }
public DbSet<Student> Students { get; set; }

public virtual ObjectResult<GetStudent_Result> GetStudent(Nullable<int> id)
{
var idParameter = id.HasValue ?
new ObjectParameter("id", id) :
new ObjectParameter("id", typeof(int));

return ((IObjectContextAdapter)this).ObjectContext.ExecuteFunction<GetStudent_Result>("GetStudent", idParameter);
}
}
}

This has the following advantages:

  • Repository can only be present in ‘Data Layer (or project)’ and it only needs reference of layer containing ‘Entities’
  • Entities become decoupled with Data Layer , they can be compiled as separate assembly and reused in any way you like.
  • If you feel like switching from Entity Framework to something else, you could still use your Entities.
  • Since ‘Data Layer’ is cleanly decoupled, you can mock it easily.

Can the seperation between Data Layer-Entities be achieved in ‘Database First’ approach?

For many types of projects it would make sense to use ‘Database First’ approach. The problem is, by default all the code (POCOs + DBContext) gets generated in same project/namespaces as the *.edmx file. I couldn’t find an easy way to fix this. Luckily, I came across this EntityFramework Reverse POCO Generator extension. Once you install this, it creates *.tt files for every *.edmx you create. One of the *.tt file creates all entity classes for you while another creates ‘DBContext’. You can modify the *.tt files to fix namespaces or simply copy the generate *.cs files to desired projects and change namespaces. I find this particular extension very useful.

Things to remember !

If you are not familiar with using ‘Attach’ method in EntityFramework ( ‘DBContext.MyEntities.Attach(myObject)’), you may find yourself using it more frequently. This is because except DataLayer, all other layers view your entities as POCOs. You can only instantiate these classes with ‘new’ keyword, fill in values and send those to repository/data layer.

Ashish's Fun Board for Arduino and Freeduino

After playing with my Freeduino kit for some time, I was surprised with number of things my Freeduino board could handle. So I decided to put all my components which I received with the kit permenantely on a single PCB and say good bye to my bread board. My goals were to:

  • Create a low cost board which incoprorates an LCD, temperature sensor, RGB led and buzzer.
  • These are more than enough components for begineers to start writing some very interesting programs.
  • It should be easy to construct for amatures like me!
  • All features/components should be usable seperately.This increases re-usability of the board

The result is here:

What you need

If you are wondering why I didn’t try to create a sheild, let me confess, that my soldering skills are too poor to do anything of that sort. Also, attaching the LCD on a sheild would have been problematic. I have used some of the most common components to create this board. Please feel free to use your own judegement while picking up components. Many ompoents are part of that generally come along with kits. You may have to change the schematics based on your selection: I have reffered to Arduino or Freeduino as ‘main board’ in below section. All connections between main board and my board have been made using jumper wires.

Disclaimer

Author is not responsible for any damage/harm of any kind which may be caused by following this article. This article is just for guidance. Follow it at your own risk! Also, please take adequate precautions while handling soldering iron and power sources. I make no claims that the schematics described below are perfect and fool-proof. Connecting electronic components incorrectly can cause damage to the components as well as your main board.

General Saftey Instructions

General Saftey Instructions: Connecting electronic components incorrectly can cause damage to the components as well as your main board. Also, please take adequate precautions while handling soldering iron and power sources. I make no claims that the schematics described below are perfect and fool-proof.

List of components:

  • 16x2 LCD (compatible with the Hitachi HD44780 driver)
  • Break away headers (female in case your Arduino or Freeuino board has male connectors, else male)
  • Jumper wires x 25 (male if you used female headers, else female)
  • RGB LED (The one I used is common anode).
  • 270 omh resistors x 3
  • Buzzer and suitable resistor for connecting in series
  • 1K ohm resistor
  • Pot 3296 or smaller range one. (http://www.bourns.com/pdfs/3296.pdf)
  • Normal Soldering stuff.

Schematics

Funboard ConnectorWhere to connect on Main BoardComments
H1D10Cathode for Red color (via current limiting R1 = 270 Ohm)
H3D9Cathode for Green color (via current limiting R2 = 270 Ohm)
H5D6Cathode for Blue color (via current limiting R2 = 270 Ohm)
H7A2Analog 2 for reading Pot. Note that one end of POT is soldered to +5V rail on funboard and another to GND. I have used a current limiting resistor of 1K Ohm while connecting the Pot to play safe.
H8D5+ pin of Buzzer.
P1H12GND rail of funboard.
P2H9VCC rail of funboard
P3GND (near Pin 13)Grounded by connecting directly to Pin13 of mainboard.
P4D12 
P5GND1 (near 5V pin)Grounded by connecting to first GND pin near +5V pin on mainboard.
P6D11 
P11D8 
P12D4 
P13D7 
P14D2 
H9P2Second pin on LCD as shown in diagram.
H10+Vc of LM35LM35 is connected to board via 3 jumper wires. Make sure to connect it properly. Reversing pins can cause heating and totally damage the sensor in no time.
H115V5V pin from mainboard is connected to header H11. This enables H10 and H9 to source 5V . (H11,H10 & H9 form kind of 5V rail.)
H12P1First pin of LCD.
H13GND of  LM35 
H14  
Vout of LM35A0Middle pin of LM35 is directly connected to A0 of mainboard via jumper wire.

If you see properly, I have tried to make the most of the pins on Freeduino board. Typically LCD is interfaced on[12, 11, 5, 4, 3, 2] , I interfaced it on [12, 11, 8, 4, 7, 2] to free two PWM pins, one of which, I’ll use for buzzer.Also note that, I have basically tied the LCD to the PCB using holes present at side of the LCD and unused soldering pads. Let me know if you know of a better way. I have not used a POT while interfacing the LCD. Pin 3 is directly grounded and it seems to work just fine . The value of resistor connected in series with the Buzzer was experimentally determined. Select a resistor using which your buzzer makes sweetest and loudest sound.

Test program

Here is the link to “all systems test” program. The above youtube video shows my board running this same program. It is not that well written but it works!

What can you do with it !

At first look it the board looks very basic. However, if you look carefully, you will realize that there are many things you can try with this board. For example:

  • There are scores of things you can do with the LCD alone. For example, I put my entire resume on LCD and created a video!
  • Blinking Red, Green and Blue color. Controlling intensity of each LED via PWM and creating dynamic shades of color
  • Thermometer by reading the temperature sensor
  • Indicating temperature level via LEDs
  • Playing ringtones/notes using the buzzer. Check out my tutorial
  • Creating animated display using LEDs and buzzer
  • The Pot can be used as analog switch. For example, you can write many small programs and select which one to execute using the Pot.
  • The Temperature sensor can be easily replaced by any other sensor of its kind

Improving upon the design

It would be great if readers can send in their feedback. It is high time that some one creates low cost open source sheild which serves as demonstration board for Freeduino and Arduino. It may be possible to create a sheild with SMT components which includes:

  • More LEDs.
  • More sensors.
  • Larger display.
  • Switches.

Such a thing if priced righ, would go a long way in making Arduino and Freeduino popular.

References

http://arduino.cc/en/Tutorial/LiquidCrystal http://arduino.cc/playground/Main/LM35HigherResolution