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

interface typography

Browse source
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> </head>
<body> <body>
<!-- VUE kijken hoe dat werkt bv for loop -->
<div id="wrapper"> <div id="wrapper">
<div class='hit' v-for="(hit, hitId) in hits" <div class='hit' v-for="(hit, hitId) in hits"
:class="[{'hugvey--on': hit.status != 'off'},'hugvey--' + hit.status]" :class="[{'hugvey--on': hit.status != 'off'},'hugvey--' + hit.status]"
> >
<div class='transition'> <div class='transition'>
<p v-if="hit.hit_id">Created HIT at {{hit.created_at}}</p> <p>Created HIT based on analog drawing</p>
<p v-else>Creating HIT</p> <!-- <p>Created HIT at {{hit.created_at}}</p> -->
<p v-else>Creating HIT based on analog drawing..</p>
<!-- <p>⇩</p> -->
</div> </div>
<div class='state' v-if="hit.hit_id"> <div class='state' v-if="hit.hit_id">
<h2>Human intelligence task</h2> <h2>human intelligence task</h2>
<p>{{hit.hit_id}}</p> <p class="descriptor">task id</p>
<p>Description</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>
<div class='transition' v-if="hit.hit_id"> <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> <template v-else>
<p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">Asignment abandoned</p> <p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">Asignment abandoned</p>
<p v-else>Assignment accepted</p> <p v-else>Assignment accepted</p>
</template> </template>
</div> </div>
<template v-if="hit.assignment"> <template v-if="hit.assignment">
<div class='state' v-if="hit.assignment" <div class='state' v-if="hit.assignment"
:class="[{'assignment-hidden': hit.assignment.returned_at || hit.assignment.abandoned_at}]"> :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>
<div class='transition' v-if="hit.assignment.submit_page_at"> <div class='transition' v-if="hit.assignment.submit_page_at">
<p v-if="!hit.assignment.confirmed_at">Assignment submitted</p> <p v-if="!hit.assignment.confirmed_at">Assignment submitted</p>
<p v-else>Confirmed submission</p> <!-- Validated submitted code through SQSmessage --> <p v-else>Confirmed submission</p> <!-- Validated submitted code through SQSmessage -->
</div> </div>
<div class='state' v-if="hit.assignment.submit_page_at"> <div class='state' v-if="hit.assignment.submit_page_at">
result: (add duration) <h2>digital drawing</h2>
<img :src="hit.svg_image"> <div class="statebox">
<img :src="hit.svg_image">
</div>
</div> </div>
<div class='transition' v-if="hit.assignment.submit_page_at"> <div class='transition' v-if="hit.assignment.submit_page_at">
<p v-if="!hit.scanned_at">Scanning</p> <p v-if="!hit.scanned_at">Scanning..</p>
<p v-else>Scanned at {{hit.scanned_at}}</p> <p v-else>Scan completed</p>
<!-- at {{hit.scanned_at}} -->
</div> </div>
<div class='state' v-if="hit.scanned_at"> <div class='state' v-if="hit.scanned_at">
scan: <h2>analog drawing</h2>
<img :src="hit.scan_image"> <!-- <div class="statebox"> -->
<img src="fake_scan.jpg">
<!-- <img :src="hit.scan_image"> -->
<!-- </div> -->
</div> </div>
</template> </template>
<!-- <div class="phase" id="waiting_for_human"> <!-- <div class="phase" id="waiting_for_human">
<span class="narrative_phase_text">waiting for human worker to accept task</span> <span class="narrative_phase_text">waiting for human worker to accept task</span>
</div> </div>
@ -76,7 +97,7 @@
<div class="phase" id="human_accepted_task"> <div class="phase" id="human_accepted_task">
<span class="narrative_phase_text">task accepted by human worker</span> <span class="narrative_phase_text">task accepted by human worker</span>
</div> --> </div> -->
<!-- <!--
<div class="phase" id="worker_specs"> <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_name" id="hit_id_descriptor">human intelligent task id</span>
<span class="grid-item spec_value" id="hit_id">{{hit.id}}</span> <span class="grid-item spec_value" id="hit_id">{{hit.id}}</span>
@ -105,7 +126,7 @@
</div>--> </div>-->
</div> </div>

66
www/worker_specs/style.css
View file

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