Permalink
Browse files

processed result flow fixed

  • Loading branch information...
1 parent 6dde3ef commit f299513932e3f05cb5e7d57217ffeee06e229711 @jamland jamland committed Mar 16, 2012
Showing with 117 additions and 77 deletions.
  1. +15 −15 images/gear-big.svg
  2. +7 −7 images/gear-small.svg
  3. +54 −50 index.php
  4. +41 −5 style.css
View
@@ -2,19 +2,19 @@
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="116px" height="116px" viewBox="-14 -14 116 116" enable-background="new -14 -14 116 116" xml:space="preserve">
-<path fill="#1496BB" d="M43.998,16.937c-14.868,0-26.921,12.051-26.921,26.92s12.051,26.921,26.921,26.921
- c14.869,0,26.921-12.051,26.921-26.921C70.919,28.987,58.864,16.937,43.998,16.937z M43.998,60.95
- c-9.44,0-17.093-7.652-17.093-17.093c0-9.44,7.652-17.093,17.093-17.093c9.44,0,17.094,7.653,17.094,17.093
- C61.092,53.298,53.438,60.95,43.998,60.95z"/>
-<path fill="#1496BB" d="M90.492,50.842c0.322-2.233,0.497-4.515,0.497-6.843c0-2.325-0.175-4.609-0.501-6.843l10.272-6.058
- l-3.257-10.025l-11.873,1.137c-2.139-4.079-4.857-7.803-8.047-11.065l4.754-10.95L73.808-6l-8.934,7.899
- c-4.047-2.01-8.417-3.451-13.021-4.226l-2.587-11.646H38.727L36.138-2.327c-4.601,0.775-8.975,2.216-13.018,4.226L14.187-6
- L5.659,0.196l4.754,10.948c-3.191,3.263-5.91,6.988-8.047,11.065l-11.873-1.137l-3.259,10.023l10.274,6.06
- c-0.327,2.234-0.501,4.518-0.501,6.842c0,2.325,0.175,4.61,0.501,6.844l-10.274,6.058l3.258,10.027l11.874-1.138
- c2.139,4.078,4.856,7.802,8.047,11.064L5.659,87.801l8.529,6.195l8.935-7.898c4.043,2.009,8.415,3.452,13.016,4.226l2.588,11.649
- h10.539l2.589-11.648c4.603-0.774,8.973-2.218,13.02-4.226l8.934,7.897l8.53-6.192l-4.754-10.95
- c3.191-3.264,5.908-6.988,8.047-11.064l11.873,1.138l3.261-10.025L90.492,50.842z M43.998,79.654
- c-19.694,0-35.655-15.964-35.655-35.656c0-19.693,15.964-35.654,35.655-35.654c19.69,0,35.656,15.959,35.656,35.654
- C79.653,63.694,63.689,79.654,43.998,79.654z"/>
+ width="116px" height="116px" viewBox="0 0 116 116" enable-background="new 0 0 116 116" xml:space="preserve">
+<path fill="#2F8AA1" d="M57.998,30.937c-14.868,0-26.921,12.051-26.921,26.92c0,14.87,12.051,26.92,26.921,26.92
+ c14.869,0,26.921-12.051,26.921-26.92C84.919,42.987,72.863,30.937,57.998,30.937z M57.998,74.95
+ c-9.44,0-17.093-7.652-17.093-17.093c0-9.44,7.652-17.093,17.093-17.093c9.439,0,17.094,7.653,17.094,17.093
+ C75.092,67.298,67.438,74.95,57.998,74.95z"/>
+<path fill="#2F8AA1" d="M104.492,64.842c0.322-2.232,0.496-4.515,0.496-6.843c0-2.325-0.174-4.609-0.5-6.843l10.271-6.058
+ l-3.257-10.025L99.63,36.21c-2.139-4.079-4.856-7.803-8.047-11.065l4.754-10.95L87.809,8l-8.935,7.899
+ c-4.047-2.01-8.417-3.451-13.021-4.226L63.266,0.027H52.727l-2.589,11.646c-4.601,0.775-8.975,2.216-13.018,4.226L28.187,8
+ l-8.528,6.196l4.754,10.948c-3.191,3.263-5.91,6.988-8.047,11.065L4.493,35.072L1.234,45.095l10.274,6.06
+ c-0.327,2.234-0.501,4.518-0.501,6.842c0,2.325,0.175,4.61,0.501,6.844L1.234,70.898l3.258,10.027l11.874-1.138
+ c2.139,4.078,4.856,7.802,8.047,11.063l-4.754,10.949l8.529,6.195l8.935-7.898c4.043,2.01,8.415,3.452,13.016,4.227l2.588,11.648
+ h10.539l2.59-11.647c4.603-0.774,8.973-2.218,13.02-4.226l8.934,7.896l8.53-6.191l-4.754-10.951
+ c3.19-3.264,5.908-6.987,8.047-11.063l11.873,1.138l3.261-10.025L104.492,64.842z M57.998,93.654
+ c-19.694,0-35.655-15.965-35.655-35.656c0-19.693,15.964-35.654,35.655-35.654c19.689,0,35.656,15.959,35.656,35.654
+ C93.652,77.693,77.689,93.654,57.998,93.654z"/>
</svg>
View
@@ -4,13 +4,13 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="69px" height="69px" viewBox="0 0 69 69" enable-background="new 0 0 69 69" xml:space="preserve">
<g>
- <path fill="#1496BB" d="M68.75,38.5v-8.25l-10.771-2.691c-0.513-1.777-1.21-3.474-2.09-5.061l5.708-9.512l-5.834-5.834l-9.515,5.71
- c-1.585-0.876-3.28-1.569-5.055-2.081L38.5,0h-8.25l-2.696,10.786c-1.77,0.512-3.46,1.207-5.041,2.081l-9.529-5.716L7.15,12.985
- l5.72,9.532c-0.872,1.578-1.563,3.267-2.074,5.035L0,30.25v8.25l10.796,2.698c0.51,1.768,1.202,3.457,2.074,5.034l-5.717,9.533
- l5.833,5.832l9.528-5.714c1.581,0.875,3.271,1.569,5.042,2.081L30.25,68.75h8.25l2.694-10.779c1.774-0.512,3.469-1.207,5.056-2.082
- l9.516,5.708l5.832-5.831l-5.706-9.513c0.878-1.587,1.575-3.285,2.088-5.061L68.75,38.5z M34.386,48.561
- c-7.834,0-14.188-6.351-14.188-14.186s6.354-14.186,14.187-14.186c7.835,0,14.187,6.352,14.187,14.186
+ <path fill="#2F8AA1" d="M68.75,38.5v-8.25l-10.771-2.691c-0.513-1.777-1.209-3.474-2.09-5.061l5.709-9.512l-5.834-5.834
+ l-9.516,5.71c-1.585-0.876-3.28-1.569-5.055-2.081L38.5,0h-8.25l-2.696,10.786c-1.77,0.512-3.46,1.207-5.041,2.081l-9.529-5.716
+ L7.15,12.985l5.72,9.532c-0.872,1.578-1.563,3.267-2.074,5.035L0,30.25v8.25l10.796,2.698c0.51,1.768,1.202,3.456,2.074,5.034
+ l-5.717,9.533l5.833,5.832l9.528-5.715c1.581,0.875,3.271,1.569,5.042,2.081L30.25,68.75h8.25l2.693-10.779
+ c1.774-0.512,3.47-1.207,5.057-2.082l9.516,5.709l5.832-5.832l-5.705-9.513c0.877-1.587,1.574-3.285,2.088-5.062L68.75,38.5z
+ M34.386,48.561c-7.834,0-14.188-6.351-14.188-14.186s6.354-14.186,14.187-14.186c7.836,0,14.188,6.352,14.188,14.186
C48.572,42.21,42.221,48.561,34.386,48.561z"/>
- <circle fill="#1496BB" cx="34.386" cy="34.375" r="7.182"/>
+ <circle fill="#2F8AA1" cx="34.386" cy="34.375" r="7.182"/>
</g>
</svg>
View
@@ -101,17 +101,18 @@
<div class="clearfloat"></div>
<section id="result-flow">
- <h2>And see result images:</h2>
+ <h2>And see processed images</h2>
<table id="output">
<thead>
<tr>
- <td>Image from queue</td>
- <td>Thumbnail</td>
- <td>Rotated</td>
- <td>Grayscale</td>
+ <th>Image from queue</th>
+ <th>Thumbnail</th>
+ <th>Rotated</th>
+ <th>Grayscale</th>
</tr>
</thead>
<tbody>
+
</tbody>
</table>
</section>
@@ -182,54 +183,57 @@ function queue_worker(data) {
setInterval(function () {
$.get('/mq/getMessage.php?queue_name=input_queue', null, function (data) {
- if (data) {
- var task_id = queue_worker(data);
- var image = '<img width="200" src="' + data + '"/><br/>';
-
- var html = '<tr><td>' + image + '</td><td><span id="' +
- task_id + '_thumb"><img width="200" src="images/ajax-loader-circle.gif"/><br/></span></td><td><span id="' +
- task_id + '_rotated"><img width="200" src="images/ajax-loader-circle.gif"/><br/></span></td><td><span id="' +
- task_id + '_grayscale"><img width="200" src="images/ajax-loader-circle.gif"/><br/></span></td></tr>';
- $('#output tbody').prepend(html);
+ if (data) {
+ var task_id = queue_worker(data);
+ var image = '<img width="200" src="' + data + '"/><br/>';
+
+ var html = '<tr><td>' + image + '</td><td><span id="' +
+ task_id + '_thumb"><img src="images/ajax-loader-circle.gif"/></span></td><td><span id="' +
+ task_id + '_rotated"><img src="images/ajax-loader-circle.gif"/></span></td><td><span id="' +
+ task_id + '_grayscale"><img src="images/ajax-loader-circle.gif"/></span></td></tr>';
+ $('#output tbody').prepend(html);
+ if( !('#output').is(":visible") ){
+ $('#output').slideDown(500);
}
+ }
});
$.get('/mq/getMessage.php?queue_name=output_queue', null, function (data) {
- if (data) {
- $('#gears').addClass('moving');
- $('#step-3 .spinner').fadeOut(400);
- $('#step-3').animate({'background-position-y': '40%'}, 500);
- $('#processed-image').animate({left: '40%', opacity: '1'}, 1000, function(){
- $(this).animate({left: '-10%', opacity: '0'}, 1000, function(){
- $(this).css('left', '100%');
- $('#gears').delay(800).removeClass('moving');
- });
- });
- $('#receive-images img').animate({'opacity': '.75'}, 1000, function(){
- $('#receive-images img').animate({'opacity': '.1'}, 1000);
- });
-
- var parsed = jQuery.parseJSON(data);
-
- $('#output_queue').html('');
-
- $('#output_queue').append('<div class="processed-image">'+
- '<img src="'+parsed["thumbnail"]+'" >'+
- '<a href="'+parsed["thumbnail"]+'" >'+parsed["thumbnail"]+'</a></div>');
-
- $('#output_queue').append('<div class="processed-image">'+
- '<img src="'+parsed["rotated"]+'" >'+
- '<a href="'+parsed["rotated"]+'" >'+parsed["rotated"]+'</a></div>');
-
- $('#output_queue').append('<div class="processed-image">'+
- '<img src="'+parsed["grayscale"]+'" >'+
- '<a href="'+parsed["grayscale"]+'" >'+parsed["grayscale"]+'</a></div>');
-
- $('#output_queue').fadeIn(1000);
-
- $("#" + parsed["task_id"] + "_thumb").html('<img src="' + parsed["thumbnail"] + '"/>');
- $("#" + parsed["task_id"] + "_rotated").html('<img src="' + parsed["rotated"] + '"/>');
- $("#" + parsed["task_id"] + "_grayscale").html('<img src="' + parsed["grayscale"] + '"/>');
- }
+ if (data) {
+ $('#gears').addClass('moving');
+ $('#step-3 .spinner').fadeOut(400);
+ $('#step-3').animate({'background-position-y': '40%'}, 500);
+ $('#processed-image').animate({left: '40%', opacity: '1'}, 1000, function(){
+ $(this).animate({left: '-10%', opacity: '0'}, 1000, function(){
+ $(this).css('left', '100%');
+ $('#gears').delay(800).removeClass('moving');
+ });
+ });
+ $('#receive-images img').animate({'opacity': '.75'}, 1000, function(){
+ $('#receive-images img').animate({'opacity': '.1'}, 1000);
+ });
+
+ var parsed = jQuery.parseJSON(data);
+
+ $('#output_queue').html('');
+
+ $('#output_queue').append('<div class="processed-image">'+
+ '<img src="'+parsed["thumbnail"]+'" >'+
+ '<a href="'+parsed["thumbnail"]+'" >'+parsed["thumbnail"]+'</a></div>');
+
+ $('#output_queue').append('<div class="processed-image">'+
+ '<img src="'+parsed["rotated"]+'" >'+
+ '<a href="'+parsed["rotated"]+'" >'+parsed["rotated"]+'</a></div>');
+
+ $('#output_queue').append('<div class="processed-image">'+
+ '<img src="'+parsed["grayscale"]+'" >'+
+ '<a href="'+parsed["grayscale"]+'" >'+parsed["grayscale"]+'</a></div>');
+
+ $('#output_queue').fadeIn(1000);
+
+ $("#" + parsed["task_id"] + "_thumb").html('<img src="' + parsed["thumbnail"] + '"/>');
+ $("#" + parsed["task_id"] + "_rotated").html('<img src="' + parsed["rotated"] + '"/>');
+ $("#" + parsed["task_id"] + "_grayscale").html('<img src="' + parsed["grayscale"] + '"/>');
+ }
})
}, 5000); // every 5 seconds
View
@@ -110,7 +110,7 @@ small {
margin: 10px 0 0;
display: inline-block;
border-bottom: 1px dashed;
- padding: 3px 0;
+ padding: 3px 5px;
color: #608A9F;
}
@@ -151,10 +151,8 @@ body > header {
}
body > footer {
- position: absolute;
- bottom: 150px;
- width: 100%;
text-align: center;
+ margin: 40px 0 0;
}
body > footer a {
@@ -343,6 +341,40 @@ code {
display: none;
}
+#output {
+ min-width: 590px;
+ display: none;
+}
+
+#output img {
+ max-width: 256px;
+}
+
+#output thead th {
+ text-align: center;
+ padding: 0 0 10px;
+}
+
+#output tbody td {
+ vertical-align: top;
+}
+
+#output span {
+ overflow: hidden;
+ width: 150px;
+ display: block;
+ height: 100px;
+ position: relative;
+ float: left;
+}
+
+#output span img {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -25px 0 0 -25px;
+}
+
#result {
background: rgba(0, 179, 0, .8);
padding: 10px;
@@ -359,7 +391,7 @@ code {
#result-flow {
margin: 80px auto 0;
- width: 500px;
+ width: 600px;
}
#result-flow h2 {
@@ -494,4 +526,8 @@ code {
#sample-toggler {
cursor: pointer;
+}
+
+#sample-toggler:hover {
+ background: rgba(96, 138, 159, .2);
}

0 comments on commit f299513

Please sign in to comment.