ltl2tgba.html: Display a loading logo for delayed results.

* wrap/python/ajax/css/loading.gif: New file.
* wrap/python/ajax/css/ltl2tgba.css (.loading): New class.
* wrap/python/ajax/ltl2tgba.html: Display loading.gif after 200ms if
the answer hasn't arrived
* wrap/python/ajax/spot.in: Do not suggest not to draw the automaton
on timeout.
* wrap/python/ajax/js/jquery.ba-dotimeout.min.js: New file.
* wrap/python/ajax/Makefile.am: Distribute it.
This commit is contained in:
Alexandre Duret-Lutz 2012-06-02 11:06:19 +02:00
parent bfc668246c
commit 81d3ee48f0
6 changed files with 38 additions and 6 deletions

View file

@ -23,8 +23,9 @@
nodist_noinst_SCRIPTS = spot.py nodist_noinst_SCRIPTS = spot.py
EXTRA_DIST = $(srcdir)/spot.in README ltl2tgba.html css/ltl2tgba.css \ EXTRA_DIST = $(srcdir)/spot.in README ltl2tgba.html css/ltl2tgba.css \
css/tipTip.css js/jquery.tipTip.minified.js js/jquery.ba-bbq.min.js \ css/tipTip.css js/jquery.tipTip.minified.js js/jquery.ba-bbq.min.js \
logos/lip6sys64.png logos/lrde64.png logos/spot64s.png \ js/jquery.ba-dotimeout.min.js logos/lip6sys64.png logos/lrde64.png \
logos/mail.png css/ui-lightness/jquery-ui-1.8.13.custom.css \ logos/spot64s.png logos/mail.png \
css/ui-lightness/jquery-ui-1.8.13.custom.css \
css/ui-lightness/images/ui-icons_222222_256x240.png \ css/ui-lightness/images/ui-icons_222222_256x240.png \
css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png \ css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png \
css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png \ css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png \

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View file

