Difference between revisions of "Team:GO Paris-Saclay/PlasmidSketcher"

(Added)
 
m
Line 1: Line 1:
<!DOCTYPE html>
 
<html>
 
 
<meta charset="UTF-8">  
 
<meta charset="UTF-8">  
 
<!--
 
<!--

Revision as of 10:00, 10 June 2018

<meta charset="UTF-8">


   <head>
   
       <link rel="stylesheet" href="https://static.igem.org/mediawiki/2018/1/1a/T--GO_Paris-Saclay--ps.txt">
       <script src="https://static.igem.org/mediawiki/2018/4/49/T--GO_Paris-Saclay--angular.txt"></script>
       <script src='https://static.igem.org/mediawiki/2018/c/c9/T--GO_Paris-Saclay--plasmid_sketcher.txt'></script>
       
       <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
       <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
   


   </head>
   <body  ng-controller="plasmidController as pc">
       
        <md-toolbar class="md-menu-toolbar">
     <md-toolbar-filler layout layout-align="center center">
       <md-icon md-svg-icon="baseline-data_usage-24px.svg" style="color: white;"></md-icon>
     </md-toolbar-filler>

Plasmid Sketcher

       <md-menu-bar>
         <md-menu>
           <button ng-click="$mdMenu.open()">
             File
           </button>
           <md-menu-content>
             <md-menu-item>
               <md-button ng-click="pc.globalMenuAction('new', $event)">
                 New
               </md-button>
             </md-menu-item>
             <md-menu-divider></md-menu-divider>
             
           </md-menu-content>
         </md-menu>
         <md-menu>
           <button ng-click="$mdMenu.open()">
             Plasmid properties
           </button>
           <md-menu-content>
             <md-menu-item>
               <md-button ng-click="pc.globalMenuAction('editlabel', $event)">
                 Edit plasmid label
               </md-button>
             </md-menu-item>
             <md-menu-divider></md-menu-divider>
             
           </md-menu-content>
         </md-menu>
       </md-menu-bar>
 </md-toolbar>



               <plasmid sequencelength="1000" plasmidheight="800" plasmidwidth="800">
                   <plasmidtrack trackstyle="fill:rgba(0,0,0,0)" width="0" radius="220">
                       <tracklabel text="Template:Pc.plasmidtitle"  class="titlelabel" vadjust="0"></tracklabel>
                       <tracklabel text="Template:Pc.plasmidsubtitle"  class="subtitlelabel" vadjust="30"></tracklabel>
                   </plasmidtrack>
                   
                   
                   
                   
                   <plasmidtrack trackstyle="fill:#ccc" width="5" radius="240"></plasmidtrack>
                   <plasmidtrack trackstyle="fill:rgba(225,225,225,0.5)" width="50" radius="220">

