129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
class Face {
|
|
constructor(id) {
|
|
this.id = id;
|
|
this.value = 0;
|
|
// this.name = name;
|
|
this.imgEls = [];
|
|
this.valueEls = [];
|
|
|
|
this.img = "";
|
|
|
|
let els = document.querySelectorAll(`[data-face='${this.id}']`);
|
|
for(let el of els) {
|
|
if(el.tagName == 'IMG') {
|
|
this.imgEls.push(el);
|
|
} else {
|
|
this.valueEls.push(el);
|
|
}
|
|
}
|
|
}
|
|
|
|
addImgEl(el) {
|
|
this.imgEls.push(el)
|
|
}
|
|
|
|
addValueEl(el) {
|
|
this.valueEls.push(el)
|
|
}
|
|
|
|
update(imgUrl, value) {
|
|
this.img = imgUrl
|
|
for(let el of this.valueEls) {
|
|
el.textContent = new Intl.NumberFormat("nl").format(value);
|
|
}
|
|
for(let el of this.imgEls) {
|
|
el.src = '/output/'+imgUrl;
|
|
}
|
|
}
|
|
}
|
|
|
|
class Bar {
|
|
constructor(el) {
|
|
this.el = el;
|
|
this.values = {};
|
|
}
|
|
|
|
setValue(id, value) {
|
|
this.values[id] = value;
|
|
this.update();
|
|
}
|
|
|
|
update() {
|
|
for(let id in this.values) {
|
|
let el = document.getElementById('graph--' + id);
|
|
if(!el) continue;
|
|
|
|
let nrEls = el.getElementsByClassName('nr');
|
|
for(let nrEl of nrEls) {
|
|
nrEl.textContent = new Intl.NumberFormat("nl").format(this.values[id]);
|
|
}
|
|
|
|
el.style.flex = parseInt(this.values[id]);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
class CompositeImage {
|
|
constructor(elId, face1, face2) {
|
|
this.el = document.getElementById(elId);
|
|
this.face1 = face1;
|
|
this.face2 = face2;
|
|
}
|
|
|
|
update() {
|
|
this.el.src = `/composite/${this.face1.img}/${this.face2.img}`;
|
|
}
|
|
}
|
|
|
|
var bar = new Bar(document.getElementById('graph'));
|
|
|
|
var faces = {
|
|
'front': new Face('front'),
|
|
'side': new Face('side'),
|
|
'male_front': new Face('male_front'),
|
|
'female_front': new Face('female_front'),
|
|
'unknown_front': new Face('unknown_front'),
|
|
'male_side': new Face('male_side'),
|
|
'female_side': new Face('female_side'),
|
|
'unknown_side': new Face('unknown_side')
|
|
}
|
|
|
|
var composites = [
|
|
new CompositeImage('composite-male_front', faces['male_front'], faces['front']),
|
|
new CompositeImage('composite-male_side', faces['male_side'], faces['side']),
|
|
new CompositeImage('composite-unknown_front', faces['unknown_front'], faces['front']),
|
|
new CompositeImage('composite-unknown_side', faces['unknown_side'], faces['side']),
|
|
new CompositeImage('composite-female_front', faces['female_front'], faces['front']),
|
|
new CompositeImage('composite-female_side', faces['female_side'], faces['side']),
|
|
];
|
|
|
|
var update = function() {
|
|
let req = new XMLHttpRequest();
|
|
req.addEventListener("load", function(e){
|
|
let data = JSON.parse(this.responseText);
|
|
console.log(data);
|
|
for(let name in data){
|
|
faces[name].update(data[name]['img'], data[name]['count']);
|
|
}
|
|
|
|
for(let composite of composites) {
|
|
composite.update();
|
|
}
|
|
|
|
bar.setValue('male', data['male_front']['count'] + data['male_side']['count'])
|
|
bar.setValue('female', data['female_front']['count'] + data['female_side']['count'])
|
|
bar.setValue('unknown', data['unknown_front']['count'] + data['unknown_side']['count'])
|
|
});
|
|
req.open("GET", "/output/composites.json?v=" + Date.now());
|
|
req.send();
|
|
}
|
|
|
|
var socket = new ReconnectingWebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws")
|
|
socket.addEventListener('message', function (event) {
|
|
//trigger update
|
|
update();
|
|
});
|
|
|
|
update();
|