Raspberry Pi: The beginning

Aim: Accessing Raspberry Pi without spending bucks for an extra monitor, keyboard, and mouse.

Apparatus:

• Personal Computer (Ubuntu)
• Raspberry Pi 3 Model B
• Ethernet Cable
• 4 GB Micro SD card (Raspbian Stretch Lite pre-installed)
• USB Power Adaptor

Step 1: Connecting Raspberry Pi with computer via Ethernet cable

Enable the method Shared to other computers in IPv4 settings for the wired connection, under network settings. The process is shown in the graphical image below:

Connecting Pi with Computer via Ethernet Cable

 

Step 2: Knowing the IP address assigned to Pi after wired connection established

Execute the following command in order to get the wired network information, like first 24-bit of IPv4 address which should help to search the Pi’s address, and the subnet mask.

 ifconfig  

As shown below, the first 24-bit of IPv4 addressing are 10.42.0, and subnet mask is 255.255.255.0.

Analyzing inet addr and subnet mask

To search the device (Pi) connected to the wired network, execute the following command.

 nmap 10.42.0/24  

Here, 24 depicts the first 24 preceding 1s when subnet mask converted into binary.

As shown below, the IP address assigned to Raspberry Pi is 10.42.0.242.

Assigned IP address: 10.42.0.242

Step 3: Enabling SSH

The fresh install of Raspbian Stretch Lite should not have an enabled SSH service. To enable SSH on your Pi, simply create a file named ssh in boot partition using a micro SD card reader, insert the card again in your Pi, and then reboot. And lo! The SSH is enabled on your Pi.

Enabling SSH on Raspberry Pi

Execute the following command to login into your Pi:

 ssh pi@10.42.0.242  

Default user for Raspberry Pi is pi with password raspberry. Logging into Pi for the first time, is shown below:

Logging into Pi through SSH

Step 4: Enabling VNC Server

Now we can enable the VNC Server on Raspberry Pi, after remote login.

Firstly, execute the following command, in order to update the package archives’ list:

 sudo apt-get update  

Execute the following command, which should open a Raspberry Pi configuration window in your Ubuntu terminal, as shown below:

 sudo raspi-config  

Raspberry Pi Software Configuration Tool

Select Interfacing Options >> P3 VNC, and then agree to enable VNC Server on Raspberry Pi. This should start download, and install of required packages for VNC Server on your Pi.

Interfacing Options

Enable/Disable VNC

You should get the following message, once VNC Server is enabled.

VNC enabled after package installation

To view the status of vnc-server in CLI, execute the following command:

 systemctl status vncserver-x11-serviced.service  

Step 5: Accessing Pi’s GUI through VNC application

Now, it is time to access your Pi using Virtual Network Computing.

A pre-installed VNC Viewer is required on your Ubuntu computer.

Open VNC Viewer, and add a new connection. Note that VNC Server’s default port is 5900. Therefore, it is a good practice to mention the port number after IP address, as shown below:

Adding New VNC Connection

Authenticate with the default user name, and password of Raspberry Pi, as shown below:

Logging into Raspberry Pi

You will see a blank screen, because Raspbian Stretch Lite image is shipped without GUI. So execute the following command to install Raspberry Pi Desktop (RPD) GUI:

 sudo apt-get install raspberrypi-ui-mods  

Restart your Pi by executing the following command:

 sudo init 6  

Try again to login into your Pi using VNC Viewer, and you will view the Raspberry Pi Desktop.

Raspberry Pi Desktop

Now you can access your Pi using your computer with the help of VNC, without buying an extra hardware.

Creating custom module in Odoo 10

Odoo is an open source ERP platform which is powerful, and easy to customize. In this tutorial, we will learn how to create your own module from scratch in Odoo 10.

Step 1: Download Odoo 10 from GitHub repository

                   Click here to clone odoo

Step 2: Configure PyDev in your Eclipse IDE

Following are the steps:

• Open your Eclipse editor, and in the window's title bar, go to Help > Install New Software...
• Add PyDev repository typing the following link: http://pydev.org
• Then follow the steps as mentioned in the wizard and complete the PyDev configuration

