Difference between revisions of "Team:SMMU-China/Software"

 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{SMMU-China}}
 
{{SMMU-China}}
 
<html>
 
<html>
−
 
 
<link rel="stylesheet" href="https://2018.igem.org/Template:SMMU-China/CSS_main?action=raw&ctype=text/css" type="text/css">
 
<link rel="stylesheet" href="https://2018.igem.org/Template:SMMU-China/CSS_main?action=raw&ctype=text/css" type="text/css">
 
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_ToTheTop&action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_ToTheTop&action=raw&ctype=text/css" />
−
<style>
 
−
        table,table tr th, table tr td { border:1px solid #000000;margin:auto; }
 
−
        table { width: 100%; min-height: 25px; line-height: 25px; text-align: left;} 
 
−
</style>
 
−
<link rel="stylesheet" href="https://2018.igem.org/Template:SMMU-China/CSS_ui?action=raw&ctype=text/css" type="text/css">
 
−
 
−
<style type="text/css">
 
−
.AAV-chat{width: 40%; margin: 30px 0 30px 3%; float: left;}
 
−
#canvas-aav-chat {width: 100%; height: 400px!important;}
 
−
.AAV-timeline{width: 40%; margin: 30px 0 30px 3%; float: left;}
 
−
#canvas-aav-timeline {width: 100%; height: 400px!important;}
 
−
.AAV-chat img {width: 100%;}
 
−
 
−
#wrapper{width: 85%; float: left;}
 
−
#pRyR-slider{width: 300px; float: left;}
 
−
 
−
 
−
 
−
  .ui-controlgroup-vertical {
 
−
      width: 14%;
 
−
float: left;
 
−
    }
 
−
    .ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
 
−
    .ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
 
−
      text-align: center;
 
−
    }
 
−
    #car-type-button {
 
−
      width: 120px;
 
−
    }
 
−
    .ui-controlgroup-horizontal .ui-spinner-input {
 
−
      width: 20px;
 
−
    }
 
−
 
−
</style>
 
  
 +
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:SMMU-China/2019_CSS_demo&action=raw&ctype=text/css" />
 +
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons&action=raw&ctype=text/css" />
 +
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:SMMU-China/2019_CSS_sidenav_min&action=raw&ctype=text/css" />
 +
<style type="text/css">
 +
.toggle {
 +
    display: block;
 +
    height: 72px;
 +
    line-height: 72px;
 +
    text-align: center;
 +
    width: 72px;
 +
}
 +
</style>
 
<div id="page-wrapper">
 
<div id="page-wrapper">
 
<!-- Header -->
 
<!-- Header -->
 
<section id="header">
 
<section id="header">
  
−
<!-- Logo -->
+
<div id="needshow" style="display: none;">
−
<h1><a href="https://2018.igem.org/Team:SMMU-China">Ca<sup>2+</sup>RTIN</a></h1>
+
<h1><a href="https://2018.igem.org/Team:SMMU-China">Ca<sup>2+</sup>RTIN</a></h1>
 +
<center>
 +
<a href="javascript:;" class="toggle" id="sidenav-toggle" style="color: #36b;">
 +
    <i class="material-icons" style="line-height:3;font-size:40px;">menu</i>
 +
  </a>
 +
  <p style="font-size: 20px;margin-top: 2em;font-weight: 700;">Please view this page horizontally!</p>
 +
  </center>
 +
</div>
  
−
<!-- Nav -->
+
        <table id="needhide" style="margin-bottom:0;">
 +
          <tr>
 +
            <th style="float:left;margin-left:40px">
 +
              <h1><a href="https://2018.igem.org/Team:SMMU-China">Ca<sup>2+</sup>RTIN</a></h1>
 +
            </th>
 +
            <th style="float:right; margin-top:40px;margin-right:20px">
 
<nav id="nav">
 
<nav id="nav">
 
<ul>
 
<ul>
 
<li><a href="https://2018.igem.org/Team:SMMU-China">Home</a></li>
 
<li><a href="https://2018.igem.org/Team:SMMU-China">Home</a></li>
 
<li>
 
<li>
−
<a href="https://2018.igem.org/Team:SMMU-China/Project">Project</a>
+
<a href="https://2018.igem.org/Team:SMMU-China/Description">Project</a>
 
<ul>
 
<ul>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Description">Description</a></li>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Description">Description</a></li>
Line 60: Line 49:
 
</li>
 
