Last week I had a 5 hours school project deadline based on the Azure Emotion API. Right now I am trying to rewrite the same code in a more clean/elegant way. I am quite new to coding so I will need all the help I can get. I am not really looking for a shorter way to write the same code, but I am looking for a clean/understandable way.
(function () {
let tempEmotion = ''
let lastEmotion = ''
function ShowCam () {
Webcam.set({
width: 480,
height: 360,
image_format: 'jpeg',
jpeg_quality: 100
})
Webcam.attach('#myCamera')
}
function TakeSnapshot () {
Webcam.snap(function (dataUri) {
document.getElementById('results').innerHTML = '<img id="base64image" src="' + dataUri + '"/>'
})
SaveSnapshot()
}
function SaveSnapshot () {
let file = document.getElementById('base64image').src.substring(23).replace(' ', '+')
let img = Base64Binary.decodeArrayBuffer(file)
let ajax = new XMLHttpRequest()
ajax.addEventListener('load', function (event) {
UploadComplete(event)
}, false)
ajax.open('POST', 'https://api.projectoxford.ai/emotion/v1.0/recognize', 'image/jpg')
ajax.setRequestHeader('Content-Type', 'application/octet-stream')
ajax.setRequestHeader('Accept', 'text/html,application/xhtml+xml,application/xml')
ajax.setRequestHeader('Ocp-Apim-Subscription-Key', 'EXTREMELY_HIDDEN_KEY')
ajax.send(img)
}
function UploadComplete (event) {
let xmlDoc = event.target.responseXML
let result = xmlDoc.getElementsByTagName('scores')
GiveUserFeedback(result)
}
function GiveUserFeedback (result) {
let emotionArray = []
let tempValue = 0
let htmlBody = $('body')
if (result[0]) {
for (let i = 0; i < result[0].childNodes.length; i++) {
emotionArray.push(Math.floor((Number(result[0].childNodes[i].textContent) * 100) + 1))
if (Number(result[0].childNodes[i].textContent).toFixed(2) > tempValue) {
tempValue = Number(result[0].childNodes[i].textContent).toFixed(2)
tempEmotion = String(result[0].childNodes[i].nodeName)
tempEmotion = tempEmotion.substr(0, 1).toUpperCase() + tempEmotion.substr(1)
}
}
for (let i = 0; i < emotionArray.length; i++) {
$('ul li:nth-child(' + (i + 1) + ') span').css('height', emotionArray[i])
}
switch (tempEmotion) {
case 'Angry':
htmlBody.css('background-color', '#F44336')
htmlBody.css('color', '#FFFFFF')
$('span').css('background-color', '#FFFFFF')
break
case 'Contempt':
htmlBody.css('background-color', '#9C27B0')
htmlBody.css('color', '#FFFFFF')
$('span').css('background-color', '#FFFFFF')
break
case 'Disgust':
htmlBody.css('background-color', '#673AB7')
htmlBody.css('color', '#FFFFFF')
$('span').css('background-color', '#FFFFFF')
break
case 'Fear':
htmlBody.css('background-color', '#FF9800')
break
case 'Happiness':
htmlBody.css('background-color', '#4CAF50')
break
case 'Neutral':
htmlBody.css('background-color', '#FFFFFF')
break
case 'Sadness':
htmlBody.css('background-color', '#03A9F4')
break
case 'Surprise':
htmlBody.css('background-color', '#FFEB3B')
}
lastEmotion = tempEmotion
}
}
window.onload = ShowCam
window.setInterval(function () {
TakeSnapshot()
}, 3000)
})()