Step 3: Create a new PyDev project in Eclipse IDE

Follow these steps to create a new PyDev project:

Step 3.1: In Eclipse title bar, go to File > New > PyDev Project

Step 3.2: After creating a project, go to File > Import... and import the downloaded Odoo resources in your project

Step 3.3: Your new PyDev project should look as shown below:

Step 4: Download the below listed additional packages on your Ubuntu 16.04 from your terminal

sudo apt-get install python-dateutil python-feedparser python-gdata python-ldap python-libxslt1 python-lxml python-mako python-openid python-psycopg2 python-pybabel python-pychart python-pydot python-pyparsing python-reportlab python-simplejson python-tz python-vatnumber python-vobject python-webdav python-werkzeug python-xlwt python-yaml python-zsi python-docutils python-psutil wget python-unittest2 python-mock python-jinja2 python-dev libpq-dev poppler-utils python-pdftools antiword python-setuptools python-pybabel python-decorator python-requests python-pyPdf python-passlib node-less  

Step 5: Install PostgreSQL database on your Ubuntu 16.04 and create the role of the user with the name same as your computer system's user name

linuxbeginner@linuxbeginner-Inspiron-5520:~$ sudo apt-get install postgresql  

linuxbeginner@linuxbeginner-Inspiron-5520:~$ sudo su postgres  

postgres@linuxbeginner-Inspiron-5520:/home/linuxbeginner$ createuser -d linuxbeginner  

Step 6: Running Odoo 10 for the first time on localhost

Step 6.1: Right click after selecting odoo-bin, go to Run As > Run Configurations... and in the Arguments tab, give -s which automatically generates the config file in your computer's home directory

Step 6.2: Click Apply button and then Run button

Step 6.3: Type the following URL in web browser: http://localhost:8069/web

Here 8069 is the default port where the odoo services run, you can manually change the port in the automatically generated config file named .odoorc in your home directory.

Step 6.4: Create a new database as shown below where you will be able to install your custom odoo module

The above steps were the basic How Tos of running Odoo 10 on your computer system. Now the steps to create your own Odoo module begins.

Step 7: Create your customized addons directory in odoo_v10 project and add its absolute path in .odoorc config file in home directory under addons_path which are comma(,) separated

My customized addons folder's absolute path is as follows:

 /home/linuxbeginner/Documents/eclipse/odoo_v10/test-addons  

Step 8: Create your customized module in your addons folder with __manifest__.py and __init__.py file into it

You can get the brief idea of modules, manifest files, and Python packages by viewing the source code of existing odoo modules.

__manifest__.py file source code:

 {  
   'name' : 'My First Odoo Module',  
   'version' : '1.0',  
   'summary': 'Understanding Odoo Development',  
   'sequence': 99,  
   'description': """  
 About  
 ====================  
 The following module is created for blog post.  
   """,  
   'category': 'Tutorial',  
   'website': 'techcontributors.blogspot.com',  
   'depends' : ['base'],  
   'installable': True,  
   'application': True,  
   'auto_install': False,  
 }  

Manifest file is a Python dictionary which has key-value pairs holding the information about the module, its dependencies, as well as its resources. Looking at the manifest files of in-built Odoo modules, you will get an in-depth exposure to manifest files.

Step 9: Go to web browser and click 'Activate the developer mode' available in Settings tab and click 'Update Apps List' in Apps

You can see your module in Odoo after searching it with the name given. You can see the information being displayed is same as the one you gave in your manifest file. Now your custom Odoo module is ready for install.

Leisure Activity: Python3 welcomes upcoming new year..!