</li>
 
<li>
 
<li>
−
<a href="https://2018.igem.org/Team:SMMU-China/Parts">Parts</a>
+
<a href="https://2018.igem.org/Team:SMMU-China/Basic_Part">Parts</a>
 
<ul>
 
<ul>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Basic_Part">Basic Part</a></li>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Basic_Part">Basic Part</a></li>
Line 68: Line 57:
 
</li>
 
</li>
 
<li>
 
<li>
−
<a href="https://2018.igem.org/Team:SMMU-China/Lab">Lab</a>
+
<a>Lab</a>
 
<ul>
 
<ul>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Safety">Safety</a></li>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Safety">Safety</a></li>
Line 83: Line 72:
 
</li>
 
</li>
 
<li>
 
<li>
−
<a href="https://2018.igem.org/Team:SMMU-China/Human_Practices">HP</a>
+
<a href="https://2018.igem.org/Team:SMMU-China/Human_Practices">HP</a>
−
<ul>
+
                  <ul>
−
<li><a href="https://2018.igem.org/Team:SMMU-China/Questionaire-interview">Questionaire-interview</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SMMU-China/Human_Practices">Human Practice</a></li>
−
<li><a href="https://2018.igem.org/Team:SMMU-China/Collaborations">Collaboration</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SMMU-China/Public_Engagement">Edu&Public Engagement</a></li>
−
<li><a href="https://2018.igem.org/Team:SMMU-China/Network_Media">Network Media</a></li>
+
                    <li><a href="https://2018.igem.org/Team:SMMU-China/Collaborations">Collaboration</a></li>
−
<li><a href="https://2018.igem.org/Team:SMMU-China/Society">Society</a></li>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 95: Line 84:
 
<ul>
 
<ul>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Team">Team Members</a></li>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Team">Team Members</a></li>
−
<li><a href="https://2018.igem.org/Team:SMMU-China/Acknowledgement">Acknowledgement</a></li>
 
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Attributions">Attributions</a></li>
 
<li><a href="https://2018.igem.org/Team:SMMU-China/Attributions">Attributions</a></li>
 
</ul>
 
</ul>
Line 101: Line 89:
 
</ul>
 
</ul>
 
</nav>
 
</nav>
 +
            </th>
 +
          </tr>
 +
          <tr>
 +
        </table>
 +
 +
        <nav class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle">
 +
    <div class="sidenav-brand">
 +
      MENU
 +
    </div>
 +
 +
    <ul class="sidenav-menu">
 +
      <li>
 +
        <a href="https://2018.igem.org/Team:SMMU-China">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">assignment_ind</i>
 +
          </span>
 +
          <span class="sidenav-link-title">Home</span>
 +
        </a>
 +
      </li>
 +
      <li>
 +
        <a href="https://2018.igem.org/Team:SMMU-China/Description" data-sidenav-dropdown-toggle class="active">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">store</i>
 +
          </span>
 +
          <span class="sidenav-link-title">Project</span>
 +
          <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_down</i>
 +
          </span>
 +
          <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_up</i>
 +
          </span>
 +
        </a>
 +
 +
        <ul class="sidenav-dropdown" data-sidenav-dropdown>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Description">Description</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Design">Design</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Experiments">Experiments</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Demonstrate">Demonstrate</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <a href="https://2018.igem.org/Team:SMMU-China/Basic_Part" data-sidenav-dropdown-toggle class="active">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">store</i>
 +
          </span>
 +
          <span class="sidenav-link-title">Parts</span>
 +
          <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_down</i>
 +
          </span>
 +
          <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_up</i>
 +
          </span>
 +
        </a>
 +
 +
        <ul class="sidenav-dropdown" data-sidenav-dropdown>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Basic_Part">Basic Part</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Composite_Part">Composite Part</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Part_Collection">Part Collection</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <a data-sidenav-dropdown-toggle class="active">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">store</i>
 +
          </span>
 +
          <span class="sidenav-link-title">Lab</span>
 +
          <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_down</i>
 +
          </span>
 +
          <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_up</i>
 +
          </span>
 +
        </a>
 +
 +
        <ul class="sidenav-dropdown" data-sidenav-dropdown>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Safety">Safety</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Notebook">Notebook</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/InterLab">Interlab</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <a href="https://2018.igem.org/Team:SMMU-China/Model" data-sidenav-dropdown-toggle class="active">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">store</i>
 +
          </span>
 +
          <span class="sidenav-link-title">Modeling</span>
 +
          <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_down</i>
 +
          </span>
 +
          <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_up</i>
 +
          </span>
 +
        </a>
 +
 +
        <ul class="sidenav-dropdown" data-sidenav-dropdown>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Model">Model</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Software">Software</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <a href="https://2018.igem.org/Team:SMMU-China/Human_Practices" data-sidenav-dropdown-toggle class="active">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">store</i>
 +
          </span>
 +
          <span class="sidenav-link-title">HP</span>
 +
          <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_down</i>
 +
          </span>
 +
          <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_up</i>
 +
          </span>
 +
        </a>
 +
 +
        <ul class="sidenav-dropdown" data-sidenav-dropdown>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Human_Practices">Human Practice</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Public_Engagement">Edu&Public Engagement</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Collaborations">Collaboration</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <a href="https://2018.igem.org/Team:SMMU-China/Team" data-sidenav-dropdown-toggle class="active">
 +
          <span class="sidenav-link-icon">
 +
            <i class="material-icons">store</i>
 +
          </span>
 +
          <span class="sidenav-link-title">Team</span>
 +
          <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_down</i>
 +
          </span>
 +
          <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>
 +
            <i class="material-icons">arrow_drop_up</i>
 +
          </span>
 +
        </a>
 +
 +
        <ul class="sidenav-dropdown" data-sidenav-dropdown>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Team">Team Members</a></li>
 +
          <li><a href="https://2018.igem.org/Team:SMMU-China/Attributions">Attributions</a></li>
 +
        </ul>
 +
      </li>
 +
    </ul>
 +
  </nav>
  
 
