369 lines
9.1 KiB
HTML
369 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Alles wat ik voel - Stine Jensen - Ruben van de Ven - St. Jan</title>
|
|
<style type="text/css">
|
|
body{
|
|
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QAdwB3AHctbh3qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMFFQkN1CxOCgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAXElEQVRo3u3YQRHAIAxFwVAT1L85gopgoNdc6D4DmZ1/y8hcFc3N+XafiCcuCQQEBAQEBAQEBAQEBAQEBATkV5BRVe0Pur3TIiAgICAgICAgICAgICAgICAgIB8dr84LFaZAYuYAAAAASUVORK5CYII=');
|
|
font-family: monospace;
|
|
font-size: 12pt;
|
|
height:100%;
|
|
margin:0;
|
|
}
|
|
body.loading #colourImage{
|
|
opacity: 0;
|
|
transition: opacity .4s;
|
|
}
|
|
#main svg{
|
|
z-index: -1;
|
|
position: absolute;
|
|
left:0;top:0;right:0;bottom: 0;
|
|
}
|
|
#main svg circle:hover{
|
|
stroke:yellow;
|
|
}
|
|
svg.hoverTitles text{
|
|
/*display:none;*/
|
|
opacity: 0.2;
|
|
}
|
|
svg.hoverTitles path:hover + text{
|
|
/*display:block;*/
|
|
opacity: 1;
|
|
z-index:9;
|
|
font-size:110%;
|
|
/*fill:yellow;*/
|
|
}
|
|
aside{
|
|
padding:0.3em;
|
|
}
|
|
aside ul{
|
|
list-style: none;
|
|
}
|
|
aside ul li{
|
|
padding: 0.1em;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
aside ul li span{
|
|
background:#ff0;
|
|
transition: max-width 0.5s;
|
|
max-width: 0%;
|
|
display: inline-block;
|
|
overflow: visible;
|
|
}
|
|
aside ul li:hover span{
|
|
max-width: 100%;
|
|
}
|
|
aside ul li.selected span{
|
|
max-width: 100%;
|
|
}
|
|
|
|
aside#selects{
|
|
float:left;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
aside#works{
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
position: fixed;
|
|
bottom: -2em;
|
|
transition: bottom 0.5s ease;
|
|
left: 0;
|
|
right: 0;
|
|
/*justify-content: center; /*Screws up with overflow-y*/
|
|
/*height: 1em;*/
|
|
}
|
|
aside#works:hover{
|
|
bottom:0;
|
|
}
|
|
aside#works img, aside#works .group{
|
|
margin-right: 0.4em;
|
|
flex: 0 0 auto;
|
|
height:4em;
|
|
/*transition: height 0.5s ease;*/
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0.2em rgba(0,0,0,0.5);
|
|
}
|
|
aside#works:hover img{
|
|
/*height:7em;*/
|
|
}
|
|
aside#works .group{
|
|
background: black;
|
|
color: white;
|
|
padding: 1.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
aside#works .group:hover{
|
|
background:yellow;
|
|
color:black;
|
|
}
|
|
|
|
aside#stats{
|
|
float:right;
|
|
text-align: center;
|
|
padding-right:1em;
|
|
padding-top:3em;
|
|
}
|
|
aside#stats svg{
|
|
width:20em;
|
|
height:20em;
|
|
}
|
|
|
|
#spinner{
|
|
display:none;
|
|
}
|
|
body.loading #spinner{
|
|
display: block;
|
|
animation: rotate 3s infinite linear;
|
|
}
|
|
|
|
#detail{
|
|
position:absolute;
|
|
width:20em;
|
|
margin-left:-10em;
|
|
background:rgba(0,0,0,0.8);
|
|
border-radius: 1em;
|
|
display: none;
|
|
overflow: hidden;
|
|
padding:0;
|
|
}
|
|
#detail.active{
|
|
display:block;
|
|
}
|
|
#detail img{
|
|
width:100%;
|
|
}
|
|
|
|
#info{
|
|
background: blue;color:white;
|
|
width: 30em;
|
|
height: 30em;
|
|
padding: 1em;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: calc(47.5% - 15em);
|
|
left: calc(50% - 15em);
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
#info.show{
|
|
display:flex;
|
|
}
|
|
a:link, a:visited{
|
|
color:yellow;
|
|
text-decoration: none;
|
|
}
|
|
a:hover{
|
|
color:red;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h3{
|
|
cursor:pointer;
|
|
}
|
|
h3#infoToggle{
|
|
position: absolute;
|
|
right:1em;
|
|
top:0em;
|
|
z-index: 999;
|
|
color:blue;
|
|
}
|
|
#selects h3:hover:after{
|
|
content:' (?)';
|
|
color:blue;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {transform: rotate(0deg);}
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
|
|
@media screen and (orientation:portrait) {
|
|
#stats{
|
|
display:block;
|
|
clear:both;
|
|
padding-bottom:4em;
|
|
}
|
|
#stats > div {
|
|
float:left;
|
|
}
|
|
#main svg{
|
|
width:80% !important;
|
|
left:20%;
|
|
}
|
|
#main svg#spinner{
|
|
width:5%;
|
|
/*top: 44.5% !important;*/
|
|
left:20.5% !important;
|
|
}
|
|
#info{
|
|
left: calc(60% - 15em);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3 id='infoToggle' onclick='toggleInfo()'>(?)</h3>
|
|
<aside id='selects'>
|
|
<h3 onclick='toggleInfo()'>Alles wat ik voel</h3>
|
|
<!-- <h3>Toon op basis van...</h3>
|
|
<h4>groep</h4>
|
|
<ul>
|
|
{% for group in groups %}
|
|
<li data-param="group" data-id="{{group.id}}"><span>{{group.name.replace(" ", " ")}}</span></li>
|
|
{% end %}
|
|
</ul>
|
|
<h4>emotie</h4> -->
|
|
<ul>
|
|
{% for emotion in emotions %}
|
|
<li data-param="emotion" data-id="{{emotion.id}}"><span>{{emotion.name}}</span></li>
|
|
{% end %}
|
|
</ul>
|
|
<ul>
|
|
<li data-param="no" data-id="thing"><span>toon alles</span></li>
|
|
</ul>
|
|
<!-- <h4>Kleur???</h4> -->
|
|
</aside>
|
|
<aside id='works'>
|
|
</aside>
|
|
<aside id='stats'>
|
|
<h4>Emoties</h4>
|
|
|
|
<h4>Licht/donker</h4>
|
|
|
|
</aside>
|
|
<div id='main'>
|
|
<svg viewBox="-160 -160 320 320" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:95%">
|
|
<defs>
|
|
<mask id="mask1" x="0" y="0" width="100" height="100" >
|
|
<circle r='155' cx="0" cy="0" style='fill:white;'></circle>
|
|
<circle r='50' cx="0" cy="0" style="fill:black"></circle>
|
|
</mask>
|
|
</defs>
|
|
<circle r='155' cx="0" cy="0" style='stroke:none;fill:rgba(0,0,0,0.1);mask: url(#mask1);'></circle>
|
|
</svg>
|
|
|
|
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" style="width:5%;height:5%;top:45%;left:47.5%;">
|
|
<g><path d="M500,964.2c-130.9,0-253.9-51-346.5-143.5C61,728.1,10,605.1,10,474.2c0-92.7,26-182.9,75.2-261C133.1,137.3,200.7,76,280.8,35.8l41.2,82.1c-65.1,32.6-120.1,82.5-159,144.2c-40,63.4-61.1,136.6-61.1,212c0,219.5,178.6,398.1,398.1,398.1c219.5,0,398.1-178.6,398.1-398.1c0-75.3-21.1-148.6-61.1-212c-38.9-61.7-93.9-111.6-159-144.2l41.2-82.1C799.3,76,866.9,137.3,914.8,213.2c49.2,78.1,75.2,168.3,75.2,261c0,130.9-51,253.9-143.5,346.5C753.9,913.2,630.9,964.2,500,964.2z"></path></g>
|
|
</svg>
|
|
|
|
<svg viewBox="-160 -160 320 320" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:95%" id="colourImage">
|
|
</svg>
|
|
</div>
|
|
|
|
<div id='detail'><img id='detail-img' src=''></div>
|
|
|
|
<section id='info'>
|
|
<h4>Over deze publicatie.</h4>
|
|
|
|
<p>Op deze pagina zie je een automatische categorisering van de kleuren in kunstwerkjes die zijn gemaakt door scholieren van de Sint Janschool, in Amsterdam. Ze zijn gemaakt in maart 2017 ter gelegenheid van het uitkomen van <em>Alles wat ik voel</em>, het nieuwe boek van <a href="http://stinejensen.nl">Stine Jensen</a> (uitgegeven door <a href="http://www.kluitman.nl">Kluitman</a>).</p>
|
|
|
|
<p>Deze pagina is ontworpen en uitgevoerd door media-ontwerper <a href="https://rubenvandeven.com">Ruben van de Ven</a>.</p>
|
|
<p>[ <a href="" onclick="toggleInfo();return false;">sluiten</a> ]</p>
|
|
|
|
</section>
|
|
|
|
<script type="text/javascript">
|
|
function updateProgress(evt)
|
|
{
|
|
// console.log(evt);
|
|
}
|
|
function transferComplete(evt, r)
|
|
{
|
|
var div = document.createElement('div');
|
|
div.innerHTML = evt.target.response;
|
|
// document.getElementById('colourImage').innerHTML = div.children[0].innerHTML;
|
|
document.getElementById('works').innerHTML = div.children[1].innerHTML;
|
|
document.getElementById('stats').innerHTML = div.children[2].innerHTML;
|
|
|
|
let svgEl = document.getElementById('colourImage');
|
|
svgEl.parentNode.replaceChild(div.children[0], svgEl);
|
|
|
|
// console.log(div.children[0]);
|
|
document.body.classList.remove('loading');
|
|
}
|
|
function transferFailed(evt)
|
|
{
|
|
// console.log(evt);
|
|
}
|
|
function transferCanceled(evt)
|
|
{
|
|
// console.log(evt);
|
|
}
|
|
|
|
var links = document.getElementById('selects').getElementsByTagName("li");
|
|
|
|
function loadResults(type, value)
|
|
{
|
|
document.body.classList.add('loading');
|
|
// document.getElementById('colourImage').innerHTML = "";
|
|
var oReq = new XMLHttpRequest();
|
|
oReq.addEventListener("progress", updateProgress);
|
|
oReq.addEventListener("load", transferComplete);
|
|
oReq.addEventListener("error", transferFailed);
|
|
oReq.addEventListener("abort", transferCanceled);
|
|
oReq.open("GET", "/colours?"+type+"="+value);
|
|
oReq.send();
|
|
|
|
// for(let unsetLink of links) {
|
|
for (let i = links.length - 1; i >= 0; i--) {
|
|
let unsetLink = links[i];
|
|
if(unsetLink.dataset.param == type && unsetLink.dataset.id == value) {
|
|
unsetLink.classList.add('selected');
|
|
} else {
|
|
unsetLink.classList.remove('selected');
|
|
}
|
|
}
|
|
}
|
|
|
|
// for(let link of links)
|
|
for (let i = links.length - 1; i >= 0; i--)
|
|
{
|
|
let link = links[i];
|
|
link.onclick = function() {
|
|
loadResults(this.dataset.param, this.dataset.id);
|
|
}.bind(link)
|
|
}
|
|
|
|
loadResults("no", "thing");
|
|
|
|
function triggerover(layerId, el)
|
|
{
|
|
let url = '/images/'+layerId+'.png';
|
|
let position = el.getBoundingClientRect();
|
|
let detailEl = document.getElementById('detail');
|
|
document.getElementById('detail-img').src = url;
|
|
|
|
|
|
el.onmouseout = triggerout;
|
|
// show below icon if higher item, otherwise above it.
|
|
if(el.attributes.cy.value <= 0) {
|
|
detailEl.style.top = (position.top + position.height + window.scrollY) + 'px';
|
|
detailEl.style.bottom = 'auto';
|
|
} else {
|
|
detailEl.style.top = 'auto';
|
|
detailEl.style.bottom = 'calc(100% - ' + ( position.top + window.scrollY ) + 'px)';
|
|
}
|
|
detailEl.style.left = (position.left - position.width/2) + 'px';
|
|
detailEl.classList.add('active');
|
|
}
|
|
|
|
function triggerout()
|
|
{
|
|
document.getElementById('detail').classList.remove('active');
|
|
}
|
|
|
|
var infoEl = document.getElementById('info');
|
|
|
|
function toggleInfo()
|
|
{
|
|
infoEl.classList.toggle('show');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |