some GUI cosmetics to testgui

diff --git a/layout/testgui.css b/layout/testgui.css
index c99c8b8fd57fa306a5b479e7d8d653f3b721bc0e..095bf527352b2c83b5169dfce0d63f530124a3e9 100644 (file)
--- a/layout/testgui.css
+++ b/layout/testgui.css
@@ -2,6 +2,22 @@
 
 
 
+.quasibutton {
+  background:#dde;
+  cursor:pointer;
+/*   text-align:center; */
+  color:#228;
+/*   width:25px; */
+/*   border:2px solid #eef; */
+  transition:background .4s;
+}
+  
+
+
+.quasibutton:hover{
+    background:#eed;
+}
+
 .bitfield {
   background:#dea;
   visibility:visible;

diff --git a/tools/testgui.js b/tools/testgui.js
index 8f63ab4f09fc016a287ec91ac1b18cc0f28b97b2..d007f12640c43f83ed7456d7f97c45091a162797 100644 (file)
--- a/tools/testgui.js
+++ b/tools/testgui.js
@@ -165,29 +165,34 @@ $(document).ready(function(){
     delete_file();
   });
     
-  $("#advoptbtn").click(function(){
-//     toggleVis("advancedOptionsContainer");
-    $("#advancedOptionsContainer").fadeToggle();
-    $('html, body').animate({
-        scrollTop: $("#advancedOptionsContainer").offset().top
-    }, 2000);
-//     var $target = $('html,body'); 
-//     $target.animate({scrollTop: $target.height()}, 1000);
-  });
-  $("#debugbtn").click(function(){
-//     toggleVis("theConsoleContainer");
-    $("#theConsoleContainer").fadeToggle();
-    $('html, body').animate({
-        scrollTop: $("#theConsoleContainer").offset().top
-    }, 2000);
-//     var $target = $('html,body'); 
-//     $target.animate({scrollTop: $target.height()}, 1000);
-  });
+//   $("#advoptbtn").click(function(){
+// //     toggleVis("advancedOptionsContainer");
+//     $("#advancedOptionsContainer").fadeToggle();
+//     $('html, body').animate({
+//         scrollTop: $("#advancedOptionsContainer").offset().top
+//     }, 2000);
+// //     var $target = $('html,body'); 
+// //     $target.animate({scrollTop: $target.height()}, 1000);
+//   });
+  
+  
+//   $("#debugbtn").click(function(){
+// //     toggleVis("theConsoleContainer");
+//     $("#theConsoleContainer").fadeToggle();
+//     $('html, body').animate({
+//         scrollTop: $("#theConsoleContainer").offset().top
+//     }, 2000);
+// //     var $target = $('html,body'); 
+// //     $target.animate({scrollTop: $target.height()}, 1000);
+//   });
   
   $("#button_init_system").click(function(){
     exec_init_system();
   });
   
+  unfolds($("#show_advanced_options"),$("#advancedOptionsContainer"));
+  unfolds($("#show_theConsole"),$("#theConsoleContainer"));
+  
   timer = $.timer(function() {
     clear_report();
     timer.stop();
@@ -195,6 +200,46 @@ $(document).ready(function(){
   
 });
 
+
+
+
+
+
+
+
+
+function unfold(button,container){
+  var button_text = button.html();
+  var new_button_text;
+  
+  if(container.is(':visible')){
+    new_button_text = button_text.replace("[-]","[+]");
+  } else {
+    new_button_text = button_text.replace("[+]","[-]");
+  }
+  container.fadeToggle();
+  $('html, body').animate({
+      scrollTop: container.offset().top
+  }, 2000);
+  button.html(new_button_text);
+}
+
+function unfolds(button,container){
+  button.click(function(){
+    unfold(button,container);
+  });
+  
+  var button_text = button.html();
+  
+  if(container.is(':visible')){
+    button.html("[-] "+button_text);
+  } else {
+    button.html("[+] "+button_text);
+  }
+  
+}
+
+
 function set_clear_timer(){
      timer.set({time:3000,autostart: true});
 }

diff --git a/tools/testgui.pl b/tools/testgui.pl
index 9ff43897e8b23d43d0c64f4e7f3fed1d7e4bd1a1..6acec154cd5462b933e9aa1c19075f4a4e83403d 100755 (executable)
--- a/tools/testgui.pl
+++ b/tools/testgui.pl
@@ -210,14 +210,17 @@ sub init_html{
   print "</script>";
   # end of that story
 
-  print "<input type='button' id='debugbtn'  value='show/hide debug output' >";
-  print "<input type='button' id='advoptbtn' value='show/hide advanced options'>";
+#   print "<input type='button' id='debugbtn'  value='show/hide debug output' >";
+#   print "<input type='button' id='advoptbtn' value='show/hide advanced options'>";
 
   print "</td></tr>";
   print "</table>";
 
   print "</p>";
-  
+ 
+ 
+ 
+  print "<p id='show_advanced_options' class='quasibutton' >advanced options</p>";
   print "<div id='advancedOptionsContainer' class='stylishBox hidden_by_default'>";
   print "<div class='header'>advanced options</div>";
   print "<div id='advancedOptions'>";
@@ -229,12 +232,11 @@ sub init_html{
   print q%<input type='button' id='button_init_system' value='init system'
   title="initialize the readout system (resets the TRB3)">%;
   print "</td></tr></table>"; 
-  
-  
   print "</div>";
   print "</div>";
   
   
+  print "<p id='show_theConsole' class='quasibutton' >show debug output</p>";
   print "<div id='theConsoleContainer' class='stylishBox hidden_by_default'>";
   print "<div class='header'>debug output</div>";
   print "<div id='theConsole'>[the \"console\"]</div>";