</section>
 
</section>
Line 107: Line 235:
 
<section id="main">
 
<section id="main">
 
<div class="container">
 
<div class="container">
 +
 
<!-- Content -->
 
<!-- Content -->
 
<article class="box post">
 
<article class="box post">
 
<header>
 
<header>
−
<h2 style="text-align: center">Software</h2>
+
<h2 class="inner-h">Software</h2>
 
</header>
 
</header>
−
<div id="AAV" style="width: 100%">
 
−
 
−
<fieldset>
 
−
<div class="controlgroup-vertical" width="250px">
 
−
<legend style="font-size:20px; font-weight: bold; text-align:center; margin-bottom: 15px;" > AAV serotypes</legend>
 
−
<label for="optAAV1">AAV1</label>
 
−
<input type="radio" name="AAV" id="optAAV1" value="1">
 
−
<label for="optAAV2">AAV2</label>
 
−
<input type="radio" name="AAV" id="optAAV2" value="2">
 
−
<label for="optAAV3">AAV3</label>
 
−
<input type="radio" name="AAV" id="optAAV3" value="3">
 
−
<label for="optAAV4">AAV4</label>
 
−
<input type="radio" name="AAV" id="optAAV4" value="4">
 
−
<label for="optAAV5">AAV5</label>
 
−
<input type="radio" name="AAV" id="optAAV5" value="5">
 
−
<label for="optAAV6">AAV6</label>
 
−
<input type="radio" name="AAV" id="optAAV6" value="6">
 
−
<label for="optAAV7">AAV7</label>
 
−
<input type="radio" name="AAV" id="optAAV7" value="7">
 
−
<label for="optAAV8">AAV8</label>
 
−
<input type="radio" name="AAV" id="optAAV8" value="8">
 
−
<label for="optAAV9">AAV9</label>
 
−
<input type="radio" name="AAV" id="optAAV9" value="9">
 
−
<a href="http://www.sciencedirect.com/science/article/pii/S1525001616317324" target="view_window">Download Article</a>
 
−
</div>
 
−
 
−
<div class="AAV-chat" >
 
−
<canvas id="canvas-aav-chat"></canvas>
 
−
<img src="img\package-of-AAV.PNG"></img>
 
−
</div>
 
−
 
−
<div class="AAV-timeline" >
 
−
<canvas id="canvas-aav-timeline"></canvas>
 
−
<img src="img\AAV-vector-genome.PNG"></img>
 
−
 
−
</div>
 
−
  </fieldset>
 
−
</div>
 
−
 
−
<div class="row">
 
−
<div id="Graphic" class="col-6 col-12-small">
 
−
<div style="text-align:center; font-size:16px;">
 
−
<div style="position:absolute; top:24%; left: 20%;">Phosphorylation ratio of RyR2:
 
