<?php
require __DIR__ . '/../bootstrap.php';
error_reporting(E_ALL);ini_set('display_errors', true);
$em = \EmotionHero\Application::getInstance()->getEm();
$hitRepo = $em->getRepository(\EmotionHero\Models\Hit::class);
/* @var $currentHit \EmotionHero\Models\Hit */
$currentHit = $hitRepo->findOneBy(['hasImage'=>true], ['id'=>'DESC']);
$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);
$hit = $hitRepo->getClosestHitWithImage($emotion, $i);
$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">
body{
background:yellow;
font-family:"Unifont";
font-weight:bold;
}
.block{
width:150px;
}
img{
width:100%;
filter:saturate(0%);
mix-blend-mode: multiply;
/*mix-blend-mode: exclusion;*/
}
.nose .block{
width:70px;
}
.perc{
display:block;
width:100%;
text-align:center;
}
.emo-block{
float:left;
margin-right:10px;
text-align:center;
}
.emo-block-emos{
position:relative;
}
.emo{
text-align:center;
}
.brows{
width:650px;
}
.nose{
width:240px;
}
.current{
width:200px;
margin:0 auto;
}
img.curImg{
position:absolute;
left:0;
mix-blend-mode:difference;
}
</style>
<body>
<?php
echo "<div class='current'>";
echo "<img src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\">";
echo "<dl>";
foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {
echo "<dt>$emotion</dt><dd>" . sprintf("%.2f %%", $currentHit->getEmotions()->getEmotionScore($emotion)) . "</dd>";
}
echo "</dl>";
echo "</div>";
echo "<div class='brows emo'><h3>eye brows</h3>";
echo "<div class='emo-block'>anger<div class='emo-block-emos'>";
$printEmoBlocks('anger','brows');
echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getAnger()}%\">";
echo "</div></div>";
echo "<div class='emo-block'>joy<div class='emo-block-emos'>";
$printEmoBlocks('joy','brows');
echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getJoy()}%\">";
echo "</div></div>";
echo "<div class='emo-block'>sadness<div class='emo-block-emos'>";
$printEmoBlocks('sadness','brows');
echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getSadness()}%\">";
echo "</div></div>";
echo "<div class='emo-block'>surprise<div class='emo-block-emos'>";
$printEmoBlocks('surprise','brows');
echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getSurprise()}%\">";
echo "</div></div>";
echo "</div>"; // .brows
echo "<div class='nose emo'><h3>nose</h3>";
echo "<div class='emo-block'>anger";
$printEmoBlocks('joy','nose');
echo "</div>";
echo "<div class='emo-block'>joy";
$printEmoBlocks('disgust','nose');
echo "</div>";
echo "<div class='emo-block'>sadness";
$printEmoBlocks('sadness','nose');
echo "</div>";
echo "</div>"; // .nose
$circles = "";
foreach($currentHit->getPoints()->getNormalisedPoints() as $i => $point) {
$circles .= '<circle
style="fill:#ff0000;"
id="point'.$i.'"
cx="'.$point->getX().'"
cy="'.$point->getY().'"
r="1" />';
}
echo <<< EOSVG
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="-1 -1 102 102"
id="svg2"
version="1.1">
<g id="layer1">
$circles
</g>
</svg>
EOSVG;
print_r($currentHit->getPoints()->getAsArray());
?>
</body>
</html>