Untitled

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>ECG Monitor</title>
</head>
<body>
<section>
<div id="canvasesdiv" style="position:relative; width:30000px; height:1000px">
<canvas id="layer1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="1000px" width="30000px">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="1000px" width="30000px">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px;
" height="1000px" width="30000px">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">


var layer1;
var layer2;
var layer3;
var ctx1;
var ctx2;
var ctx3;

var x = 30000;
var y = 1000;
var dx = 2;
var dy = 4;
var WIDTH = 30000;
var HEIGHT = 1000;
var city = new Image();

var tong= 0.00;

var w = 30000,
            h = 1000,
            speed = 1,
            scanBarWidth = 10,
            i=0,
            //data = EcgData[0].split(','),
            color='#000000';
            var px = 0;
            var opx = 0;
            var py = h/2;
            var opy = py;

function init() {
city.src ="tong30_5.png";
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
layer3 = document.getElementById("layer3");
ctx3 = layer3.getContext("2d");
//setInterval(drawAll, 1);

ctx3.strokeStyle = color;
ctx3.lineWidth = 2;
ctx3.setTransform(1,0,0,-1,0,h);
}

function drawAll() {
draw1();

}

function draw1() {
ctx1.clearRect(0, 0, WIDTH, HEIGHT);
ctx1.fillStyle = "#FAF7F8";
ctx1.beginPath();
ctx1.rect(0,0,WIDTH,HEIGHT);
ctx1.closePath();
ctx1.fill();
ctx1.fillStyle = "#444444";
ctx1.beginPath();
ctx1.arc(x, y, 10, 0, Math.PI*2, true);
ctx1.closePath();
ctx1.fill();

if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;

x += dx;
y += dy;
}

function draw2() {
ctx2.clearRect(0, 0, 30000, 1000);
ctx2.drawImage(city, 0, 0);
}

function draw3() {
    drawWave();
}


            function drawWave() {
               px += speed;
               ctx3.clearRect( px,0, scanBarWidth, h);
               ctx3.beginPath();
               ctx3.moveTo( opx,  opy);
               ctx3.lineJoin= 'round';
                    //py=((tong+tong2)/2);
                    py=(tong2);
                    ctx3.lineTo(px, py);
                    ctx3.stroke();
                     opx = px;
                    opy = py;
                    if (opx > w) {px = opx = -speed;}


                     //requestAnimationFrame(drawWave);
            }

 let dat
 var tong2;
 var STNS = 3;
const SerialPort = require('serialport');
    let port = new SerialPort('COM5', {
    baudRate: 1000000,
    parser: SerialPort.parsers.readline('\r\n')
    })

    port.on('data', function (data) {
    if(STNS==0){
    dat = data;
    tong = parseFloat(dat);
    tong = tong*200;
    STNS =1;
    }else if(STNS==1){
    dat = data;
    tong2 = parseFloat(dat);
    tong2 = tong2*200;
    //STNS =0;
    console.log((tong+tong2)/2);

    draw3();
    }

    })

init();
setInterval(function(){
    draw2();
    STNS =1;
    }, 10000);
</script>
</section>
</body>
</html>