−
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:30px">%
 
−
</div>
 
−
<div style="position:absolute; top:26%; left:18.5%"><div id="pRyR-slider" style="height:15px;"></div></div>
 
−
<div style="position:absolute; top:28%; left:22%"><input type="button" value="Calculate Ca leak" id="simplify" /></div>
 
−
</div>
 
−
</div>
 
−
<div class="col-6 col-12-small">
 
−
<div id="wrapper" style="text-align: center;">
 
−
<div id="result" ></div><br>
 
−
f(x) = <input id="inputSomeThing" oninput="getInput(this.value)" value="(x+4)^2*(x-6)+sinx"></input><br><br>
 
−
f(x) = <input type="text" value="(x+4)^2*(x-6)+sinx" id="input"/>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
                                                                <header>
 
−
<h3>One</h3>
 
−
</header>
 
−
 
−
<p>
 
−
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
 
−
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
 
−
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
 
−
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
 
−
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
 
−
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
 
−
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
 
−
</p>
 
−
<div style="text-align: center">
 
−
<img alt="" src="https://static.igem.org/mediawiki/2018/3/30/T--SMMU-China--banner_replace.jpg" style="width:80%;margin: 0 auto;" >
 
−
<p><strong>Figure 1: </strong>Overall scheme of our project. </p>
 
−
</div>
 
−
 
 
 
−
<p>
 
−
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
 
−
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
 
−
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
 
−
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
 
−
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
 
−
</p>
 
 
<section>
 
<section>
−
<header>
+
<h3 class="inner-h">Introduction</h3>
−
<h3>Two</h3>
+
<p class="inner-text">
−
</header>
+
Although the calcium leakage plays a notable role in the development of Heart Failure (HF), it is hard to detect with noninvasive methods in clinical practice. The severity of HF can also be estimated by the level of calcium leakage, which in turn helps the clinical investors to determine the dosage and methodology of AAV based gene therapy. Therefore, we invented a software which can adopt the BNP expression level in patients' blood to reckon the level of calcium leakage, to choose of different AAVs and the to discriminate of expressing promoters.
−
 
+
−
<p>
+
−
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
+
−
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
+
−
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
+
−
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
+
−
sit amet nullam consequat feugiat dolore tempus.
+
−
Elementum odio duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
+
−
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
+
−
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
+
−
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
+
−
</p>
+
−
<table>
+
−
<tr>
+
−
<th width="300px">Do</th>
+
−
<th width="250px">Don't</th>
+
−
<th width="410px">Why?</th>
+
−
</tr>
+
−
<tr>
+
−
<td>Make sure all wiki content is hosted on <b>2018.igem.org</b>. (This includes text, files, HTML, CSS, Javascript, and other scripts.)</td>
+
−
<td>Don't host your wiki or parts of your wiki elsewhere. Don't include scripts or stylesheets from other servers. </td>
+
−
<td>iGEM content is preserved on our servers so future teams can learn from what you've done. When content is stored on other sites/servers, links may become broken, sites may go down, and <b>information will be lost.</b></td>
+
−
</tr>
+
−
<tr>
+
−
<td>Work on your wiki throughout the year and <b>save small edits for last</b></td>
+
−
<td>Don't wait to add/edit large portions of wiki content the day of the <b>Wiki Freeze</b></td>
+
−
<td>Just before the Wiki Freeze, iGEM websites experience <b>increased traffic and server loads.</b> This can be a difficult time to make larger changes or additions to your wiki. Don't wait till the last minute!</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Name uploaded files clearly and uniquely (T--TeamName--Filename.png)</td>
+
−
<td>Don't use generic names for you files (Header.png)</td>
+
−
<td>Using <b>unique names</b> makes searching/identification of uploaded files easier.</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Load your CSS and Javascript into the wiki, either directly into your page or using templates.</td>
+
−
<td>Don't try to host your CSS and Javascript on a third party server</td>
+
−
<td>You are required to host all content on the iGEM servers (see above)</td>
+
−
</tr>
+
−
</table>
+
−
<p style="text-align: center"><strong>Table 1: </strong>Overall scheme of our project. </p>
+
−
<p>
+
−
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
+
−
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
+
−
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
+
−
sit amet nullam consequat feugiat dolore tempus.
+
 
</p>
 
</p>
 
</section>
 
</section>
 +
 
<section>
 
