Changeset 1793


Ignore:
Timestamp:
Dec 18, 2012, 9:50:41 AM (8 years ago)
Author:
Nicklas Nordborg
Message:

References #425: Generate a lab protocol for RNA -> cDNA processing

Include empty wells in the list protocol. Added some notes about print settings for list vs. plate layout. Restrict width of screen layout to better see how the printed version will look (also fixed on the Histology and Allprep protocols).

Location:
extensions/net.sf.basedb.reggie/branches/ticket-422/resources
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/allprep_protocol2.jsp

    r1662 r1793  
    4242<head>
    4343  <title>Lab Tracking Protocol for Allprep isolation</title>
     44  <link rel="SHORTCUT ICON" href="<%=home%>/images/extraction.png">
    4445  <link rel="stylesheet" type="text/css" href="<%=home %>/css/printable.css">
    4546  <style>
     
    112113</head>
    113114<body>
     115  <div class="paper">
    114116  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
    115     <a href="javascript:window.print()"><img src="images/print.png" style="padding-right: 4px;">Print</a>
     117    <span class="button" onclick="window.print()">
     118      <img src="images/print.png">Print&hellip;
     119    </span>
    116120  </div>
    117121 
     
    173177  %>
    174178  </table>
    175  
     179  </div>
    176180</body>
    177181</html>
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/css/printable.css

    r1792 r1793  
    1717 
    1818  /* Hide when printing */
    19   .noprint
     19  .noprint, .debug
    2020  {
    21     display:none;
     21    display: none;
    2222  }
    2323}
     
    2525@media screen
    2626{
     27 
    2728  body
    2829  {
     30    background-color: #E8E8E8;
     31  }
     32 
     33  .paper
     34  {
    2935    width: 210mm;
    30     margin-left: 1em;
    31     margin-right: 1em;
     36    padding: 1em;
     37    margin: 1em;
     38    background-color: #FFFFFF;
     39    border: 1px dashed #A0A0A0;
     40   
     41  }
     42 
     43  .paper.landscape
     44  {
     45    width: 300mm;
    3246  }
    3347 
     
    3751    margin-left: -1em;
    3852    margin-right: -1em;
     53  }
     54 
     55  .debug
     56  {
     57    position: absolute;
     58    bottom: 0px;
     59    left: 0px;
     60    right: 0px;
     61    height: 5em;
     62    font-family: monospace;
     63    background: #DDDDFF;
     64    border-top: 1px solid #2288AA;
     65    z-index: 999;
     66    overflow: auto;
     67  }
     68 
     69  .debug > div
     70  {
     71    border-bottom: 1px dotted #2288AA;
    3972  }
    4073}
     
    4780    font-size: 75%;
    4881    padding: 0;
     82    margin: 0;
    4983  }
    5084 
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/histology_protocol2.jsp

    r1782 r1793  
    166166</head>
    167167<body>
     168  <div class="paper">
    168169  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
    169170    <span class="button" onclick="window.print()">
     
    259260  }
    260261  %>
    261  
     262  </div>
    262263</body>
    263264</html>
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/mrna_protocol2.jsp

    r1792 r1793  
    3939 
    4040  BioPlate plate = BioPlate.getById(dc, mRnaPlateId);
    41  
     41  int columns = plate.getColumns();
     42  int rows = plate.getRows();
     43
    4244  String view = Values.getString(request.getParameter("view"), "list");
    4345%>
     
    4951  <link rel="stylesheet" type="text/css" href="<%=home %>/css/printable.css">
    5052  <link rel="stylesheet" type="text/css" href="<%=home %>/css/plate.css">
    51   <link rel="stylesheet" type="text/css" href="<%=root %>/include/styles/main.css">
    5253  <script language="JavaScript" src="<%=root%>/include/scripts/main.js" type="text/javascript" charset="UTF-8"></script>
    5354  <script language="JavaScript" src="<%=root%>/include/scripts/ajax.js" type="text/javascript" charset="UTF-8"></script>
     
    166167  function viewAsList(list)
    167168  {
    168     var html = '';
    169     html += '<table style="width: 100%;">';
    170     html += '<thead>';
    171     html += '<tr class="toprow">';
    172     html += ' <th class="rna"></th>';
    173     html += ' <th class="box">Storage</th>';
    174     html += ' <th class="workplate">Work</th>';
    175     html += ' <th>NDConc</th>';
    176     html += ' <th>Remain</th>';
    177     html += ' <th colspan="2">Volume</th>';
    178     html += ' <th></th>';
    179     html += '</tr>';
    180     html += '<tr>';
    181     html += ' <th class="rna">RNA</th>';
    182     html += ' <th class="box">box</th>';
    183     html += ' <th class="workplate">plate</th>';
    184     html += ' <th>(ng/µl)</th>';
    185     html += ' <th>(µg)</th>';
    186     html += ' <th>(µl)</th>';
    187     html += ' <th>H<sub>2</sub>O</th>';
    188     html += ' <th>Remarks</th>';
    189     html += '</tr>';
    190     html += '</thead>';
    191 
    192    
    193169    for (var i = 0; i < list.length; i++)
    194170    {
     
    196172      var rna = mrna.rna;
    197173     
    198       var rowClass = mrna.bioWell.column % 2 == 0 ? 'evencol' : 'oddcol';
    199 
    200       html += '<tr class="'+rowClass+'">';
    201       html += '<td class="rna">'+rna.name+'</td>';
    202       html += '<td class="box">'+getPlateCoordinate(rna.bioWell, true)+'</td>';
    203       html += '<td class="workplate">'+getPlateCoordinate(mrna.bioWell, false)+'</td>';
    204       html += '<td class="ndconc">'+Numbers.formatNumber(rna.NDConc, 2) +'</td>';
    205       html += '<td class="remain">'+Numbers.formatNumber(rna.remainingQuantity, 2) +'</td>';
    206       html += '<td class="volume">'+Numbers.formatNumber(rna.volume, 1)+'</td>';
    207       html += '<td class="water">'+Numbers.formatNumber(rna.water, 1)+'</td>';
    208       html += '<td class="remarks">'+rna.remarks.join('; ')+'</td>';
    209       html += '</tr>';
    210     }
    211     html += '</table>'
    212     document.getElementById('listview').innerHTML = html;
     174      var idSuffix = mrna.bioWell.column + '.' + mrna.bioWell.row;
     175      Main.removeClass(document.getElementById('row.'+idSuffix), 'empty');
     176      setInnerHTML('rna.'+idSuffix, rna.name);
     177      setInnerHTML('box.'+idSuffix, getPlateCoordinate(rna.bioWell, true));
     178      setInnerHTML('ndconc.'+idSuffix, Numbers.formatNumber(rna.NDConc, 2));
     179      setInnerHTML('remain.'+idSuffix, Numbers.formatNumber(rna.remainingQuantity, 2));
     180      setInnerHTML('volume.'+idSuffix, Numbers.formatNumber(rna.volume, 1));
     181      setInnerHTML('water.'+idSuffix, Numbers.formatNumber(rna.water, 1));
     182      setInnerHTML('remarks.'+idSuffix, rna.remarks.join('; '));
     183    }
    213184  }
    214185 
     
    260231  }
    261232 
    262   #listview table
     233  #listview
    263234  {
    264235    width: 100%;
     
    279250  }
    280251 
     252  #listview tbody
     253  {
     254    page-break-inside: avoid;
     255    border-top: 1px solid #000000;
     256    border-bottom: 1px solid #000000;
     257  }
     258 
    281259  #listview th
    282260  {
     
    291269  }
    292270 
     271  #listview .col-num
     272  {
     273    width: 1.75em;
     274    text-align: center;
     275    font-size: 125%;
     276    font-weight: bold;
     277    vertical-align: top;
     278  }
     279 
    293280  #listview .rna
    294281  {
    295     padding-left: 0.5em;
     282    width: 9em;
     283    text-align: center;
     284  }
     285 
     286  #listview .empty .rna
     287  {
     288    font-style: italic;
     289    color: #666666;
     290    text-align: center;
     291  }
     292 
     293  #listview .box
     294  {
    296295    width: 8em;
    297   }
    298   #listview .box
    299   {
    300     width: 7em;
    301296    text-align: center;
    302297  }
     
    309304  {
    310305    width: 4.5em;
    311     padding-right: 1em;
     306    padding-right: 0.5em;
    312307    text-align: right;
    313308  }
     
    315310  {
    316311    width: 4.5em;
    317     padding-right: 1em;
     312    padding-right: 0.5em;
    318313    text-align: right;
    319314  }
     
    321316  {
    322317    width: 3.5em;
    323     padding-right: 1em;
     318    padding-right: 0.5em;
    324319    text-align: right;
    325320    color: #C80000;
     
    328323  {
    329324    width: 3.5em;
    330     padding-right: 1em;
     325    padding-right: 0.5em;
    331326    text-align: right;
    332327    color: #0000C8;
     
    389384</head>
    390385<body onload="init()">
     386  <div class="paper <%=view.equals("list") ? "" : "landscape"%>">
    391387  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
    392     <span class="button" onclick="window.print()">
     388    <span class="button" onclick="window.print()" style="float: left; margin-right: 1em;">
    393389      <img src="../images/print.png">Print&hellip;
    394390    </span>
    395     <div>
    396       <b>Note!</b>
    397       <%
    398       if (view.equals("list"))
    399       {
    400         %>
    401         For better printing reduce margins to about <i>5mm</i> and set page orientation
    402         to <i>portrait</i>. To fit everything on a single page, scale down to <i>60-70%</i>.
    403         <%
    404       }
    405       else
    406       {
    407         %>
    408         For better printing reduce margins to about <i>5mm</i> and set page orientation
    409         to <i>landscape</i>. The recommended scale is <i>100%</i>.
    410         <%
    411       }
    412       %>
    413     </div>
     391    <b>Note!</b>
     392    <%
     393    if (view.equals("list"))
     394    {
     395      %>
     396      For better printing reduce margins to about <i>5mm</i> and set page orientation
     397      to <i>portrait</i>. To fit everything on a single page, scale down to <i>60-70%</i>.
     398      <%
     399    }
     400    else
     401    {
     402      %>
     403      For better printing reduce margins to about <i>5mm</i> and set page orientation
     404      to <i>landscape</i>. The recommended scale is <i>100%</i>.
     405      <%
     406    }
     407    %>
     408    <br clear="all">
    414409  </div>
    415410 
     
    436431  {
    437432    %>
    438     <div id="listview"></div>
     433    <table style="width: 100%;" id="listview">
     434    <thead>
     435      <tr class="toprow">
     436        <th></th>
     437        <th class="rna"></th>
     438        <th class="box">Storage</th>
     439        <th class="workplate">Work</th>
     440        <th>NDConc</th>
     441        <th>Remain</th>
     442        <th colspan="2">Volume</th>
     443        <th></th>
     444      </tr>
     445      <tr>
     446        <th></th>
     447        <th class="rna">RNA</th>
     448        <th class="box">box</th>
     449        <th class="workplate">plate</th>
     450        <th>(ng/µl)</th>
     451        <th>(µg)</th>
     452        <th>(µl)</th>
     453        <th>H<sub>2</sub>O</th>
     454        <th>Remarks</th>
     455      </tr>
     456    </thead>
     457    <%
     458    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
     459    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
     460    for (int c = 0; c < columns; ++c)
     461    {
     462      String rowClass = c % 2 == 0 ? "evencol" : "oddcol";
     463      %>
     464      <tbody>
     465      <%
     466      for (int r = 0; r < rows; ++r)
     467      {
     468        String idSuffix = c + "." + r;
     469        %>
     470        <tr class="<%=rowClass%> empty" id="row.<%=idSuffix%>">
     471          <%
     472          if (r == 0)
     473          {
     474            %>
     475            <td class="col-num" rowspan="<%=rows%>"><%=c+1%></td>
     476            <%
     477          }
     478          %>
     479          <td class="rna" id="rna.<%=idSuffix%>">empty</td>
     480          <td class="box" id="box.<%=idSuffix%>"></td>
     481          <td class="workplate"><%=rowF.format(r)+colF.format(c)%></td>
     482          <td class="ndconc" id="ndconc.<%=idSuffix%>"></td>
     483          <td class="remain" id="remain.<%=idSuffix%>"></td>
     484          <td class="volume" id="volume.<%=idSuffix%>"></td>
     485          <td class="water" id="water.<%=idSuffix%>"></td>
     486          <td class="remarks" id="remarks.<%=idSuffix%>"></td>
     487        </tr>
     488        <%
     489      }
     490      %>
     491      </tbody>
     492      <%
     493    }
     494    %>
     495    </table>
    439496    <%
    440497  }
     
    442499  {
    443500    %>
    444     <table class="plate" style="margin: 1em 0 0 0; width: 100%; display: none;" id="plateview">
    445     <%
    446     int columns = 12;
    447     int rows = 8;
     501    <table class="plate" style="margin: 0em 0 0 0; width: 100%; display: none;" id="plateview">
     502    <%
    448503    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
    449504    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
     
    496551  }
    497552  %>
    498  
     553  </div>
    499554</body>
    500555</html>
Note: See TracChangeset for help on using the changeset viewer.