Difference between revisions of "Template:SYSU-Software/statics/html/Projects/Design.html"

Line 1: Line 1:
{% load static %}
+
<div class="page-container">
 +
    <div class="last-page-identify" data-value="2"></div>
 +
    <div class="ui header1"> Projects </div>
 +
    <div class="ui header2"> Design </div>
  
<html>
+
     <div class="ui header3"> Overview </div>
 
+
     <img src="https://static.igem.org/mediawiki/2018/4/4f/T--SYSU-Software--designOverviewTrue.png">
<head>
+
  <title>Designer</title>
+
 
+
  <link rel="shortcut icon" href="/static/img/favicon.png">
+
  <link rel="stylesheet" href="/static/css/fontsize.css">
+
  <link rel="stylesheet" href="/static/semantic/dist/semantic.min.css">
+
  <link rel="stylesheet" href="/static/css/design.css">
+
  <link rel="stylesheet" href="/static/css/canvas.css">
+
</head>
+
 
+
<body>
+
  <input id="fileupload" type="file" name="files[]" hidden> {% csrf_token %}
+
  <input id="sbolfileupload" type="file" name="sbolfiles[]" hidden> {% csrf_token %}
+
  <!-- Toolbar -->
+
  <div class="ui fixed menu">
+
     <div class="ui container">
+
      <span class="item">
+
        <a id="operation">
+
          <img src="/static/img/design/icons/menu.png">
+
        </a>
+
      </span>
+
 
+
      <span class="item">
+
        <a id="undo-button">
+
          <img src="/static/img/design/icons/undo.png">
+
        </a>
+
        <a id="redo-button">
+
          <img src="/static/img/design/icons/todo.png">
+
        </a>
+
        <a id="clear-all-button">
+
          <img src="/static/img/design/icons/clearall.png">
+
        </a>
+
      </span>
+
 
+
      <span class="item">
+
        <a id="drag-item">
+
          <img src="/static/img/design/icons/pointer.png">
+
        </a>
+
        <a id="inspect-item">
+
          <img src="/static/img/design/icons/view_components.png" />
+
        </a>
+
        <a id="delete-item">
+
          <img src="/static/img/design/icons/delete.png">
+
        </a>
+
        {% if realtime %}
+
        <a id="realtime-exit">
+
          <img src="/static/img/design/icons/close_realtime.png" />
+
        </a>
+
        {% else %}
+
        <a id="realtime-enter">
+
          <img src="/static/img/design/icons/open_realtime.png" />
+
        </a>
+
        {% endif %}
+
        <a id="chassis-item">
+
          <img src="/static/img/design/icons/change_chassis.png" />
+
        </a>
+
      </span>
+
 
+
      <div id="toolbox" class="ui menu">
+
        <span class="item">
+
          <a id="add-part-button">
+
            <img src="/static/img/design/icons/plus.png">
+
          </a>
+
          <div id="connection-dropdown" class="ui dropdown">
+
            <img id="connection-dropdown-button" src="/static/img/design/icons/connection.png">
+
            <div class="menu">
+
              <div class="item" data-value="stimulation">
+
                <i class="blue right arrow icon"></i>
+
                Add a stimulation
+
              </div>
+
              <div class="item" data-value="inhibition">
+
                <i class="red rotated minus icon"></i>
+
                Add a inhibition
+
              </div>
+
              <div class="ui divider"></div>
+
              <div class="item" data-value="delete">
+
                <i class="red remove icon"></i>
+
                Delete a connection
+
              </div>
+
            </div>
+
          </div>
+
 
+
          <a id="interactive-button">
+
            <img src="/static/img/design/icons/check_connection.png">
+
          </a>
+
 
+
          <a id="simulation-button">
+
            <img src="/static/img/design/icons/simulation.png">
+
          </a>
+
 
+
          <a id="protocol-button">
+
            <img src="/static/img/design/icons/protocol.png">
+
          </a>
+
 
+
          <a id="analysis-button">
+
            <img src="/static/img/design/icons/analysis.png">
+
          </a>
+
        </span>
+
      </div>
+
 
+
      {% if realtime %}
+
      {% if write_authority %}
+
      <span class="item">
+
        <a id="realtime-button">
+
          <img src="/static/img/design/icons/realtime.png" />
+
        </a>
+
        <a id="live-canvas-pen">
+
          <img src="/static/img/design/icons/pencil.png" />
+
        </a>
+
        <a id="live-canvas-erase">
+
          <img src="/static/img/design/icons/eraser.png" />
+
        </a>
+
        <a id="live-canvas-clear">
+
          <img src="/static/img/design/icons/clear.png" />
+
        </a>
+
        <a id="live-canvas-show">
+
          <img src="/static/img/design/icons/start.png" />
+
        </a>
+
      </span>
+
      {% else %}
+
      <span class="item">
+
        <a id="live-canvas-show">
+
          <img src="/static/img/design/icons/start.png" />
+
        </a>
+
      </span>
+
      {% endif %}
+
      {% else %}
+
      <!-- <span class="item">
+
        <a id="realtime-enter">
+
          <img src="/static/img/design/icons/realtime.png" />
+
        </a>
+
      </span> -->
+
      {% endif %}
+
      <span id="logo" class="item">
+
        <b>
+
          <span id="username"> Welcome, <a href="/account"><span> {{ username }} </span></a> ! </span>
+
        </b>
+
        <a href="/account/">
+
          <img src="/static/img/logo.png">
+
        </a>
+
      </span>
+
     </div>