<section>
−
<header>
+
<h3 class="inner-h">Instruction</h3>
−
<h3>Three</h3>
+
<h4 class="inner-h">Objective</h4>
−
</header>
+
−
<p>
+
<p class="inner-text">
−
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
+
To provide a guiding dosage of composite AAV that carries functional intrabody sequencing according to advanced set-up mathematical modeling and data.
−
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
+
</p>
−
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
+
−
sit amet nullam consequat feugiat dolore tempus. Elementum odio duis semper risus et lectus commodo fringilla.
+
−
Maecenas sagittis convallis justo vel mattis.
+
<h4 class="inner-h">Content</h4>
 +
 +
 +
<h5 class="inner-h">1. Calcium leakage trending module</h5>
 +
<p class="inner-text">
 +
Based on the parameters of calcium iron (number of calcium sparkles, calcium stored in SR, the extent of calcium transient) to predict the trending of calcium leakage over time.
 
</p>
 
</p>
 +
 +
<h5 class="inner-h">2. Treatment plan assisting module</h5>
 +
 +
<p class="inner-text">
 +
Provide different treatment plans (titer of AAV, promoter, treatment time) for different objectives of therapeutic effect (such as reducing 90 percent calcium leakage, or 60 percent, etc.).
 +
</p>
 +
 +
<h5 class="inner-h">3. The custom setting assessment module</h5>
 +
 +
<p class="inner-text">
 +
Evaluate the therapeutic effect according to the severity of disease and the selection of treatment plans.
 +
 +
</p>
 +
 +
<h4 class="inner-h">Guilding</h4>
 +
 +
<h5 class="inner-h">1. Calcium leakage trending module</h5>
 +
 +
<p class="inner-text">
 +
a) Input: calcium iron parameters: including intervals between onset of heart failure and detection, the number of calcium sparkles, calcium storage of SR and the extent of calcium transient.
 +
<br>
 +
b) At least three groups data required.
 +
<br>
 +
c) Calculation: based on the calcium leakage predicting model, it could calculate the expectation of calcium leakage in a few days.
 +
<br>
 +
d) Output: provide a trend graph from attacking of heart failure.
 +
</p>
 +
 +
<center><img src="https://static.igem.org/mediawiki/2018/5/5e/T--SMMU-China--b1.png" width="800px"></center>
 +
 +
<center><img src="https://static.igem.org/mediawiki/2018/5/58/T--SMMU-China--b2.png" width="600px"></center>
 +
 +
<h5 class="inner-h">2. Treatment plan assisting module</h5>
 +
 +
<p class="inner-text">
 +
a)Input: select the target value of reducing calcium leakage;
 +
<br>
 +
b)Output: based on your combination of virus serotype, promoter, and serum BNP value to calculate the titer of the therapeutic virus required for treatment.
 +
 +
</p>
 +
 +
<center><img src="https://static.igem.org/mediawiki/2018/f/f9/T--SMMU-China--b3.png" width="600px"></center>
 +
 +
<h5 class="inner-h">3. The custom setting assessment module </h5>
 +
 +
<p class="inner-text">
 +
a) Input: user can select serotype of virus and promoter, etc.
 +
<br>
 +
b) Calculation: based on the custom setting above, this function could calculate the expectation of reduced calcium leakage fitting the model built before.
 +
<br>
 +
c) Output: the expectation of calcium leakage reduction.
 +
</p>
 +
 +
<center><img src="https://static.igem.org/mediawiki/2018/2/2d/T--SMMU-China--b4.png" width="600px"></center>
 +
 +
<h3 class="inner-h">Github</h3>
 +
 +
<p class="inner-text">
 +
You can download and use our software from <a href=" https://github.com/igemsoftware2018/Team_SMMU_China">Github</a>.
 +
</p>
 +
 +
 
</section>
 
</section>
 +
 
</article>
 
</article>
 +
  
 
</div>
 
</div>
Line 293: Line 363:
 
</section>
 
</section>
 
</div>
 
</div>
 +
 
<div class="col-5 col-12-medium">
 
<div class="col-5 col-12-medium">
 
<section>
 
<section>
Line 298: Line 369:
 
<h2>Wanna contact us?</h2>
 
<h2>Wanna contact us?</h2>
 
</header>
 
</header>
−
<!-- <ul class="social">
 
−
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
 
−
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
 
−
<li><a class="icon fa-dribbble" href="#"><span class="label">Dribbble</span></a></li>
 
