Category Archives: Software Development

PROBESEVEN - A Layman’s Application Design Approach

A Layman’s Application Design Approach – Today, using a cloud or mobile application is common for both personal and business needs. Millions of people experience at least a new application every day. An application has to well balance the business process as well as a personal comfort. Either for a business or personal, the app should behave to boost one’s productivity. Here are a few tips to start working out your next app, the creative process of designing it.


Architecting an application is a craft. Do not hurry.

Being experienced in 20+ Custom Software Developments, UIs, Web Experiences, I will say, architecting an application and it’s UI is a craft. Many growing architects and UI designers have the habit of jumping into the design tools right from the first hour. Remember you need not to hurry in this process. You are a creator and creating something here. Give  enough time to get inspired, visualize the experience. Simply put, just start dreaming about the application for few days and start slowly.

You will have to iterate for the features as the customers start using your app. It doesn’t need to be painful either. Believe me, it’s to become your art when you approach architecting the process step by step.

Get Inspired.

Get out of your design tools, you don’t need them at this stage. Inspiration has to be the first step before you dive into your application development. Watch some videos, interactive presentations of richly designed applications and websites. Watch how the big people have created their applications. It’s wise to get into some applications of your choice and use them.

Take screenshots, printouts of your inspiration features and stick to your walls. Use a mind mapping tool or a visual mood board to capture your thoughts when you plan your travel.

Wear the user’s shoes.

Get as a consumer and wear their shoes. You need not sound as a top engineer when you design your application, rather, think of creating the app for your own business. Sit beside your customer team and observe their everyday difficulties.

You will understand there are different views from the bottom level to top level team. It’s quite natural not a single app interface can fit all the user levels. Don’t get panic to think of different screen layouts for different user levels. Everyone will want their desks to be theirs. Think of the app to look minimal and interact with the user. Choose a style that is clean and simple to understand for the users.

Think the experience. Go Lazy.

Being a lazy boy can help you in bringing your application well as a productivity tool. You have to understand the customer business and think of doing stuff with minimal efforts.