+
  </div>
+
 
+
  <div class="ui labeled left inline vertical sidebar menu">
+
    <a class="item" id="load-button">
+
      <img src="/static/img/design/icons/load.png">
+
    </a>
+
    {% if write_authority %}
+
    <a class="item" id="save-button">
+
      <img src="/static/img/design/icons/save.png">
+
    </a>
+
    {% endif %}
+
    <a class="item" id="save-as-new-button">
+
      <img src="/static/img/design/icons/save.png">
+
    </a>
+
    <a class="item" id="export-button">
+
      <img src="/static/img/design/icons/export_json.png">
+
    </a>
+
    <a class="item" id="upload-button">
+
      <img src="/static/img/design/icons/import_json.png">
+
    </a>
+
    {% if not sharing %}
+
    <a class="item" id="share-button">
+
      <img src="/static/img/design/icons/share.png">
+
    </a>
+
    {% endif %}
+
    <a class="item" id="sbol-json-button">
+
      <img src="/static/img/design/icons/import_sbol.png">
+
    </a>
+
    <a class="item" id="json-sbol-button">
+
      <img src="/static/img/design/icons/export_sbol.png">
+
    </a>
+
  </div>
+
 
+
  <!-- Main canvas -->
+
  <div id="canvas-box" design-id="{{ designID }}">
+
 
+
    <div id="canvas">
+
      <div class="ui message info-box unselectable" id="info-box">
+
        <div class="header">
+
          Basic Information
+
        </div>
+
        <ul class="list">
+
          <!-- if is in realtime mode -->
+
          {% if realtime %}
+
          <li id="bi-user-read"> You are in <b>realtime</b> mode and following other
+
            peers' alteration in real time. All of your operation will be <b>overriden</b> </li>
+
          <li id="bi-user-write"> You are in <b>realtime</b> mode and all your operations
+
            will <b>be seen</b> by other peers instantly.</li>
+
          {% endif %}
+
 
+
 
+
          <!-- if your are viewing a share design -->
+
          {% if sharing %}
+
          <!-- if u have write permission -->
+
          {% if write_authority %}
+
          <li> you are viewing user <b id="bi-user">{}</b> 's design with permission to <b>WRITE</b></li>
+
          <!-- u have read permission -->
+
          {% else %}
+
          <li id="bi-user"> you are viewing user <b id="bi-user">{}</b> 's design with permission to <b>READ</b> </li>
+
          {% endif %}
+
          {% else %}
+
          <!-- u are viewing ur own design -->
+
          <li> You are viewing your own design. Feel free to edit! </li>
+
          {% endif %}
+
 
+
 
+
          <li>You are in <b id="bi-mode">{}</b> mode.</li>
+
        </ul>
+
      </div>
+
      <canvas class="live-canvas hidden" id="live-canvas" width="100%" height="100%"></canvas>
+
    </div>
+
  </div>
+
 
+
  <!-- Part panel (right) -->
+
  <div id="part-panel-dropper"></div>
+
  <div id="part-panel" class="window">
+
    <div class="nav">
+
      <h5 class="ui header">Parts</h5>
+
      <i id="part-panel-button" class="link icon angle double right"></i>
+
    </div>
+
 
     <div class="content">
 
     <div class="content">
      <div>
+
         CO-RAD isn't just another question-and-answer community. It is an amazing experience specially made for
         <div class="search-header">Search</div>
+
         synthetic biologists. Our real-time collaborative designer and synchronization sketchpad will make you feel
        <img id="advanced-search-button" src="/static/img/design/icons/search.png">
+
         like working side by side with your remote coworkers. The powerful databases and algorithms we provide empower
         <br>
+
         you by stimulating your creativity, and you will find yourself doing a better job for your team efficiently.
      </div>
+
      <div id="search-parts-dropdown" class="ui fluid search selection dropdown">
+
        <i class="dropdown icon"></i>
+
        <div class="default text">Search BBa...</div>
+
      </div>
+
      <br>
+
 
+
      <div class="ui divider"></div>
+
 
+
      <div class="tab-context">
+
         <div class="ui top attached tabular menu">
+
          <div class="active item" data-tab="info-tab">PART INFORMATION</div>
+
        </div>
+
        <div id="part-info-tab" class="ui bottom attached active tab segment" data-tab="info-tab">
+
          <img id="part-info-img" class="ui centered tiny image" src="/static/img/design/unknown.png" alt="">
+
          <h5 id="part-info-name" class="ui center aligned header"></h5>
+
          <div class="ui center aligned container">
+
            <p id="part-type"></p>
+
          </div>
+
          <h5 class="ui header description">DESCRIPTION</h5>
+
          <div id="part-info-des">
+
            <p></p>
+
            <div class="mini ui middle button" data-position="bottom right" id="show-part-src-seg-button" style="display:none">Source
+
              Circuit</div>
+
          </div>
+
         </div>
+
      </div>
+
 
+
      <div class="controller">
+
        <a id="drag-canvas">
+
          <img src="/static/img/design/icons/move.png">
+
        </a>
+
        <a id="zoom-in">
+
          <img src="/static/img/design/icons/zoomin.png">
+
        </a>
+
        <a id="zoom-out">
+
          <img src="/static/img/design/icons/zoomout.png">
+
        </a>
+
        <div class="ui compact floating selection dropdown" id="ratio-dropdown">
+
          <i class="dropdown icon"></i>
+
          <div class="default text">Ratio</div>
+
        </div>
+
      </div>
+
 
