Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 450e2725 authored by Sergio Adrian Gongora Euan's avatar Sergio Adrian Gongora Euan
Browse files
Options

view in map

parent dd923837
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 171 deletions
reports/static/reports/css/scldata.css
View file @ 450e2725
...@@ -75,7 +75,7 @@ body ...@@ -75,7 +75,7 @@ body
border-radius: 50%; border-radius: 50%;
} }
#draggable { .draggable {
padding: 0px; padding: 0px;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
...@@ -84,6 +84,33 @@ body ...@@ -84,6 +84,33 @@ body
opacity: .5; opacity: .5;
} }
#draggable:hover { .draggable:hover {
opacity: 1; 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
reports/static/reports/js/draggable.js
View file @ 450e2725
...@@ -41,14 +41,27 @@ function dragElement(elmnt) { ...@@ -41,14 +41,27 @@ function dragElement(elmnt) {
function showGraph(){ function showGraph(){
if ($('.showChart').is(':visible')){ if ($('.showChart').is(':visible')){
$("#draggable").css('z-index', 10); $("#draggableChart").css('z-index', 10);
$(".showChart").hide(); $(".showChart").hide();
$(".hideChart").show(); $(".hideChart").show();
}else{ }else{
$("#draggable").css('z-index', -1); $("#draggableChart").css('z-index', -1);
$(".showChart").show(); $(".showChart").show();
$(".hideChart").hide(); $(".hideChart").hide();
} }
} }
dragElement(document.getElementById("draggable")); function showComparisons() {
\ No newline at end of file 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
reports/templates/aside.html
View file @ 450e2725
...@@ -166,5 +166,16 @@ ...@@ -166,5 +166,16 @@
</span> </span>
</a> </a>
</li> </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> </ul>
</div> </div>
\ No newline at end of file
reports/templates/sclData.html
View file @ 450e2725
...@@ -115,11 +115,14 @@ ...@@ -115,11 +115,14 @@
{% block content %} {% block content %}
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
<!-- Main content --> <!-- Main content -->
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5"> <div id="reportPage" class="wrapper">
<div class="text-center"><h1>{{ report_name }}</h1></div> <div id="minimap"></div>
<section class="content"> <section class="content">
<div class="row"> <div class="row col-lg-11 title">
<div class="col-md-12" style="margin-bottom: 15px;"> <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 box-success">
<div class="box-body with-border"> <div class="box-body with-border">
<div class="row"> <div class="row">
...@@ -146,7 +149,7 @@ ...@@ -146,7 +149,7 @@
</div> </div>
</div> </div>
<div class="col-md-6" id="draggable"> <div class="col-md-6 draggable" id="draggableChart">
<!-- AREA CHART --> <!-- AREA CHART -->
<div class="box box-primary"> <div class="box box-primary">
<div class="box-header with-border"> <div class="box-header with-border">
...@@ -172,174 +175,54 @@ ...@@ -172,174 +175,54 @@
</div> </div>
<!-- /.col (LEFT) --> <!-- /.col (LEFT) -->
<div class="col-md-4"> <div class="col-md-4 draggable" id="draggableImage">
<div class="nav-tabs-custom" id="tabs"> <div class="box box-danger">
<ul class="nav nav-tabs"> <div class="box-header with-border">
<li ><a href="#images" data-toggle="tab">Images</a></li> <h3 class="box-title" id="titleImageFirst">{{ defaultDataSet }}</h3>
<li><a href="#compared" data-toggle="tab">Comparison</a></li> <h3 class="box-title"> vs </h3>
<li><a href="#classification" data-toggle="tab">SCL</a></li> <h3 class="box-title" id="titleImageSecond">{{ defaultDataSet }}</h3>
<li class="active"><a href="#map" data-toggle="tab">Map</a></li> </div>
</ul> <div class="box-body">
<div class="tab-content" style="padding: 0px"> <div class="row img-comp-container">
<div class="tab-pane" id="images"> <div class="col-lg-3 col-md-2 col-xs-2 listImg">
<div class="box box-danger"> <label>Image 1</label>
<div class="box-header with-border"> <div class ="list" style="margin-bottom: 20px">
<div class="pull-left"> <ul id="imageListFirst">
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" onclick="play()"> {% for label in labels %}
<i class="fa fa-play"></i> Play {% if label == labels.0 %}
</button> <li class="active" onclick="selectImage1({{label}}, this)">{{ label }}</li>
<button type="button" id="stop" class="btn btn-block btn-primary btn-xs" style="display: none; margin: 0px;" {% else %}
onclick="stop()"> <li onclick="selectImage1({{label}}, this)">{{ label }}</li>
<i class="fa fa-stop"></i> Stop {% endif %}
</button> {% endfor %}
</div> </ul>
<h3 class="box-title" id="titleMap" style="margin-left: -40px;">{{ defaultDataSet }}</h3>
</div> </div>
<div class="box-body"> <label>Image 2</label>
<div class="row img-comp-container"> <div class="list">
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-2" <ul id="imageListSecond">
style="padding: 0px 0px 0px 42px;"> {% for label in labels %}
<img onclick="open_big_image(this.src)" width="375" id="satImage" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{ dafaultLabel }}_TCI_60m.jpg" {% if label == labels.1 %}
style="margin-left: auto; margin-right: auto; display: block;"> <li class="active" onclick="selectImage2({{label}}, this)">{{ label }}</li>
</div> {% else %}
</div> <li onclick="selectImage2({{label}}, this)">{{ label }}</li>
{% endif %}
{% endfor %}
</ul>
</div> </div>
<!-- /.box-body -->
</div> </div>
</div> <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-2 col-md-offset-1 col-xs-offset-2 img-comp-img" id="showImage"
<!-- /.tab-pane --> style="padding: 0px 0px 0px 42px;">
<div class="tab-pane" id="compared"> <img onclick="open_big_image(this.src)" width="375" id="satImageSecond" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.1}}_TCI_60m.jpg"
<div class="box box-danger"> style="margin-left: auto; margin-right: auto; display: block;">
<div class="box-header with-border">
<h3 class="box-title" id="titleImageFirst">{{ defaultDataSet }}</h3>
<h3 class="box-title"> vs </h3>
<h3 class="box-title" id="titleImageSecond">{{ defaultDataSet }}</h3>
</div>
<div class="box-body">
<div class="row img-comp-container">
<div class="col-lg-3 col-md-2 col-xs-2 listImg">
<label>Image 1</label>
<div class ="list" style="margin-bottom: 20px">
<ul id="imageListFirst">
{% for label in labels %}
{% if label == labels.0 %}
<li class="active" onclick="selectImage1({{label}}, this)">{{ label }}</li>
{% else %}
<li onclick="selectImage1({{label}}, this)">{{ label }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
<label>Image 2</label>
<div class="list">
<ul id="imageListSecond">
{% for label in labels %}
{% if label == labels.1 %}
<li class="active" onclick="selectImage2({{label}}, this)">{{ label }}</li>
{% else %}
<li onclick="selectImage2({{label}}, this)">{{ label }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-2 col-md-offset-1 col-xs-offset-2 img-comp-img" id="showImage"
style="padding: 0px 0px 0px 42px;">
<img onclick="open_big_image(this.src)" width="375" id="satImageSecond" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.1}}_TCI_60m.jpg"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
<div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-2 col-md-offset-1 col-xs-offset-2 img-comp-img img-comp-overlay"
id="showSecondImage" style="padding: 0px 0px 0px 42px;">
<img onclick="open_big_image(this.src)" width="375" id="satImageFirst" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.0}}_TCI_60m.jpg"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
</div>
</div>
<!-- /.box-body -->
</div> </div>
</div> <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-2 col-md-offset-1 col-xs-offset-2 img-comp-img img-comp-overlay"
<!-- /.tab-pane --> id="showSecondImage" style="padding: 0px 0px 0px 42px;">
<div class="tab-pane" id="classification"> <img onclick="open_big_image(this.src)" width="375" id="satImageFirst" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.0}}_TCI_60m.jpg"
<div class="box box-danger"> style="margin-left: auto; margin-right: auto; display: block;">
<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>
</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> </div>
<!-- /.tab-content --> <!-- /.box-body -->
</div> </div>
</div> </div>
</div> </div>
......
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