tag:blogger.com,1999:blog-39239729863500800102024-03-25T19:35:53.423+05:30Milinda ProMilinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.comBlogger49125tag:blogger.com,1999:blog-3923972986350080010.post-6808681285286327742017-11-18T12:38:00.002+05:302017-11-18T12:46:00.234+05:30Knockout SVG Image Binding not Working. Solution Found!This post is about an issue I faced in Knockout to bind svg <image> and it was not showing the image inside the svg, even with correct binding with xlink:href<br />
<br />
My first attempt was,<br />
<br />
<script async="" src="//jsfiddle.net/o5r1d0jk/1/embed/js,html,result/"></script>
<br />
If you notice that, Image is not showing in the svg box.<br />
Reason: Because xlink:href attribute needs to be there even with empty value to initialize the HTML svg image.<br />
<br />
So, your image tag should be like this<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint html">
<image height="500" id="img1" width="500" <span style="color: red;"><b>xlink:href=""</b></span></code><br />
<code class="prettyprint html"> data-bind="attr:{'xlink:href': image}"></image>
</code>
</div>
<br />
<br />
<h3>
<span style="font-size: large;">Solution, with empty xlink:href attribute</span></h3>
<script async="" src="//jsfiddle.net/o5r1d0jk/2/embed/js,html,result/"></script>
<br />
Hope this may help to somebody with the same problem! Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-61891955767230273042017-09-26T20:17:00.000+05:302017-09-26T20:31:21.733+05:30Android Drag-Drop Button - A custom component for android developers<span style="font-size: large;"><a href="https://github.com/milindaaruna/android-drag-button" target="_blank">See on Github</a></span><br />
<br />
This is an open source android drag button custom component. You can use it on your project to show a drag-able icon and perform any action after user dragged to the edge of the component.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDz6zzERi3-FbnMAHtHGyepcDgDcAFz1nV_M23EFksLu7qQsUcrYMzvwag389x0r-3qXJy98XWEJ4OD_EdIG_hPeTmjpArYShAghhFGYAiLosS5So6zqT05dhLP-3wj2js4LKQZ1IihQ/s1600/Screenshot_20170926-165609.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="drag drop button screenshot" border="0" data-original-height="1600" data-original-width="900" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDz6zzERi3-FbnMAHtHGyepcDgDcAFz1nV_M23EFksLu7qQsUcrYMzvwag389x0r-3qXJy98XWEJ4OD_EdIG_hPeTmjpArYShAghhFGYAiLosS5So6zqT05dhLP-3wj2js4LKQZ1IihQ/s400/Screenshot_20170926-165609.png" title="android drag drop button" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">screenshot</td></tr>
</tbody></table>
<br />
Import aar file on <a href="https://github.com/milindaaruna/android-drag-button/tree/master/releases" target="_blank">releases directory</a> to your android project to include drag-drop button. Or you can download entire project and open from Android studio and compile to match with your sdk version, then you can import generated aar file to your real project.<br />
<br />
<h2>
<span style="font-size: x-large;">Example usage of the drag-drop-button</span></h2>
<span style="font-size: small;">This is a sample code for drag button inserting into ui and handling events.</span><br />
<br />
<span style="font-size: large;">xml code to put drag-drop button on the activity</span><br />
<div style="background-color: white; color: black; font-family: 'Courier New'; font-size: 9.0pt;">
<span style="color: navy;"><</span><span style="color: navy; font-weight: bold;">com.mili.dragdropbutton.DragButton</span>
<br />
<span style="color: navy; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:id=</span><span style="color: green; font-weight: bold;">"@+id/dragBtn"</span><br />
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_width=</span><span style="color: green; font-weight: bold;">"200dp"</span><br />
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:layout_height=</span><span style="color: green; font-weight: bold;">"200dp"</span><br />
<div style="border: solid 1px red;">
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">custom</span><span style="color: blue; font-weight: bold;">:imageBtnSizePercentage=</span><span style="color: green; font-weight: bold;">"0.25"</span><br />
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">custom</span><span style="color: blue; font-weight: bold;">:dragEndThresholdPercentage=</span><span style="color: green; font-weight: bold;">"0.10"</span><br />
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">custom</span><span style="color: blue; font-weight: bold;">:arrowCount=</span><span style="color: green; font-weight: bold;">"4"</span><br />
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">custom</span><span style="color: blue; font-weight: bold;">:arrowColor=</span><span style="color: green; font-weight: bold;">"#42f46e"</span><br />
<span style="color: green; font-weight: bold;"> </span><span style="color: #660e7a; font-weight: bold;">custom</span><span style="color: blue; font-weight: bold;">:iconFileName=</span><span style="color: green; font-weight: bold;">"icon2.png"</span>></div>
</<span style="color: navy; font-weight: bold;">com.mili.dragdropbutton.DragButton</span>></div>
<br />
Note:<br />
Needs to define custom namespace on parent tag as<br />
<pre style="background-color: white; color: black; font-family: 'Courier New'; font-size: 9.0pt;"><span style="color: blue; font-weight: bold;">xmlns:</span><span style="color: #660e7a; font-weight: bold;">custom</span><span style="color: blue; font-weight: bold;">=</span><span style="color: green; font-weight: bold;">"http://schemas.android.com/apk/res-auto"</span></pre>
<br />
See <a href="https://github.com/milindaaruna/android-drag-button/blob/master/app/src/main/res/layout/activity_main.xml" target="_blank">activity_main.xml</a> on test project for complete source code.<br />
<br />
<br />
<span style="font-size: large;">Java code to handle events</span><br />
<pre style="background-color: white; color: black; font-family: 'Courier New'; font-size: 9.0pt;">DragButton dragButton = (DragButton) findViewById(R.id.<span style="color: #660e7a; font-style: italic; font-weight: bold;">dragBtn</span>);
dragButton.setOnDraggedListener(<span style="color: navy; font-weight: bold;">new </span>DragButton.OnDraggedListener() {
<span style="color: olive;">@Override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>onDragged(DragButton view, MotionEvent e) {
Log.<span style="font-style: italic;">i</span>(<span style="color: green; font-weight: bold;">"DragBtn"</span>, <span style="color: green; font-weight: bold;">"Dragged"</span>);
}
});
dragButton.setOnDragStartedListener(<span style="color: navy; font-weight: bold;">new </span>DragButton.OnDragStartedListener() {
<span style="color: olive;">@Override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>onDragStarted(DragButton view, MotionEvent e) {
Log.<span style="font-style: italic;">i</span>(<span style="color: green; font-weight: bold;">"DragBtn"</span>, <span style="color: green; font-weight: bold;">"Drag started"</span>);
}
});
dragButton.setOnDragEndedListener(<span style="color: navy; font-weight: bold;">new </span>DragButton.OnDragEndedListener() {
<span style="color: olive;">@Override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">public void </span>onDragEnded(DragButton view, MotionEvent e) {
Log.<span style="font-style: italic;">i</span>(<span style="color: green; font-weight: bold;">"DragBtn"</span>, <span style="color: green; font-weight: bold;">"Drag ended"</span>);
}
});</pre>
See <a href="https://github.com/milindaaruna/android-drag-button/blob/master/app/src/main/java/com/mili/dragbutton/MainActivity.java" target="_blank">MainActivity.java</a> on test project for complete source code.<br />
<br />
<br />
<h2>
<span style="font-size: x-large;">Custom Attributes on xml</span></h2>
<span style="font-size: large;"><b>imageBtnSizePercentage</b></span><br />
<span style="font-size: large;"><span style="font-size: small;">Size of the center icon to draw related to the size of the button. Example- 1 will draw the center icon on entire button, 0.5 will draw half of the size of the button. </span></span><span style="font-size: large;"><span style="font-size: small;"><span style="font-size: large;"><span style="font-size: small;">Any value between 0-1.</span></span></span></span><br />
<br />
<b><span style="font-size: large;">dragEndThresholdPercentage</span></b><br />
<span style="font-size: large;"><span style="font-size: small;">Indicate the percentage area of the threshold to<span style="font-size: large;"> <span style="font-size: small;">fire the dragged event. Any value between 0-1.</span></span></span><b><br /></b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWaCo8RUVJfaRJFq2c5nrE3wOFkZC90e08ZXlP2UzQF4aEGNQC6pSB4SsZoemut1vgyNralDYd60Ce7_2UQp2XSrn45WniDgSVX_PRk3AI2bP1XyQMDauftLqe2jAo52TOfcGwAqZp3rc/s1600/draggable+area.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="864" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWaCo8RUVJfaRJFq2c5nrE3wOFkZC90e08ZXlP2UzQF4aEGNQC6pSB4SsZoemut1vgyNralDYd60Ce7_2UQp2XSrn45WniDgSVX_PRk3AI2bP1XyQMDauftLqe2jAo52TOfcGwAqZp3rc/s400/draggable+area.jpg" width="215" /></a></div>
<br />
<span style="font-size: large;"><b>arrowCount</b></span><br />
Number of arrow to show the drag direction. Any positive integer value<br />
<br />
<b><span style="font-size: large;">arrowColor</span></b><br />
Color of the arrows in hex format. Example- #42f46e<br />
<br />
<span style="font-size: large;"><b>iconFileName</b></span><br />
<span style="font-size: large;"><span style="font-size: small;">Path to the image file for center icon on assert folder. 512x512 is the recommended size. </span></span><br />
<span style="font-size: large;"><span style="font-size: small;">Example- icon2.png</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo-TheiRpIIR6mLn7HMSxg0F7Qp2amSb2oYLaU0l6ktT9g7VanXQVeUXz71dUXavLmDsJIM9aOeadd8a18fIPO4krd2TKY47zPxj032y6md-afY3Jz69dZuHFne8kKY-p27SdwtcnyfRI/s1600/assert.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo-TheiRpIIR6mLn7HMSxg0F7Qp2amSb2oYLaU0l6ktT9g7VanXQVeUXz71dUXavLmDsJIM9aOeadd8a18fIPO4krd2TKY47zPxj032y6md-afY3Jz69dZuHFne8kKY-p27SdwtcnyfRI/s1600/assert.jpg" /></a></div>
<span style="font-size: large;"><span style="font-size: small;"> </span><b> </b></span>Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com1tag:blogger.com,1999:blog-3923972986350080010.post-57060469836735004882017-09-26T10:28:00.001+05:302017-09-26T10:29:12.441+05:30How to install Adobe Flash Player plug-in for Firefox on Ubuntu<a href="http://milindapro.blogspot.com/2017/09/is-flash-player-installed.html" target="_blank">Click here</a> to check flash player on your browser<br />
<br />
Adobe flash player is also a plug-in for for Mozilla Firefox to view flash videos (ex: <a href="http://www.youtube.com/">youtube</a> videos) and play flash on-line games, etc. Therefore flash player became essential plug-in for most of the web browsers until HTML 5 take place (because HTML 5 has new capabilities those can challenge to flash player such as video playing).<br />
<br />
This article describe how to install <b>Adobe Flash Player plug-in for Firefox on Ubuntu</b><br />
<br />
You might be think, is this a very harder thing?<br />
<br />
Yes, some times.<br />
<br />
Because, Ubuntu software center and Synaptic package manager can use to install flash player plug-in for some Ubuntu versions and it will simply works. <i><b>But some Ubuntu distribution such as Ubuntu 16.04 needs to follow following few steps to make it work correctly.</b></i><br />
<br />
<span style="font-size: large;"><b>Step 1</b></span>- Download latest Adobe Flash Player Plug-in form <a href="http://get.adobe.com/flashplayer/">here</a>.(Select download option as 'tar.gz for other Linux')<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uy14F2UtxdnYh2OrZBfTqNb-ByZBCHD0eE2gN53cxNtDGXc6cU1Y7eBnCbZNn2mDFF0xnx-hmPQsIb7sI9QBZCJKGWTsP87ZQNPCsFrKflviNimNPQQfKb0Y0yNE-f_1cLcXPgvKaGA/s1600/vlcsnap-2017-09-26-10h10m17s615.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="767" data-original-width="1407" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uy14F2UtxdnYh2OrZBfTqNb-ByZBCHD0eE2gN53cxNtDGXc6cU1Y7eBnCbZNn2mDFF0xnx-hmPQsIb7sI9QBZCJKGWTsP87ZQNPCsFrKflviNimNPQQfKb0Y0yNE-f_1cLcXPgvKaGA/s640/vlcsnap-2017-09-26-10h10m17s615.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<b><span style="font-size: large;">Step 2</span></b>- Extract downloaded file into any directory. (extracted file should be .so format)<br />
<br />
<b><span style="font-size: large;">Step 3</span></b>- Open terminal (Application --> Accessories --> Terminal or Ctrl+Alt+T)<br />
<br />
<b><span style="font-size: large;">Step 4</span></b>- Type following command<br />
<br />
<div style="border-style: solid; border-width: 2px; font-family: "Courier New",Courier,monospace;">
sudo -i</div>
<br />
Now it will prompt you the Password. Now enter the password and press enter <br />
<br />
<b><span style="font-size: large;">Step 5</span></b>- Goto directory that contain extracted .so file using cd command (Ex: cd Downlods)<br />
<br />
<span style="font-size: large;"><b>Step 6</b></span>- Copy that .so file into /usr/lib/mozilla/plugins directory. To copy that file use following command.<br />
<br />
<div style="border-style: solid; border-width: 2px; font-family: "Courier New",Courier,monospace;">
cp [fileName].so /usr/lib/firefox-addons/plugins</div>
<br />
(Ex: cp libflashplayer.so /usr/lib/firefox-addons/plugins)<br />
<br />
<b><span style="font-size: large;">Step 7</span></b>- Restart the system to make changes appear to Firefox.<br />
<br />
It is better to close all the Firefox related windows before copy the .so file. Remember you should restart the system to make plug-in work correctly (Not only restart Firefox)<br />
<br />
If this article helpful to some one please do not forget to comment about it.<br />
<br />
See how to do this from videos!<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/HsX7sDsED_8" width="560"></iframe>
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/1RIQpH6lxCM" width="560"></iframe>
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-37512941704725297372017-09-21T15:12:00.003+05:302017-09-26T11:01:31.610+05:30Is flash player installed?<div style="display: none;">
This page allows you to check whether your browser has flash player installed.<br />
and detect the installed flash player version.<br />
The check perfectly works on Firefox and Chrome.<br />
Check how you can install flash, if it says NO!<br />
Click here to read how to install, or watch following videos.
Adobe flash player is also a plug-in for for Mozilla Firefox to view flash videos (ex: youtube videos) and play flash on-line games, etc. Therefore flash player became essential plug-in for most of the web browsers until HTML 5 take place (because HTML 5 has new capabilities those can challenge to flash player such as video playing).
This article describe how to install Adobe Flash Player plug-in for Firefox on Ubuntu
</div>
<style>
#flash-yes-icon{
background: #31bd00;
}
#flash-no-icon{
background: #bd1400;
}
.flash-yes-no {
border-radius: 108px;
border-style: solid;
border-width: 8px;
border-color: #e3e3e3 #bdbdbd;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
font-size: 75px;
line-height: 200px;
}
#flash-yes, #flash-no{
display: none;
margin-right: auto; margin-left: auto;
}
</style>
<br />
<div id="flash-yes">
<div class="flash-yes-no" id="flash-yes-icon">
YES!</div>
Congratulations! Flash player has installed
</div>
<div id="flash-no">
<div class="flash-yes-no" id="flash-no-icon">
NO!</div>
Flash player has not installed or blocked by browser
</div>
<br />
<div id="targetfl">
</div>
<br />
This page allows you to check whether your browser has flash player installed. and detect the installed flash player version. The check perfectly works on Firefox and Chrome.<br />
<br />
<h2>
</h2>
<h2>
Check how you can install flash, if it says <span style="color: red;">NO!</span></h2>
<br />
<a href="https://milindapro.blogspot.com/2017/09/how-to-install-adobe-flash-player-plug.html" target="_blank">Click here</a> to read how to install, or watch following videos<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/HsX7sDsED_8" width="560"></iframe>
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/1RIQpH6lxCM" width="560"></iframe>
<br />
<br />
This page is using <a href="http://www.featureblend.com/javascript-flash-detection-library.html" target="_blank">JavaScript Flash Detection Library (Flash Detect)</a> by
<i>Carl S. Yestrau.</i> So thanks for creating such a nice library!
<script type="text/javascript">
/*
Copyright (c) Copyright (c) 2007, Carl S. Yestrau All rights reserved.
Code licensed under the BSD License: http://www.featureblend.com/license.txt
Version: 1.0.4
*/
var FlashDetect = new function(){
var self = this;
self.installed = false;
self.raw = "";
self.major = -1;
self.minor = -1;
self.revision = -1;
self.revisionStr = "";
var activeXDetectRules = [
{
"name":"ShockwaveFlash.ShockwaveFlash.7",
"version":function(obj){
return getActiveXVersion(obj);
}
},
{
"name":"ShockwaveFlash.ShockwaveFlash.6",
"version":function(obj){
var version = "6,0,21";
try{
obj.AllowScriptAccess = "always";
version = getActiveXVersion(obj);
}catch(err){}
return version;
}
},
{
"name":"ShockwaveFlash.ShockwaveFlash",
"version":function(obj){
return getActiveXVersion(obj);
}
}
];
/**
* Extract the ActiveX version of the plugin.
*
* @param {Object} The flash ActiveX object.
* @type String
*/
var getActiveXVersion = function(activeXObj){
var version = -1;
try{
version = activeXObj.GetVariable("$version");
}catch(err){}
return version;
};
/**
* Try and retrieve an ActiveX object having a specified name.
*
* @param {String} name The ActiveX object name lookup.
* @return One of ActiveX object or a simple object having an attribute of activeXError with a value of true.
* @type Object
*/
var getActiveXObject = function(name){
var obj = -1;
try{
obj = new ActiveXObject(name);
}catch(err){
obj = {activeXError:true};
}
return obj;
};
/**
* Parse an ActiveX $version string into an object.
*
* @param {String} str The ActiveX Object GetVariable($version) return value.
* @return An object having raw, major, minor, revision and revisionStr attributes.
* @type Object
*/
var parseActiveXVersion = function(str){
var versionArray = str.split(",");//replace with regex
return {
"raw":str,
"major":parseInt(versionArray[0].split(" ")[1], 10),
"minor":parseInt(versionArray[1], 10),
"revision":parseInt(versionArray[2], 10),
"revisionStr":versionArray[2]
};
};
/**
* Parse a standard enabledPlugin.description into an object.
*
* @param {String} str The enabledPlugin.description value.
* @return An object having raw, major, minor, revision and revisionStr attributes.
* @type Object
*/
var parseStandardVersion = function(str){
var descParts = str.split(/ +/);
var majorMinor = descParts[2].split(/\./);
var revisionStr = descParts[3];
return {
"raw":str,
"major":parseInt(majorMinor[0], 10),
"minor":parseInt(majorMinor[1], 10),
"revisionStr":revisionStr,
"revision":parseRevisionStrToInt(revisionStr)
};
};
/**
* Parse the plugin revision string into an integer.
*
* @param {String} The revision in string format.
* @type Number
*/
var parseRevisionStrToInt = function(str){
return parseInt(str.replace(/[a-zA-Z]/g, ""), 10) || self.revision;
};
/**
* Is the major version greater than or equal to a specified version.
*
* @param {Number} version The minimum required major version.
* @type Boolean
*/
self.majorAtLeast = function(version){
return self.major >= version;
};
/**
* Is the minor version greater than or equal to a specified version.
*
* @param {Number} version The minimum required minor version.
* @type Boolean
*/
self.minorAtLeast = function(version){
return self.minor >= version;
};
/**
* Is the revision version greater than or equal to a specified version.
*
* @param {Number} version The minimum required revision version.
* @type Boolean
*/
self.revisionAtLeast = function(version){
return self.revision >= version;
};
/**
* Is the version greater than or equal to a specified major, minor and revision.
*
* @param {Number} major The minimum required major version.
* @param {Number} (Optional) minor The minimum required minor version.
* @param {Number} (Optional) revision The minimum required revision version.
* @type Boolean
*/
self.versionAtLeast = function(major){
var properties = [self.major, self.minor, self.revision];
var len = Math.min(properties.length, arguments.length);
for(i=0; i<len; i++){
if(properties[i]>=arguments[i]){
if(i+1<len && properties[i]==arguments[i]){
continue;
}else{
return true;
}
}else{
return false;
}
}
};
/**
* Constructor, sets raw, major, minor, revisionStr, revision and installed public properties.
*/
self.FlashDetect = function(){
if(navigator.plugins && navigator.plugins.length>0){
var type = 'application/x-shockwave-flash';
var mimeTypes = navigator.mimeTypes;
if(mimeTypes && mimeTypes[type] && mimeTypes[type].enabledPlugin && mimeTypes[type].enabledPlugin.description){
var version = mimeTypes[type].enabledPlugin.description;
var versionObj = parseStandardVersion(version);
self.raw = versionObj.raw;
self.major = versionObj.major;
self.minor = versionObj.minor;
self.revisionStr = versionObj.revisionStr;
self.revision = versionObj.revision;
self.installed = true;
}
}else if(navigator.appVersion.indexOf("Mac")==-1 && window.execScript){
var version = -1;
for(var i=0; i<activeXDetectRules.length && version==-1; i++){
var obj = getActiveXObject(activeXDetectRules[i].name);
if(!obj.activeXError){
self.installed = true;
version = activeXDetectRules[i].version(obj);
if(version!=-1){
var versionObj = parseActiveXVersion(version);
self.raw = versionObj.raw;
self.major = versionObj.major;
self.minor = versionObj.minor;
self.revision = versionObj.revision;
self.revisionStr = versionObj.revisionStr;
}
}
}
}
}();
};
FlashDetect.JS_RELEASE = "1.0.4";
//alert("ok");
function GenerateDemo(){
var targetObj = document.getElementById("targetfl");
var yesIcon = document.getElementById("flash-yes");
var noIcon = document.getElementById("flash-no");
targetObj.innerHTML += "<h2"+">"+"Status and installed version"+"</h2"+">";
var style = "";
for(var i in FlashDetect){
if(typeof FlashDetect[i] != "function" && typeof FlashDetect[i] != "undefined"){
if(i == 'installed' && !FlashDetect[i]){
style = 'style="color:red"';
noIcon.style.display = "table";
}
if(i == 'installed' && FlashDetect[i]){
style = 'style="color:green"';
yesIcon.style.display = "table";
}
targetObj.innerHTML += "<"+"div " + style + ">"+"<"+"strong"+">" + i + ":<"+"/strong"+"> " + FlashDetect[i] + "</div"+">";
style = "";
}
}
}
GenerateDemo();
</script>
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com14tag:blogger.com,1999:blog-3923972986350080010.post-8425195897402983542017-07-17T05:11:00.002+05:302017-07-17T05:11:21.196+05:30Simple SignalR chat programSignalR is a library which enables real-time web functionality and bi-directional communication between server and connected clients. That's mean SignalR server can force clients to get updated and/or client(s) can force server to get updated. Also SignalR supports web sockets.<br />
<br />
Before start coding for SignalR let's clarify some keywords on SignalR.<br />
<br />
<span style="font-size: large;">SignalR Server</span><br />
SignalR server is a .net program that runs on a server machine. This handles all the requests (or function calls) made by clients and responsible for updating corresponding clients also.<br />
<br />
<span style="font-size: large;">SignalR Client</span><br />
SignalR client is either a .net program or a web app which run on client machine. These clients can connect or disconnect to a SignalR server.<br />
<br />
<span style="font-size: large;">SignalR Hub</span><br />
SignalR hub is the intermediate party which handle communication between SignalR server and SignalR client(s). This hub is already implemented by the library itself, so we don't need to code for this!<br />
<br />
<span style="font-size: large;">Simple Idea...</span><br />
Simply if you have a web SignalR client, SignalR server can directly call your javascript function. Also your web client can directly call SignalR server function.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecsMlhsc0uw5sY2vS-vrGO_qyeAvXb0WD0ppmEDJOCpTz9_LPNI9zsbewXOH6fv83Uc8xvbnGE0UG4o5u_-DRf9yDC9SaQm1ApV5xHz5ESsXCglhMZqkBkbxnOi66hA1GKwW-rtS8Ez8/s1600/signalr+description+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecsMlhsc0uw5sY2vS-vrGO_qyeAvXb0WD0ppmEDJOCpTz9_LPNI9zsbewXOH6fv83Uc8xvbnGE0UG4o5u_-DRf9yDC9SaQm1ApV5xHz5ESsXCglhMZqkBkbxnOi66hA1GKwW-rtS8Ez8/s640/signalr+description+1.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDUSQQ_vNVzeZeg1dYqJPlnTeGbO6X1ZRLEhM7Ti1AcfOj8TouQfzS-5OOk1PH6Qykwkqa_-nYP5VU9NX4LdvXEe9u16Grmd4MyuOWkYn3Asc0d-CxOsSNU6GfIldTPQlABoO3KBE3Fo/s1600/signalr+description+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDUSQQ_vNVzeZeg1dYqJPlnTeGbO6X1ZRLEhM7Ti1AcfOj8TouQfzS-5OOk1PH6Qykwkqa_-nYP5VU9NX4LdvXEe9u16Grmd4MyuOWkYn3Asc0d-CxOsSNU6GfIldTPQlABoO3KBE3Fo/s640/signalr+description+2.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Note - SignalR client can be either a web (HTML/Javascript) app or a .net desktop app.<br />
<br />
First let's create SignalR server app now!<br />
<h2>
<span style="font-size: large;"><br /></span></h2>
<span style="font-size: x-large;"><b>SignalR Server</b></span><br />
SignalR server is a .net program that runs on a server machine. You can follow these steps to create SignalR server in Visual Studio.<br />
<br />
<b><span style="font-size: large;">Step 1</span></b><br />
Create a new winform project in Visual Studio.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgB_BhJXcFzqzFfKKUonTbbCvRGQz1SPSCIkIZMlpc0M2RYijf5dMRPCp7UeygmFQt3aKB_vz2AxmKIuxa2CGwxWjduAWuIyayNxDhBDouuJgMnKoE-Q8XDneMLxQLuCISmyDM0KvQUo/s1600/signalr+step+0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="355" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgB_BhJXcFzqzFfKKUonTbbCvRGQz1SPSCIkIZMlpc0M2RYijf5dMRPCp7UeygmFQt3aKB_vz2AxmKIuxa2CGwxWjduAWuIyayNxDhBDouuJgMnKoE-Q8XDneMLxQLuCISmyDM0KvQUo/s640/signalr+step+0.jpg" width="640" /></a></div>
<br />
<br />
<b><span style="font-size: large;">Step 2</span></b><br />
Since SignalR is a library, we need to add set of dll files to our project as references. The easiest way to add references and its' dependencies is <b>Nuget. </b>Nuget is a smart library management tool in visual studio. Let's add relavant libraries for SignalR. First right click on project references and open Nuget package manager dialog box.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkDH6zv2Vfu5nB5eJXoIa2FCVDKr4joQRP-XiqtgJQc9ZR3mrn3K4J12amNpv50yLe2XUESJo-OulFbCpiBMWT3U95UeZulBsAMAwDLatCvYTS3zFqtL8ppDltf5f1W2xngleRfVNk1U/s1600/signalr+step+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkDH6zv2Vfu5nB5eJXoIa2FCVDKr4joQRP-XiqtgJQc9ZR3mrn3K4J12amNpv50yLe2XUESJo-OulFbCpiBMWT3U95UeZulBsAMAwDLatCvYTS3zFqtL8ppDltf5f1W2xngleRfVNk1U/s1600/signalr+step+1.jpg" /></a></div>
<br />
<b><span style="font-size: large;">Step 3</span></b><br />
Type "<b>signalr self host</b>" in search box and click on install on the first item of the search result. Make sure the id is equal to <b>"Microsoft.AspNet.SignalR.SelfHost"</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFaGT50owwd4G9JLrkjVeVDrr43abK3j4ghIc1pG9NN4ZnDSpjMD4bsiStAiAiLEJjCGR9UYQZC0x6jjxYzKuf80f_3MtqHgAPFx6h1MhVVpNDBYy3DeGGkVNbC6v5qF7Bub75MjlXMpU/s1600/signalr+step+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFaGT50owwd4G9JLrkjVeVDrr43abK3j4ghIc1pG9NN4ZnDSpjMD4bsiStAiAiLEJjCGR9UYQZC0x6jjxYzKuf80f_3MtqHgAPFx6h1MhVVpNDBYy3DeGGkVNbC6v5qF7Bub75MjlXMpU/s640/signalr+step+2.jpg" width="640" /></a></div>
<br />
<b><span style="font-size: large;">Step 4</span></b><br />
Next search as <b>"Owin Cors" </b>and install the item which the id is <b>"Microsoft.Owin.Cors"</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQV_zB8xoiWz2y2Bbg2KcHqk7HR1DGNFiRG3SyQDE4idpy3AEP97jP3xQyqFLjCtcHztz6TcegbF0xp4uzBzZhNvBvui9x16fRcjlP0tN09zd54YLsFkse1tflEYWOlGIVOIpom6oH1E/s1600/signalr+step+3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQV_zB8xoiWz2y2Bbg2KcHqk7HR1DGNFiRG3SyQDE4idpy3AEP97jP3xQyqFLjCtcHztz6TcegbF0xp4uzBzZhNvBvui9x16fRcjlP0tN09zd54YLsFkse1tflEYWOlGIVOIpom6oH1E/s640/signalr+step+3.jpg" width="640" /></a></div>
<b> </b><br />
<span style="font-size: large;"><b>Step 5</b></span><br />
Next search as <b>"Microsoft AspNet SignalR Client" </b>and install the item which the id is <b>"Microsoft.AspNet.SignalR.Client"</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9nkTSyrQRHCzESy3Uqw8TR3ahCVrsxJZZn541VnTjH5eIeGWW2r_dQwivZQecJGMEhfHv-EWS6NfUliNLcDc30ToJfrfi5zGeDN4ht_aSgp-pG7DY1ihHxl0XXb6Y7AM5-wbBOvBXfw/s1600/signalr+step+4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9nkTSyrQRHCzESy3Uqw8TR3ahCVrsxJZZn541VnTjH5eIeGWW2r_dQwivZQecJGMEhfHv-EWS6NfUliNLcDc30ToJfrfi5zGeDN4ht_aSgp-pG7DY1ihHxl0XXb6Y7AM5-wbBOvBXfw/s640/signalr+step+4.jpg" width="640" /></a></div>
<br />
<span style="font-size: small;"><b>Note- </b>Step 3,4 and 5 will add several dll files and its' dependencies automatically.</span><br />
<br />
<b><span style="font-size: large;">Step 6</span></b><br />
Now we are done with Nuget, next reference can be added using system references. Therefore close Nuget package manager and open <b>Reference Manager </b>dialog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_TUAzTUn7C73EJZhC_v3jK7h4_2S7x0i7ixv3uvQGtffrDhB0Ybz0azJtVF_yirmfJvT6koTnNydOy7TMD5p2wiVU0WMPZQrMYminAER9WZNgh47sZyNr6wp-TQ9zFdqzBRFiVcF2hU/s1600/signalr+step+5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_TUAzTUn7C73EJZhC_v3jK7h4_2S7x0i7ixv3uvQGtffrDhB0Ybz0azJtVF_yirmfJvT6koTnNydOy7TMD5p2wiVU0WMPZQrMYminAER9WZNgh47sZyNr6wp-TQ9zFdqzBRFiVcF2hU/s1600/signalr+step+5.jpg" /></a></div>
<br />
<span style="font-size: large;"><b>Step 7</b></span><br />
Then add <b>"System.Net.Http" </b>reference and click on ok.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyv5dYb98DoQqFTr4TG52V4-sG7TwsglxGW0BXeLBYyynKndQQ2Uj_pUA0Gmyca357U9tXmzs9LUQSYuChnYHUh7mTUWlyWXVfUvNJJqplY231xFHOSiKPh_3FYDfLkW8O5_0MILYT4Ts/s1600/signalr+step+6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyv5dYb98DoQqFTr4TG52V4-sG7TwsglxGW0BXeLBYyynKndQQ2Uj_pUA0Gmyca357U9tXmzs9LUQSYuChnYHUh7mTUWlyWXVfUvNJJqplY231xFHOSiKPh_3FYDfLkW8O5_0MILYT4Ts/s640/signalr+step+6.jpg" width="640" /></a></div>
<br />
After these all the steps, you should be able to see all the references as on following image.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74nBRcP08zpFDAnkJniTJG5QMteK3DwuROT1rqYmIvSFTg9dm86vgXCN_BBCRYcLODdsB6NZ_hGZp3U3OUO6KkjKtQeonWPcuVMH2lht6dycnpEG4bRyhcsOVBIuIIugbQIbuNCJxlfw/s1600/signalr++after+step+6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74nBRcP08zpFDAnkJniTJG5QMteK3DwuROT1rqYmIvSFTg9dm86vgXCN_BBCRYcLODdsB6NZ_hGZp3U3OUO6KkjKtQeonWPcuVMH2lht6dycnpEG4bRyhcsOVBIuIIugbQIbuNCJxlfw/s1600/signalr++after+step+6.jpg" /></a></div>
<br />
<br />
<span style="font-size: large;"><b>Step 8</b></span><br />
Next let's create a class to manage signalR connection. Right click on the project and select "Add-->Class" then change the class name as <code class="prettyprint lang-c">SignalRServer </code>and click ok. Since that project that we are going to do is a winform signalR server, let's create a server class as follows.<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
class SignalRServer<br />{<br /> private IDisposable SignalR { get; set; }<br /> public const string ServerURI = "http://localhost:8181";<br /><br /> public bool StartServer()<br /> {<br /> try<br /> {<br /> SignalR = WebApp.Start(ServerURI);<br /> }<br /> catch (TargetInvocationException)<br /> {<br /> return false;<br /> }<br /><br /> Console.WriteLine("Server started at " + ServerURI);<br /> return true;<br /> }<br /><br /> public void StopServer()<br /> {<br /> if (SignalR != null)<br /> SignalR.Dispose();<br /> }<br />}
</code>
</div>
<br />
<span style="font-size: small;"><b>Code Explained...</b></span><br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
private IDisposable SignalR { get; set; }<br />public const string ServerURI = "http://localhost:8181";</code>
</div>
'SignalR' is the server instance of the class, and here it defines the server url for the server that we are going to run.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
public bool StartServer()<br />{<br /> try<br /> {<br /> SignalR = WebApp.Start(ServerURI);<br /> }<br /> catch (TargetInvocationException)<br /> {<br /> return false;<br /> }<br /> Console.WriteLine("Server started at " + ServerURI);<br /> return true;<br />}</code>
</div>
This method responsible for starting the server. Note that it is starting the server as a web app and accepting the server url which we defined already within the class.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">public void StopServer()</code><br />
<code class="prettyprint lang-c">{<br /> if (SignalR != null)<br /> SignalR.Dispose();<br />}
</code>
</div>
Here, it is just disposing the signalr server instance then it will allow to close the signalr connections.<br />
<br />
All together, this is a simple signalr server class which handle simple basic signalr operations.<br />
<br />
Next time I will discuss how to create singnalR client in both winform and web !<br /><br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com1tag:blogger.com,1999:blog-3923972986350080010.post-34015700423156001452016-12-02T17:27:00.003+05:302016-12-02T18:11:27.262+05:30Simple AForge.net tutorial - getting start with AForge<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMOuiHqfrRjv_w_FTpy3KRdLBJS_bPKO_a2fI_CGc_TmCmgQ0EUP8pZ-sPHFJ4A5qSYa1AurMV1xwTEMTh2k4fFBO4QVXoovoClHbSI2Eda2FLyz_OEDfqZaQQb7z5BN4PCI5U-aAlRk/s1600/aforge+tutorial+1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMOuiHqfrRjv_w_FTpy3KRdLBJS_bPKO_a2fI_CGc_TmCmgQ0EUP8pZ-sPHFJ4A5qSYa1AurMV1xwTEMTh2k4fFBO4QVXoovoClHbSI2Eda2FLyz_OEDfqZaQQb7z5BN4PCI5U-aAlRk/s320/aforge+tutorial+1.jpg" width="320" /></a></div>
<b>AForge.NET</b> is a powerful C# framework designed for the fields of
Computer Vision and Artificial Intelligence, image processing, neural networks, genetic algorithms,
machine learning, robotics, etc.<br />
<br />
This is a simple and quick tutorial that describes how to setup Visual Studio environment to work with AForge.net. At the end of this tutorial you will have a C# project with all the required dll files for AForge.net and a simple few line code to convert RBG C# Bitmap image to grayscale image.<br />
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHna09BOGVOQlhsVzg/view?usp=sharing" target="_blank">
<img alt=" " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHna09BOGVOQlhsVzg/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.</div>
<br />
<br />
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;">Step 1 - Create new project</span></h3>
Open Visual Studio IDE and create a new project, Goto <b>File-->New-->Project</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHuaeijeo7SbAzaJ3KHkGxmI9MY64tGmYt0MCsAZb2VKxKBL5vXhZ-braS5xE6f3rtjYNQQEbRvE2v5SEo4J2AaLS4xQfxIGwjDGSdIMRsTO0iNYeAq0ucPoXg6_lYVaJzzj-6UTrF24/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHuaeijeo7SbAzaJ3KHkGxmI9MY64tGmYt0MCsAZb2VKxKBL5vXhZ-braS5xE6f3rtjYNQQEbRvE2v5SEo4J2AaLS4xQfxIGwjDGSdIMRsTO0iNYeAq0ucPoXg6_lYVaJzzj-6UTrF24/s1600/1.jpg" /></a></div>
<br />
Create a C# winform Application project by selecting <b>Windows Forms Application</b> from the list and give it a proper name and folder to save the project<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Q3P_S2-YX-TBfSa6XzCC3q2ZoWQVNI0VY0JmYJJe6l0Rhv5ggpcWt8hwBUhZ6wXy9MrocKtpwkezYd5vPMmNFIi8i-TMva-BL-0b_iCJladBdckcD0wSVOcZfHjA1G58GGyQ05d7xRE/s1600/1-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Q3P_S2-YX-TBfSa6XzCC3q2ZoWQVNI0VY0JmYJJe6l0Rhv5ggpcWt8hwBUhZ6wXy9MrocKtpwkezYd5vPMmNFIi8i-TMva-BL-0b_iCJladBdckcD0wSVOcZfHjA1G58GGyQ05d7xRE/s640/1-1.jpg" width="640" /></a></div>
<br />
<h3>
<span style="font-size: x-large;">Step 2 - Add references for AForge.net</span></h3>
Open solution explorer and right click on your project then select<b> Manage NuGet Packages...</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZlmaC1oN6zLNga_e-61WgeVWirb8oanjYGd2nzTIF9-0pT8WT-_6xsUGX0jRZ_ma1uNyZaACxhRFtYSCHi7nnhHZ7xU6Yyevfqh-NmbQiVA5aOOknmisokIdmXSwiIyiqTE8a4e5Wzg/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZlmaC1oN6zLNga_e-61WgeVWirb8oanjYGd2nzTIF9-0pT8WT-_6xsUGX0jRZ_ma1uNyZaACxhRFtYSCHi7nnhHZ7xU6Yyevfqh-NmbQiVA5aOOknmisokIdmXSwiIyiqTE8a4e5Wzg/s1600/2.jpg" /></a></div>
This will open a new window to manage your references via NuGet. NuGet is a nice way to keep your references, But this required your computer connected to internet. Therefore make sure your dev machine connected to internet when you try next step.<br />
<br />
Now, simply search for <b>aforge </b>on the search box and click on install button on the <b>AForge.Imaging </b>library. So this will take few seconds to download all the dependencies and the library itself to your project.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZT3TcTJwhJRjeRmDEheSVXPgxH-LKG44b34JC0eIWaZ6v_ifenA-WsGFI1pV84gBsEDr46GBIgp5vc5ZcF90-pfSVNe9sbyuthKqsfR86ojfrjmTsyeLkpHPWQOwCnxBG06XMlqvWbc/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZT3TcTJwhJRjeRmDEheSVXPgxH-LKG44b34JC0eIWaZ6v_ifenA-WsGFI1pV84gBsEDr46GBIgp5vc5ZcF90-pfSVNe9sbyuthKqsfR86ojfrjmTsyeLkpHPWQOwCnxBG06XMlqvWbc/s640/4.jpg" width="640" /></a></div>
Note that the coolest thing in the NuGet is that you do not need to worry about dependencies of a library, it will take care of all required libraries for the one that you want to install.<br />
<br />
After you are done with the installation, your References for the project will looks like this,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOhTerWe7nCalZeDVrmpI7_y4fm2A-Ua9R1tZsLoB126XxgrAiXdCzwj9Sp-BZp9hUoG2lXcmUc5Z68JkqljxXxgdSC-ByYTo930dwV56JycPZ8fOMuqLgXpsuQ60T8hmfuKSVj3lzno/s1600/aforge+referencces.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOhTerWe7nCalZeDVrmpI7_y4fm2A-Ua9R1tZsLoB126XxgrAiXdCzwj9Sp-BZp9hUoG2lXcmUc5Z68JkqljxXxgdSC-ByYTo930dwV56JycPZ8fOMuqLgXpsuQ60T8hmfuKSVj3lzno/s1600/aforge+referencces.jpg" /></a></div>
<br />
<h3>
<span style="font-size: x-large;">Step 3 - Create winform </span></h3>
Now, let's do some UI to do our magic. Click on tool bar and draw a button. You can give it a proper name and text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUg4WICULBeMgT6Em_eNqG4Zs4y4rI-qBYDFFuIVbXClMDnBzKeZPWTkAraHrzQwHSE0GCmYeSAZEsHQBisxiPeMaMHDJbaD4pIxmoP6vPX2zU14p5wv-o_Cm3wzugfO-Zop-S3Ab2rOo/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="494" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUg4WICULBeMgT6Em_eNqG4Zs4y4rI-qBYDFFuIVbXClMDnBzKeZPWTkAraHrzQwHSE0GCmYeSAZEsHQBisxiPeMaMHDJbaD4pIxmoP6vPX2zU14p5wv-o_Cm3wzugfO-Zop-S3Ab2rOo/s640/5.jpg" width="640" /></a></div>
I called my button as <b>Process </b>and named it as <b>btnProcess. </b>So let's make some code in the next step.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 4 - Code it !!!</span></h3>
Double click on the <b>Process </b>button in your winform designer and Visual Studio will open the code view and automatically add a <b>Click event </b>for your button. So let's do our coding inside the click event, then it will execute the code when you click on the Process button.<br />
<br />
Since this code needs to convert an RGB image to grayscale, we need to apply a filter on AForge.net called <b>Grayscale</b>. Therefore we need to create the filter first.<br />
<br />
Type <b>Grayscale </b>in the code and Visual Studio will give you an error says that <b>"The type or namespace name 'Grayscale' could not be found (are you missing a using directive or an assembly reference?)"</b>. That's mean, we didn't import AForge namespace to this file still.<br />
To fix this error, either you can type <code class="prettyprint lang-c">using AForge.Imaging.Filters;</code> or Right on Grayscale and select <b>Resolve-->using AForge.Imaging.Filters;</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmC4h8oPXEwTvRY4MQ-hZaf2awhKLqCEbboI4zrEV8avzjI9BH-i_GMaublvlyoje6cR6XiydH9_VVK7gA5-ZHi2o0nWjj0y9ImfawaGIGPFjzrCkYDmz6hkjo68eg8_VDApike8VxDE/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="527" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmC4h8oPXEwTvRY4MQ-hZaf2awhKLqCEbboI4zrEV8avzjI9BH-i_GMaublvlyoje6cR6XiydH9_VVK7gA5-ZHi2o0nWjj0y9ImfawaGIGPFjzrCkYDmz6hkjo68eg8_VDApike8VxDE/s640/6.jpg" width="640" /></a></div>
Either case your code should be like this and note that you will have <code class="prettyprint lang-c">using AForge.Imaging.Filters;</code> at the top of your file.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCizL0JJSptgLq8dhu3JK2Ed2uCrxdlqJH-4_7k8_dm3RW3X0InVVNyXCHv3v77pa3_yqP-tGfsUo3bVLf4ohqNJzqSkRBabgMJzRI9Dk4UY9zi_VW_o23UdYmqWNfh-BmtsPp1r6XyZE/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCizL0JJSptgLq8dhu3JK2Ed2uCrxdlqJH-4_7k8_dm3RW3X0InVVNyXCHv3v77pa3_yqP-tGfsUo3bVLf4ohqNJzqSkRBabgMJzRI9Dk4UY9zi_VW_o23UdYmqWNfh-BmtsPp1r6XyZE/s1600/7.jpg" /></a></div>
<br />
Now, type the following code to open an image and apply the grayscale filter and save it back to the disk.<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">Grayscale filter = new Grayscale(0.2, 0.2, 0.2);<br /><br />Bitmap img = (Bitmap)Image.FromFile("test.jpg");<br />Bitmap grayImage = filter.Apply(img);<br />grayImage.Save("grayImage.jpg");</code></div>
<br />
<b>Code Explained...</b><br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">Grayscale filter = new Grayscale(0.2, 0.2, 0.2);</code></div>
This will create the AForge filter named Grayscale and I am setting Red, Green, and Blue coefficients to 0.2, you can change this value and test, so it will give you different results.<br />
<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">Bitmap img = (Bitmap)Image.FromFile("test.jpg");</code></div>
Here, I am opening a jpg file into a <code class="prettyprint lang-c">System.Drawing.Bitmap</code> type object. Note that, if your image is in a different path, you need to type the full path of the jpg file instead of <b>test.jpg</b>.<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">Bitmap grayImage = filter.Apply(img);</code></div>
This is the place that magic happens, <code class="prettyprint lang-c">img</code> is our source image and this will return a filter applied Bitmap type object. So <code class="prettyprint lang-c">grayImage</code> is the output image.<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">grayImage.Save("grayImage.jpg");</code></div>
This will save the output image to the disk, so we can open it as a normal jpg image and view the result.<br />
<br />
Now, you can build your project. Go to <b>Build-->Build Solution </b>from the main menu.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21zSW7lZ-r2vgS88BuUEN6zSyEyUnrpZovRhcuu8I0HjHS_RvB6pwFolth07fvbEtQff5BQMP2zcgdnRWqyYRXxKMs1bTm97ef1Q582mzePFJRojHby7tOnny4_uQ7rmHBDma5Zortzo/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21zSW7lZ-r2vgS88BuUEN6zSyEyUnrpZovRhcuu8I0HjHS_RvB6pwFolth07fvbEtQff5BQMP2zcgdnRWqyYRXxKMs1bTm97ef1Q582mzePFJRojHby7tOnny4_uQ7rmHBDma5Zortzo/s1600/8.jpg" /></a></div>
<br />
If every thing went well without any error in your code, you may see success on the <b>Output </b>window as follows,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNDN6KS3EXlmv8A9rIsgVnmvjLm3aDXtJsgx1VMy5gaXxOU0fOFegWS_UZOXFeNjknxj9fUa0XY94D3WswLrSFNf_3K6XURxBb0swvY_kJEZaq6daZknHHMzJ-XwSxUA728JXAH4rQ60/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNDN6KS3EXlmv8A9rIsgVnmvjLm3aDXtJsgx1VMy5gaXxOU0fOFegWS_UZOXFeNjknxj9fUa0XY94D3WswLrSFNf_3K6XURxBb0swvY_kJEZaq6daZknHHMzJ-XwSxUA728JXAH4rQ60/s1600/9.jpg" /></a></div>
<br />
<h3>
<span style="font-size: x-large;">Step 5 - One more before run...</span></h3>
Note that all the path for our jpg files are relative paths, which means that is not a the full path to the file. So this means all the paths are relative the directory where our exe file located on, in this case it will located on your <b>bin/debug </b>folder of the Visual Studio project. Therefore go to your project folder and put <b>test.jpg </b>file in the <b>bin/debug </b>folder as shown here,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBKyyZQd9TkPXsds1sfQxZuYaNM2Vn18PICAUgsPagYN4PCLhr9uu7EQGrwjNdhkcVfxwsjYvBrswcAEMz2GnvIpouo6sWuZwpZDduKUI6NbNk21o12BdVuXC9Rx1ObvBCxlYWDsOTkAc/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBKyyZQd9TkPXsds1sfQxZuYaNM2Vn18PICAUgsPagYN4PCLhr9uu7EQGrwjNdhkcVfxwsjYvBrswcAEMz2GnvIpouo6sWuZwpZDduKUI6NbNk21o12BdVuXC9Rx1ObvBCxlYWDsOTkAc/s1600/10.jpg" /></a></div>
<br />
<h3>
<span style="font-size: x-large;">Step 6 - Run the code</span></h3>
Ok, Now your project is ready to run and test. so go to <b>Debug-->Start Debugging </b>or press <b>F5 </b>to run your project.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkt2kWwO1PYNG2vV57L-H0VongXR09f8Z-D-JafJfKjkU-uUGLithCXB-ryQgVlLuMhCxamfDStDub6dKYWRjR-TPmGcrNV_ai2H3xS12ivYqGlWIZo3hgvKbmoAeTlCSbrJcNKKyBhs/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkt2kWwO1PYNG2vV57L-H0VongXR09f8Z-D-JafJfKjkU-uUGLithCXB-ryQgVlLuMhCxamfDStDub6dKYWRjR-TPmGcrNV_ai2H3xS12ivYqGlWIZo3hgvKbmoAeTlCSbrJcNKKyBhs/s1600/11.jpg" /></a></div>
<br />
Then you will see your winform and click on process button.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNOELdtUJ0EcDLdgY3hUQGqlRddjmDXueXfTBYFwABkcNiG_yc68gPwkdMUHrRxABb-Ks82q2rlbSLX8wLSsqjLHtuOyKnyF_aycv3bTfSxc51j1lqC8B9MzpmdUmsuUIPWjy0Wyreks/s1600/12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNOELdtUJ0EcDLdgY3hUQGqlRddjmDXueXfTBYFwABkcNiG_yc68gPwkdMUHrRxABb-Ks82q2rlbSLX8wLSsqjLHtuOyKnyF_aycv3bTfSxc51j1lqC8B9MzpmdUmsuUIPWjy0Wyreks/s1600/12.jpg" /></a></div>
<br />
If every thing went well, you will see a jpg file in your <b>bin/debug </b>folder named <b>grayImage.jpg</b> and it is the grayscale image for the test.jpg image.<br />
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHna09BOGVOQlhsVzg/view?usp=sharing" target="_blank">
<img alt=" " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHna09BOGVOQlhsVzg/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />
<br />
<table border="1" class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr valign="top">
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoH3x-chyphenhyphenDCjHglcbp_6q1OPpQKgtNquua0U3JQ6WlmYkWhJTRgGoXyzofTW7mTjnom3Ujt0X0VSP62caO2-1GmoctxnlM_BHJlN-uJ5-35C6Hbr81jTDUHnqyDRl7HvXXjyE68qU1rk/s1600/grayImage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoH3x-chyphenhyphenDCjHglcbp_6q1OPpQKgtNquua0U3JQ6WlmYkWhJTRgGoXyzofTW7mTjnom3Ujt0X0VSP62caO2-1GmoctxnlM_BHJlN-uJ5-35C6Hbr81jTDUHnqyDRl7HvXXjyE68qU1rk/s320/grayImage.jpg" width="320" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyO_Y8PhPk52MqQViyyJk1pWyls-y3O2d45JtUAgcs89xh4fnoJgniqaTaQ7UFD2Fg4kz7cJIRImiDICfdmZGvGFj9IvN06eiEbkCgI0D2gSp4extn-y-bOwFKfCSlJequHocQjYFvfVw/s1600/test.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyO_Y8PhPk52MqQViyyJk1pWyls-y3O2d45JtUAgcs89xh4fnoJgniqaTaQ7UFD2Fg4kz7cJIRImiDICfdmZGvGFj9IvN06eiEbkCgI0D2gSp4extn-y-bOwFKfCSlJequHocQjYFvfVw/s320/test.jpg" width="320" /></a></div>
</td>
</tr>
</tbody>
</table>
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com7tag:blogger.com,1999:blog-3923972986350080010.post-83104452666896041022016-01-19T19:16:00.004+05:302016-01-19T19:20:13.807+05:30Debug PHP code in Netbeans<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTmeUl6uLroy3UTk8jhhQ1YjjtU_NAdB2dHl_AS78K4kr3J3MsgzTbatsbF5tAX1g4aVFvB4ng6uTxR9EXCq2xX-mfrWKfGiYcGHGlkmydwEcpWlpr4RutRapfS0nNM0tkte68t0RuYw/s1600/netbeans+with+debugging+window.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTmeUl6uLroy3UTk8jhhQ1YjjtU_NAdB2dHl_AS78K4kr3J3MsgzTbatsbF5tAX1g4aVFvB4ng6uTxR9EXCq2xX-mfrWKfGiYcGHGlkmydwEcpWlpr4RutRapfS0nNM0tkte68t0RuYw/s400/netbeans+with+debugging+window.jpg" width="400" /></a></div>
Netbeans is a powerful IDE for PHP and many other development environments. is it possible to debug your PHP project in Netbeans? run your PHP code line by line and look at your variable values in real time? The answer is Yes! even you can have many watch expressions to examine variable values and execute your PHP code line by line. You just need to follow these 4 steps to enable PHP debugging in your Netbeans IDE!<br />
<br />
Note - Netbeans version 8.0.2 has used for this article</div>
<div>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;">Step1: Set php.exe file location on your web server.</span></h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhP6h_lDuCIxdaeAQb1n7erJGWZqQrLBSTt5b2_NzT8uLCIKvV8J_jBm3B9XLmMmpbaVe1UFi_iUde5N5KkImGBNZ6oIbBe4Zv-LAn28vcnC6FIluDUZx_U9kNsGU9-WLhNzNDBAj6YXk/s1600/netbeans+options1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhP6h_lDuCIxdaeAQb1n7erJGWZqQrLBSTt5b2_NzT8uLCIKvV8J_jBm3B9XLmMmpbaVe1UFi_iUde5N5KkImGBNZ6oIbBe4Zv-LAn28vcnC6FIluDUZx_U9kNsGU9-WLhNzNDBAj6YXk/s400/netbeans+options1.jpg" width="400" /></a>Click on <b>Tools-> Options </b>to open <b>Options </b>dialog box on Netbeans then go to PHP tab and set the php.exe file location (I am using xampp server, your path also will be similar to "F:\xampp\php\php.exe" if you use xampp, or if you use wamp server your path will similar to "F:\wamp\bin\php\php5.4.12\php.exe")<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<div>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;">Step2: Setup debugging on Netbeans</span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVH6p_mZeQU6grmLhhAWQVo2SqeQaNRW7Pvj4IebCKyGBaUrvagbpw_mb01YFlreXXOCCOMYZz9HSv8f5_f7-Z47PXvUhWQt2qsXhXQbE6QwlDfmIglNB0FC3t2ezJB1DIAcWQL2ooTvI/s1600/netbeans+options2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVH6p_mZeQU6grmLhhAWQVo2SqeQaNRW7Pvj4IebCKyGBaUrvagbpw_mb01YFlreXXOCCOMYZz9HSv8f5_f7-Z47PXvUhWQt2qsXhXQbE6QwlDfmIglNB0FC3t2ezJB1DIAcWQL2ooTvI/s400/netbeans+options2.jpg" width="400" /></a></div>
Go to <b>Debugging </b>tab on Options dialogbox and set the values as you can see on following screenshot. Then click on Apply and OK to save your changes.</div>
<div>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;"> </span></h3>
<h3>
<span style="font-size: x-large;">Step3: Setup php.ini file</span></h3>
Copy following lines to the end of your <b>php.ini </b>file.<br />
Note - you can find this file on a similar location as "F:\xampp\php\php.ini" if you are using xampp, or "F:\wamp\bin\php\php5.4.12\php.ini" if you are using wamp server.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; height: 200px; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
[xdebug]<br />xdebug.remote_enable = on<br />xdebug.profiler_enable = off<br />xdebug.profiler_enable_trigger = off<br />xdebug.profiler_output_name = cachegrind.out.%t.%p<br />xdebug.profiler_output_dir = "F:\xampp\tmp"<br />xdebug.remote_handler = dbgp<br />xdebug.remote_host = localhost<br />xdebug.remote_port = 9000</code>
</div>
<br />
Note - you can change <b><code class="prettyprint lang-c">xdebug.profiler_output_dir = "F:\xampp\tmp" </code></b> to match with your own folder<br />
<br /></div>
<h3>
<span style="font-size: x-large;">Step4: Restart your web server and Netbeans IDE to apply the changes that we made.</span></h3>
<br />
<br />
Now your IDE ready for debug your project. click on icon or <b>Debug->Debug Project </b>to start debugging on Netbeans. once you start debugging your browser will open the web page and you can put some break points on your code, then these break points will hit depends on your user actions on your web page. So you can examine your variable values and program execution using following icons on netbeans IDE. (or you can find the same actions on <b>Debug </b>menu on the IDE)<br />
<br />
<table>
<tbody>
<tr valign="top">
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilUzS3TkmdltpTZ9My8nhOROrOEkU44-ND_pVFMZvR5vrKp899qajbPaRCYETiZv7grTXB6fefdrjIGi33UPLEtBdvAWnLtf52vQ3V0hhyocG6JMcqdA0fokeUUQLIsavwfJNSaHBj1lA/s1600/debug+buttons.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilUzS3TkmdltpTZ9My8nhOROrOEkU44-ND_pVFMZvR5vrKp899qajbPaRCYETiZv7grTXB6fefdrjIGi33UPLEtBdvAWnLtf52vQ3V0hhyocG6JMcqdA0fokeUUQLIsavwfJNSaHBj1lA/s320/debug+buttons.jpg" width="320" /></a>
</td>
<td> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ezpy9-bmqWJnUogG0-tITym-eNF3iRT1scGPoKp1qQCd3gltWf-UHFToXXuh9u8tvzo3xMeEMwqmmFQuwjBQu_iPTZWI-n1j5g1-Sp1lN4yGb5qy1XaA1jINeRl-aZBX3AXMDZHnSJM/s1600/debug+buttons2.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ezpy9-bmqWJnUogG0-tITym-eNF3iRT1scGPoKp1qQCd3gltWf-UHFToXXuh9u8tvzo3xMeEMwqmmFQuwjBQu_iPTZWI-n1j5g1-Sp1lN4yGb5qy1XaA1jINeRl-aZBX3AXMDZHnSJM/s400/debug+buttons2.jpg" width="272" /></a></td>
</tr>
</tbody>
</table>
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-11875288585959203802015-10-23T16:02:00.000+05:302015-10-23T16:08:55.018+05:30Convert Opencv Mat to C# Bitmap<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3aqWXL8KQVTbKxs04erlp1q8CGOYm1HvyLpnijZRZs7eF0iGsa8zsBRlMPydrPNPNspZxJ9TPG-bqktjRbrGGlqGjJj5KR4yedj2kT6XJ4NpEJSPkgZDfAwmrij_tr5tO8km2d-S6MNs/s1600/mat+to+bitmap.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3aqWXL8KQVTbKxs04erlp1q8CGOYm1HvyLpnijZRZs7eF0iGsa8zsBRlMPydrPNPNspZxJ9TPG-bqktjRbrGGlqGjJj5KR4yedj2kT6XJ4NpEJSPkgZDfAwmrij_tr5tO8km2d-S6MNs/s320/mat+to+bitmap.jpg" width="320" /></a></div>
Conversion from Opencv Mat to C# bitmap isn't a difficult task. But this conversion needs to be done from the primitive level of both Opencv Mat and C# Bitmap. Simply all the images are created from set of bytes, therefore it is necessary to create <b>System.Drawing.Bitmat </b>from bytes of <b><b>cv::Mat</b></b>. Also you will need to do this conversion in a CLI project. Total instructions can be found in following 2 articles.<br />
<ol>
<li><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">Call Opencv functions from C#</a></li>
<li><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet-bitmap.html" target="_blank">Call Opencv functions from C# with bitmap</a></li>
</ol>
<br />
<br />
<br />
This article describes how to convert C# Bitmap to Opencv Mat.<br />
<a href="http://milindapro.blogspot.com/2015/10/convert-c-bitmap-to-opencv-mat.html" target="_blank">Convert C# Bitmap to Opencv Mat</a> <br />
<br />
If you already know how to create and configure CLI project in visual studio, simply use following function in CLI project to convert Opencv Mat to C# Bitmap.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; height: 500px; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
System::Drawing::Bitmap^ MatToBitmap(Mat srcImg){<br /> int stride = srcImg.size().width * srcImg.channels();//calc the srtide<br /> int hDataCount = srcImg.size().height;<br /> <br /> System::Drawing::Bitmap^ retImg;<br /> <br /> System::IntPtr ptr(srcImg.data);<br /> <br /> //create a pointer with Stride<br /> if (stride % 4 != 0){//is not stride a multiple of 4?<br /> //make it a multiple of 4 by fiiling an offset to the end of each row</code><br />
<code class="prettyprint lang-c"><br /> </code><code class="prettyprint lang-c"><code class="prettyprint lang-c">//to hold processed data</code></code><br />
<code class="prettyprint lang-c"><code class="prettyprint lang-c"> </code>uchar *dataPro = new uchar[((srcImg.size().width * srcImg.channels() + 3) & -4) * hDataCount];<br /><br /> uchar *data = srcImg.ptr();<br /><br /> //current position on the data array<br /> int curPosition = 0;<br /> //current offset<br /> int curOffset = 0;<br /><br /> int offsetCounter = 0;<br /><br /> //itterate through all the bytes on the structure<br /> for (int r = 0; r < hDataCount; r++){<br /> //fill the data<br /> for (int c = 0; c < stride; c++){<br /> curPosition = (r * stride) + c;<br /><br /> dataPro[curPosition + curOffset] = data[curPosition];<br /> }<br /><br /> //reset offset counter<br /> offsetCounter = stride;<br /><br /> //fill the offset<br /> do{<br /> curOffset += 1;<br /> dataPro[curPosition + curOffset] = 0;<br /><br /> offsetCounter += 1;<br /> } while (offsetCounter % 4 != 0);<br /> }<br /><br /> ptr = (System::IntPtr)dataPro;//set the data pointer to new/modified data array<br /><br /> //calc the stride to nearest number which is a multiply of 4<br /> stride = (srcImg.size().width * srcImg.channels() + 3) & -4;<br /><br /> retImg = gcnew System::Drawing::Bitmap(srcImg.size().width, srcImg.size().height,<br /> stride,<br /> System::Drawing::Imaging::PixelFormat::Format24bppRgb,<br /> ptr);<br /> }<br /> else{<br /><br /> //no need to add a padding or recalculate the stride<br /> retImg = gcnew System::Drawing::Bitmap(srcImg.size().width, srcImg.size().height,<br /> stride,<br /> System::Drawing::Imaging::PixelFormat::Format24bppRgb,<br /> ptr);<br /> }<br /> <br /> array<system::byte>^ imageData;<br /> System::Drawing::Bitmap^ output;<br /><br /> // Create the byte array.<br /> {<br /> System::IO::MemoryStream^ ms = gcnew System::IO::MemoryStream();<br /> retImg->Save(ms, System::Drawing::Imaging::ImageFormat::Png);<br /> imageData = ms->ToArray();<br /> delete ms;<br /> }<br /><br /> // Convert back to bitmap<br /> {<br /> System::IO::MemoryStream^ ms = gcnew System::IO::MemoryStream(imageData);<br /> output = (System::Drawing::Bitmap^)System::Drawing::Bitmap::FromStream(ms);<br /> }<br /><br /> return output;<br />}</system::byte><br />
</code>
</div>
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-33518679015304504712015-10-23T15:54:00.001+05:302015-10-23T16:05:31.422+05:30Convert C# Bitmap to Opencv Mat<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9Bjbj9OtFHCtLOGR3zQ_0BjcmwRwZqFN9EwqVuH_YaYo0zJLv1-q_seaqvEazrRTaX9nfJgvrxyjhoyWJ7PczbxuiPRwJPeNWq2pLK_X-Zxw8urK4chQOJ5yiiPMRCOLPJ2tGIq-j6c/s1600/bitmap+to+mat.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9Bjbj9OtFHCtLOGR3zQ_0BjcmwRwZqFN9EwqVuH_YaYo0zJLv1-q_seaqvEazrRTaX9nfJgvrxyjhoyWJ7PczbxuiPRwJPeNWq2pLK_X-Zxw8urK4chQOJ5yiiPMRCOLPJ2tGIq-j6c/s320/bitmap+to+mat.jpg" width="320" /></a></div>
Conversion from C# bitmap to Opencv Mat isn't a difficult task. But this conversion needs to be done from the primitive level of both Opencv Mat and C# Bitmap. Simply all the images are created from set of bytes, therefore it is necessary to create <b>cv::Mat</b> from bytes of <b>System.Drawing.Bitmat</b>. Also you will need to do this conversion in a CLI project. Total instructions can be found in following 2 articles.<br />
<ol>
<li><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">Call Opencv functions from C#</a></li>
<li><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet-bitmap.html" target="_blank">Call Opencv functions from C# with bitmap</a></li>
</ol>
<br />
This article describes how to convert Opencv Mat to C# Bitmap.<br />
<a href="http://milindapro.blogspot.com/2015/10/convert-opencv-mat-to-c-bitmap.html" target="_blank">Convert Opencv Mat to C# Bitmap</a> <br />
<br />
If you already know how to create and configure CLI project in visual studio, simply use following function in CLI project to convert C# Bitmap to Opencv Mat.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
Mat BitmapToMat(System::Drawing::Bitmap^ bitmap)<br />{<br /> IplImage* tmp;<br /><br /> System::Drawing::Imaging::BitmapData^ bmData = bitmap->LockBits(System::Drawing::Rectangle(0, 0, bitmap->Width, bitmap->Height), System::Drawing::Imaging::ImageLockMode::ReadWrite, bitmap->PixelFormat);<br /> if (bitmap->PixelFormat == System::Drawing::Imaging::PixelFormat::Format8bppIndexed)<br /> {<br /> tmp = cvCreateImage(cvSize(bitmap->Width, bitmap->Height), IPL_DEPTH_8U, 1);<br /> tmp->imageData = (char*)bmData->Scan0.ToPointer();<br /> }<br /><br /> else if (bitmap->PixelFormat == System::Drawing::Imaging::PixelFormat::Format24bppRgb)<br /> {<br /> tmp = cvCreateImage(cvSize(bitmap->Width, bitmap->Height), IPL_DEPTH_8U, 3);<br /> tmp->imageData = (char*)bmData->Scan0.ToPointer();<br /> }<br /><br /> bitmap->UnlockBits(bmData);<br /><br /> return Mat(tmp);<br />}
</code>
</div>
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-9630493499391591662015-06-05T22:02:00.002+05:302015-06-05T23:06:05.007+05:30OpenCV Filters - dilate<div style="display: none;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVyG9VKzFy7Rn3qQBhlbEc65v0-2xIVpzz_zFNvCQqaJWSROUlLi_IzFl39quHB6c6y2nOQ-WmWF01YHpbj9o8MUw24luGV2nwW88-1ztT32-NVaqmNq2WCAih01rVNCGLfAhKjpW_KlI/s320/DilateMorphCross.jpg" width="274" />
</div>
Dilates an image by using a specific structuring element.<br />
<br />
<b>C++:</b> <code class="prettyprint lang-cc">void dilate(InputArray src, OutputArray dst, InputArray kernel, Point anchor=Point(-1,-1), int iterations=1, int borderType=BORDER_CONSTANT, const Scalar& borderValue=morphologyDefaultBorderValue() )</code><br />
<br />
<b>Python:</b> <code class="prettyprint lang-py">cv2.dilate(src, kernel[, dst[, anchor[, iterations[, borderType[, borderValue]]]]]) → dst</code><br />
<br />
<br />
<table><tbody valign="top">
<tr>
<td><b>Parameters:</b></td>
<td><ul>
<li><b>src</b> – input image; the number of channels can be arbitrary, but the depth should be one of <code class="prettyprint lang-cc">CV_8U, CV_16U, CV_16S, CV_32F` or ``CV_64F.
</code></li>
<li><b>dst</b> – output image of the same size and type as <code class="prettyprint lang-cc">src</code>.</li>
<li><b>element</b> – structuring element used for dilation; if <code class="prettyprint lang-cc">element=Mat()</code> , a 3 x 3 rectangular structuring element is used.</li>
<li><b>anchor</b> – position of the anchor within the element; default value (-1, -1) means that the anchor is at the element center.</li>
<li><b>iterations</b> – number of times dilation is applied.</li>
<li><b>borderType</b> – pixel extrapolation method (see borderInterpolate() for details).</li>
<li><b>borderValue</b> – border value in case of a constant border (see createMorphologyFilter() for details). </li>
</ul>
</td>
</tr>
</tbody>
</table>
<br />
<br />
The function dilates the source image using the specified structuring element that determines the shape of a pixel neighborhood over which the maximum is taken:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNQZF66Dnqq6eAkCa_p_KXc_Obbha3oB7h7ZJ_rEJN-hKhWyZWs8FyJW6ODHZhBM74jLDZN9PO7Uxq1sbBUIjFzEziKY7gXA1dRXUClJfajPSNrjIthPzQgvit83OcquNe4a3sMrKif8/s1600/dilate+function.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNQZF66Dnqq6eAkCa_p_KXc_Obbha3oB7h7ZJ_rEJN-hKhWyZWs8FyJW6ODHZhBM74jLDZN9PO7Uxq1sbBUIjFzEziKY7gXA1dRXUClJfajPSNrjIthPzQgvit83OcquNe4a3sMrKif8/s1600/dilate+function.png" /></a></div>
The function supports the in-place mode. Dilation can be applied several ( iterations ) times. In case of multi-channel images, each channel is processed independently.<br />
<br />
<b>Note:</b> An example using the morphological dilate operation can be found at <i>opencv_source_code/samples/cpp/morphology2.cpp</i><br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv box </b>filter. Since dilate is a most common feature for optical characters, the source image includes some texts and shapes.<br />
<br />
<div class="codediv" style="height: 500px;">
<code class="prettyprint lang-cc">
string imgFileName = "lenaWithText.jpg";<br /><br />cv::Mat src = cv::imread(imgFileName);<br />if (!src.data){<br /> cout << "Unable to open file" << endl;<br /> getchar();<br /> return 1;<br />}<br /><br />//---------------- create kernals ----------------<br />int dilationSize = 2;<br />cv::Mat kernalMorphCross = cv::getStructuringElement(cv::MORPH_CROSS,<br /> cv::Size(2 * dilationSize + 1, 2 * dilationSize + 1),<br /> cv::Point(dilationSize, dilationSize));<br />cv::Mat kernalMorphDilate = cv::getStructuringElement(cv::MORPH_DILATE,<br /> cv::Size(2 * dilationSize + 1, 2 * dilationSize + 1),<br /> cv::Point(dilationSize, dilationSize));<br />cv::Mat kernalMorphEllipse = cv::getStructuringElement(cv::MORPH_ELLIPSE,<br /> cv::Size(2 * dilationSize + 1, 2 * dilationSize + 1),<br /> cv::Point(dilationSize, dilationSize));<br />cv::Mat kernalMorphErode = cv::getStructuringElement(cv::MORPH_ERODE,<br /> cv::Size(2 * dilationSize + 1, 2 * dilationSize + 1),<br /> cv::Point(dilationSize, dilationSize));<br />cv::Mat kernalMorphOpen = cv::getStructuringElement(cv::MORPH_OPEN,<br /> cv::Size(2 * dilationSize + 1, 2 * dilationSize + 1),<br /> cv::Point(dilationSize, dilationSize));<br />cv::Mat kernalMorphRect = cv::getStructuringElement(cv::MORPH_RECT,<br /> cv::Size(2 * dilationSize + 1, 2 * dilationSize + 1),<br /> cv::Point(dilationSize, dilationSize));<br /><br />//---------------- apply dilate kernal to source seperately ---------------- <br /> <br />cv::Mat dstMorphCross;<br />cv::dilate(src, dstMorphCross, kernalMorphCross);<br /><br />cv::Mat dstMorphDilate;<br />cv::dilate(src, dstMorphDilate, kernalMorphDilate);<br /><br />cv::Mat dstMorphEllipse;<br />cv::dilate(src, dstMorphEllipse, kernalMorphEllipse);<br /><br />cv::Mat dstMorphErode;<br />cv::dilate(src, dstMorphErode, kernalMorphErode);<br /><br />cv::Mat dstMorphOpen;<br />cv::dilate(src, dstMorphOpen, kernalMorphOpen);<br /><br />cv::Mat dstMorphRect;<br />cv::dilate(src, dstMorphRect, kernalMorphRect);<br /><br />//---------------- Show filtered images ---------------- <br />cv::namedWindow("Source");<br />cv::namedWindow("DilateMorphCross");<br />cv::namedWindow("DilateMorphDilate");<br />cv::namedWindow("DilateMorphEllipse");<br />cv::namedWindow("DilateMorphErode");<br />cv::namedWindow("DilateMorphOpen");<br />cv::namedWindow("DilateMorphRect");<br /><br />cv::imshow("Source", src);<br />cv::imshow("DilateMorphCross", dstMorphCross);<br />cv::imshow("DilateMorphDilate", dstMorphDilate);<br />cv::imshow("DilateMorphEllipse", dstMorphEllipse);<br />cv::imshow("DilateMorphErode", dstMorphErode);<br />cv::imshow("DilateMorphOpen", dstMorphOpen);<br />cv::imshow("DilateMorphRect", dstMorphRect);<br />cv::waitKey(0);<br /><br />//---------------- Save filtered images ---------------- <br />cv::imwrite("DilateMorphCross.jpg", dstMorphCross);<br />cv::imwrite("DilateMorphDilate.jpg", dstMorphDilate);<br />cv::imwrite("DilateMorphEllipse.jpg", dstMorphEllipse);<br />cv::imwrite("DilateMorphErode.jpg", dstMorphErode);<br />cv::imwrite("DilateMorphOpen.jpg", dstMorphOpen);<br />cv::imwrite("DilateMorphRect.jpg", dstMorphRect);
</code>
</div>
<br />
<table border="1" class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr valign="top">
<td>Kernel shape - MORPH_CROSS<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVyG9VKzFy7Rn3qQBhlbEc65v0-2xIVpzz_zFNvCQqaJWSROUlLi_IzFl39quHB6c6y2nOQ-WmWF01YHpbj9o8MUw24luGV2nwW88-1ztT32-NVaqmNq2WCAih01rVNCGLfAhKjpW_KlI/s1600/DilateMorphCross.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVyG9VKzFy7Rn3qQBhlbEc65v0-2xIVpzz_zFNvCQqaJWSROUlLi_IzFl39quHB6c6y2nOQ-WmWF01YHpbj9o8MUw24luGV2nwW88-1ztT32-NVaqmNq2WCAih01rVNCGLfAhKjpW_KlI/s320/DilateMorphCross.jpg" width="274" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Kernel shape - MORPH_DILATE<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqw8ZFxvhH2-hXHuScDDpCHwmC2NpoNvUoqJ3XWIb3as7x1ZeDXHhLmYVw0hqd6kRCv0PzS-OuiQqc-rN4D_gaYiCom_eM8QRYTchFuNRqbI1ZPStftSnC2meJjygc3rCBCEAlupHvjiY/s1600/DilateMorphDilate.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqw8ZFxvhH2-hXHuScDDpCHwmC2NpoNvUoqJ3XWIb3as7x1ZeDXHhLmYVw0hqd6kRCv0PzS-OuiQqc-rN4D_gaYiCom_eM8QRYTchFuNRqbI1ZPStftSnC2meJjygc3rCBCEAlupHvjiY/s320/DilateMorphDilate.jpg" width="274" /></a></div>
<br />
Kernel Shape - MORPH_ELLIPSE<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpfA5cdTgANuMzksJnvJVvcKlGwropV4PUdXReSRVB5LF1HlPGXV4NyIHukWHBphrwEzpAE1pSsR4lc5VXRp1S8TUBjMLzrFygRNNFsOPv1e7KJYY-a-BSt4aoCZOQj3K05lYNK22F0s/s1600/DilateMorphEllipse.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpfA5cdTgANuMzksJnvJVvcKlGwropV4PUdXReSRVB5LF1HlPGXV4NyIHukWHBphrwEzpAE1pSsR4lc5VXRp1S8TUBjMLzrFygRNNFsOPv1e7KJYY-a-BSt4aoCZOQj3K05lYNK22F0s/s320/DilateMorphEllipse.jpg" width="274" /></a></div>
<br />
<br />
Kernel Shape - MORPH_ERODE<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzxtbbQbnDaWCyAZFhyEiKUcMyP54wp08WnIKWteRArV9TfaHwpm-eGVK9pyCKgRSTP_poModJYL6qGLg3JT0DATy1KUMu4J6qc-K5LTlx0cmMy9RwJnpYlx-wzugufEBJgMMLMiPE8g/s1600/DilateMorphErode.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzxtbbQbnDaWCyAZFhyEiKUcMyP54wp08WnIKWteRArV9TfaHwpm-eGVK9pyCKgRSTP_poModJYL6qGLg3JT0DATy1KUMu4J6qc-K5LTlx0cmMy9RwJnpYlx-wzugufEBJgMMLMiPE8g/s320/DilateMorphErode.jpg" width="274" /></a></div>
<br />
<br />
Kernel Shape - MORPH_OPEN<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWor0v0LDx14Ng1H7rwH0bap1h4CoqONZCTMeep-EIMp113nUpZ2O2CuIblEgcYtD1aF9iLpSWp8dCVe7Su1HLO_Hgw7wJ5NGXHtQZs9bpR6nUQqtDpIs-87MGZU7JLBLUqJ-AyVwDzTs/s1600/DilateMorphOpen.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWor0v0LDx14Ng1H7rwH0bap1h4CoqONZCTMeep-EIMp113nUpZ2O2CuIblEgcYtD1aF9iLpSWp8dCVe7Su1HLO_Hgw7wJ5NGXHtQZs9bpR6nUQqtDpIs-87MGZU7JLBLUqJ-AyVwDzTs/s320/DilateMorphOpen.jpg" width="274" /></a></div>
<br />
Kernel Shape - MORPH_RECT<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX71iFLho1kFkvXq9pM33hlor2z3CCGPgXoGXKZ4ejDH3O18cTOoRgUjzsc0Kik-f_x21HkjQj5PYWQsrRK5bHrR5ljCM4SvQPwzU9gswHo2vNgxfmAYIUJbcAzQ_6kEX1yB4qsv5wj1Y/s1600/DilateMorphRect.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX71iFLho1kFkvXq9pM33hlor2z3CCGPgXoGXKZ4ejDH3O18cTOoRgUjzsc0Kik-f_x21HkjQj5PYWQsrRK5bHrR5ljCM4SvQPwzU9gswHo2vNgxfmAYIUJbcAzQ_6kEX1yB4qsv5wj1Y/s320/DilateMorphRect.jpg" width="274" /></a></div>
</td>
<td><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIr0MHUCiGyOkTDGYBxK8kgqyCRTl0LSbpReg4AstZH0j9WiGnQoZhnLRV8gMoK0LDX9ekcHV4lCNQv42yVdVI4jTgLjs1neBs4TJ4cYIPaQYsDhi0Er84Zjl4dScQkOFB72mnQmGfCs/s1600/lenaWithText.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIr0MHUCiGyOkTDGYBxK8kgqyCRTl0LSbpReg4AstZH0j9WiGnQoZhnLRV8gMoK0LDX9ekcHV4lCNQv42yVdVI4jTgLjs1neBs4TJ4cYIPaQYsDhi0Er84Zjl4dScQkOFB72mnQmGfCs/s320/lenaWithText.jpg" width="274" /></a></div>
<br /></td>
</tr>
</tbody>
</table>
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHnMGFhalkxWjdOSDA/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHnMGFhalkxWjdOSDA/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-91021982346869272392015-05-23T23:54:00.000+05:302015-06-05T21:30:36.972+05:30OpenCV Filters - copyMakeBorderForms a border around an image.<br />
<br />
<br />
<b>C++: </b><code class="prettyprint lang-cc">void copyMakeBorder(InputArray src, OutputArray dst, int top, int bottom, int left, int right, int borderType, const Scalar& value=Scalar() )</code><br />
<br />
<b>Python: </b><code class="prettyprint lang-py">cv2.copyMakeBorder(src, top, bottom, left, right, borderType[, dst[, value]]) → dst</code><br />
<br />
<b>C:</b> <code class="prettyprint lang-c">void cvCopyMakeBorder(const CvArr* src, CvArr* dst, CvPoint offset, int bordertype, CvScalar value=cvScalarAll(0) )</code><br />
<br />
<b>Python:</b> <code class="prettyprint lang-py">cv.CopyMakeBorder(src, dst, offset, bordertype, value=(0, 0, 0, 0)) → None</code>
<br />
<br />
<table><tbody valign="top">
<tr>
<td><b>Parameters:</b></td>
<td><ul>
<li><b>src </b>– Source image.</li>
<li><b>dst </b>– Destination image of the same type as src and the size Size(src.cols+left+right, src.rows+top+bottom).</li>
<li><b>top </b>–</li>
<li><b>bottom </b>–</li>
<li><b>left </b>–</li>
<li><b>right </b>– Parameter specifying how many pixels in each direction from the source image rectangle to extrapolate. For example, top=1, bottom=1, left=1, right=1 mean that 1 pixel-wide border needs to be built.</li>
<li><b>borderType </b>– Border type. See borderInterpolate() for details.</li>
<li><b>value </b>– Border value if borderType==BORDER_CONSTANT .</li>
</ul>
</td>
</tr>
</tbody>
</table>
<br />
<br />
The function copies the source image into the middle of the destination image. The areas to the left, to the right, above and below the copied source image will be filled with extrapolated pixels. This is not what FilterEngine or filtering functions based on it do (they extrapolate pixels on-fly), but what other more complex functions, including your own, may do to simplify image boundary handling.<br />
<br />
The function supports the mode when src is already in the middle of dst . In this case, the function does not copy src itself but simply constructs the border, for example:<br />
<br />
<code class="prettyprint lang-cc">
// let border be the same in all directions<br />int border=2;<br />// constructs a larger image to fit both the image and the border<br />Mat gray_buf(rgb.rows + border*2, rgb.cols + border*2, rgb.depth());<br />// select the middle part of it w/o copying data<br />Mat gray(gray_canvas, Rect(border, border, rgb.cols, rgb.rows));<br />// convert image from RGB to grayscale<br />cvtColor(rgb, gray, CV_RGB2GRAY);<br />// form a border in-place<br />copyMakeBorder(gray, gray_buf, border, border,<br /> border, border, BORDER_REPLICATE);<br />// now do some custom filtering ...<br />...
</code>
<br />
<br />
<br />
Note: When the source image is a part (ROI) of a bigger image, the function will try to use the pixels outside of the ROI to form a border. To disable this feature and always do extrapolation, as if src was not a ROI, use borderType | BORDER_ISOLATED. <br />
<br />
Reference: <a href="http://docs.opencv.org/modules/imgproc/doc/filtering.html#copymakeborder" target="_blank">OpenCV Documentation - copyMakeBorder</a><br />
<br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv copyMakeBorder</b>.<br />
<br />
<div class="codediv" style="height: 500px;">
<code class="prettyprint lang-cc">
string imgFileName = "lena.jpg";<br /><br />cv::Mat src = cv::imread(imgFileName);<br />if (!src.data){<br /> cout << "Unable to open file" << endl;<br /> getchar();<br /> return 1;<br />}<br /><br />Mat dstBorderConstant;<br />copyMakeBorder(src, dstBorderConstant, 256, 256, 256, 256, BORDER_CONSTANT);<br /><br />Mat dstBorderDefault;<br />copyMakeBorder(src, dstBorderDefault, 256, 256, 256, 256, BORDER_DEFAULT);<br /><br />Mat dstBorderIsolate;<br />copyMakeBorder(src, dstBorderIsolate, 256, 256, 256, 256, BORDER_ISOLATED);<br /><br />Mat dstBorderReflect;<br />copyMakeBorder(src, dstBorderReflect, 256, 256, 256, 256, BORDER_REFLECT);<br /><br />Mat dstBorderReflect101;<br />copyMakeBorder(src, dstBorderReflect101, 256, 256, 256, 256, BORDER_REFLECT101);<br /><br />Mat dstBorderReflect_101;<br />copyMakeBorder(src, dstBorderReflect_101, 256, 256, 256, 256, BORDER_REFLECT_101);<br /><br />Mat dstBorderReplicate;<br />copyMakeBorder(src, dstBorderReplicate, 256, 256, 256, 256, BORDER_REPLICATE);<br /><br />Mat dstBorderWrap;<br />copyMakeBorder(src, dstBorderWrap, 256, 256, 256, 256, BORDER_WRAP);<br /><br />cv::namedWindow("Source", CV_WINDOW_FREERATIO);<br /> <br />cv::namedWindow("BorderConstant", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderDefault", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderIsolate", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderReflect", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderReflect101", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderReflect_101", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderReplicate", CV_WINDOW_FREERATIO);<br />cv::namedWindow("BorderWrap", CV_WINDOW_FREERATIO);<br /><br /><br />cv::imshow("Source", src);<br /><br />cv::imshow("BorderConstant", dstBorderConstant);<br />cv::imshow("BorderDefault", dstBorderDefault);<br />cv::imshow("BorderIsolate", dstBorderIsolate);<br />cv::imshow("BorderReflect", dstBorderReflect);<br />cv::imshow("BorderReflect101", dstBorderReflect101);<br />cv::imshow("BorderReflect_101", dstBorderReflect_101);<br />cv::imshow("BorderReplicate", dstBorderReplicate);<br />cv::imshow("BorderWrap", dstBorderWrap);<br />cv::waitKey(0);<br /><br />cv::imwrite("BorderConstant.jpg", dstBorderConstant);<br />cv::imwrite("BorderDefault.jpg", dstBorderDefault);<br />cv::imwrite("BorderIsolate.jpg", dstBorderIsolate);<br />cv::imwrite("BorderReflect.jpg", dstBorderReflect);<br />cv::imwrite("BorderReflect101.jpg", dstBorderReflect101);<br />cv::imwrite("BorderReflect_101.jpg", dstBorderReflect_101);<br />cv::imwrite("BorderReplicate.jpg", dstBorderReplicate);<br />cv::imwrite("BorderWrap.jpg", dstBorderWrap);
</code></div>
<br />
<br />
<br />
<table class="ocvfilters">
<tbody>
<tr>
<td valign="top"><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr>
<td>borderType - BORDER_REFLECT <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDacav6bXbL1B6qRuqsHkiLytwsryfX7zk3C6uUv67lkpfM2GVIlbO1N1hQncGvWCv9WpYdsJl5kEOwUBpMjEdOFezZXWVZAqyhRSTb6r6EJUT5c-I69hKxopgdJap-D5HlQVFQRQkCB8/s1600/BorderReflect.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDacav6bXbL1B6qRuqsHkiLytwsryfX7zk3C6uUv67lkpfM2GVIlbO1N1hQncGvWCv9WpYdsJl5kEOwUBpMjEdOFezZXWVZAqyhRSTb6r6EJUT5c-I69hKxopgdJap-D5HlQVFQRQkCB8/s320/BorderReflect.jpg" width="320" /></a></div>
<br />
borderType - BORDER_REFLECT101<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4TdRnWGahGEtlEu3yCbbGSBOHGFmvx18HnoKaQDqi579kRV77gBdWmTa_JZJiJ6nk1HXdFytgxub5u1SyzWbndDDPHOfw39bmNAZj2ZeWuSxv1z5PnE0pFSmCc_OSmqWWld3FiE8BpTs/s1600/BorderReflect101.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4TdRnWGahGEtlEu3yCbbGSBOHGFmvx18HnoKaQDqi579kRV77gBdWmTa_JZJiJ6nk1HXdFytgxub5u1SyzWbndDDPHOfw39bmNAZj2ZeWuSxv1z5PnE0pFSmCc_OSmqWWld3FiE8BpTs/s320/BorderReflect101.jpg" width="320" /></a></div>
<br />
borderType - BORDER_REFLECT_101<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6fzOx_JTLCGl_U5qwMCICyd62SVj2JzAqsFRAWkTlPvs6JCIK4OYYrYTdMWtFark0TrwIppaunwL8vMXC8A-apfZD7gwmeayX42mZOkhjl8Z-IYYmsRjBVUmTZ9N-i-hRwFdsdmYpugo/s1600/BorderReflect_101.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6fzOx_JTLCGl_U5qwMCICyd62SVj2JzAqsFRAWkTlPvs6JCIK4OYYrYTdMWtFark0TrwIppaunwL8vMXC8A-apfZD7gwmeayX42mZOkhjl8Z-IYYmsRjBVUmTZ9N-i-hRwFdsdmYpugo/s320/BorderReflect_101.jpg" width="320" /></a></div>
<br />
borderType - BORDER_REPLICATE<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwJSQcXgkwD0NsngIA6eFnpf5WHgq05hlUqenvBAbFHetkhNYmoLo7hdQjJtv3AoZ0S6zeGHZ_b0ZCs-8tDDMvFr9glmsk89bJ8_3LjHEPgIKDBE5ZTUNRak7KvckqJ-8nx4-UF8uhNY/s1600/BorderReplicate.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwJSQcXgkwD0NsngIA6eFnpf5WHgq05hlUqenvBAbFHetkhNYmoLo7hdQjJtv3AoZ0S6zeGHZ_b0ZCs-8tDDMvFr9glmsk89bJ8_3LjHEPgIKDBE5ZTUNRak7KvckqJ-8nx4-UF8uhNY/s320/BorderReplicate.jpg" width="320" /></a></div>
<br />
borderType - BORDER_CONSTANT<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbqNtOp9YEmN9szDCBjEBDPalYVKuW3J6qaYSNxM97DK3WIYGTQTPo8GRDm9lsGSRbko9kWOpD_Rn7SyPV0XRpNi01-qS5W6ejqcqDiIYuNcpcLWvRdb2MKaDa64ErMPTV-OIwpnVB44/s1600/BorderConstant.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbqNtOp9YEmN9szDCBjEBDPalYVKuW3J6qaYSNxM97DK3WIYGTQTPo8GRDm9lsGSRbko9kWOpD_Rn7SyPV0XRpNi01-qS5W6ejqcqDiIYuNcpcLWvRdb2MKaDa64ErMPTV-OIwpnVB44/s320/BorderConstant.jpg" width="320" /></a></div>
<br />
borderType - BORDER_DEFAULT<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdtI2k1kW9jjJ6q1VJCVNRrAMKstMjUhGd5N_66HdTgLrazhL_78P1Dyhuo10VnfeUFHoqTEpS72uG9uxOwyhZi9qp77_ftgwlMwxqgMjMzRtDCV1Ha-RnpRVHlYkg37rIXmBMhssL64/s1600/BorderDefault.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdtI2k1kW9jjJ6q1VJCVNRrAMKstMjUhGd5N_66HdTgLrazhL_78P1Dyhuo10VnfeUFHoqTEpS72uG9uxOwyhZi9qp77_ftgwlMwxqgMjMzRtDCV1Ha-RnpRVHlYkg37rIXmBMhssL64/s320/BorderDefault.jpg" width="320" /></a></div>
<br />
borderType - BORDER_ISOLATED<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhVQ9RRotAOMGjcrlzw6r254oXcbQRUoyjo0F3iM_wFcasmoY09XEA1P7rvYOk5KnPSS3mChTbsOuak7teiansPXAQhxBO1HscGV_U5YTHBO6NrON7DXAK56Kb1Ssou7v-fuDqoW2dCE/s1600/BorderIsolate.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhVQ9RRotAOMGjcrlzw6r254oXcbQRUoyjo0F3iM_wFcasmoY09XEA1P7rvYOk5KnPSS3mChTbsOuak7teiansPXAQhxBO1HscGV_U5YTHBO6NrON7DXAK56Kb1Ssou7v-fuDqoW2dCE/s320/BorderIsolate.jpg" width="320" /></a></div>
<br />
borderType - BORDER_WRAP<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpcuuQHeqPeg5424lwh-Ttsm30wMBjJ79v44lJds0-S3x7s2K57K29eE2-Jf1ZPE9x3XqdhcoF9u8jaDA_84tlk2EQXws6_mUbPsJetPyndTghDXRvie0fsVXJfwZc5BttaEjSYrNiTM/s1600/BorderWrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpcuuQHeqPeg5424lwh-Ttsm30wMBjJ79v44lJds0-S3x7s2K57K29eE2-Jf1ZPE9x3XqdhcoF9u8jaDA_84tlk2EQXws6_mUbPsJetPyndTghDXRvie0fsVXJfwZc5BttaEjSYrNiTM/s320/BorderWrap.jpg" width="320" /></a></div>
</td>
<td valign="top"><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s1600/lena.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s320/lena.jpg" width="320" /></a></div>
<br /></td>
</tr>
</tbody>
</table>
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHnY0hwUDRnSVZaTlE/view?usp=sharing" target="_blank">
<img alt=" " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHnY0hwUDRnSVZaTlE/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-48651837360329136242015-05-21T23:04:00.005+05:302015-05-24T00:07:23.677+05:30OpenCV Image FilteringThis article describes OpenCV Image filtering functions with code examples and sample images.<br />
<br />
<ul>
<li><a href="http://milindapro.blogspot.com/2015/05/opencv-filters-adaptivebilateralfilter.html" target="_blank">Adaptive Bilateral Filter - cv::adaptiveBilateralFilter</a></li>
<li><a href="http://milindapro.blogspot.com/2015/05/opencv-filters-bilateralfilter.html" target="_blank">Bilateral Filter - cv::bilateralFilter</a></li>
<li><a href="http://milindapro.blogspot.com/2015/05/opencv-filters-blur.html" target="_blank">Blur - cv::blur</a></li>
<li><a href="http://milindapro.blogspot.com/2015/05/opencv-filters-boxfilter.html" target="_blank">Box Filter - cv::boxFilter</a></li>
<li><a href="http://milindapro.blogspot.com/2015/05/opencv-filters-buildpyramid.html" target="_blank">Build Pyramid - cv::buildPyramid</a></li>
<li><a href="http://milindapro.blogspot.com/2015/05/opencv-filters-copymakeborder.html" target="_blank">copyMakeBorder - cv::copyMakeBorder</a></li>
</ul>
<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-13561236112999015502015-05-21T22:57:00.000+05:302015-06-05T22:05:57.510+05:30OpenCV Filters - boxFilter<div style="display: none;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnUyB-F6jY5mEzQIxWMP2CwLsXCOkexoEJQ8kfqU65k5Qkfr0sFLu5lGBlAAtKRm_YUt2_kDb8RvqviNqVwTg3aK78gmLzTUQAZD7zcykbT2Bu2FmnB5DjLdMgb6Tu1vvKW4jXNRz5Hs/s320/Box+Filter.jpg" width="320" />
</div>
Blurs an image using the box filter.<br />
<br />
<b>C++: </b><code class="prettyprint lang-cc">void boxFilter(InputArray src, OutputArray dst, int ddepth, Size ksize, Point anchor=Point(-1,-1), bool normalize=true, int borderType=BORDER_DEFAULT )</code><br />
<br />
<b>Python:</b> <code class="prettyprint lang-py">cv2.boxFilter(src, ddepth, ksize[, dst[, anchor[, normalize[, borderType]]]]) → dst</code><br />
<br />
<table><tbody valign="top">
<tr><th>Parameters:</th><td><ul class="first last simple">
<li><b>src</b> – input image.</li>
<li><b>dst</b> – output image of the same size and type as <tt class="docutils literal"><span class="pre">src</span></tt>.</li>
<li><b>ddepth</b> – the output image depth (-1 to use <tt class="docutils literal"><span class="pre">src.depth()</span></tt>).</li>
<li><b>ksize</b> – blurring kernel size.</li>
<li><b>anchor</b> – anchor point; default value <tt class="docutils literal"><span class="pre">Point(-1,-1)</span></tt> means that the anchor is at the kernel center.</li>
<li><b>normalize</b> – flag, specifying whether the kernel is normalized by its area or not.</li>
<li><b>borderType</b> – border mode used to extrapolate pixels outside of the image.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<br />
The function smoothes an image using the kernel: <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiteVaEZTN55aauAMy-H7RJrvWttD3V9CrhiUdgRUTFQVE-zcLQz-OO-RUaWv1sFZDFOREhVdaviuZWEQwKIjqFwsFLNlOA3H8ux7cCWYVYZoxj-XTbSjFLJENSbqUNVoDwfcvsgL7jOCo/s1600/boxFilter+kernal+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiteVaEZTN55aauAMy-H7RJrvWttD3V9CrhiUdgRUTFQVE-zcLQz-OO-RUaWv1sFZDFOREhVdaviuZWEQwKIjqFwsFLNlOA3H8ux7cCWYVYZoxj-XTbSjFLJENSbqUNVoDwfcvsgL7jOCo/s1600/boxFilter+kernal+1.png" /></a></div>
Where,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qGBG1fzydUXP_obhrd8Lu7koQEf9_4X_4JCvVa_24b0nQ-TNEs25a6nN0eZrNgAdsWM1YM6EiCSHPRdppL-XzPnXJT1ZNuriD_WFnIh5Hty4nNYzyZAtKtwdbbDtzGo7Pu53Ns-8mj4/s1600/boxFilter+kernal+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qGBG1fzydUXP_obhrd8Lu7koQEf9_4X_4JCvVa_24b0nQ-TNEs25a6nN0eZrNgAdsWM1YM6EiCSHPRdppL-XzPnXJT1ZNuriD_WFnIh5Hty4nNYzyZAtKtwdbbDtzGo7Pu53Ns-8mj4/s400/boxFilter+kernal+2.png" width="400" /></a></div>
<br />
Unnormalized box filter is useful for computing various integral characteristics over each pixel neighborhood, such as covariance matrices of image derivatives (used in dense optical flow algorithms, and so on). If you need to compute pixel sums over variable-size windows, use integral().
<br />
<br />
Reference: <a href="http://docs.opencv.org/modules/imgproc/doc/filtering.html#boxfilter" target="_blank">OpenCV Documentation - boxFilter</a><br />
<br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv box </b>filter.<br />
<br />
<div class="codediv">
<code class="prettyprint lang-cc"> string imgFileName = "lena.jpg";<br /><br /> cv::Mat src = cv::imread(imgFileName);<br /> if (!src.data){<br /> cout << "Unable to open file" << endl;<br /> getchar();<br /> return 1;<br /> }<br /><br /> cv::Mat dst;<br /> cv::boxFilter(src, dst, -1, cv::Size(16, 16));<br /><br /> cv::namedWindow("Source");<br /> cv::namedWindow("Filtered");<br /><br /> cv::imshow("Source", src);<br /> cv::imshow("Filtered", dst);<br /> cv::waitKey(0);<br /><br /> cv::imwrite("Box Filter.jpg", dst);<br /><br /> return 0;</code>
</div>
<br />
<br />
<table class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnUyB-F6jY5mEzQIxWMP2CwLsXCOkexoEJQ8kfqU65k5Qkfr0sFLu5lGBlAAtKRm_YUt2_kDb8RvqviNqVwTg3aK78gmLzTUQAZD7zcykbT2Bu2FmnB5DjLdMgb6Tu1vvKW4jXNRz5Hs/s1600/Box+Filter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnUyB-F6jY5mEzQIxWMP2CwLsXCOkexoEJQ8kfqU65k5Qkfr0sFLu5lGBlAAtKRm_YUt2_kDb8RvqviNqVwTg3aK78gmLzTUQAZD7zcykbT2Bu2FmnB5DjLdMgb6Tu1vvKW4jXNRz5Hs/s320/Box+Filter.jpg" width="320" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s1600/lena.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s320/lena.jpg" width="320" /></a></div>
</td>
</tr>
</tbody>
</table>
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHndDc2MGIyRmkzbGs/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHndDc2MGIyRmkzbGs/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-90507314460219851692015-05-21T22:56:00.000+05:302015-05-21T22:56:23.200+05:30OpenCV Filters - buildPyramidConstructs the Gaussian pyramid for an image.<br />
<br />
<b>C++: </b><code class="prettyprint lang-cc">void buildPyramid(InputArray src, OutputArrayOfArrays dst, int maxlevel, int borderType=BORDER_DEFAULT )</code><br />
<br />
<table>
<tbody valign="top">
<tr>
<td><b>Parameters:</b></td>
<td><ul>
<li><b>src </b>– Source image. Check <code class="prettyprint lang-cc">pyrDown()</code> for the list of supported types.</li>
<li><b>dst </b>– Destination vector of <code class="prettyprint lang-cc">maxlevel+1</code> images of the same type as <code class="prettyprint lang-cc">src . dst[0]</code> will be the same as <code class="prettyprint lang-cc">src . dst[1]</code> is the next pyramid layer, a smoothed and down-sized <code class="prettyprint lang-cc">src</code> , and so on.</li>
<li><b>maxlevel </b>– 0-based index of the last (the smallest) pyramid layer. It must be non-negative.</li>
<li><b>borderType </b>– Pixel extrapolation method (BORDER_CONSTANT don’t supported). See <code class="prettyprint lang-cc">borderInterpolate()</code> for details.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<br />
The function constructs a vector of images and builds the Gaussian pyramid by recursively applying <code class="prettyprint lang-cc">pyrDown()</code> to the previously built pyramid layers, starting from <code class="prettyprint lang-cc">dst[0]==src</code>.<br />
<br />
Reference: <a href="http://docs.opencv.org/modules/imgproc/doc/filtering.html#buildpyramid" target="_blank">OpenCV Documentation - buildPyramid</a><br />
<br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv build Pyramid </b>filter.<br />
<br />
<br />
<div class="codediv">
<code class="prettyprint lang-cc">sstring imgFileName = "lena.jpg";<br /><br />cv::Mat src = cv::imread(imgFileName);<br />if (!src.data){<br /> cout << "Unable to open file" << endl;<br /> getchar();<br /> return 1;<br />}<br /><br />int maxVal = 4;<br />vector<cv::mat> dstVect;<br />cv::buildPyramid(src, dstVect, maxVal);<br /><br />cv::namedWindow("Source");<br />cv::imshow("Source", src);<br /><br />string imgName;<br />for (int i = 0; i < maxVal + 1; i++){<br /> stringstream ss;<br /> ss << "Filtered " << i;<br /> imgName = ss.str();<br /><br /> cv::namedWindow(imgName);<br /> cv::imshow(imgName, dstVect[i]);<br /><br /> ss << ".jpg";<br /> imgName = ss.str();<br /> cv::imwrite(imgName, dstVect[i]);<br />}<br />cv::waitKey(0);<br /><br />return 0;
</cv::mat></code>
</div>
<br />
<br />
<table class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr>
<td>Image size: 512 x 512<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezdObdr4jFbcXi2i0Ka0iWcmmFE3VTA5x7ypZeAwZe8EV07UY0cwrB8FvQsSdc_DqUXbce0ieofozsriQ0v5nPVyBaN7fDy-3jcndKzfoF2wWBy9ocwPT4ezYwS_LIr7yc5KBlIEKj5E/s1600/Filtered+0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezdObdr4jFbcXi2i0Ka0iWcmmFE3VTA5x7ypZeAwZe8EV07UY0cwrB8FvQsSdc_DqUXbce0ieofozsriQ0v5nPVyBaN7fDy-3jcndKzfoF2wWBy9ocwPT4ezYwS_LIr7yc5KBlIEKj5E/s320/Filtered+0.jpg" width="320" /></a></div>
<br />
Image size: 256 x 256<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdY5FjKaJ8x7lln0Zbyi6K-HqRgIbclu2-E_axycv0bvtot6xUit3zX69wI7akJYGnsKw_P0NFU0P0jMRlJcJ-m4ThoUco_odts1wblTgY2knN3MZ_QijeJofQpv5AfPqIsF5y9KWTHQ/s1600/Filtered+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdY5FjKaJ8x7lln0Zbyi6K-HqRgIbclu2-E_axycv0bvtot6xUit3zX69wI7akJYGnsKw_P0NFU0P0jMRlJcJ-m4ThoUco_odts1wblTgY2knN3MZ_QijeJofQpv5AfPqIsF5y9KWTHQ/s1600/Filtered+1.jpg" /></a></div>
<br />
Image size: 128 x 128<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCibWmDFtL_FcXfoozb0B_UkB3JjWggHa3a_DsRB7yWl7tOyp2EkC3yqE6RZ07ulgFLdH2xK4SoZiWiUuO5O9YygiNFwQp9Q7JkftJTXMuYnECUViB3NMJOUnB_f3My9g2tLaK6ynBwZQ/s1600/Filtered+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCibWmDFtL_FcXfoozb0B_UkB3JjWggHa3a_DsRB7yWl7tOyp2EkC3yqE6RZ07ulgFLdH2xK4SoZiWiUuO5O9YygiNFwQp9Q7JkftJTXMuYnECUViB3NMJOUnB_f3My9g2tLaK6ynBwZQ/s1600/Filtered+2.jpg" /></a></div>
<br />
Image size: 64 x 64<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1yvYGSgyA3qUkc3SMrhvPVhBi2Uv042xOFfFV90nLUSPK9ekfAAXdLFC85nA6KjTWYa9XqeA4SkeyElELePPk8HB8JEnHt9WXqvWWLR1lOXY-CQh9-0aiIrQOUMtvFhZMZTyd_8bwQt0/s1600/Filtered+3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1yvYGSgyA3qUkc3SMrhvPVhBi2Uv042xOFfFV90nLUSPK9ekfAAXdLFC85nA6KjTWYa9XqeA4SkeyElELePPk8HB8JEnHt9WXqvWWLR1lOXY-CQh9-0aiIrQOUMtvFhZMZTyd_8bwQt0/s1600/Filtered+3.jpg" /></a></div>
<br />
Image size: 32 x 32<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwUjXMmdgUB5btrJcX6sFMMS8Rxb4P07XK2gV6Cx6ClNkLMeM-alOkw7XyW6Fq0JU4Wbkh8mTtGkIWMDsocqxyIq5XUEJIQZOj8oRsAKqy9zdHa6yQkdPmFmWSFsmkpA8N6oZKoweJVI/s1600/Filtered+4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwUjXMmdgUB5btrJcX6sFMMS8Rxb4P07XK2gV6Cx6ClNkLMeM-alOkw7XyW6Fq0JU4Wbkh8mTtGkIWMDsocqxyIq5XUEJIQZOj8oRsAKqy9zdHa6yQkdPmFmWSFsmkpA8N6oZKoweJVI/s1600/Filtered+4.jpg" /></a></div>
</td>
<td valign="top"><div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s1600/lena.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s320/lena.jpg" width="320" /></a></div>
</td>
</tr>
</tbody>
</table>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHnU2R6QTRoOEZYd2c/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHnU2R6QTRoOEZYd2c/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-69831437007883572032015-05-21T22:54:00.000+05:302015-05-21T22:55:33.525+05:30OpenCV Filters - bilateralFilterApplies the bilateral filter to an image.<br />
<br />
<b>C++:</b>
<code class="prettyprint lang-cc">
void blur(InputArray src, OutputArray dst, Size ksize, Point anchor=Point(-1,-1), int borderType=BORDER_DEFAULT ) </code><br />
<br />
<b>Python:</b>
<code class="prettyprint lang-py">
cv2.blur(src, ksize[, dst[, anchor[, borderType]]]) → dst </code><br />
<br />
<br />
<table><tbody valign="top">
<tr><th>Parameters:</th><td><ul>
<li><b>src</b> – Source 8-bit or floating-point, 1-channel or 3-channel image.</li>
<li><b>dst</b> – Destination image of the same size and type as <tt class="docutils literal"><span class="pre">src</span></tt> .</li>
<li><b>d</b> – Diameter of each pixel neighborhood that is used during filtering. If it is non-positive, it is computed from <tt class="docutils literal"><span class="pre">sigmaSpace</span></tt> .</li>
<li><b>sigmaColor</b> – Filter sigma in the color space. A
larger value of the parameter means that farther colors within the pixel
neighborhood (see <tt class="docutils literal"><span class="pre">sigmaSpace</span></tt> ) will be mixed together, resulting in larger areas of semi-equal color.</li>
<li><b>sigmaSpace</b> – Filter sigma in the coordinate space. A
larger value of the parameter means that farther pixels will influence
each other as long as their colors are close enough (see <tt class="docutils literal"><span class="pre">sigmaColor</span></tt> ). When <tt class="docutils literal"><span class="pre">d>0</span></tt> , it specifies the neighborhood size regardless of <tt class="docutils literal"><span class="pre">sigmaSpace</span></tt> . Otherwise, <tt class="docutils literal"><span class="pre">d</span></tt> is proportional to <tt class="docutils literal"><span class="pre">sigmaSpace</span></tt> .</li>
</ul>
</td>
</tr>
</tbody>
</table>
<br />
The function applies bilateral filtering to the input image, as described in
<a class="reference external" href="http://www.dai.ed.ac.uk/CVonline/LOCAL_COPIES/MANDUCHI1/Bilateral_Filtering.html">http://www.dai.ed.ac.uk/CVonline/LOCAL_COPIES/MANDUCHI1/Bilateral_Filtering.html</a>
<tt class="docutils literal"><span class="pre">bilateralFilter</span></tt> can reduce unwanted noise very well while keeping edges fairly sharp. However, it is very slow compared to most filters.<br />
<br />
<i>Sigma values</i>: For simplicity, you can set the 2 sigma values
to be the same. If they are small (< 10), the filter will not have
much effect, whereas if they are large (> 150), they will have a very
strong effect, making the image look “cartoonish”.<br />
<br />
<i>Filter size</i>: Large filters (d > 5) are very slow, so it
is recommended to use d=5 for real-time applications, and perhaps d=9
for offline applications that need heavy noise filtering.<br />
<br />
This filter does not work inplace.<br />
<br />
Reference: <a href="http://docs.opencv.org/modules/imgproc/doc/filtering.html#bilateralfilter" target="_blank">OpenCV Documentation - bilateralFilter</a><br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv </b><b>bilateral filter</b> filter.<br />
<br />
<div class="codediv">
<code class="prettyprint lang-cc"> string imgFileName = "lena.jpg";<br /><br /> cv::Mat src = cv::imread(imgFileName);<br /> if (!src.data){<br /> cout << "Unable to open file" << endl;<br /> getchar();<br /> return 1;<br /> }<br /><br /> cv::Mat dst;<br /> cv::bilateralFilter(src, dst, 20, 100, 100);<br /><br /> cv::namedWindow("Source");<br /> cv::namedWindow("Filtered");<br /><br /> cv::imshow("Source", src);<br /> cv::imshow("Filtered", dst);<br /> cv::waitKey(0);<br /><br /> cv::imwrite("BilateralFilter.jpg", dst);<br /><br /> return 0;</code></div>
<br />
<table class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1KedH-uebtbszgkPkQjuIfS-VVZWBiJD_HA2wB5e3-8uW5-nz3ksnXdtfyOX9srPxzgy0KEP4aC6uUJpTa2-l5ux6I3mUAMneVuhcj6Xbf_4BV_veB7oTmuk2NLCyJjZaLD29c75R1dU/s1600/Bilateral+Filter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1KedH-uebtbszgkPkQjuIfS-VVZWBiJD_HA2wB5e3-8uW5-nz3ksnXdtfyOX9srPxzgy0KEP4aC6uUJpTa2-l5ux6I3mUAMneVuhcj6Xbf_4BV_veB7oTmuk2NLCyJjZaLD29c75R1dU/s320/Bilateral+Filter.jpg" width="320" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s1600/lena.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s320/lena.jpg" width="320" /></a></div>
</td>
</tr>
</tbody>
</table>
<code class="prettyprint lang-cc">
</code>
<br />
<code class="prettyprint lang-cc"><br />
</code>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHndjhXN043elZJX00/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHndjhXN043elZJX00/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-41899720639081044592015-05-20T21:35:00.000+05:302015-06-05T22:07:58.757+05:30OpenCV Filters - Blur<div style="display:none"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLBiek4L30zSWjr0o0uGuK3cVm0bSbHD9aRnDfCXLpeIFIqwFs0Q-DdlW1k6VOys78BqVt-5Vl51jQ-7sxm0hLcqpmMQq3wiVBFlemRb4ktiuJr8lxAse6711YcnVSVy_O2VdN1pZanI/s320/Blur.jpg" width="320" /></div>
Blurs an image using the normalized box filter.<br />
<br />
<b>C++: </b><code class="prettyprint lang-cc">void blur(InputArray src, OutputArray dst, Size ksize, Point anchor=Point(-1,-1), int borderType=BORDER_DEFAULT ) </code><br />
<b>Python: </b><code class="prettyprint lang-py">cv2.blur(src, ksize[, dst[, anchor[, borderType]]]) → dst</code><br />
dgdfg<br />
<br />
<table><tbody valign="top">
<tr><th>Parameters:</th><td><ul>
<li><b>src</b> – input image; it can have any number of channels, which are processed independently, but the depth should be <tt class="docutils literal"><span class="pre">CV_8U</span></tt>, <tt class="docutils literal"><span class="pre">CV_16U</span></tt>, <tt class="docutils literal"><span class="pre">CV_16S</span></tt>, <tt class="docutils literal"><span class="pre">CV_32F</span></tt> or <tt class="docutils literal"><span class="pre">CV_64F</span></tt>.</li>
<li><b>dst</b> – output image of the same size and type as <tt class="docutils literal"><span class="pre">src</span></tt>.</li>
<li><b>ksize</b> – blurring kernel size.</li>
<li><b>anchor</b> – anchor point; default value <tt class="docutils literal"><span class="pre">Point(-1,-1)</span></tt> means that the anchor is at the kernel center.</li>
<li><b>borderType</b> – border mode used to extrapolate pixels outside of the image.</li>
</ul>
</td>
</tr>
</tbody>
</table>
The function smoothes an image using the kernel:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi1G-u3ibMgMiR2Rrb-wvOLPUnbDSeBD9ksIsedSJLQJ89FVssfAUkaUPmsSN2tNV_dHWw2oN7EFkkzhC1pbpafj8XFWeSnBd5s8KijdZbAFTO_rp42lRkReJIrxUYST7iDmM89NPHtI/s1600/blur+kernal.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi1G-u3ibMgMiR2Rrb-wvOLPUnbDSeBD9ksIsedSJLQJ89FVssfAUkaUPmsSN2tNV_dHWw2oN7EFkkzhC1pbpafj8XFWeSnBd5s8KijdZbAFTO_rp42lRkReJIrxUYST7iDmM89NPHtI/s320/blur+kernal.png" width="320" /></a></div>
<br />
The call <code class="prettyprint lang-cc">blur(src, dst, ksize, anchor, borderType)</code> is equivalent to <code class="prettyprint lang-cc">boxFilter(src, dst, src.type(), anchor, true, borderType)</code><br />
<br />
Reference: <a href="http://docs.opencv.org/modules/imgproc/doc/filtering.html#blur" target="_blank">OpenCV Documentation - blur</a>
<br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv blur</b> filter.<br />
<br />
<div class="codediv">
<code class="prettyprint lang-cc"> string imgFileName = "lena.jpg";<br /><br /> cv::Mat src = cv::imread(imgFileName);<br /> if (!src.data){<br /> cout << "Unable to open file" << endl;<br /> getchar();<br /> return 1;<br /> }<br /><br /> cv::Mat dst;<br /> cv::blur(src, dst, cv::Size(19, 19));<br /><br /> cv::namedWindow("Source");<br /> cv::namedWindow("Filtered");<br /><br /> cv::imshow("Source", src);<br /> cv::imshow("Filtered", dst);<br /> cv::waitKey(0);<br /><br /> cv::imwrite("Blur.jpg", dst);<br /><br /> return 0;</code></div>
<br />
<br />
<br />
<table class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span>
</td>
<td><span style="font-size: large;">Source Image</span></td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLBiek4L30zSWjr0o0uGuK3cVm0bSbHD9aRnDfCXLpeIFIqwFs0Q-DdlW1k6VOys78BqVt-5Vl51jQ-7sxm0hLcqpmMQq3wiVBFlemRb4ktiuJr8lxAse6711YcnVSVy_O2VdN1pZanI/s1600/Blur.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLBiek4L30zSWjr0o0uGuK3cVm0bSbHD9aRnDfCXLpeIFIqwFs0Q-DdlW1k6VOys78BqVt-5Vl51jQ-7sxm0hLcqpmMQq3wiVBFlemRb4ktiuJr8lxAse6711YcnVSVy_O2VdN1pZanI/s320/Blur.jpg" width="320" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s1600/lena.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6GBKWSg504jn77tHaJEQVFe83zIiSeVJi1pKq6PqVMy2LohBng3GJ-6Ldhu1sgiUqIaT_7v3xraTQMv5LDsR7koZVN9Fjs-WvsIk_Sw2ulVAjiAJp8cSkSbEL1RvZqAodDHs7lttgDs/s320/lena.jpg" width="320" /></a></div>
</td>
</tr>
</tbody></table>
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHncVBScXI0WGw1ZWc/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHncVBScXI0WGw1ZWc/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com2tag:blogger.com,1999:blog-3923972986350080010.post-15707062436122864532015-05-20T19:55:00.000+05:302015-05-21T22:49:27.997+05:30OpenCV Filters - adaptiveBilateralFilterApplies the adaptive bilateral filter to an image.<br />
<br />
<b>C++:</b> <code class="prettyprint lang-cc">void adaptiveBilateralFilter(InputArray src, OutputArray dst, Size ksize, double sigmaSpace, double maxSigmaColor=20.0, Point anchor=Point(-1, -1), int borderType=BORDER_DEFAULT ) </code>
<br />
<br />
<b>Python: </b><code class="prettyprint lang-py">cv2.adaptiveBilateralFilter(src, ksize, sigmaSpace[, dst[, maxSigmaColor[, anchor[, borderType]]]]) → dst </code><br />
<br />
<table><tbody valign="top">
<tr><th>Parameters:</th><td><ul>
<li><b>src</b> – The source image</li>
<li><b>dst</b> – The destination image; will have the same size and the same type as src</li>
<li><b>ksize</b> – The kernel size. This is the neighborhood
where the local variance will be calculated, and where pixels will
contribute (in a weighted manner).</li>
<li><b>sigmaSpace</b> – Filter sigma in the coordinate space.
Larger value of the parameter means that farther pixels will influence
each other (as long as their colors are close enough; see sigmaColor).
Then d>0, it specifies the neighborhood size regardless of
sigmaSpace, otherwise d is proportional to sigmaSpace.</li>
<li><b>maxSigmaColor</b> – Maximum allowed sigma color (will
clamp the value calculated in the ksize neighborhood. Larger value of
the parameter means that more dissimilar pixels will influence each
other (as long as their colors are close enough; see sigmaColor). Then
d>0, it specifies the neighborhood size regardless of sigmaSpace,
otherwise d is proportional to sigmaSpace.</li>
<li><b>borderType</b> – Pixel extrapolation method.</li>
</ul>
</td>
</tr>
</tbody>
</table>
A main part of our strategy will be to load each raw pixel once, and
reuse it to calculate all pixels in the output (filtered) image that
need this pixel value. The math of the filter is that of the usual
bilateral filter, except that the sigma color is calculated in the
neighborhood, and clamped by the optional input value.<br />
<br />
Reference: <a href="http://docs.opencv.org/modules/imgproc/doc/filtering.html#adaptivebilateralfilter" target="_blank">OpenCV Documentation - adaptiveBilateralFilter</a><br />
<br />
<span style="font-size: large;">Example</span><br />
This is a sample code (C++) with images for <b>opencv adaptive bilateral</b> filter.<br />
<br />
<div class="codediv">
<code class="prettyprint lang-cc">
string imgFileName = "lena.jpg";<br />
<br />
cv::Mat src = cv::imread(imgFileName);<br />
if (!src.data){<br />
cout << "Unable to open file" << endl;<br />
getchar();<br />
return 1;<br />
}<br />
<br />
cv::Mat dst;<br />
cv::adaptiveBilateralFilter(src, dst, cv::Size(11, 11), 50);//kernal size(11) should be an odd value<br />
<br /> cv::namedWindow("Source");<br /> cv::namedWindow("Filtered");<br />
<br /> cv::imshow("Source", src);<br /> cv::imshow("Filtered", dst);</code><br />
<code class="prettyprint lang-cc"> cv::waitKey(0);<br />
<br /> cv::imwrite("Adaptive Bilateral Filter.jpg", dst);
</code>
</div>
<br />
<br />
<table class="ocvfilters">
<tbody>
<tr valign="top">
<td><span style="font-size: large;">Filtered Image</span></td>
<td><span style="font-size: large;">Source Image</span>
</td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKVcr5H1LsZj-mW6Wq6tXvR-pqNRDxUMn_Y1lJwXUw4FiUEmFyz4yhqHSaddDd5JHY7-5RsyvzDnD1E_DsYKXpoa5Te_4hmOt26SttCr_8eYl4gKGIr2j6vh4OvTZBR__KSftnQ_CpQ5Q/s1600/Adaptive+Bilateral+Filter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKVcr5H1LsZj-mW6Wq6tXvR-pqNRDxUMn_Y1lJwXUw4FiUEmFyz4yhqHSaddDd5JHY7-5RsyvzDnD1E_DsYKXpoa5Te_4hmOt26SttCr_8eYl4gKGIr2j6vh4OvTZBR__KSftnQ_CpQ5Q/s320/Adaptive+Bilateral+Filter.jpg" width="320" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJIbscuqpKXE3Pc_NboUW341JIjvUuXGno8doa5QeREh0-elsTWwMj4QkFW3H0wsiRBhdzG8TYqZ9vBucRJF89i7No2FVO_WHSg3OQMby1sY8IuyM2NvoRQ7UhHRnmRe2H3AUdLMQbkA/s1600/lena.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJIbscuqpKXE3Pc_NboUW341JIjvUuXGno8doa5QeREh0-elsTWwMj4QkFW3H0wsiRBhdzG8TYqZ9vBucRJF89i7No2FVO_WHSg3OQMby1sY8IuyM2NvoRQ7UhHRnmRe2H3AUdLMQbkA/s320/lena.jpg" width="320" /></a></div>
</td>
</tr>
</tbody>
</table>
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHncnU2N2JOeDlCSjA/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHncnU2N2JOeDlCSjA/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com0tag:blogger.com,1999:blog-3923972986350080010.post-50497171322800101272015-04-30T00:06:00.000+05:302015-10-23T12:44:22.722+05:30Call OpenCV functions from C#.net (Bitmap to Mat and Mat to Bitmap)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNt-dnzpAwIQQb1ErW29RL3k3vzON0CgGk4D4vM7FdFT3_G0uWO7B5tDMZg8QVRqSdpmf4Ny2CSPaQF3pvYztjnYREkCkrbQ_N8BwzZJvnJL9zXq68lVoZpEhyHuOAbtHjOxsGABKSEc/s1600/comic.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="305" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNt-dnzpAwIQQb1ErW29RL3k3vzON0CgGk4D4vM7FdFT3_G0uWO7B5tDMZg8QVRqSdpmf4Ny2CSPaQF3pvYztjnYREkCkrbQ_N8BwzZJvnJL9zXq68lVoZpEhyHuOAbtHjOxsGABKSEc/s1600/comic.png" width="400" /></a></div>
<br />
This is the second article of the article series which provide answers to following question! How to call OpenCV functions from C#.net or VB.net. Specially this article describes, <b>how to pass System.Drawing.Bitmap to OpenCV and get a resultant image as System.Drawing.Bitmap from OpenCV</b>.<br />
<br />
<br />
Note that <b>System.Drawing.Bitmap</b> is the class type which allow you to manipulate images in C# while OpenCV treat images as <b>cv::Mat</b> (matrix). Therefore we need a way to convert from Bitmap to Mat vice versa in order to process and show processed images. This is the place where wrapper involved. For more details about wrappers, please refer <a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">previous article. </a><br />
<br />
<br />
<table style="background: #F0F5F5;">
<tbody>
<tr>
<td><span style="font-size: large;"><b><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">From Previous Article...</a></b></span><br />
So now we are going to create this wrapper for our application. Since we are dealing with .net framework, we can use CLR (Common Language Runtime) technique to create this wrapper. First you have to create a CLR project in Visual Studio.
This post will describe, how to call Opencv functions from winfrom/C# and apply an Opencv filter to an image and show the Opencv window from winform.
</td>
<td><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">
<img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkS-MU_L-SOfShFnCJy-fLTyptPiEZla5WYPjwzyVNllnR3mS0hc6JYgXVUXYPTrRtOhk8UjCrym6ov5BYgosNbeBJxHePkaqmklexjv59Y9M3iOQD0mnQhl-IDS2J2aoJCp7VlbKbI/s320/Wrapper_C%23.png" width="320" /></a>
</td>
</tr>
</tbody>
</table>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHneHk0YlZ3Uy1GTGM/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHneHk0YlZ3Uy1GTGM/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 1 - Create CLI Project </span></h3>
First of all we need to have a CLI project where we can call C++ functions from .net. You can follow the steps from <a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">previous article</a> to create a CLI project.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 2 - Create converter function from Bitmap to Mat</span></h3>
Now we need to convert System.Drawing.Bitmap to cv::Mat. To do this conversion, we need to get to the primitive level of both data type. That's mean, we can simply think every image has created from a set of bytes. So bytes can live in both C++ and C#. Therefore the cv::Mat should be created from the set of bytes of Bitmap. Simply copy all bytes from Bitmap to Mat, finally it will create Mat from Bitmap. Use following function to do this conversion.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
Mat BitmapToMat(System::Drawing::Bitmap^ bitmap)<br />{<br /> IplImage* tmp;<br /><br /> System::Drawing::Imaging::BitmapData^ bmData = bitmap->LockBits(System::Drawing::Rectangle(0, 0, bitmap->Width, bitmap->Height), System::Drawing::Imaging::ImageLockMode::ReadWrite, bitmap->PixelFormat);<br /> if (bitmap->PixelFormat == System::Drawing::Imaging::PixelFormat::Format8bppIndexed)<br /> {<br /> tmp = cvCreateImage(cvSize(bitmap->Width, bitmap->Height), IPL_DEPTH_8U, 1);<br /> tmp->imageData = (char*)bmData->Scan0.ToPointer();<br /> }<br /><br /> else if (bitmap->PixelFormat == System::Drawing::Imaging::PixelFormat::Format24bppRgb)<br /> {<br /> tmp = cvCreateImage(cvSize(bitmap->Width, bitmap->Height), IPL_DEPTH_8U, 3);<br /> tmp->imageData = (char*)bmData->Scan0.ToPointer();<br /> }<br /><br /> bitmap->UnlockBits(bmData);<br /><br /> return Mat(tmp);<br />}
</code>
</div>
<br />
<h3>
<span style="font-size: x-large;">Step 3 - Add System.Drawing namespace reference.</span></h3>
Once you add above function to your CLI project, you will get an error on <code class="prettyprint lang-c">System::Drawing::Bitmap</code>. The reason for this error is that the project has no reference to <code class="prettyprint lang-c">System::Drawing::Bitmap</code>. Follow below steps to add the reference. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioIS2em8wVb6EizR-aECq1OSyzvqLH9sin2MMEfCrhQo8R8Y1M2KFmE00ipbxnRChGHHMa6TuKzGh7ugyinEQikjUBFgPYYt6qzvRrOllgIcbLVhMQtgj3faabgaHLRfqYQxI0LFM6HUE/s1600/project+properties.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioIS2em8wVb6EizR-aECq1OSyzvqLH9sin2MMEfCrhQo8R8Y1M2KFmE00ipbxnRChGHHMa6TuKzGh7ugyinEQikjUBFgPYYt6qzvRrOllgIcbLVhMQtgj3faabgaHLRfqYQxI0LFM6HUE/s1600/project+properties.png" width="352" /></a></div>
Open project properties of CLI project.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQSQh9zBF0n5D-XjOqI2VwMK_ZfbdUuRgpsIM_gBBSD11dxZnHs6nD23GqT_n99E5A3g22vfRhyXT0G_r6qm4tHexC3Egjk2NJb98pc95Jpq9aU2f9JjNv_wFOITg-v_enbBeMWxQn5dY/s1600/project+properties+add+reference.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQSQh9zBF0n5D-XjOqI2VwMK_ZfbdUuRgpsIM_gBBSD11dxZnHs6nD23GqT_n99E5A3g22vfRhyXT0G_r6qm4tHexC3Egjk2NJb98pc95Jpq9aU2f9JjNv_wFOITg-v_enbBeMWxQn5dY/s1600/project+properties+add+reference.png" width="400" /></a></div>
Select <b>Common Properties</b> then <b>References</b> , Click on <b>Add New References... </b>It will open a window that can select dll files where you can add as references.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY9A94_ilOIRlU2C4V8kTsQPYIWLqvXFvwu2KHjQZVuzUdyVmYPBYF4zxHkAY5cQch-qu5ZvXbq9cbGrSsESYS_v59XTNXtXerd58cHo_u1VFA1I8Yyb5bR2jO8cO0QXV0UjSFnKEVL0E/s1600/Add+new+reference.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY9A94_ilOIRlU2C4V8kTsQPYIWLqvXFvwu2KHjQZVuzUdyVmYPBYF4zxHkAY5cQch-qu5ZvXbq9cbGrSsESYS_v59XTNXtXerd58cHo_u1VFA1I8Yyb5bR2jO8cO0QXV0UjSFnKEVL0E/s1600/Add+new+reference.png" width="400" /></a></div>
Select <b>Framework</b> under <b>Assembly </b>category. Then mark <b>System.Drawing</b>.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Now the project has referenced <b>System.Drawing</b>, and you should not see any compile errors in the function.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 4 - Create converter function from Mat to Bitmap</span></h3>
Same as previous conversion, we need to perform this conversion from the primitive level. That's mean we need to reconstruct the Bitmap from Mat's image data bytes. Use following function to convert from cv::Mat to System.Drawing.Bitmap.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; height: 500px; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
System::Drawing::Bitmap^ MatToBitmap(Mat srcImg){<br /> int stride = srcImg.size().width * srcImg.channels();//calc the srtide<br /> int hDataCount = srcImg.size().height;<br /> <br /> System::Drawing::Bitmap^ retImg;<br /> <br /> System::IntPtr ptr(srcImg.data);<br /> <br /> //create a pointer with Stride<br /> if (stride % 4 != 0){//is not stride a multiple of 4?<br /> //make it a multiple of 4 by fiiling an offset to the end of each row</code><br />
<code class="prettyprint lang-c"><br /> </code><code class="prettyprint lang-c"><code class="prettyprint lang-c">//to hold processed data</code></code><br />
<code class="prettyprint lang-c"><code class="prettyprint lang-c"> </code>uchar *dataPro = new uchar[((srcImg.size().width * srcImg.channels() + 3) & -4) * hDataCount];<br /><br /> uchar *data = srcImg.ptr();<br /><br /> //current position on the data array<br /> int curPosition = 0;<br /> //current offset<br /> int curOffset = 0;<br /><br /> int offsetCounter = 0;<br /><br /> //itterate through all the bytes on the structure<br /> for (int r = 0; r < hDataCount; r++){<br /> //fill the data<br /> for (int c = 0; c < stride; c++){<br /> curPosition = (r * stride) + c;<br /><br /> dataPro[curPosition + curOffset] = data[curPosition];<br /> }<br /><br /> //reset offset counter<br /> offsetCounter = stride;<br /><br /> //fill the offset<br /> do{<br /> curOffset += 1;<br /> dataPro[curPosition + curOffset] = 0;<br /><br /> offsetCounter += 1;<br /> } while (offsetCounter % 4 != 0);<br /> }<br /><br /> ptr = (System::IntPtr)dataPro;//set the data pointer to new/modified data array<br /><br /> //calc the stride to nearest number which is a multiply of 4<br /> stride = (srcImg.size().width * srcImg.channels() + 3) & -4;<br /><br /> retImg = gcnew System::Drawing::Bitmap(srcImg.size().width, srcImg.size().height,<br /> stride,<br /> System::Drawing::Imaging::PixelFormat::Format24bppRgb,<br /> ptr);<br /> }<br /> else{<br /><br /> //no need to add a padding or recalculate the stride<br /> retImg = gcnew System::Drawing::Bitmap(srcImg.size().width, srcImg.size().height,<br /> stride,<br /> System::Drawing::Imaging::PixelFormat::Format24bppRgb,<br /> ptr);<br /> }<br /> <br /> array<system::byte>^ imageData;<br /> System::Drawing::Bitmap^ output;<br /><br /> // Create the byte array.<br /> {<br /> System::IO::MemoryStream^ ms = gcnew System::IO::MemoryStream();<br /> retImg->Save(ms, System::Drawing::Imaging::ImageFormat::Png);<br /> imageData = ms->ToArray();<br /> delete ms;<br /> }<br /><br /> // Convert back to bitmap<br /> {<br /> System::IO::MemoryStream^ ms = gcnew System::IO::MemoryStream(imageData);<br /> output = (System::Drawing::Bitmap^)System::Drawing::Bitmap::FromStream(ms);<br /> }<br /><br /> return output;<br />}</system::byte><br />
</code>
</div>
<br />
<br />
Now we can convert cv::Mat to System.Drawing.Bitmap. You can call BitmapToMat() function to convert C# Bitmap and use converted Mat to do image processing from OpenCV, so OpenCV will produce processed image as Mat type, here you can use MatToBitmap() function to return Bitmap type object back to C#. Now you can treat this processed Bitmap as a normal Bitmap in C#.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 5 - Use converter functions and do image processing.</span></h3>
You can use above 2 functions and your own image processing code to create processed image from an input image. Here, I am trying to apply "medianBlur" opencv filter to C# Bitmap image. This is a sample code which show how to use these conversion functions along some opencv functions.<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
System::Drawing::Bitmap^ MyOpenCvWrapper::ApplyFilter(System::Drawing::Bitmap^ bitmap){<br /> Mat image = BitmapToMat(bitmap);//convert Bitmap to Mat<br /> if (!image.data){<br /> return nullptr;<br /> }<br /><br /> Mat dstImage;//destination image<br /><br /> //apply the Filter<br /> medianBlur(image, dstImage, 25);<br /><br /> //convert Mat to Bitmap<br /> System::Drawing::Bitmap^ output = MatToBitmap(dstImage);<br /><br /> return output;<br />}
</code>
</div>
<br />
<h3>
<span style="font-size: x-large;">Step 6 - Call from C#</span></h3>
Now you can call this function from C# by passing a Bitmap type object to the method and it will return the filter applied image back as a Bitmap. So you can use this returned Bitmap as a normal Bitmap in C#.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
//open jpg file as Bitmap<br />Bitmap img = (Bitmap)Bitmap.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg");<br /><br />OpenCvDotNet.MyOpenCvWrapper obj = new OpenCvDotNet.MyOpenCvWrapper();<br />Bitmap output = obj.ApplyFilter(img);//call opencv functions and get filterred image<br /><br /> output.Save("test.jpg");//save processed image </code></div>
<br />
If you put this code in an event handler in C#, it will looks like this,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJiOKdX3JdyL2vWdJsuyp-9lJwclcGUlWLtmxSPbCqKraCVzFzKLXJeW62hMTJ5BrCBBgZkM39DF10ILs819LdPh5kKlZv5_1_7xEY2RTcfjjRntU6i7em2gQyll4kyenFGTtLhpaW80/s1600/Call+opencv+from+C%23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJiOKdX3JdyL2vWdJsuyp-9lJwclcGUlWLtmxSPbCqKraCVzFzKLXJeW62hMTJ5BrCBBgZkM39DF10ILs819LdPh5kKlZv5_1_7xEY2RTcfjjRntU6i7em2gQyll4kyenFGTtLhpaW80/s1600/Call+opencv+from+C%23.png" /></a></div>
<br />
<h3>
<span style="font-size: x-large;">Step 7 - Use returned Bitmap from OpenCV in C#</span></h3>
you can use this returned Bitmap as a normal Bitmap in C# such as setting the image for PictureBox. Following code will open a Bitmap from a file, process in opencv to apply filter and show the results in a C# PictureBox control.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
private void btnOpen_Click(object sender, EventArgs e)<br />{<br /> //allow user to open jpg file <br /> OpenFileDialog dlogOpen = new OpenFileDialog();<br /> dlogOpen.Filter = "Jpg Files|*.jpg";<br /> if (dlogOpen.ShowDialog() != System.Windows.Forms.DialogResult.OK)<br /> return;<br /><br /> //open jpg file as Bitmap<br /> Bitmap img = (Bitmap)Bitmap.FromFile(dlogOpen.FileName);<br /><br /> pbSrcImg.Image = img;//set picture box image to UI<br /><br /> OpenCvDotNet.MyOpenCvWrapper processor = new OpenCvDotNet.MyOpenCvWrapper();<br /> Bitmap processedImg = processor.ApplyFilter(img);//call opencv functions and get filterred image<br /><br /> pbDstImage.Image = processedImg;//set processed image to picture box<br />}<br />
</code>
</div>
<br />
Where <code class="prettyprint lang-c"><code class="prettyprint lang-c">pbSrcImg</code></code> and <code class="prettyprint lang-c">pbDstImage</code> are PictureBox UI controls in C#. Once you open a jpg image it will show the UI as follow,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFkqZ2MbqWJaNE4hKa6IAGrysA4OO5DurT5SPnTp1LIuJHxaZlj_IYp9UOQDFgzPLPQNNAH9QvqhJW5rAzLulF-vnOP3hoBExKKhLMH-SI-q44efGc7XgBtCJKmAgCUs8uYcZ5C9FW-s/s1600/call+opencv+from+c%23+UI+results.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFkqZ2MbqWJaNE4hKa6IAGrysA4OO5DurT5SPnTp1LIuJHxaZlj_IYp9UOQDFgzPLPQNNAH9QvqhJW5rAzLulF-vnOP3hoBExKKhLMH-SI-q44efGc7XgBtCJKmAgCUs8uYcZ5C9FW-s/s1600/call+opencv+from+c%23+UI+results.png" /></a></div>
<br />
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHneHk0YlZ3Uy1GTGM/view?usp=sharing" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrT9Ab-to6pF43k2LBzwOqrJf2m8z8r9U71R1Gj7oYToHGXbp5OAuUgnOj5JohBuDhSuO6uM7ARAz0qgGhPyH7-ACJL1iQnPIwJsvlWMKbaT_P1bOyYd_qWbI7-ndGhs5QZHfKTzGuruA/s1600/download+icon.png" /></a>
<br />
<a href="https://drive.google.com/file/d/0B-BWbjJKCQHneHk0YlZ3Uy1GTGM/view?usp=sharing" target="_blank">Download</a> complete Visual Studio project.<br />
<br />
<br />
<table style="background: #F0F5F5;">
<tbody>
<tr>
<td><span style="font-size: large;"><b><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">From Previous Article...</a></b></span><br />
So now we are going to create this wrapper for our application. Since we are dealing with .net framework, we can use CLR (Common Language Runtime) technique to create this wrapper. First you have to create a CLR project in Visual Studio.
This post will describe, how to call Opencv functions from winfrom/C# and apply an Opencv filter to an image and show the Opencv window from winform.
</td>
<td><a href="http://milindapro.blogspot.com/2015/04/call-opencv-functions-from-cnet.html" target="_blank">
<img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkS-MU_L-SOfShFnCJy-fLTyptPiEZla5WYPjwzyVNllnR3mS0hc6JYgXVUXYPTrRtOhk8UjCrym6ov5BYgosNbeBJxHePkaqmklexjv59Y9M3iOQD0mnQhl-IDS2J2aoJCp7VlbKbI/s320/Wrapper_C%23.png" width="320" /></a>
</td>
</tr>
</tbody>
</table>
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com12tag:blogger.com,1999:blog-3923972986350080010.post-85468113497714376442015-04-05T10:34:00.000+05:302015-10-23T12:44:27.832+05:30Call OpenCV functions from C#.net<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkS-MU_L-SOfShFnCJy-fLTyptPiEZla5WYPjwzyVNllnR3mS0hc6JYgXVUXYPTrRtOhk8UjCrym6ov5BYgosNbeBJxHePkaqmklexjv59Y9M3iOQD0mnQhl-IDS2J2aoJCp7VlbKbI/s1600/Wrapper_C%23.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkS-MU_L-SOfShFnCJy-fLTyptPiEZla5WYPjwzyVNllnR3mS0hc6JYgXVUXYPTrRtOhk8UjCrym6ov5BYgosNbeBJxHePkaqmklexjv59Y9M3iOQD0mnQhl-IDS2J2aoJCp7VlbKbI/s1600/Wrapper_C%23.png" height="211" width="320" /></a></div>
OpenCV is a C++ library, .net is different platform. Therefore, how to call Opencv functions from .net or how to call Opencv functions from C# or vb.net. This is possible because remember we are using Visual C++ for our Opencv projects and VC++ also a part of .net platform. This will allow you to wrap our specific opencv functions to be able to call from C#. A wrapper means an intermediate party which act as a communicator between 2 different sides. Simply you can use this technique to keep your front end GUI in C#, vb.net or WPF while keeping opencv as the back end to do image processing.<br />
<br />
So now we are going to create this wrapper for our application. Since we are dealing with .net framework, we can use CLR (Common Language Runtime) technique to create this wrapper. First you have to create a CLR project in Visual Studio.<br />
<br />
This post will describe, how to call Opencv functions from winfrom/C# and apply an Opencv filter to an image and show the Opencv window from winform. <br />
<br />
<h3>
<span style="font-size: x-large;">Step 1 – Create a CLR project</span></h3>
Click on File-->New Project and select CLR under Visual C++ then select Class Library.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK15cB4Xmc9xTsdaTjklfjh9PKqbU_AXc5_5lRS1ZRe7APiP4yNh0Ax3fkT5hNoF0ngKj2G0XMbHey2TPxaNijzZ-PowLV8Q9F2pQPj4bwDXrX9xB9_-uIIdUewQJiWxrVeaXl3pxoAcM/s1600/opencv_on_.net_image1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK15cB4Xmc9xTsdaTjklfjh9PKqbU_AXc5_5lRS1ZRe7APiP4yNh0Ax3fkT5hNoF0ngKj2G0XMbHey2TPxaNijzZ-PowLV8Q9F2pQPj4bwDXrX9xB9_-uIIdUewQJiWxrVeaXl3pxoAcM/s1600/opencv_on_.net_image1.png" height="411" width="640" /></a></div>
<br />
Then you will get a sample header file and cpp file for your wrapper class where you have to put all the functions' headers in class definition (in .h file) to be able to call from C#.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 2 -Apply OpenCV Configurations to the project.</span></h3>
You can set all the project properties for Building and Linking a normal Opencv C++ project or you can import all the properties at once from an existing Property sheet as explained in <a href="http://milindapro.blogspot.com/2015/01/create-opencv-property-sheets-in-visual.html" target="_blank">this article</a>.<br />
<h3>
</h3>
<h3>
<span style="font-size: x-large;">Step 3 - Create CLR functions to call from C#</span></h3>
<br />
Now create a method in CLR class to call from C#. Here we need to keep something in mind, that is, C# deal with pointers (unless you specify as not a pointer/reference). Therefor all the parameters for this method should be pass as a pointer. But for now we will create a method without parameters.<br />
<br />
Type following code in your class<br />
<table border="0">
<tbody>
<tr>
<td><div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
public:<br />
void ApplyFilter();<br />
<br />
</code>
</div>
</td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoITdqWvA7rXrnn_V9DnZTaDpKHMrYj8tIDDzimaME8BnQ4oRER3Yy5IgSIppSIrU6ysQFoSA8EuYvqDNYhBtqJN6PKngH3T_K-2DkNFETa7tLQfWHvoSqHLgxK8mLa2M09rO-FLhwJg/s1600/Code1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoITdqWvA7rXrnn_V9DnZTaDpKHMrYj8tIDDzimaME8BnQ4oRER3Yy5IgSIppSIrU6ysQFoSA8EuYvqDNYhBtqJN6PKngH3T_K-2DkNFETa7tLQfWHvoSqHLgxK8mLa2M09rO-FLhwJg/s1600/Code1.png" height="262" width="320" /></a>
</td>
</tr>
</tbody></table>
<br />
Now ApplyFilter is the method that we are going to call from C# using an object created from MyOpenCvWrapper class. <br />
<h3>
<span style="font-size: x-large;">Step 4 - Include Opencv headers</span></h3>
Add all the header files of opencv that you need for this class, Here we just need cv.h and highgui.h. Remember to add include derivatives to your header file<br />
<br />
<table border="0">
<tbody>
<tr>
<td><div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
#include <opencv\cv.h><br />
#include <opencv\highgui.h>
</code>
</div>
</td>
<td><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhafenbb9IAJvgm0k1B8Xi9bTbauM_ZBzBoIM8JNIms97CBfSuVMFKoeRUclCqOc8shJafZoR6AE8ONuomklGnhh0MQz9IZ90dtam8yX_ftHZA8IBMgxX-8fsrgxj09IahUk6dZX1SP8/s1600/Code2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhafenbb9IAJvgm0k1B8Xi9bTbauM_ZBzBoIM8JNIms97CBfSuVMFKoeRUclCqOc8shJafZoR6AE8ONuomklGnhh0MQz9IZ90dtam8yX_ftHZA8IBMgxX-8fsrgxj09IahUk6dZX1SP8/s1600/Code2.png" height="310" width="320" /></a></div>
</td>
</tr>
</tbody></table>
<br />
<h3>
<span style="font-size: x-large;">Step 5 - Code for the method</span></h3>
Open your cpp file and enter following code. This is the function that we are going to call from opencv and this is the code to do image processing. you can follow normal way to implement a class in C++.<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
#include "OpenCvDotNet.h"<br /><br />using namespace OpenCvDotNet;<br />using namespace cv;<br /><br />void MyOpenCvWrapper::ApplyFilter(){<br /> Mat image = imread("C:\\Pictures\\Hydrangeas.jpg");<br /> Mat dstImage;<br /><br /> if (!image.data){<br /> return;<br /> }<br /><br /> //Apply the Filter<br /> GaussianBlur(image, dstImage, Size(31, 31), 0);<br /><br /> namedWindow("Image Window", CV_WINDOW_KEEPRATIO);<br /> imshow("Image Window", dstImage);<br />}</code>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1H5DuifuC17GXpvOtiDZdseG7SHPi52Zff5r_mkwtUL0j-HFEKCc55Ir75KEkjZX98csfMbix2VBB4cWgbh1kBMOWybCVlxiCCpWEplzw-w5K_dEyxvn9vE9g1_tgtUqEftS3xPam7ak/s1600/Code3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivnuPGlUd3GdwWQfODLIAANz2nzPgVyY5Oywp8aQe1frpOcM1Tm79erphiBZ4SbXvCPkwxPqDfcC5C_FZ_Wwq4adORIuS8ZReDP0WpacZUKg5ee0RU-qqeSNDnjOIWL3xWo-kEZsusFjE/s1600/Code3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivnuPGlUd3GdwWQfODLIAANz2nzPgVyY5Oywp8aQe1frpOcM1Tm79erphiBZ4SbXvCPkwxPqDfcC5C_FZ_Wwq4adORIuS8ZReDP0WpacZUKg5ee0RU-qqeSNDnjOIWL3xWo-kEZsusFjE/s1600/Code3.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Code Explanation -<br />
This code will open the image named "Hydrangeas.jpg" from "C:\Pictures" directory and check whether image opened successfully or not. Then it will apply a filter and show the result in an opencv window.<br />
<br />
<h3>
<span style="font-size: x-large;">Step 6 - Add reference to C# project</span></h3>
Create and add a new project to your solution by Right click on your solution.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-QqbspkAH6Aj8zsu9LjNOfifSG-nZVRTiK_C0lU2nlsnzUCU6lIjgse9nEAMFSZ3ApxznS8SJJqorard0CwIODCQxG53q8h5Jf3JkiEa7VRcMIoL8v2RmHZIb6kcwHqXMakguKXTQHE/s1600/New_csharp_project.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-QqbspkAH6Aj8zsu9LjNOfifSG-nZVRTiK_C0lU2nlsnzUCU6lIjgse9nEAMFSZ3ApxznS8SJJqorard0CwIODCQxG53q8h5Jf3JkiEa7VRcMIoL8v2RmHZIb6kcwHqXMakguKXTQHE/s1600/New_csharp_project.png" height="317" width="400" /></a></div>
<br />
Now you can create either "Windows Form Application" or "WPF Application" or any other project type to use your opencv code. For this article I am using "Windows Form Application". After adding Winform project to your solution, your solution explorer should has 2 projects (CLR project and winform project).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-VnHSJ9Rw56VO3lcC4bTaJIisHzvBhKeKQGAqNotUkjkZQCTBizEZyf01tBbJSPi0QyuxttEMYNghXsDQcj52rFroCtJKT4QRQvWWmmMyqaGDR9NYjmKa8ludWfEFL5uSy3bMmiN7gk/s1600/solution_exprorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-VnHSJ9Rw56VO3lcC4bTaJIisHzvBhKeKQGAqNotUkjkZQCTBizEZyf01tBbJSPi0QyuxttEMYNghXsDQcj52rFroCtJKT4QRQvWWmmMyqaGDR9NYjmKa8ludWfEFL5uSy3bMmiN7gk/s1600/solution_exprorer.png" /></a></div>
<br />
Now you can Right click on Reference on WinFormProject and add reference to CLI project. You can find your project under Solutions/Project.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8EVD2-8r-gbrWpFM2KjJxg5UB18fOrx9stg-wU8Rdy0q_g60i8S6uzltY4K0WxeyZUhPqV01JsnMqfTLeLLFVzXUHZfZ_6VP8pfY-f8FPVO989XCc3ePmcDaIHO_N_pHMhwhK1r6ASo/s1600/reference.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8EVD2-8r-gbrWpFM2KjJxg5UB18fOrx9stg-wU8Rdy0q_g60i8S6uzltY4K0WxeyZUhPqV01JsnMqfTLeLLFVzXUHZfZ_6VP8pfY-f8FPVO989XCc3ePmcDaIHO_N_pHMhwhK1r6ASo/s1600/reference.png" height="200" width="400" /></a></div>
<br />
<h3>
<span style="font-size: x-large;">Step 6 - Call OpenCV from Winform project</span></h3>
Now you have made the link between winform and cli project which includes opencv calls. Note that the architecture (32bit or 64bit) of both projects should be same and the .net framework versions should be same on both projects to build your whole solution.<br />
<br />
Use the class that we created from CLI project to create an object in C# and call the method that we created in CLI project from C#. then you should see the success !<br />
<br />
I just added a button to my winform and call the method from there.<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
private void button1_Click(object sender, EventArgs e)<br />{<br /> OpenCvDotNet.MyOpenCvWrapper obj = new OpenCvDotNet.MyOpenCvWrapper();<br /> obj.ApplyFilter();<br />}</code>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnZkMqiztYWkYwGjHPA4Bsg9HBSM7XyuyfZO5fuFC0juJRLYG3PpwH-iJjFLSqP3bBhyphenhyphenaZzbcNQ4n60uw1GdhexpRE_9dRWVuPg-b-VKpEGpASwXG48Et82uvR6JIGJdj13kClGRZ2pM/s1600/winform_code.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnZkMqiztYWkYwGjHPA4Bsg9HBSM7XyuyfZO5fuFC0juJRLYG3PpwH-iJjFLSqP3bBhyphenhyphenaZzbcNQ4n60uw1GdhexpRE_9dRWVuPg-b-VKpEGpASwXG48Et82uvR6JIGJdj13kClGRZ2pM/s1600/winform_code.png" /></a></div>
<h3>
<span style="font-size: x-large;">Step 7 - Run and test</span></h3>
Now you can run your winform application. Remember to set the winform project as the "Startup Project" <br />
Then once you clicked on the button, you should see an opencv window showing a blur image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJg8uf8uIgMmoDwkT5M9P54jeQY9j4G7adpaoBTQR6EtnxNwhF_jamMcWo2A5YxTppY3KbuEP2dkKirqmYX8E2y37iBEhZ8UtV7qo6TcbrMtFsQJ4jmd5Nw9bz8idEAyKRxpCjreiZT4/s1600/output-opencv_winform.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJg8uf8uIgMmoDwkT5M9P54jeQY9j4G7adpaoBTQR6EtnxNwhF_jamMcWo2A5YxTppY3KbuEP2dkKirqmYX8E2y37iBEhZ8UtV7qo6TcbrMtFsQJ4jmd5Nw9bz8idEAyKRxpCjreiZT4/s1600/output-opencv_winform.png" height="282" width="400" /></a></div>
<br />
<br />
This is a very simple way to call and get an output from opencv using winform/C#. My next post will describe how to pass a C# System.Drawing.Bitmap to CLI project and get the output image as a System.Drawing.Bitmap from the Opencv CLI.Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com4tag:blogger.com,1999:blog-3923972986350080010.post-5128397430357218252015-01-04T21:22:00.000+05:302015-04-09T00:15:26.776+05:30Create OpenCV property sheets in Visual Studio to store properties<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9pf3RkBg9QmpT2en0LIQLvHc7mhyphenhyphenYkPqgkTj1mIWj3NuRz5hkqYrlnkNCZPV78p1vJEmZBYxjywKWyS3C9gyazxjWIlW47Mq05X0KhpINHu9mVDXtJ4LwZETQUjvnOSNpoM6P7fw5rFE/s1600/Opencv+visual+studio.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9pf3RkBg9QmpT2en0LIQLvHc7mhyphenhyphenYkPqgkTj1mIWj3NuRz5hkqYrlnkNCZPV78p1vJEmZBYxjywKWyS3C9gyazxjWIlW47Mq05X0KhpINHu9mVDXtJ4LwZETQUjvnOSNpoM6P7fw5rFE/s1600/Opencv+visual+studio.jpg" /></a></div>
<br />
<br />
OpenCV is a very famous open source image processing library. Most of the Windows users are using OpenCV on Visual Studio IDE which provides C/C++ coding. Anyway You have to set some properties in each and every Visual Studio project, if you need to use OpenCV. This is very hard to me :). Because we have to set number of properties each and every times when you are creating a new project.<br />
<br />
The solution for this is "Create a property sheet which can hold all the OpenCV properties". Following steps will describes How to create an OpenCV property sheet in Visual Studio 2013.<br />
<br />
<br />
<h3>
<span style="font-size: x-large;">Step 1 - Create a new C++ project</span></h3>
You can follow normal steps to create a new C++ project. <b>File --> New --> Project</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxP7iB9453nczAyQbpxktSlEe8gl-Pbb7nwtxRaMC2w6fa0O03JJFB42pUtxD9yl4O6fQXrNdfm81pFT-U_KcR_-CjRtkq4JZ6gohYg4g2tvqB50nioTJMIbHxx_Uxp53FOVO02okKAQa/s1600/Create+new+project.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxP7iB9453nczAyQbpxktSlEe8gl-Pbb7nwtxRaMC2w6fa0O03JJFB42pUtxD9yl4O6fQXrNdfm81pFT-U_KcR_-CjRtkq4JZ6gohYg4g2tvqB50nioTJMIbHxx_Uxp53FOVO02okKAQa/s1600/Create+new+project.PNG" height="256" width="400" /></a></div>
<h3>
<span style="font-size: x-large;">
Step 2 - Create new property sheet</span></h3>
First you have to open "<b>Property Manager</b>" window to manage all the property sheets for this project. Click on <b>View --> Other Window --> Property Manager</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUnUEkLMQ5HrphcHtfWAuVMtFOyrg3AMqYPmRFhftObJiDDetfsiUxNPmd4ypde7pN78-7uCStn7Be1XdzCKqdCbJ33vPnIBqhKZ3NVxHKAkcVWtAWaGrQ5RVCZuu9DuMDCZuq0X6GVXWT/s1600/new+property+sheet1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUnUEkLMQ5HrphcHtfWAuVMtFOyrg3AMqYPmRFhftObJiDDetfsiUxNPmd4ypde7pN78-7uCStn7Be1XdzCKqdCbJ33vPnIBqhKZ3NVxHKAkcVWtAWaGrQ5RVCZuu9DuMDCZuq0X6GVXWT/s1600/new+property+sheet1.png" height="400" width="393" /></a></div>
Then you will see a window similar to following window.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowXTkeH8M3Thua50-VkIleJn-1YENQgE_-YiJoafvWCpUugsnIu8QZy6BId_yoGGpkg0zlAxpYCI4jVP7A3LK5NdzQAeOXOBEhIoT9ekfrHQarX8JWxSxS-hvvsMByIW40bp1HYIdsQLR/s1600/new+property+sheet2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowXTkeH8M3Thua50-VkIleJn-1YENQgE_-YiJoafvWCpUugsnIu8QZy6BId_yoGGpkg0zlAxpYCI4jVP7A3LK5NdzQAeOXOBEhIoT9ekfrHQarX8JWxSxS-hvvsMByIW40bp1HYIdsQLR/s1600/new+property+sheet2.png" /></a></div>
Here we have to create 2 property sheets for Debug and Release. Also If your project is 64 bit then you will have another 2 items as "Debug | x64" and "Release | x64", then you have to create two 64 bit property sheets separately. Anyway this article will guide you to create 32 bit property sheets.<br />
<br />
Now Right click on "<b>Debug | Win32</b>" and select "<b>Add New Project Property Sheet...</b>" and give a name for your property sheet (Here I am using OpenCVDebug as the name).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv4p2ytItqhTqAA1-fFDTTDSh6-zisGe8oP8ZhHbaL7djyF0eldaUvxxObGW7mOUbd5uE608MhjiNqKvBKdiTR4xVyn7ojDRi-eykhyHMpXwlkrIngN5LR29EkiKHlmdxnNc5aSa-pUQIT/s1600/new+property+sheet3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv4p2ytItqhTqAA1-fFDTTDSh6-zisGe8oP8ZhHbaL7djyF0eldaUvxxObGW7mOUbd5uE608MhjiNqKvBKdiTR4xVyn7ojDRi-eykhyHMpXwlkrIngN5LR29EkiKHlmdxnNc5aSa-pUQIT/s1600/new+property+sheet3.png" height="306" width="400" /></a></div>
Then you will see your new property sheet on <b>Property Manager</b>.<br />
<br />
<h3>
<span style="font-size: x-large;">
Step 3 - Set OpenCV properties (Debug) </span></h3>
Now we are going to set all the opencv properties for Debug mode. Right click on your new Property sheet and select <b>Properties</b>. There are 3 things that you have to set in here.<br />
<ol>
<li>OpenCV include directory</li>
<li>OpenCV library directory</li>
<li>OpenCV libraries</li>
</ol>
<h3>
<b>1. Setting OpenCV include directories</b> </h3>
Go to <b>General</b> tab under <b>C/C++</b> and click on <b>Edit </b>under <b>Additional Include Directories</b>. Now set the directory path of your opencv include directory. (You can find this directory under <b>build </b>folder in opencv folder)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_0ByApfK2tzGJVAiKF6MCdmTnm9eRg4B1rZi7cuVL0Mbegg7ZpWO1bgjITbYBtRQC6PNLNkps6OR7ssjX8sQG14Z_jud58Vl__U0VwGb95vqztxsYe0Tlc1Id8acTc_vJPw-IY1_RHFx/s1600/new+property+sheet4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_0ByApfK2tzGJVAiKF6MCdmTnm9eRg4B1rZi7cuVL0Mbegg7ZpWO1bgjITbYBtRQC6PNLNkps6OR7ssjX8sQG14Z_jud58Vl__U0VwGb95vqztxsYe0Tlc1Id8acTc_vJPw-IY1_RHFx/s1600/new+property+sheet4.png" height="310" width="400" /></a></div>
<h3>
2. Setting OpenCV library directory</h3>
Go to <b>General </b>tab under <b>Linker </b>and add a new directory path for the <b>Additional Library Directories </b>as the library directory which includes 32bit lib files for your compiler version. Here I am using Visual Studio 2013 therefore I have to select <b>vc12</b> and <b>x86 </b>since I am crating 32bit application.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkmKGNWNsjXJMi2ysNYPan5jJSSRyEDehPJWy38QVujYyYfuBPS5bdBjp0H7Dto5qnWDJw4wkhF5wt6JdFcxjcfUXA7uBLyHWFJL5D9eImBwx5ImQMdgzfglOy7SusT9kWofqt1IJL6Af/s1600/new+property+sheet5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkmKGNWNsjXJMi2ysNYPan5jJSSRyEDehPJWy38QVujYyYfuBPS5bdBjp0H7Dto5qnWDJw4wkhF5wt6JdFcxjcfUXA7uBLyHWFJL5D9eImBwx5ImQMdgzfglOy7SusT9kWofqt1IJL6Af/s1600/new+property+sheet5.png" height="310" width="400" /></a></div>
<h3>
3. Setting OpenCV libraries</h3>
Go to <b>Input </b>tab under <b>Linker </b>to set libraries for the opencv. Click <b>Edit </b>on <b>Additional Dependencies </b>and enter all the lib files' names which are ended with <i><b>d</b></i> (for an example <i>opencv_core2410d.lib</i>) inside your lib directory that you mentioned on "Setting Opencv library directory" step. Here <i><b>d </b></i>stands for Debug.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW4hI01cpMW-ImOp_ZNH6QFpfYZ3XKmnmh-NnJnFxU_agngyQDY3hICRpOjbaPNRAbzA5n96C2kAncpaLY99myy11cDo1x1GrjXxZaHXfhP0G5RajoyMEDS7mZEurDmtJSKquQaAW1SK2o/s1600/new+property+sheet6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW4hI01cpMW-ImOp_ZNH6QFpfYZ3XKmnmh-NnJnFxU_agngyQDY3hICRpOjbaPNRAbzA5n96C2kAncpaLY99myy11cDo1x1GrjXxZaHXfhP0G5RajoyMEDS7mZEurDmtJSKquQaAW1SK2o/s1600/new+property+sheet6.png" height="310" width="400" /></a></div>
Now all the properties have set to build an opencv project in Debug mode. If you need to build in Release mode you have to create a new separate property sheet under <b>Release | Win32 </b>and follow same steps as I mentioned above to set properties except 3rd step. Here you have to enter all the lib file names which are <b>not </b>ended with <i><b>d</b></i> (for an example <i>opencv_core2410.lib</i>)<br />
<br />
<h3>
<span style="font-size: x-large;">
Step 4 - Save and reuse Property sheets</span></h3>
Now click on <b>Save </b>button on the <b>Property Manager</b> to save your property sheets. Then you can find your property sheets where you saved (Here project folder).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezqg4SM7puVh0EcnYyLh6g3nBaS9gd6sg29jUJ3FBvYBiCn1OBmc2j2Ni4oZWd2MGLI3M1yTu9GXafU_2uOsAfLpyXVDQYwCWa-6Z3aLzxyOpSRZV0Ictf4rVGFPHeeKl6V58SC_nXn0q/s1600/new+property+sheet7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezqg4SM7puVh0EcnYyLh6g3nBaS9gd6sg29jUJ3FBvYBiCn1OBmc2j2Ni4oZWd2MGLI3M1yTu9GXafU_2uOsAfLpyXVDQYwCWa-6Z3aLzxyOpSRZV0Ictf4rVGFPHeeKl6V58SC_nXn0q/s1600/new+property+sheet7.png" height="205" width="320" /></a></div>
Now assume that you have created a new Visual Studio OpenCV project, then you don't need to set all these properties again and again. You just needed to import these properties from these saved property sheets by clicking on "<b>Add Existing Property Sheet..</b>". So all the properties will be automatically set for your project. This is too easier than just setting these properties repeatably.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBu4kVR0LUL-QKYD0M835SKDaxM95WVTwESNAv2xru2t54RP3fKKceSFQ8BZudd0I_YW747p4d1_MXjFD5wFY1E4-d9e_r-ME2i19wjrvPZ2jg8uVgVunQY0HNHmVUHrXQINtniPOSv-R/s1600/new+property+sheet8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBu4kVR0LUL-QKYD0M835SKDaxM95WVTwESNAv2xru2t54RP3fKKceSFQ8BZudd0I_YW747p4d1_MXjFD5wFY1E4-d9e_r-ME2i19wjrvPZ2jg8uVgVunQY0HNHmVUHrXQINtniPOSv-R/s1600/new+property+sheet8.png" height="205" width="320" /></a></div>
Thanks for reading this article and hope this will increase your developing speed !<br />
<br />
<br />Milinda Arunahttp://www.blogger.com/profile/13315999860833243686noreply@blogger.com2tag:blogger.com,1999:blog-3923972986350080010.post-14829690141657959682013-09-22T07:24:00.001+05:302013-09-22T07:28:41.856+05:30How to create bootable USB pen driveBootable pen drive is a nice way to install operating systems to your machine. Only you need to do is just create bootable pen drive as describe here and change boot drive order to boot from USB, then you are ready to install any operating system from USB!<br />
<br />
Here, I am going to describe How to create bootable USB pen drive to instal Ubuntu 13.04 64bit using one of nice software in Windows. This software supports large number of Linux operating system distributions and non-Linux operating systems such as Windows 7.<br />
<br />
Note that you will need to have Operating System as an iso image file to make this happen.<br />
<br />
<b><span style="font-size: x-large;">Step 1</span></b><br />
Download <a href="http://www.pendrivelinux.com/downloads/Universal-USB-Installer/Universal-USB-Installer-1.9.4.3.exe" target="_blank">Universal USB Installer</a> which enable you to create bootable pen drive.<br />
<br />
<span style="font-size: x-large;"><b>Step 2</b></span><br />
Plug your USB pen drive to your machine and start the downloaded exe file.<br />
<br />
<span style="font-size: x-large;"><b>Step 3</b></span> <br />
Follow every steps as described,<br />
<ul>
<li>Select operating system to be installed (Here, Ubuntu 13.04 64bit).</li>
<li>Select Pen Drive to extract selected operating system.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg_QvyublK0q29AlC7tHlo1tfxT3hxaGGm5N4ZuYuN-AOmwPe_VoXrpLDu6AZ8mWYe5HOyG6eIyd2CSop5yZ8Dhe-2HAA5Q4WL3pl0T95ZHROaoY61phBG7mBDIrBuBMqNsWPwkj_3mM/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg_QvyublK0q29AlC7tHlo1tfxT3hxaGGm5N4ZuYuN-AOmwPe_VoXrpLDu6AZ8mWYe5HOyG6eIyd2CSop5yZ8Dhe-2HAA5Q4WL3pl0T95ZHROaoY61phBG7mBDIrBuBMqNsWPwkj_3mM/s1600/1.png" /></a></div>
<br />
<span style="font-size: x-large;"><b>Step 4</b></span><br />
<br />
You will get a window like this before you continue when you press on Create button on step3. Notice that I have selected the option Format to format my pen drive, you can uncheck this option anyway.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Q3u0lb6Jtod4FadZXqdURGLTjeBVblAcFH2Pw57vScnE8kfZ_FMxljeN_UqCE21i-MyygRVHDDwc1GVYceqDMjiutx9B4894cMXV_zZ1BvdizRO5ErLMWrycyiLx4PkVNzHJNfuyi8Y/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Q3u0lb6Jtod4FadZXqdURGLTjeBVblAcFH2Pw57vScnE8kfZ_FMxljeN_UqCE21i-MyygRVHDDwc1GVYceqDMjiutx9B4894cMXV_zZ1BvdizRO5ErLMWrycyiLx4PkVNzHJNfuyi8Y/s1600/2.png" /></a></div>
Press yes to continue.<br />
<br />
<br />
<b><span style="font-size: x-large;">Step 5</span></b><br />
You will see several processes running from the software to perform the task. You will need to wait few minutes to complete these processes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpWqedm47JSV-ISxEhzzwR-dtdC_Bdl4Fvhm4Pj_gzpKRJakAOdYkARZzLA0vv5hleKIrTxrzB_w0bT-3sdcll78Q8eY7LAsMpsUwHB8TkOfCmcjJppc4XzQ23GfQVNMj5my-M9HZHQE/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpWqedm47JSV-ISxEhzzwR-dtdC_Bdl4Fvhm4Pj_gzpKRJakAOdYkARZzLA0vv5hleKIrTxrzB_w0bT-3sdcll78Q8eY7LAsMpsUwHB8TkOfCmcjJppc4XzQ23GfQVNMj5my-M9HZHQE/s1600/3.png" /></a></div>
<br />
<span style="font-size: x-large;"><b>Step 6</b></span><br />
Finally, you should see the success! then you can complete creating bootable pen drive and you can instal your operating system using pen drive.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMz7tfYks1fXIlkJt-VRSnH9PQdjbYOiupyEBN0TfVDTev2Y2QNimfBd9eRmJd7XEozSobSFYhST6k2hs6WlYw1qVeEJAi1x_QUkDEuNVjf8H-xIbdk2D9UPH0vuxF6QlkZocS_bfhk08/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMz7tfYks1fXIlkJt-VRSnH9PQdjbYOiupyEBN0TfVDTev2Y2QNimfBd9eRmJd7XEozSobSFYhST6k2hs6WlYw1qVeEJAi1x_QUkDEuNVjf8H-xIbdk2D9UPH0vuxF6QlkZocS_bfhk08/s1600/4.png" /></a></div>
<br />
<br />
<br />
<br />
Happy installing !<br />
<br />
<br />
Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com2tag:blogger.com,1999:blog-3923972986350080010.post-28761896958793377902013-01-09T22:38:00.004+05:302015-04-21T10:32:37.523+05:30Rendering Unicode characters on your Android device<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPpPejPk3FJtX0CiS-yJ2lWr2LAm5yvOvHTtu90Yl_tUCJTzJIhamPPP2RWQeUA86-7AeasxE7OkvUE8jc7ZldV1kmkhXfziscGWuHR6LbhzYePWFvnugT0-zkJToOLKIPYRVcQP4Giw/s1600/matrix+android.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPpPejPk3FJtX0CiS-yJ2lWr2LAm5yvOvHTtu90Yl_tUCJTzJIhamPPP2RWQeUA86-7AeasxE7OkvUE8jc7ZldV1kmkhXfziscGWuHR6LbhzYePWFvnugT0-zkJToOLKIPYRVcQP4Giw/s1600/matrix+android.jpg" height="200" width="182" /></a></div>
This post is about a problem which I face and the solution for it...So the problem is How to render or enable Unicode characters on my android device. I got this problem when I browse a web site which include Sinhala Unicode characters.<br />
<br />
I am using <b>Opera mini browser</b> to browse internet. So here is the way to render Unicode characters on <b>Opera mini.</b> <br />
<br />
<b><span style="font-size: large;">Step 1</span></b><br />
Type <b>config: </b>or<b> opera:config </b>in address bar and tap on <b>Go</b>, then it will display a configuration page.<br />
<br />
<span style="font-size: large;"><b>Step 2</b></span><br />
Scroll down and find out the title of <b>"Use bitmap fonts for complex scripts" </b>and select <b>Yes </b>from the combo box. Now Save the configurations by tap on <b>Save </b>button.<br />
<br />
Now close the config page and now you are welcome to Unicode pages...!<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com1tag:blogger.com,1999:blog-3923972986350080010.post-78628778493244214842012-12-16T17:07:00.000+05:302012-12-16T17:20:50.210+05:30Interface DS1307 RTC with PIC16f877 through I2C<a href="http://milindapro.blogspot.com/2012/12/hitch-c-code-for-i2c-communication.html" target="_blank">Previous post</a> introduce you the I2C communication protocol in briefly and present a complete set of functions to perform I2C communication as a 'master' (from hi tech C compiler). This post will be dedicated to introduce a RTC(Real Time Clock) IC DS1307 and a simple code to perform read/write operations on RTC through I2C. This code also implemented using Hi tech C compiler and PIC16f877 as the MCU.<br />
<br />
What is RTC? yaaa RTC stands for <b>Real Time Clock</b>. Most of the devices those maintaining a clock for their functions use these kind of ICs.Also DS1307 has its own capability to use backup battery(3V coin) power when main power source shutdown.<br />
<br />
<a href="http://datasheets.maximintegrated.com/en/ds/DS1307.pdf" target="_blank">You can download Datasheet for DS1307.</a><br />
<br />
The features can be listed bellow,<br />
<br />
<div style="float: left; height: 270px; padding-right: 20px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXw0HDdOxybpJ2EOcnw1QUoq5Nl0JS_DaSuX1y7WfVvpE64pRvUcfDqWGodSUZjGt15mPo8Ku0KiNhYsVfwsUilVEoMsHmlzOR0hjs-UMl4TPQnrJ7ppfm14DkXd1CQ1FZ8-Ut4KnGmys/s1600/RTC+DS1307+on+circuit.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXw0HDdOxybpJ2EOcnw1QUoq5Nl0JS_DaSuX1y7WfVvpE64pRvUcfDqWGodSUZjGt15mPo8Ku0KiNhYsVfwsUilVEoMsHmlzOR0hjs-UMl4TPQnrJ7ppfm14DkXd1CQ1FZ8-Ut4KnGmys/s1600/RTC+DS1307+on+circuit.jpg" /></a>
</div>
<ul>
<li>Real-time clock (RTC) counts seconds, minutes, hours, date
of the month, month, day of the week, and year with leap-year compensation
valid up to 2100</li>
<li>56-byte, battery-backed, nonvolatile (NV) RAM for data
storage</li>
<li>Two-wire serial interface (I2C)</li>
<li>Programmable square wave output signal</li>
<li>Automatic power-fail detects and switches circuitry</li>
<li>Consumes less than 500nA in battery backup mode with
oscillator running</li>
<li>Optional industrial temperature range: -40°C to +85°C</li>
<li>Available in 8-pin DIP or SOIC</li>
</ul>
<br />
Most significant thing in the IC is the battery backup power because if it a real time clock it should be run always to get the real time from it. Therefore you do non need to worry about clock it will run independently from your MCU.<br />
<br />
<br />
<span style="font-size: large;"><b>Source code for DS1307 RTC</b></span><br />
<br />
So let's move to source code. This code uses the functions implemented on <a href="http://milindapro.blogspot.com/2012/12/hitch-c-code-for-i2c-communication.html" target="_blank">previous post</a>. Therefore it is better to download those codes and create a header file for those functions so you can re-use them latter. Don't worry a complete source code can be found at the end of this post. Here DS1307 act as a slave on the bus and our MCU act as the master on the bus.<br />
<br />
<b>Data Write - Slave Receiver Mode</b><br />
First let's try to write a function to write a byte to DS1307's EEPROM. I refer following diagram which I grab from DS1307's datasheet to code this function.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhPZYZsa8RKUD1MZhh1HtSE3hwVQFHXr_112ujKX43_LF-adLxCEwrSbDYvx-220Nm9tLfFPMjvPnU75iM1llzQXJBNVZQeOi4xfeugpNTOTZcETR16h0HuZKSyvZiMjJTMuieJUJG5Q/s1600/dataWrite.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhPZYZsa8RKUD1MZhh1HtSE3hwVQFHXr_112ujKX43_LF-adLxCEwrSbDYvx-220Nm9tLfFPMjvPnU75iM1llzQXJBNVZQeOi4xfeugpNTOTZcETR16h0HuZKSyvZiMjJTMuieJUJG5Q/s1600/dataWrite.jpg" height="162" width="640" /></a></div>
<br />
So lets implement this diagram into code!<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
void ds1307Write(unsigned char address, unsigned char data){<br /> i2CStart();//start the i2c bus<br /> i2CSend(208);//send DS1307 write command, DS1307 address + direction bit(R/nW) 1101000 + 0 = 11010000 = 208<br /> i2CSend(address);//send the address that you need to write data on.<br /> i2CSend(data);//write data on the address<br /> i2CStop();//close the I2C bus<br />}
</code>
</div>
<br />
<i><span style="font-size: small;"><b>Code explained</b></span></i><br />
<br />
<div style="background: none repeat scroll 0% 0% border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">i2CStart();//start the i2c bus</code></div>
<br />
This is the function call which we create in <a href="http://milindapro.blogspot.com/2012/12/hitch-c-code-for-i2c-communication.html" target="_blank">previous post</a> to send start condition through I2C bus. So this code is to send the start condition to slave device.<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">i2CSend(208);//send DS1307 write command, DS1307 address + direction bit(R/nW) 1101000 + 0 = 11010000 = 208</code></div>
<br />
If you can remember, I2C communication can be done by sending 7 bits wide address and R/W bit immediately following start condition on the bus. So this is the sending of address and the direction bit to the DS1307. The address for DS1307 is 1101000 (in binary) then the direction bit R/<strike>W</strike> (1 for read 0 for write). Then whole byte is the concatenated bits of address and R/<strike>W</strike> bit,<br />
<br />
1101000 + 0 = 11010000 = 208 (in decimal)<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">i2CSend(address);//send the address that you need to write data on.</code></div>
<br />
Then you need to send address which you want to write data on EEPROM of DS1307.<br />
<br />
<br />
<code class="prettyprint lang-c">i2CSend(data);//write data on the address </code><br />
<br />
Then the data to be written on above specified address.<br />
<br />
<br />
<code class="prettyprint lang-c">i2CStop();//close the I2C bus</code><br />
<br />
Then stop the I2C communication.<br />
<br />
<br />
<b>Data Read—Slave Transmitter Mode</b><br />
Now the read function. This will be some what complicated, because you need to point the address where you want to read from before initiate the read operation. I refer following diagram from datasheet to implement the function. This function will return a byte at once which is located on address specified.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirF3LFDhZuY2zSG8mRqZclmriewNUsDtXOVTdt24VvHWsZvWtY_jVvgqMpeg9abqVmhqEz8rtv7CUrZ-fZNPR_xQ3eAiPsihtSiw_COS3KQ5XDi3dVt4_nBGrhS61McXwif00FmPMkDus/s1600/dataRead.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirF3LFDhZuY2zSG8mRqZclmriewNUsDtXOVTdt24VvHWsZvWtY_jVvgqMpeg9abqVmhqEz8rtv7CUrZ-fZNPR_xQ3eAiPsihtSiw_COS3KQ5XDi3dVt4_nBGrhS61McXwif00FmPMkDus/s1600/dataRead.jpg" height="210" width="640" /></a></div>
<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
unsigned char ds1307Read(unsigned char address){<br /> unsigned char data;<br /><br /> i2CStart();//send start signal on I2C bus<br /> i2CSend(208);//send DS1307 dummy write command to get the pointer to our location<br /> //DS1307 address + direction bit(R/nW) 1101000 + 0 = 11010000 = 208<br /> i2CSend(address);//set the address pointer<br /> i2CRestart();//send stop+start signal to bus<br /> i2CSend(209);//send read command to DS1307<br /> data = i2CRead();//read the buffer for received data<br /> i2CStop();//close the i2c bus<br /> return data;<br />}</code>
</div>
<br />
<i><span style="font-size: small;"><b>Code explained</b></span></i><br />
Initially send the start condition to the bus as explained in previous function to initiate the I2C bus for communication.<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">i2CSend(208);//send DS1307 dummy write command to get the pointer to our location<br />
//DS1307 address + direction bit(R/nW) 1101000 + 0 = 11010000 = 208</code></div>
<br />
Then we send a dummy write command to get the EEPROM's pointer to the location that we need to read from. Therefore this byte will send to the DS3107 with the write operation direction bit (same as previous function). But we do not write anything on it.<br />
<br />
<br />
<code class="prettyprint lang-c">i2CSend(address);//set the address pointer</code><br />
<br />
Then send the address that we need to point on to set the EEPROM's pointer to the location.<br />
<br />
<br />
<code class="prettyprint lang-c">i2CRestart();//send stop+start signal to bus</code><br />
<br />
As I explained earlier we are not going to write anything, only purpose to issue write operation is set the pointer to the location.Therefore send the 'repeated start' condition to the bus.<br />
<br />
<br />
<code class="prettyprint lang-c">i2CSend(209);//send read command to DS1307 </code><br />
<br />
Now we can send the read operation to DS1307. The value can be calculated as follows,<br />
DS1307 address (1101000) + direction bit (1 for read) = 1101001 = 209 (in decimal<br />
<br />
<br />
<code class="prettyprint lang-c">data = i2CRead();//read the buffer for received data</code><br />
<br />
Now you can read data from DS1307 and hold these data on "data" variable. If you have any doubt about these function which are calling in this post please refer <a href="http://milindapro.blogspot.com/2012/12/hitch-c-code-for-i2c-communication.html" target="_blank">previous post</a>. Because, none of the function that we calling here are inbuilt functions.<br />
<br />
<br />
<code class="prettyprint lang-c">i2CStop();//close the i2c bus<br />return data;</code><br />
<br />
Then close the I2C bus by sending stop condition and return the data which read from DS1307's EEPROM<br />
<br />
<b>DS1307's memory</b><br />
Now you have functions for read and write operations. Now let's try to extract data from DS1307. We will need its memory map to do that. Memory map is,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6xmPGaOtGH24JOg9BXRZ8D3GnefPj5X-G0hPhFkyP8B3V_xfS2HoKn1q-drnBFrdQOMiRH2LXCe43sY4pXr1lvLaQP3u2nkPjS4DB0jTjEYM58P4q53s3fsFeLWjk9eformHOlfbLXs/s1600/DS1307_memory.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6xmPGaOtGH24JOg9BXRZ8D3GnefPj5X-G0hPhFkyP8B3V_xfS2HoKn1q-drnBFrdQOMiRH2LXCe43sY4pXr1lvLaQP3u2nkPjS4DB0jTjEYM58P4q53s3fsFeLWjk9eformHOlfbLXs/s1600/DS1307_memory.jpg" height="248" width="640" /></a></div>
<br />
Now let's try to read seconds from the memory as you can see here the Seconds data contain in 3 parts. Those are <b>CH bit</b>, <b>10 Seconds</b> and <b>Seconds</b>. If you read the datasheet, you can find the functionality of CH bit. It is the clock enable bit. If you set CH = 0 the clock is enabled and running, if you set CH = 1 the clock will be disable. I will explain <b>10 Seconds and Second </b>thing from a example,<br />
<br />
Let's say the seconds on the clock is 36, then,<br />
10 Seconds = 3 (011)<br />
Seconds = 6 (110)<br />
and let CH = 0<br />
<br />
Now the byte on the 0th position is 0 + 011 + 110 = 0011110 (plus mean concatenate). So I think you got the trick or still complicated...! Don't worry I have created functions to get and set Seconds, Minutes, Hours (in 12 hour or 24 hour mode), and Day. You can code your own functions for other things (Date, month and year). Only thing is to understand the memory map of the IC and code it. <br />
<br />
You can download a complete source code and test program at the end of this tutorial.<br />
The complete code is,<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; height: 500px; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
/**<br /> * Function will read a byte from the @address location of the memory<br /> * @param address - address that you need to read<br /> * @return received data byte from DS1307<br /> */<br />unsigned char ds1307Read(unsigned char address){<br /> unsigned char data;<br /><br /> i2CStart();//send start signal on I2C bus<br /> i2CSend(208);//send DS1307 dummy write command to get the pointer to our location<br /> //DS1307 address + direction bit(R/nW) 1101000 + 0 = 11010000 = 208<br /> i2CSend(address);//set the address pointer<br /> i2CRestart();//send stop+start signal to bus<br /> i2CSend(209);//send read commad to DS1307<br /> data = i2CRead();//read the buffer for received data<br /> i2CStop();//close the i2c bus<br /> return data;<br />}<br /><br />/**<br /> * Write to DS1307's eeprom<br /> * @param address - address to write data (0 - 7)<br /> * @param data - 8bit data to be written<br /> */<br />void ds1307Write(unsigned char address, unsigned char data){<br /> i2CStart();//start the i2c bus<br /> i2CSend(208);//send DS1307 write command, DS1307 address + direction bit(R/nW) 1101000 + 0 = 11010000 = 208<br /> i2CSend(address);//send the address that you need to write data on.<br /> i2CSend(data);//write data on the address<br /> i2CStop();//close the I2C bus<br />}<br /><br />/**<br /> * get seconds from DS1307's eeprom<br /> * @return seconds on DS1307<br /> */<br />unsigned char ds1307GetSec(){<br /> unsigned char sec10;<br /> unsigned char sec1;<br /><br /> unsigned char bcdSec = ds1307Read(0);//get the 0th location data(CH + 10Sec + 1Sec)[in BCD format]<br /><br /> bcdSec = bcdSec & 0b1111111;//ignore CH bit (ignore MSB)<br /> sec10 = bcdSec >> 4;//shift 4 bits right to ignore 1sec position(ignore 4 LSB)<br /> sec1 = bcdSec & 0b1111;//ignore 4 MSBs<br /><br /> return sec10 * 10 + sec1;//return the seconds<br />}<br /><br />/**<br /> * get minutes from DS1307's eeprom<br /> * @return minutes on DS1307<br /> */<br />unsigned char ds1307GetMin(){<br /> unsigned char min10;<br /> unsigned char min1;<br /><br /> unsigned char bcdMin = ds1307Read(1);//get the 1st loaction's data(0 + 10Min + 1Min)[in BCD format]<br /><br /> bcdMin = bcdMin & 0b1111111;//ignore MSB<br /> min10 = bcdMin >> 4;//shift 4 bit right to ignore 1min position(ignore 4 LSB)<br /> min1 = bcdMin &0b1111;<br /><br /> return min10 * 10 + min1;//return the minnutes<br />}<br /><br />/**<br /> * This function will return the hours in 24 hour format by reading from DS1307<br /> * @return hours from DS1307 in 24 hours format<br /> */<br />unsigned char ds1307GetHours(){<br /> unsigned char hour10;<br /> unsigned char hour1;<br /> unsigned char retHour;<br /><br /> unsigned char bcdHour = ds1307Read(2);//get the 1st loaction's data(0 + 12 or 24 hour mode + 10hour(first bit) or PM/AM + 10hour(second bit) + 1hour)[in BCD format]<br /> bcdHour = bcdHour & 0b1111111;//ignore MSB(7th bit)<br /> if(bcdHour > 63){//is in 12 hours mode?<br /> bcdHour = bcdHour & 0b111111;//ignore MSB(6th bit)<br /><br /> hour10 = (bcdHour & 0b11111) >> 4;//get the hour10 position by ignoring MSB(5th bit) and shift 4 bits to right<br /> hour1 = bcdHour & 0b1111;//get hour1 position by getting only 4 LSBs<br /> retHour = hour10 * 10 + hour1;//calculate the hours using hour10 and hour1<br /><br /> if(bcdHour > 31){//is PM?<br /> if(retHour != 12)<br /> retHour = retHour + 12;<br /> }<br /> }else{<br /> bcdHour = bcdHour & 0b111111;//ignore MSB(6th bit)<br /> hour10 = bcdHour >> 4;//shift 4 bit to right to get 5th and 4th bits<br /> hour1 = bcdHour & 0b1111;//get 4 LSBs<br /><br /> retHour = hour10 * 10 + hour1;//calculate the hours using hour10 and hour1<br /> }<br /><br /> return retHour;<br />}<br /><br />/**<br /> * reads the Day value from DS1307 memory<br /> * @return the number for the specific day (1=SUN, 2=MON,... 7=SAT)<br /> */<br />unsigned char ds1307GetDay(){<br /> return ds1307Read(3);//read value on 3rd location of DS1307 and return it<br />}<br /><br />/**<br /> * set seconds to DS1307 with CH bit<br /> * @param newSec - seconds to be set (0 - 79)<br /> * @param chBit - Clock enable bit (0 = clock enable, 1 = clock disable)<br /> */<br />void ds1307SetSecond(unsigned char newSec, unsigned char chBit){<br /> unsigned char bcdNum;<br /> if(newSec > 79)<br /> return;//to avoid writing to CH when writing to second feild<br /><br /> ds1307separateDigits(newSec);<br /> bcdNum = digitPlaceVal[1] << 4;//shift 4 bits left<br /> bcdNum = bcdNum | digitPlaceVal[0];//ORing with placeValue1<br /><br /> //add CH bit<br /> if(chBit == 1)<br /> bcdNum = bcdNum | 0b10000000;<br /><br /> ds1307Write(0, bcdNum);//write to sec<br />}<br /><br />/**<br /> * Set DS1307 minutes<br /> * @param newMin - minutes to be set(0 - 127)<br /> */<br />void ds1307SetMinutes(unsigned char newMin){<br /> unsigned char bcdNum;<br /> if(newMin > 127)<br /> return;//to avoid overlimit<br /><br /> ds1307separateDigits(newMin);<br /> bcdNum = digitPlaceVal[1] << 4;//shift 4 bits left<br /> bcdNum = bcdNum | digitPlaceVal[0];//ORing with placeValue1<br /><br /> ds1307Write(1, bcdNum);//write to min<br />}<br /><br />/**<br /> * Set DS1307 hours in 12 hour mode<br /> * @param newHour - hours in 12 hour mode (0 - 19)<br /> * @param pm_nAm - AM/PM bit <b>(1 for PM, 0 for AM)</b><br /> */<br />void ds1307SetHours12(unsigned char newHour, unsigned char pm_nAm){<br /> unsigned char bcdNum;<br /> if(newHour > 19)<br /> return;//avoid overlimit<br /><br /> ds1307separateDigits(newHour);<br /> bcdNum = digitPlaceVal[1] << 4;//place hour's placeValue10<br /> bcdNum = bcdNum | digitPlaceVal[0];//ORing with placeValue1<br /><br /> bcdNum = bcdNum | 0b1000000;//set 12 hour mode<br /> if(pm_nAm)//PM?<br /> bcdNum = bcdNum | 0b100000;//set PM<br /><br /> ds1307Write(2, bcdNum);//write to hours<br />}<br /><br />/**<br /> * Set DS1307 hours in 24 hour mode<br /> * @param newHour - hours in 24 hour mode (0 - 29)<br /> */<br />void ds1307SetHour24(unsigned char newHour){<br /> unsigned char bcdNum;<br /> if(newHour > 29)<br /> return;//avoid overlimit<br /><br /> ds1307separateDigits(newHour);<br /> bcdNum = digitPlaceVal[1] << 4;//place hour's placeValue10<br /> bcdNum = bcdNum | digitPlaceVal[0];//ORing with placeValue1<br /><br /> ds1307Write(2, bcdNum);//write to hours<br />}<br /><br />/**<br /> * Set day to DS1307 (range 0-7)<br /> * @param newDay - day to be set (1 = SUN, 2 = MON,...., 7 = SAT)<br /> */<br />void ds1307SetDay(unsigned char newDay){<br /> if(newDay > 7)<br /> return;//avoid overlimit<br /><br /> ds1307Write(3, newDay);//write to day<br />}<br /><br />/**<br /> * This function accept 2 digit number and separate it into 10 and 1 place value and assign to digit array<br /> * <br />digit[0] = place value 1<br /> * <br />digit[1] = place value 10<br /> * @param num2 - 2 digit number(0 - 99)<br /> */<br />void ds1307separateDigits(unsigned char num2){<br /> digitPlaceVal[1] = num2 / 10;<br /> digitPlaceVal[0] = num2 - (digitPlaceVal[1] * 10);<br />}<br />
</code>
</div>
<br />
<b><span style="font-size: large;"><br /></span></b>
<b><span style="font-size: large;">Download</span></b><br />
<a href="https://docs.google.com/open?id=0B-BWbjJKCQHnaE1ndVF3UmxzRTQ" target="_blank">A complete source code and test program.</a><br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com8tag:blogger.com,1999:blog-3923972986350080010.post-4223630511182288642012-12-13T12:14:00.000+05:302012-12-16T15:12:44.028+05:30Hi-tech C code for I2C communicationBefore move to code I think it is better to write a brief introduction to I2C communication.<br />
<br />
I²C (pronounced
I-squared-C) created by
Philips Semiconductors and commonly written as 'I2C' stands for
Inter-Integrated Circuit and allows communication of data between I2C
devices over two wires. It sends information serially using one line
for data (SDA) and one for clock (SCL).There needs to be a third wire which is just the ground or 0 volts.
There may also be a 5volt wire is power is being distributed to the
devices. Both SCL and SDA lines are "open drain" drivers. What this
means is that the chip can drive its output low, but it cannot drive it
high. For the line to be able to go high you must provide pull-up
resistors to the 5v supply. I2C bus can have one or more I2C devices connected.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyk3EmtLc378EMr8V_UnDekPVXMdx8a7_gxj04T2byVjtr4p5FAVvdV_DF-kqWPosg-ZTpezZ9XSGLrwcVM7zGgkgeDnwp4BAe92QJYv0FnGVphOv4BiGVNSYAZzzRFOdvfKixlEdP0U/s1600/I2C+Bus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyk3EmtLc378EMr8V_UnDekPVXMdx8a7_gxj04T2byVjtr4p5FAVvdV_DF-kqWPosg-ZTpezZ9XSGLrwcVM7zGgkgeDnwp4BAe92QJYv0FnGVphOv4BiGVNSYAZzzRFOdvfKixlEdP0U/s1600/I2C+Bus.jpg" height="224" width="640" /></a></div>
<br />
<br />
<span style="font-size: large;"><b>Master and Slave</b></span><br />
The devices on the I2C bus are either masters or slaves. The master is
always the device that drives the SCL clock line. Slaves are the
devices that respond to the master. A slave cannot initiate a transfer
over the I2C bus, only a master can do that. There can be multiple slaves on the I2C bus. Also both slaves and masters can receive/send data over I2C. But always master initiate the data transfer over I2C bus.<br />
<br />
Always I2C communication start with the start condition and terminate with the stop condition. Between these conditions you can transfer data between master and slave(s).<br />
<br />
<span style="font-size: large;"><b>Addressing</b></span><br />
Each slave device on the I2C bus should have a unique address. Then master can address these salve device individually for better communication between master and slave device. Always master initiate data transfer with the address to select a slave device on the bus for further communication.<br />
Address byte contain 7bit address and data direction bit (R/W). This will initiate the specific slave device to be read or write operations. <br />
<br />
<br />
<span style="font-size: large;"><b>START (S) and STOP (P) bits</b></span><br />
<div align="left">
START (S) and STOP (P) bits are
unique signals that can be generated on the bus but <b>only</b>
by a bus master.</div>
<div align="left">
This can be done at any time so you can
force a restart if anything goes wrong even in the middle of
communication.</div>
<blockquote class="tr_bq">
<div align="left">
START and STOP bits are defined as
rising or falling edges on the data line while the clock line is kept
high.</div>
</blockquote>
<div align="left">
And this is the only occurrence of falling or rising SDA line while SCL line in high. Therefore this can be captured by slave devices as start/stop condition.<br />
Also microchip device support restart condition, which is simply send stop(P) condition and start(S) condition sequentially by the master.</div>
<div align="left">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSw3tXRhiji3p9Bhg-bsj80LEzXQ6SLMBagcnpSjC8BvFXK0zLlerBU4yeWa1s7lDvZhvjl4_kg-F-d1VGE0AdXTqmyPBQI4widOUTrtkUNK0znhxI1P4XEu0e9_deqBAYm0kIwuEjeo/s1600/i2cStartStop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSw3tXRhiji3p9Bhg-bsj80LEzXQ6SLMBagcnpSjC8BvFXK0zLlerBU4yeWa1s7lDvZhvjl4_kg-F-d1VGE0AdXTqmyPBQI4widOUTrtkUNK0znhxI1P4XEu0e9_deqBAYm0kIwuEjeo/s1600/i2cStartStop.jpg" height="216" width="640" /></a></div>
<br />
<br />
<span style="font-size: large;"><b>Data</b></span><br />
<div align="left">
All data blocks are composed of 8
bits (1 Byte). The
initial block has 7 address bits followed by a direction bit (Read or
Write). Acknowledge bits are
squeezed in between each block. Each data byte is transmitted MSB
first including the address byte.</div>
<br />
<b><span style="font-size: large;">Acknowledge</span></b> <br />
<div align="left">
The acknowledge bit (generated by
the receiving
device) indicates to the transmitter that the the data transfer was ok.
Note that the clock pulse for the acknowledge bit is always created by
the bus master.</div>
<div align="left">
The acknowledge data bit is
generated by either
the master or slave depending on the data direction. For the master
writing to a slave the acknowledge is generated by the slave. For
the master receiving data from a slave the master generates the
acknowledge bit.</div>
<div align="left">
<br /></div>
<div align="left">
This acknowledge bit can acknowledge(ACK) or not-acknowledge(NACK) depending on operations on the I2C bus.</div>
<ul>
<li>To acknowledge the receiving device must put the SDA line into low with the next clock pulse.</li>
<li>To not-acknowledge the receiving device must high SDA line with the next clock pulse (simply do nothing on the SDA line, then it will remain high) </li>
</ul>
<div align="left">
When data receiving by the master not-acknowledge bit must generate by the master to indicate to slave, "there no need to send more data to me(master)". Then master must stop the I2C bus by sending STOP(P) condition.</div>
<div align="left">
<br /></div>
<div align="left">
<br /></div>
<div align="left">
<span style="font-size: large;"><b>Data transfer from master to slave</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Md-xIMKH6BO2fcfyW6ShU1LjmaZjfJF_5EmBt6X3wjM3MXkueaaM8HNHNJkUoFNJYCd2azfGdG4h9uJBEMnpJWPbQJ-y4KAq6bXguGO4aERO3BC7wj6DXsKl4ZkMI3QWbljUuFPWpAY/s1600/i2cMasterSlave.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Md-xIMKH6BO2fcfyW6ShU1LjmaZjfJF_5EmBt6X3wjM3MXkueaaM8HNHNJkUoFNJYCd2azfGdG4h9uJBEMnpJWPbQJ-y4KAq6bXguGO4aERO3BC7wj6DXsKl4ZkMI3QWbljUuFPWpAY/s1600/i2cMasterSlave.jpg" /></a></div>
<br /></div>
<div align="left">
<br />
<span style="font-size: large;"><b>Data transfer from slave to master</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQl6oyu-3ZCgskJdzKWhxoYqESFCEQKNf0sQlpQoZWtCwlyJdyqR73urhDAJ9-WsBlp0XAq6Nz04M-lwwvbBBXxy7IAAC3HPb4XI6bP5FK95cKUydXcAx0anzx74ykh013B7y3N5Ud_k/s1600/i2cSlaveMaster.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQl6oyu-3ZCgskJdzKWhxoYqESFCEQKNf0sQlpQoZWtCwlyJdyqR73urhDAJ9-WsBlp0XAq6Nz04M-lwwvbBBXxy7IAAC3HPb4XI6bP5FK95cKUydXcAx0anzx74ykh013B7y3N5Ud_k/s1600/i2cSlaveMaster.jpg" /></a></div>
<br />
<br /></div>
<br />
I think now you have a brief idea about I2C communication. So let's move to code. This code was written in Hitech C for most popular PIC16f877 microcontroller which is developed by microchip Inc using its inbuilt MSSP(Master Synchronous Serial Port) unit. <br />
<br />
<br />
<b><span style="font-size: large;">Source code for complete I2C (Master) communication with PIC16f877</span></b><br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
<code class="prettyprint lang-c">
/**<br /> * Initialize the I2C module as a master mode<br /><br /> * SCL - RC3<br /> * SDA - RC4<br /> * 100kHz I2C click at 4Mhz crystal<br /> */<br />void initializeI2C(){<br /> TRISC3 = 1;//make SCL as input<br /> TRISC4 = 1;//make SDA as intput<br /><br /> //----------configs for SSPSTAT register------------<br /> SSPSTAT = 0b10000000;//SMP = 1 [Slew rate control disabled for standard speed mode (100 kHz and 1 MHz)]<br /> //--------------------------------------------------<br /><br /> //---------- configs for SSPCON register------------<br /> //Synchronous Serial Port Mode Select bits<br /> //configs as I2C Master mode, clock = FOSC / (4 * (SSPADD+1))<br /> SSPM0 = 0;<br /> SSPM1 = 0;<br /> SSPM2 = 0;<br /> SSPM3 = 1;<br /><br /> SSPEN = 1;//Enables the serial port and configures the SDA and SCL pins as the source of the serial port pins<br /><br /> SSPOV = 0;//No overflow<br /><br /> WCOL = 0;//No collision<br /> //--------------------------------------------------<br /><br /> //---------- configs for SSPCON2 register-----------<br /> SSPCON2 = 0;//initially no operations on the bus<br /> //--------------------------------------------------<br /><br /> SSPADD = 40;// 100kHz clock speed at 4Mhz cystal<br /><br /> //----------PIR1-----------<br /> SSPIF = 0;//clear Master Synchronous Serial Port (MSSP) Interrupt Flag bit<br /><br /> //-----------PIR2-----------<br /> BCLIF = 0;//clear Bus Collision Interrupt Flag bit<br />}<br /><br />/**<br /> * wait until I2C bus become idel<br /> */<br />void waitUntilIdel(){<br /> while(R_W || SEN || RSEN || PEN || RCEN || ACKEN){<br /> __delay_ms(1);<br /> }<br />}<br /><br />/**<br /> * Send 8 bit(1 byte) through I2C bus<br /> * @param data - 8 bit data t be sent<br /> */<br />void i2CSend(unsigned char data){<br /> waitUntilIdel();<br /> SSPBUF = data;<br /> //while(BF) continue;// wait until complete this bit transmision<br /> waitUntilIdel();//wait until any pending transaction<br />}<br /><br />/**<br /> * Send start condition to I2C bus<br /> */<br />void i2CStart(){<br /> waitUntilIdel();<br /> SEN = 1;//Initiate Start condition on SDA and SCL pins. Automatically cleared by hardware<br /> waitUntilIdel();<br />}<br /><br />/**<br /> * Send stop condition to I2C bus<br /> */<br />void i2CStop(){<br /> waitUntilIdel();<br /> PEN = 1;//Initiate Stop condition on SDA and SCL pins. Automatically cleared by hardware.<br /> waitUntilIdel();<br />}<br /><br />/**<br /> * Send restart condition to I2C bus<br /> */<br />void i2CRestart(){<br /> waitUntilIdel();<br /> RSEN = 1;//Initiate Repeated Start condition on SDA and SCL pins. Automatically cleared by hardware.<br /> waitUntilIdel();<br />}<br /><br />/**<br /> * read the I2C bus<br /> * @return Read data from I2C slave<br /> */<br />unsigned char i2CRead(){<br /> unsigned char temp;<br /><br /> waitUntilIdel();<br /><br /> //configure MSSP for data recieving<br /> RCEN = 1;//Enables Receive mode for I2C<br /><br /> waitUntilIdel();<br /><br /> while(!BF);//wait for buffer full<br /> temp = SSPBUF;//read the buffer<br /> waitUntilIdel();//wait for any transaction<br /> return temp;//return the bufferd byte<br />}<br /><br />/**<br /> * send acknowledge condition<br /> */<br />void i2CAck(){<br /> waitUntilIdel();<br /> ACKDT = 0;//Acknowledge Data bit(0 = Acknowledge)<br /> ACKEN = 1;//Initiate Acknowledge sequence on SDA and SCL pins, and transmit ACKDT data bit.Automatically cleared by hardware.<br /> waitUntilIdel();<br />}<br /><br />/**<br /> * send not acknowledge condition<br /> */<br />void i2CNAck(){<br /> waitUntilIdel();<br /> ACKDT = 1;//Acknowledge data bit(1 = Not Acknowledge)<br /> ACKEN = 1;//Initiate Acknowledge sequence on SDA and SCL pins, and transmit ACKDT data bit.Automatically cleared by hardware.<br /> waitUntilIdel();<br />}<br /><br />
</code>
</div>
<br />
I think comments on each code line is better enough to understand these functions.<br />
The MSSP module has three associated registers. These include a status register (SSPSTAT) and two control registers (SSPCON and SSPCON2). Above functions will configure these registers to use I2C communication in Master mode.<br />
<br />
You can <a href="https://docs.google.com/open?id=0B-BWbjJKCQHnR1dOQmk5VkozWXc" target="_blank">download complete source</a> code with test program.<br />
<br />
Next post will be a practical usage of I2C communication which use the RTC (Real Time Clock) IC DS1307. Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com8tag:blogger.com,1999:blog-3923972986350080010.post-80290209411496510012012-12-13T07:37:00.002+05:302012-12-13T08:58:48.456+05:30Proteus VSM viewer to debug MPLABX projectsHi all, Before few months earlier I heard Microchip released a new IDE to implement firmwares for their products. That is <b>MPLABX</b>. MPlabX has very nice features and tools to assist while you are coding, compiling, debugging, etc... If you familiar with Netbeans, it will be the great advantage to use MPLABX. Because MPLAB X is based on the Oracle Sponsored open-source <a href="http://netbeans.org/features/platform/index.html" target="_blank">NetBeans platform</a>. Therefore supports many third-party tools, and is compatible with many NetBeans
plug-ins. So try out it your self to feel the difference from MpLab8.<br />
<br />
If you prefer to download new version of MPLABX <a href="http://www.microchip.com/pagehandler/en-us/family/mplabx/" target="_blank">click here</a> <br />
<br />
This post is not to present features of the MPLABX. So this article will introduce the way to work MPLABX with Proteus VSM viewer for debugging purposes. MPLAB8 has its inbuilt ability to work with Proteus VSM viewer. But there are a few more steps to integrate it with the MPLABX IDE. When you are working with Proteus VSM viewer in MPLABX, you will see how much easier to debug your code.<br />
<br />
<b><span style="font-size: large;">Step 1</span></b> - The first step is to install VSM viewer in MPLABX IDE.Open Plugins window by selecting Tools->Plugins from the menu bar. Then click on Available plugins, then you will see the <b>Proteus VSM viewer</b> from the list under 'MPLAB DBCore' category. (If proteus vsm viewer not listed on the list just press on Reload Catalog button to reload the list).<br />
<br />
Then click on Install to install the plugin to IDE, the install wizard will guide you to install it successfully. Also you can update or remove you existing plugins from this window. <br />
<br />
<b><span style="font-size: large;">Step 2</span></b> - Create your project from MPLABX and select Proteus VSM viewer as debugging tool when it asked.As showed in following figure.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UOqmUV-4Y-UtNodVMPKUjyhVvYoWrC-U7wMIH1_5lKRLVN9rK7wbHfQudipO53dG8Z6f9ofBaqe0ur_5vl05djceQOmEgXJmW5hQBU6WfpFSEt5wMEutGuhSrYaJATKR6TdeGdue8Ps/s1600/newProjectVSM.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UOqmUV-4Y-UtNodVMPKUjyhVvYoWrC-U7wMIH1_5lKRLVN9rK7wbHfQudipO53dG8Z6f9ofBaqe0ur_5vl05djceQOmEgXJmW5hQBU6WfpFSEt5wMEutGuhSrYaJATKR6TdeGdue8Ps/s1600/newProjectVSM.JPG" height="324" width="640" /></a></div>
OR you can set Proteus VSM as the debugging tool for you existing project. Just goto project Properties by right click on your project. Then click on '<b>Config: [default]'</b> category. Then select Proteus VSM from the list box positioned at right side of the window as shown below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWq9UlmSV3GXUs7i2UftMNmzFZvqtyB9levqnUgvIHrONlkHM95qJUH5m43oUiFM4-9I3BsFgKqRbHenvqkdg9mUpMPLC3z-0BMZtglEkIo0Ztr9IdV0mMJ0QX7zS6RtTZYBveThJkpYg/s1600/propertiesVSM.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWq9UlmSV3GXUs7i2UftMNmzFZvqtyB9levqnUgvIHrONlkHM95qJUH5m43oUiFM4-9I3BsFgKqRbHenvqkdg9mUpMPLC3z-0BMZtglEkIo0Ztr9IdV0mMJ0QX7zS6RtTZYBveThJkpYg/s1600/propertiesVSM.JPG" height="425" width="640" /></a></div>
<b><span style="font-size: large;">Step 3</span></b> - Now you can code your project and compile your project in debug mode. To do that right click on your project from the Projects window then select <b>Debug</b> from the drop down menu. Now this will lead to create files and folder hierarchy for debugging by IDE, if your code compile successfully. (This will terminate debugging session until we still do not create a ISIS design for our project. Just don't care those!)<br />
<br />
<b><span style="font-size: large;">Step 4</span></b> - Create the design file file for your project from the Proteus ISIS and select the <b>.cof</b> file which is located at <b><your folder="folder" project="project">\dist\default\debug</your></b> folder as the program file for your micocontroller(in ISIS design). Then save the design in <b>your project folder</b>.<br />
<br />
<b><span style="font-size: large;">Step 5</span></b> - Now we should add our design file to MPLabX project. Go to project properties window and click on <b>Proteus VSM Viewer </b>category under <b>Config: [default] </b>category<b> </b>then select your design file from <b>Design File Name</b> and press on apply (you can let other configurations as it is under default environment).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnjPIQobUlsdjT56KNXPqLNWu0CT7Q0eGNmey5OnpkSYpTtiEeAPdMlxfdVcLl4Iypx9P4OduMKfNM42NLyRAzn_5yJtiozh0SbK1PbQX2HH81KHAS2DT4EjCKXmhkvOpoCkk4ZycQwc/s1600/vsm.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnjPIQobUlsdjT56KNXPqLNWu0CT7Q0eGNmey5OnpkSYpTtiEeAPdMlxfdVcLl4Iypx9P4OduMKfNM42NLyRAzn_5yJtiozh0SbK1PbQX2HH81KHAS2DT4EjCKXmhkvOpoCkk4ZycQwc/s1600/vsm.JPG" height="380" width="640" /></a></div>
Now you can set break points in your source code and <b>Debug </b>your project. Then MPLabX will automatically run the ISIS design simultaneously with your code.<br />
<br />
Oh I forgot to say, it is better to only open your ISIS design from the Proteus ISIS while you debug and enable <b>Remote Debug Monitor </b>from Proteus ISIS (<b>Debug->Use Remote Debug Monitor</b>)<br />
<br />
Then you can open both windows simultaneously and debug you project as you can see...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdmwAQTsJTdG3Jwq6xWsHtVd2dt8LRMpjLqphFJuqKNmgYKqu4CBFvxVz7Qx8SZYg3zux8kfdi-489njHJyFy7idAC3tFggLANGb2KUxrzW_QKgvgvn7wAY5-qFmmFldotSlnbdoEm75Y/s1600/debug+mplabx+proteus+vsm+veiwer.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdmwAQTsJTdG3Jwq6xWsHtVd2dt8LRMpjLqphFJuqKNmgYKqu4CBFvxVz7Qx8SZYg3zux8kfdi-489njHJyFy7idAC3tFggLANGb2KUxrzW_QKgvgvn7wAY5-qFmmFldotSlnbdoEm75Y/s1600/debug+mplabx+proteus+vsm+veiwer.JPG" height="379" width="640" /></a></div>
<br />
<br />
<br />Milinda Arunahttp://www.blogger.com/profile/01814826073141684396noreply@blogger.com12