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

Styling changes and added new annotations

Browse source
This commit is contained in:
Ruben 2017-12-04 22:01:15 +01:00
parent 7379b2df12
commit 6fc9310751
1 changed files with 45 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
graphs.php
View file

@ -13,8 +13,8 @@ var d3 = <?php echo require "output/talk3.json" ?>;
<style type="text/css"> <style type="text/css">
body{ body{
font-family: sans-serif; font-family: sans-serif;
width:calc(100% - 10em); width:calc(88%);
margin-left:10%; margin-left:12%;
margin-right:0; margin-right:0;
} }
#scroller{ #scroller{
@ -34,7 +34,7 @@ var d3 = <?php echo require "output/talk3.json" ?>;
} }
#checkboxes{ #checkboxes{
font-size: .8em; font-size: .8em;
width: 10em; width: 13em;
position:absolute; position:absolute;
left:0; left:0;
top:0; top:0;
@ -42,6 +42,13 @@ var d3 = <?php echo require "output/talk3.json" ?>;
label{ label{
display:block; display:block;
} }
.legendColour{
width:1em;
height:1em;
display:inline-block;
float:right;
margin-top:0.6em;
}
#checkboxes span{ #checkboxes span{
color: gray; color: gray;
} }
@ -54,6 +61,8 @@ var d3 = <?php echo require "output/talk3.json" ?>;
#imgwrap img{ #imgwrap img{
width:90%; width:90%;
margin-left:2%;
margin-top:1em;
} }
h1{ h1{
margin: .1em 0; margin: .1em 0;
@ -142,6 +151,29 @@ defaultFacialParameters = [
//~ "jawDrop", // //~ "jawDrop", //
]; ];
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",
}
function getCheckedParams(){ function getCheckedParams(){
params = []; params = [];
for(var i in facialParameters){ for(var i in facialParameters){
@ -168,6 +200,12 @@ for(var i in facialParameters){
spanEl.innerHTML = param; spanEl.innerHTML = param;
labelEl.appendChild(spanEl); labelEl.appendChild(spanEl);
var spanColourEl = document.createElement('span');
spanColourEl.style.background = paramColours[param];
spanColourEl.innerHTML = "&nbsp;";
spanColourEl.classList.add('legendColour');
labelEl.appendChild(spanColourEl);
checkboxWrapperEl.appendChild(labelEl); checkboxWrapperEl.appendChild(labelEl);
} }
@ -214,6 +252,10 @@ function drawGraph(id, targetEl, d, params) {
x: d['windows'].map(function(w){return w['start'];}), x: d['windows'].map(function(w){return w['start'];}),
y: paramValues, y: paramValues,
type: 'scatter', type: 'scatter',
line: {
color: paramColours[param],
width: 1.5
}
}); });
avgV[param] = _.mean(paramValues); avgV[param] = _.mean(paramValues);
} }