</plasmidtrack>


                       <plasmidtrack trackstyle="fill:rgba(0,0,0,0)" width="50" radius="220" ng-repeat="marker in pc.markers"> 
                       <trackmarker start="Template:Marker.position" markerstyle="stroke:rgba(128,64,64,0.8);stroke-width:0.6px;" class="boundary" wadjust="60" ng-if="marker.type =='Restriction site'">
                           <markerlabel class="vsmlabel red" text="Template:Marker.text" vadjust="Template:Marker.spec attr.lheight"></markerlabel>
                       </trackmarker>
                       
                       
                       <trackmarker start="Template:Marker.position" markerstyle="stroke:rgba(128,64,64,0.8);stroke-width:.6px;" class="boundary" wadjust="Template:Marker.spec attr.height - 15" ng-if="marker.type =='Restriction pair'">
                           <markerlabel class="vsmlabel red" text="Template:Marker.spec attr.border1" vadjust="Template:Marker.spec attr.lheight + 25"></markerlabel>
                       </trackmarker>
                       <trackmarker start="Template:Marker.position + marker.length" markerstyle="stroke:rgba(128,64,64,0.8);stroke-width:.6px;" class="boundary" wadjust="Template:Marker.spec attr.height - 15" ng-if="marker.type =='Restriction pair'">
                           <markerlabel class="vsmlabel red" text="Template:Marker.spec attr.border2" vadjust="Template:Marker.spec attr.lheight + 25"></markerlabel>
                       </trackmarker>
                       <trackmarker start="Template:Marker.position" end="Template:Marker.position + marker.length" markerstyle="fill:Template:Marker.spec attr.fillcolor"  wadjust="-12" vadjust="Template:Marker.spec attr.height" ng-if="marker.type =='Restriction pair'">
                       <markerlabel type="path" text="Template:Marker.text" class="smlabel red" vadjust="5"></markerlabel>
                       </trackmarker>
                       
                       
                       <trackmarker start="Template:Marker.position" end="Template:Marker.position + marker.length" markerstyle='stroke:#000000;fill:Template:Marker.spec attr.fillcolor;' arrowstartlength="5" arrowstartwidth="3" wadjust="5" vadjust="-0"  ng-if="marker.type =='Promoter' && marker.spec_attr.reverse == true">
                           <markerlabel text="Template:Marker.text" vadjust="Template:Marker.spec attr.lheight" hadjust="Template:Marker.spec attr.angle" valign="outer" class="smlabel gold" showline="1" linevadjust="-5" linevadjust="-15" lineclass="labelline"></markerlabel>
                       </trackmarker>
                       <trackmarker start="Template:Marker.position" end="Template:Marker.position + marker.length" markerstyle='stroke:#000000;fill:Template:Marker.spec attr.fillcolor;' arrowendlength="5" arrowendwidth="3"  vadjust="0" wadjust="5" ng-if="marker.type =='Promoter' && marker.spec_attr.reverse == false">
                           <markerlabel text="Template:Marker.text" vadjust="Template:Marker.spec attr.lheight" hadjust="Template:Marker.spec attr.angle" valign="outer" class="smlabel gold" showline="1" linevadjust="-5" linevadjust="-15" lineclass="labelline"></markerlabel>
                       </trackmarker>
                       
                       
                       <trackmarker start="Template:Marker.position" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;stroke-dasharray:2,2" vadjust="-10" wadjust="20" ng-if="marker.type =='RBS'" >
                           <markerlabel text="RBS" class="vsmlabel purple" valign="inner" vadjust="Template:-8-marker.spec attr.angle"></markerlabel>
                       </trackmarker>
                       
                       
                       <trackmarker start="Template:Marker.position" end="Template:Marker.position + marker.length" markerstyle='stroke:#000;fill:Template:Marker.spec attr.fillcolor;'  wadjust="0" vadjust="0" ng-if="marker.type =='CDS' && marker.spec_attr.reverse == false">
                           <markerlabel type="path" class="mdlabel white" text="Template:Marker.text" vadjust="5"></markerlabel>
                       </trackmarker>
                       
                       <trackmarker start="Template:Marker.position" end="Template:Marker.position + marker.length" markerstyle='stroke:#000;fill:Template:Marker.spec attr.fillcolor;'  wadjust="0" vadjust="0" ng-if="marker.type =='CDS' && marker.spec_attr.reverse == true">
                           <markerlabel vadjust="Template:Marker.spec attr.lheight" hadjust="Template:Marker.spec attr.angle" valign="outer" class="smlabel gold" showline="1" linevadjust="-5" linevadjust="-15" lineclass="labelline" text="Template:Marker.text"></markerlabel>
                       </trackmarker>
                       
                       <trackmarker start="Template:Marker.position" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px" vadjust="-10" wadjust="20" ng-if="marker.type =='Terminator'">
                           <markerlabel text="Template:Marker.text" class="vsmlabel purple" valign="inner" vadjust="Template:-10-marker.spec attr.angle"></markerlabel>
                       </trackmarker>
                       <trackmarker start="Template:Marker.position + 2" markerstyle="stroke:rgba(255,0,0,.3);stroke-width:1px;" vadjust="-10" wadjust="20" ng-if="marker.type =='Terminator'">
                       </trackmarker>
                       
                       
                       
                       <trackmarker start="Template:Marker.position" end="Template:Marker.position + marker.length" markerstyle='stroke:#000;fill:rgba(0,100,100,1);'  wadjust="0" vadjust="0" ng-if="marker.type =='Misc block'">
                           <markerlabel type="path" text="Template:Marker.text" class="vsmlabel white" vadjust="5"></markerlabel>
                       </trackmarker>
                       
                   </plasmidtrack>
                       
                       
                       
                       
                   




               </plasmid>
                 <md-toolbar class="md-theme-light" >