@ -119,6 +119,12 @@ table.ltltable
color: red; color: red;
} }
.ltl2tgba .loading {
display: block;
margin: 0 auto;
text-align: center;
}
.ltl2tgba .neverclaim, .ltl2tgba .accrun { .ltl2tgba .neverclaim, .ltl2tgba .accrun {
font-family: monospace; font-family: monospace;
white-space: pre; white-space: pre;

View file

@ -0,0 +1,9 @@
/*
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
* http://benalman.com/projects/jquery-dotimeout-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($){var a={},c="doTimeout",d=Array.prototype.slice;$[c]=function(){return b.apply(window,[0].concat(d.call(arguments)))};$.fn[c]=function(){var f=d.call(arguments),e=b.apply(this,[c+f[0]].concat(f));return typeof f[0]==="number"||typeof f[1]==="number"?this:e};function b(l){var m=this,h,k={},g=l?$.fn:$,n=arguments,i=4,f=n[1],j=n[2],p=n[3];if(typeof f!=="string"){i--;f=l=0;j=n[1];p=n[2]}if(l){h=m.eq(0);h.data(l,k=h.data(l)||{})}else{if(f){k=a[f]||(a[f]={})}}k.id&&clearTimeout(k.id);delete k.id;function e(){if(l){h.removeData(l)}else{if(f){delete a[f]}}}function o(){k.id=setTimeout(function(){k.fn()},j)}if(p){k.fn=function(q){if(typeof p==="string"){p=g[p]}p.apply(m,d.call(n,i))===true&&!q?o():e()};o()}else{if(k.fn){j===undefined?e():k.fn(j===false);return true}else{e()}}}})(jQuery);

View file

@ -12,6 +12,7 @@
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script> <script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-dotimeout.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function(){ jQuery(document).ready(function(){
$.spotvars = { autoupdate: false, $.spotvars = { autoupdate: false,
@ -156,12 +157,14 @@
.addClass("ui-icon-circle-arrow-s"); .addClass("ui-icon-circle-arrow-s");
ui.siblings('[class!="dontcollapse"]').hide('fast', callback); ui.siblings('[class!="dontcollapse"]').hide('fast', callback);
} }
function unfold(ui) { function unfold(ui, noshowsiblings) {
var icon = ui.children(".ui-icon"); var icon = ui.children(".ui-icon");
icon.removeClass("ui-icon-circle-arrow-s") icon.removeClass("ui-icon-circle-arrow-s")
.addClass("ui-icon-circle-arrow-n"); .addClass("ui-icon-circle-arrow-n");
if (!noshowsiblings) {
ui.siblings('[class!="dontcollapse"]').show('fast'); ui.siblings('[class!="dontcollapse"]').show('fast');
} }
}
function foldToggle(ui) { function foldToggle(ui) {
var icon = ui.children(".ui-icon"); var icon = ui.children(".ui-icon");
@ -185,6 +188,14 @@
} }
function updateResults() { function updateResults() {
// If the answer takes more that 200ms to arrive,
// display a busy indicator.
$.doTimeout('res-update', 200, function(){
$("#results-body").hide();
$("#results-loading").show();
$("#results").show();
unfold($("#results-head"), true);
})
// don't read window.location.hash, because // don't read window.location.hash, because
// it has been %-decoded by firefox, which // it has been %-decoded by firefox, which
// cause problems when formulae include '&'. // cause problems when formulae include '&'.
@ -193,13 +204,16 @@
.load("/cgi-bin/spot.py", .load("/cgi-bin/spot.py",
fragment, fragment,
function(response, status, xhr) { function(response, status, xhr) {
$.doTimeout('res-update');
if (status == "error") { if (status == "error") {
var msg = "Sorry but there was an error: "; var msg = "Sorry but there was an error: ";
$("#results-body").html(msg + xhr.status + " " $("#results-body").html(msg + xhr.status + " "
+ xhr.statusText); + xhr.statusText);
} }
$("#results-loading").hide();
$("#results-body").show();
$("#results").show(); $("#results").show();
unfold($("#results-head")); unfold($("#results-head"), true);
fold($("#ltl-head"), function() { fold($("#ltl-head"), function() {
if ($.spotvars.scrolldown) if ($.spotvars.scrolldown)
$('html,body').animate({scrollTop: $("#results-head").offset().top}, 'slow'); $('html,body').animate({scrollTop: $("#results-head").offset().top}, 'slow');
@ -610,7 +624,9 @@ an identifier: <span class="formula">aUb</span> is an atomic proposition, unlike
</FORM> </FORM>
<div id="results" class="ui-widget ui-widget-content ui-corner-all collapsible shadow"> <div id="results" class="ui-widget ui-widget-content ui-corner-all collapsible shadow">
<h3 id="results-head" class="ui-widget-header ui-corner-all head">Results<span class="ui-icon ui-icon-circle-arrow-n restip">Fold</span></h3> <h3 id="results-head" class="ui-widget-header ui-corner-all head">Results<span class="ui-icon ui-icon-circle-arrow-n restip">Fold</span></h3>
<div id="results-loading" class="dontcollapse"><img src="css/loading.gif" class="loading" border=0 alt="loading..."></div>
<div id="results-body"> <div id="results-body">
Loading...
</div> </div>
</div> </div>
</div> </div>

View file

@ -215,7 +215,7 @@ import buddy
def alarm_handler(signum, frame): def alarm_handler(signum, frame):
unbufprint("""<p><font color="red">The script was aborted because unbufprint("""<p><font color="red">The script was aborted because
it has been running for too long.</font> Please try a shorter formula, it has been running for too long.</font> Please try a shorter formula,
or different options (not drawing automata usually helps). or different options.
If you want to benchmark big formulae it is If you want to benchmark big formulae it is
better to install Spot on your own computer.</p>\n""") better to install Spot on your own computer.</p>\n""")
finish(kill = True) finish(kill = True)