BP Plot

by jmcjc5u

HTML

<h1 style="text-align:center">BP Plot</h1>
<p>
start date: <input type='text' id="startDate">
</p>
<hr>
<div id="container" style='width:100vw;height:50vw'></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, cameraHUD, sceneHUD, renderer;
var startDate = 1;
var bpdata;
//var keyboard = new KeyboardState();
var offset;

$('#startDate').change ( function(){
	startDate = $(this).val()
  // remove everything from scene
  scene.children=[]
  camera.position.x = 0
  buildBPPlot(startDate);
});

init();
animate();

function createBPData() {
  bpdata = [];
  bpdata.push([1, 130, 80])
  bpdata.push([2, 140, 70])
  bpdata.push([3, 120, 90])
  bpdata.push([4, 110, 70])
  bpdata.push([5, 130, 93])
  bpdata.push([6, 140, 88])
  bpdata.push([7, 110, 80])
  bpdata.push([8, 120, 78])
  bpdata.push([9, 130, 98])
  bpdata.push([10, 122, 88])
}

function buildBPPlot(startDate) {
  var caret = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({
    color: 0xff00ff
  }));

  // start from 0,
  // for each date: add a vertical line at x = 0
  // plot 
  function plot(i) {
    //add DateLine (i)
    let geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(10 * (i + 0), 0, 0), new THREE.Vector3(10 * (i + 0), 40, 0))
    let dateLine = new THREE.Line(geometry, new THREE.LineBasicMaterial({
      color: 0xffff00
    }));
    scene.add(dateLine)
    scene.add(writeNum(bpdata[i+offset][0], 10 * (i + 0), 3))

    //add BPData (i)
    let cc = caret.clone();
    cc.position.set(10 * (i + 0.5), BP2Y(bpdata[i+offset][1]), 0)
    scene.add(cc);
    cc = caret.clone();
    cc.position.set(10 * (i + 0.5), BP2Y(bpdata[i+offset][2]), 0)
    scene.add(cc);
  }

  function BP2Y(bp) { // [20,180] -> [0, 40]
    return (bp - 20) / 4
  }
  
  ////////////////////////////////////
  let geometry, i, line;
 
  for (var ii = 0; ii < bpdata.length; ii++) {
  	if (bpdata[ii][0] >= startDate) {
    	offset = ii;
      break;
    }
 	}
  
  for (i = 0; i < bpdata.length - offset; i++) {
    plot(i)
  }
  // connect the SYSTOLIC
  geometry = new THREE.Geometry()
  for (i = 0; i < bpdata.length-offset; i++)
    geometry.vertices.push(new...