Contours plugin UI mockup completed

plugins/contours/public/ContoursPanel.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Storage from 'webodm/classes/Storage';
 import L from 'leaflet';
 import './ContoursPanel.scss';
 
@@ -15,9 +16,13 @@ export default class ContoursPanel extends React.Component {
     super(props);
 
     this.state = {
-        error: ""
+        error: "",
+        interval: Storage.getItem("last_contours_interval") || "1",
+        customInterval: Storage.getItem("last_contours_custom_interval") || "1",
+        layer: "",
+        projection: Storage.getItem("last_contours_projection") || "4326",
+        customProjection: Storage.getItem("last_contours_custom_projection") || "4326",
     };
-
   }
 
   componentDidMount(){
@@ -45,12 +50,107 @@ export default class ContoursPanel extends React.Component {
             // });
   }
 
+  handleSelectInterval = e => {
+    this.setState({interval: e.target.value});
+  }
+
+  handleSelectLayer = e => {
+    this.setState({layer: e.target.value});
+  }
+
+  handleChangeCustomInterval = e => {
+    this.setState({customInterval: e.target.value});
+  }
+
+  handleSelectProjection = e => {
+    this.setState({projection: e.target.value});
+  }
+
+  handleChangeCustomProjection = e => {
+    this.setState({customProjection: e.target.value});
+  }
+
   render(){
-    const { error } = this.state;
+    const { error, interval, customInterval, layer, 
+            projection, customProjection } = this.state;
+    const intervalValues = [0.25, 0.5, 1, 1.5, 2];
 
     return (<div className="contours-panel">
       <span className="close-button" onClick={this.props.onClose}/>
       <div className="title">Contours</div>
+      <hr/>
+
+      <div className="row form-group form-inline">
+        <label className="col-sm-3 control-label">Interval:</label>
+        <div className="col-sm-9 ">
+          <select className="form-control" value={interval} onChange={this.handleSelectInterval}>
+            {intervalValues.map(iv => <option value={iv}>{iv} meter</option>)}
+            <option value="custom">Custom</option>
+          </select>
+        </div>
+      </div>
+      {interval === "custom" ? 
+        <div className="row form-group form-inline">
+          <label className="col-sm-3 control-label">Value:</label>
+          <div className="col-sm-9 ">
+            <input type="number" className="form-control custom-interval" value={customInterval} onChange={this.handleChangeCustomInterval} /><span> meter</span>
+          </div>
+        </div>
+      : ""}
+
+      <div className="row form-group form-inline">
+        <label className="col-sm-3 control-label">Layer:</label>
+        <div className="col-sm-9 ">
+          <select className="form-control" value={layer} onChange={this.handleSelectLayer}>
+            <option value="DSM">DSM</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="row form-group form-inline">
+        <label className="col-sm-3 control-label">Projection:</label>
+        <div className="col-sm-9 ">
+          <select className="form-control" value={projection} onChange={this.handleSelectProjection}>
+            <option value="4326">WGS84 (EPSG:4326)</option>
+            <option value="3857">Web Mercator (EPSG:3857)</option>
+            <option value="custom">Custom EPSG</option>
+          </select>
+        </div>
+      </div>
+      {projection === "custom" ? 
+        <div className="row form-group form-inline">
+          <label className="col-sm-3 control-label">EPSG:</label>
+          <div className="col-sm-9 ">
+            <input type="number" className="form-control custom-interval" value={customProjection} onChange={this.handleChangeCustomProjection} />
+          </div>
+        </div>
+      : ""}
+
+      <div className="text-right action-buttons">
+        <button type="button" className="btn btn-sm btn-primary btn-preview">
+          <i className="glyphicon glyphicon-eye-open"></i> Preview
+        </button>
+
+        <div className="btn-group">
+          <button type="button" className="btn btn-sm btn-primary" data-toggle="dropdown">
+            <i className="glyphicon glyphicon-download"></i> Export
+          </button>
+          <button type="button" className="btn btn-sm dropdown-toggle btn-primary" data-toggle="dropdown"><span className="caret"></span></button>
+          <ul className="dropdown-menu">
+            <li>
+              <a href="javascript:void(0);">
+                <i className="fa fa-map-o fa-fw"></i> Orthophoto (GeoTIFF)
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0);">
+                <i className="fa fa-map-o fa-fw"></i> Orthophoto (GeoTIFF)
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
     </div>);
   }
 }

