Hello techies, this blog will not be more about an overview how to do wireless debugging in Android Studio but would be more of a quick solution for those who have searched through the internet to fix it in Android Studio.So, basically you can find all the way to do wireless debugging in Android studio <a target="_blank" href="https://developer.android.com/tools/adb#connect-to-a-device-over-wi-fi" alt="here">here</a> - but in this blog I would be showing you the simplest and easiest way to do things, which worked for me pretty well.So let's dive into this. In this tutorial to connect your device wirelessly for debugging we would be using the <code>adb</code> commands - if your terminal doesn't know it then add it to the path or install the android-platform-tools. You can go through the plenty of articles on internet to set it up for you. Once adb command is available on your terminal we're good to go further.<h2>First things First </h2><ul><li>On your mobile device enable USB Debugging.</li><li>Then connect the device using USB to Android studio which you do usually for the debugging over USB.</li></ul><h2>Make your device ready</h2><ul><li>Now open up the terminal and list out the devices using the command adb devices -l</li><li>Now, if you can see your device in the terminal, the we are good to go.</li><li>Run this command - adb tcpip 5555.&nbsp;This will put the device into TCP/IP mode listening on port 5555. Now remove the USB from device.</li></ul><h2>Final Step</h2><ul><li>In your device, get the IP of the device by going into settings, and then in about phone &gt; status &gt; IP address. Or rather search for IP in settings as different devices it's location may vary. Whole point here is to get the IP of the device.</li><li>Now, the final step - run the command - adb connect device_ip:5555. This will connect the device wirelessly.</li></ul>So, at this point, you would be able to see the device connected, also you can check it by running command adb devices and your device would be listed there.Congratulations! you have setup the wireless debugging in Android Studio.&nbsp;If you really liked this blog, do checkout other blogs, and stay tuned!Happy Wireless Debugging!!

How to do wireless debugging in Android Studio

Hey there, fellow developers! Remember when we talked about <a href="https://www.dev-akash.in/blogs/edge-detection-in-opencv" alt="finding edges in images" target="_blank" class="on">finding edges in images</a>? Well, today, we're diving deeper into a related concept: contour detection. Think of it as finding and outlining shapes in pictures – pretty cool, right?<h2>From Edges to Contours: A Seamless Transition</h2>In our previous discussion on <a href="https://www.dev-akash.in/blogs/edge-detection-in-opencv" alt="edge detection" target="_blank">edge detection</a>, we learned how to detect the boundaries between different elements in an image. Now, contour detection takes these boundaries a step further, helping us to not only detect edges but also outline and identify the shapes formed by those edges.<h2>What Are Contours?</h2>Contour detection is like being a shape detective. It helps us find and outline objects in images. These outlines are called contours, and they're like the borders that separate one thing from another. In a black-and-white picture, contours highlight the boundaries of objects, making them stand out.<h2>How Does Contour Detection Work?</h2>Let's break it down. Imagine you have a black-and-white image. Contour detection looks for continuous white areas against a black background. It's like connecting the dots between pixels to outline shapes.<h2>Using OpenCV for Contour Detection</h2>Now, let's explore some additional options available for the <code>cv2.findContours()</code> function:<pre>import cv2 # Read the image image = cv2.imread('your_image.jpg') # Convert the image to grayscale gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) # Find contours # The second argument specifies the contour retrieval mode. # Options include cv2.RETR_EXTERNAL, cv2.RETR_LIST, cv2.RETR_CCOMP, and cv2.RETR_TREE. # We use cv2.RETR_EXTERNAL to find only the outer contours of objects. # The third argument sets the contour approximation method. # Options include cv2.CHAIN_APPROX_NONE, cv2.CHAIN_APPROX_SIMPLE, cv2.CHAIN_APPROX_TC89_L1, and cv2.CHAIN_APPROX_TC89_KCOS. # We use cv2.CHAIN_APPROX_SIMPLE to compress horizontal, vertical, and diagonal segments. contours, _ = cv2.findContours(gray_image, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) # Draw contours on the original image cv2.drawContours(image, contours, -1, (0, 255, 0), 2) # Display the result cv2.imshow('Contours', image) cv2.waitKey(0) cv2.destroyAllWindows() </pre><h3>Understanding Additional Options</h3>In the code above, let's take a closer look at the additional options available for the <code>cv2.findContours()</code> function:<ul><li>Contour Retrieval Modes (cv2.RETR_XXX): <ul><li><code>cv2.RETR_EXTERNAL</code>: Retrieves only the external contours. Useful for most applications where you only need the outer boundaries of objects.</li><li><code>cv2.RETR_LIST</code>: Retrieves all contours without any hierarchical relationships.</li><li><code>cv2.RETR_CCOMP</code>: Retrieves all contours and organizes them into a two-level hierarchy. Useful for more complex shapes.</li><li><code>cv2.RETR_TREE</code>: Retrieves all contours and reconstructs a full hierarchy of nested contours.</li></ul> </li><li>Contour Approximation Methods (cv2.CHAIN_APPROX_XXX): <ul><li><code>cv2.CHAIN_APPROX_NONE</code>: Stores all contour points.</li><li><code>cv2.CHAIN_APPROX_SIMPLE</code>: Compresses horizontal, vertical, and diagonal segments and leaves only their endpoints.</li><li><code>cv2.CHAIN_APPROX_TC89_L1</code> and <code>cv2.CHAIN_APPROX_TC89_KCOS</code>: Apply the Tangent Chain approximation algorithm to further compress contours.</li></ul> </li></ul>Experimenting with different options allows you to fine-tune contour detection according to the specific requirements of your project. So, feel free to explore and find the best settings for your application!<h2>Drawing Contours: Bringing Shapes to Life</h2>After detecting contours, we often want to visualize them on the original image. This is where the <code>cv2.drawContours()</code> function comes into play. Here's a simple explanation of how it works:<ul><li>cv2.drawContours(image, contours, contourIdx, color, thickness): <ul><li><code>image</code>: The original image on which you want to draw contours.</li><li><code>contours</code>: The list of contours detected using <code>cv2.findContours()</code>.</li><li><code>contourIdx</code>: Index of the contour to draw. Use <code>-1</code> to draw all contours.</li><li><code>color</code>: Color of the contour lines (BGR format).</li><li><code>thickness</code>: Thickness of the contour lines.</li></ul> </li></ul>By using <code>cv2.drawContours()</code>, you can visually represent the contours found in the image, making it easier to analyze and understand the detected shapes.<h2>What Can You Do with Contours?</h2>Contour detection opens up a world of possibilities. You can use contours for object detection, shape analysis, and even creating special effects in images. With a bit of creativity, you can do amazing things!<h2>Conclusion</h2>Contour detection in OpenCV offers a wide range of options to suit various image processing tasks. By understanding how contours work and how to use the <code>cv2.findContours()</code> function, you gain greater control over the contour detection process, enabling you to extract valuable information from images with precision and accuracy.So, roll up your sleeves, dive into the documentation, and start experimenting with contours! Happy coding!

