Piyumika's Blog

Wednesday, September 2, 2015

Morris Donut Charts place inside Bootstrap Tabs

While I was working with Morris Donut charts I faced a problem when placing this charts inside many tabs. It works in one page but not in tabs. So, here is the solution.

When placing Morris Donut Chart inside tabs we should call redraw() function. Chart/s in first tab will alright without calling redraw() function but for other tabs JS is not working properly without calling redraw().

Here is the code...
Download morris.js from following link
http://morrisjs.github.io/morris.js/

<!DOCTYPE html>
<html>
<head>
<link href=".../morris.css" rel="stylesheet">
</head>
<body>



<div id="donut-snapshot"></div>
<div id="donut-style"></div>
<div id="donut-order"></div>

<script src=".../jquery-ui.min.js"></script>
<script src=".../raphael-min.js"></script>
<script src=".../morris.js"></script>


<script>
Morris.Donut({
element: 'donut-snapshot', //js calls inside this id
colors : ["#EC407A","#2196F3","#8BC34A","#AB47BC"], //set colors for each bar
resize : true,
data : [
{label: "Completed", value: 52},
{label: "Pending", value: 30},
{label: "Delay", value: 20},
{label: "Due", value: 20}
]
});
</script>


<script>
var graphStyle = Morris.Donut({
element: 'donut-style',
data: [
{label: "Completed", value: 12},
{label: "Pending", value: 30},
{label: "Delay", value: 20},
{label: "Due", value: 20}
],
colors: ["#EC407A","#2196F3","#8BC34A","#AB47BC"],

});
$('ul.nav a').on('shown.bs.tab', function (e) {
graphStyle.redraw();
});

</script>


<script>
var graphOrder = Morris.Donut({
element: 'donut-order',
data: [
{label: "Completed", value: 12},
{label: "Pending", value: 30},
{label: "Delay", value: 40},
{label: "Due", value: 20}
],
colors: ["#EC407A","#2196F3","#8BC34A","#AB47BC"],

});
$('ul.nav a').on('shown.bs.tab', function (e) {
graphOrder.redraw();
});

</script>

</body>
</html>

1st tab

2nd tab

3rd tab

Thursday, July 17, 2014

Capturing image using Web Cam - JavaCV for Windows

Hello Every One!!!

Don't you know how to capture a image using your web cam???

don't worry. Here your code. Just try :-)

import com.googlecode.javacv.CanvasFrame;
import com.googlecode.javacv.FrameGrabber;
import com.googlecode.javacv.OpenCVFrameGrabber;
import com.googlecode.javacv.cpp.opencv_core.IplImage;

import static com.googlecode.javacv.cpp.opencv_core.cvFlip;
import static com.googlecode.javacv.cpp.opencv_highgui.cvSaveImage;

public class GrabCam {

public static void main(String[] args) {

CanvasFrame canvas = new CanvasFrame("Webcam");
canvas.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
FrameGrabber grabber = new OpenCVFrameGrabber("");

try {
grabber.start();
IplImage img;

while (true) {
img = grabber.grab();
canvas.setCanvasSize(grabber.getImageWidth(), grabber.getImageHeight());

if (img != null) {

cvFlip(img, img, 1);
canvas.showImage(img);
cvSaveImage("capture.jpg", img);
}
}
} catch (Exception e) {
System.out.print("error"+e); }
}
}

Thursday, July 10, 2014

Detect Red,Green and Blue colors using JavaCV for Windows

JavaCV is a wrapper of OpenCV and it allows accessing the OpenCV library directly from within Java Virtual Machine (JVM) and Android platform.
First of all you should configure JavaCV libraries to your project.

I hope you've already done it.

You can create a threshold image using a specific image that has stored in your hard disk. Or you can use your web cam, take a picture and detect any red, green or blue colors are there.

1st Step : Import these libraries.
import static com.googlecode.javacv.cpp.opencv_core.*;
import static com.googlecode.javacv.cpp.opencv_highgui.*;
import static com.googlecode.javacv.cpp.opencv_imgproc.*;

import com.googlecode.javacv.cpp.opencv_core.CvScalar;
import com.googlecode.javacv.cpp.opencv_core.IplImage;

2nd Step : Initialize min and max BGR ranges of each color (one color at a time). BGR is the default color for capturing from camera (normal 3 channel color)

Red : static CvScalar min = cvScalar(0, 0, 130, 0);
static CvScalar max= cvScalar(140, 110, 255, 0);
Green : static CvScalar min = cvScalar(0, 130, 0, 0);
static CvScalar max= cvScalar(140, 255, 110, 0);
Blue : static CvScalar min = cvScalar(130, 0, 0, 0);
static CvScalar max= cvScalar(255, 110, 140, 0);

3rd Step : Read image and detect color

Here is the code. You can edit this code as you wish.

package detectColors;

import static com.googlecode.javacv.cpp.opencv_core.*;
import static com.googlecode.javacv.cpp.opencv_highgui.*;
import static com.googlecode.javacv.cpp.opencv_imgproc.*;

import com.googlecode.javacv.cpp.opencv_core.CvScalar;
import com.googlecode.javacv.cpp.opencv_core.IplImage;

public class ColorsDetect {

static CvScalar min = cvScalar(0, 0, 130, 0);
static CvScalar max= cvScalar(140, 110, 255, 0);

public static void main(String[] args) {

IplImage orgImg = cvLoadImage("rgb.png");
IplImage imgThreshold = cvCreateImage(cvGetSize(orgImg), 8, 1);
cvInRangeS(orgImg, min, max, imgThreshold);
cvSmooth(imgThreshold, imgThreshold, CV_MEDIAN, 13); cvSaveImage("threshold.jpg", imgThreshold);
System.out.print("done");
}
}

********************************* Sample images ***********************************

Hope you enjoyed. Thank you!