Features

     <md-button aria-label="Create new feature" class="md-icon-button" ng-click="pc.addMarker()">
       <md-icon md-menu-origin md-svg-icon="baseline-add-24px.svg" style="color: white;"></md-icon>
     </md-button>
     
               </md-toolbar>


               <md-content>
                   <md-list md-virtual-repeat-container style="height:300px">
                   <md-list-item class="md-3-line" ng-repeat="marker in pc.markers" ng-click="pc.selectMarker($index)" ng-class="{selectedMarker: selectedMarker===$index}">
                        <md-button class="md-secondary" ng-click="pc.deleteMarker($index)">Delete</md-button>
                       <md-divider ng-if="!$last"></md-divider>
                   </md-list-item>
                   </md-list>
               </md-content>
                  
               <md-toolbar class="md-theme-light" >
               </md-toolbar>
                   <md-content layout="row" layout-padding>
                       <md-input-container>
                           <label>Text</label>
                           <input ng-model="pc.currMarkerEdited.text">
                       </md-input-container>
                    <md-slider-container >
                       <label>Position </label>
                       <md-slider min="0" max="1000" ng-model="pc.markers[pc.selectedMarkerIdx].position" aria-label="position" id="red-slider" class="md-warn">
                       </md-slider>
                   </md-slider-container>
                    <md-input-container>
                    <label>Manual positioning</label>
                           <input type="number" ng-min="0" ng-max="1000" ng-model="pc.markers[pc.selectedMarkerIdx].position" aria-label="position" aria-controls="red-slider">
                       </md-input-container>
                        <md-input-container>
                        <label>Remarks : </label>
                       <textarea name="remark" ng-model="pc.markers[pc.selectedMarkerIdx].remark"></textarea>
                        </md-input-container>
                       
                       <md-input-container>
                        <label>Type : </label>
                               <md-select ng-model="pc.markers[pc.selectedMarkerIdx].type" placeholder="Feature type"  class="md-no-underline">
                                   <md-option value="Restriction site">Restriction site</md-option>
                                   <md-option value="Restriction pair">Restriction pair</md-option>
                                   <md-divider></md-divider>
                                   <md-option value="Promoter">Promoter</md-option>
                                   <md-option value="RBS">RBS</md-option>
                                   <md-option value="CDS">CDS</md-option>
                                   <md-option value="Terminator">Terminator</md-option>
                                   <md-divider></md-divider>
                                   <md-option value="Misc">Misc block</md-option>
                               </md-select>
                       </md-input-container>
                       


                           <md-slider-container >
                           <label>Length </label>
                           <md-slider min="0" max="1000" ng-model="pc.markers[pc.selectedMarkerIdx].length" aria-label="position" id="red-slider" class="md-warn"> 
                           </md-slider>{{pc.markers[pc.selectedMarkerIdx].length}} (end : {{pc.markers[pc.selectedMarkerIdx].position + pc.markers[pc.selectedMarkerIdx].length}})
                           </md-slider-container>
                           <md-input-container>
                           <label>First site</label>
                           <input ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.border1">
                           </md-input-container>
                           <md-input-container>
                           <label>Second site</label>
                           <input ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.border2">
                           </md-input-container>
                           
                           <md-input-container>
                        <label>Color : </label>
                       <md-select ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.fillcolor" placeholder="Fill color"  class="md-no-underline">
                                   <md-option value="#ba583b1f">Default</md-option>
                                   <md-option value="#0000001f">Black (light)</md-option>
                                   <md-option value="#0000005f">Black (dark)</md-option>
                                   <md-divider></md-divider>
                                   <md-option ng-repeat="color in pc.colors" md-colors="{background: 'Template:Color'}" value="Template:Pc.mdcolors.getThemeColor(color + '-500-0.4')">Template:Color</md-option>
                       </md-input-container>
                       <md-slider-container >
                           <label>Height </label>
                           <md-slider min="0" max="200" ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.height" aria-label="heigth" > 
                           </md-slider>{{pc.markers[pc.selectedMarkerIdx].spec_attr.height}}
                           </md-slider-container>
                       


                           <md-slider-container >
                           <label>Length </label>
                           <md-slider min="0" max="300" ng-model="pc.markers[pc.selectedMarkerIdx].length" aria-label="length" id="red-slider" class="md-warn"> 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].length}} (end : {{pc.markers[pc.selectedMarkerIdx].position + pc.markers[pc.selectedMarkerIdx].length}})
                           </md-slider-container>
                           
                           <md-input-container>
                           <label>Color : </label>
                           <md-select ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.fillcolor" placeholder="Fill color"  class="md-no-underline">
                                       <md-option md-colors="{background: #ff0}" value="#ff0">Yellow !</md-option>
                                       <md-divider></md-divider>
                                       <md-option ng-repeat="color in pc.colors" md-colors="{background: 'Template:Color'}" value="Template:Pc.mdcolors.getThemeColor(color + '-500-1')">Template:Color</md-option>
                           </md-input-container>
                             <md-switch ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.reverse" aria-label="Reverse sense switch">Reverse </md-switch>
                           <md-slider-container >
                           <label>Angle </label>
                           <md-slider min="-50" max="50" ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.angle" aria-label="angle" > 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].spec_attr.angle}}
                           </md-slider-container> 
                             
                           <md-slider-container >
                           <label>Height </label>
                           <md-slider min="0" max="30" ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.angle" aria-label="height_rbs" > 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].spec_attr.angle}}
                           </md-slider-container>
                           
                             


                           <md-slider-container >
                           <label>Length </label>
                           <md-slider min="0" max="900" ng-model="pc.markers[pc.selectedMarkerIdx].length" aria-label="length" id="red-slider" class="md-warn"> 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].length}} (end : {{pc.markers[pc.selectedMarkerIdx].position + pc.markers[pc.selectedMarkerIdx].length}})
                           </md-slider-container>
                           
                           <md-input-container>
                           <label>Color : </label>
                           <md-select ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.fillcolor" placeholder="Fill color"  class="md-no-underline">
                                       <md-option ng-repeat="color in pc.colors" md-colors="{background: 'Template:Color'}" value="Template:Pc.mdcolors.getThemeColor(color + '-500-1')">Template:Color</md-option>
                           </md-input-container>
                           
                           <md-switch ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.reverse" aria-label="Reverse sense switch">Outer label </md-switch>
                           <md-slider-container ng-if="pc.markers[pc.selectedMarkerIdx].spec_attr.reverse == true">
                           <label>Angle </label>
                           <md-slider min="-50" max="50" ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.angle" aria-label="angle" > 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].spec_attr.angle}}
                           </md-slider-container> 
                             


                           <md-slider-container >
                           <label>Height </label>
                           <md-slider min="0" max="30" ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.angle" aria-label="height_rbs" > 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].spec_attr.angle}}
                           </md-slider-container>
                           
                             
                           <md-slider-container >
                           <label>Length </label>
                           <md-slider min="0" max="300" ng-model="pc.markers[pc.selectedMarkerIdx].length" aria-label="position" id="red-slider" class="md-warn"> 
                           </md-slider>
                           {{pc.markers[pc.selectedMarkerIdx].length}} (end : {{pc.markers[pc.selectedMarkerIdx].position + pc.markers[pc.selectedMarkerIdx].length}})
                           </md-slider-container>
                           
                             



                    <md-button ng-click="pc.toggleAdvSidenav()"
                       class="md-primary">
                       Advanced
                   </md-button>   


                   </md-content>
   <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="advSideNav">
     <md-toolbar class="md-theme-light">

Advanced properties

     </md-toolbar>
     <md-content layout-padding>
          <md-slider-container >
                           <label>Label height (vadjust)</label>
                           <md-slider min="-100" max="100" ng-model="pc.markers[pc.selectedMarkerIdx].spec_attr.lheight" aria-label="labelheight"> 
                           </md-slider>
                           
{{pc.markers[pc.selectedMarkerIdx].spec_attr.lheight}} </md-slider-container> <md-button ng-click="pc.closeAdvSidenav()" class="md-primary"> Close </md-button> </md-content>


       </div>  
       
   </body>

</html>