Commit 28075124 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
parents 00941df5 d769ba13
......@@ -75,7 +75,7 @@ body
border-radius: 50%;
}
#draggable {
.draggable {
padding: 0px;
position: absolute;
z-index: -1;
......@@ -84,6 +84,33 @@ body
opacity: .5;
}
#draggable:hover {
.draggable:hover {
opacity: 1;
}
.title{
position: absolute;
top: 2%;
left: 6%;
width:100%;
height: 100%;
}
.title .info {
opacity: 0.5;
}
.title .info:hover{
opacity: 1;
}
#minimap{
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
}
#reportPage{
height: 940px !important;
}
\ No newline at end of file
......@@ -41,14 +41,27 @@ function dragElement(elmnt) {
function showGraph(){
if ($('.showChart').is(':visible')){
$("#draggable").css('z-index', 10);
$("#draggableChart").css('z-index', 10);
$(".showChart").hide();
$(".hideChart").show();
}else{
$("#draggable").css('z-index', -1);
$("#draggableChart").css('z-index', -1);
$(".showChart").show();
$(".hideChart").hide();
}
}
dragElement(document.getElementById("draggable"));
\ No newline at end of file
function showComparisons() {
if ($('.showImage').is(':visible')) {
$("#draggableImage").css('z-index', 10);
$(".showImage").hide();
$(".hideImage").show();
} else {
$("#draggableImage").css('z-index', -1);
$(".showImage").show();
$(".hideImage").hide();
}
}
dragElement(document.getElementById("draggableChart"));
dragElement(document.getElementById("draggableImage"));
\ No newline at end of file
......@@ -16,8 +16,7 @@ var map = new ol.Map({
view: new ol.View({
center: ol.proj.fromLonLat([-99.19, 19.61]),
zoom: 4,
minZoom:4,
maxZoom: 14
minZoom:4
})
});
......@@ -37,8 +36,8 @@ function addImageLayer(labelDate) {
projection: 'EPSG:3857',
url: getURL(purchase_id, zone, labelDate),
tilePixelRatio: 2,
minZoom: 9,
maxZoom: 14
minZoom: data.zoom.min,
maxZoom: data.zoom.max
})
});
......@@ -47,6 +46,8 @@ function addImageLayer(labelDate) {
var extent = ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent, {duration: 800})
map.getView().setMinZoom(data.zoom.min);
map.getView().setMaxZoom(data.zoom.max);
}
});
}
......
......@@ -166,5 +166,16 @@
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="showComparisons()">
<i class="fa fa-eye showImage"></i>
<i class="fa fa-eye-slash hideImage" style="display:none"></i>
<span class="showImage">Show Images</span>
<span class="hideImage" style="display:none">Hidden Images</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul>
</div>
\ No newline at end of file
......@@ -115,11 +115,14 @@
{% block content %}
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div class="text-center"><h1>{{ report_name }}</h1></div>
<div id="reportPage" class="wrapper">
<div id="minimap"></div>
<section class="content">
<div class="row">
<div class="col-md-12" style="margin-bottom: 15px;">
<div class="row col-lg-11 title">
<div class="text-center">
<h1>{{ report_name }}</h1>
</div>
<div class="col-md-12 info" style="margin-bottom: 15px;">
<div class="box box-success">
<div class="box-body with-border">
<div class="row">
......@@ -146,7 +149,7 @@
</div>
</div>
<div class="col-md-6" id="draggable">
<div class="col-md-6 draggable" id="draggableChart">
<!-- AREA CHART -->
<div class="box box-primary">
<div class="box-header with-border">
......@@ -172,43 +175,7 @@
</div>
<!-- /.col (LEFT) -->
<div class="col-md-4">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
<li ><a href="#images" data-toggle="tab">Images</a></li>
<li><a href="#compared" data-toggle="tab">Comparison</a></li>
<li><a href="#classification" data-toggle="tab">SCL</a></li>
<li class="active"><a href="#map" data-toggle="tab">Map</a></li>
</ul>
<div class="tab-content" style="padding: 0px">
<div class="tab-pane" id="images">
<div class="box box-danger">
<div class="box-header with-border">
<div class="pull-left">
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" onclick="play()">
<i class="fa fa-play"></i> Play
</button>
<button type="button" id="stop" class="btn btn-block btn-primary btn-xs" style="display: none; margin: 0px;"
onclick="stop()">
<i class="fa fa-stop"></i> Stop
</button>
</div>
<h3 class="box-title" id="titleMap" style="margin-left: -40px;">{{ defaultDataSet }}</h3>
</div>
<div class="box-body">
<div class="row img-comp-container">
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-2"
style="padding: 0px 0px 0px 42px;">
<img onclick="open_big_image(this.src)" width="375" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="compared">
<div class="col-md-4 draggable" id="draggableImage">
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" id="titleImageFirst">{{ defaultDataSet }}</h3>
......@@ -258,90 +225,6 @@
<!-- /.box-body -->
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="classification">
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" >Scene Classification Map - </h3>
<h3 class="box-title" id="titleSCL">{{ defaultDataSet }}</h3>
<!-- <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
</div> -->
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1" id="showImageSCL" style="position: relative; height: 550px; padding: 0px 0px 0px 42px;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_saturated"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_saturated.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_shadows"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_shadows.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_shadows"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_shadows.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_vegetation"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_vegetation.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_not-vegetated"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_not-vegetated.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_water"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_water.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_unclassified"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_unclassified.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_medium_probability"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_medium_probability.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_cloud_high_probability"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_cloud_high_probability.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_thin_cirrus"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_thin_cirrus.png"
style="position: absolute; top: 0; z-index:1;">
<img onclick="window.open(this.src)" class="img-responsive" id="scl_snow"
width="375"
height="400px" src="../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_snow.png"
style="position: absolute; top: 0; z-index:1;">
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane active" id="map">
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Map</h3>
</div>
<div class="box-body" style="max-height: 550px;">
<div id="minimap" style="height: 550px"></div>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
</div>
</div>
<!-- /.row -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment