Shubham Saxena | Innovation Escalator http://blog.shubhamsaxena.com only innovation matters Fri, 14 Jun 2013 17:51:38 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Kendo UI : Implementing a Grid Widget http://blog.shubhamsaxena.com/kendo-ui-implementing-a-grid-widget/?utm_source=rss&utm_medium=rss&utm_campaign=kendo-ui-implementing-a-grid-widget http://blog.shubhamsaxena.com/kendo-ui-implementing-a-grid-widget/#comments Fri, 14 Jun 2013 17:51:38 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=489 Read more →]]> As of now we have learned a lot about Kendo UI web widgets and now its time to learn some actual implementation, here I have chosen Grid as it is the most complex widget available. We will implement a full featured grid with some local data bounded to it by Kendo UI data source, it will also have sorting, filtering, paging and grouping. So we will start with an empty HTML page.


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <TITLE>Implementing Kendo Grid</TITLE>

<link href="content/kendo.common.min.css" rel="stylesheet" type="text/css" />
 <link href="content/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="scripts/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/kendo.web.min.js"></script>
 </head>
 <body>

 </body>
</html>

The above code is the simple HTML5 page with all the references to the Kendo scripts and stylesheets, Kendo scripts and styles are placed in the scripts and contents directory of my web project. To start we have some HTML markup and a script which will initialize this markup as Kendo Grid.


<div id="colleges"></div>

Now we will create a script tag with document ready function, which will also define the local array of JavaScript objects to populate the Kendo Grid, we have created an array named colleges that contains JavaScript objects that contains colleges Establishment year, Location and Name.


<script type="text/javascript">

$(document).ready(function() {

 var colleges = [
 {year: 1996, location: "Mathura", name: "Hindustan College of Science and Technology"},
 {year: 1998, location: "Agra", name: "Anand Engineering College"},
 {year: 1999, location: "Agra", name: "Hindustan Institute of Technology and Management"},
 {year: 2002, location: "Barabanki", name: "Sagar Institute of Technology and Management"},
 {year: 2001, location: "Lucknow", name: "Saroj Institute of Technology and Management"},
 {year: 1991, location: "Mathura", name: "GLA University"},
 {year: 1921, location: "Kanpur", name: "Harcourt Butler Technological Institute"},
 {year: 1984, location: "Lucknow", name: "Institute of Engineering and Technology"}
 ];

 });

</script>

now we have defined our data so we need to create the Kendo UI data source to which my grid will be bound to:


var collegesDataSource = new kendo.data.DataSource({data: colleges});
 collegesDataSource.read();

if you recall my previous post, you might recall the process of data binding by passing the JASON-formatted string in the kendo DataSource function.  Now we have DataSource but we need to bind it to show up something, we will do this by using a jQuery selector to select my element colleges and assign the KendoGrid widget to it and assign the collegesDataSource to it:


$("#colleges").kendoGrid({
 dataSource: collegesDataSource
 });

So enough of code now lets see what it is the output.

Kendo Grid

Kendo Grid

You can see it pulls up a simple grid with mo much functions. First thing we will do is change the title of the column, by default the title is the name of the attribute defined in the data source that is why they are in lowercase, we can do that by re-configuring the columns:


$("#colleges").kendoGrid({
 dataSource: collegesDataSource,
 columns: [
 {field: "year", title: "Establishment Year"},
 {field: "location", title: "Location"},
 {field: "name", title: "Name of College"}
 ]
 })

Now you can see the change in the title of the columns:

Kendo Grid with custom title

Kendo Grid with custom title

Next thing I wanna do is insert paging which makes the grid look better, in order to introduce paging in Kendo Grid we need to do two things: first thing to do is turn off scrolling and turn on paging, we will do this with the help of scrollable and pageable property and lastly we need to configure the page size which is done in the data source:


var collegesDataSource = new kendo.data.DataSource({data: colleges, pageSize:3});
 collegesDataSource.read();

$("#colleges").kendoGrid({
 dataSource: collegesDataSource,
 columns: [
 {field: "year", title: "Establishment Year"},
 {field: "location", title: "Location"},
 {field: "name", title: "Name of College"}
 ],
 scrollable: false,
 pageable: true
 })

Lets have a look to the output now :

Kendo Grid with Paging

Kendo Grid with Paging

Next we will add sorting, grouping and filtering feature to our grid, which can simply be done by setting the sortable, groupable and filterable property to true.


$("#colleges").kendoGrid({
 dataSource: collegesDataSource,
 columns: [
 {field: "year", title: "Establishment Year"},
 {field: "location", title: "Location"},
 {field: "name", title: "Name of College"}
 ],
 scrollable: false,
 pageable: true,
 sortable: true,
 groupable: true,
 filterable: true
 })

You can also introduce default sorting, the default sort order is added in the data source, we set the sort field and the direction to which it is to be sorted, in this case it is ‘year’ and ‘ascending’:


var collegesDataSource = new kendo.data.DataSource({data: colleges, pageSize:3,

sort:{field: "year", dir: "asc"}});

We can also add editing feature to our grid, for doing this we will first setup the editable property, for this we have various options – ‘inline’ , ‘popup’ and next we need to add command column:


$("#colleges").kendoGrid({
 dataSource: collegesDataSource,
 columns: [
 {field: "year", title: "Establishment Year"},
 {field: "location", title: "Location"},
 {field: "name", title: "Name of College"},
 {command: ["edit", "destroy"]}
 ],
 scrollable: false,
 pageable: true,
 sortable: true,
 groupable: true,
 filterable: true,
 editable: "inline"
 })

Thats it, we created a fully functional Grid with various features.

Full Featured Kendo Grid

Full Featured Kendo Grid

Download the source code of ImplementingKendoGrid and see it in action.

]]> http://blog.shubhamsaxena.com/kendo-ui-implementing-a-grid-widget/feed/ 0 Kendo UI : All about Web Widgets http://blog.shubhamsaxena.com/kendo-ui-all-about-web-widgets/?utm_source=rss&utm_medium=rss&utm_campaign=kendo-ui-all-about-web-widgets http://blog.shubhamsaxena.com/kendo-ui-all-about-web-widgets/#comments Wed, 12 Jun 2013 15:18:54 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=460 Read more →]]> In this section we will cover all about touch enabled and web widgets provided by Kendo UI, what are Kendo UI web widgets, what widgets are available and where you can find them, after that we will talk about basic usage of web widgets, configuration, event binding and finally styling of web widgets.

What are web widgets?

Web widgets are a collection of HTML5 controls that are based on jQuery core which are designed for web and touch enabled desktop development and like the rest of Kendo UI they are built with performance in mind, here I would like to mention that although the widgets are based on jQuery core but they are not the extension of jQuery but are built from the ground level by Kendo UI team. Let’s have a look what widgets are available in Kendo UI, it has a quite extensive list:

  • AutoComplete
  • Calendar
  • ComboBox
  • DatePicker
  • DateTimePicker
  • DropDownList
  • Editor
  • Grid
  • ListView
  • Menu
  • NumericTextBox
  • PanelBar
  • Slider
  • Splitter
  • TabStrip
  • TimePicker
  • TreeView
  • Upload
  • Window

The best way to get familiar with extensive range of available web widgets is to go online on demos.kendoui.com/web or go to the examples directory of Kendo UI download.

Usage

Let’s start looking at the implementation process how we can use the Kendo UI widgets in our web pages as the Kendo UI widgets are based on jQuery using them is very similar, first we write the markup and then we initialize our markup:

  • Markup
     
    <input id="dateofBirth" />

    Here is an input field with the id of ‘dateofBirth’

  • Initialize
     
    <script type="text/javascript">
       $(document).ready (function () {
                $("#dateofBirth").kendoDatePicker();
       });
</script>

    We have a jQuery document ready function and inside that ready function I’m selecting my element by ID and then I’m applying ‘kendoDatePicker’ function to it. Applying this function initializes the element as Kendo Date Picker.

There is an alternative means of initializing your Kendo UI web widget called declarative initialization. This takes advantages of “data-” attribute of HTML5 to assign roles to your HTML elements, so just like in above example first we will define the markup and then initialize it.

  • Markup
     
    <input id="dateofBirth"  data-role="datepicker" />

    Here we are making use of “data-role” attribute with defining the role of “datepicker”, the value of data-role attribute is the name of the web widget in all lower case.

  • Initialize
     
    <script type="text/javascript">
       $(document).ready (function () {
                kendo.init($("#dateofBirth"));
       });
</script>

    Just like the previous usage my initialization lies in the jQuery document ready function but unlike the previous example here I’m calling the kendo.init() and then I’m using jQuery selector to select my element by id and passing it into kendo.init(), in this example kendo is taking care of initialization of control and we just need to call the init function, this is the implementation preferred because you can look at the markup and clearly understand which control is used in it.

Configuration

Whenever we use any third party control the first thing in our mind is that to which extent they are configurable so Kendo UI is an extremely configurable set of widgets, how you configure depends on the method of initialization you chose. If you use the basic non declarative initialization then you need to configure by providing JSON-formatted settings to the widgets constructor. If you use declarative initialization using the data attribute you would configure your widgets using data attribute as well.

  • JSON-formatted settings 
    $("dateofBirth).kendoDatePicker(
        {format: "yyyy/MM/dd"}
);
  • Data Attributes 
    <input id="dateofBirth"  data-role="datepicker"
 data-format="yyyy/MM/dd" />

Data Source Configuration

Widgets that are data driven such as combo box, auto complete and grid have a data source which provides the data required by the widget, like simple configuration DataSource configuration also depends on the type of initialization, if you use the basic non-declarative initialization then you would need to configure by setting the data source property in the widgets constructor. If you use declarative initialization using data attribute then you would configure the data source by using the “data-source” property in the markup.

  • Data Source configuration for basic initialization 
    <br/><input id="colorPicker" />

<script type="text/javascript">
$(document).ready(function() {
     $("#colorPicker").kendoComboBox({
             dataSource: ["Blue", "Green", "Red", "Yellow"]
      });
});
</script>
  • Data Source Configuration for Declarative Initialization
     
    <input id="colorPicker" data-role="combobox"
data-source='["Blue", "Green", "Red", "Yellow"]' />

<script type="text/javascript">
$(document).ready(function() {
     kendo.init($("#colorPicker"));
});
</script>

Event Binding

After configuring and all somewhere you will need to bind events to the web widgets and again how you bind your events depends on the type of initialization.

If you use the basic non-declarative initialization then you need to bind your event using JSON-formatted settings in the widgets constructor:

<input id=""colorPicker" />
<script type="text/javascript">
function onColorChange(e) { alert('Color Change!'); }
$(document).ready(function() {
     $("#colorPicker").kendoComboBox({
             dataSource: ["Blue", "Green", "Red", "Yellow"]
             change: onColorChange
      });
});
</script>

If you use declarative initialization using data attribute you can wire up your event using data attribute for the event you are wiring up, here we are using “data-change” to represent the onChange event and its value responds to the function name i.e. the call back function.

<input id="colorPicker" data-role="combobox"
 data-source='["Blue", "Green", "Red", "Yellow"]'
 data-change="onColorChange" />

<script type="text/javascript">
function onColorChange(e) { alert('Color Change!'); }

$(document).ready(function() {
    kendo.init($("#colorPicker"));
});
</script>

There is also a third method to bind the event which does not depends on the way of initialization of the widgets, this works using a bind function with two parameters, the first parameter is a string which represents the event you are binding to i.e. in this case is change event and the second parameter being the call back function.

<input id="colorPicker" data-role="combobox"
 data-source='["Blue", "Green", "Red", "Yellow"]' />

<script type="text/javascript">
function onColorChange(e) { alert('Color Change!'); }

$(document).ready(function() {
     kendo.init($("#colorPicker"));
});

var colorPick = $("#colorPicker");
colorPick.bind("change", onColorChange).data("kendoComboBox");
</script>

Styling

Styling of widgets is the important part, to fit in with the theme of our web application. Kendo UI always a pair of style sheets.

  • kendo.common.css
    • Positioning and styling
  • kendo.[skin].css
    • Colors and backgrounds
    • Skin specific

Remember one thing always refer kendo.common.css file before skin css file because in some cases skin css may override the base css.

In Kendo UI different elements and different widgets use the same CSS classes to provide the level of abstraction and allow common styling, the Kendo documentation refers these shared CSS classes as primitives. To avoid the naming collision the kendo CSS classes have been prefixed with “k-” , primitives allow you to change style globally at a large level.

So, that was all about the web widgets of Kendo UI, we will look into the implementation of grid into detail in the next post.

]]> http://blog.shubhamsaxena.com/kendo-ui-all-about-web-widgets/feed/ 1 Adding Kendo UI to a webpage : Kendo UI Date Picker Function http://blog.shubhamsaxena.com/adding-kendo-ui-to-a-webpage-kendo-ui-date-picker-function/?utm_source=rss&utm_medium=rss&utm_campaign=adding-kendo-ui-to-a-webpage-kendo-ui-date-picker-function http://blog.shubhamsaxena.com/adding-kendo-ui-to-a-webpage-kendo-ui-date-picker-function/#comments Tue, 11 Jun 2013 09:03:34 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=430 Read more →]]> In the last post we learned what is Kendo UI and what it offers to provide rich interactive web solutions, In this post we will learn how to add Kendo UI controls to a webpage. Now you know what Kendo UI is you know what you want to add into your webpage, Kendo UI is JavaScript framework which consists of script files, cascading style sheets and assets and adding them to your webpage involves just three simple steps:

  • Copy ‘JS’ – copy the contents of JS directory of Kendo UI directory to the directory of your web application’s JS directory.
  • Copy ‘Styles’ – next is to copy the contents of styles of Kendo UI to the directory where your application references the style sheets used.
  • Register the scripts and CSS – lastly you need to register the necessary scripts files and CSS to make your page aware of Kendo UI, which pieces you register refers which functionality of Kendo UI you want to use.

To use the web pieces which includes the web widgets, MVVM framework, client side data source, validation, templating and drag and drop you need to register the following scripts and styles :

web widgets scripts

To use the Data Visualization pieces of Kendo UI you need to register the following scripts and styles :

data viz scripts

To use the mobile components of Kendo UI, you would need to register :

mobile scipts

and off course for adding all the components you need to register all the scripts, now lets have a look at a demo illustrating how to use these scripts into your web application.

For this demo we will we working on intro to Kendo UI website, firstly I have added the Kendo UI styles to my content directory and Kendo UI JavaScript files to my scripts directory, I will use the basic HTML5 page as my base page to use the web widgets, as we are using the web components we need to reference the relevant script and style files to my HTML page :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <TITLE>My First Kendo UI Page</TITLE>

        <!-- StyleSheets -->
        <link href="content/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="content/kendo.default.min.css" rel="stylesheet" type="text/css" />

        <!-- Scripts -->
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/kendo.web.min.js"></script>

   </head>
   <body>
        <span>Pick a Date:
           <input id="pickDate" type="text" />
        </span>
   </body>
</html>

The above code shows the simple HTML page with the references to Kendo UI web scripts and stylesheets, now we need to verify that the scripts and stylesheets are the one we need to register, we can do this by implementing one of the Kendo UI web widgets and here for example we will use the date picker.

<script type="text/javascript">
   $(document).ready(function () {
      $("#pickDate").kendoDatePicker();
   });
</script>

Here you can see we have used the kendoDatePicker function, we will be going into much detail in the posts later about their implementation process, but at this point we assume we indeed have everything in place you implement the Kendo UI, so now its all done and lets see what Kendo UI Date Picker has done for us.

Kendo UI Date Picker

So this was simple, we will go in deep details with Kendo UI, stay tuned.

Download the source code >> IntroToKendoUI.

]]> http://blog.shubhamsaxena.com/adding-kendo-ui-to-a-webpage-kendo-ui-date-picker-function/feed/ 0 What is Kendo UI ? http://blog.shubhamsaxena.com/what-is-kendo-ui/?utm_source=rss&utm_medium=rss&utm_campaign=what-is-kendo-ui http://blog.shubhamsaxena.com/what-is-kendo-ui/#comments Mon, 03 Jun 2013 21:16:12 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=412 Read more →]]> Web has been transforming since a long time and now the web demand rich and interactive web applications, and developing those kind of  applications developers need vast range of developer tools in their toolbox. Today, we are going to learn about Kendo UI which is a new exciting JAVASCRIPT tool set, it provides all the tooling which you require for a fast, rich, responsive and interactive web applications in a single package.

What exactly Kendo UI is ?

The very first question which comes in your mind is what is kendo UI and the answer is, its a “Javascript framework for building modern interactive web applications”. These days people expect rich interactive and fluent websites and in order to achieve that a developer must make good use of the available client side technologies which Kendo UI does for you. Kendo UI is basically a collection of scripts, styles and images. When you install it you simply have a lot of javascript files, stylesheets, images etc in your project. Kendo UI leverages many of the existing technologies to make the rich immersive web application, some of them are :

  • JavaScript (It has been used since a long time to do some beautiful things in a web application)
  • HTML5 (It is the latest version of HTML specification whose goal is to standardize the way developers code)
  • CSS3 (Latest version of CSS specification, provides genx functionality to style a web application)
  • JQuery (It is the community driven javascript library which facilitates the use of DOM)
Kendo UI Leverages

Kendo UI Leverages

Now we know what Kendo UI is, its time to know what does Kendo UI provides.

What Does Kendo UI provides ?

Kendo UI provides extensive collection of rich UI widgets, these are HTML5 controls based on jQuery, supported by all current browsers as well as having broad support for all the browsers. It has 3 categories of UI widgets :

  • Web – these are widgets for web and touch enabled desktop development, it has full featured grid with paging, sorting, filtering and custom templates, tree view, rich text editor and lot more.
  • DataViz – these are also called data visualization widgets, used for development of desktop websites as well as mobile websites, these are usually used for representing data which includes charts and gauges
  • Mobile – these feature an adaptive rendering technology which displays a truly native feel for iOS, Android and Blackberry, this include controls such as scroll view, tab strip, list view, buttons, navigation bars etc.

Kendo UI also includes client side data source which provides an abstraction for working with data on the client side that simplifies data binding and other data operations. It supports local data such as javascript objects as well as remote data including XML, JSON etc.  Kendo UI also provides a MVVM (model-view-view-model) framework which enables declarative binding and two way data synchronization in your web application. Kendo UI also provides templating, animation, drag and drop and a full featured validation framework.

Why Kendo UI ?

Now the question may arise why Kendo UI and not other available tools, first of all Kendo UI provides all the tools you need in one package so there is no need to go and download half a dozen of libraries to make your web application look better, it also provides different part of toolset to work more efficiently together. Next is performance, Kendo UI has been developed from ground to up with performance in mind and no shortcuts have been taken along the way, this has resulted in a extremely performing toolset. Lastly is support, Kendo UI is product of popular component vendor, other have community support for their product but Kendo UI has a proper professional support for itself.

Browser Support

Browser support is crucial when choosing any type of web tool, there is nothing worse then finding a perfect tooling for the solution. A lot of intelligence is put into the development of Kendo UI to support vast majority of browsers and browser versions. Kendo UI is officially supported on :

  • IE 7.0 +
  • Firefox 10.0+
  • Chrome all versions
  • Opera 10.0+
  • Safari 4.0+

With the broad support of Kendo UI you can be confident that whosoever is accessing your website will be getting the view you intended.

Platform Support

Kendo UI is Supported on :

  • Windows XP/Vista/7/8/Server 03,08 R1, R2 (32,64 bit editions)
  • Mac OS X+
  • Android 2.0+
  • iOS 3.0+
  • Blackberry 6.0+
  • HP WebOS 2.2 +

Licensing

Now lets talk about licensing of Kendo UI, the three license available are :

  • 30 days free trial with full feature set of Kendo UI
  • There is also a open source license available which is suitable for GPL compatible projects. GPL v3.0
  • Commercial Licence

for more info visit Kendo UI.

Download and Install

You can download Kendo UI from www.kendoui.com, and installing is very simple task as Kendo UI is a simple package of JavaScript files and style sheet files so installing is as simple as unzipping it to a particular folder. There is extensive set of samples available in the Kendo UI examples directory, full source of samples is available and also there is a nice interactive web interface available to navigate through the samples, samples are available for all widgets and framework components.

Stay tuned for next post on how to add it in your web page.

]]> http://blog.shubhamsaxena.com/what-is-kendo-ui/feed/ 1 Certified : Exam 70-480 My Experience http://blog.shubhamsaxena.com/certified-exam-70-480-my-experience/?utm_source=rss&utm_medium=rss&utm_campaign=certified-exam-70-480-my-experience http://blog.shubhamsaxena.com/certified-exam-70-480-my-experience/#comments Sat, 12 Jan 2013 10:56:35 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=380 Read more →]]> Yesterday i appeared for Microsoft Exam 70-480 (Programming in HTML5 with JavaScript and CSS3 Specialist certification) and yes I cleared it. Now I’m Microsoft Certified Professional, feels great. Last time I gave certification Exam and I failed i scored 680 something and the passing was 700, I was very disappointed at that moment but Dhananjay Kumar sir (DJ – awesome person) motivated me and now when I have got this, I would like to dedicate it you DJ sir.

Microsoft offers Microsoft Specialist certifications for exam 70-480 and 70-483, so now I’m certified specialist in Programming with HTML5.

Microsoft Specialist 70-480

 

My Experience : This exam was not so tough, It had HTML5 questions and the maximum part was covered by JQuery and Javascript. HTML5 part was easy, and yeah you need to be strong in JS and JQuery part. Here are some reference I’m posting for preparation.

1 – W3schools for HTML5

2 – Channel9 for Javascript

Hope you do well, cheers. :)

]]> http://blog.shubhamsaxena.com/certified-exam-70-480-my-experience/feed/ 15 Creating First Emgu CV Project http://blog.shubhamsaxena.com/creating-first-emgu-cv-project/?utm_source=rss&utm_medium=rss&utm_campaign=creating-first-emgu-cv-project http://blog.shubhamsaxena.com/creating-first-emgu-cv-project/#comments Tue, 08 Jan 2013 18:56:10 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=345 Read more →]]> In the last post we read about Starting with Emgu CV, now here we will start our first Emgu CV project. Emgu CV is not so difficult all we have to do is to add certain references and make use of Emgu Controls. Lets get started.

Lets start creating a blank windows form application.

My First Emgu CV Project

You will get a new project created for you, before starting further enable “show all settings” under tools, this enables a lots of features like form designer layout, snap to grid and many.

tools visual studio

Options page visual studio

 

 

 

 

 

 

 

 

Now lets start, first thing we will do is Add References, browse for the Emgu bin folder (by default it is located at C:\Emgu\emgucv-windows-x86 2.3.0.1416\bin ), in the bin folder there must be some dlls add all those starting with “Emgu.CV” (choose only one among Emgu.CV.DebuggerVisualizers.VS2008.dll and Emgu.CV.DebuggerVisualizers.VS2010.dll depending on the visual studio you are using, in my case it is Emgu.CV.DebuggerVisualizers.VS2010.dll)

Add Reference

Emgu CV Reference DLL

 Now we need to add some existing items, Goto Project>Add Existing Items and now again browse for bin directory of Emgu CV and this time choose all the dll files starting with “opencv_“, these dll files are required for each time the output is generated via Emgu that is why we added them to our project directory, we will also change there property so that they get copied always to the output folder. So, select all the dll added and select properties and change the “Copy to Output Directory” to “Copy Always“.

Add existing items emgu cv

 

 

 

 

 

 

 

 

 

 

 

We already have added the Emgu custom controls to our toolbox, now lets design our form, we will be using two ImageBox (Emgu Control), one Button and a Textbox, design the form as below.

Emgu CV Form Design

 

Now come to the form1.cs code view, and add the following namespaces;

using Emgu.CV;
using Emgu.CV.CvEnum;
using Emgu.CV.Structure;
using Emgu.CV.UI;

Next create some member variables :

Capture capturecam = null; //instance for capture using webcam
bool CapturingProcess = false; //boolean stating the capturing process status
Image<Bgr, Byte> imgOrg; //image type RGB (or Bgr as we say in Open CV)
Image<Gray, Byte> imgProc; //processed image will be grayscale so a gray image

Now its time to add a form load event, we will start capturing via webcam under it.

capturecam = new Capture();

this will associate the default webcam with capturecam object.

code snippet

 

 

 

 

 

 

 

 

 

 

 

 

 

 

We have added the associated to capture object in try catch block in order to avoid the error if the webcam is already in use.

We added a event handler to Application.Idle, so that it performs task when idle, and the task is to get the next frame. ProcessFunction is called at every idle state of application.

QueryFrame gets the next frame from the webcam, if it is null it means there is some problem and hence we stop our app there.

InRange function takes two parameter min range and max range of Bgr.

SmoothGaussian applies the Gaussian smoothing with the x,y length = 9, we can pass different parameters for x and y also.

Now lets come to the coding part of playorpause button:

playorpause code

 

 

 

 

 

 

 

 

 

this is the simplest part, it checks the boolean value of CapturingProcess and accordingly changes the button text and stops streaming from webcam.

Sample Output: 

emgu cv output

 

]]> http://blog.shubhamsaxena.com/creating-first-emgu-cv-project/feed/ 2 Starting with Emgu CV http://blog.shubhamsaxena.com/starting-with-emgu-cv/?utm_source=rss&utm_medium=rss&utm_campaign=starting-with-emgu-cv http://blog.shubhamsaxena.com/starting-with-emgu-cv/#comments Sat, 05 Jan 2013 10:37:01 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=333 Read more →]]> What is Emgu CV ?

Before learning what is Emgu CV, one should know what is Open CV.

Open CV

It stands for Open Source Computer Vision, it was designed especially for computational efficiency with strong focus on real time applications.  It is written in optimized C/C++, and can take advantage of multi-core processing. In Image processing it has been a great boon for the developers.

Emgu CV

Its is essentially a huge library of “wrapper” functions that allows calling OpenCV funtions from Visual Studio Windows Form Application. It is necessary because Visual Studio/.NET is an “interpreted” environment that cannot directly call functions written in native C/C++.

In this tutorial we will start configuring our Visual Studio and environment for developing applications using EmguCV.

Firstly we need to download some the essential tools, we will be using the most stable versions though the new versions are also available.

  1. Visual Studio 2010 Express Edition
  2. Emgu CV (version 2.4.2 is available but had various issues so I’m doing it with the most stable version found 2.3.0)

Once you have installed all this it should work fine, but one common exception found is

The type initializer for ‘Emgu.CV.CvInvoke’ threw an exception.

If you see this exception, do following :

  • For Version 2.4+, the bundled OpenCV binary is build with Visual Studio 2010, you will needs to installed MSVCRT 10.0 SP1 x86 or MSVCRT 10.0 SP1 x64 to resolve the dependency issue.
  • For Version 2.0+, the bundled OpenCV binary is build with Visual Studio 2008, you will needs to installed MSVCRT 9.0 SP1 to resolve the dependency issue.
  • For Version 1.5, the bundled OpenCV pre1.1 binary is build with Visual Studio 2005, you will needs to installed MSVCRT 8.0 SP1 to resolve the dependency issue.

This is the most effective solution to the problem for the above exception, for others and detailed troubleshooting click here.

Now start the configuration part :

  1. We need to add a environment variable to the system variables.
    Right Click My Computer>Advanced System Settings>Environment Variables
    Under “System Variables” edit variable “path”
    add a semicolon(;) and the path to the emgu installation directory bin folder(by default it is C:\Emgu\emgucv-windows-x86 2.3.0.1416\bin
    system variables
  2. Now the environment is ready and we need to add the emgu custom controls to Visual Studio ToolBox
    In the toolbox, right click on General tab and select “choose items”
    Visual Studio ToolBox
  3. Select browse on bottom right corner and browse for “Emgu.CV.UI.dll” (it is located in bin folder of installation directory i.e C:\Emgu\emgucv-windows-x86 2.3.0.1416\bin)
  4. Now the Visual Studio will have the tools for emgu control
    Emgu Controls

 This is all required for setting up the environment for working with Emgu CV, in the next article we will learn how to create our first project with Emgu CV. Cheers :)

]]> http://blog.shubhamsaxena.com/starting-with-emgu-cv/feed/ 2 Android Development – Running Android App http://blog.shubhamsaxena.com/android-development-running-android-app/?utm_source=rss&utm_medium=rss&utm_campaign=android-development-running-android-app http://blog.shubhamsaxena.com/android-development-running-android-app/#comments Sun, 09 Dec 2012 16:58:41 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=316 Read more →]]> For running your apps there are two possible ways :

  • Running on the emulator
  • Running on a device

Running on the emulator

Emulator are the Android Virtual Devices (AVD) that we need to configure in order to run our android apps.

Step 1 – Open AVD Manager

AVD Manager

Step 2 – Click on New Button to add a new device, and configure your device settings.

New Device - AVD Manager

 

Step 3 – There will be a result window showing all the configuration you had chosen on the previous screen.

Configuration Result - AVD Manager

Step 4 – Press ‘Ok‘ and you will see your device listed in there and now you can close this window now.

List of Devices - AVD Manager

Step 5 – Run your android app project from eclipse and if there is only one AVD configured it will automatically deploy the app to it else a window will appear to choose your AVD. Emulator will start.

Android Emulator

Running on the Device

Android app can directly be deployed on the android device, for this few configurations are needed.

Step 1 – Set the application in the debug-able mode by setting android:debuggable attribute of the <application>element to true. For ADT 8.0 this is done by default. (In our ADT we do not need to perform this step)

Step 2 – Enable USB debugging on your device:

For Android 3.2 or older Goto Settings>Applications>Development and enable USB Debugging.

USB Debugging

On Android 4.0 and newer, it’s in Settings > Developer options.

Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.

Step 3 – Install USB drivers for your device so that the computer recognizes your device.

Step 4 - Once set up and your device is connected via USB, install your application on the device by selecting Run > Run (or Run >Debug) from the Eclipse menu bar.

Cheers.

]]> http://blog.shubhamsaxena.com/android-development-running-android-app/feed/ 1 Android Development – Getting Started http://blog.shubhamsaxena.com/android-development-getting-started/?utm_source=rss&utm_medium=rss&utm_campaign=android-development-getting-started http://blog.shubhamsaxena.com/android-development-getting-started/#comments Thu, 06 Dec 2012 08:10:33 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=308 Read more →]]> I hope the Android Development - Intro helped you in configuring your machine for developing Android apps, in this tutorial we will quick start our first Android app. Here is a step wise article.

Step 1 – Start the eclipse extracted from the adt-bundle  i.e  %….%adt-bundle-windows/eclipse/eclipse.exe

Step 2 – A workspace launcher will popup and you have to define the workspace for your android apps, workspace is the place where all the source files are kept.

Workspace Launcher

Step 3 – Once you have selected your workspace now your IDE is ready for you, Goto File>New>Android Application Project

Android Application Project

Step 4 – Next step is about configuring your project, it will have options like creating custom launcher and adding activity etc.

Configure Android Project

Step 5 – Hence we have checked Create custom launcher icon in the previous screen, this screen allows to add our custom launcher icon. Here I’m using the default icons.

Custom Launcher Icon

Step 6 – Next we have to decide the activity for our app, there are different types of activity available but for the beginners we will start with BlankActivity.

Create Activity Android Application

Step 7 -  In this screen you can give name to your activity.

Name Activity - Android

This was all the configuration part, its done now you can start your real coding. After completing the above steps, you will see a designer screen, where you can design and code your app.

New App Designer - Android

Now we have the blank app with the title MyFirstApk and “Hello world!” text in center. This is just a hello world app, lets start Running Android App.

]]> http://blog.shubhamsaxena.com/android-development-getting-started/feed/ 0 Android Development – Intro http://blog.shubhamsaxena.com/android-development-intro/?utm_source=rss&utm_medium=rss&utm_campaign=android-development-intro http://blog.shubhamsaxena.com/android-development-intro/#comments Thu, 06 Dec 2012 07:22:24 +0000 Shubham Saxena http://blog.shubhamsaxena.com/?p=304 Read more →]]> Since last few days I was trying to get my hands on some new technology, tried many but finally landed with Android Development. The only thing which attracted me to this is that I can deploy my apps directly to my phone. Here is a quick tutorial how to get started.

Android plugins are available in the major IDEs like Eclipse and NetBeans, I tried configuring with all but the ADT (Android Development Tool) available is easy to use and recommended. Just download the bundle and extract to a specific location and it does everything for you.

With a single download, the ADT Bundle includes everything you need to begin developing apps:

  • Eclipse + ADT plugin
  • Android SDK Tools
  • Android Platform-tools
  • The latest Android platform
  • The latest Android system image for the emulator

Android Development Tool

Stay Tuned for next posts on android development.

]]> http://blog.shubhamsaxena.com/android-development-intro/feed/ 4