r/moodmeter
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
moodmeter/graphs.php

447 lines
10 KiB
PHP
Raw Normal View History

Version ready for live
2017-12-04 20:47:24 +00:00
<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;
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
width:calc(88%);
margin-left:12%;
Version ready for live
2017-12-04 20:47:24 +00:00
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;
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
width: 13em;
Version ready for live
2017-12-04 20:47:24 +00:00
position:absolute;
left:0;
top:0;
}
label{
display:block;
}
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
.legendColour{
width:1em;
height:1em;
display:inline-block;
float:right;
margin-top:0.6em;
}
Version ready for live
2017-12-04 20:47:24 +00:00
#checkboxes span{
color: gray;
}
#checkboxes :checked + span{
color: black;
}
#imgwrap{
}
#imgwrap img{
width:90%;
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
margin-left:2%;
margin-top:1em;
Version ready for live
2017-12-04 20:47:24 +00:00
}
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", //
];
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
var paramColours = {
"smile":"#FFA500",
"innerBrowRaise":"#FF3300",
"browRaise":"#FF003D",
"browFurrow":"#FF0095",
"noseWrinkle":"#E000FF",
"upperLipRaise":"#9B00FF",
"lipCornerDepressor":"#5800FF",
"chinRaise":"#0053FF",
"lipPucker":"#00C1FF",
"lipPress":"#00FF8C",
"lipSuck":"#0BFF00",
"mouthOpen":"#8CFF00",
"smirk":"#DCFF00",
"eyeClosure":"#A3841A",
"eyeWiden":"#852D0C",
"cheekRaise":"#850C3B",
"lidTighten":"#301271",
"dimpler":"#214761",
"lipStretch":"#216156",
"jawDrop":"#326121",
}
Version ready for live
2017-12-04 20:47:24 +00:00
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);
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
var spanColourEl = document.createElement('span');
spanColourEl.style.background = paramColours[param];
spanColourEl.innerHTML = "&nbsp;";
spanColourEl.classList.add('legendColour');
labelEl.appendChild(spanColourEl);
Version ready for live
2017-12-04 20:47:24 +00:00
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',
Styling changes and added new annotations
2017-12-04 21:01:15 +00:00
line: {
color: paramColours[param],
width: 1.5
}
Version ready for live
2017-12-04 20:47:24 +00:00
});
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']+"&params="+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>
Reference in a new issue Copy permalink