Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 130abd45 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

descripcion reportes

parent 8e44387e
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 84 deletions
reports/static/reports/css/scldata.css
View file @ 130abd45
......@@ -350,7 +350,7 @@ a[disabled="disabled"] {
.fas.fa-chevron-right {
position: absolute;
right: 0;
right: 0;
top: 40%;
margin-right: 5px;
color: rgba(0,60,136,.5);
......
reports/static/reports/js/draggable.js
View file @ 130abd45
......@@ -39,15 +39,21 @@ function dragElement(elmnt) {
}
}
function showGraph(type=false){
if ($('.showChart').is(':visible') || type==true){
function showGraph(type = false) {
if ($('.showChart').is(':visible') || type == true) {
$("#draggableChart").css('z-index', 10);
$(".showChart").hide();
$(".hideChart").show();
}else{
sessionStorage.showChart = true;
} else {
$("#draggableChart").css('z-index', -1);
$(".showChart").show();
$(".hideChart").hide();
sessionStorage.showChart = false;
}
}
......
reports/static/reports/js/minimap.js
View file @ 130abd45
MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
MAX_OPACITY = 1;
FIRST_IMAGE_LAYER_INDEX = 2;
document.getElementById("light").checked=true;
document.getElementById("light").checked = true;
// create wkt polygon
const wktFormat = new ol.format.WKT();
......@@ -35,8 +35,8 @@ const night = new ol.layer.Tile({
const cycle = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
}),
url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
}),
});
......@@ -92,9 +92,11 @@ function addImageLayer(data) {
}
// remove old layers and add layers with new date
let current = []
function changeLayers(especific_layerName) {
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
removeLayer(especific_layerName);
layersToChance.forEach(layerName => {
......@@ -114,6 +116,7 @@ function changeLayers(especific_layerName) {
}
layers.set(layerName, xyz);
sessionStorage.setItem(layerName,layerName); // replace
});
}
......@@ -129,6 +132,7 @@ function removeLayer(layerName) {
map.removeLayer(layers.get(layerName));
layers.delete(layerName);
sessionStorage.layers = layers;
}
// set opacity to layers
......@@ -138,6 +142,7 @@ function setOpacity(value) {
layer.setOpacity(value)
}
})
sessionStorage.layerOpacity = value;
}
......@@ -164,13 +169,13 @@ var ctrl = new ol.control.Swipe();
//recibe la lista de fechas y por default compara la primera y la ultima
function compare(labels) {
var swipeControl = false;
//oculta la grafica si esta abierta
$("#draggableChart").css('z-index', -1);
$(".showChart").show();
$(".hideChart").hide();
//desactiva el botón de mostrar la gráfica
$('#showGraph').attr('disabled',true);
$('#showGraph').attr('disabled', true);
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega
if (control instanceof ol.control.Swipe) { //si ya tiene el control agregado
......@@ -189,8 +194,6 @@ function compare(labels) {
var labelDateRight = labels[labels.length - 1]
//pone las fechas por default en los selectores de fechas
//document.getElementById("selectLeftCompare").value = labelDateLeft;
//document.getElementById("selectRightCompare").value = labelDateRight;
......@@ -227,9 +230,9 @@ function exitCompare() {
document.getElementById("selectLeft").style.display = "none";
document.getElementById("selectRight").style.display = "none";
document.getElementById("timeLine").style.display = "block";
//activa el boton de la grafica
$('#showGraph').attr('disabled',false);
$('#showGraph').attr('disabled', false);
}
......@@ -295,9 +298,11 @@ function setCompareDirection(direction) {
//******************************
/************************* Functions de layer Sources ******************************/
let currentMap = light;
function changeMap(selectedMap) {
sessionStorage.selectepMap = selectedMap;
map.getLayers().getArray().forEach(function (layer) {
if (layer.values_.name == "mapbox") {
map.removeLayer(layer)
......@@ -325,7 +330,7 @@ function changeMap(selectedMap) {
}
function showControlMap() {
if ($('#showControlMap').is(':visible')) {
$("#showControlMap").hide();
$("#hideControlMap").show();
......
reports/static/reports/js/reportImg.js
View file @ 130abd45
......@@ -22,14 +22,14 @@ document.getElementById("myChart").onclick = function (evt) {
// activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt);
if(activePoint.length>0){
if (activePoint.length > 0) {
var firstPoint = activePoint[0];
var label = myChart.data.labels[firstPoint._index];
//console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
addImageLayer({
layerDate: label
layerDate: label
});
// update date slider
......@@ -53,37 +53,38 @@ document.getElementById("myChart").onclick = function (evt) {
};
function play() {
$("#play").hide();
$("#stop").show();
// $(".next").hide();
// $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1');
playImages = setInterval(function () { next(); }, 4000);
playImages = setInterval(function () {
next();
}, 4000);
}
//****************************
//****************************
function scl_on(imagePoint) {
console.log("scl on!!")
label = imagePoint;
//console.log({{SCL_PATH}})
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{SCL_PATH}}" + label + "_SCL_60m_clasificationMap.png"
// $(".next").show();
// $(".prev").show();
console.log("scl on!!")
label = imagePoint;
//console.log({{SCL_PATH}})
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{SCL_PATH}}" + label + "_SCL_60m_clasificationMap.png"
// $(".next").show();
// $(".prev").show();
}
function open_big_image(image) {
console.log("Opening big image")
console.log("image:")
console.log(image)
image_big = image.replace("/thumbnails", "");
console.log(image_big)
window.open(image_big)
// $(".next").show();
// $(".prev").show();
console.log("Opening big image")
console.log("image:")
console.log(image)
image_big = image.replace("/thumbnails", "");
console.log(image_big)
window.open(image_big)
// $(".next").show();
// $(".prev").show();
}
//********************************
function stop() {
......@@ -143,6 +144,8 @@ function updateImage(imagePoint) {
}
function change(newType) {
sessionStorage.charttype = newType;
var ctx = document.getElementById("myChart").getContext("2d");
// Remove the old chart and all its event handles
......@@ -153,14 +156,12 @@ function change(newType) {
// Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later
// -------------- set last values when the chart was destroyed ------
let selectedLayers = getSelectedLayersName().map( layerName => {
const layerCheckbox = $(':checkbox[value='+layerName+']');
let selectedLayers = getSelectedLayersName().map(layerName => {
const layerCheckbox = $(':checkbox[value=' + layerName + ']');
return layerCheckbox.parent().attr('id')
});
selectedLayers = selectedLayers.filter(layerId => layerId!=null);
selectedLayers = selectedLayers.filter(layerId => layerId != null);
selectedLayers = selectedLayers.map(layerId => layerId.replace('sclcheck-', '').replace('-', ' '));
config.data.datasets.forEach(data => {
......@@ -175,28 +176,29 @@ function change(newType) {
var temp = jQuery.extend(true, {}, config);
if (newType == "stackedBar"){
if (newType == "stackedBar") {
temp.type = "bar";
temp.options.scales.xAxes = [{ "stacked": true }];
temp.options.scales.yAxes = [{ "stacked": true }];
}else{
temp.options.scales.xAxes = [{"stacked": true}];
temp.options.scales.yAxes = [{"stacked": true}];
} else {
temp.type = newType;
if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') {
temp.options.scales.xAxes = [{ "display": false, "stacked": false }];
temp.options.scales.yAxes = [{ "display": false, "stacked": false }];
temp.options.scales.xAxes = [{"display": false, "stacked": false}];
temp.options.scales.yAxes = [{"display": false, "stacked": false}];
}
}
myChart = new Chart(ctx, temp);
showGraph(true)
//showGraph(true)
};
let img, imgWidth=0, slider=false, clicked=0;
let img, imgWidth = 0, slider = false, clicked = 0;
function initComparisons() {
// $("#showSecondImage").show()
// setTimeout(function() {
img = document.getElementsByClassName("img-comp-overlay")[0];
compareImages(img);
img = document.getElementsByClassName("img-comp-overlay")[0];
compareImages(img);
//});
// setTimeout(function(){
// img = document.getElementsByClassName("img-comp-overlay")[0];
......@@ -205,7 +207,7 @@ function initComparisons() {
}
function compareImages(img) {
var imgHeight;
var imgHeight;
/*get the width and height of the img element*/
imgWidth = document.getElementById("showImage").offsetWidth;
imgHeight = img.offsetHeight;
......@@ -276,15 +278,15 @@ function slide(x) {
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
function deleteComparisons(){
function deleteComparisons() {
slider.removeEventListener("mousedown", slideReady);
slider.removeEventListener("touchstart", slideReady);
window.removeEventListener("mouseup", slideFinish) ;
window.removeEventListener("mouseup", slideFinish);
window.removeEventListener("touchstop", slideFinish);
window.removeEventListener("mousemove", slideMove);
window.removeEventListener("touchmove", slideMove);
$(".img-comp-slider").remove();
slider= false;
slider = false;
}
//deleteComparisons();
......@@ -299,7 +301,7 @@ function selectImage1(date, element) {
document.getElementById("satImageFirst").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg"
}
function selectImage2(date,element) {
function selectImage2(date, element) {
$("#imageListSecond li").removeClass("active");
element.classList.add("active");
let label = date.toString();
......@@ -310,7 +312,7 @@ function selectImage2(date,element) {
$('.nav-tabs a').on('shown.bs.tab', function (evt) {
let tab = $(evt.target).text();
if(tab == "Comparison"){
if (tab == "Comparison") {
initComparisons()
}
});
......
reports/templates/aside.html
View file @ 130abd45
......@@ -89,7 +89,7 @@
</a>
<ul class="treeview-menu sidebar-form">
<li>
<a class="treeview submenu" href="#" onclick="change('line')">
<a class="treeview submenu" href="#" onclick="change('line');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Line Chart</span>
<span class="pull-right-container">
......@@ -98,7 +98,7 @@
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="change('bar')">
<a class="treeview submenu" href="#" onclick="change('bar');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Bar Chart</span>
<span class="pull-right-container">
......@@ -107,7 +107,7 @@
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="change('stackedBar')">
<a class="treeview submenu" href="#" onclick="change('stackedBar');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Stacked Bar Chart</span>
<span class="pull-right-container">
......@@ -116,7 +116,7 @@
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="change('polarArea')">
<a class="treeview submenu" href="#" onclick="change('polarArea');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Polar Area Chart</span>
<span class="pull-right-container">
......@@ -125,7 +125,7 @@
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="change('doughnut')">
<a class="treeview submenu" href="#" onclick="change('doughnut');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Doughnut Chart</span>
<span class="pull-right-container">
......@@ -134,7 +134,7 @@
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="change('pie')">
<a class="treeview submenu" href="#" onclick="change('pie');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Pie Chart</span>
<span class="pull-right-container">
......@@ -143,7 +143,7 @@
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="change('radar')">
<a class="treeview submenu" href="#" onclick="change('radar');showGraph(true)">
<i class="fa fa-bar-chart"></i>
<span>Radar Chart</span>
<span class="pull-right-container">
......@@ -219,70 +219,70 @@
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-no-data">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_0" value="SCL_0">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i>
&nbspSCL No Data
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-saturated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_1" value="SCL_1">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #de3d3d"></i>
&nbspSCL Saturated
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_2">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_2" value="SCL_2">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #696767"></i>
&nbspSCL Shadows
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-cloud-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_3">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_3" value="SCL_3">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #98775b"></i>
&nbspSCL Cloud Shadows
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-vegetation">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_4">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_4" value="SCL_4">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #44ba5d"></i>
&nbspSCL Vegetation
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-not-vegetated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_5">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_5" value="SCL_5">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #fff98b"></i>
&nbspSCL Not-Vegetated
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-water">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_6">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_6" value="SCL_6">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #659acc"></i>
&nbspSCL Water
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-unclassified">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_7">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_7" value="SCL_7">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #ababab"></i>
&nbspSCL Unclassified
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-clouds">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_8">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_8" value="SCL_8">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #dddddd"></i>
&nbspSCL Clouds
</label>
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-snow">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_9">
<input class="form-check-input" type="checkbox" name="layer_type" id="SCL_9" value="SCL_9">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #ff8afa"></i>
&nbspSCL Snow
......@@ -309,7 +309,7 @@
<ul class="treeview-menu sidebar-form text-center">
<span>
<div class="form-check submenu" onclick="changeMap('light')">
<input id="light" type="radio" name="layerOption" checked>
<input id="light" type="radio" name="layerOption">
<span>Noon</span>
</div>
<div class="form-check submenu" onclick="changeMap('streets')">
......@@ -317,7 +317,7 @@
<span>Streets</span>
</div>
<div class="form-check submenu" onclick="changeMap('night')">
<input id="night" type="radio" name="layerOption" checked="">
<input id="night" type="radio" name="layerOption" checked>
<span>Night</span>
</div>
<div class="form-check submenu" onclick="changeMap('cycle')">
......
reports/templates/sclData.html
View file @ 130abd45
......@@ -122,7 +122,8 @@
<!-- Main content -->
<div id="timeLine" class="container col-md-12 floating-panel slidecontainer"
style="position:absolute; display:block; bottom: 40px; width: 500px; z-index: 1000">
<div id="set_Range_date" class="col-md-4 pull-left" style="margin-right: -15%">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div>
<div id="set_Range_date" class="col-md-4 pull-left"
style="margin-right: -15%">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div>
<div class="range-control col-md-8" id="rangecontrol">
<input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1"
value="0" data-thumbwidth="20" style="background: transparent;">
......@@ -140,7 +141,8 @@
<div id="selectLeft" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
<div id="set_Range_date2" class="col-md-4 pull-left">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div>
<div id="set_Range_date2"
class="col-md-4 pull-left">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div>
<div class="col-md-8">
<!--<select onchange="selectLeft(this.value)" id="selectLeftCompare">
......@@ -155,7 +157,7 @@
<div id="selectRight" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
<div id="set_Range_date3" class="col-md-4 pull-left">{{ labels|last|slice:"6:8" }}/{{ labels|last|slice:"4:6" }}/{{ labels|last|slice:"0:4" }}</div>
<div id="set_Range_date3" class="col-md-4 pull-left">{{ labels|last|slice:"6:8" }}/{{ labels|last|slice:"4:6" }}/{{ labels|last|slice:"0:4" }}</div>
<div class="col-md-8">
<!--<select onchange="selectRight(this.value)" id="selectRightCompare">
......@@ -220,8 +222,10 @@
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div id="minimap" class="minimap"></div>
<section class="content">
<a href="#" id="button_left" title="Previous" onclick="previus_report({{ request.path_info|slice:"9:" }})"><i class="fas fa-chevron-left"></i></a>
<a href="#" id="button_right" title="Next" onclick="next_report({{ request.path_info|slice:"9:" }})"><i class="fas fa-chevron-right"></i></a>
<a href="#" id="button_left" title="Previous"
onclick="previus_report({{ request.path_info|slice:"9:" }})"><i class="fas fa-chevron-left"></i></a>
<a href="#" id="button_right" title="Next" onclick="next_report({{ request.path_info|slice:"9:" }})"><i
class="fas fa-chevron-right"></i></a>
<div class="row col-lg-11 title">
<div class="box box-success box-solid info">
<div class="box-header with-border">
......@@ -567,7 +571,7 @@
index = 0;
console.log(lista_productos[index]);
window.location.replace("../reports/"+lista_productos[index]);
window.location.replace("../reports/" + lista_productos[index]);
}
function previus_report(number) {
......@@ -576,13 +580,59 @@
index--;
console.log(index);
if (index < 0)
index = lista_productos.length-1;
index = lista_productos.length - 1;
console.log(lista_productos[index]);
window.location.replace("../reports/"+lista_productos[index]);
window.location.replace("../reports/" + lista_productos[index]);
}
$(document).ready(function(){
console.log(sessionStorage)
if (sessionStorage.showChart==="true"){
showGraph(true)
}
if (sessionStorage.charttype){
change(sessionStorage.charttype);
}
if(sessionStorage.selectedMap){
currentMap = sessionStorage.selectedMap;
}
if(sessionStorage.SCL_0){
$('#SCL_0').prop('checked', true);
}
if(sessionStorage.SCL_2){
$('#SCL_2').prop('checked', true);
}
if(sessionStorage.SCL_3){
$('#SCL_3').prop('checked', true);
}
if(sessionStorage.SCL_4){
$('#SCL_4').prop('checked', true);
}
if(sessionStorage.SCL_5){
$('#SCL_5').prop('checked', true);
}
if(sessionStorage.SCL_6){
$('#SCL_6').prop('checked', true);
}
if(sessionStorage.SCL_7){
$('#SCL_7').prop('checked', true);
}
if(sessionStorage.SCL_8){
$('#SCL_8').prop('checked', true);
}
if (sessionStorage.selectedMap==='night'){
changeMap('night')
}
});
</script>
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
......
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