Saturday, March 27, 2010

Draw ECG Using Java Script Draw Functions


In this post we will draw ECG using Java script draw library functions, the output will looks like the above image.

To draw ECG we need to identify few things 1st :
1.ECG baseline used.
2.Sampling rate : no of readings per seconds.

1. We will have 1 html div component to draw the ECG inside:

<div id="Canvas" style="background-image: url(ecg_back.png); position: relative; height: 250px; width: 1000px;"></div>

This is the div background image, its 250x50, this will typically fit for 1 Second (so you need to draw samples in this box according to your sampling rate, in our example we have 500/seconds so we draw 500 per this 250 pixel , so we will increment the draw by 0.5 for each sample).

2. Import the graphics library: (in the header)

<script type="text/javascript" src="wz_jsgraphics.js"></script>

You can download this library from the URL:
https://code.google.com/p/eucaly61-java/downloads/detail?name=wz_jsgraphics.js&can=2&q=


3. Initialize the Java Script ECG variables: (in the header)

y=new Array(....,.....,.... ); //this contain the y values (readings) we will post the example values at the end of the article.
currentPart=0; //current page is 1st page in the ECG
baseline=201; //the is the ECG recording baseline
total=0; //total number of pages
temp=y.length; //calculate the total number of pages
while(temp>0){
temp=temp-2000; //as shown in the 1st image , we will draw 4 seconds in each page (each second represented by 500 sample =2000 total sample)
total++;
}
//initiliazie the graphics object to draw in our Div (i.e. Canvas)
jg = new jsGraphics("Canvas");
//set this true if we need to allow the user to print it, it will impact performance a little.
jg.setPrintable(true);


4. Draw the initial ECG page by calling draw() method on html body onload:

<body onload="draw();">

5. Draw function code:

function draw(){
jg.setColor("black");
jg.drawString("Lead II",40,5); //this should be adjusted according to the lead number
jg.drawString("HR 80 per min",40,25); //this should be adjusted according to HR value
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220); //this is the current page number
jg.setColor("blue");
var x=0;
jg.drawLine(x,y[0]+baseline,x,y[0]+baseline);
jg.setColor("blue");
var x=0;
jg.drawLine(x,y[0]+baseline,x,y[0]+baseline);
for(i=1;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;} //break once reach to end of the div of 4 seconds.
}
jg.paint();
return;
}

6. Next and Previous page buttons:

<img src="prev.gif" onclick="drawPrev();"/>
<img src="next.gif" onclick="drawNext();"/>

7. drawPrev() and drawNext() functions:

function drawNext(){
if(currentPart+1<total){
currentPart++;
}else{
return;
}
jg.clear(); //clear all drawings
jg.paint();
start=currentPart*2000; //this is the total samples per page (4 seconds)
var x=0;
jg.setColor("black");
jg.drawString("Lead II",40,5);
jg.drawString("HR 80 per min",40,25);
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220);
jg.setColor("blue");
jg.drawLine(x,y[start]+baseline,x,y[start]+baseline);
for(i=start;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;}
}
jg.paint();
return;
}

function drawPrev(){
if(currentPart>0){
currentPart--;
}else{
return;
}
jg.clear(); //to clear all drawings
jg.paint();
start=currentPart*2000;
var x=0;
jg.setColor("black");
jg.drawString("Lead II",40,5);
jg.drawString("HR 80 per min",40,25);
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220);
jg.setColor("blue");
jg.drawLine(x,y[start]+baseline,x,y[start]+baseline);
for(i=start;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;}
}
jg.paint();
return;
}

8. Y array example values:

y=new Array(12,13,18,27,38,44,44,43,46,52,57,57,53,49,48,49,50,51,54,57,59,59,57,56,55,55,55,56,57,59,59,59,59,59,59,59,58,59,59,59,60,60
,61,61,61,61,61,61,61,61,62,63,63,63,63,63,64,65,66,66,65,65,65,65,65,66,66,66,66,66,66,66,67,69,70,71,71,70,69,69,68,69,70,71,72,73
,73,73,74,75,76,76,77,78,79,79,79,79,79,80,81,82,82,83,85,86,88,89,89,89,89,89,89,89,89,90,90,91,92,93,93,92,90,87,84,82,79,77,74
,72,70,69,67,67,66,66,65,63,62,61,60,59,58,57,56,56,56,56,56,56,56,55,55,56,56,56,56,56,56,57,57,57,56,56,56,56,55,55,55,55,56,56,55
,55,55,55,55,55,54,54,54,55,56,57,58,58,58,58,56,55,55,54,54,53,53,54,54,55,56,58,59,59,58,56,55,55,55,56,56,56,56,57,57,57,57,57,57
,57,57,57,57,57,57,57,58,58,58,58,58,58,58,57,57,58,59,60,59,58,58,57,57,57,57,58,58,58,58,59,60,61,61,61,62,62,61,61,60,61,61,62,63
,63,63,64,64,64,64,64,64,63,62,62,62,62,62,62,62,62,63,63,62,61,60,60,60,59,58,57,56,56,56,56,57,57,57,57,57,57,57,57,56,56,56,56,56
,57,57,57,57,56,56,56,56,56,57,57,58,57,57,56,56,55,54,52,49,47,45,44,45,48,52,58,66,75,86,99,111,121,127,129,126,119,108,94,79,66,57
,51,46,43,42,44,49,54,58,59,58,57,56,55,56,57,59,61,62,62,61,60,59,58,57,57,57,59,61,62,63,62,62,62,62,62,62,62,62,62,63,64,64,64,64,
64,64,65,65,66,67,68,69,69,68,67,66,66,66,67,67,67,67,68,69,71,73,74,74,73,71,70,69,70,70,71,70,70,70,71,72,74,75,76,76,76,77,77
,77,77,78,80,81,82,82,82,83,84,85,85,86,87,88,89,91,91,91,92,92,93,93,94,94,95,95,94,94,93,92,90,89,87,86,85,82,79,76,74,73,72,71,69
,67,65,64,64,63,63,62,62,62,60,59,58,57,57,57);


Note: For more details about Graphics drawing library , check the URL:

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

You can find a working example at the URL:

http://osa-ora.awardspace.co.uk/



15 comments:

  1. Osama
    The link appears to be broken- please verify the link http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
    or post the lib in another location

    ReplyDelete
  2. I send the library to you, seems the server is no longer used to host it, sorry for that i will try to add another link for it.

    ReplyDelete
  3. I can't draw using wz_jsgraphics.js, my page remains blank, and I tried the simplest example of all, just to draw a rectangle. Am I missing something? I'm using firefox 5.0

    ReplyDelete
  4. send you code so i can have a look on what is wrong.. mostly you need to place jg.paint();

    ReplyDelete
  5. could u send the js to mukeshsingh.chauhan@gmail.com

    ReplyDelete
  6. Hi,
    your application seems to be very useful for me. I am a beginner in java. I have got a project similar to yours. But I need to work it out with Java Swing. Or else we can even use any available native code. Please let me know your valuable suggestions.

    ReplyDelete
  7. It is much more easier to do it in Java (Swing or others) in compare to Java Script, so go ahead and do it.

    ReplyDelete
  8. can you please guide me with any sample code?

    ReplyDelete
  9. You need to follow same steps but draw on a JPanel the background , then draw the points using the data over the JPanel after getting its Graphic component.

    ReplyDelete
  10. Can you send me the library to me as well. rasit dot eskicioglu AT gmail dot com

    ReplyDelete
  11. hi i am also in a certain health project so can u send the code and library to me also at bishu1988.diatm@gmail.com..........side wise can i get this done in sencha also????

    ReplyDelete
  12. Really great, you are saving lot of people's time.

    ReplyDelete