+
 
     </div>
 
     </div>
  </div>
 
  
  <!-- Choose add gene/material -->
+
     <div class="ui header3"> New ways of collaboration:Face-to-Face D
  <div id="choose-added-part-type" class="ui tiny modal">
+
         istant Collaboration</div>
     <div class="ui content container">
+
      <h5>Choose the type of part you add.</h5>
+
      <div>
+
        <button class="ui inverted basic button" id="add-gene-button">Gene(CDS, RBS...)</button>
+
      </div>
+
      <br>
+
      <div>
+
         <button class="ui inverted basic button" id="add-material-button">Material(Protein, DNA...)</button>
+
      </div>
+
    </div>
+
  </div>
+
 
+
  <!-- msg modal -->
+
  <div id="design-msg-modal" class="ui basic modal">
+
    <div class="ui icon message">
+
      <i class="notched circle loading icon"></i>
+
      <div class="content">
+
        <div class="header" id="design-msg-header">
+
          Just one second
+
        </div>
+
        <p id="design-msg-body">Success.</p>
+
      </div>
+
    </div>
+
  </div>
+
  <!-- Creating new gene modal -->
+
  <div id="new-gene-modal" class="ui tiny modal">
+
 
     <div class="content">
 
     <div class="content">
      <form class="ui form">
+
         For a long time, collaborative biology-designed collaboration software simply sent its
         <div class="field">
+
         questions to a website and waiting for someone to answer. This method becomes inefficient when the number of
          <label>Name</label>
+
         users is small. Instead of creating a Q&A site, we want to create a collaboration tool that everyone can use to
          <input type="text" name="name" id="gene-name" placeholder="Gene Name">
+
         help synthetic biologists overcome the inconvenience of remote collaboration and make remote collaboration as
         </div>
+
         valid as face-to-face communication.
         <div class="field">
+
          <label>Description</label>
+
          <textarea id="gene-description" rows=2 placeholder="Description"></textarea>
+
         </div>
+
         <div class="field">
+
          <label>Type</label>
+
          <div class="ui floating selection dropdown" id="gene-type-dropdown">
+
            <i class="dropdown icon"></i>
+
            <div class="default text">Gene type</div>
+
          </div>
+
        </div>
+
        <div class="field">
+
          <label>Gene Sequence</label>
+
          <textarea name="gene-sequence" id="gene-sequence" placeholder="Sequence"></textarea>
+
        </div>
+
      </form>
+
 
     </div>
 
     </div>
    <div class="actions">
 
      <div class="ui one bottom attached big buttons">
 
        <div id="add-new-gene" class="ui white button">Add this gene to database!</div>
 
      </div>
 
    </div>
 
  </div>
 
  
  <!-- Creating new material modal -->
+
    <div class="ui header4">Visual Designer with Management Studio</div>
  <div id="new-material-modal" class="ui tiny modal">
+
 
     <div class="content">
 
     <div class="content">
      <form class="ui form">
+
        If you have a brilliant idea that you want to share with your colleagues right now, wouldn't it be wonderful if
         <div class="field">
+
         they can see it as you are writing it down? With our CO-RAD online design platform, team members can see each
          <label>Name</label>
+
         other's editions on the protocol in real time, as if they are using the same computer with multiple screens and
          <input type="text" name="name" id="material-name" placeholder="Material Name">
+
         input devices. You can also customize new tools via the platform for higher efficiency when you are editing
         </div>
+
         relations between genetic circuits or writing experimental protocols. CO-RAD online design platform also comes
         <div class="field">
+
         with version control, so you don't ever need to worry about someone accidentally scrambling your protocol up!
          <label>Description</label>
+
          <textarea id="material-description" rows=2 placeholder="Description"></textarea>
+
         </div>
+
        <div class="field">
+
          <label>Type</label>
+
          <div class="ui floating selection dropdown" id="material-type-dropdown">
+
            <i class="dropdown icon"></i>
+
            <div class="default text">Material type</div>
+
          </div>
+
         </div>
+
      </form>
+
    </div>
+
    <div class="actions">
+
      <div class="ui one bottom attached big buttons">
+
        <div id="add-new-material" class="ui white button">Add this material to database!</div>
+
      </div>
+
 
     </div>
 
     </div>
  </div>
+
    <img src="https://static.igem.org/mediawiki/2018/0/0a/T--SYSU-Software--share-drag.gif" />
  
  <!-- click and get part's detail modal -->
 
  <div id="inspect-item-modal" class="ui tiny modal">
 
    <div class="content">
 
      <form id="inspect-item-form" class="ui form">
 
        <div class="field">
 
          <label>Part role</label>
 
          <input type="text" readonly="readonly" name="component-role" placeholder="part role">
 
        </div>
 
        <div class="field">
 
          <label>Display ID</label>
 
          <input type="text" readonly="readonly" name="component-id" placeholder="display id">
 
        </div>
 
        <div class="field">
 
          <label>Name</label>
 
          <input type="text" readonly="readonly" name="component-name">
 
        </div>
 
        <div class="field">
 
          <label>Version</label>
 
          <input type="text" readonly="readonly" name="component-version" placeholder="1">
 
        </div>
 
        <div class="field">
 
          <label>Description</label>
 
          <textarea rows="6" name="component-description" readonly="readonly"></textarea>
 
        </div>
 
        <div class="field">
 
          <label>DNA Sequence</label>
 
          <textarea name="component-sequence" readonly="readonly"></textarea>
 
        </div>
 
      </form>
 
    </div>
 
  </div>
 
  
  <!-- Analysis modal -->
+
    <div class="ui header4">Synchronization Sketchpad</div>
  <div id="analysis-modal" class="ui tiny modal">
+
 
     <div class="content">
 
     <div class="content">
      <h5 class="ui center aligned header">Analysis Modal</h5>
+
         It works like our Real-time Collaborative designer, but instead of making editorial contents on files or
 
+
         editing circuits, you get to doodle on a synchronization board and other people can see it as you draw and
      <div class="ui divider"></div>
+
         respond to you at the same time. Let ideas fly!
 
+
      <form id="analysis-form" class="ui form">
+
         <label class="ui header">DNA Sequence</label>
+
        <textarea id="analysis-sequence" placeholder="Please input DNA sequence" rows="4"></textarea>
+
      </form>
+
 
+
      <div class="ui divider"></div>
+
 
+
      <div>
+
         <label class="ui header">Circuit Part import</label><br>
+
         <div class="ui compact floating selection dropdown" id="analysis-part-dropdown">
+
          <div class="text" id="analysis-part"></div>
+
          <i class="dropdown icon"></i>
+
        </div>
+
        <br>
+
        <div class="content">
+
          <label class="ui header" id="selected-part-text"> Sequence Selecting Area </label><br />
+
          <textarea id="selected-part-sequence" readonly="readonly" rows=3>Selected Part Sequence here</textarea>
+
        </div>
+
        <br>
+
        <div class="ui button" id="add-to-sequence-button"> add to sequence</div>
+
      </div>
+
 
+
      <div class="ui divider"></div>
+
 
+
      <label class="ui header">Chassis Selection</label><br>
+
      <div class="ui compact floating selection dropdown" id="analysis-chassis-dropdown">
+
        <div class="text" id="analysis-chassis"></div>
+
        <i class="dropdown icon"></i>
+
      </div>
+
 
+
      <div class="ui divider"></div>
+
 
+
      <label class="ui header">Chassis Mode Selection</label><br>
+
      <div class="ui compact floating selection dropdown" id="analysis-chassis-mode-dropdown">
+
        <div class="text" id="analysis-chassis-mode"></div>
+
        <i class="dropdown icon"></i>
+
      </div>
+
 
+
      <div class="ui divider"></div>
+
 
+
      <label class="ui header">Result Chart</label><br>
+
      <div id="myChart" style="width:500px; height:300px"></div>
+
 
+
      <div class="ui divider"></div>
+
 
+
      <button class="fluid ui button" id="analysis-sequence-button">Analysis</button>
+
 
     </div>
 
     </div>
  </div>
+
    <img src="https://static.igem.org/mediawiki/2018/e/ee/T--SYSU-Software--share-draw.gif" />
  
  <!-- protocol modal -->
 
  <div id="protocol-modal" class="ui tiny modal" style="overflow-y: scroll; max-height: 80%;">
 
    <div class="ui header"> protocol </div>
 
    <div class="content">
 
      <form class="ui form" id="protocol-form"> {% csrf_token %}
 
        <!-- using vue.js -->
 
  
        <div class="field">
+
    <div class="ui header4">SBOL Support</div>
          <label>Protocol Title</label>
+
          <input type="text" name="title" placeholder="Title...">
+
        </div>
+
        <div class="field">
+
          <label>Description</label>
+
          <textarea rows="3" name="description" placeholder="description here..."></textarea>
+
        </div>
+
 
+
        <div class="field" id="protocol-step-mountpoint">
+
          <!-- step item here -->
+
 
+
        </div>
+
 
+
        <div class="ui right floated primary button" id="protocol-step-add"> Add </div>
+
        <div class="ui button" id="protocol-submit">Submit</div>
+
 
+
        <!-- end using vue.js -->
+
      </form>
+
    </div>
+
  </div>
+
 
+
 
+
  <div class="ui page dimmer">
+
 
     <div class="content">
 
     <div class="content">
      <div class="ui text loader"></div>
+
        Files formatted in SBOL can be loaded in our software without any re-editing or configuration. This allows you
 +
        to collaborate seamlessly with people who are not currently using the same software as you.
 
     </div>
 
     </div>
  </div>
+
    <img src="https://static.igem.org/mediawiki/2018/e/eb/T--SYSU-Software--SBOL.png" />
 
+
  <!-- Source Circuit Modal-->
+
  <div id="source-circuit-modal" class="ui tiny modal">
+
  
 +
    <div class="ui header3">Spark Users Ideas</div>
 
     <div class="content">
 
     <div class="content">
      <div>
+
         High-efficient collaboration requires effective communication, and a proposal cannot be separated from a
         <h5 class="ui white header">Source Circuit</h5>
+
        summary of past successful experience, a deep understanding of previous designs. As regard for this, we have
      </div>
+
         developed several functions, hoping to enlighten users' inspiration and open up users' thoughts.
      <!-- <div id="part-src-seg" class="ui bottom attached active segment"></div> -->
+
      <div class="ui bottom attached active segment">
+
         <ul class="ui list" id="source-list"></ul>
+
      </div>
+
 
     </div>
 
     </div>
  </div>
 
  
  <!-- Advanced Search Modal -->
+
    <div class="ui header4">Search</div>
  <div id="advanced-search-modal" class="ui small modal">
+
 
     <div class="content">
 
     <div class="content">
      <h4 class="ui white header">Advanced Search</h4>