Code:

 '''  
 Created on 28-Dec-2016  
   
 @author: linuxbeginner  
 '''  
 from time import sleep  
   
 def anim():  
   sleep(0.10)  
   
 welcome = ['W','E','L','C','O','M','E']  
 twok = ['T','w','o','*','*','T','h','o','u','s','a','n','d']  
 seventeen = ['S','e','v','e','n','t','e','e','n']  
 welcome_counter = 0  
 twok_counter = 0  
 seventeen_counter = 0  
   
 for i in range(0,5):  
   for sp in range(0,7):  
     print(' ',end="")  
   for j in range(4,i,-1):  
     print(' ',end="")  
   for k in range(0,i):  
     if i == 4:  
       print('{0}'.format(welcome[welcome_counter]),end="")  
       welcome_counter += 1  
     else:  
       print('*',end="")  
   for l in range(1,i):  
     if i == 4:  
       print('{0}'.format(welcome[welcome_counter]),end="")  
       welcome_counter += 1  
     else:  
       print('*',end="")  
   print(end="\n")  
   anim()  
     
 for i in range (0,3):  
   for j in range(0,i):  
     print(' ',end="")  
   for k in range(3,i,-1):  
     print('*',end="")  
   for l in range(0,15):  
     if i == 0 and l in range(1,14):  
       print('{0}'.format(twok[twok_counter]),end="")  
       twok_counter += 1  
     elif i == 1 and l in range(3,12):  
       print('{0}'.format(seventeen[seventeen_counter]),end="")  
       seventeen_counter += 1  
     else:  
       print('*',end="")  
   for m in range(3,i,-1):  
     print('*',end="")  
   print(end="\n")  
   anim()  
     
 print(end="\n")  

Output is shown in the following GIF image:

Leisure Activity: Python3 wishes a good bye to 2016..!

Code:

 '''  
 Created on 12-Dec-2016  
   
 @author: linuxbeginner  
 '''  
 bye = ['B','Y','E']  
 two = ['T','W','O']  
 thousand = ['T','H','O','U','S','A','N','D']  
 sixteen = ['S','I','X','T','E','E','N']  
 num = ['2','0','1','6']  
 two_counter = 0  
 thousand_counter = 0  
 sixteen_counter = 0  
 num_counter = 0  
   
 print(end="\n")  
 for i in range(0,13):  
   for j in range(13,i,-1):  
     print(' ',end="")  
   for k in range(0,i+1):  
     if i == 0:  
       print('{0} '.format(bye[0]),end="")  
     elif i == 1:  
       print('{0} '.format(bye[1]),end="")  
     elif i == 2 and (k == 0 or k == 2):  
       print('{0} '.format(bye[2]),end="")  
     elif i == 4 and (k in range(1,4)):  
       print('{0} '.format(two[two_counter]),end="")  
       two_counter += 1  
     elif i == 7:  
       print('{0} '.format(thousand[thousand_counter]),end="")  
       thousand_counter += 1  
     elif i == 10 and (k in range(2,9)):  
       print('{0} '.format(sixteen[sixteen_counter]),end="")  
       sixteen_counter += 1  
     elif (i == 12 and (k in range(2,6))) or (i == 12 and (k in range(7,11))):  
       print('{0} '.format(num[num_counter]),end="")  
       num_counter += 1  
       if k == 5:  
         num_counter = 0  
     else:  
       print('* ',end="")  
   print(end="\n")  
 print(end="\n")  

Output:

Recursion and File Handling demonstration using Python

The following program of Fibonacci series computes using recursive function and saves the output to a text file. The code is as shown below:

 # A program demonstrating recursion and file handling  
   
 x = 0 ; y = 1   
   
 def fibonacci(x,y,lim):  
      if lim != 0:  
           z = x + y  
           f.write('{0} '.format(z))  
           print('{0}'.format(z),end="\t")  
           x = y  
           y = z  
           lim -= 1  
           fibonacci(x,y,lim)  
        
 lim = int(input('Enter the size of series:'))            
 f = open('output.txt','w')  
 fibonacci(x,y,lim)  
 f.close()  
 print(end="\n")  

The output is shown in the following GIF image:

Creating Foreign Key in phpMyAdmin

Step 1: Create two tables tbl_course_detail and tbl_student_detail in the database student as per the following schemas shown below:

tbl_course_detail

Name	Type	Constraint
Course_ID	Varchar(10)	Primary Key
Course_name	Varchar(20)	Not Null
Credit	Int(1)	Not Null
Semester_type	Varchar(15)	Not Null

