|
|
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> |