+
        Each year hundreds of teams participate in iGEM and lots of synthetic biology papers are published. By learning
      <div class="ui celled relaxed list">
+
         from successful examples from the past, you can refine your own project or make valuable suggestions for
         <div class="item">
+
        others' work. Our database include former iGEM and well-known journal projects which can be searched by
          <div class="ui master checkbox">
+
         keywords.
            <input type="checkbox" name="All" checked>
+
            <label>All</label>
+
          </div>
+
          <div class="list ui grid">
+
            {% for item in type_list %}
+
            <div class="item one wide cloumn segment">
+
              <div class="ui child checkbox">
+
                <input type="checkbox" name="{{ item }}">
+
                <label>{{ item }}</label>
+
              </div>
+
            </div>
+
            {% endfor %}
+
          </div>
+
         </div>
+
      </div>
+
      <p style="color:white"></p>
+
 
     </div>
 
     </div>
  </div>
+
    <img src="https://static.igem.org/mediawiki/2018/5/5c/T--SYSU-Software--Search.png" />
  
  <!-- Clear all modal -->
+
     <div class="ui header4"> Recommendation </div>
  <div id="clear-all-modal" class="ui basic modal">
+
     <div class="ui icon header">
+
      <i class="trash icon"></i>
+
      Clear canvas
+
    </div>
+
 
     <div class="content">
 
     <div class="content">
      <p>This will
+
         Our search module will automatically recommend projects with similar circuits based on the chosen parts in users' design.
         <b>REMOVE ALL ITEMS</b> in the canvas, click Yes below to confirm.</p>
+
 
     </div>
 
     </div>
     <div class="actions">
+
     <img style="width: 30%;" src="https://static.igem.org/mediawiki/2018/f/fb/T--SYSU-Software--recommend.png" />
      <div class="ui red basic cancel inverted button">
+
        <i class="remove icon"></i>
+
        No
+
      </div>
+
      <div class="ui green ok inverted button" id="real-clear-all-button">
+
        <i class="checkmark icon"></i>
+
        Yes
+
      </div>
+
    </div>
+
  </div>
+
  
  <!-- Simulation result modal -->
+
     <div class="ui header4"> Analysis </div>
  <div id="simulation-modal" class="ui tiny modal">
+
     <div class="header">Simulation</div>
+
    <div class="scrolling content">
+
      <div class="ui divider"></div>
+
      <div class="ui tabular menu" id="simulation-tab">
+
        <a class="active item" id="optimization-btn" data-tab="Optimization">Optimization</a>
+
        <a class="item" id="simulation-btn" data-tab="Simulation">Simulation</a>
+
      </div>
+
      <div class="ui bottom attached tab segment" data-tab="Simulation">
+
        <div class="ui content">
+
          <label class="ui header">Simulation Setting</label>
+
          <br />
+
          <div class="ui relaxed divided items" id="optimization-settings">
+
            <div class="item">
+
              <div class="subcontent">
+
                <div class="ui header">Reaction Time</div>
+
                <div class="field">
+
                  <div class="ui fluid right labeled input">
+
                    <input id="simulation-time" type="text" placeholder="k..." value="0">
+
                    <label for="amount" class="ui basic label">s</label>
+
                  </div>
+
                </div>
+
              </div>
+
            </div>
+
          </div>
+
        </div>
+
      </div>
+
      <div class="ui bottom attached tab segment active" data-tab="Optimization">
+
        <div class="ui content">
+
          <label class="ui header">Optimization Setting</label>
+
          <br />
+
          <div class="ui relaxed divided items" id="optimization-settings">
+
            <div class="item">
+
              <div class="subcontent">
+
                <div class="ui header">Reaction Time</div>
+
                <div class="field">
+
                  <div class="ui fluid right labeled input">
+
                    <input id="optimization-time" type="text" placeholder="k..." value="0">
+
                    <label for="amount" class="ui basic label">s</label>
+
                  </div>
+
                </div>
+
              </div>
+
            </div>
+
            <div class="item">
+
              <div class="subcontent">
+
                <div class="ui header">Target:[<span id="optimization-target">None</span>]</div>
+
                <div class="field">
+
                  <div class="ui fluidui labeled labeled input">
+
                    <input id="target-amount" type="text" id="amount_{{cid}}" data-id="{{cid}}" placeholder="Amount of substance..."
+
                      value="0">
+
                    <div class="ui basic label">mol</div>
+
                  </div>
+
                </div>
+
              </div>
+
            </div>
+
          </div>
+
        </div>
+
      </div>
+
      <label class="ui header">Substances Setting</label>
+
      <div class="ui divider"></div>
+
      <div class="ui relaxed divided items" id="simulation-amount-inputs">
+
      </div>
+
    </div>
+
    <div class="actions">
+
      <div class="ui two bottom attached big buttons">
+
        <div id="cancel-simulation" class="ui white cancel button">Cancel</div>
+
        <div id="show-simulation" class="ui blue button">Run Simulation</div>
+
      </div>
+
    </div>
+
  </div>
+
 
+
  <!-- simulation chart -->
+
  <div id="simulation-chart" class="ui small modal">
+
    <div class="header">Simulation Result</div>
+
    <div class="scrolling content">
+
      <div class="chart-container" id="chart-container"></div>
+
      <div class="ui divider"></div>
+
      <label class="ui header">K Optimization Result</label>
+
      <div class="ui divider"></div>
+
      <div class="ui relaxed divided items" id="new-ks-container">
+
      </div>
+
    </div>
+
    <div class="actions">
