r/api.emotionhero.com
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
api.emotionhero.com/www/faces3.php

446 lines
10 KiB
PHP
Raw Permalink Normal View History

Various fixes and face outputs
2016-09-19 01:50:50 +02:00
<?php
require __DIR__ . '/../bootstrap.php';
error_reporting(E_ALL);ini_set('display_errors', true);
$em = \EmotionHero\Application::getInstance()->getEm();
/* @var $hitRepo EmotionHero\Models\HitRepository */
$hitRepo = $em->getRepository(\EmotionHero\Models\Hit::class);
/* @var $currentHit \EmotionHero\Models\Hit */
$currentHit = $hitRepo->findOneBy(['hasImage'=>true], ['id'=>'DESC']);
Better faces
2016-09-22 00:17:26 +02:00
$targetSet = $hitRepo->getTargetSetForTarget($currentHit->getTarget());
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
$betterHit = $hitRepo->getBetterHit($currentHit);
$printEmoBlocks = function($emotion, $feature, $steps = 6) use($em) {
foreach(range(0, 100, 100/($steps-1)) as $i) {
/* @var $hitRepo EmotionHero\Models\HitRepository */
$hitRepo = $em->getRepository(EmotionHero\Models\Hit::class);
Make all face images dynamic
2016-09-19 18:25:59 +02:00
// if($feature == 'nose'){
// $items = [992, 1035, 701, 888, 671, 906, 693, 725, 762, 666, 751,992,728];
// $hit = $hitRepo->find($items[array_rand($items)]);
// } elseif($feature == 'mouth_left') {
// $items = [992, 1035, 1034, 888];
// $hit = $hitRepo->find($items[array_rand($items)]);
// } else{
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
$hit = $hitRepo->getClosestHitWithImage($emotion, $i);
Make all face images dynamic
2016-09-19 18:25:59 +02:00
// }
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
$img = $hit->getFeatureImgAsString($feature);
$score = $hit->getEmotions()->getEmotionScore($emotion);
$percentage = sprintf("%.0f %%",$score);
echo <<< EOSNIPPET
<div class="block">
<img src="data:image/x-icon;base64,$img" title="{$hit->getId()}">
<span class="perc">$percentage</span>
</div>
EOSNIPPET;
}
};
?>
<html>
<head>
<title>Emotion Hero</title>
</head>
<style type="text/css">
style change
2016-09-20 13:00:40 +02:00
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
html{
height:100%;
overflow:hidden;
}
body{
background:blue;
font-family:"Unifont";
font-weight:bold;
font-size:1vw;
margin:0.5em;
style change
2016-09-20 13:00:40 +02:00
font-family: sans-serif;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
}
body.presentation{
background:black;
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
h3{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
margin:0.5%;
text-align:center;
style change
2016-09-20 13:00:40 +02:00
/*! background: white; */
/*! color: black; */
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
h3 span{
style change
2016-09-20 13:00:40 +02:00
background:none;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
color:white;
padding:0.2%;
style change
2016-09-20 13:00:40 +02:00
/*! border-bottom: solid 0.2em white; */
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.block{
width:100%;
font-size:80%;
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
.mouth .emo-block{
width:50%;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
float:left;
height:5em;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.mouth .emotitle{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
display:block;
width:14%;
margin-right:0.14%;
margin-left:0.14%;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
float:left;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
font-size:80%;
style change
2016-09-20 13:00:40 +02:00
padding-top:2.5%;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.mouth .block {
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
width:14%;
margin-right:0.14%;
margin-left:0.14%;
float:left;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
/*.emotitle span:before{content:"‹";}
.emotitle span:after{content:"›";}*/
style change
2016-09-20 13:00:40 +02:00
.emotitle{/*! font-style:italic; *//*! display: none; */}
Small pres-mode fix
2016-09-20 13:01:12 +02:00
.emotitle:before{content:"«";}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
.emotitle:after{content:"»";}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
img{
width:100%;
style change
2016-09-20 13:00:40 +02:00
/*! filter:saturate(0%); */
/*! mix-blend-mode: multiply; */
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
/*mix-blend-mode: exclusion;*/
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.perc{
display:block;
width:100%;
text-align:center;
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.emo-block{
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
float:left;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
text-align:center;
}
.brows .emo-block {
width:23%;
margin-left:1%;
margin-right:1%;
Small fixes for display
2016-09-21 15:56:24 +02:00
height: 22em;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.nose .emo-block {
width:12%;
margin-left:1.14%;
margin-right:1.14%;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.nose .emotitle{
font-size:80%;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.emo-block-emos{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
position:relative;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.emo{
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
text-align:center;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
float:left;
style change
2016-09-20 13:00:40 +02:00
background:black;
color: white;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
}
.brows{
width:40%;
margin-right:1%;
}
.nose{
width:40%;
margin-right:1%;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.mouth{
width:81%;
margin-top:1%;
}
img.curImg{
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
position:absolute;
left:0;
mix-blend-mode:difference;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
}
.currentHit svg{
border-top: 1em solid blue;
margin: 0px -0.5em;
width: 100%;
padding: 0.5em;
width:100%;
}
.presentation .currentHit svg {
border-top: solid 0.1em white;
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
.nose .block{position:relative;margin-bottom:2%;}
.nose .block span{position:absolute;top:0;right:0;color:white;text-align:right;padding:0.5%;}
Add border to brow explainer
2016-09-19 11:36:04 +02:00
Faces3 fix style
2016-09-19 14:58:58 +02:00
.brows .emo-block.brow_explainer {
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
margin-top:3%;font-size:85%;
border-left: 0.3em solid blue;
width: 22%;
padding-left: 0.4em;
margin-left: -0.1em;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Small pres-mode fix
2016-09-20 11:31:59 +02:00
.presentation .brows .emo-block.brow_explainer{
border-left-color: black;
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
.brow_explainer img{filter:unset;margin-bottom:5%;}
.brow_explainer ol{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
margin:0;padding:0;
counter-reset:li 4;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.brow_explainer li{
text-align:left;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
margin-bottom:5%;
list-style:none;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.brow_explainer li:before{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
content:counter(li) ". "; /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
color:red;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.currentHit{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
width:17%;
position:absolute;
right:0.5em;
top:0.5em;
background:yellow;
padding:0.5%;
}
Small pres-mode fix
2016-09-20 11:29:33 +02:00
.presentation .currentHit {
background:none;
Small pres-mode fix
2016-09-20 11:29:56 +02:00
color:white;
Small pres-mode fix
2016-09-20 11:29:33 +02:00
}
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
.presentation .currentHit h3 span{
color:white;
background: none;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.currentHit h3 span{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
color:yellow;
}
.presentation .currentHit h3 span{
color:white;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
face update
2016-09-19 02:08:28 +02:00
.currentHit h3 .last{color:red;}
.currentHit h3 .vs{background:none;color:black;padding-left:0.5em;padding-right:0.5em;}
.currentHit h3 .perfect{}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
ul{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
font-size:80%;
list-style:none;
margin:0;
padding:0;
}
.presentation ul{
Small pres-mode fix
2016-09-20 11:31:22 +02:00
font-size:1.1em;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.currentHit li{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
clear:both;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.currentHit li .value{
float:right;
}
.currentHit li .diff{
float:right;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
clear:both;
font-size:72%;
color:gray;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.currentHit li .diff.negative{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
color:red;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
.currentHit li .diff.positive{
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
color:green;
face update
2016-09-19 02:08:28 +02:00
}
Small pres-mode fix
2016-09-20 11:33:01 +02:00
.presentation .currentHit li .diff.positive{
color:yellow;
}
face update
2016-09-19 02:08:28 +02:00
.currentHit p {
margin: 0 -0.5em 1% -0.5em;
Faces3 presentation mode and /sysinfo endpoint
2016-09-20 11:27:36 +02:00
border-bottom: solid 1em blue;
padding: 0.5em;
text-align: center;
}
.presentation .currentHit p {
border-bottom: solid 0.1em white;
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
Small pres-mode fix
2016-09-20 13:01:12 +02:00
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
</style>
Better faces
2016-09-22 00:17:26 +02:00
<body class='presentation'>
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
<?php
echo "<div class='brows emo'><h3><span>eye brows</span></h3>";
foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {
echo "<div class='emo-block'><span class='emotitle'>$emotion</span><div class='emo-block-emos'>";
$printEmoBlocks($emotion, 'brows');
//echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getEmotionScore($emotion)}%\">";
echo "</div></div>";
}
?>
<div class="emo-block brow_explainer">
Small fixes for display
2016-09-21 15:56:24 +02:00
<img src="brow_explain_color.png">
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
<ol start="5">
<li>Outer Right Brow Corner</li>
<li>Right Brow Center</li>
<li>Inner Right Brow Corner</li>
<li>Inner Left Brow Corner</li>
<li>Left Brow Center</li>
<li>Outer Left Brow Corner</li>
</ol>
</div>
<?php
echo "</div>"; // .brows
echo "<div class='nose emo'><h3><span>nose</span></h3>";
foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {
echo "<div class='emo-block'><span class='emotitle'>$emotion</span><div class='emo-block-emos'>";
$printEmoBlocks($emotion, 'nose');
//echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("nose")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getEmotionScore($emotion)}%\">";
echo "</div></div>";
}
echo "</div>"; // .nose
echo "<div class='mouth emo'><h3><span>mouth</span></h3>";
foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {
echo "<div class='emo-block'><span class='emotitle'>$emotion</span><div class='emo-block-emos'>";
$printEmoBlocks($emotion, 'mouth_left');
echo "</div></div>";
}
echo "</div>"; // .mouth
echo "<div class='currentHit'>";
face update
2016-09-19 02:08:28 +02:00
echo "<h3><span class='last'>last</span><span class='vs'>vs</span><span class='perfect'>perfect</span></h3>";
// echo "<p>".\PrettyDateTime\PrettyDateTime::parse($currentHit->getGame()->getOriginalGameAt())."</p>";
Better faces
2016-09-22 00:17:26 +02:00
echo "<p>aim:";
foreach($targetSet as $target) {
Better matching algo
2016-09-22 00:43:20 +02:00
echo " {$target->getScore()}% {$target->getEmotion()->getName()}";
Better faces
2016-09-22 00:17:26 +02:00
}
echo "</p>";
Better matching algo
2016-09-22 00:43:20 +02:00
if(empty($betterHit)) {
echo "<p>Best attempt so far</p>";
}
Better faces
2016-09-22 00:17:26 +02:00
//echo "<p>aim: {$currentHit->getTarget()->getScore()}% ".$currentHit->getTarget()->getEmotion()->getName()."</p>";
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
echo "<ul>";
$expressions = array_keys($currentHit->getExpressions()::$EXPRESSIONS_2ND_PERSON);
sort($expressions);
Better faces
2016-09-22 00:17:26 +02:00
foreach ($expressions as $expression) {
$currentScore = $currentHit->getExpressions()->getExpressionScore($expression);
echo "<li>";
echo "<span class='name'>$expression</span>";
echo "<span class='value'>". sprintf("%.5f", $currentScore)." %</span>";
if(!empty($betterHit)) {
$betterScore = $betterHit->getExpressions()->getExpressionScore($expression);
$diff = $betterScore - $currentScore;
if ($diff > 0) {
$diffclass = "positive";
} elseif ($diff < 0) {
$diffclass = "negative";
}
echo "<span class='diff $diffclass'>". sprintf("%+.5f", $diff)." %</span>";
}
echo "</li>";
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
echo "</ul>";
$circles = "";
Better faces
2016-09-22 00:17:26 +02:00
if(!empty($betterHit)) {
foreach($betterHit->getPoints()->getNormalisedPoints() as $i => $point) {
/* $circles .= '<circle
style="fill:gray;"
id="point'.$i.'"
cx="'.$point->getX().'"
cy="'.$point->getY().'"
r="0.7" />';*/
$circles .= '<text
style="fill:green;font-size:4"
id="point'.$i.'"
x="'.$point->getX().'"
y="'.$point->getY().'"
r="0.7">'.$i.'</text>';
}
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
}
foreach($currentHit->getPoints()->getNormalisedPoints() as $i => $point) {
$circles .= '<text
style="fill:red;font-size:4"
id="point'.$i.'"
x="'.$point->getX().'"
y="'.$point->getY().'"
r="0.7">'.$i.'</text>';
}
echo <<< EOSVG
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="-4 -4 108 108"
id="svg2"
version="1.1">
<g id="layer1">
$circles
</g>
</svg>
EOSVG;
echo "</div>"; // .currentHit
?>
websockets in faces3.php
2016-11-01 22:35:27 +01:00
<script type="text/javascript">
var socket = new WebSocket("ws://<?php echo $_SERVER['SERVER_NAME']; ?>:8181");
websockets in faces3.php
2016-11-01 22:36:23 +01:00
socket.onopen = function(){
websockets in faces3.php
2016-11-01 22:35:27 +01:00
/*Send a small message to the console once the connection is established */
console.log('Connection open!');
};
websockets in faces3.php
2016-11-01 22:36:23 +01:00
socket.onclose = function(){
websockets in faces3.php
2016-11-01 22:35:27 +01:00
console.log('Connection closed');
websockets in faces3.php
2016-11-01 22:36:23 +01:00
location.reload();
// socket.connect()
websockets in faces3.php
2016-11-01 22:35:27 +01:00
}
websockets in faces3.php
2016-11-01 22:36:23 +01:00
socket.onerror = function(error){
websockets in faces3.php
2016-11-01 22:35:27 +01:00
// reload page
console.log('Error detected: ' + error);
location.reload();
}
websockets in faces3.php
2016-11-01 22:36:23 +01:00
socket.onmessage = function(e){
websockets in faces3.php
2016-11-01 22:38:52 +01:00
console.log(e.data);
websockets in faces3.php
2016-11-01 22:35:27 +01:00
var message = JSON.parse(e.data);
// var server_message = e.data;
console.log(message);
if(message['action'] == 'update') {
if(message['method'] == 'image' || message['method'] == 'game') {
// reload page
location.reload();
}
}
}
</script>
Various fixes and face outputs
2016-09-19 01:50:50 +02:00
</body>
</html>
Reference in a new issue Copy permalink