r
/
guest_worker
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

interface typography

This commit is contained in:
merijn van moll 2020-01-21 16:09:24 +01:00
parent b2626244a4
commit 81c2c5ec80
4 changed files with 125 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
www/worker_specs/fake_scan.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 369 KiB

87
www/worker_specs/index.html
View File

@ -9,66 +9,87 @@
</head>
<body>
<!-- VUE kijken hoe dat werkt bv for loop -->
<div id="wrapper">
<div class='hit' v-for="(hit, hitId) in hits"
:class="[{'hugvey--on': hit.status != 'off'},'hugvey--' + hit.status]"
>
<div class='transition'>
<p v-if="hit.hit_id">Created HIT at {{hit.created_at}}</p>
<p v-else>Creating HIT</p>
<p>Created HIT based on analog drawing</p>
<!-- <p>Created HIT at {{hit.created_at}}</p> -->
<p v-else>Creating HIT based on analog drawing..</p>
<!-- <p>⇩</p> -->
</div>
<div class='state' v-if="hit.hit_id">
<h2>Human intelligence task</h2>
<p>{{hit.hit_id}}</p>
<p>Description</p>
<h2>human intelligence task</h2>
<p class="descriptor">task id</p>
<p>{{hit.hit_id}}</p>
<p class="descriptor">task description</p>
<p>Use the mouse to draw a copy of the image above</p>
</div>
<div class='transition' v-if="hit.hit_id">
<p v-if="!hit.assignment">Wait for human</p>
<p v-if="!hit.assignment">waiting for guest worker to accept HIT..</p>
<template v-else>
<p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">Asignment abandoned</p>
<p v-else>Assignment accepted</p>
</template>
</div>
<template v-if="hit.assignment">
<div class='state' v-if="hit.assignment"
:class="[{'assignment-hidden': hit.assignment.returned_at || hit.assignment.abandoned_at}]">
<h2>Worker {{hit.assignment.worker_id}}</h2>
<p>{{hit.assignment.turk_browser}} / {{hit.assignment.turk_ip}} / {{hit.assignment.turk_country}} / {{hit.assignment.turk_os}}</p>
<h2>guest worker</h2>
<p class="descriptor">worker id</p>
<p>test{{hit.assignment.worker_id}}</p>
<p class="descriptor">visiting from</p>
<!-- {{hit.assignment.turk_browser}} / / {{hit.assignment.turk_os}}-->
<p>{{hit.assignment.turk_country}} ({{hit.assignment.turk_ip}}) </p>
</div>
<div class='transition' v-if="hit.assignment.submit_page_at">
<p v-if="!hit.assignment.confirmed_at">Assignment submitted</p>
<p v-else>Confirmed submission</p> <!-- Validated submitted code through SQSmessage -->
</div>
<div class='state' v-if="hit.assignment.submit_page_at">
result: (add duration)
<img :src="hit.svg_image">
<h2>digital drawing</h2>
<div class="statebox">
<img :src="hit.svg_image">
</div>
</div>
<div class='transition' v-if="hit.assignment.submit_page_at">
<p v-if="!hit.scanned_at">Scanning</p>
<p v-else>Scanned at {{hit.scanned_at}}</p>
<p v-if="!hit.scanned_at">Scanning..</p>
<p v-else>Scan completed</p>
<!-- at {{hit.scanned_at}} -->
</div>
<div class='state' v-if="hit.scanned_at">
scan:
<img :src="hit.scan_image">
<h2>analog drawing</h2>
<!-- <div class="statebox"> -->
<img src="fake_scan.jpg">
<!-- <img :src="hit.scan_image"> -->
<!-- </div> -->
</div>
</template>
<!-- <div class="phase" id="waiting_for_human">
<span class="narrative_phase_text">waiting for human worker to accept task</span>
</div>
@ -76,7 +97,7 @@
<div class="phase" id="human_accepted_task">
<span class="narrative_phase_text">task accepted by human worker</span>
</div> -->
<!--
<!--
<div class="phase" id="worker_specs">
<span class="grid-item spec_name" id="hit_id_descriptor">human intelligent task id</span>
<span class="grid-item spec_value" id="hit_id">{{hit.id}}</span>
@ -105,7 +126,7 @@
</div>-->
</div>

66
www/worker_specs/style.css
View File

@ -12,8 +12,10 @@
:root{
--base-font-size: 17px;
--spec_name-font-size: 120%;
--spec_value-font-size: 250%;
--big-font-size: calc(var(--base-font-size)*1.5);
--bigger-font-size: calc(var(--big-font-size)*1.5);
/* --spec_name-font-size: 120%;
--spec_value-font-size: 250%; */
--base-color: #271601; /* tekst */
--alt-color: #FFF5DF; /* achtergrond */
@ -63,33 +65,73 @@ html, body{
}
.transition{
overflow:hidden;
display: block;
position:relative;
padding-left: calc(50%);
font-size: 12px;
padding-left: calc(50% + 20px);
font-size: var(--base-font-size);
height: 40px;
/* text-align: center; */
animation-duration: 3s;
animation-name: slidein;
margin: 20px 0px;
}
.transition p{
margin:2px;
}
.transition::before{
content:'⇩'; /*'⇓';*/
display:block;
position:absolute;
font-family:monospace;
font-size: 100px;
top:0;
font-family:'monospace';
font-size: 80px;
top:10px;
left:calc(50% - 30px);
line-height:0;
}
.state{
overflow:hidden;
border:solid 1px black;
animation-duration: 3s;
animation-name: slidein;
transition: max-height 1s;
max-height: 200px;
/* max-height: 200px; */
margin: 2px;
border:solid 2px black;
padding: 4px;
}
.state h2{
font-family: 'bebas';
font-size: var(--bigger-font-size);
margin: 2px;
font-weight: normal;
}
.state p{
margin: 0;
font-family: 'bebas';
font-size: var(--big-font-size);
}
.state img{
max-width: 100%;
}
.state .descriptor{
font-family: 'freesans';
font-size: var(--base-font-size);
margin-top: var(--base-font-size);
}
.state.assignment-hidden {
@ -97,13 +139,15 @@ html, body{
max-height: 0px;
}
@keyframes slidein {
from {
max-height:0;
}
to {
max-height: 200px;
max-height: 400px;
}
}
@ -148,4 +192,4 @@ html, body{
position: relative;
top: 5px;
}
*/
*/

16
www/worker_specs/todo Normal file
View File

@ -0,0 +1,16 @@
server starten volgens readme
http://localhost:8888/draw?id=3&assignmentId=test
# id= moet overeenkomen met hit id in console
http://localhost:8888/worker_specs/index.html
TODO
worker_specs
misschien svg croppen ivm veel lege ruimte
misschien tussen digital drawing en analog drawing nog een stap? digital > glas > analog