405 lines
9.1 KiB
PHP
405 lines
9.1 KiB
PHP
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Results of analysis: The Black Box Concern</title>
|
||
|
|
<script type="text/javascript" src="lodash.core.min.js"></script>
|
||
|
|
<script type="text/javascript" src="plotly-1.31.2.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var d1 = <?php echo require "output/talk1.json" ?>;
|
||
|
|
var d2 = <?php echo require "output/talk2.json" ?>;
|
||
|
|
var d3 = <?php echo require "output/talk3.json" ?>;
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
body{
|
||
|
|
font-family: sans-serif;
|
||
|
|
width:calc(100% - 10em);
|
||
|
|
margin-left:10%;
|
||
|
|
margin-right:0;
|
||
|
|
}
|
||
|
|
#scroller{
|
||
|
|
width:100%;
|
||
|
|
overflow-x:auto;
|
||
|
|
}
|
||
|
|
#presentations{
|
||
|
|
width:300%;
|
||
|
|
}
|
||
|
|
#presentations .presentation{
|
||
|
|
width:33%;
|
||
|
|
float:left;
|
||
|
|
}
|
||
|
|
#presentations .presentation div.plot{
|
||
|
|
width:100%;
|
||
|
|
height:10em;
|
||
|
|
}
|
||
|
|
#checkboxes{
|
||
|
|
font-size: .8em;
|
||
|
|
width: 10em;
|
||
|
|
position:absolute;
|
||
|
|
left:0;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
label{
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
#checkboxes span{
|
||
|
|
color: gray;
|
||
|
|
}
|
||
|
|
#checkboxes :checked + span{
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
#imgwrap{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#imgwrap img{
|
||
|
|
width:90%;
|
||
|
|
}
|
||
|
|
h1{
|
||
|
|
margin: .1em 0;
|
||
|
|
text-transform:uppercase;
|
||
|
|
height:.9em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="checkboxes">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="scroller">
|
||
|
|
<div id='presentations'>
|
||
|
|
<div class='presentation'>
|
||
|
|
<h1>Orit Halpern</h1>
|
||
|
|
<div class='stats' id='plot1-stats'></div>
|
||
|
|
<div class='plot' id="plot1-div"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class='presentation'>
|
||
|
|
<h1>Penousal Machado</h1>
|
||
|
|
<div class='stats' id='plot2-stats'></div>
|
||
|
|
<div class='plot' id="plot2-div"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class='presentation'>
|
||
|
|
<h1>Nicolas Maigret</h1>
|
||
|
|
<div class='stats' id='plot3-stats'></div>
|
||
|
|
<div class='plot' id="plot3-div"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id='imgwrap'>
|
||
|
|
<img src="" id="hoverimg">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type='text/javascript'>
|
||
|
|
|
||
|
|
facialParameters = [
|
||
|
|
"smile",
|
||
|
|
"innerBrowRaise",
|
||
|
|
"browRaise",
|
||
|
|
"browFurrow",
|
||
|
|
"noseWrinkle",
|
||
|
|
"upperLipRaise",
|
||
|
|
"lipCornerDepressor",
|
||
|
|
"chinRaise",
|
||
|
|
"lipPucker",
|
||
|
|
"lipPress",
|
||
|
|
"lipSuck",
|
||
|
|
"mouthOpen",
|
||
|
|
"smirk",
|
||
|
|
"eyeClosure",
|
||
|
|
"eyeWiden",
|
||
|
|
"cheekRaise",
|
||
|
|
"lidTighten",
|
||
|
|
"dimpler",
|
||
|
|
"lipStretch",
|
||
|
|
"jawDrop",
|
||
|
|
]
|
||
|
|
defaultFacialParameters = [
|
||
|
|
"smile",
|
||
|
|
"innerBrowRaise",
|
||
|
|
"browRaise",
|
||
|
|
"browFurrow",
|
||
|
|
"noseWrinkle",
|
||
|
|
//~ "upperLipRaise",
|
||
|
|
//~ "lipCornerDepressor",
|
||
|
|
"chinRaise",
|
||
|
|
// "lipPucker",
|
||
|
|
//~ "lipPress",
|
||
|
|
//~ "lipSuck",
|
||
|
|
//~ "mouthOpen",
|
||
|
|
//"smirk",
|
||
|
|
// "attention",
|
||
|
|
//~ "eyeClosure",
|
||
|
|
//~ "eyeWiden",
|
||
|
|
"cheekRaise", //
|
||
|
|
"lidTighten",
|
||
|
|
//~ "dimpler", //
|
||
|
|
//~ "lipStretch",
|
||
|
|
//~ "jawDrop", //
|
||
|
|
];
|
||
|
|
|
||
|
|
function getCheckedParams(){
|
||
|
|
params = [];
|
||
|
|
for(var i in facialParameters){
|
||
|
|
let param = facialParameters[i];
|
||
|
|
if(document.getElementById("check_"+param).checked){
|
||
|
|
params.push(param);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return params;
|
||
|
|
}
|
||
|
|
|
||
|
|
var checkboxWrapperEl = document.getElementById("checkboxes");
|
||
|
|
for(var i in facialParameters){
|
||
|
|
let param = facialParameters[i];
|
||
|
|
var labelEl = document.createElement('label');
|
||
|
|
var checkboxEl = document.createElement('input');
|
||
|
|
var spanEl = document.createElement('span');
|
||
|
|
checkboxEl.type = "checkbox";
|
||
|
|
checkboxEl.checked = defaultFacialParameters.indexOf(param) > -1;
|
||
|
|
checkboxEl.id = "check_"+param;
|
||
|
|
checkboxEl.addEventListener('change',function(a){drawGraphs();});
|
||
|
|
labelEl.appendChild(checkboxEl);
|
||
|
|
|
||
|
|
spanEl.innerHTML = param;
|
||
|
|
labelEl.appendChild(spanEl);
|
||
|
|
|
||
|
|
checkboxWrapperEl.appendChild(labelEl);
|
||
|
|
}
|
||
|
|
|
||
|
|
var imgEl = document.getElementById("hoverimg");
|
||
|
|
var plot1Div = document.getElementById('plot1-div');
|
||
|
|
var plot2Div = document.getElementById('plot2-div');
|
||
|
|
var plot3Div = document.getElementById('plot3-div');
|
||
|
|
|
||
|
|
function drawGraphs(){
|
||
|
|
params = getCheckedParams();
|
||
|
|
drawGraph("talk1", plot1Div, d1, params);
|
||
|
|
drawGraph("talk2", plot2Div, d2, params);
|
||
|
|
drawGraph("talk3", plot3Div, d3, params);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function drawGraph(id, targetEl, d, params) {
|
||
|
|
|
||
|
|
var data = [
|
||
|
|
/* {
|
||
|
|
name: "Mean",
|
||
|
|
x: d['windows'].map(function(w){return w['start'];}),
|
||
|
|
y: d['windows'].map(function(w){return _.mean(_.filter(w['params'], function(v, param){return params.indexOf(param) > -1}));}),
|
||
|
|
//~ error_y: {
|
||
|
|
//~ type: 'data',
|
||
|
|
//~ array: d['windows'].map(function(w){return w['stddev'];}),
|
||
|
|
//~ visible: true
|
||
|
|
//~ },
|
||
|
|
type: 'scatter',
|
||
|
|
line: {
|
||
|
|
//~ color: 'rgb(55, 128, 191)',
|
||
|
|
width: 5
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
var avgV = {};
|
||
|
|
for(var i in params){
|
||
|
|
param = params[i];
|
||
|
|
paramValues = d['windows'].map(function(w){return w['params'][param];});
|
||
|
|
data.push({
|
||
|
|
name: param,
|
||
|
|
x: d['windows'].map(function(w){return w['start'];}),
|
||
|
|
y: paramValues,
|
||
|
|
type: 'scatter',
|
||
|
|
});
|
||
|
|
avgV[param] = _.mean(paramValues);
|
||
|
|
}
|
||
|
|
|
||
|
|
var devFunction = function(w){
|
||
|
|
let dev = 0;
|
||
|
|
for(var i in params){
|
||
|
|
let param = params[i];
|
||
|
|
dev += Math.pow(avgV[param] - w['params'][param], 2);
|
||
|
|
}
|
||
|
|
return Math.sqrt(dev);
|
||
|
|
};
|
||
|
|
data.push({
|
||
|
|
name: "Deviation",
|
||
|
|
x: d['windows'].map(function(w){return w['start'];}),
|
||
|
|
y: d['windows'].map(devFunction),
|
||
|
|
//~ error_y: {
|
||
|
|
//~ type: 'data',
|
||
|
|
//~ array: d['windows'].map(function(w){return w['stddev'];}),
|
||
|
|
//~ visible: true,
|
||
|
|
//~ color: '#f00'
|
||
|
|
//~ },
|
||
|
|
type: 'scatter',
|
||
|
|
line: {
|
||
|
|
color: '#800080',
|
||
|
|
width: 5
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
valFun = function(w){return w['params']['smile'] - (w['params']["innerBrowRaise"]+ w['params']["browFurrow"]+ w['params']["noseWrinkle"]+ w['params']["upperLipRaise"]+ w['params']["lipCornerDepressor"]+ w['params']["chinRaise"]+ w['params']["lipPress"]+ w['params']["lipSuck"])/8;};
|
||
|
|
|
||
|
|
var posWindow = _.maxBy(d['windows'], valFun);
|
||
|
|
var negWindow = _.minBy(d['windows'], valFun);
|
||
|
|
var devWindow = _.maxBy(d['windows'], devFunction);
|
||
|
|
var avgWindow = _.minBy(d['windows'], devFunction);
|
||
|
|
var diffWindow = _.maxBy(d['windows'], function(w){return w['stddev'];});
|
||
|
|
var concensusWindow = _.minBy(d['windows'], function(w){return w['stddev'];});
|
||
|
|
|
||
|
|
var annotations = [
|
||
|
|
//~ {
|
||
|
|
//~ x: posWindow['start'],
|
||
|
|
//~ y: posWindow['params']['smile'],
|
||
|
|
//~ xref: 'x',
|
||
|
|
//~ yref: 'y',
|
||
|
|
//~ text: 'Most positive moment',
|
||
|
|
//~ font: {color: 'gray'},
|
||
|
|
//~ showarrow: true,
|
||
|
|
//~ arrowhead: 7,
|
||
|
|
//~ ax: 0,
|
||
|
|
//~ ay: -40
|
||
|
|
//~ },
|
||
|
|
//~ {
|
||
|
|
//~ x: negWindow['start'],
|
||
|
|
//~ y: _.max([negWindow['params']["innerBrowRaise"], negWindow['params']["browFurrow"], negWindow['params']["noseWrinkle"], negWindow['params']["upperLipRaise"], negWindow['params']["lipCornerDepressor"], negWindow['params']["chinRaise"], negWindow['params']["lipPress"], negWindow['params']["lipSuck"]]),
|
||
|
|
//~ xref: 'x',
|
||
|
|
//~ yref: 'y',
|
||
|
|
//~ text: 'Most negative moment',
|
||
|
|
//~ font: {color: 'gray'},
|
||
|
|
//~ showarrow: true,
|
||
|
|
//~ arrowhead: 7,
|
||
|
|
//~ ax: 0,
|
||
|
|
//~ ay: -40
|
||
|
|
//~ },
|
||
|
|
{
|
||
|
|
x: devWindow['start'],
|
||
|
|
y: devFunction(devWindow),
|
||
|
|
xref: 'x',
|
||
|
|
yref: 'y',
|
||
|
|
text: 'Most deviant moment',
|
||
|
|
font: {color: 'gray'},
|
||
|
|
showarrow: true,
|
||
|
|
arrowhead: 7,
|
||
|
|
ax: 0,
|
||
|
|
ay: -40
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: avgWindow['start'],
|
||
|
|
y: devFunction(avgWindow),
|
||
|
|
xref: 'x',
|
||
|
|
yref: 'y',
|
||
|
|
text: 'Most average moment',
|
||
|
|
font: {color: 'gray'},
|
||
|
|
showarrow: true,
|
||
|
|
arrowhead: 7,
|
||
|
|
ax: 0,
|
||
|
|
ay: -40
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: avgWindow['start'],
|
||
|
|
y: devFunction(avgWindow),
|
||
|
|
xref: 'x',
|
||
|
|
yref: 'y',
|
||
|
|
text: 'Most average moment',
|
||
|
|
font: {color: 'gray'},
|
||
|
|
showarrow: true,
|
||
|
|
arrowhead: 7,
|
||
|
|
ax: 0,
|
||
|
|
ay: -40
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: diffWindow['start'],
|
||
|
|
y: devFunction(diffWindow),
|
||
|
|
xref: 'x',
|
||
|
|
yref: 'y',
|
||
|
|
text: 'Least concensus',
|
||
|
|
font: {color: 'gray'},
|
||
|
|
showarrow: true,
|
||
|
|
arrowhead: 7,
|
||
|
|
ax: 0,
|
||
|
|
ay: -40
|
||
|
|
},
|
||
|
|
{
|
||
|
|
x: concensusWindow['start'],
|
||
|
|
y: devFunction(concensusWindow),
|
||
|
|
xref: 'x',
|
||
|
|
yref: 'y',
|
||
|
|
text: 'Most concensus',
|
||
|
|
font: {color: 'gray'},
|
||
|
|
showarrow: true,
|
||
|
|
arrowhead: 7,
|
||
|
|
ax: 0,
|
||
|
|
ay: -40
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
var layout = {
|
||
|
|
//~ dragmode: 'zoom',
|
||
|
|
|
||
|
|
annotations: annotations,
|
||
|
|
|
||
|
|
//~ boxmode: 'group',
|
||
|
|
margin: {
|
||
|
|
r: 10,
|
||
|
|
t: 10,
|
||
|
|
b: 18,
|
||
|
|
l: 20
|
||
|
|
},
|
||
|
|
showlegend: false,
|
||
|
|
xaxis: {
|
||
|
|
autorange: true,
|
||
|
|
//~ domain: [0, 1],
|
||
|
|
//~ range: ['2017-01-03 12:00', '2017-02-15 12:00'],
|
||
|
|
//~ rangeslider: {range: ['2017-01-03 12:00', '2017-02-15 12:00']},
|
||
|
|
//~ title: 'Date',
|
||
|
|
type: 'date'
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
autorange: true,
|
||
|
|
domain: [0, 1],
|
||
|
|
//~ range: [114.609999778, 137.410004222],
|
||
|
|
type: 'linear'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Plotly.newPlot(targetEl.id, data, layout,{displayModeBar: false});
|
||
|
|
|
||
|
|
//~ targetEl.on('plotly_click', function(data){
|
||
|
|
//~ console.log(data);
|
||
|
|
//~ var pts = '';
|
||
|
|
//~ for(var i=0; i < data.points.length; i++){
|
||
|
|
//~ pts = 'x = '+data.points[i].x +'\ny = '+
|
||
|
|
//~ data.points[i].y.toPrecision(4) + '\n\n';
|
||
|
|
//~ }
|
||
|
|
//~ alert('Closest point clicked:\n\n'+pts);
|
||
|
|
//~ });
|
||
|
|
|
||
|
|
targetEl.on('plotly_hover', function (data){
|
||
|
|
var points = data.points[0],
|
||
|
|
pointNum = points.pointNumber;
|
||
|
|
console.log(pointNum, d['windows'][pointNum]['startFrame'], data);
|
||
|
|
imgEl.src = "/images.php?i="+d['windows'][pointNum]['startFrame']+"¶ms="+params.join() + "&nr=" + d['outputNr'] ;
|
||
|
|
var audio = new Audio('output/'+d['outputNr']+'/'+d['windows'][pointNum]['startFrame']+'.wav');
|
||
|
|
audio.play();
|
||
|
|
//~ Plotly.Fx.hover('plot-div',[
|
||
|
|
//~ { curveNumber:0, pointNumber:pointNum },
|
||
|
|
//~ { curveNumber:1, pointNumber:pointNum },
|
||
|
|
//~ { curveNumber:2, pointNumber:pointNum },
|
||
|
|
//~ ]);
|
||
|
|
});
|
||
|
|
//~ plotDiv.on('plotly_hover', function (eventdata){
|
||
|
|
//~ console.log(data);
|
||
|
|
//~ });
|
||
|
|
}
|
||
|
|
|
||
|
|
drawGraphs();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|