−
<li><a class="icon fa-tumblr" href="#"><span class="label">Tumblr</span></a></li>
 
−
<li><a class="icon fa-linkedin" href="#"><span class="label">LinkedIn</span></a></li>
 
−
</ul> -->
 
 
<ul class="contact">
 
<ul class="contact">
 
<li>
 
<li>
Line 316: Line 380:
 
<li>
 
<li>
 
<h3>E-Mail</h3>
 
<h3>E-Mail</h3>
−
<p><a href="mailto:hus@smmu.edu.cn">hus@smmu.edu.cn</a></p>
+
<p><a href="mailto:igem-smmu@smmu.edu.cn">igem-smmu@smmu.edu.cn</a></p>
 
</li>
 
</li>
 
<li>
 
<li>
 
<h3>Phone</h3>
 
<h3>Phone</h3>
−
<p>+86 13701692043</p>
+
<p>+86 021-81870925</p>
 
</li>
 
</li>
 
</ul>
 
</ul>
Line 330: Line 394:
 
<div id="copyright">
 
<div id="copyright">
 
<ul class="links">
 
<ul class="links">
−
<li>&copy; Untitled. All rights reserved.</li>
+
<li>&copy; 2018. SMMU. All rights reserved. Thanks to: <a href="http://html5up.net">HTML5 UP</a></li>
−
<!-- <li>Design: <a href="http://html5up.net">HTML5 UP</a></li> -->
+
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 367: Line 430:
 
</script>
 
</script>
  
−
 
+
<script src="https://2018.igem.org/Template:SMMU-China/2019_JS_jquery_min?action=raw&ctype=text/javascript"></script>
−
<script src="https://2018.igem.org/Template:SMMU-China/JS_Chart?action=raw&ctype=text/javascript"></script>
+
<script src="https://2018.igem.org/Template:SMMU-China/2019_JS_sidenav_min?action=raw&ctype=text/javascript"></script>
−
<script src="https://2018.igem.org/Template:SMMU-China/JS_jquery?action=raw&ctype=text/javascript"></script>
+
<script>$('[data-sidenav]').sidenav();</script>
−
<script src="https://2018.igem.org/Template:SMMU-China/JS_ui?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2018.igem.org/Template:SMMU-China/JS_xcalc?action=raw&ctype=text/javascript"></script>
+
−
 
+
−
<script>
+
−
function getInput(something){
+
−
string = something;
+
−
                var c=document.getElementById("input");
+
−
+
−
$( "#input" ).val( $( "#inputSomeThing" ).val() + "*" +$( "#amount" ).val()  );
+
−
}
+
−
 
+
−
$( function() {
+
−
      $( "#pRyR-slider" ).slider({
+
−
    // orientation: "vertical",
+
−
      range: "min",
+
−
      min: 0,
+
−
      max: 100,
+
−
      value: 60,
+
−
      slide: function( event, ui ) {
+
−
        $( "#amount" ).val( ui.value );
+
−
      $( "#input" ).val( $( "#inputSomeThing" ).val() + "*" +$( "#amount" ).val()  );
+
−
      }
+
−
    });
+
−
+
−
  $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
+
−
  } );
+
−
 
+
−
var barChartData  = new Array(); //����һ��������
+
−
 
+
−
  barChartData[1] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
    datasets: [
+
−
        {
+
−
            fillColor: "rgba(255, 99, 132, 0.2)",
+
−
            strokeColor: "rgba(255, 99, 132, 1)",
+
−
            data: [28, 48, 40, 19, 96, 27, 100]
+
−
        }
+
−
     
+
−
    ]
+
−
}
+
−
 
+
−
 
+
−
barChartData[2] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(54, 162, 235, 0.2)",
+
−
                strokeColor: "rgba(54, 162, 235, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[3] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(255, 206, 86, 0.2)",
+
−
                strokeColor: "rgba(255, 206, 86,1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[4] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(54, 162, 235, 0.2)",
+
−
                strokeColor: "rgba(54, 162, 235, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[5] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(255, 206, 86, 0.2)",
+
−
                strokeColor: "rgba(255, 206, 86, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[6] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(75, 192, 192, 0.2)",
+
−
                strokeColor: "rgba(75, 192, 192, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[7] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(153, 102, 255, 0.2)",
+
−
                strokeColor: "rgba(153, 102, 255, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[8] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(255, 159, 64, 0.2)",
