Team:SYSU-Software/designer

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" 

xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Team:SYSU-Software</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link href="https://raw.github.com/lovedayluk/iGEM2013/master/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
<link href="https://2012.igem.org/Team:SYSU-Software/prefix.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >

<link href="https://2012.igem.org/Team:SYSU-Software/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
<link href="https://2012.igem.org/Team:SYSU-Software/flatui.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
<link href="https://2013.igem.org/Team:SYSU-Software/cast.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
<!-- <link href="cast_designer/css/cast_designer.css" rel="stylesheet" type="text/css" /> -->
<link href="https://2013.igem.org/Team:SYSU-Software/header.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />



<script src="https://2013.igem.org/Team:SYSU-Software/jquery-1.9.1.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2013.igem.org/Team:SYSU-Software/bootstrap.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2013.igem.org/Team:SYSU-Software/prefix.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2013.igem.org/Team:SYSU-Software/cast_designer.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<!-- <script src="cast_designer/cast_designer.js" type="text/javascript"></script> -->


<head>
<meta charset="utf-8">
<title>new</title>
</head>



<body>
	<!--header-->
	<div id="navigation"></div>
	<div class="wrapper">

		<!-- <div id="cast-header"> -->
			<!-- <img src="https://static.igem.org/mediawiki/2013/7/77/Cast-header-image.png"> -->
			<!-- </div> -->

		<div id="cast-introduction-header">
			<h1>
				CAST (Computer Aided Synbio Tool)- An Integrated Tool<br>
				for Synthetic Biology</h1>
		</div>
		<div id="part1" name="part1"class="cast-introduction-part cast-introduction-part1">
			<div class="introduction-content">
				<div class="introduction">
					<span class="cast-introduction-text-header">Gene circuit</span>
					<span>Followed by Regulation network part, CAST will generate default gene circuits automatically. Also, the circuits can be optimized by users according to special demand of materials or methods. Simultaneously, the simulation of this network will be displayed. The parameters of proteins can be adjusted by dragging the columns, and thus, the model will be real-time adjusted. Furthermore, we can view the model by detail; in the simulation window, users can compare some curves they concentrate, or view the model influenced by stochastic noise or time delay. Inducers' effects will be also reflected in the model.</span>
				</div>
				<div class="shots">
					<div>
						<div id="display-board">
							<div class='board-left board'><img src=""></div>
							<div class='board-right board'><span></span></div>
						</div>
						<img id="biobrick" src="https://static.igem.org/mediawiki/2013/2/2d/Cast_Biobrick.png" usemap="#biobirck-map">
						<map name="biobirck-map" id="biobirck-map">
							<area id="assembly" shape="rect" coords="116,25,188,45" href="#"/>
							<area id="simulating" shape="rect" coords="167,1,238,21" href="#"/>
							<area id="relationship" shape="rect" coords="254,24,326,44" href="#"/>
							<area id="parameter" shape="rect" coords="307,0,374,21" href="#"/>
						</map>
					</div>
					<div><img src="https://static.igem.org/mediawiki/2013/f/fb/SYSU-Gene_circuit.png"></div>
				</div>
			</div>
		</div>

		<div id="part2" name="part2"class="cast-introduction-part cast-introduction-part2">
			<div class="introduction-content">
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/1/1d/SYSU-Regulation_network.png"></div>
					<div><img src="https://static.igem.org/mediawiki/2013/6/6e/SYSU-Regulation_network1.png"></div>
					<!-- <div><img src="https://static.igem.org/mediawiki/2013/e/ef/Cast_Regulation_network3.png"></div> -->
				</div>
				<div class="introduction">
					<span class="cast-introduction-text-header">Regulation network:</span>
					<span>Protein is the basic functional unit of all purpose of life. We can programme the mechanism among proteins by constructing regulation network; meanwhile, this is also the step that users initially organize their ideas. In the Regulation network part, users can search all kinds of proteins that relates to synthetic biology and drag them in the blank and then arrange the regulatory relationship. Clicking on Protein A, three icons will show on other proteins (for example, protein B) that can be regulated by A. To click on the up arrow means A stimulate the expression of B (up-regulation) while the down arrow means repression (down-regulation). The chain icon means A and B are programmed to be co-expressed. Different regulatory factors are provided to meet the demand of regulatory method. Users can design their functional network but not gene circuits thus they can focus on the ideas without the bothering of technical questions.</span>
				</div>
			</div>
		</div>

		<div id="part3" name="part3"class="cast-introduction-part cast-introduction-part1">
			<div class="introduction-content">
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/b/bf/SYSU-Simulation1.png"></div>
				</div>
				<div class="introduction">
					<span class="cast-introduction-text-header">Simulation:</span>
					<span>We can view the model by detail. In the simulation window, users can focus on the interested protein and trace its change; or compare some curves they concentrate on. Furthermore, users may view the model influenced by stochastic noise or time delay.</span>
				</div>
			</div>
		</div>

		<div id="part4" name="part4" class="cast-introduction-part cast-introduction-part2">
			<div class="introduction-content">
				<div class="introduction">
					<span class="cast-introduction-text-header">Plasmid:</span>
					<span>As automation is our soul, the plasmid is constructed without your worrying. The plasmid will be presented intuitively and detailedly. Even better, you can select different assembly standard as you wish.</span>
				</div>
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/4/45/Cast-Plasmid03.png"></div>
				</div>
			</div>
		</div>

		<div id="part5" name="part5"class="cast-introduction-part cast-introduction-part1">
			<div class="introduction-content">
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/7/7d/Cast_Protocol.png"></div>
				</div>
				<div class="introduction">
					<span class="cast-introduction-text-header">Protocol:</span>
					<span>Being a amateur and find it hard to begin? Do not worry! CAST is a considerable assistant. Your can accomplish your synthetic biology design under our detailed direction.</span>
				</div>
			</div>
		</div>

		<div id="part6" name="part6"class="cast-introduction-part cast-introduction-part2">
			<div class="introduction-content">
				<div class="introduction">
					<span class="cast-introduction-text-header">Other functions:</span>
					<span>Aside from the basic functions listed above, there are some auxiliary functions which help a lot.</span>
				</div>
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/4/41/Cast-intruction-image.png"></div>
				</div>
			</div>
		</div>

		<div id="part7" name="part7"class="cast-introduction-part cast-introduction-part1">
			<div class="introduction-content">
				<div class="introduction">
					<span><b>Introduce Biobrick.</b> In the interface of user account, entering "my files", people can build and upload their novel biobricks by typing in the sequence and describe the parameters and type. These data can be edited and managed online.</span>
				</div>

				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/9/95/Cast-Introbiobrick.png"></div>
				</div>
			</div>
		</div>

		<div id="part8" name="part8"class="cast-introduction-part cast-introduction-part2">
			<div class="introduction-content">
				<div class="introduction">
					<!-- <span class="cast-introduction-text-header">Other functions:</span> -->
					<span><b>Output SBOL file.</b> The created biobricks will be compiled into SBOL automatically and thus users can get the file according to the information of the biobrick.</span>
				</div>
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/5/57/Cast_Output_SBOL_file.png"></div>
				</div>
			</div>
		</div>

		<div id="part9" name="part9"class="cast-introduction-part cast-introduction-part1">
			<div class="introduction-content">
				<div class="introduction">
					<!-- <span class="cast-introduction-text-header">Plasmid & protocol</span> -->
					<span><b>File sharing.</b> Not only the biobricks, but also the ideas can be shared by CAST. Users' result of their ideas: regulation network, plasmid constructed and simulation can be stored on CAST and shared between researchers.</span>
				</div>

				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/8/8d/Cast_File_sharing.png"></div>
				</div>
			</div>
		</div>


		<div id="part10" name="part8"class="cast-introduction-part cast-introduction-part2">
			<div class="introduction-content">
				<div class="introduction">
					<!-- <span class="cast-introduction-text-header">Other functions:</span> -->
					<span><b>Clotho apps</b>For clotho users, we have created a clotho app to open our software. The interface in clotho allow users open the server and web page at the same time.</span>
				</div>
				<div class="shots">
					<div><img src="https://static.igem.org/mediawiki/2013/8/86/SYSU-Clotho.png"></div>
				</div>
			</div>
		</div>
		<!--page footer-->
		<div id="sysu-footer">
			<img id="bottom-image" src="https://static.igem.org/mediawiki/2013/d/d9/Sysu-footer.png">
		</div>
	</div>
</body>
</html>