A tip to help you could be, go beyond the app screens in your monitor and think about integrating some real world systems. You cannot re-model your customer`s workflow and don`t try doing it. Just try finding a solution to everyday problems and reduce your user`s time. Listen to your customers – you will get clues on what to integrate.

Carry a Sketchpad. Organize and Deliver to your team.

This one I thought to add for new bees. Do Paper Work before going digital. Carrying a sketchpad will be handy when you want to try an idea besides your coffee outside. Roughly draw the screens and annotate with notes.

When going with digital creations index the screens with chapter numbers and proper titles. Illustrate those important interactions and user flows of your application. Showcase your thoughts and get feedbacks from your team. Deliver the files to your team with clear instructions.

Ready to Iterate.

As like a famous saying, Rome was not built in a day, your application will take its time to be really useful to your customer. Keep the foundation stuff to build on and watch your releases being used by your customers. Ask them feedbacks and prioritize them. Plan your release and do not hesitate to expand your application as a platform for your customer’s everyday routine.


Believing this as a good stuff, if this post has invoked some different thoughts in you. Good luck with your next application design!

At PROBESEVEN, we do modern, scalable, custom software developments for common businesses to enterprises in the globe. We are located in India at Coimbatore, Bangalore, Tirupur and USA

PROBESEVEN - A Know-how: Yii 2.0 Installation via Composer


Hello world of developers! This is something which I worked on recently and would say that it is apt for the requirements.
As most of you would be aware of Yii framework that is suitable for large and complicated web applications, what I wish to add is that it is amazing when I explored that it provides swift development and provides great flexibility with its component based design and up gradation.

Stating this have documented the step by step process of Yii 2.0 Installation via Composer.

Let’s get Started:

It a cool thing to download the composer if you do not possess.

Download composer from

On Linux and Mac OS X:  You’ll need to run the following commands.

curl -sS | php mv composer.phar /usr/local/bin/composer

On Windows: You’ll need to download and run Composer-Setup.exe.

To check the composer installation, Type the below code in command prompt



Once you complete the Composer installation, you can head towards the installation of Yii by running the following commands under a Web-accessible folder:

You could compose this package in the system.

composer global require “fxp/composer-asset-plugin:1.0.0-beta2″


On completion of the composer, You may proceed to:

Type your Github auth access token key during the installation

Set your xampp htdocs directory in the cmd prompt.

Install Advanced Application Template

You have few options to have installed the advanced application template. Look further for the one that is suitable.

To install “advanced application template”, use the following code

composer create-project yiisoft/yii2-app-advanced projAdvanced 2.0.0-beta   

To obtain the up to date amendment:

php composer.phar create-project –prefer-dist –stability=dev yiisoft/yii2-app-advanced /path/to/yii-application

  To obtain the latest and stable during installation:

composer create-project –prefer-dist –stability=dev yiisoft/yii2-app-advanced your_project_name

Install Basic Application Template

Here again you possess few options to install the basic application template, you could pick an option given below.

To install “basic application template”, use the following code

composer create-project yiisoft/yii2-app-basic projBasic 2.0.0-beta  (or)

composer create-project –prefer-dist yiisoft/yii2-app-basic basic_project_name  (or)

composer create-project –prefer-dist –stability=dev yiisoft/yii2-app-basic basic_project_name

Folder Structure of Advanced Application Template

After installed ‘advanced application template’, you will get the application like below folder structure.

yii2 advanced application folder structure:


Root directory contains a set of folder.

  • Backend – backend web application.
  • Common – files common to all applications.
  • Console – console application.
  • Environments – environment config.
  • Frontend – frontend web application.

.gitignore contains a list of directories ignored by git version system. Also note that if you need something never get to your source, instead do the following. 

code repository, add it here.

composer.json – Composer config described in detail below.

init – initialization script described in “Composer config described in detail below”.

init.bat – This is same for Windows. – license info. You could put your project license here. Especially when you are opensourcing. – This is the basic info about installing template. Consider replacing it with information about your project and its installation.

requirements.php – This is the Yii requirements checker.

yii – Well, this is console application bootstrap.

yii.bat – Note this is same for Windows.

Getting Started

After you install the application, you have to conduct the following steps to initialize the installed application. You only need to do these once for all.

Yii2 Installation Via Composer


Run command init to initialize the application with a specific environment.

Create a new database and adjust the components[‘db’] configuration in common/config/main-local.php accordingly.

Apply migrations with console command yii migrate. This will create tables needed for the application to work.

Set document roots of your Web server.

Bravo! don’t you think you are successful. Work on it more and get experience the convenience. Also, do not forget to share a comment to state the benefits. 


PROBESEVEN - Multi-Processing in PHP at a Glance!

php-logoFew days back had a great experience that got me rejoicing. My development IQ created a spark while working keenly on a client project. Let me introduce a useful concept for the developers to pitch through all the creations. This is all about the multi-processing in PHP.

A Quick Note:

A glance through the concepts of Multi-programming which would help to understand better the process explained in this article.


Engaging a multi-programming system, you would find one or more programs loaded in main memory which is similar to running Excel, Paint, Firefox etc.


Multi-processing refers to executing multiple processes at a same time. In fact, multiprocessing refers to the hardware not software. A computer using more than one CPU (Physical processor) at a time is called multi-processing.


In multi-tasking, a single CPU is involved, but it switches from one task/program/job/process to another most swiftly that it gives the appearance of executing all of the programs at the same time.


Multi-threading is an execution model that allows a single process to have multiple code segments (one process is divided into sub-tasks.) run concurrently within the “context” of that process.

The need for PCNTL functions:

Any modern operation system performs Multi-tasking, which means we can run several programs at the same time. In php, we are using a single process concept and assigning all our work to one process. It will be executed one by one and ultimately takes more time for completion. If we split our one process task into a multi-process task using operating system feature ‘multi-tasking’, we can complete the process in great speed. Using ‘PCNTL’ function, we can do multi-process tasks concept in php.

Multiprocessing in PHP
  1. pcntl_fork — Forks the currently running process
  2. pcntl_waitpid — Waits on or returns the status of a forked child
  3. pcntl_wexitstatus — Returns the return code of a terminated child

The pcntl_fork() function creates a child process that differs from the parent process only in its PID. Both the parent and child process will be exactly the same up until the moment of the fork. Any variables up to that point will be exactly the same in both processes. After forking, changing a variable’s value in one process doesn’t affect the other process though.

When we call pcntl_fork(), it will return one of the three values. They are:

  • -1 - is return on failure.
  • 0 - is returned in the child’s thread of execution.
  • PID - is returned in the parent’s thread of execution.
Example 1:
$pid = pcntl_fork();

switch($pid) {
case -1:
	print "Could not fork!\n";
case 0:
	print "In child!\n";
	print "In parent!\n";


The above script just print out a message in the both parent and child processes.
Example 2:
for ($i = 1; $i <= 5; ++$i) {
	$pid = pcntl_fork();

	if (!$pid) {
		print "In child $i\n";
pcntl_fork_example_2In this script, we started with one process and forked it as five process. In foreach each time, we created one new child process and it did not affect the parent process. Because we exit the child process after the print the message.
Example 3:
for ($i = 1; $i <= 5; ++$i) {
	$pid = pcntl_fork();

	if (!$pid) {
		print "In child $i\n";

while (pcntl_waitpid(0, $status) != -1) {
	$status = pcntl_wexitstatus($status);
	echo "Child $status completed\n";


In this sample, We terminate the child process using exit($i) function and then return the status of a forked child from pcntl_waitpid(). Using pcntl_wexitstatus() function, we can get the return value of child process. pcntl_wexitstatus() function returns the return code as an integer.
Attention Note:
  1. Process Control should not be enabled within a web server environment and unexpected results may happen if any Process Control functions are used within a web server environment.
  2. This extension is not available on Windows platforms.


PROBESEVEN - Meteor-The Better & Swift Platform for Application Development

Meteor_1Something new and innovative is getting closer to use, when you think of writing software it is something that is time consuming and gets tedious. Now is something that provides a great platform and creates application in a new way. This collaborative solution solves most of the problems experienced in development and here is a quick overview of this interesting platform.

Meteor is a new platform for writing fast and efficient web and mobile applications. Meteor uses Pure Javascript for writing applications. Both client and server runs in Javascript.

In Meteor we can integrate database using javascript. It allows to insert,  update, delete any works done in Javascript. Mongo DB is been pre-packaged in Meteor. Hence it eliminates the need to configure the database, every time we create an all-new project the database will be configured automatically.

The great aspect is that it supports MongoDB and SQL Server.

The interesting fact is that Meteor is a cross platform, which we can download and install based on the operating system.

I now show you how to use in windows platform. Click on & Open this link below to download and install,

 Steps to create a new project:

You may follow the following steps in order to create a new project.

Open your Command Prompt (CLI) and follow these instructions.

Create Meteor appname

This line will create a folder appname with four meteor files




                                .meteor (internal meteror file)

There is no need to specify the <link> <script> tag in html file.

In order To excute the project type this

Cd appname             (enter the project directory)


Open your browser  type http://localhost:3000  now our app is running

1 (2)

In html file there are three important sections
  1. Head – head section of the html sent to the client.
  2. Body – regular html file
  3. Template – meteor template file. It can be used by body section and js file.


2Our html file compiled by Meteor spacebar compiler. We can add the logic inside the double curly braces ex: {{#each}}    {{#if}}

Meteor pass data’s to Javascript using helpers. in css file we customize whatever we want.

Finally it deploys our app in free meteor Server.

Meteor provides free testing Server.

Go to our project directory in command prompt and type

meteor deploy

This line will  asks username and password for meteor developer account. Create account in meteor website

After submitting username and password our app published in Meteor server. URL will be generated in our app name. View your app.

iStock_000029524850_LargeMore to know:

·         Meteor main features are that you could save the file in browser the page will automatically refreshed.

  • Meteor uses the Node.js and also we integrate Angular js 
  • Jquery, Angular Js these are Client side Javascript Frameworks but meteor is an client and server side framework.
  • One language and one Platform to write web and mobile Application.
  • Meteor Provides Native look and feel to Mobile Applications.
  • Now Meteor supports Android and IOS Applications. We build these apps we need to install the SDK’s for both Platforms

As a developer I am delighted to use this platform which gives a complete framework for the web and mobile applications. Modern interface and quick coding keeps me on great experience which makes me call it a top-tiered one and the best part is it is available as OPEN SOURCE.


PROBESEVEN - Get a Quick Insight on Google Material Design


It was just as if I got out of everything I had been doing and jumped into the Material Designing, the fact is it has transformed to enrich the design concepts and it is been a welcoming concept to the creation of winning designs. You will discover what it is, Now!

Material Design being known as a design language which was created by Google and it has its first applied to Google I/O 2014 further with the Android OS.

About Material Design:

This visual language is a concept that aids the designers to design websites and applications in a friendly and more usable manner. Material Design in particular works with the set of principles that gets the target accomplished.


Goals and Principles:

All the principles of good design are applied with innovation that meets across the platforms and devices which includes smart phones to smart TV.

Principles like the basic design theory like the grids, use of space, scale, colour, images and motion should be in guidelines and should not affect the user experience.

Smart Paper

What you see below is the SMART PAPER which takes the shape of the real one and it can be animated meeting the rules of physics.

smart paper


When the flow of objects takes place it defines the motion, while the acceleration and the deceleration of the object replicates the moves in the real world. This attempt transforms and navigates without the surrounding barriers.



Colours are quite important for designing and it is directly related to the psychology of the users. It directly denotes the approach of being fun, loud, friendly  normal and much more. The highlight here is that in Material Design it gives a large palette of vibrant colours.

What is interesting and inspiring is that Google provides complete colour palette which is downloadable which makes it simple.



The recent trend in the typographic layouts are that it is made simpler to understand and it uses intelligent spacing and colours to highlight the font.

Roboto is the standard Android font but has been improvised to meet the requirements where Noto typography works to fill the gaps in Roboto. This is applicable for all major languages.



Better understanding is been implemented with the elevation of the elements that grabs the attention and also add to the interaction of the design.

Understanding the axis which occupies the positions it demonstrated the material design language which has heights and thickness. It is not merely the 3D which manipulates in the Axis-Y but in Material design the Z-axis does its alignment to the plane which means adding elevation.



Icons are one another aspect which is represented in material design, its qualities includes thin lines, crisp edges along with shadows and lightings.



Of course imagery makes it happen to stand out from the usual, it goes with bold images, graphics with vibrant colours.



The guidelines for the layouts in the material design is interesting.

The layout has to be created with the baseline grid and the mathematical structure which defines the placement of elements. It again aims to break down in regions to place icons and the page details.

Common Elements

Here we are with the elements in material design which includes 19 components goes with bottom sheets, buttons, cards, chips, dialogs, dividers, grids, lists, list controls, menus, pickers, progress and activity, sliders, snack bars & toasts, sub-headers, switches, tabs, text fields and tooltips.

Glance at few application inspired by Google Material Design


Here is another example.


It is really encouraging and Thank you for being here a while, hoping you to add your thoughts as comments on this post.

PROBESEVEN - Explore WordPress MultiSite in Single Admin


I think I have created and tried something different from my usual programming. I believe in my experience to explore tools quite possible the unique ones. My initiation to share the exploration of creating multisites under a single admin.

Here is applying Word press to create multiple site in single admin, You can create new sites instantly and manage them using the same username and password. Single admin to manage the multiple site with same plugins and themes.

In 2010, WordPress released version 3.0 with the popular content management platform. WordPress has made it easier to create multiple WordPress sites on one server. Multisite also allows for easy network management through a single admin dashboard which a user with appropriate permissions can access via any network site’s admin bar.

You can create new sites instantly and manage them using the same username and password.

Advantage of WordPress Multisite

  • You can easily administer multiple sites from a single dashboard.
  • Install plugins and themes on multiple sites with one download.
  • Each site can have its own admins with credentials to manage only their own site.
  • Divide admin authority: Admins for one, many, or all sites
  • Simplify maintenance: Essentially you backup one site

 Steps to Install MultiSite:

 Step 1:

You need to add the below code to your wp-config.php file.

define( ‘WP_ALLOW_MULTISITE’, true );

Step 2:

Next, Go to Tools » Network Setup to configure your multisite network.


 Step 3:

Add the following to your wp-config.php file in

F:/xampp/htdocs/wp/wordpress/ above the line reading                      /* That’s all, stop editing! Happy blogging. */:


define('MULTISITE', true); 
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'localhost');
define('PATH_CURRENT_SITE', '/wp/wordpress/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

Now, add the following to your .htaccess file in

F:/xampp/htdocs/wp/wordpress/, replacing other WordPress rules


RewriteEngine On
RewriteBase /wp/wordpress/
RewriteRule ^index\.php$ - [L]
 # add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
 RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]


Once you complete the above configure, your network is enabled and configured.

Great! the configuration is complete. You will now have to log-in again.

Step 4:

Configure the Multi-Site in Network Settings

After successful setting up the Multi-site Network, you need to switch to the Network Dashboard to configure network settings, add new sites and can do lots of innovative settings. Go to My Site and Click on Network Admin » Dashboard.


You will notice that there are new menu items to manage your multisite network. You will also see a dashboard widget allowing you to create new site and add new users.

Step 5:

New Sites Create in Multisite Network

In order to add a new site to your WordPress multi-site, simply click on Sites under My Sites » Network Admin menu in the admin toolbar.


This will show you a list of sites on your current Multi-site installation. By default, you have your primary site listed as the only site in your WordPress Multisite network. To add a new site, click on the Add New button at the top.


 Step 6:

In order to add the new site, you will have to click on the Add New as shown above and you will get the below screen, you have to provide the respective details like site title, and add the site’s admin email address to add new site.


Hurrah! You have now successfully created and once you are done, click on the Add Site button. A new site will be added to your MultiSite network. It proves to be a single admin control to access multiple sites under a single WordPress site.

PROBESEVEN - XrayVision DCV-Stunnel-Orthanc Connection


This document explains the process of working with XrayVision DCV software, Stunnel proxy server and Orthanc DICOM server.


Initially to start with the below applications need to install,

  1. Orthanc
  2. OpenSSL
  3. Stunnel
  4. XrayVision DCV


STEP 1: Open the orthanc ‘Configuration.json’ file.


STEP 2           : You need to change the following options in ‘Configuration.json’ file. The values should be unique When you run multiple instance in same system.


STEP 3: After the completion of the configuration, you are required to ‘Start’ or ‘Restart’ the orthanc services.

STEP 4: Open the browser and enter the HTTP port number with domain name. Now, you would get the login window in the pop up. You are required to enter the login credential which are  username and password that can be obtained in the ‘RegisteredUsers’ options(Configuration.json).


Once you login successfully, you would get the orthanc home page with patient list.



STEP 5: After orthanc process completion, you need to create top level certificates like CA’s certificate, CA’s private key, CA’s TLS common file (combine both CA’s files), stunnel server certificate and private key using OpenSSL. At First Open the OpenSSL command prompt.

STEP 6: Enter the below code for CA’s private key.

genrsa -out ca_root.key 4096


STEP 7: For CA’s certificate, you need to add X.509 certificate with the CA private key.

req -x509 -new -nodes -key root.key -days 1024 -out ca_root.pem


STEP 8: Use the below code to create private key for Stunnel server.

genrsa -out server.key 4096


STEP 9: Generate a certificate signing request (CSR) for server.key file

 req -new -key server.key -out server.csr


STEP 10: Now you will need to create stunnel server certificate using server CSR certificate, CA’s certificate and CA’s private.

x509 -req -in server.csr -CA ca_root.pem -CAkey ca_root.key -CAcreateserial -out server.crt -days 1023


STEP 11: Finally, you need to combine CA’s certificate and CA’s private for TLS connection from XDCV.

For Windows           :                type ca_root.pem  ca_root.key >                                                                                      ca_root_TLS.pem

For Linux                    :                cat ca_root.pem ca_root.key >                                                                                         ca_root_TLS.pem


We have now successfully created some important files using OpenSSL.

Please use that files based on below instructions,

  1. ca_root.pem                                  – In Stunnel configuration
  2. server.key                                      - In Stunnel configuration
  3. server.crt                                       – In Stunnel configuration
  4. ca_root_TLS.pem                       – In XrayVision DCV configuration


STEP 12: Here at first you need to create one new folder called ‘certificates’ inside the stunnel directory and add the ca_root.crt, server.key, server.crt into that folder.


STEP 13: Now you need to open the stunnel.conf file. Remove all the default configuration from ‘stunnel.conf’ and update the below code.

You will now have to configure certificates path from ‘certificates’ sub directory , log path and level, TLS, stunnel listens and connect port information.

accept        -         Expecting DICOM request with given port from                                               XrayVision DCV

connect    –         Send the DICOM request to orthanc DICOM server.

cert             -         Server certificate file path

key              –         Server private key file path

CAfile        –         CA certificate file path

; File with certificate, private key and CAfile(certificate) 
;server certificate path 
cert = certificates/server.crt 

;server private key path 
key = certificates/server.key 

;CA certificate path will match with XDCV certificate 
CAfile = certificates/ca_root.pem 

; Log (1= minimal, 5=recommended, 7=all) and log file) 
debug = 7 
output = stunnel.log

; Some performance tuning 
socket = l:TCP_NODELAY=1 
socket = r:TCP_NODELAY=1 
; SSL bug options / NO SSL:v2 (SSLv3 and TLSv1 is enabled) 
options = ALL 
options = NO_SSLv2 
options = NO_SSLv3 
; Data compression algorithm: zlib or rle 
compression = zlib

; Service-level configuration 
; Stunnel listens to port 8888 (HTTPS) to any IP 
; and connects to port 4242 (HFS) on localhost 

verify = 3 
client = no 
accept = 
connect = 
TIMEOUTclose = 0

STEP 14: Click the stunnel application icon (see the below image) to run the stunnel services based on new configuration.


XrayVision DCV

STEP 15: At first, you need to open the XrayVision DCV software. Then go to the Adavanced User Tools->Preferences menu option. Now you will get a login window. Please enter the user ID and password to login.


STEP 16: Click on ‘DICOM’ option from left menu, then choose the ‘Configure DICOM Servers’ options.


STEP 17: Now you will get ‘DICOM Servers’ window and click on ‘Add’ button to add new DICOM server informations. You have to configure the XrayVision DCV software using stunnel and orthanc server details. See below given image for configuration.


STEP 18: For TLS configuration, you need to choose the encryption type as TLS and upload the ‘ca_root_TLS.pem’ certificate file.


STEP 19: Click on ‘Verify’ button to check the communication status. You will get a success message If everything was successfully configured.


STEP 20: Now you need to enable the image forwarding options. When you capture the images in XrayVision DCV, it will automatically forward to orthanc DICOM server via stunnel connection.


STEP 21: Finally we successfully completed all the settings. If you add any new images in XrayVision DCV software for patients, it will reflect in orthanc DICOM server.


Hope this document helped providing a walk through with this concept. Thank You!

PROBESEVEN - AngularJS – Handling Data Collection

I have been in development for handsome number of years and have found AngularJS to stand out especially for handling the data collections. I would stalwartly say that this is a platform for both the developers and designers.

The overview of AngularJS has concepts strong for the client-side technology which gives an extension for JavaScript and CSS. Well also for HTML 5.

I go by showing you some interesting stuffs which would ignite your curiosity to build and work with AngularJS.


Collection is nothing but it is just data model in angular. Renders the repeated data from data source and also formats the output of HTML elements with data filters too.

 Repeaters and Formatting filters are used to handle the data.


Ng-repeat directive use to iterate the data collections and create a DOM for each item in collections.if the item is updating, automatically the DOM object of item has update.

  • Each of the item in the array is the object with the property and for iteration the object gets assigned to the variable which creates a new element in its subtree.
  • It is possible to see the model that reflects in the DOM tree which is been generated by the ng-repeat directive.
  • Generates using special variables which allows the list items to populate by ng-repeat directive.
  • Possible to add or remove items from an array dynamically.

There are special variables that are use to handling the data collection even more flexible. These are associated only with repeaters.

  • $index: the zero-based index of the current item in the collection
  • $first: true if the current item is the first one in the collection, false otherwise
  • $middle: true if the current item is in the middle of the collection (after the first one, but before the last), false otherwise
  • $last: true if the current item is the last one in the collection, false otherwise
  • $even: true if the current $index is even, false otherwise
  • $odd: true if the current $index is odd, false otherwise
Sample code for Repeaters
<tr ng-repeat="d in filter_data"  ng-init=”rowlist=$index”> 
	<td align="center">{{d.age}}</td> 
  <td class="" style="cursor:pointer;">
  <i class="fa fa-edit" ng-show="$even" title="Edit" ng-click="edit(d.student_id)"> Edit</i>
  <i class="fa fa-edit" ng-show="$odd" title="Edit" ng-click="edit(d.student_id)"> Delete</i>
Output :


Formatting Filters

Format data or manipulate array collections through filters.To Include a filter in HTML document we can use the common notation {{exp}} and add Pipeline symbol after the expression to format its result.

The following are common and frequently used built in formatting filter

1. upperCase
2. lowerCase
3. date : “dd-mm-YYYY”
4. Currency
5. Reverse
6. isNumeric

We can add our custom filters too.

Sample code:
<tr ng-repeat="d in filtered = (listdata| filter:search | orderBy : predicate :reverse)
 | startFrom:(currentPage - 1) * entryLimit | limitTo:entryLimit">
      <td>{{d.firstName | uppercase}}</td> 
      <td>{{d.lastName | lowercase}}</td> 
      <td align="center">{{d.age | isNumeric}}</td> 
    <td class="" style="cursor:pointer;">
    <i class="fa fa-edit" ng-show="$even" title="Edit" 
ng-click="edit(d.student_id)"> Edit</i>
    <i class="fa fa-edit" ng-show="$odd" title="Edit" 
ng-click="edit(d.student_id)"> Delete</i>
Sample code for Custom filter starts From
app.filter('startFrom', function() {
                                    return function(input, start) {
                                    if(input && input.length>0) {
                                    start = +start; //parse to int
                                    return input.slice(start);
                                    return [];


Indeed, this short start would allow you to stick to the standpoint of the support extended by AngularJS. Hope you would have gained interest to try this, do share your comments.

PROBESEVEN - Getting started with Bootstrap CSS Framework

Bootstrap is feature-rich and the most widely used HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. This framework give an efficient way to build solid websites and web applications, saving many hours of coding with pre-built blocks of code.


We can easily customize the CSS and components of grid system based on user needs.

The process of installation is simple, download it easy from and once after unzipping, you have to include the files in the head of your HTML document something like the below

<!doctype html>
<meta charset="utf-8">
<title>Bootsrap Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script> 

<meta> Tag is vital since Bootstrap was first originally focused on Mobile-first approach. You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.

To turn responsive, include the “bootstrap-responsive.css” file in the header section like as below:

<link rel=”stylesheet” type=”text/css“href=”css/bootstrap-responsive.css“>

Bootstrap Grid

Being built on responsive 12-column grids, layouts and components, switching to fixed or responsive is made easy in a matter of few changes. Pull and offset as well as nesting columns are also possible.

Let’s see a sample of Mobile view built on Bootstrap

  • Rows must be placed within a .container class for proper alignment and padding represented as .container (fixed-width) or .container-fluid (full- width).
  • Use rows to create horizontal groups of columns.
  • The grid options are
  • Col-xs-* (upto 12 columns) for extra small devices like phone (width<768px)
  • Col-sm-*(upto 12 columns) for small devices like tablet(width>=768px)
  • Col-md-*(upto 12 columns) for medium devies like desktop(width>=992px)
  • Col-lg-*(upto 12 columns) for extra large device like large desktop (width=>1200px)
  • Content should be placed within columns, and only columns may be immediate children of rows.

 Example :

<div class=`` container or container-fluid”>
<div class=``row”>
<div class=`` col-*-*”>
--- > Content Here <-----  

Another useful feature of Bootstrap is the option to decide if to hide/display certain blocks of content based on the screen size. Additionally, adding class like .visible-desktop let content visible only to desktop and similarly can be set for tablet and phone.

Styling HTML Elements

 A website has different elements such as heading, lists, forms, and buttons and so on. All fundamental HTML elements are styled and enhanced with expansible class.

The HTML elements for which styles are provided are:

  •  Typography
  • Code
  • Table
  • Form
  • Button
  • Image
  • Icons

Extensible List of Components

The drop down menus pagination and alert boxes, Bootstrap has got your covered.

We can easily customize styling of individual elements of themes in few minutes.

Pre styled components are

  • Dropdowns
  • Button Groups
  • Navigation Bar
  • Labels & Badges
  • Alerts
  • Progress Bar & many.

Group of Java scripts

The components such as drop down menu are made interactive with numerous JavaScript plugins bundled in the bootstrap package. If the projects requires sliders tabs and accordions, we can easily integrate different plugins found across the web in just few lines of code. With the customization option, you can also choose to retain certain plugins to keep the file size to a minimum.

Advantages of Bootstrap

  1. Bootstrap gives flexibility to developers and save a lot of time spent on HTML, CSS and Javascripts.
  2. The most attractive advantage is it is easy to customize the way you need.
  3.  Bootstrap responsive feature make websites render perfect on Desktop, Laptop and Mobile phones.
  4. Bootstrap is compatible with all major and latest browsers and of course with all operating systems, it supports Android, IOS, Mac and Windows.
  5. Bootstrap releases more updates compared to other frameworks to ensure that wide range of cross browser and cross device compatibility.
  6. Bootstrap provide good documentation and great support for learning and development process.

 Of all, Bootstrap gives you enough support to work ease & fast.

Bootstrap offers styling almost every element of typical website or web application as required, it provide a great documentation with examples and demo that only make it as more efficient than others. Besides, Bootstrap has a huge support community behind it so you can easily get support when you run into issues.

Go, Get started with Bootstrap!

PROBESEVEN - An Insight to Conceptual 3D Graphic programming – three.js

The interesting aspect of Three.js is that it creates an independence in creating 3D animations. Yes! What I mean here that the creation of GPU takes place without any dependency on plug ins. This proves to be a high end library for the 3D requirements.

The origin of three.js was by Ricardo Cabello to GitHub in April 2010.

threejsYou would now travel with few basics for understanding how you could explore and experiment the concept. I do believe you would have the awareness of 3D and an intermediate level in Java Script with which you would be able to grab the focus on it. It is something like you can create cameras, any objects, the lights, materials and much more. You could also opt to choose the rendering and decide which part need to be used in the HTML 5’s Canvas, SVG or WebGL.

The Fundamentals:


The best part is three.js is an open source and available to you. The basic concepts in any 3D will follow the process of creating the following.

  • A Scene
  • A Renderer
  • A Camera
  • The Objects and Material

You should also be well aware that three.js supports better in Google Chrome browser. The next available option could be the Firefox browser.

Now you can learn where it can be used for example HTML.

3D Graphics in HTML:

So now since you have got your HTML files ready, you can decide on the template and decide where your JavaScript gets stored which is known as LIB.

<!doctype html>
<html lang="en">
<title>Sample object rendering</title>
<meta charset="utf-8"> 
  <script src="lib/three.min.js"></script>
  <script src="lib/OrbitControls.js"></script>

// Note here is where the 3D code need to be placed.
       <div id="show_object_1">
	    <canvas id="my_canvas_side_1"/>

Global Variables and Functions:

It is also required to set up some global variables inside the script tag and then call some functions.

// Here is where you would set up the scene, camera, and renderer as global variables.
 var container_side, scene_side, camera_side, render_side;
 var real_scene_side;

Creating the Scene:

It is important to create the scene which is our prime function. It would be like creating the width and the height of the browser window. It is also noted that creation of scene will take place in more places and hence it is best to grab once and store it.

// Globals from the previous step go here...
// Sets up the scene.
  function init() {
// Create the scene and set the scene size.
   scene_side = new THREE.Scene();
//custom height and width
    var width=250;
    var height=250;
// More code goes here next...

Creating the Renderer:

It is possible to use the SVG or Canvas Renderers but it is better to use the WebGL Renderer in order to take the advantage of GPU. This will aid to make many orders of magnitude and is better in performance.

On creating the renderer, we must append it to the DOM via the body element, so as to make three.js create a canvas inside the body element which can be used to render the other scenes.

// Sets up the scene.
  function init() {
// Code from previous steps goes here...
// create a renderer and add it to the DOM.
     var canvas_side = document.getElementById('my_canvas_side_1');
     render_side = new THREE.WebGLRenderer({canvas: canvas_side});
     render_side = new THREE.WebGLRenderer({antialias: true});
     container_side = document.getElementById('show_object_1');
// More code goes here next...

Creating a Camera:

Now, where the Scene and the Renderer are in place, we go ahead to create a Camera. The camera needs to be created considering few parameters.

FOV The Field of View is set with 45 Degrees.
Aspect Ratio This is the division of the browser width and height based on the Aspect Ratio.
Near Distance Mentioning the Near Distance means the distance at which the camera will start rendering the objects of the scene.
Far or Draw Distance This denotes that anything beyond the mentioned distance will not be rendered.

On creation of the Camera, we set the position by using XYZ coordinates. The default is 0,0,0 but we have to set for example Y value to 6 just to get some distance between our view and the mesh.

Finally, we need to add the camera to the scene.

// Sets up the scene.
 function init() {
// Code from previous steps goes here...
    var screen_width = width, screen_height = height;
    var view_angle = 45, aspect = screen_width / screen_height;
    var near = 0.1, far = 10000;
    camera_side = new THREE.PerspectiveCamera(view_angle, aspect, near, far);
// More code goes here next...

You might feel the completion but have you wondered what would be the status when the browser window is resized. For which we would be required to resample the new width and height in a variable within the function and we can use those values during the browser resize with a recalculated aspect ratio. It might also be required to callupdateProjectionMatrix() on the camera object. This might be an elaborate computation but once the browser gets resized it puts the thing in the frame back to normal.

// Sets up the scene.
  function init() {
// Code from previous steps goes here...
// Create an event listener that resizes the renderer with the browser window.
    window.addEventListener('resize', function() {
 render_side.setSize(width, height);
    camera_side.aspect = width/ height;
// More code goes here next...

Creating Lighting:

Now you could craft the scene with the setClearColorHex function on our WebGLRenderer object, it is required to set the background colour to the Treehouse grey hex color with an opacity of 1.

Now you use the light on the 3D objects for which you would need to add as a PointLight to the scene and set its position. It is also possible to use several other types of light that are available.

// Sets up the scene.
function init() { 
// Code from previous steps goes here...
// Set the background color of the scene 
render_side.setClearColorHex(0x333F47, 1);
// Create a light, set its position, and add it to the scene.
 var light = new THREE.PointLight(0xffffff);
 light.position.set(0, 100, 150);
   	 // More code goes here next...

Load a Geometry:

In order to get the geometry into the scene we are required to use the JSONLoader and the mesh has to be exported from Blender using the three.js JSON exporter. A callback is used inside the loader to set the material on the mesh.

It is perfect to go with the static geometry as whenever required the merged geometry will act as a single atomic shape. Also note that it is not possible to move the merged objects separated from each other and it is also not possible to add or remove without re-computing the whole geometry.

// Sets up the scene.
   function init() {
// Code from previous steps goes here...
//load object
    var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load("object_1.js", addModelToScene_side);

// addModelToScene function is called back after model has loaded
    var ambientLight = new THREE.AmbientLight(0x404040); 
    scene_side.add(ambientLight); });
 // More code goes here next...


function addModelToScene_side(geometry,materials)
      var material = new THREE.MeshFaceMaterial(materials);
      real_scene_side = new THREE.Mesh(geometry, material);
      // this makes the object bigger or smaller 

Adding Controls:

Hurry! We are at the completion and it is interesting to add the orbit controls which we had included previously. This may not sound mandatory but it is interesting when included to easily drag the mouse across the mesh and the orbit. You could also see the zoom in and out with the mousewheel control.

// Sets up the scene.
  function init() {

// Code from previous steps goes here...
// Add OrbitControls so that we can pan around with the mouse.

  controls = new THREE.OrbitControls(camera_side, render_side.domElement);
// More code goes here next...

Rendering the Scene:

Now that we have completed the initialization function, we can now proceed with the animation function. To obtain a distingulished animation we need to redraw as per the camera orbits around the mesh.

// Sets up the scene.
  function init() {
// Code from previous steps goes here...

// Renders the scene and updates the render as needed.
function animate() {
// Render the scene. 

Thank You Readers, it had been immense pleasure to share the few of concepts which will be an encouragement for further learning. You could now await for more interesting articles to enrich your knowledge. Note me few comments to keep me cheerful!