plugins/contours/public/ContoursPanel.scss

@@ -1,6 +1,7 @@
 .leaflet-control-contours .contours-panel{
   padding: 6px 10px 6px 6px;
   background: #fff;
+  min-width: 250px; 
 
   .close-button{
     display: inline-block;
@@ -17,14 +18,56 @@
     left: 2px;
 
     &:hover{
-      opacity: 0.8;
+      opacity: 0.7;
       cursor: pointer;
     }
   }
 
   .title{
-    font-weight: bold;
+    font-size: 120%;
-    font-size: 1.2em;
     margin-right: 60px;
   }
+
+  hr{
+    clear: both;
+    margin: 6px 0px;
+    border-color: #ddd;
+  }
+
+  label{
+    padding-top: 5px;
+  }
+
+  select, input{
+    height: auto;
+    padding: 4px;
+  }
+
+  input.custom-interval{
+    width: 80px;
+  }
+
+  *{
+    font-size: 12px;
+  }
+
+  .row.form-group.form-inline{
+    margin-bottom: 8px;
+  }
+
+  .dropdown-menu{
+    a{
+      display: inline;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+
+  .btn-preview{
+    margin-right: 8px;
+  }
+
+  .action-buttons{
+    margin-top: 12px;
+  }
 }

plugins/contours/public/icon.svg

@@ -28,11 +28,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.959798"
+     inkscape:zoom="1.979899"
-     inkscape:cx="-65.608277"
+     inkscape:cx="-153.03452"
-     inkscape:cy="16.007396"
+     inkscape:cy="0.31522247"
      inkscape:document-units="mm"
-     inkscape:current-layer="g9575"
+     inkscape:current-layer="g831"
      showgrid="false"
      units="px"
      inkscape:window-width="1920"
@@ -48,7 +48,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -69,18 +69,24 @@
            id="g9575"
            transform="matrix(1.1918583,0,0,1.1960416,-1.0686423,-56.918136)"
            style="stroke-width:0.53201765">
-          <path
+          <g
-             sodipodi:nodetypes="csccc"
+             id="g831"
-             inkscape:connector-curvature="0"
+             transform="translate(0.45113764,-0.11484945)">
-             id="path9532"
+            <ellipse
-             d="m 3.4064611,291.13393 c 0,0 0.022801,-1.34122 2.0140667,-1.86864 1.2983538,-0.34388 2.1196879,-0.57583 2.5094666,0.49048 0.3528121,1.79557 -1.212855,2.51883 -2.7503154,2.36278 -1.5374604,-0.15611 -1.7515636,-0.38644 -1.7732179,-0.98462 z"
+               ry="1.9139358"
-             style="fill:none;stroke:#000000;stroke-width:1.33004403;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+               rx="2.7945361"
-          <path
+               cy="290.63126"
-             style="fill:none;stroke:#191919;stroke-width:1.06403522;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+               cx="5.5822544"
-             d="m 1.0135606,292.31786 c 0,0 -0.8044181,-4.93798 3.6086627,-5.1167 3.6494812,-0.14776 5.5427257,-1.87103 6.3857417,0.53578 0.763064,4.05294 -2.8340527,7.1556 -6.1592799,6.8034 -3.3252269,-0.3524 -3.7882901,-0.8723 -3.8351245,-2.22248 z"
+               id="path825"
-             id="path9536"
+               style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:1.33004403;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
-             inkscape:connector-curvature="0"
+            <ellipse
-             sodipodi:nodetypes="csccc" />
+               style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:1.06403518;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
+               id="ellipse827"
+               cx="5.5822544"
+               cy="290.63126"
+               rx="5.6119952"
+               ry="4.5824556" />
+          </g>
         </g>
       </g>
     </g>