Team:GO Paris-Saclay/PlasmidSketcher
<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>
Contents
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" >
</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>