4 |
9 |
24 |
25 |
26 |
27 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
23 |
28 |
35 |
36 |
37 |
73 | {% endblock %}
--------------------------------------------------------------------------------
/static/js/animate.js:
--------------------------------------------------------------------------------
1 | // ** USER INTERFACE **
2 | // jQuery provides functionality for animation
3 | // and basic UI
4 | var delay = 1000;
5 |
6 | function minimizeVideo(){
7 | var delay = 1000;
8 | $( ".video" ).animate({
9 | width: 240,
10 | height: 180,
11 | // width: 120,
12 | // height: 90,
13 | left: "-5px",
14 | position: "absolute",
15 | margin: "10px"
16 | }, delay );
17 | $( "#border" ).animate({
18 | width: 225,
19 | height: 170,
20 | // width: 113,
21 | // height: 85,
22 | left: "-25px",
23 | top: "-25px",
24 | border: "22px solid #E1F1F1"
25 | }, delay );
26 | $("#buttonBar").animate({
27 | left: "20px",
28 | width: 160,
29 | height: 220,
30 | margin: "20px 0 0 10px"
31 | }, delay, function(){
32 | });
33 | $("button").animate({
34 | margin: 2,
35 | }, delay);
36 | $("#heartbeat").animate({
37 | width: 600,
38 | height: 600,
39 | top: "-500px",
40 | left: "30%"
41 | }, delay);
42 | $("#graphs").animate({
43 | top: "-500px"
44 | }, delay);
45 | $("#minToggle").html("Maximize Video");
46 |
47 | }
48 |
49 | function maximizeVideo(){
50 | var center = ($(window).width()/2) - (480/2);
51 | $( ".video" ).animate({
52 | // width: 480,
53 | // height: 360,
54 | width: 380,
55 | height: 285,
56 | margin: "0 0 0 " + center + "px",
57 | }, delay, function(){
58 | $("#vid").css("position", "relative");
59 | $("#canvas").css("position", "relative");
60 | $(".video").css("margin", "0");
61 | $(".video").css("left", "0");
62 | $("#vid").css("margin", "auto");
63 | });
64 | $( "#border" ).animate({
65 | // width: 460,
66 | // height: 340,
67 | width: 360,
68 | height: 270,
69 | left: "-30px",
70 | top: "-30px",
71 | }, delay );
72 | $("#buttonBar").animate({
73 | left: "20px",
74 | width: 385,
75 | height: 60,
76 | margin: "0 0 0 " + center + "px",
77 | }, delay, function(){
78 | $("#buttonBar").css("margin", "auto");
79 | });
80 | $("button").animate({
81 | margin: "3.5px",
82 | }, delay);
83 | $("#heartbeat").animate({
84 | width: 400,
85 | height: 400,
86 | top: "-400px",
87 | left: "0%"
88 | }, delay);
89 | $("#graphs").animate({
90 | top: "-200px"
91 | }, delay);
92 | $("#minToggle").html("Minimize Video");
93 |
94 | }
--------------------------------------------------------------------------------
/static/css/transPulse.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
--------------------------------------------------------------------------------
/static/js/mathmatical.js:
--------------------------------------------------------------------------------
1 | function mean(array) {
2 | var sum = array.reduce(function(a, b){ return a + b });
3 | return sum/array.length;
4 | };
5 |
6 | function normalize(array){
7 | // normalizes an array of data to a mean of zero (does not normalize between -1 and 1)
8 | var square = [];
9 | var normalized = [];
10 | var averageOfArray = mean(array);
11 |
12 | //standard deviation
13 | for (var i = 0; i < array.length; i++){
14 | square.push(Math.pow((array[i] - averageOfArray), 2));
15 | };
16 |
17 | var squaredAverage = mean(square);
18 | var stdDev = Math.sqrt(squaredAverage);
19 |
20 | //normalize
21 | for (var i = 0; i < array.length; i++){
22 | normalized.push((array[i] - averageOfArray)/stdDev)
23 | };
24 |
25 | return normalized;
26 |
27 | };
28 |
29 | function frequencyExtract(fftArray, framerate){
30 | // Return the Discrete Fourier Transform sample frequencies.
31 | // returns the center of the FFT bins
32 | // blantantly ripped from numpy.fft.fftfreq(), but ported by JS by yours truly
33 |
34 | var val, n, d, N;
35 | var p1 = [];
36 | var p2 = [];
37 | var results = [];
38 | var freqs = [];
39 |
40 | //from numpy.fft.fftfreq doc: "Sample spacing (inverse of the sampling rate). Defaults to 1. For instance, if the sample spacing is in seconds, then the frequency unit is cycles/second."
41 | // if my frequency is 15 fps, or 15 Hz, or every 66ms, then the sample spacing is .066 seconds (1/15)
42 |
43 | n = fftArray.length;
44 | d = 1.0/framerate;
45 |
46 | val = 1.0/(n * d);
47 | N = ((n - 1)/2 + 1) >> 0;
48 | for (var i = 0; i < N; i++){ p1.push(i) }
49 | for (var i = (-(n/2) >> 0); i < 0; i++) { p2.push(i) }
50 | results = p1.concat(p2);
51 | freqs = results.map( function(i){ return i * val });
52 |
53 | return filterFreq(fftArray, freqs, framerate);
54 | }
55 |
56 | function filterFreq(fftArray, freqs, framerate){
57 | // calculates the power spectra and returns
58 | // the frequency, in Hz, of the most prominent
59 | // frequency between 0.75 Hz and 3.3333 Hz (45 - 200 bpm)
60 | var filteredFFT = [];
61 | var filteredFreqBin = [];
62 |
63 | var freqObj = _.object(freqs, fftArray);
64 | for (freq in freqObj){
65 | if ((freq > 0.80) && (freq < 3)){
66 | filteredFFT.push(freqObj[freq]);
67 | filteredFreqBin.push((freq)/1);
68 | }
69 | }
70 | var normalizedFreqs = filteredFFT.map(function(i) {return Math.pow(Math.abs(i), 2)});
71 | var idx = _.indexOf(normalizedFreqs, _.max(normalizedFreqs));
72 | var freq_in_hertz = filteredFreqBin[idx];
73 |
74 | freqs = {normalizedFreqs: normalizedFreqs, filteredFreqBin: filteredFreqBin, freq_in_hertz: freq_in_hertz}
75 | return freqs;
76 | }
--------------------------------------------------------------------------------
/static/js/matrixmath.js:
--------------------------------------------------------------------------------
1 | // some naive solutions for some basic matrix math funcions using TypedArrays
2 | // open to much memory optimization, I'm sure.
3 |
4 | // example arrays
5 | var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
6 |
7 | var x = new Float64Array(a.length);
8 |
9 | x.set(a);
10 |
11 | var X = new Matrix(x, 3, 4);
12 |
13 | //create Matrix obj, keeps dimension metadata handy
14 | function Matrix(array, r, c){
15 | this.array = array;
16 | this.r = r;
17 | this.c = c;
18 |
19 | }
20 |
21 | function transpose(matrix){
22 | var ai = 0;
23 | var arrayT = new Float64Array(matrix.array.length);
24 | for (var i = 0; i < matrix.c; i++){
25 | for (var i2 = 0; i2 < matrix.array.length; i2+=matrix.c){
26 | arrayT[ai] = matrix.array[i2+i];
27 | ai++;
28 | }
29 | }
30 | return new Matrix(arrayT, matrix.c, matrix.r);
31 | }
32 |
33 | function getSection(matrix, r, c){
34 | if (typeof r === "undefined" || r === null){ r = -1; }
35 | if (typeof c === "undefined" || c === null){ c = -1; }
36 |
37 | if (c >= 0 && r < 0){
38 | //return a column
39 | var ci = c;
40 | var ce = matrix.r;
41 | var col = [];
42 | for (var i = ci; i < matrix.array.length; i += matrix.c){
43 | col.push(i)
44 | }
45 | return col
46 | } else if (c < 0 && r >= 0){
47 | //return a row
48 | var ri = r * matrix.c;
49 | var re = ri + matrix.c;
50 | var row = [];
51 | for (var i = ri; i < re; i++){ row.push(i) }
52 | return row
53 | } else if (c >= 0 && r >= 0){
54 | //return a cell based on row + column
55 | return ((r * matrix.c) + (c))
56 | } else {
57 | return "error"
58 | }
59 | }
60 |
61 | function matrixMultiply(matrix1, matrix2){
62 | //multiply two matrices
63 | if (matrix1.c != matrix2.r){
64 | return "error: inner dimensions are not the same"
65 | } else {
66 | var multArray = [];
67 | var matrixArray = new Float64Array(matrix1.r * matrix2.c)
68 | var ai = 0;
69 | for (var i = 0; i < matrix.r; i ++){
70 | var workingRow = getSection(matrix1, i, null)
71 | for (var i2 = 0; i2 < matrix2.c; i2 ++){
72 | var workingCol = getSection(matrix2, null, i2)
73 | var temp = 0;
74 | for (var i3 = 0; i3 < matrix1.c; i3++){
75 | temp = temp + (matrix1.array[workingRow[i3]] * matrix2.array[workingCol[i3]])
76 | }
77 | multArray.push(temp)
78 | }
79 | }
80 | matrixArray.set(multArray)
81 | return new Matrix(matrixArray, matrix1.r, matrix2.c);
82 | }
83 | }
--------------------------------------------------------------------------------
/model.py:
--------------------------------------------------------------------------------
1 | import jade
2 | import numpy as np
3 | import json
4 |
5 | def parse_RGB(message):
6 | buffer_window = message["bufferWindow"]
7 |
8 | # # ** FOR GREEN CHANNEL ONLY **
9 | # X = np.array(message["array"])
10 | # X = normalize_array(X)
11 | # return json.dumps(parse_ICA_results(X, buffer_window))
12 |
13 | # ** FOR RGB CHANNELS & ICA **
14 | X = np.ndarray(shape = (3, buffer_window), buffer= np.array(message["array"]))
15 | X = normalize_matrix(X)
16 | ICA = jade.main(X)
17 | return json.dumps(parse_ICA_results(ICA, buffer_window)) #message["time"]
18 |
19 |
20 |
21 |
22 | def parse_ICA_results(ICA, buffer_window): #time
23 | signals = {}
24 | signals["id"] = "ICA"
25 | signals["bufferWindow"] = buffer_window
26 |
27 | # ** FOR RGB CHANNELS & ICA **
28 | one = np.squeeze(np.asarray(ICA[:, 0])).tolist()
29 | two = np.squeeze(np.asarray(ICA[:, 1])).tolist()
30 | three = np.squeeze(np.asarray(ICA[:, 2])).tolist()
31 |
32 | one = (np.hamming(len(one)) * one)
33 | two = (np.hamming(len(two)) * two)
34 | three = (np.hamming(len(three)) * three)
35 |
36 | # print "one: ", one.astype(float).tolist()
37 | # print "two: ", two.astype(float).tolist()
38 | # print "three: ", three.astype(float).tolist()
39 |
40 | one = np.absolute(np.square(np.fft.irfft(one))).astype(float).tolist()
41 | two = np.absolute(np.square(np.fft.irfft(two))).astype(float).tolist()
42 | three = np.absolute(np.square(np.fft.irfft(three))).astype(float).tolist()
43 |
44 | power_ratio = [0, 0, 0]
45 | power_ratio[0] = np.sum(one)/np.amax(one)
46 | power_ratio[1] = np.sum(two)/np.amax(two)
47 | power_ratio[2] = np.sum(three)/np.amax(three)
48 |
49 | if np.argmax(power_ratio) == 0:
50 | signals["array"] = one
51 | elif np.argmax(power_ratio) == 1:
52 | signals["array"] = two
53 | else:
54 | signals["array"] = three
55 |
56 | # print power_ratio
57 | # print signals
58 | return signals
59 |
60 | # # ** FOR GREEN CHANNEL ONLY **
61 | # hamming = (np.hamming(len(ICA)) * ICA)
62 | # fft = np.fft.rfft(hamming)
63 | # fft = np.absolute(np.square(fft))
64 | # signals["array"] = fft.astype(float).tolist()
65 |
66 | # return signals
67 |
68 |
69 | # ** experiments **
70 | # ** for interpolation and hamming **
71 | # even_times = np.linspace(time[0], time[-1], len(time))
72 | # interpolated_two = np.interp(even_times, time, np.squeeze(np.asarray(ICA[:, 1])).tolist())
73 | # interpolated_two = np.hamming(len(time)) * interpolated_two
74 | # interpolated_two = interpolated_two - np.mean(interpolated_two)
75 |
76 | # signals["two"] = interpolated_two.tolist()
77 |
78 | # #fft = np.fft.rfft(np.squeeze(np.asarray(ICA[:, 1])))
79 | # #signals["two"] = fft.astype(float).tolist()
80 |
81 |
82 | def normalize_matrix(matrix):
83 | # ** for matrix
84 | for array in matrix:
85 | average_of_array = np.mean(array)
86 | std_dev = np.std(array)
87 |
88 | for i in range(len(array)):
89 | array[i] = ((array[i] - average_of_array)/std_dev)
90 | return matrix
91 |
92 | def normalize_array(array):
93 | #** for array
94 | average_of_array = np.mean(array)
95 | std_dev = np.std(array)
96 |
97 | for i in range(len(array)):
98 | array[i] = ((array[i] - average_of_array)/std_dev)
99 | return array
--------------------------------------------------------------------------------
/static/css/rickshaw.min.css:
--------------------------------------------------------------------------------
1 | rickshaw_graph .detail{pointer-events:none;position:absolute;top:0;z-index:2;background:rgba(0,0,0,.1);bottom:0;width:1px;transition:opacity .25s linear;-moz-transition:opacity .25s linear;-o-transition:opacity .25s linear;-webkit-transition:opacity .25s linear}.rickshaw_graph .detail.inactive{opacity:0}.rickshaw_graph .detail .item.active{opacity:1}.rickshaw_graph .detail .x_label{font-family:Arial,sans-serif;border-radius:3px;padding:6px;opacity:.5;border:1px solid #e0e0e0;font-size:12px;position:absolute;background:#fff;white-space:nowrap}.rickshaw_graph .detail .x_label.left{left:0}.rickshaw_graph .detail .x_label.right{right:0}.rickshaw_graph .detail .item{position:absolute;z-index:2;border-radius:3px;padding:.25em;font-size:12px;font-family:Arial,sans-serif;opacity:0;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(0,0,0,.4);margin-left:1em;margin-right:1em;margin-top:-1em;white-space:nowrap}.rickshaw_graph .detail .item.left{left:0}.rickshaw_graph .detail .item.right{right:0}.rickshaw_graph .detail .item.active{opacity:1;background:rgba(0,0,0,.8)}.rickshaw_graph .detail .item:after{position:absolute;display:block;width:0;height:0;content:"";border:5px solid transparent}.rickshaw_graph .detail .item.left:after{top:1em;left:-5px;margin-top:-5px;border-right-color:rgba(0,0,0,.8);border-left-width:0}.rickshaw_graph .detail .item.right:after{top:1em;right:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,.8);border-right-width:0}.rickshaw_graph .detail .dot{width:4px;height:4px;margin-left:-2px;margin-top:-2px;border-radius:5px;position:absolute;box-shadow:0 0 2px rgba(0,0,0,.6);background:#fff;border-width:2px;border-style:solid;display:none;background-clip:padding-box}.rickshaw_graph .detail .dot.active{display:block}.rickshaw_graph{position:relative}.rickshaw_graph svg{display:block;overflow:hidden}.rickshaw_graph .x_tick{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted rgba(0,0,0,.2);pointer-events:none}.rickshaw_graph .x_tick .title{position:absolute;font-size:12px;font-family:Arial,sans-serif;opacity:.5;white-space:nowrap;margin-left:3px;bottom:1px}.rickshaw_annotation_timeline{height:1px;border-top:1px solid #e0e0e0;margin-top:10px;position:relative}.rickshaw_annotation_timeline .annotation{position:absolute;height:6px;width:6px;margin-left:-2px;top:-3px;border-radius:5px;background-color:rgba(0,0,0,.25)}.rickshaw_graph .annotation_line{position:absolute;top:0;bottom:-6px;width:0;border-left:2px solid rgba(0,0,0,.3);display:none}.rickshaw_graph .annotation_line.active{display:block}.rickshaw_graph .annotation_range{background:rgba(0,0,0,.1);display:none;position:absolute;top:0;bottom:-6px}.rickshaw_graph .annotation_range.active{display:block}.rickshaw_graph .annotation_range.active.offscreen{display:none}.rickshaw_annotation_timeline .annotation .content{background:#fff;color:#000;opacity:.9;padding:5px;box-shadow:0 0 2px rgba(0,0,0,.8);border-radius:3px;position:relative;z-index:20;font-size:12px;padding:6px 8px 8px;top:18px;left:-11px;width:160px;display:none;cursor:pointer}.rickshaw_annotation_timeline .annotation .content:before{content:"\25b2";position:absolute;top:-11px;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.8)}.rickshaw_annotation_timeline .annotation.active,.rickshaw_annotation_timeline .annotation:hover{background-color:rgba(0,0,0,.8);cursor:none}.rickshaw_annotation_timeline .annotation .content:hover{z-index:50}.rickshaw_annotation_timeline .annotation.active .content{display:block}.rickshaw_annotation_timeline .annotation:hover .content{display:block;z-index:50}.rickshaw_graph .y_axis,.rickshaw_graph .x_axis_d3{fill:none}.rickshaw_graph .y_ticks .tick,.rickshaw_graph .x_ticks_d3 .tick{stroke:rgba(0,0,0,.16);stroke-width:2px;shape-rendering:crisp-edges;pointer-events:none}.rickshaw_graph .y_grid .tick,.rickshaw_graph .x_grid_d3 .tick{z-index:-1;stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:1 1}.rickshaw_graph .y_grid path,.rickshaw_graph .x_grid_d3 path{fill:none;stroke:none}.rickshaw_graph .y_ticks path,.rickshaw_graph .x_ticks_d3 path{fill:none;stroke:gray}.rickshaw_graph .y_ticks text,.rickshaw_graph .x_ticks_d3 text{opacity:.5;font-size:12px;pointer-events:none}.rickshaw_graph .x_tick.glow .title,.rickshaw_graph .y_ticks.glow text{fill:#000;color:#000;text-shadow:-1px 1px 0 rgba(255,255,255,.1),1px -1px 0 rgba(255,255,255,.1),1px 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(255,255,255,.1),1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1),-1px -1px 0 rgba(255,255,255,.1)}.rickshaw_graph .x_tick.inverse .title,.rickshaw_graph .y_ticks.inverse text{fill:#fff;color:#fff;text-shadow:-1px 1px 0 rgba(0,0,0,.8),1px -1px 0 rgba(0,0,0,.8),1px 1px 0 rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.8),0 -1px 0 rgba(0,0,0,.8),1px 0 0 rgba(0,0,0,.8),-1px 0 0 rgba(0,0,0,.8),-1px -1px 0 rgba(0,0,0,.8)}.rickshaw_legend{font-family:Arial;font-size:12px;color:#fff;background:#404040;display:inline-block;padding:12px 5px;border-radius:2px;position:relative}.rickshaw_legend:hover{z-index:10}.rickshaw_legend .swatch{width:10px;height:10px;border:1px solid rgba(0,0,0,.2)}.rickshaw_legend .line{clear:both;line-height:140%;padding-right:15px}.rickshaw_legend .line .swatch{display:inline-block;margin-right:3px;border-radius:2px}.rickshaw_legend .label{margin:0;white-space:nowrap;display:inline;font-size:inherit;background-color:transparent;color:inherit;font-weight:400;line-height:normal;padding:0;text-shadow:none}.rickshaw_legend .action:hover{opacity:.6}.rickshaw_legend .action{margin-right:.2em;font-size:10px;opacity:.2;cursor:pointer;font-size:14px}.rickshaw_legend .line.disabled{opacity:.4}.rickshaw_legend ul{list-style-type:none;margin:0;padding:0;margin:2px;cursor:pointer}.rickshaw_legend li{padding:0 0 0 2px;min-width:80px;white-space:nowrap}.rickshaw_legend li:hover{background:rgba(255,255,255,.08);border-radius:3px}.rickshaw_legend li:active{background:rgba(255,255,255,.2);border-radius:3px}
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### NOTE: This project is no longer maintained -- it was a code school project from several years ago. As of 7/2017 I am on a one year travel haitus and am slowly (while on trains planes and in automobiles) dragging this project into a frontend and node backend module that can be applied to any project your heart desires. I will ignore any tickets opened on *this* repo, but feel free to fork (keep the license in mind, please) and have a good time with this for now.
2 |
3 |
4 | Pulse
5 | ===========
6 |
7 | Pulse is a browser-based, non-contact heartrate detection application. It can derive a heartrate in thirty seconds or less, requiring only a browser and a webcam. Based on recent research in photoplethysmography and signal processing, the heartbeat is derived from minuscule changes in pixels over time.
8 |
9 | [Play with Pulse online!](http://pulsation.herokuapp.com) (only in Chrome)
10 |
11 | Pulse is based on techniques outlined in ["Non-contact, automated cardiac pulse measurements using video imaging and blind source separation"](http://www.opticsinfobase.org/oe/abstract.cfm?uri=oe-18-10-10762) by Poh, et al (2010) and work by @thearn with OpenCV and Python ([webcam-pulse-detector](https://github.com/thearn/webcam-pulse-detector)).
12 |
13 | Pulse works because changes in blood volume in the face during the cardiac cycle modify the amount of ambient light reflected by the blood vessels. This change in brightness can be picked up as a periodic signal by a webcam. It is most prominent in the green channel, but using independent component analysis (ICA), an even more prominent signal can be extracted from a combination of the red, blue, and green channels.
14 |
15 | The process blog for this project is here: [Camille Codes](http://camillecodes.tumblr.com)
16 |
17 | Click through for more detailed explanations of the process and technology.
18 |
19 | 
20 |
21 | ### Usage
22 |
23 | #### Installation
24 | recommended to use a virtual environment. If that's not your style-- the dependencies are in `requirements.txt`
25 |
26 | ```
27 | virtualenv env
28 | source ./env/bin/activate
29 | pip install -r requirements.txt
30 | ```
31 |
32 | I had some issues with NumPy installing most recently on OSX 10.9, suppressing clang errors helped:
33 |
34 | ```
35 | export CFLAGS=-Qunused-arguments
36 | export CPPFLAGS=-Qunused-arguments
37 | ```
38 |
39 | #### Run
40 | ```
41 | ./deploy.sh
42 | ```
43 |
44 | Pulse will be running at `http://localhost:8000`
45 |
46 | ### Technology
47 |
48 | ##### Short Roundup
49 |
50 | Facial recognition, pixel manipulation, and some frequency extraction are done in Javascript, and there is a Python backend for Independent Component Analysis (JADE algorithm) and Fast Fourier Transform. This project runs on Javascript, HTML5 Canvas, and WebRTC, Python ( & NumPy), D3js, Rickshaw, with a splash of Flask, web sockets, and Jinja.
51 |
52 | 
53 |
54 |
55 | ##### Detailed Explanation
56 |
57 | Pulse brings in the webcam from the user with getUserMedia and draws it on the canvas at 15 frames a second. It then looks for a face and begins tracking the head with headtrackr.js (uses the Viola-Jones algorithm). A region of interest (ROI) is selected from the forehead hased on the tracked head area. For each frame, the red, blue, and green values for the ROI are extracted from the canvas and averaged for the ROI. This average value for each channel is put into a time series array and sent via websocket (flask_sockets) to a python server.
58 |
59 | On the server the data is normalized and run though independent component analysis (JADE algorithm) to isolate the heartbeat from the three signals. Since the order of the independent components is arbitrary, using NumPy a Fast Fourier Transform is applied to each one and the resulting spectrum is filtered by the power density ratio. The component with the highest ratio is selected as the most likely to contain a heartbeat and passed back to the browser via the websocket.
60 |
61 | This happens fifteen times a second, but back on the browser, the heartrate is calculated from this information once a second.
62 |
63 | The data is filtered between 0.8 - 3.0 Hz (48 - 180 BPM), and the frequency bins calculated to determine which frequency in the FFT spectrum has the greatest power. This frequency at the greatest power is assumed to be the frequency of the heartrate and is multiplied by 60. This is the number that is printed to the screen within the pulsing circle.
64 |
65 | An average of the previous five calculated heartbeats (over five seconds) is taken and it is at that frequency that the circle pulses.
66 |
67 | The graph on the left of the screen (built with Rickshaw) is the raw feed of data from the forehead and represents changes in brightness in the green channel (where the photoplethysmographic signal is strongest) over time.
68 |
69 | The graph on the right (build with D3) titled "Confidence in frequency in BPM" is the result of the FFT function (confidence) graphed against the frequency bins represented in that result (frequency). The higher the peak, the more likely the heartbeat is at that frequency. In the graph you can see periodic noise, but also a very satisfying "settling" as the program finds a heartrate and stays there.
70 |
71 | ### Structure
72 | ####(camera.js)
73 | The meat of the program is here. It intitializes camera, canvas, and headtracking and extracts the RGB channels from the ROI. It averages them and sends them to the Python server, and when the data is returned to the browser, it uses functions from (mathmatical.js) to filter and extract frequencies. It also initializes and times the graphing of the final data.
74 |
75 | ####(mathmatical.js)
76 | Some functions for signal processing and math used by (camera.js).
77 |
78 | ####(model.py)
79 | Data is normalized, run through ICA (jade.py) and FFT and filtered by the power density ratio.
80 |
81 |
82 | 
83 |
84 |
85 | ####Pulse is supported by:
86 |
87 | [Headtrackr.js](https://github.com/auduno/headtrackr/) is currently doing the heavy lifting for the facetracking.
88 |
89 | [underscore.js](https://github.com/jashkenas/underscore) is helping with some of the utilities needed for computation.
90 |
91 | [D3.js](https://d3js.org)
92 |
93 | [Rickshaw](https://github.com/shutterstock/rickshaw)
94 |
95 | [flask_sockets](https://github.com/kennethreitz/flask-sockets)
96 |
--------------------------------------------------------------------------------
/static/css/main.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: "helvetica neue", helvetica, sans-serif;
3 | font-size: 12px;
4 | background-color: #E1F1F1;
5 | }
6 |
7 | @font-face {
8 | font-family: "BlurBold";
9 | src: local("BlurBold"),
10 | local("Blur Bold"),
11 | url(BlurBold.otf);
12 | /*font-weight: bold;*/
13 | }
14 |
15 | @font-face {
16 | font-family: "BlurMedium";
17 | src: local("BlurMedium"),
18 | local("Blur Medium"),
19 | url(BlurMedium.otf);
20 | }
21 |
22 | @font-face {
23 | font-family: "Hero Light";
24 | src: local("Hero Light"),
25 | local("HeroLight"),
26 | url(HeroLight.otf);
27 | }
28 | @font-face {
29 | font-family: "Hero";
30 | src: local("Hero"),
31 | local("Hero"),
32 | url(Hero.otf);
33 | }
34 |
35 | /* ------- index.html ------- */
36 | /* ## VIDEO ## */
37 |
38 | #vid {
39 | clear: both;
40 | display:block;
41 | margin: auto;
42 | position: relative;
43 | width: 380px;
44 | height: 285px;
45 | padding: 0 0 35px 0;
46 | }
47 |
48 | #canvas {
49 | position: relative;
50 | display: inline-block;
51 | width: 380px;
52 | height: 285px;
53 | }
54 |
55 | .center {
56 | margin: auto;
57 | position: relative;
58 | }
59 |
60 | .clear {
61 | margin: 0;
62 | }
63 |
64 | #canvasOverlay {
65 | position: absolute;
66 | top: 0px;
67 | z-index: 100001;
68 | display: block;
69 | }
70 |
71 | .blur {
72 | filter: blur(10px);
73 | -webkit-filter: blur(10px);
74 | -o-filter: blur(10px);
75 | -ms-filter: blur(10px);
76 | -moz-filter: blur(10px);
77 | filter: url(blur.xml#blurred);
78 | }
79 |
80 | .border{
81 | /* width: 460px;
82 | height: 340px;
83 | border: 42px solid #E1F1F1;
84 | z-index: 1001;
85 | right: -30px;
86 | top: -30px;
87 | position: absolute;*/
88 | width: 360px;
89 | height: 270px;
90 | border: 37px solid #E1F1F1;
91 | z-index: 1;
92 | right: -30px;
93 | top: -30px;
94 | position: absolute;
95 | }
96 |
97 | #border{
98 | position: absolute;
99 | }
100 |
101 | /* ## BUTTON ## */
102 |
103 | button {
104 | width: 120px;
105 | display: inline-block;
106 | height: 50px;
107 | text-align: center;
108 | background-color: #2B8A81;
109 | border: none;
110 | font-size: 1em;
111 | float: left;
112 | margin: 2px;
113 | color: white;
114 | }
115 |
116 | button:hover {
117 | background-color: #DA755C;
118 | }
119 | button:visited, button:active{
120 | background-color: #44A39D;
121 | }
122 |
123 | .active {
124 | background-color: #DA755C;
125 | }
126 |
127 | #buttonBar{
128 | width: 385px;
129 | margin: auto;
130 | z-index: 10002;
131 | position: relative;
132 | right: -9px;
133 |
134 | }
135 |
136 | /* ## GRAPHS ## */
137 |
138 | #graphs {
139 | position: relative;
140 | top: -200px;
141 | z-index: -1;
142 | /*width: 1300px;*/
143 | width: 95%;
144 | margin: auto;
145 | height: 200px;
146 | }
147 | #confidenceGraph {
148 | width: 600px;
149 | height: 160px;
150 | margin: 20px;
151 | }
152 |
153 | .graph {
154 | float: left;
155 | margin: 20px;
156 | }
157 |
158 | #confidenceGraph {
159 | float: left;
160 | }
161 |
162 | #heartbeat {
163 | height: 400px;
164 | width: 400px;
165 | position: relative;
166 | top: -400px;
167 | left: 8%;
168 | z-index: -1;
169 | }
170 |
171 | path {
172 | stroke: steelblue;
173 | stroke-width: 2;
174 | fill: none;
175 | }
176 |
177 | #rawDataLabel {
178 | font-size: 12pt;
179 | color: steelblue;
180 | position: relative;
181 | /* top: -75px;
182 | float: left;
183 | right: -20px;*/
184 | display: none;
185 | right: 625px;
186 | top: 175px;
187 | }
188 |
189 | .axis {
190 | shape-rendering: crispEdges;
191 | }
192 |
193 | .x.axis .minor {
194 | stroke-opacity: .5;
195 | }
196 |
197 | .x.axis path {
198 | display: none;
199 | }
200 |
201 | /* ------- splash.html ------- */
202 | /* ## SPLASH PAGE ## */
203 |
204 | h1 {
205 | font-family: "BlurBold", "Chango", sans-serif;
206 | font-weight: normal;
207 | font-size: 13em;
208 | color: #8FA1A3;
209 | letter-spacing: .05em;
210 | }
211 |
212 | h2 {
213 | font-family: "Hero Light", Helvetica, sans-serif;
214 | font-size: 2.3em;
215 | color: #0E0C09;
216 | letter-spacing: .05em;
217 | }
218 |
219 | a {
220 | text-decoration: none;
221 | color: inherit;
222 | }
223 |
224 | a:hover {
225 | background-color: #2B8A81;
226 | color: #E1F1F1;
227 | }
228 |
229 | #container {
230 | width: 600px;
231 | margin: 0 auto;
232 | display:block;
233 |
234 | }
235 |
236 | #transparentPulse{
237 | z-index: 10001;
238 |
239 | }
240 |
241 | #overlay {
242 | position: absolute;
243 | top: 150px;
244 | width: 600px;
245 | height: 300px;
246 | z-index: 101;
247 |
248 | }
249 |
250 | .begin {
251 | position: relative;
252 | margin: 0 auto;
253 | top: 100px;
254 | width: 150px;
255 | padding: 20px;
256 | z-index: 1001;
257 |
258 | }
259 |
260 | #hidden {
261 | float: right;
262 | margin: 0 60px 0 0;
263 | /*display: none;*/
264 |
265 | }
266 |
267 | .hide {
268 | display: none;
269 | }
270 |
271 | #arrow {
272 | margin: 50px 0;
273 | width: 0;
274 | height: 0;
275 | border-top: 200px solid #66A18B;
276 | border-left: 200px solid transparent;
277 | /*-webkit-transform: rotate(-45deg);
278 | -moz-transform: rotate(-45deg);
279 | -ms-transform: rotate(-45deg);
280 | -o-transform: rotate(-45deg);*/
281 | position: relative;
282 | display: block;
283 | }
284 |
285 | #arrow:after {
286 | display: block;
287 | width: 180px;
288 | height: 180px;
289 | background: #66A18B;
290 | position: absolute;
291 | content: "";
292 | top: -130px;
293 | left: -250px;
294 | -webkit-transform: rotate(-45deg);
295 | -moz-transform: rotate(-45deg);
296 | -ms-transform: rotate(-45deg);
297 | -o-transform: rotate(-45deg);
298 | }
299 |
300 | #allowWebcam {
301 | top: -40px;
302 | right: 100px;
303 | position: relative;
304 | /*display: none;*/
305 | }
306 |
307 | #pulse {
308 | position: relative;
309 | top: 100px;
310 | }
311 |
312 | /* ## SPLASH PAGE GRAPH ## */
313 | #graph {
314 | width: 600px;
315 | height: 210px;
316 | position: relative;
317 | top: 180px;
318 | /*top: -260px;*/
319 | z-index: -1;
320 | background-color: #DA755C;
321 | }
322 | .waveform {
323 | fill: none;
324 | stroke: white;
325 | stroke-width: 1.5px;
326 | }
327 |
328 | /* ## CSS Animations ##
329 | borrowed with love from: http://www.justinaguilar.com/animations/
330 | */
331 |
332 | .pulse {
333 | animation-name: pulse;
334 | -webkit-animation-name: pulse;
335 |
336 | animation-duration: 1.5s;
337 | -webkit-animation-duration: 1.5s;
338 |
339 | animation-iteration-count: infinite;
340 | -webkit-animation-iteration-count: infinite;
341 | }
342 |
343 | @keyframes pulse {
344 | 0% {
345 | transform: scale(0.9);
346 | opacity: 0.7;
347 | }
348 | 50% {
349 | transform: scale(1);
350 | opacity: 1;
351 | }
352 | 100% {
353 | transform: scale(0.9);
354 | opacity: 0.7;
355 | }
356 | }
357 |
358 | @-webkit-keyframes pulse {
359 | 0% {
360 | -webkit-transform: scale(0.95);
361 | opacity: 0.7;
362 | }
363 | 50% {
364 | -webkit-transform: scale(1);
365 | opacity: 1;
366 | }
367 | 100% {
368 | -webkit-transform: scale(0.95);
369 | opacity: 0.7;
370 | }
371 | }
372 |
373 |
374 | /* ## INSTRUCTIONS ## */
375 |
376 | #introduction {
377 | display: none;
378 | background-color: rgba( 225, 241, 241, 0.75);
379 | width: 550px;
380 | height: 400px;
381 | z-index: 1002;
382 | position: relative;
383 | margin: auto;
384 | top: -150px;
385 | padding: 25px;
386 | }
387 |
388 | h3 {
389 | font-family: "Hero Light", Helvetica, sans-serif;
390 | font-size: 2.3em;
391 | /*color: #0E0C09;*/
392 | color: #3E3D45;
393 | line-height: 1.12em;
394 | }
395 |
396 | .num {
397 | font-family: "BlurMedium", "Chango", sans-serif;
398 | border-radius: 50%;
399 | padding: 10px 20px 10px 20px;
400 | background-color: #44A39D;
401 | text-align: center;
402 | color: #E1F1F1;
403 | width: 10px;
404 | height: 10px;
405 | }
406 |
407 | #next, #skip {
408 | font-family: "Hero", Helvetica, sans-serif;
409 | font-size: 1.5em;
410 | color: #3E3D45;
411 | padding: 10px;
412 | position: absolute;
413 | bottom: 0;
414 | }
415 |
416 | #next:hover, #skip:hover {
417 | background-color: #2B8A81;
418 | color: #E1F1F1;
419 | }
420 |
421 | #next {
422 | left: 525px;
423 | }
424 |
425 | .bold {
426 | font-family: "Hero", Helvetica, sans-serif;
427 | }
428 |
429 | .blurFont {
430 | font-family: "BlurMedium", "Chango", sans-serif;
431 | }
432 |
--------------------------------------------------------------------------------
/templates/splash.html:
--------------------------------------------------------------------------------
1 | {% extends "master.html" %}
2 | {% block body %}
3 |
15 |
16 |
17 |
77 |
271 | {% endblock %}
--------------------------------------------------------------------------------
/static/js/underscore-min.js:
--------------------------------------------------------------------------------
1 | // Underscore.js 1.5.2
2 | // http://underscorejs.org
3 | // (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
4 | // Underscore may be freely distributed under the MIT license.
5 | (function(){var n=this,t=n._,r={},e=Array.prototype,u=Object.prototype,i=Function.prototype,a=e.push,o=e.slice,c=e.concat,l=u.toString,f=u.hasOwnProperty,s=e.forEach,p=e.map,h=e.reduce,v=e.reduceRight,g=e.filter,d=e.every,m=e.some,y=e.indexOf,b=e.lastIndexOf,x=Array.isArray,w=Object.keys,_=i.bind,j=function(n){return n instanceof j?n:this instanceof j?(this._wrapped=n,void 0):new j(n)};"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=j),exports._=j):n._=j,j.VERSION="1.5.2";var A=j.each=j.forEach=function(n,t,e){if(null!=n)if(s&&n.forEach===s)n.forEach(t,e);else if(n.length===+n.length){for(var u=0,i=n.length;i>u;u++)if(t.call(e,n[u],u,n)===r)return}else for(var a=j.keys(n),u=0,i=a.length;i>u;u++)if(t.call(e,n[a[u]],a[u],n)===r)return};j.map=j.collect=function(n,t,r){var e=[];return null==n?e:p&&n.map===p?n.map(t,r):(A(n,function(n,u,i){e.push(t.call(r,n,u,i))}),e)};var E="Reduce of empty array with no initial value";j.reduce=j.foldl=j.inject=function(n,t,r,e){var u=arguments.length>2;if(null==n&&(n=[]),h&&n.reduce===h)return e&&(t=j.bind(t,e)),u?n.reduce(t,r):n.reduce(t);if(A(n,function(n,i,a){u?r=t.call(e,r,n,i,a):(r=n,u=!0)}),!u)throw new TypeError(E);return r},j.reduceRight=j.foldr=function(n,t,r,e){var u=arguments.length>2;if(null==n&&(n=[]),v&&n.reduceRight===v)return e&&(t=j.bind(t,e)),u?n.reduceRight(t,r):n.reduceRight(t);var i=n.length;if(i!==+i){var a=j.keys(n);i=a.length}if(A(n,function(o,c,l){c=a?a[--i]:--i,u?r=t.call(e,r,n[c],c,l):(r=n[c],u=!0)}),!u)throw new TypeError(E);return r},j.find=j.detect=function(n,t,r){var e;return O(n,function(n,u,i){return t.call(r,n,u,i)?(e=n,!0):void 0}),e},j.filter=j.select=function(n,t,r){var e=[];return null==n?e:g&&n.filter===g?n.filter(t,r):(A(n,function(n,u,i){t.call(r,n,u,i)&&e.push(n)}),e)},j.reject=function(n,t,r){return j.filter(n,function(n,e,u){return!t.call(r,n,e,u)},r)},j.every=j.all=function(n,t,e){t||(t=j.identity);var u=!0;return null==n?u:d&&n.every===d?n.every(t,e):(A(n,function(n,i,a){return(u=u&&t.call(e,n,i,a))?void 0:r}),!!u)};var O=j.some=j.any=function(n,t,e){t||(t=j.identity);var u=!1;return null==n?u:m&&n.some===m?n.some(t,e):(A(n,function(n,i,a){return u||(u=t.call(e,n,i,a))?r:void 0}),!!u)};j.contains=j.include=function(n,t){return null==n?!1:y&&n.indexOf===y?n.indexOf(t)!=-1:O(n,function(n){return n===t})},j.invoke=function(n,t){var r=o.call(arguments,2),e=j.isFunction(t);return j.map(n,function(n){return(e?t:n[t]).apply(n,r)})},j.pluck=function(n,t){return j.map(n,function(n){return n[t]})},j.where=function(n,t,r){return j.isEmpty(t)?r?void 0:[]:j[r?"find":"filter"](n,function(n){for(var r in t)if(t[r]!==n[r])return!1;return!0})},j.findWhere=function(n,t){return j.where(n,t,!0)},j.max=function(n,t,r){if(!t&&j.isArray(n)&&n[0]===+n[0]&&n.length<65535)return Math.max.apply(Math,n);if(!t&&j.isEmpty(n))return-1/0;var e={computed:-1/0,value:-1/0};return A(n,function(n,u,i){var a=t?t.call(r,n,u,i):n;a>e.computed&&(e={value:n,computed:a})}),e.value},j.min=function(n,t,r){if(!t&&j.isArray(n)&&n[0]===+n[0]&&n.length<65535)return Math.min.apply(Math,n);if(!t&&j.isEmpty(n))return 1/0;var e={computed:1/0,value:1/0};return A(n,function(n,u,i){var a=t?t.call(r,n,u,i):n;a
29 |
30 |
32 |
33 |
34 | Change in brightness (raw video data)
31 |
5 |
6 |
7 |