sites/plot ecg.html at master · dqrtec/sites · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var data=[211,223,232,223,229,226,215,211,217,189,211,214,218,227,226,227,224,210,213,216,211,224,232,238,230,192,228,230,211,217,214,192,189,185,183,177,154,167,0,165,169,162,165,171,180,221,141,123,135,129,128,136,131,135,129,130,130,140,134,148,151,148,155,157,157,164,157,159,154,147,138,138,145,144,145,146,152,154,154,160,160,160,163,175,168,174,177,177,181,182,176,170,172,179,177,176,180,177,211,259,235,179,181,173,175,178,172,100,182,187,189,190,197,197,198,202,201,198,194,195,186,176,170,166,174,168,95,94,172,176,176,186,178,182,182,181,185,186,187,196,193,189,187,180,185,185,183,187,183,184,0,230,271,177,186,177,179,180,186,184,189,192,196,191,198,202,203,205,200,198,200,192,188,183,170,167,165,162,167,284,174,181,181,178,180,192,180,180,183,184,193,100,99,179,181,180,178,177,181,184,178,191,231,182,95,180,179,100,184,182,185,184,186,189,188,195,190,189,200,198,197,191,175,161,165,162,166,172,173,172,177,180,173,178,175,181,176,0,178,179,183,188,190,193,184,181,178,176,176,176,94,206,252,239,180,183,180,176,178,177,178,2,182,100,186,183,186,190,192,198,195,192,189,0,180,171,168,170,167,165,167,169,172,176,177,100,183,182,179,179,180,181,177,182,179,181,182,192,187,187,184,179,182,179,174,175,175,196,245,184,180,180,174,177,177,176,182,179,284,185,192,197,199,195,202,197,194,197,189,184,176,94,168,95,168,171,170,177,175,177,184,185,179,184,182,181,182,186,181,182,186,189,192,194,191,180,182,177,178,178,179,181,182,224,261,167,0,0,180,178,177,185,187,184,190,187,193,195,190,195,200,190,199,199,193,188,169,94,98,161,170,167,170,173,172,172,181,174,180,181,177,100,177,181,181,178,177,182,182,182,190,185,190,183,100,185,182,176,179,175,177,184,95,181,100,172,176,178,177,181,181,179,188,184,187,185,189,193,201,191,193,185,175,165,176,175,170,174,178,178,180,181,177,182,182,182,184,184,181,183,184,189,190,192,191,184,182,174,176,180,177,189,228,267,191,178,179,179,177,178,182,187,191,197,190,190,191,188,200,189,190,184,174,99,169,168,166,167,167,169,175,94,182,184,190,187,183,187,188,187,189,184,195,189,191,188,181,182,181,177,182,182,179,190,185,210,190,158,174,178,178,186,186,188,189,192,191,197,201,196,198,199,198,198,194,185,0,94,166,94,167,172,164,166,175,175,177,180,179,181,177,178,180,180,187,187,192,188,183,182,175,175,178,177,184,189,229,258,181,175,183,179,180,182,178,181,183,187,188,184,194,189,193,194,198,194,195,189,182,180,167,168,168,167,170,172,179,100,172,178,100,184,183,100,179,182,180,182,194,100,184,184,178,180,176,176,178,181,179,182,173,181,181,0,181,100,180,189,190,187,192,196,201,197,198,202,195,181,180,172,166,0,167,173,94,176,176,182,177,184,185,188,0,178,0,187,182,188,194,191,198,190,182,177,181,173,185,181,182,208,247,237,178,183,178,176,94,181,180,100,188,187,190,193,196,192,191,0,178,171,172,165,170,94,180,176,179,184,179,183,183,182,182,181,178,100,182,188,188,197,195,188,185,178,178,177,95,181,191,219,265,190,175,185,177,175,178,178,100,187,188,187,189,193,194,192,189,182,174,170,170,170,168,173,177,180,181,185,182,181,180,183,181,187,179,184,180,187,188,192,0,187,187,184,179,179,180,176,178,172,180,184,205,0,242,174,180,177,174,179,176,180,181,181,181,183,186,194,189,194,191,197,285,194,189,192,187,175,165,168,166,162,169,168,172,175,177,181,180,180,180,179,185,184,179,184,182,182,196,195,194,191,184,176,177,178,180,176,180,183,0,195,235,261,184,179,181,177,174,180,180,186,182,90,0,190,189,191,192,193,198,195,199,194,195,196,180,167,99,169,167,171,175,174,179,177,176,184,178,181,181,183,181,183,178,184,185,184,187,190,194,194,199,187,179,181,174,178,208,259,233,174,175,177,177,174,181,183,1,187,191,190,193,198,196,202,197,195,198,191,187,180,171,0,164,161,168,166,171,177,176,174,176,184,179,182,185,179,180,179,180,187,184,181,185,183,0,186,181,179,177,178,178,175,179,180,252,218,163,0,175,180,181,184,184,188,188,185,190,191,198,195,193,198,186,182,170,170,166,165,170,168,94,175,173,178,181,175,180,181,182,180,179,188,191,190,192,187,179,176];


    var x=0;

    var panAtX=250;

    var continueAnimation=true;
    animate();


    function animate(){

        if( x > data.length-1 ){return;}

        if(continueAnimation){
            requestAnimationFrame(animate);
        }

        if(++x<panAtX){

            ctx.moveTo(x-1,data[x-1]);
            ctx.lineTo(x,data[x]);
            ctx.stroke();

        }else{

            ctx.clearRect(0,0,canvas.width,canvas.height);

            ctx.beginPath();

            for(var xx=0;xx<panAtX;++xx){

                var y1=data[x-panAtX+xx-1];
                ctx.moveTo(xx-1,y1);

                var y2=data[x-panAtX+xx];
                ctx.lineTo(xx,y2);

                ctx.stroke();
            }
        }
    }


    $("#stop").click(function(){continueAnimation=false;});
    $("#resume").click(function(){ctx.clearRect(0,0,canvas.width,canvas.height);continueAnimation=true;animate();});

});
</script>

</head>

<body>
    <button id="stop">Stop</button><br>
    <button id="resume">Resume</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>