+
−
                strokeColor: "rgba(255, 159, 64, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
barChartData[9] = {
+
−
labels : ["Brain","Heart","Lung","liver","Testis","kidney","kidney"],
+
−
datasets: [
+
−
{
+
−
fillColor: "rgba(220,220,220,0.2)",
+
−
                strokeColor: "rgba(220,220,220,1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
//------aav timeline data array
+
−
var lineChartData  = new Array();
+
−
 
+
−
lineChartData[1] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(255, 99, 132,0.2)",
+
−
                strokeColor: "rgba(255, 99, 132, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[2] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(54, 162, 235, 0.2)",
+
−
                strokeColor: "rgba(54, 162, 235, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[3] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(255, 206, 86, 0.2)",
+
−
                strokeColor: "rgba(255, 206, 86,1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[4] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(54, 162, 235, 0.2)",
+
−
                strokeColor: "rgba(54, 162, 235, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[5] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(255, 206, 86, 0.2)",
+
−
                strokeColor: "rgba(255, 206, 86, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[6] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(75, 192, 192, 0.2)",
+
−
                strokeColor: "rgba(75, 192, 192, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[7] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(153, 102, 255, 0.2)",
+
−
                strokeColor: "rgba(153, 102, 255, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[8] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(255, 159, 64, 0.2)",
+
−
                strokeColor: "rgba(255, 159, 64, 1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
lineChartData[9] = {
+
−
labels : ["Day 7","Day 14","Day 29","Day56","Day 100","9 Months"],
+
−
  datasets: [
+
−
{
+
−
fillColor: "rgba(220,220,220,0.2)",
+
−
                strokeColor: "rgba(220,220,220,1)",
+
−
                data: [28, 48, 40, 19, 96, 27, 100]
+
−
}
+
−
]
+
−
}
+
−
 
+
−
 
+
−
var options = {
+
−
    //Boolean - If we show the scale above the chart data     
+
−
    //�Ƿ���ʾ��״ͼ���������
+
−
    scaleOverlay: true,
+
−
 
+
−
    //Boolean - If we want to override with a hard coded scale
+
−
    scaleOverride: false,
+
−
 
+
−
    //** Required if scaleOverride is true **
+
−
    //Number - The number of steps in a hard coded scale
+
−
    scaleSteps: null,
+
−
    //Number - The value jump in the hard coded scale
+
−
    scaleStepWidth: 50,
+
−
    //Number - The scale starting value
+
−
    scaleStartValue: null,
+
−
 
+
−
    //String - Colour of the scale line   
+
−
    //x/y�������ߵ���ɫ
+
−
    scaleLineColor: "rgba(0,0,0,.1)",
+
−
 
+
−
    //Number - Pixel width of the scale line 
+
−
    //�����ߵĿ��
+
−
    scaleLineWidth: null,
+
−
 
+
−
    //Boolean - Whether to show labels on the scale   
+
−
    //�Ƿ���ʾlabelֵ
+
−
    scaleShowLabels: true,
+
−
 
+
−
    //Interpolated JS string - can access value
+
−
    scaleLabel: "<%=value%>",
+
−
 
+
−
    //String - Scale label font declaration for the scale label
+
−
    //����Family
+
−
    scaleFontFamily: "'Arial'",
+
−
 
+
−
    //Number - Scale label font size in pixels
+
−
    //�����С
+
−
    scaleFontSize: 14,
+
−
 
+
−
    //String - Scale label font weight style 
+
−
    //������ʽ
+
−
    scaleFontStyle: "normal",
+
−
 
+
−
    //String - Scale label font colour 
+
−
    //������ɫ
+
−
    scaleFontColor: "#666",
+
−
 
+
−
    ///Boolean - Whether grid lines are shown across the chart
+
−
    scaleShowGridLines: true,
+
−
 
+
−
    //String - Colour of the grid lines
+
−
    //��������ɫ
+
−
    scaleGridLineColor: "rgba(0,0,0,.05)",
+
−
 
+
−
    //Number - Width of the grid lines
+
−
    scaleGridLineWidth: 1,
+
−
 
+
−
    //Boolean - If there is a stroke on each bar   
+
−
    barShowStroke: true,
+
−
 
+
−
    //Number - Pixel width of the bar stroke   
+
−
    barStrokeWidth: 2,
+
−
 
+
−
    //Number - Spacing between each of the X value sets
+
−
    // ��״����xֵ���γɵ��ߣ��磺x=20�����ߣ�֮��ľ���
+
−
    barValueSpacing: 5,
+
−
 
+
−
    //Number - Spacing between data sets within X values
+
−
    // ��ͬһxֵ�ڵ���״��֮��ļ��
+
−
    barDatasetSpacing: 1,
+
−
 
+
−
    //Boolean - Whether to animate the chart
+
−
    animation: true,
+
−
 
+
−
    //Number - Number of animation steps
+
−
    animationSteps: 100,
+
−
 
+
−
    //String - Animation easing effect
+
−
    animationEasing: "easeOutQuart",
+
−
 
+
−
  bezierCurve : false,
+
−
 
+
−
    //Function - Fires when the animation is complete
+
−
    onAnimationComplete: function () {
+
−
        var strHtml = "";
+
−
        for (var i = 0; i < this.datasets.length; i++) {
+
−
            strHtml += "<li><div><span style='background-color:" + this.datasets[i].fillColor + ";'></span><label>" + this.datasets[i].label + "</label></div><div style='clear:both;'></div></li>";
+
−
        }
+
−
        $("#ul_type").html(strHtml);
+
−
    }
+
−
}
+
−
+
−
function Barclick( aavType ){
+
−
var ctx = document.getElementById("canvas-aav-chat").getContext("2d");
+
−
var myNewChart = new Chart(ctx);
+
−
myNewChart.Bar(barChartData [aavType], options);
+
−
 
+
−
var ctx2 = document.getElementById("canvas-aav-timeline").getContext("2d");
+
−
var myNewChart2 = new Chart(ctx2);
+
−
myNewChart2.Line(lineChartData [aavType], options);
+
−
}
+
−
 
+
−
</script>
+
−
 
+
−
<script>
+
−
  $( function() {
+
−
      $( ".controlgroup-vertical" ).controlgroup({ "direction": "vertical"    });
+
−
 
+
−
  } );
+
−
  </script>
+
−
 
+
−
<script type="text/javascript">
+
−
$(function(){
+
−
  $(":radio").click(function(){
+
−
 
+
−
  Barclick($(this).val());
+
−
  });
+
−
});
+
−
</script>
+
  
 
<p id="last_p_label">
 
<p id="last_p_label">
 
</html>
 
</html>

Latest revision as of 16:12, 20 November 2018

Software

Introduction

Although the calcium leakage plays a notable role in the development of Heart Failure (HF), it is hard to detect with noninvasive methods in clinical practice. The severity of HF can also be estimated by the level of calcium leakage, which in turn helps the clinical investors to determine the dosage and methodology of AAV based gene therapy. Therefore, we invented a software which can adopt the BNP expression level in patients' blood to reckon the level of calcium leakage, to choose of different AAVs and the to discriminate of expressing promoters.

Instruction

Objective

To provide a guiding dosage of composite AAV that carries functional intrabody sequencing according to advanced set-up mathematical modeling and data.

Content

1. Calcium leakage trending module

Based on the parameters of calcium iron (number of calcium sparkles, calcium stored in SR, the extent of calcium transient) to predict the trending of calcium leakage over time.

2. Treatment plan assisting module

Provide different treatment plans (titer of AAV, promoter, treatment time) for different objectives of therapeutic effect (such as reducing 90 percent calcium leakage, or 60 percent, etc.).

3. The custom setting assessment module

Evaluate the therapeutic effect according to the severity of disease and the selection of treatment plans.

Guilding

1. Calcium leakage trending module

a) Input: calcium iron parameters: including intervals between onset of heart failure and detection, the number of calcium sparkles, calcium storage of SR and the extent of calcium transient.
b) At least three groups data required.
c) Calculation: based on the calcium leakage predicting model, it could calculate the expectation of calcium leakage in a few days.
d) Output: provide a trend graph from attacking of heart failure.

2. Treatment plan assisting module

a)Input: select the target value of reducing calcium leakage;
b)Output: based on your combination of virus serotype, promoter, and serum BNP value to calculate the titer of the therapeutic virus required for treatment.

3. The custom setting assessment module

a) Input: user can select serotype of virus and promoter, etc.
b) Calculation: based on the custom setting above, this function could calculate the expectation of reduced calcium leakage fitting the model built before.
c) Output: the expectation of calcium leakage reduction.

Github

You can download and use our software from Github.

to the top