mason/breeders_toolbox/drone_imagery/generate_plot_polygons_section.mas

   1 <%args>
   2 $id_extension => ''
   3 </%args>
   4
   5 <div class="well well-sm">
   6     <div class="panel panel-default">
   7         <div class="panel-body">
   8             <div class="well well-sm">
   9                 <form class="form-horizontal">
  10                     <div class="row">
  11                         <div class="col-sm-6">
  12                             <div class="form-group form-group-sm">
  13                                 <label class="col-sm-6 control-label">Number of Rows: </label>
  14                                 <div class="col-sm-6">
  15                                     <input class="form-control" id="drone_imagery_plot_polygons_num_rows<% $id_extension %>" name="drone_imagery_plot_polygons_num_rows<% $id_extension %>" type="number" placeholder="Number of rows in image section" />
  16                                 </div>
  17                             </div>
  18                         </div>
  19                         <div class="col-sm-6">
  20                             <div class="form-group form-group-sm">
  21                                 <label class="col-sm-6 control-label">Number of Columns: </label>
  22                                 <div class="col-sm-6">
  23                                     <input class="form-control" id="drone_imagery_plot_polygons_num_cols<% $id_extension %>" name="drone_imagery_plot_polygons_num_cols<% $id_extension %>" type="number" placeholder="Number of columns in image section"/>
  24                                 </div>
  25                             </div>
  26                         </div>
  27                     </div>
  28                 </form>
  29             </div>
  30         </div>
  31     </div>
  32
  33     <div class="panel panel-default">
  34         <div class="panel-body">
  35
  36             <div class="row">
  37                 <div class="col-sm-12">
  38                     <h4> Either click the four corners of the area of interest: </h4>
  39
  40                     <button class="btn btn-sm btn-info" id="drone_imagery_plot_polygons_top_left_click<% $id_extension %>">Click Top Left Corner</button>
  41                     <button class="btn btn-sm btn-info" id="drone_imagery_plot_polygons_top_right_click<% $id_extension %>">Click Top Right Corner</button>
  42                     <button class="btn btn-sm btn-info" id="drone_imagery_plot_polygons_bottom_left_click<% $id_extension %>">Click Bottom Left Corner</button>
  43                     <button class="btn btn-sm btn-info" id="drone_imagery_plot_polygons_bottom_right_click<% $id_extension %>">Click Bottom Right Corner</button>
  44                 </div>
  45             </div>
  46             <hr>
  47
  48             <&| /page/info_section.mas, title => 'Template Parameters', collapsible=>1, collapsed => 1, subtitle=> 'View and edit template parameters. These parameters can be filled using the above button clicks' &>
  49                 <div class="well well-sm">
  50                     <form class="form-horizontal">
  51                         <div class="row">
  52                             <div class="col-sm-6">
  53                                 <div class="form-group form-group-sm">
  54                                     <label class="col-sm-6 control-label">Left-most Column Top Margin: </label>
  55                                     <div class="col-sm-6">
  56                                         <input class="form-control" id="drone_imagery_plot_polygons_left_column_top_offset<% $id_extension %>" name="drone_imagery_plot_polygons_left_column_top_offset<% $id_extension %>" type="number" value="0"/>
  57                                     </div>
  58                                 </div>
  59                             </div>
  60                             <div class="col-sm-6">
  61                                 <div class="form-group form-group-sm">
  62                                     <label class="col-sm-6 control-label">Left-most Column Bottom Margin: </label>
  63                                     <div class="col-sm-6">
  64                                         <input class="form-control" id="drone_imagery_plot_polygons_left_column_bottom_offset<% $id_extension %>" name="drone_imagery_plot_polygons_left_column_bottom_offset<% $id_extension %>" type="number" value="0"/>
  65                                     </div>
  66                                 </div>
  67                             </div>
  68                         </div>
  69                         <div class="row">
  70                             <div class="col-sm-6">
  71                                 <div class="form-group form-group-sm">
  72                                     <label class="col-sm-6 control-label">Top-most Row Left Margin: </label>
  73                                     <div class="col-sm-6">
  74                                         <input class="form-control" id="drone_imagery_plot_polygons_top_row_left_offset<% $id_extension %>" name="drone_imagery_plot_polygons_top_row_left_offset<% $id_extension %>" type="number" placeholder="Left offset of image section" value="0" />
  75                                     </div>
  76                                 </div>
  77                             </div>
  78                             <div class="col-sm-6">
  79                                 <div class="form-group form-group-sm">
  80                                     <label class="col-sm-6 control-label">Top-most Row Right Margin: </label>
  81                                     <div class="col-sm-6">
  82                                         <input class="form-control" id="drone_imagery_plot_polygons_top_row_right_offset<% $id_extension %>" name="drone_imagery_plot_polygons_top_row_right_offset<% $id_extension %>" type="number" placeholder="Left offset of image section" value="0" />
  83                                     </div>
  84                                 </div>
  85                             </div>
  86                         </div>
  87                         <div class="row">
  88                             <div class="col-sm-6">
  89                                 <div class="form-group form-group-sm">
  90                                     <label class="col-sm-6 control-label">Bottom-most Row Left Margin: </label>
  91                                     <div class="col-sm-6">
  92                                         <input class="form-control" id="drone_imagery_plot_polygons_bottom_row_left_offset<% $id_extension %>" name="drone_imagery_plot_polygons_bottom_row_left_offset<% $id_extension %>" type="number" placeholder="Left offset of image section" value="0" />
  93                                     </div>
  94                                 </div>
  95                             </div>
  96                             <div class="col-sm-6">
  97                                 <div class="form-group form-group-sm">
  98                                     <label class="col-sm-6 control-label">Right-most Column Bottom Margin: </label>
  99                                     <div class="col-sm-6">
 100                                         <input class="form-control" id="drone_imagery_plot_polygons_right_col_bottom_offset<% $id_extension %>" name="drone_imagery_plot_polygons_right_col_bottom_offset<% $id_extension %>" type="number" placeholder="Right-most column bottom offset" value="0" />
 101                                     </div>
 102                                 </div>
 103                             </div>
 104                         </div>
 105                     </form>
 106                 </div>
 107             </&>
 108
 109             <br/>
 110             <button class="btn btn-sm btn-primary" id="drone_imagery_plot_polygons_rectangles_apply<% $id_extension %>">Draw Plot Polygon Template (Does not save. Apply multiple templates if needed.)</button>
 111
 112         </div>
 113     </div>
 114
 115     <div class="panel panel-default">
 116         <div class="panel-body">
 117
 118             <div class="row">
 119                 <div class="col-sm-12">
 120                     <h4> Or paste a previously used template: </h4>
 121                 </div>
 122             </div>
 123
 124             <&| /page/info_section.mas, title => 'Previously Used Plot Polygon Templates', collapsible=>1, collapsed => 1, subtitle=> 'View and use previous plot polygon templates used on this field trial' &>
 125                 <div class="well well-sm">
 126                     <form class="form-horizontal">
 127                         <div class="row">
 128                             <div class="col-sm-12">
 129                                 <div class="form-group form-group-sm">
 130                                     <label class="col-sm-6 control-label">Previously Used Plot Polygon Templates For This Field Trial: </label>
 131                                     <div class="col-sm-6">
 132                                         <div id="plot_polygons_previously_saved_plot_polygon_templates<% $id_extension %>">
 133                                         </div>
 134                                     </div>
 135                                 </div>
 136                             </div>
 137                         </div>
 138                     </form>
 139                     <button class="btn btn-primary" id="plot_polygons_use_previously_saved_template<% $id_extension %>">Draw Plot Polygon Template (Does not save)</button>
 140                 </div>
 141             </&>
 142         </div>
 143     </div>
 144
 145     <div id="drone_imagery_plot_polygons_active_templates<% $id_extension %>"></div>
 146
 147 </div>