Revealing Shapes With OpenCV Contour Detection

Hey fellow developers! Are you ready to take your React application to the next level by incorporating social media share links? Sharing content across platforms like Facebook, Twitter, and more can amplify your app's reach and engagement. In this guide, we'll walk through the exciting process of integrating share buttons seamlessly into your React app using the popular <code>react-share</code> package. <h2>Getting Started</h2> First things first, let's install the necessary package. Open up your terminal and type: <pre> <code>npm install react-share</code></pre> Once installed, we're ready to dive into the fun part! <h2>Adding Share Buttons</h2> Imagine your users discovering a captivating article or a remarkable achievement within your app and wanting to share it with their friends and followers. With social media share buttons, you empower them to do just that! In your React component, import the desired share buttons from <code>react-share</code>: <pre> <code>import { FacebookShareButton, TwitterShareButton } from 'react-share';</code></pre> Now, let's set up the share buttons within your component: <pre>const ShareComponent = () =&gt; { const shareUrl = 'https://yourawesomeapp.com'; const title = 'Check out this amazing content!'; return ( &lt;div&gt; &lt;FacebookShareButton url={shareUrl} quote={title}&gt; Share on Facebook &lt;/FacebookShareButton&gt; &lt;TwitterShareButton url={shareUrl} title={title}&gt; Share on Twitter &lt;/TwitterShareButton&gt; &lt;/div&gt; ); }</pre> Simply replace <code>'https://yourawesomeapp.com'</code> with the actual URL you want users to share and customize the <code>title</code> to entice their interest. <h2>Customization and Beyond</h2> Exciting, isn't it? But why stop there? The <code>react-share</code> package offers a plethora of customization options. You can style the buttons, add additional share platforms like LinkedIn and Pinterest, and even track share analytics for insights into user engagement. <h2>Conclusion</h2> By incorporating social media share links into your React application, you're not only enhancing user experience but also fostering community engagement and expanding your app's reach. So, what are you waiting for? Let your users spread the love and make your content go viral with share buttons in your React app today! Happy coding and sharing! 🚀✨

Adding Social Media Share Links to Your React App

​Hey there, tech enthusiasts! Today, we're going to chat about a common task in the world of Java development: converting a .keystore file to a .jks file. Don't worry if you're not sure what that means – we'll break it down in simple terms.First things first, what are these files? Well, a .keystore file and a .jks file are both used in Java applications to store security certificates and private keys. They're crucial for securing your applications and data. Sometimes, you might need to switch between these formats for various reasons, and that's where the conversion process comes into play. So, how do we do it? Let's walk through the steps: <ol><li>Open a Terminal or Command Prompt: To begin, you'll need to access your command-line interface. Don't worry, it's not as daunting as it sounds – it's just a way to interact with your computer using text commands. </li><li>Navigate to the Directory: Use the cd command to navigate to the directory where your .keystore file is located. For example:&nbsp; <pre>cd path/to/your/keystore</pre> </li><li>Convert the File: Now, it's time to perform the conversion. Use the keytool command, which is a utility provided by Java for managing keystores and certificates. Here's the command you'll need: <pre>keytool -importkeystore -srckeystore yourfile.keystore -destkeystore yourfile.jks -srcstoretype JKS -deststoretype JKS</pre>Make sure to replace yourfile.keystore with the name of your .keystore file and yourfile.jks with the desired name for your .jks file. </li><li>Enter Passwords: During the conversion process, you may be prompted to enter passwords for both the source and destination keystores. Simply type them in and hit Enter. </li><li>Confirmation: Once the process is complete, you should see a confirmation message indicating that the conversion was successful. </li></ol>And that's it! You've successfully converted your .keystore file to a .jks file. See, it wasn't so hard, was it? Remember, while this process is relatively straightforward, it's always a good idea to double-check your work and ensure that your certificates and keys are properly secured. Now, go ahead and give it a try. Happy coding!

How to Convert keystore to jks File

As a Flutter developer, creating intuitive and engaging user interfaces is crucial. One innovative way to enhance user experience is by implementing a Slide-to-Pay button. In this tutorial, we'll walk through the process of integrating this sleek feature into your Flutter app. So, let's dive into the code snippets and steps to achieve this dynamic functionality.<h2>Step 1: Setting Up Your Flutter Project</h2>Start by creating a new Flutter project or using an existing one. Ensure you have the latest Flutter and Dart SDK installed. Open your project in your preferred IDE.<h2>Step 2: Adding Dependencies</h2>In your pubspec.yaml file, include the gesture_detector package. This package will enable us to capture swipe gestures efficiently.<pre>dependencies: flutter: sdk: flutter gesture_detector: ^4.4.0 </pre>Save the file and run flutter pub get in your terminal to fetch the new dependency. <h2>​Step 3: Implementing the Slide-to-Pay Button</h2>Now, navigate to the widget where you want to implement the Slide-to-Pay button. Wrap your existing button with a GestureDetector to detect swipe gestures. <pre>​import 'package:flutter/material.dart'; import 'package:gesture_detector/gesture_detector.dart'; class SlideToPayButton extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onHorizontalDragUpdate: (details) { // Calculate the swipe distance double dx = details.primaryDelta ?? 0; // Define a threshold for activation (adjust as needed) if (dx &gt; 150) { // Trigger payment action _handlePayment(); } }, child: YourExistingButton(), // Replace with your actual button widget ); } void _handlePayment() { // Implement your payment logic here print("Payment triggered!"); // Add your payment code or navigation to the payment screen } } </pre>Now, you've successfully implemented the Slide-to-Pay button. Users can slide the button horizontally to trigger the payment action.Enhance the user interface by adding animations or customizations based on your app's design. This simple addition can elevate the user experience in your Flutter app, making it more interactive and engaging. Feel free to experiment and tailor the implementation to suit your specific application requirements. Happy coding!

How to add Slide to Pay button in flutter

In this post we will look how to create a pull request to an existing project to introduce some changes required in the project. So in order to create a pull request one must have to go through the process listed below:<ul><li>Fork the existing project</li><li>Create a separate branch</li><li>Introduce the required changes</li><li>Finally, create a pull Request</li></ul>So let's get started.<h2>Fork the project</h2>In order to add changes to the project one must the local copy of the project. In most cases when creating pull request for the project which you do not already own, one must first fork the project.Forking a project means to create a independent copy of the project, just like creating a new repository which belongs to you under your account. This basically avoids to directly pushing changes to the original project, which may also require you the permission to directly push to the repository which you do not own or maintain.To fork the project:<ul><li>Navigate to the original project on Github</li><li>Click on the fork button on top right of the repository</li></ul>This will create the repository with same name under your Github account. Additionally, clone the repository under your account to your system using the following command, but before that click on the clone option in repository, and copy the URL. Execute the following command in terminal.<pre>git clone PROJECT_URL.git </pre><h2>Create separate branch </h2>​So, in-order to introduce changes, one must create a separate branch and then start editing the project or files under it. ​To create a separate branch, open the terminal in the cloned project repository/folder and execute the following command replacing the name of branch as per your choice.​ <pre>git checkout -b YOUR_BRANCH_NAME </pre><h2>​Introducing required changes </h2>​Now it's time to implement required changes in the project. Just go ahead and do whatever changes you want. ​Once the changes are done, one needs to commit those changes to the branch using the following command below.​ <pre><code>git commit -a -m "Message for your commit (description of changes)"</code>​ </pre>​After committing the changes push these changes to the branch using the command below. <pre>git push origin YOUR_BRANCH_NAME </pre><h2>​Finally, creating a Pull request </h2>So, once you are done with the changes and committing and pushing them to the repository, now its time to create a pull request to the original repository of project, so that owner or maintainers of the project can review your changes and take decision whether or not to merge your changes with the project. So to create pull request do the following.<ul><li>Navigate to repository under your account</li><li>Switch to the branch under which you pushed the changes from the branches option</li><li>Click on the pull request button visible to you or click on contribute.</li><li>Write a nice message for the pull request describing the changes</li><li>Finally, click on create pull request</li></ul>Once owner/maintainer of the original repository agrees to merge the changes introduced, your pull request will get merged with the project. And that's a great thing, Congratulations! you made a contribution to the project.Thanks for being with me till here! I hope now you feel ready to contribute to the projects out there. To read more content like this checkout my latest blog&nbsp;<a href="https://dev-akash.github.io/index.html#blogs" target="_blank" rel="noopener noreferrer">here</a>.

How to create pull request

<h2 style="text-align: left">Introduction</h2>Welcome! In this post I am going to illustrate how to listen mouse events in OpenCV, in last post I have described&nbsp;<a href="https://dev-akash.github.io/posts/how-to-convert-color-image-to-grayscale-in-opencv-with-python.html">how to convert colour image to grayscale image in OpenCV using Python</a>, do read it if your are new to openCV and also if you like reading the post do checkout our all posts about OpenCV&nbsp;<a href="https://dev-akash.github.io/allposts.html">here</a> So in this tutorial we will create a small application which will draw the path followed by the mouse pointer on the canvas. In order to do this we will divide the creation into two simple steps: <ul><li>Writing the Callback Function</li><li>Adding the Callback function to cv2.setMouseCallback() function</li></ul>Basically a Callback Function is a kind of normal function definition but is used to define the instructions to be executed during the happening of the event (i.e., the click or drag of the mouse), we will discuss in detail in the upcoming section and in the second section we will see how to add that Callback Function to the main program so that the active frame execute the Callback Function when event happens. So with this let's step up towards our first step to create the application, that is building the Callback Function.<h2 style="text-align: left">Mouse Callback Function</h2>A callback function is the function which will get executed whenever the event happens, so basically the callback function have a same syntax definition wherever it is used but can differ in what it does as it totally depends on what instruction are written in it.<pre>def draw(event,x,y,flags,param): ​ if event == cv2.EVENT_MOUSEMOVE: ​  cv2.circle(img,(x,y),10,(255,0,0),-1)​ </pre>​So in the above code snippet we are declaring a Callback function having five parameters. The first parameter event holds the value of the type of event such as left button click, right button click, etc. The second and thrid parameter x, y are the coordinates of the pointer. ​This is all which we need to create our logic and draw a dot on the canvas wherever our pointer is. So in the first line of the code we declare the function draw_circle() having the five paramters which are needed. In the second line of code we check for the type of event which is required to be handled, in our case we are handeling the left button click of the mouse to draw the circle and if the condition satisfies we will draw the circle using the cv2.circle() function. The circle would be drawn on img at x and y coordinates of 10 radius with blue color (BGR) and would be filled circle as we passed the thickness parameter to be -1.​ <h2 style="text-align: left">Adding CallBack to cv2.setMouseCallback() function</h2>Now as our callback function is ready to perform some action on listening the event we need to add it to the eventHandler in opencv using the cv2.setMouseCallback() function which will trigger the callback function for the particular window on which it is listening the event. So firstly we have to create our canvas on which we would be drawing with mouse and then we would provide it a window with a name and finally add the callback function to that window. and in order to show the image and keep taking the input we will run the cv2.imshow() function in a continuous while loop.<pre>img = np.zeros((512,512,3), np.uint8) ​cv2.namedWindow('image') ​cv2.setMouseCallback('image', draw) ​while(True): ​ cv2.imshow('image', img) ​ if cv2.waitKey(20) &amp; 0xff == 27: ​  break ​cv2.destroyAllWindows()​ </pre>In the above code we firstly creating the img image which is a black canvas and then in second line we created a named window and on that named window in third line we added the callback function. Then in infinite while loop we are showing the image and the to break the while loop we added a condition to listen the keyboard presses and if the Escape button is pressed exit the loop and then execute the cv2.destroyAllWindows() function which will destroy all windows created by OpenCV. <h2 style="text-align: left">Combining the Whole Code</h2><pre>def draw(event,x,y,flags,param): ​ if event == cv2.EVENT_MOUSEMOVE: ​  cv2.circle(img,(x,y),10,(255,0,0),-1) ​img = np.zeros((512,512,3), np.uint8) ​cv2.namedWindow('image') ​cv2.setMouseCallback('image', draw) ​while(True): ​ cv2.imshow('image', img) ​ if cv2.waitKey(20) &amp; 0xff == 27: ​  break ​cv2.destroyAllWindows()​​ </pre><h4 style="text-align: left">Output</h4><div class="se-component se-video-container __se__float-none" contenteditable="false" style=""><figure style="width: 350px; height: 350px; padding-bottom: 350px; margin: 0px;"><video controls="true" src="https://dev-akash.github.io/images/mouse_event.mp4" data-proportion="false" data-size="350px,350px" data-align="none" data-file-name="mouse_event.mp4" data-file-size="0" data-origin="100%,56.25%" style="width: 350px; height: 350px;" data-index="0"></video></figure></div>

How to Listen Mouse Events in OpenCV

<h2 style="text-align: left">Introduction</h2>Many times we come across a problem in Android, where we need to create a feature of adding a view when a button is pressed, for instance, adding a new EditText view when a add button in a todo list application. So, today we will go through how to create this feature in an android application. I hope before reading this article, you are familiar with the coding in android and know how to create views and attach callback listeners to it.<h2 style="text-align: left">Basic Todo App Setup</h2>First create a&nbsp;New Project&nbsp;in android and let's write a basic layout for a todo list having a TextView, LinearLayout and a Button to add more EditText to the todo list. In this tutorial we will first go through with the code and then explain it step-by-step. So here is the Layout of the a generic Todo-List<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"&gt; &lt;TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Todo List" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:textSize="32sp" android:textColor="@android:color/black" android:textStyle="bold"/&gt; &lt;LinearLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"&gt; &lt;/LinearLayout&gt; &lt;Button android:id="@+id/addTaskButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Add Task"/&gt; &lt;/LinearLayout&gt; </pre>​The above Layout code will result as below. <div class="se-component se-image-container __se__float-none" contenteditable="false" style=""> <figure style="margin: 0px;"> <img src="https://dev-akash.github.io/images//how-to-add-a-view-programmatically-in-android-using-java-01.jpeg" alt="todo_app_screen_img" data-rotate="" data-proportion="true" data-rotatex="" data-rotatey="" data-size="auto,500px" data-align="none" data-file-name="how-to-add-a-view-programmatically-in-android-using-java-01.jpeg" data-file-size="0" data-origin="," origin-size="1080,2261" style="width: auto; height: 500px; transform: rotate(0deg);" data-index="0"> </figure></div>​ <h5 style="text-align: left">Layout Code Explanation</h5>So the code in the layout is a simple layout having a root view of Linear Layout having a vertical orientation and three elements in it:<ol><li>Text View (Lines 10-18)</li><li>Linear Layout (Lines 19-25)</li><li>Button (Lines 26-31)</li></ol>Here, the Text View is holding a simple text as "Todo List" and after that, the Empty Linear Layout having id of&nbsp;container, this linear layout is the place where we have to insert the EditText View programmatically, for now let it be empty. And then finally we have our "Add Task" Button to add the EditText in the empty Linear Layout.<h2 style="text-align: left">Adding Layout Programmatically</h2>So now after creating layout, let's start coding the logic for adding the view (EditText and delet button) to the layout programmatically. Let's first look out the code and then we will break it down and understand it. Here is the Code for java file.<pre>import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Getting LinearLayout having id "Container" and Add Task button from layout. final LinearLayout container = findViewById(R.id.container); Button addTask = findViewById(R.id.addTaskButton); //Adding a onClickListener to the "Add Task" button. //To add the view to the LinearLayout with id "container". addTask.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //Create the view to add in container //rootView LinearLayout l = new LinearLayout(getApplicationContext()); final LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.setMargins(dpTopx(10), dpTopx(10), dpTopx(10),dpTopx(10)); l.setLayoutParams(params); l.setOrientation(LinearLayout.HORIZONTAL); //EditText view EditText e = new EditText(getApplicationContext()); LinearLayout.LayoutParams paramsEditText = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT); paramsEditText.weight = 1; e.setLayoutParams(paramsEditText); e.setHint("Type new Task"); //Image View for close button final ImageView i = new ImageView(getApplicationContext()); LinearLayout.LayoutParams paramsImgView = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT); paramsImgView.weight = 0.15f; i.setBackground(getResources().getDrawable(R.drawable.close_white_24dp)); //Adding the EditText and Close Button to LinearLayout l.addView(e); l.addView(i); //Adding the Created LinearLayout to Container container.addView(l); //Adding OnClick Listener to Close button Image for removing the view i.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ViewGroup parent = (ViewGroup) i.getParent(); parent.removeAllViews(); if(parent.getParent() != null){ ((ViewGroup) parent.getParent()).removeView(parent); } } }); } }); //Doing a virtual tap to "Add Task" Button //To create the first EditText View for the Layout addTask.callOnClick(); } //Function to convert dp to pixels. private int dpTopx(int dp){ return (int)(dp * getApplicationContext().getResources().getDisplayMetrics().density); } }</pre><div class="se-component se-video-container __se__float-none" contenteditable="false" style=""><figure style="width: 347px; height: 752px; padding-bottom: 752px; margin: 0px;"><video src="https://dev-akash.github.io/images/how-to-add-a-view-programmatically-in-android-using-java-02.mp4" controls="true" data-size="347px,752px" data-align="none" data-file-name="how-to-add-a-view-programmatically-in-android-using-java-02.mp4" data-file-size="0" data-origin="100%,56.25%" data-proportion="true" style="width: 347px; height: 752px;" data-index="0"></video></figure></div>​ <h4 style="text-align: left">Understanding the Code</h4>So in the code, in onCreate method, we firstly fetch the "Container" Linear layout and Add Task Button from the Layout file by using&nbsp;findViewById()&nbsp;function in lines 18-19. Then in line 23, we attach a&nbsp;onClickListener()&nbsp;to the Add Task Button so that when the Add Task button is clicked the View gets populated after creating the View which we want to add in the "container" LinearLayout Then in lines 29-34, we create a LinearLayout having with of "match parent" and height of "wrap content", also having margin of "10dp" using a helper method named "dpTopx()" in lines 74-76, and vertical orientation. Similarly, in lines 37-41, we create a EditText View having width of zero (because we will add weight to it), height as "wrap content", we will add weight = 1 to it and also a placeholder text using&nbsp;setHint()method as "Type new Task". Also, in lines 44-47, we create a ImageView for holding a close sign acting as a button to delete the view when clicked. This view will have weight of 0.15 and have background set from resource&nbsp;R.drawable.close_white_24dp&nbsp;in ImageView. Then, in lines 50 and 51 we add the EditText View and ImageView to the previously created LinearLayout. Then, in line 54, we add the whole LinearLayout to the previously fetch "container" LinearLayout from the Layout file. And then, we also add a&nbsp;onClickListener()&nbsp;to the ImageView in lines 57-66, so that when it is clicked, we delete the whole layout we created. And finally, at Line 71, we just virtually tap the "Add Task" button to create the layout and populate it in "container" LinearLayout as soon as the application is opened, so that, it seems that a single View is default to present on screen.<h2 style="text-align: left">Conclusion</h2>I hope you have now understood how to dynamically add a View in layout and also remove it efficiently in layout. A big thanks if you joined till here and enjoyed the read. Also look at all blog posts&nbsp;<a href="https://dev-akash.github.io/allposts.html" target="_blank">here</a>. Thank you!

How To Add A View Programmatically In Andriod

<h2 style="text-align: left">Introduction</h2>Hi there, and welcome again to Dev-akash's blog post, so today we will be getting started with videos in OpenCV, and will be learning about the following things: <ul><li>Capturing Video using Web Camera</li><li>Reading Video from a file</li></ul>After going through the blog you will be able to read a video from a file and capture the live feed from your own camera and yes with this you can also read multiple cameras at same time (Bonus!). So let's get Started!! <h2 style="text-align: left">Capturing Video using Web Camera</h2>Capturing a video from a web camera is a very basic requirement for most of the tasks in Computer Vision field such as Realtime Attendance marking system, Pose estimation and Recognition, Pedestrain Detection, etc which requires the live feed from the cameras and now you would be able to do that too. So first have a look at the code and then we will dive into it to understand it more clearly.<pre>#importing nesseccary modules import cv2 import numpy as np #Accessing default camera cam = cv2.VideoCapture(0) #A while loop for reading each frame of the camera #till the camera is open. while(cam.isOpened()): #Reading the Frame from the camera feed ret, frame = cam.read() #Showing the frame cv2.imshow("Webcam", frame) #Condition for breaking the loop on pressing the 'q' if cv2.waitKey(1) &amp; 0xff==ord('q'): break #Closing/releasing the Camera cam.release() #Closing all the windows created cv2.destroyAllWindows() </pre>So, lets dive into the code In line 2 and 3 we are importing the importing libraries, namely OpenCV and Numpy as we will use them. In line 6 we are calling a function of opencv as cv2.VideoCapture() which is actually accessing the camera attached to your computer and passing the data captured from it to the variable cam, the argument passed in the parentheses as 0 states that we are using the default camera or the first camera if multiple cameras are connected and if you want to switch to another camera then default, just change the argument 0 to 1, 2, 3... etc as per number of cameras connected. From line 10-19 we are running a loop to read the frames coming from camera and showing it to a window created by OpenCV. So in the loop in line 12 we take ret, frame after reading the input from the cam as cam.read(), where ret is the status of the captured frame and frame is the image. In line 15, we are showing our captured image in frame variable in a window named "Webcam" using the opencv function cv2.imshow() In line 18-19, we are creating a condition that when a user presses the q button on keyboard the loop breaks and executes the upcoming lines In line 22 and 24, we just close the opened camera and also close all the windows created by opencv during the execution of program.<h2 style="text-align: left">Reading Video from a file</h2>Reading a video from a file is not a much different task as what we have to do is to change the source of feed provided, that is, in the previous section our source of input was camera and hence we were giving argument as a number&nbsp;0&nbsp;to access the default camera and now to access a file on the system as feed we will provide the path of the file as argument to the function. Here is the code, check it out. And just to remind after this we have a&nbsp;bonus. <pre>#importing nesseccary modules import cv2 import numpy as np #importing nesseccary modules import cv2 import numpy as np #Accessing video from sytem location video = cv2.VideoCapture('../sample/video.mp4') #A while loop for reading each frame of the camera #till the video not ends. while(video.isOpened()): #Reading the Frame from the camera feed ret, frame = video.read() #Showing the frame cv2.imshow("Playing Video", frame) #Condition for breaking the loop on pressing the 'q' if cv2.waitKey(1) &amp; 0xff==ord('q'): break #Closing/releasing the Camera video.release() #Closing all the windows created cv2.destroyAllWindows() </pre><h2 style="text-align: left">Bonus</h2>So as stated above i am going to show you how you can read mutiple cameras simultaneously and I know after reading this much of blog you would be having a idea how to do it. But to make you comfortable with it I am just going to provide the code here and I promise there is nothing new to explain here, in-fact you will explain what is happening to yourself (Its a great exercise !!). And Thanks for your love and support by reading this blog !!<pre>#importing nesseccary modules import cv2 import numpy as np #Accessing default camera and the other camera cam = cv2.VideoCapture(0) cam1 = cv2.VideoCapture(1) #A while loop for reading each frame of the camera #till the camera is open. while(cam.isOpened() and cam1.isOpened()): #Reading the Frame from the camera feed ret, frame = cam.read() ret1, frame1 = cam1.read() #Showing the frames of both webcam cv2.imshow("Webcam", frame) cv2.imshow("WebCam1", frame1) #Condition for breaking the loop on pressing the 'q' if cv2.waitKey(1) &amp; 0xff==ord('q'): break #Closing/releasing both the cameras cam.release() cam1.release() #Closing all the windows created cv2.destroyAllWindows()</pre>

Getting Started with Videos in OpenCV

Welcome! In this post I am going to describ how to read image in OpenCV, in last post I have described&nbsp;<a href="https://dev-akash.github.io/posts/how-to-install-opencv-python-on-windows.html">how to install the open source computer vision library - OpenCV in windows</a>, do read it if your are new to openCV.<h2 style="text-align: left">Let's get started</h2>To read a image in OpenCV, write a python script as,<pre># importing OpenCV library ​import cv2 ​# reading a image in path ​img = cv2.imread("path-to/image.png") ​# showing the image ​cv2.imshow("Image", img) ​# waiting for key event continuously ​cv2.waitKey(0) ​# destroying all generated windows ​cv2.destroyAllWindows()​ </pre><h2 style="text-align: left">Let's understand the code</h2>The&nbsp;import cv2&nbsp;code imports the OpenCV library in the program, so that you can use its function. In next instruction, we are reading an image using&nbsp;cv2.imread()&nbsp;function and storing it in&nbsp;img&nbsp;variable. In next instruction, we are showing the readed image using&nbsp;cv2.imshow()&nbsp;function, in which the first parameter is the name of the window in which the image will be shown and second parameter is variable name in which the image is stored. The&nbsp;cv2.waitKey()&nbsp;is a function in OpenCV to listen the keyboard events and the parameter to passed is the time of interval after which it would be checked. Here we have passed 0 as parameter, so it will be waiting indefinetly. As soon as the keyboard event happens the&nbsp;cv2.destroyAllWindows()&nbsp;will get executed and it will destroy all the windows generated by the script.<h2 style="text-align: left">Conclusion</h2>So in this post, we have learned how to read a image in OpenCV, also learned about the&nbsp;cv2.imread(), cv2.imshow(), cv2.waitKey() and cv2.destroyAllWindows()&nbsp;functions.

How to read image in OpenCV

Introduction Welcome, In this tutorial we are going to see how to read a image as grayscale as well as we will convert a color image into a grayscale image using opencv and python, if you do not know how to read a image in opencv, do check out this post&nbsp;<a href="https://dev-akash.github.io/posts/how-to-read-image-in-opencv.html">here</a>.So to convert a color image to a grayscale image in opencv, we can have two solution<ul><li>Convert image to grayscale with&nbsp;imread()&nbsp;function</li><li>Convert image to grayscale using&nbsp;cvtColor()&nbsp;function</li></ul>Let's discover how to do it with above mentioned functionshello<h2 style="text-align: left">Method 1: Using imread() function</h2>imread()&nbsp;function is used to read an image in OpenCV but there is one more parameter to be considerd, that is&nbsp;flag&nbsp;which decides the way image is read. There three flag defined in OpenCV..<ol><li>cv2.IMREAD_COLOR or 1</li><li>cv2.IMREAD_GRAYSCALE or 0</li><li>cv2.IMREAD_UNCHANGED or -1</li></ol>So to convert the color image to grayscale we will be usingcv2.imread("image-name.png",0)or you can also writecv2.IMREAD_GRAYSCALEin the place of 0 as it also denotes the same constant.<pre>import cv2 # Reading color image as grayscale gray = cv2.imread("color-img.png",0) # Showing grayscale image cv2.imshow("Grayscale Image", gray) # waiting for key event cv2.waitKey(0) # destroying all windows cv2.destroyAllWindows()</pre><h2 style="text-align: left"> </h2><h2 style="text-align: left">Method 2: Using cvtColor() function</h2>cvtColor()&nbsp;function in OpenCV is very helpful in converting color channels from one to another such as BRG to HSV or BRG to RGB. The same method can be used to convert BRG to GRAY by using the&nbsp;cv2.cvtColor(img,cv2.BGR2GRAY)<pre>​import cv2 # Reading color image img = cv2.imread("color-img.png") # Converting color image to grayscale image gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # Showing the converted image cv2.imshow("Converted Image",gray) # waiting for key event cv2.waitKey(0) # destroying all windows cv2.destroyAllWindows() </pre><h4 style="text-align: left">Output</h4><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://dev-akash.github.io/images/grayscale-conversion.PNG" alt="output_img" data-rotate="" data-proportion="true" data-rotatex="" data-rotatey="" data-size="," data-align="none" data-percentage="auto,auto" data-file-name="grayscale-conversion.PNG" data-file-size="0" origin-size="1283,573" data-origin="," style="" data-index="0"></figure></div><h2 style="text-align: left"> </h2><h2 style="text-align: left">Conclusion</h2>In this post we came to know two ways in which we can convert a color image to a grayscale image and came across the function like&nbsp;cvtColor()&nbsp;and&nbsp;imread() flags&nbsp;used in opencv to perform that conversion. If you want to read more articles related to OpenCV&nbsp;<a href="https://dev-akash.github.io/allposts.html">click here</a>

How to convert color image to grayscale in OpenCV

​So, most of the time we encounter a situation for renaming the files in large quantity, persons who create datasets to the persons who just want to organise a folder with some conventional names. To make this hectic task more convinent. I have created my own PYPI package as a command line interface tool (CLI tool) Bulkren which i think can help you out in reducing the work required from going file to file and renaming them by hand to just writting a single command on command prompt (cmd).<h2 style="text-align: left">Installing Bulkren</h2>So, to use this package, we first need to install in on our machine and to install it on your machine you firstly need python installed on your machine and then you must have pip installed on it. If you already satisfy this requirement then you are ready to go ahead and follow up the tutorial but if not i would recommend to checkout the resources on&nbsp;How to install Python&nbsp;and the&nbsp;How to install pip in Python&nbsp;and don't forget to add python to PATH in Environments on your machine. Now to get started with renaming bunch of files in a single go, first we run the following command to download the Bulkren package.<pre>pip install Bulkren</pre><h2 style="text-align: left">Renaming Files Using Bulkren</h2>And now to rename files, ensure that all files are inside a folder, we will call it a&nbsp;Input Folder&nbsp;and right the following command.<pre>python -m Bulkren -i "input_folder_path" -o "output_folder_path" -p "patter_to_rename"</pre>Now here, -i or --input takes&nbsp;input folder path -o or --output takes&nbsp;output folder path -p or --pattern takes&nbsp;pattern for renaming files.<h2 style="text-align: left">Example</h2>Let's try to understand it with a example,<pre>python -m Bulkren -i C:\User\Akash\Desktop\input_folder -o C:\User\Akash\Desktop\output_folder -p images_XYZ</pre>This above example will take all the files in&nbsp;C:\User\Akash\Desktop\input_folder&nbsp;and then rename it with pattern&nbsp;images_XYZ&nbsp;where XYZ would be replaced number count of file (remember to add XYZ in end only) and will save it to the&nbsp;C:\User\Akash\Desktop\output_folder&nbsp;folder.Note&nbsp;: If the -o argument is not passed then it will automatically create a output named folder in same parent directory, for above example the output folder path would be C:\User\Akash\Desktop\outputSo, i hope now you might have got how to use Bulkren and how you can use it to save your time in doing such a hectic task.Thank you!

How to Bulk Rename Files

Welcome! In this post I am going to describ how to install OpenCV, an open-source library for computer vision in python on Windows. OpenCV is a great library to handle most of the Computer Vision projects.<h2 style="text-align: left">Install Anaconda</h2><ul><li>Download Anconda from&nbsp;<a href="https://www.anaconda.com/download/">here</a></li><li>Run .exe file and install it successfully</li></ul><h2 style="text-align: left">Install OpenCV</h2>To install OpenCV open Anaconda terminal and execute following instructions:<pre>​conda install -c conda-forge opencv </pre>press 'y' and hit enter, downloading will get started.<h2 style="text-align: left">Check Installation</h2>After installing the library, check whether it is successfully installed or not, open Anaconda terminal and execute following command to open python <pre>&gt;&gt;&gt; python </pre>​Now, check the installation by getting version of OpenCV<pre>&gt;&gt;&gt; import cv2 ​&gt;&gt;&gt; cv2.__version__​ </pre>​You will get output something like this <div class="se-component se-image-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; margin: 0px;"><img src="https://dev-akash.github.io/images/opencv-installed.PNG" alt="" data-rotate="0" data-proportion="true" data-percentage="100%,auto" data-size="100%,auto" data-align="none" data-index="0" data-file-name="opencv-installed.PNG" data-file-size="0" data-origin="100%,auto" style="width: 100%; height: auto;"></figure></div>

How to install opencv on windows

In this blog, we are going to understand that, what is edge detection and why it is used in image processing, and then we would talk about the most widely used technique of edge detection i.e., Canny Edge detection, and finally we will code Canny Edge detection using OpenCV's&nbsp;Canny()&nbsp;function.<h2 style="text-align: left">What is edge detection ?</h2>Edge detection is basically a mathematical operation which is done on image to get the edges of the objects present in the image by checking for the sharp change in the light(intensity of pixels), moving from one pixel to another.<h2 style="text-align: left">Canny Edge Detection</h2>Edge detection is a fundamental operation in image processing and the most the most widely used algorithm to perform the edge detection is&nbsp;Canny Edge Detection. Canny Edge Detection is a multi-stage algorithm, which perform several operations on the image to make the edge detection much better, it performs the following consecutive operations: <ul><li>Noise Reduction</li><li>Finding Intensity Gradient of the Image</li><li>Non-maximum Suppression</li><li>Hysteresis Thresholding</li></ul>For more information about these individual step, you can this&nbsp;articleOpenCV provides a simple method&nbsp;Canny()&nbsp;to perform these above steps in a single go.&nbsp;Canny()&nbsp;method needs three arguments to be passed, first is the&nbsp;source image, second is the&nbsp;minVal&nbsp;which is the minmum thresholding value for edge-detection, and third is the&nbsp;maxVal&nbsp;which is the maximum thresholding value for edge-detection.Let's see how to write the code for doing edge detection using Canny() method of OpenCV.<pre>import cv2 # Reading image img = cv2.imread("color-img.png") # Edge-detection using Canny() method canny = cv2.Canny(img, 100, 200) # Showing the edge-detected image cv2.imshow("Canny Image",canny) # waiting for key event cv2.waitKey(0) # destroying all windows cv2.destroyAllWindows() </pre><h4 style="text-align: left">Output</h4><div class="se-component se-image-container __se__float-none" contenteditable="false" style="width: 100%;"> <figure style="margin: 0px; width: 100%;"> <img src="https://dev-akash.github.io/images/canny_edge_detection_output_img.png" alt="" data-rotate="" data-proportion="true" data-rotatex="" data-rotatey="" data-size="100%,auto" data-align="none" data-percentage="100%,auto" data-file-name="canny_edge_detection_output_img.png" data-file-size="0" data-origin="," origin-size="1024,555" style="width: 100%; height: auto;" data-index="0"> </figure></div>

Latest Blogs