+
      <div class="ui one bottom attached big buttons">
+
        <div id="close-chart" class="ui white button">Close</div>
+
      </div>
+
    </div>
+
  </div>
+
  <!-- Save modal -->
+
  <div id="save-modal" class="ui tiny modal">
+
 
     <div class="content">
 
     <div class="content">
      <form class="ui form">
+
         Deeper understanding of the circuit design can help users put forward more constructive ideas. CO-RAD can
         <div class="field">
+
         calculate two common values, the CG and CAI values of components, to assist the user in deciding whether to
          <label>Design Name: <span id="save-circuit-name">1234</span></label>
+
         modify or optimize the components of the circuit.
         </div>
+
         <div class="field">
+
          <label>Design Description: <span id="save-circuit-description"></span></label>
+
        </div>
+
        <div class="field">
+
          <label>Update Comment</label>
+
          <textarea id="update-comment" rows=4 placeholder="Type your update comment here"></textarea>
+
        </div>
+
      </form>
+
 
     </div>
 
     </div>
     <div class="actions">
+
     <img style="width: 30%;" src="https://static.igem.org/mediawiki/2018/c/c0/T--SYSU-Software--analysis.png" />
      <div class="ui one bottom attached big buttons">
+
        <div id="save-circuit" class="ui white button">Update circuit!</div>
+
      </div>
+
    </div>
+
  </div>
+
  
  <!-- Save as new modal -->
+
    <div class="ui header4"> Simulation and evolutionary algorithm </div>
  <div id="save-as-new-modal" class="ui tiny modal">
+
 
     <div class="content">
 
     <div class="content">
      <form class="ui form">
+
         With mathmatical models, CO-RAD can analyze the circuit to provide a reference for him by simulating the
         <div class="field">
+
         expression of the product.
          <label>Design Name</label>
+
          <input type="text" name="name" id="save-as-new-circuit-name" placeholder="">
+
         </div>
+
        <div class="field">
+
          <label>Descrioption</label>
+
          <textarea id="save-as-new-circuit-description" rows=4 placeholder="Type your description here"></textarea>
+
        </div>
+
      </form>
+
 
     </div>
 
     </div>
    <div class="actions">
 
      <div class="ui one bottom attached big buttons">
 
        <div id="save-as-new-circuit" class="ui white button">Save my new circuit!</div>
 
      </div>
 
    </div>
 
  </div>
 
 
  <!-- Load modal -->
 
  <div id="load-modal" class="ui tiny modal">
 
 
     <div class="content">
 
     <div class="content">
      <div class="load-filter">
+
         We use evolutionary algorithm to assist the user in modifying his own circuit designs. After the user
         <label class="ui header">Your Circuits</label><br>
+
         determines the desired expression level, the algorithm simulates the process of reproduction, elimination,
        <div class="ui divider"></div>
+
         mutation, and iteratively obtains the optimal kinetics component dynamics parameters. These parameters can help
        <label class="ui header">Filter: </label>
+
         the user to modify or optimize their circuit design.
        <input id="focus-taker" style="width: 0px; opacity: 0; cursor: default" />
+
        <div class="ui fluid compact floating selection dropdown" id="circuit-filter-dropdown">
+
          <div class="text" id="circuit-filter"></div>
+
          <i class="dropdown icon"></i>
+
         </div><br>
+
         <div class="ui button" id="filter-clear">Clear </div>
+
         <div class="ui divider"></div>
+
      </div>
+
 
+
      <div class="user-circuits"></div>
+
 
     </div>
 
     </div>
  </div>
 
  
  <!-- Share modal -->
+
     <div class="oneLine">
  <div id="share-modal" class="ui tiny modal">
+
         <img style="width: 30%;" src="https://static.igem.org/mediawiki/2018/9/9e/T--SYSU-Software--simulation0.png" />
     <div class="content">
+
         <img style="width: 30%;" src="https://static.igem.org/mediawiki/2018/4/4a/T--SYSU-Software--simulation1.png" />
      <div class="ui vertical masthead center aligned segment">
+
         <div class="ui container">
+
          <div class="ui tabular menu" id="share-tab">
+
            <a class="active item" data-tab="View">View</a>
+
            <a class="item" data-tab="Edit">Edit</a>
+
          </div>
+
        </div><br>
+
 
+
        <select id="search-users-dropdown" class="ui fluid search dropdown" multiple="">
+
          <i class="dropdown icon"></i>
+
          <div class="default text">Search User...</div>
+
        </select>{% csrf_token %}
+
 
+
        <div class="ui divider"></div>
+
 
+
        <div class="ui bottom attached tab segment active" data-tab="View">
+
          <div class="ui content">
+
            <h5 class="ui center aligned">Viewers</h5>
+
            <div class="ui divider"></div>
+
            <div id="view-users"></div><br>
+
            <div class="ui primary button" id="share-view-button">Share view</div>
+
          </div>
+
         </div>
+
 
+
        <div class="ui bottom attached tab segment" data-tab="Edit">
+
          <div class="ui content">
+
            <h5 class="ui center aligned">Editors</h5>
+
            <div class="ui divider"></div>
+
            <div id="edit-users"></div><br>
+
            <div class="ui primary button" id="share-edit-button">Share edit</div>
+
          </div>
+
        </div>
+
      </div>
+
 
     </div>
 
     </div>
  </div>
 
 
  <!-- High risk modal -->
 
  <div id="safety-modal" class="ui basic modal">
 
    <div class="ui icon header">
 
      <i class="checkmark icon"></i>
 
      You have finished your circuit, congratulations!
 
    </div>
 
    <div class="content">
 
      <p>A control system, like a killer switch, may prevent biosafety problems and help your circuit work better in
 
        real world
 
        application.
 
      </p>
 
    </div>
 
    <div class="actions">
 
      <div class="ui red basic cancel inverted button">
 
        <i class="left chevron icon"></i>
 
        Back to design
 
      </div>
 
      <div class="ui green ok inverted button" id="continue-save">
 
        Continue to save
 
        <i class="right chevron icon"></i>
 
      </div>
 
    </div>
 
  </div>
 
 
  <!-- Chassis modal -->
 
  <div id="set-chassis-modal" class="ui tiny modal">
 
    <div class="content">
 
      <h5>Chassis</h5>
 
      <input id="focus-taker" style="width: 0px; opacity: 0; cursor: default" />
 
      <div class="ui compact floating selection dropdown" id="chassis-dropdown">
 
        <div class="text" id="chassis"></div>
 
        <i class="dropdown icon"></i>
 
      </div>
 
    </div>
 
    <div class="actions">
 
      <div class="ui one bottom attached big buttons">
 
        <div id="set-chassis-button" class="ui white button">Confirm</div>
 
      </div>
 
    </div>
 
  </div>
 
 
  <!-- Plasmid modal -->
 
  <!--  from 2015 SYSU-Software C.O.R.E. -->
 
  <div id="plasmid-modal" class="ui tiny modal">
 
    <div ng-app="myApp" ng-controller="PlasmidCtrl">
 
      <div class="content">
 
        <div class="plasmid-container">
 
          <plasmidapi name="api"></plasmidapi>
 
          <plasmid id="pdemo" sequencelength="{[currentPlasmid.length]}" plasmidheight="420" plasmidwidth="500">
 
            <plasmidtrack trackstyle="fill:rgba(225,225,225,0.5)" radius="120">
 
              <tracklabel text="{[currentPlasmid.name]}" labelstyle='font-size:20px;font-weight:400'></tracklabel>
 
              <tracklabel text="{[api.plasmid('pdemo').sequencelength]} bp" labelstyle='font-size:10px' vadjust="20"></tracklabel>
 
 
              <!-- draw the plasmid bone markers and labels -->
 
              <trackmarker ng-repeat="m in currentPlasmid.marker" start="{[m.start]}" end="{[m.end]}" arrowendlength="4"
 
                arrowstartlength="-4" markerstyle="{[m.markerStyleIn]}">
 
                <markerlabel type="path" class="mdlabel" text="{[m.name]}" vadjust='{[m.vadjust]}' valign="{[m.valign]}"
 
                  showline="1" linevadjust="-5" lineclass="labelline" style='font-size:17px'></markerlabel>
 
              </trackmarker>
 
 
              <!-- draw the marker regions -->
 
              <trackmarker ng-repeat="m in currentPlasmid.marker" start="{[m.start]}" end="{[m.end]}" markerstyle="{[m.markerStyleOut]}"
 
                wadjust="-5" vadjust="25"></trackmarker>
 
              <trackscale interval="100" style='stroke:#999' ticksize="3"></trackscale>
 
            </plasmidtrack>
 
 
            <plasmidtrack trackstyle="fill:rgba(225,225,225,0.5)" radius="110" width="10">
 
              <trackmarker ng-repeat="m in partList" start="{[m.start]}" end="{[m.end]}" markerstyle="{[m.getStyleIn()]}"
 
                sequence="{[m.sequence]}" ng-mousedown="showSequence(m)">
 
                <markerlabel class="mdlabel" text="{[m.name]}" type="path" style='font-size:13px'></markerlabel>
 
                <trackmarker ng-repeat="m in partList" start="{[m.start]}" end="{[m.end]}" markerstyle="{[m.getMarkerStyleOut()]}"
 
                  wadjust="-5" vadjust="-5"></trackmarker>
 
              </trackmarker>
 
              <trackscale interval="200" style="stroke:#f00" direction="in" showlabels="1" labelstyle="fill:#999;stroke:none;text-anchor:middle;alignment-baseline:middle;font-size:10px"></trackscale>
 
            </plasmidtrack>
 
          </plasmid>
 
          <div class="p" ng-hide="myHide" ng-model="myValue" style="padding: 10px; font-size: 1rem; line-height: 1.2rem; word-wrap: break-word">
 
            {[myValue]}
 
          </div>
 
        </div>
 
 
        <div class="plasmid-edit">
 
          <form class="ui form">
 
            <div class="field">
 
              <select class="ui dropdown" ng-model="curPlaIndex" ng-options="plasmids.indexOf(a) as a.name for a in plasmids">
 
                <option value="">Choose a plasmid</option>
 
              </select>
 
            </div>
 
            <div class="field">
 
              <select class="ui dropdown" ng-model="curPartType" ng-options="x for x in partType">
 
                <option value="">Choose a part type </option>
 
              </select>
 
            </div>
 
            <div class="field">
 
              <input placeholder="Part name" id="plasmid-part-name" type="text" ng-model="curPartName">
 
            </div>
 
            <div class="field">
 
              <input placeholder="Part begin" id="plasmid-part-begin" type="text" ng-model="currentPartBegin">
 
            </div>
 
            <div class="field">
 
              <input placeholder="Part end" id="plasmid-part-end" type="text" ng-model="curPartEnd">
 
            </div>
 
          </form>
 
        </div>
 
      </div>
 
      <div class="actions">
 
        <div class="ui three bottom attached big buttons">
 
          <div class="ui white button" ng-click="addNewPart()">ADD</div>
 
          <div class="ui white button" ng-click="goBack()">BACK</div>
 
          <div class="ui white button" ng-click="clearAllPart()">RESET</div>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
 
</body>
 
<div id="username-hack" style="display:none">{{username}}</div>
 
<div id="authorname-hack" style="display:none">{{authorname}}</div>
 
  
<script src="/static/js/jquery.min.js"></script>
+
    <div class="next-page-identify" data-value="4"></div> <!-- 这个是跳页标记 -->
<script src="/static/js/jquery-ui/jquery-ui.min.js"></script>
+
<script src="/static/js/jquery.mousewheel.min.js"></script>
+
<script src="/static/semantic/dist/semantic.js"></script>
+
<script src="/static/semantic/dist/components/popup.min.js"></script>
+
<script src="/static/semantic/dist/components/tab.min.js"></script>
+
<script src="/static/js/jsplumb.js"></script>
+
<script src="/static/js/html2canvas.min.js"></script>
+
<script src="/static/js/html2canvas.svg.min.js"></script>
+
<script src="/static/js/Chart.min.js"></script>
+
<!-- <script src="/static/js/echarts.js"></script> -->
+
<script src="/static/js/plasmid/angular.min.js"></script>
+
<script src="/static/js/plasmid/angularplasmid.min.js"></script>
+
<script src="/static/js/plasmid.js"></script>
+
<script src="/static/js/canvas.js"></script>
+
<script src="/static/js/design.js"></script>
+
{% if realtime %}
+
<script src="/static/js/realtime.js"></script>
+
<script src="/static/js/live-canvas.js"></script>
+
{% endif %}
+
  
</html>
+
</div>

Revision as of 17:22, 17 October 2018

Projects
Design
Overview
   <img src="T--SYSU-Software--designOverviewTrue.png">
       CO-RAD isn't just another question-and-answer community. It is an amazing experience specially made for
       synthetic biologists. Our real-time collaborative designer and synchronization sketchpad will make you feel
       like working side by side with your remote coworkers. The powerful databases and algorithms we provide empower
       you by stimulating your creativity, and you will find yourself doing a better job for your team efficiently.
New ways of collaboration:Face-to-Face D istant Collaboration
       For a long time, collaborative biology-designed collaboration software simply sent its
       questions to a website and waiting for someone to answer. This method becomes inefficient when the number of
       users is small. Instead of creating a Q&A site, we want to create a collaboration tool that everyone can use to
       help synthetic biologists overcome the inconvenience of remote collaboration and make remote collaboration as
       valid as face-to-face communication.
Visual Designer with Management Studio
       If you have a brilliant idea that you want to share with your colleagues right now, wouldn't it be wonderful if
       they can see it as you are writing it down? With our CO-RAD online design platform, team members can see each
       other's editions on the protocol in real time, as if they are using the same computer with multiple screens and
       input devices. You can also customize new tools via the platform for higher efficiency when you are editing
       relations between genetic circuits or writing experimental protocols. CO-RAD online design platform also comes
       with version control, so you don't ever need to worry about someone accidentally scrambling your protocol up!
   <img src="T--SYSU-Software--share-drag.gif" />


Synchronization Sketchpad
       It works like our Real-time Collaborative designer, but instead of making editorial contents on files or
       editing circuits, you get to doodle on a synchronization board and other people can see it as you draw and
       respond to you at the same time. Let ideas fly!
   <img src="T--SYSU-Software--share-draw.gif" />


SBOL Support
       Files formatted in SBOL can be loaded in our software without any re-editing or configuration. This allows you
       to collaborate seamlessly with people who are not currently using the same software as you.
   <img src="T--SYSU-Software--SBOL.png" />
Spark Users Ideas
       High-efficient collaboration requires effective communication, and a proposal cannot be separated from a
       summary of past successful experience, a deep understanding of previous designs. As regard for this, we have
       developed several functions, hoping to enlighten users' inspiration and open up users' thoughts.
Search
       Each year hundreds of teams participate in iGEM and lots of synthetic biology papers are published. By learning
       from successful examples from the past, you can refine your own project or make valuable suggestions for
       others' work. Our database include former iGEM and well-known journal projects which can be searched by
       keywords.
   <img src="T--SYSU-Software--Search.png" />
Recommendation
       Our search module will automatically recommend projects with similar circuits based on the chosen parts in users' design.
   <img style="width: 30%;" src="T--SYSU-Software--recommend.png" />
Analysis
       Deeper understanding of the circuit design can help users put forward more constructive ideas. CO-RAD can
       calculate two common values, the CG and CAI values of components, to assist the user in deciding whether to
       modify or optimize the components of the circuit.
   <img style="width: 30%;" src="T--SYSU-Software--analysis.png" />
Simulation and evolutionary algorithm
       With mathmatical models, CO-RAD can analyze the circuit to provide a reference for him by simulating the
       expression of the product.
       We use evolutionary algorithm to assist the user in modifying his own circuit designs. After the user
       determines the desired expression level, the algorithm simulates the process of reproduction, elimination,
       mutation, and iteratively obtains the optimal kinetics component dynamics parameters. These parameters can help
       the user to modify or optimize their circuit design.
       <img style="width: 30%;" src="T--SYSU-Software--simulation0.png" />
       <img style="width: 30%;" src="T--SYSU-Software--simulation1.png" />