tbl_student_detail

Name	Type	Constraint
Enr_No	Int(12)	Primary Key
Name	Varchar(30)	Not Null
City	Varchar(20)	Not Null
Course_ID	Varchar(10)	Not Null

Our aim is to import the Primary Key Course_ID of table tbl_course_detail as a Foreign Key in the table tbl_student_detail.

Step 2: Open the "Structure" of tbl_student_detail and click the "Relation view" button.

Step 3: Select 'tbl_course_detail' from the drop-down beside Course_ID. You will automatically get Course_ID in the second field. Click the "Save" button.

You have successfully created the Foreign Key in table tbl_student_detail. You can check by inserting the values. The entire process is shown in the GIF image below:

Recreational Coding with HTML (Leisure Activity)

Code:

 <!-----------------------------------------------  
 Author: Qaidjohar  
 Date Created: Nov 7 2016  
 Logical Comment: Leisure Activity  
 ------------------------------------------------>  
   
 <html>  
   <head>  
     <title>Mario</title>  
     <style type="text/css">  
       *  
       {  
         margin: 0px;  
         padding: 0px;  
       }  
       .main  
       {  
         width:1000px;  
         margin-left: 183px;  
       }  
       .header  
       {  
         background-color: greenyellow;  
         height: 50px;  
       }  
       .container  
       {  
         background-color: darkseagreen;  
       }  
       .footer  
       {  
         background-color: black;  
         height: 25px;  
       }  
       td  
       {  
         height: 20px;  
         width: 20px;  
         background-color: darkseagreen;  
       }  
       h1  
       {  
         text-align: center;  
         color: green;  
         font-style: oblique;  
         line-height: 50px;  
       }  
       h4  
       {  
         color: yellow;  
         text-align: center;  
         line-height: 25px;  
       }  
       .mario  
       {  
         animation: mario-anim 10s infinite;  
       }  
       .red  
       {  
         background-color: red;  
       }  
       .yellow  
       {  
         background-color: yellow;  
       }  
       .brown  
       {  
         background-color: saddlebrown;  
       }  
       .black  
       {  
         background-color: black;  
       }  
       .blue  
       {  
         background-color: blue;  
       }  
       @keyframes mario-anim  
       {  
         50%{margin-left: 720px;}  
         100%{margin-left: 0px;}  
       }  
     </style>  
   </head>  
     
   <body>  
     <div class="main">  
       <div class="header">  
         <h1>Recreational Coding with HTML</h1>  
       </div>  
       <div class="container">  
         <div class="mario">  
           <table cellspacing="0" cellpadding="0">  
             <!-- 1 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class=""></td> <!-- 4 -->  
               <td class=""></td> <!-- 5 -->  
               <td class=""></td> <!-- 6 -->  
               <td class=""></td> <!-- 7 -->  
               <td class=""></td> <!-- 8 -->  
               <td class=""></td> <!-- 9 -->  
               <td class=""></td> <!-- 10 -->  
               <td class=""></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 2 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class=""></td> <!-- 4 -->  
               <td class="red"></td> <!-- 5 -->  
               <td class="red"></td> <!-- 6 -->  
               <td class="red"></td> <!-- 7 -->  
               <td class="red"></td> <!-- 8 -->  
               <td class="red"></td> <!-- 9 -->  
               <td class=""></td> <!-- 10 -->  
               <td class=""></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 3 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class="red"></td> <!-- 4 -->  
               <td class="red"></td> <!-- 5 -->  
               <td class="red"></td> <!-- 6 -->  
               <td class="red"></td> <!-- 7 -->  
               <td class="red"></td> <!-- 8 -->  
               <td class="red"></td> <!-- 9 -->  
               <td class="red"></td> <!-- 10 -->  
               <td class="red"></td> <!-- 11 -->  
               <td class="red"></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 4 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class="brown"></td> <!-- 4 -->  
               <td class="brown"></td> <!-- 5 -->  
               <td class="brown"></td> <!-- 6 -->  
               <td class="yellow"></td> <!-- 7 -->  
               <td class="yellow"></td> <!-- 8 -->  
               <td class="black"></td> <!-- 9 -->  
               <td class="yellow"></td> <!-- 10 -->  
               <td class=""></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 5 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class="brown"></td> <!-- 3 -->  
               <td class="yellow"></td> <!-- 4 -->  
               <td class="brown"></td> <!-- 5 -->  
               <td class="yellow"></td> <!-- 6 -->  
               <td class="yellow"></td> <!-- 7 -->  
               <td class="yellow"></td> <!-- 8 -->  
               <td class="black"></td> <!-- 9 -->  
               <td class="yellow"></td> <!-- 10 -->  
               <td class="yellow"></td> <!-- 11 -->  
               <td class="yellow"></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 6 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class="brown"></td> <!-- 3 -->  
               <td class="yellow"></td> <!-- 4 -->  
               <td class="brown"></td> <!-- 5 -->  
               <td class="brown"></td> <!-- 6 -->  
               <td class="yellow"></td> <!-- 7 -->  
               <td class="yellow"></td> <!-- 8 -->  
               <td class="yellow"></td> <!-- 9 -->  
               <td class="black"></td> <!-- 10 -->  
               <td class="yellow"></td> <!-- 11 -->  
               <td class="yellow"></td> <!-- 12 -->  
               <td class="yellow"></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 7 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class="brown"></td> <!-- 4 -->  
               <td class="yellow"></td> <!-- 5 -->  
               <td class="yellow"></td> <!-- 6 -->  
               <td class="yellow"></td> <!-- 7 -->  
               <td class="yellow"></td> <!-- 8 -->  
               <td class="black"></td> <!-- 9 -->  
               <td class="black"></td> <!-- 10 -->  
               <td class="black"></td> <!-- 11 -->  
               <td class="black"></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 8 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class=""></td> <!-- 4 -->  
               <td class="yellow"></td> <!-- 5 -->  
               <td class="yellow"></td> <!-- 6 -->  
               <td class="yellow"></td> <!-- 7 -->  
               <td class="yellow"></td> <!-- 8 -->  
               <td class="yellow"></td> <!-- 9 -->  
               <td class="yellow"></td> <!-- 10 -->  
               <td class=""></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 9 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class="red"></td> <!-- 4 -->  
               <td class="red"></td> <!-- 5 -->  
               <td class="blue"></td> <!-- 6 -->  
               <td class="red"></td> <!-- 7 -->  
               <td class="red"></td> <!-- 8 -->  
               <td class="blue"></td> <!-- 9 -->  
               <td class="red"></td> <!-- 10 -->  
               <td class="red"></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 10 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class="red"></td> <!-- 3 -->  
               <td class="red"></td> <!-- 4 -->  
               <td class="red"></td> <!-- 5 -->  
               <td class="blue"></td> <!-- 6 -->  
               <td class="red"></td> <!-- 7 -->  
               <td class="red"></td> <!-- 8 -->  
               <td class="blue"></td> <!-- 9 -->  
               <td class="red"></td> <!-- 10 -->  
               <td class="red"></td> <!-- 11 -->  
               <td class="red"></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 11 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class="red"></td> <!-- 2 -->  
               <td class="red"></td> <!-- 3 -->  
               <td class="red"></td> <!-- 4 -->  
               <td class="red"></td> <!-- 5 -->  
               <td class="blue"></td> <!-- 6 -->  
               <td class="blue"></td> <!-- 7 -->  
               <td class="blue"></td> <!-- 8 -->  
               <td class="blue"></td> <!-- 9 -->  
               <td class="red"></td> <!-- 10 -->  
               <td class="red"></td> <!-- 11 -->  
               <td class="red"></td> <!-- 12 -->  
               <td class="red"></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 12 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class="yellow"></td> <!-- 2 -->  
               <td class="yellow"></td> <!-- 3 -->  
               <td class="red"></td> <!-- 4 -->  
               <td class="blue"></td> <!-- 5 -->  
               <td class="yellow"></td> <!-- 6 -->  
               <td class="blue"></td> <!-- 7 -->  
               <td class="blue"></td> <!-- 8 -->  
               <td class="yellow"></td> <!-- 9 -->  
               <td class="blue"></td> <!-- 10 -->  
               <td class="red"></td> <!-- 11 -->  
               <td class="yellow"></td> <!-- 12 -->  
               <td class="yellow"></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 13 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class="yellow"></td> <!-- 2 -->  
               <td class="yellow"></td> <!-- 3 -->  
               <td class="yellow"></td> <!-- 4 -->  
               <td class="blue"></td> <!-- 5 -->  
               <td class="blue"></td> <!-- 6 -->  
               <td class="blue"></td> <!-- 7 -->  
               <td class="blue"></td> <!-- 8 -->  
               <td class="blue"></td> <!-- 9 -->  
               <td class="blue"></td> <!-- 10 -->  
               <td class="yellow"></td> <!-- 11 -->  
               <td class="yellow"></td> <!-- 12 -->  
               <td class="yellow"></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 14 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class="yellow"></td> <!-- 2 -->  
               <td class="yellow"></td> <!-- 3 -->  
               <td class="blue"></td> <!-- 4 -->  
               <td class="blue"></td> <!-- 5 -->  
               <td class="blue"></td> <!-- 6 -->  
               <td class="blue"></td> <!-- 7 -->  
               <td class="blue"></td> <!-- 8 -->  
               <td class="blue"></td> <!-- 9 -->  
               <td class="blue"></td> <!-- 10 -->  
               <td class="blue"></td> <!-- 11 -->  
               <td class="yellow"></td> <!-- 12 -->  
               <td class="yellow"></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 15 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class="blue"></td> <!-- 4 -->  
               <td class="blue"></td> <!-- 5 -->  
               <td class="blue"></td> <!-- 6 -->  
               <td class=""></td> <!-- 7 -->  
               <td class=""></td> <!-- 8 -->  
               <td class="blue"></td> <!-- 9 -->  
               <td class="blue"></td> <!-- 10 -->  
               <td class="blue"></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 16 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class="brown"></td> <!-- 3 -->  
               <td class="brown"></td> <!-- 4 -->  
               <td class="brown"></td> <!-- 5 -->  
               <td class=""></td> <!-- 6 -->  
               <td class=""></td> <!-- 7 -->  
               <td class=""></td> <!-- 8 -->  
               <td class=""></td> <!-- 9 -->  
               <td class="brown"></td> <!-- 10 -->  
               <td class="brown"></td> <!-- 11 -->  
               <td class="brown"></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 17 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class="brown"></td> <!-- 2 -->  
               <td class="brown"></td> <!-- 3 -->  
               <td class="brown"></td> <!-- 4 -->  
               <td class="brown"></td> <!-- 5 -->  
               <td class=""></td> <!-- 6 -->  
               <td class=""></td> <!-- 7 -->  
               <td class=""></td> <!-- 8 -->  
               <td class=""></td> <!-- 9 -->  
               <td class="brown"></td> <!-- 10 -->  
               <td class="brown"></td> <!-- 11 -->  
               <td class="brown"></td> <!-- 12 -->  
               <td class="brown"></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
   
             <!-- 18 -->  
             <tr>  
               <td class=""></td> <!-- 1 -->  
               <td class=""></td> <!-- 2 -->  
               <td class=""></td> <!-- 3 -->  
               <td class=""></td> <!-- 4 -->  
               <td class=""></td> <!-- 5 -->  
               <td class=""></td> <!-- 6 -->  
               <td class=""></td> <!-- 7 -->  
               <td class=""></td> <!-- 8 -->  
               <td class=""></td> <!-- 9 -->  
               <td class=""></td> <!-- 10 -->  
               <td class=""></td> <!-- 11 -->  
               <td class=""></td> <!-- 12 -->  
               <td class=""></td> <!-- 13 -->  
               <td class=""></td> <!-- 14 -->  
             </tr>  
           </table>  
         </div>  
       </div>  
       <div class="footer">  
         <h4>Keep Calm and Love Open Source</h4>   
       </div>  
     </div>  
   </body>  
 </html>  

Output: