Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 0b05b628 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

reportes, primera etapa

parent fc0e7818
Show whitespace changes
Inline Side-by-side
Showing with 1156 additions and 660 deletions
catalog/static/catalog/js/Chart.min.js 0 → 100644
View file @ 0b05b628
This source diff could not be displayed because it is too large. You can view the blob instead.
catalog/templates/L2ASCL_data (copy).html
View file @ 0b05b628
{% extends "data_top.html" %} {% extends "data_top.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="wrapper"> <div class="wrapper">
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
...@@ -18,9 +17,11 @@ ...@@ -18,9 +17,11 @@
<h3 class="box-title">Area Km²</h3> <h3 class="box-title">Area Km²</h3>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button> </button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div> </div>
</div> </div>
<div class="box-body"> <div class="box-body">
...@@ -38,9 +39,11 @@ ...@@ -38,9 +39,11 @@
<h3 class="box-title">Donut Chart</h3> <h3 class="box-title">Donut Chart</h3>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button> </button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div> </div>
</div> </div>
<div class="box-body"> <div class="box-body">
...@@ -62,9 +65,11 @@ ...@@ -62,9 +65,11 @@
<h3 class="box-title">Bar Chart</h3> <h3 class="box-title">Bar Chart</h3>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button> </button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div> </div>
</div> </div>
<div class="box-body"> <div class="box-body">
...@@ -75,14 +80,16 @@ ...@@ -75,14 +80,16 @@
<!-- /.box-body --> <!-- /.box-body -->
</div> </div>
<!-- /.box --> <!-- /.box -->
<div class="box box-info"> <div class="box box-info">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title">MAP</h3> <h3 class="box-title">MAP</h3>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapsexite"><i class="fa fa-minus"></i> <button type="button" class="btn btn-box-tool" data-widget="collapsexite"><i
class="fa fa-minus"></i>
</button> </button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div> </div>
</div> </div>
<div class="box-body"> <div class="box-body">
...@@ -114,11 +121,11 @@ ...@@ -114,11 +121,11 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<!-- page script --> <!-- page script -->
<script> <script>
var ctx = document.getElementById("areaChart").getContext('2d'); var ctx = document.getElementById("areaChart").getContext('2d');
var myChart = new Chart(ctx, { var myChart = new Chart(ctx, {
type: 'line', type: 'Line',
data: { data: {
labels: [{{labels}}], labels: [{{labels}}],
datasets: [{ datasets: [{
...@@ -170,20 +177,21 @@ var myChart = new Chart(ctx, { ...@@ -170,20 +177,21 @@ var myChart = new Chart(ctx, {
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true beginAtZero: true
} }
}] }]
} }
} }
}); });
function areaChartonClick(e,element){
console.log(e); function areaChartonClick(e, element) {
console.log(element); console.log(e);
console.log(element[0]._index); console.log(element);
console.log(myChart); console.log(element[0]._index);
console.log(myChart.config.data.labels[element[0]._index]); console.log(myChart);
console.log(myChart.config.data.labels[element[0]._index]);
document.getElementById("satImage").src="../../static/tmpImages/"+myChart.config.data.labels[element[0]._index]+"_TCI_60m.jpg"
}; document.getElementById("satImage").src = "../../static/tmpImages/" + myChart.config.data.labels[element[0]._index] + "_TCI_60m.jpg"
</script> };
</script>
{% endblock %} {% endblock %}
catalog/templates/base_top.html
View file @ 0b05b628
<!DOCTYPE html> <!DOCTYPE html>
{% load static %} {% load static %}
<html> <html>
<head> <head>
<title>Repositorio de Imágenes Satelitales</title> <title>Repositorio de Imágenes Satelitales</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" href="{% static 'catalog/images/satellite.png' %}"> <link rel="icon" href="{% static 'catalog/images/satellite.png' %}">
<!-- Bootstrap 3.3.7 --> <!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}"> <link rel="stylesheet"
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> href="{% static 'catalog/adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Theme style --> <!-- Theme style -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/dist/css/AdminLTE.css' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/dist/css/AdminLTE.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/dist/css/skins/_all-skins.css' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/dist/css/skins/_all-skins.css' %}">
<!-- Select2 --> <!-- Select2 -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/select2/dist/css/select2.min.css' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/select2/dist/css/select2.min.css' %}">
<!-- jsPDF -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js'></script>
{% block headMedia %}{% endblock %} {% block headMedia %}{% endblock %}
</head> </head>
<body class="hold-transition skin-yellow sidebar-mini"> <body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>--> <!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>--> <!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper"> <div class="wrmapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <!-- Logo -->
<a class="logo"> <a class="logo">
...@@ -38,7 +43,6 @@ ...@@ -38,7 +43,6 @@
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
</a> </a>
<div class="navbar-custom-menu"> <div class="navbar-custom-menu">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less--> <!-- Messages: style can be found in dropdown.less-->
...@@ -53,13 +57,20 @@ ...@@ -53,13 +57,20 @@
<!-- <li class="dropdown tasks-menu"> --> <!-- <li class="dropdown tasks-menu"> -->
{#% block tasks %}{% endblock %#} {#% block tasks %}{% endblock %#}
<!-- </li> --> <!-- </li> -->
<!-- History -->
<li class="dropdown user user-menu">
{% block history %}
{% endblock %}
</li>
<!-- History -->
<!-- User Account: style can be found in dropdown.less --> <!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu"> <li class="dropdown user user-menu">
{% block user %}{% endblock %} {% block user %}{% endblock %}
</li> </li>
<!-- Control Sidebar Toggle Button --> <!-- Control Sidebar Toggle Button -->
<li> <li>
<a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i class="fa fa-shopping-cart"></i></a> <a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i
class="fa fa-shopping-cart"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -75,6 +86,7 @@ ...@@ -75,6 +86,7 @@
<!-- /.sidebar --> <!-- /.sidebar -->
</aside> </aside>
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="border:0px solid blue;"> <div class="content-wrapper" style="border:0px solid blue;">
{% block content %}{% endblock %} {% block content %}{% endblock %}
...@@ -92,7 +104,8 @@ ...@@ -92,7 +104,8 @@
<!-- Create the tabs --> <!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li id="globe"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li> <li id="globe"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li>
<li id="cart"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a></li> <li id="cart"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a>
</li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content">
...@@ -143,28 +156,30 @@ ...@@ -143,28 +156,30 @@
<!-- /.control-sidebar --> <!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div> <div class="control-sidebar-bg"></div>
</div> </div>
<!-- ./wrapper --> <!-- ./wrapper -->
<!-- T E M P L A T E S --> <!-- T E M P L A T E S -->
{% block templates %}{% endblock %} {% block templates %}{% endblock %}
<!-- T E M P L A T E S --> <!-- T E M P L A T E S -->
<!-- MODAL 1 --> <!-- MODAL 1 -->
{% block modal1 %}{% endblock %} {% block modal1 %}{% endblock %}
<!-- MODAL 1 --> <!-- MODAL 1 -->
<!-- jQuery 3 --> <!-- jQuery 3 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 --> <!-- jQuery UI 1.11.4 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 --> <!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script> <script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file --> <!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script> <script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script>
<!-- Chartsjs -->
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>
catalog/templates/map.html
View file @ 0b05b628
...@@ -2,19 +2,19 @@ ...@@ -2,19 +2,19 @@
{% load staticfiles %} {% load staticfiles %}
{% block headMedia %} {% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/map.css'%}" type="text/css"> <link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/body.css'%}" type="text/css"> <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.css'%}" type="text/css"> <link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">--> <!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<!-- <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>--> <!-- <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="{% static 'catalog/js/openLayers4.js'%}"></script> <script src="{% static 'catalog/js/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.js'%}"></script> <script src="{% static 'catalog/js/sidtMap.js' %}"></script>
{% endblock %} {% endblock %}
{% block messages %} {% block messages %}
...@@ -98,7 +98,8 @@ ...@@ -98,7 +98,8 @@
<small class="pull-right">20%</small> <small class="pull-right">20%</small>
</h3> </h3>
<div class="progress xs"> <div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
...@@ -118,7 +119,7 @@ ...@@ -118,7 +119,7 @@
<!-- search form --> <!-- search form -->
<form role="form" action="#" method="get" class="sidebar-form"> <form role="form" action="#" method="get" class="sidebar-form">
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" name="value" autocomplete="off" class="form-control" placeholder="Search region..."> <input type="text" id="ajax-input" name="value" class="form-control" placeholder="Search region...">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()"> <button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i> <i class="fa fa-eraser"></i>
...@@ -146,7 +147,7 @@ ...@@ -146,7 +147,7 @@
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li class="col-xs-12">{{searchForm.platform}}</li> <li class="col-xs-12">{{ searchForm.platform }}</li>
</ul> </ul>
</li> </li>
<li class="treeview"> <li class="treeview">
...@@ -158,8 +159,8 @@ ...@@ -158,8 +159,8 @@
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li>{{searchForm.start}}</li> <li>{{ searchForm.start }}</li>
<li>{{searchForm.end}}</li> <li>{{ searchForm.end }}</li>
</ul> </ul>
</li> </li>
<li class="treeview "> <li class="treeview ">
...@@ -171,7 +172,7 @@ ...@@ -171,7 +172,7 @@
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li>{{searchForm.polygon}}</li> <li>{{ searchForm.polygon }}</li>
</ul> </ul>
</li> </li>
<li class="treeview "> <li class="treeview ">
...@@ -230,17 +231,59 @@ ...@@ -230,17 +231,59 @@
<a href="#" class="btn btn-default btn-flat">Profile</a> <a href="#" class="btn btn-default btn-flat">Profile</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a href="{% url 'logout'%}?next={{request.path}}" class="btn btn-default btn-flat">Sign out</a> <a href="{% url 'logout' %}?next={{ request.path }}" class="btn btn-default btn-flat">Sign out</a>
</div> </div>
</li> </li>
</ul> </ul>
{% endblock %} {% endblock %}
{% block history %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-history"></i>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
Historial de compras
</p>
</li>
<div class="form-group">
<br>
<ul class="sidebar-menu" data-widget="tree">
<!-- History element -->
<li>
<a class="treeview " href="../reports/T15QZD_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
<!-- History element -->
<li>
<a class="treeview " href="../reports/T16QBJ_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
</ul>
</div>
</ul>
{% endblock %}
{% block content %} {% block content %}
<div id="map" class="map" tabindex="0"> </div> <div id="map" class="map" tabindex="0"></div>
<footer class="my-footer"> <footer class="my-footer">
<strong> <strong>
<a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información Geoespacial</a> <a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información
Geoespacial</a>
</strong> </strong>
</footer> </footer>
{% endblock %} {% endblock %}
...@@ -251,7 +294,7 @@ ...@@ -251,7 +294,7 @@
{% block scripts %} {% block scripts %}
<script> <script>
//var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10); //var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7); var osmap = new sidtMap("map", -89.63873079999999, 21.0404457, 7);
osmap.geolocation(); osmap.geolocation();
osmap.addInteraction(); osmap.addInteraction();
......
catalog/urls.py
View file @ 0b05b628
...@@ -12,5 +12,4 @@ urlpatterns = [ ...@@ -12,5 +12,4 @@ urlpatterns = [
url(r'^cartrequest/$', views.saveInCart, name='cart-rqst'), url(r'^cartrequest/$', views.saveInCart, name='cart-rqst'),
url(r'^fromcartrqst/$', views.getFromCart, name='from-cart-rqst'), url(r'^fromcartrqst/$', views.getFromCart, name='from-cart-rqst'),
url(r'^purchcartrqst/$', views.purchaseProduct, name='purch-prod-rqst'), url(r'^purchcartrqst/$', views.purchaseProduct, name='purch-prod-rqst'),
url(r'^scl/$', views.L2ASCL_data, name='L2ASCL-data')
] ]
catalog/views.py
View file @ 0b05b628
...@@ -267,11 +267,11 @@ def purchaseProduct(request): ...@@ -267,11 +267,11 @@ def purchaseProduct(request):
## TODO: Add product L1C to Cart DB after product download. ## ## TODO: Add product L1C to Cart DB after product download. ##
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def L2ASCL_data(request): # def L2ASCL_data(request):
with open("/home/mchc/data.json") as f: # with open("/home/ulises/REPSAT_NAS/mario_repsat_test/T15QZD_sclData.json") as f:
json_data = json.load(f) # json_data = json.load(f)
print(json_data) # print(json_data)
return render(request, 'L2ASCL_data.html', {"labels":",".join([k for k in json_data]), "vegetation":[v["4"] for k,v in json_data.items()] }) # return render(request, 'L2ASCL_data.html', {"labels":",".join([k for k in json_data]), "vegetation":[v["4"] for k,v in json_data.items()] })
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
# def purchaseProduct(request): # def purchaseProduct(request):
# """ # """
......
db.sqlite3
View file @ 0b05b628
No preview for this file type
geosentinel
View file @ 0b05b628
/home/emmanuelhp/Documentos/GeoSentinel/geosentinel /home/ulises/django-apps/GeoSentinel/geosentinel
\ No newline at end of file \ No newline at end of file
reports/templates/L2ASCL_data.html
View file @ 0b05b628
{% extends "data_top.html" %} {% extends "base_top.html" %}
{% load static %} {% load staticfiles %}
{% block head %}
<link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}"> {% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<!-- <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="{% static 'catalog/js/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.js' %}"></script>
{% endblock %}
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
{% endblock %}
{% block notifications %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
{% endblock %}
{% block tasks %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul c{% load static %}lass="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
{% endblock %}
{% block sidebar %}
<div class="form-group">
<br>
<ul class="sidebar-menu" data-widget="tree">
<li>
<a class="treeview " href="{{ BASE_URL }}/catalog">
<i class="fa fa-map"></i>
<span>Home</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-area-chart"></i>
<span>Chart Type</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>
<a class="treeview " href="#" onclick="change('line')">
<i class="fa fa-bar-chart"></i>
<span>Line Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('bar')">
<i class="fa fa-bar-chart"></i>
<span>Bar Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('bubble')">
<i class="fa fa-bar-chart"></i>
<span>Bubble Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('polarArea')">
<i class="fa fa-bar-chart"></i>
<span>Polar Area Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('doughnut')">
<i class="fa fa-bar-chart"></i>
<span>Doughnut Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('pie')">
<i class="fa fa-bar-chart"></i>
<span>Pie Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('radar')">
<i class="fa fa-bar-chart"></i>
<span>Radar Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-download"></i>
<span>Download as</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>
<a class="treeview pull-left" href="#">
<i class="fa fa-file-code-o"></i>
<span>Export to JSON</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview pull-left " href="#" id="downloadPdf">
<i class="fa fa-file-pdf-o"></i>
<span>Expor to PDF</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- form-group-->
{% endblock %}
{% block user %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
<!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
<!--<span class="hidden-xs">Alexander Pierce</span>-->
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
<p>
{{ user.get_full_name }}
<small>{{ user.get_username }}</small>
</p>
</li>
<!-- Menu Body -->
<!--<li class="user-body">-->
<!--</li>-->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="{% url 'logout' %}?next={{ request.path }}" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
{% endblock %}
{% block history %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-history"></i>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
Historial de compras
</p>
</li>
<div class="form-group">
<br>
<ul class="sidebar-menu" data-widget="tree">
<!-- History element -->
<li>
<a class="treeview " href="{{ BASE_URL }}/reports/T15QZD_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
<!-- History element -->
<li>
<a class="treeview " href="{{ BASE_URL }}/reports/T16QBJ_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
</ul>
</div>
</ul>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<!--<div class="wrapper">-->
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
<!-- Main content --> <!-- Main content -->
<div class="container-fluid"> <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div class="text-center"><h1>{{ report_name }}</h1></div>
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-8">
Titulo <!-- AREA CHART -->
</div> <div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title"> {{ type }} Chart Km²</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>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div> </div>
<div class="row">
<div class="col-lg-8">
<canvas id="myChart"></canvas>
</div> </div>
<div class="col-lg-4"> <div class="box-body">
<img id="satImage" src="{% static 'reports/tmpImages/20180219_TCI_60m.jpg' %}" height="512px"/> <div id="openchart" class="chart">
<canvas id="myChart" style="height: 574px"></canvas>
</div>
</div> </div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div> </div>
<!-- /.col (LEFT) -->
<div class="col-md-4">
<!-- DONUT CHART -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Map Image</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>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<img onclick="window.open(this.src)" class="img-responsive" id="satImage" width="400"
height="400px"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div> </div>
<!-- Footer --> </div>
<footer class="page-footer font-small special-color-dark pt-5"> <!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- Footer -->
<footer class=" page-footer font-small special-color-dark pt-5">
<!-- Footer Elements --> <!-- Footer Elements -->
<div class="container"> <div class="container">
<!-- Social buttons
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center"> <ul class="list-unstyled list-inline text-center">
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn-floating btn-fb mx-1"> <a class="btn-floating btn-fb mx-1">
<i class="fa fa-facebook"> </i> <i class="fa fa-faceboo"> </i>
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
...@@ -76,40 +413,111 @@ ...@@ -76,40 +413,111 @@
<!-- Footer --> <!-- Footer -->
<!-- /.content --> <!-- /.content -->
<!--</div>-->
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<!-- page script --> <!-- page script -->
<script> <script>
var label;
// Recibimos el JSON con los datos desde el View
{% autoescape off %} {% autoescape off %}
var config = {{graphData}} var config = {{graphData}}
config.options={ config.options = {
maintainAspectRatio:false, responsive: true,
<!-- scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},--> maintainAspectRatio: false,
title: {text:"SCL Image Classification Data (Km²)", display:true}, <!-- scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},-->
title: {text: "SCL Image Classification Data (Km²)", display: true},
};
{% endautoescape %}
// Creamos una gráfica con los datos al macenados en config
var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
//var myChart;
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
var activePoints = myChart.getElementsAtEvent(evt);
var firstPoint = activePoints[0];
label = myChart.data.labels[firstPoint._index];
document.getElementById("satImage").src = "../../static/reports/tmpImages/" + label + "_TCI_60m.jpg"
};
// cambiar el tipo de gráfica
onClick: chartOnClick, function change(newType) {
var ctx = document.getElementById("myChart").getContext("2d");
// Remove the old chart and all its event handles
if (myChart) {
myChart.destroy();
} }
{% endautoescape %}
var ctx = document.getElementById('myChart').getContext('2d'); // Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later
ctx.canvas.width = 256; var temp = jQuery.extend(true, {}, config);
ctx.canvas.height = 512; temp.type = newType;
var myChart = new Chart(ctx, config); if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') {
function chartOnClick(e,element){ temp.options.scales.xAxes={"display": false};
console.log(e); temp.options.scales.yAxes={"display": false};
console.log(element);
console.log(element[0]._index); }
console.log(myChart);
console.log(myChart.config.data.labels[element[0]._index]); myChart = new Chart(ctx, temp);
document.getElementById("satImage").src="../../static/reports/tmpImages/"+myChart.config.data.labels[element[0]._index]+"_TCI_60m.jpg"
myChart.options.legend.onClick(e,element);
}; };
</script>
// Transformar canvas a pdf
$('#downloadPdf').click(function (event) {
// obtener el tamaño de la página
var reportPageHeight = $('#reportPage').innerHeight();
var reportPageWidth = $('#reportPage').innerWidth();
// Creamos un nuevo canvas que rellenaremos con todos los demás canvas
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// Mantenemos la posicion del canvas
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// por cada gráfica ejecutamos la funcion
$("canvas").each(function (index) {
// obtenemos las medidas de la grafica
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// Dibujamos la gráfica en el canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
// nuestra página de informes está en un patrón de cuadrícula, por lo que se replica en el nuevo canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
// Crea un nuevo pdf y agrega nuestro nuevo canvas como imagen.
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// descargamos el pdf
pdf.save(label + '.pdf');
});
function export_json() {
}
</script>
{% endblock %} {% endblock %}
reports/urls.py
View file @ 0b05b628
from django.conf.urls import url from django.conf.urls import url
from . import views from . import views
from reports import views
urlpatterns = [ urlpatterns = [
url(r'^$', views.report_L2ASCL, name='report'), url(r'^(?P<report>[\w\-]+)/$', views.report_L2ASCL, name='report'),
url(r'^(?P<report>\w+)$', views.report_L2ASCL, name='report'),
] ]
reports/views.py
View file @ 0b05b628
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
from __future__ import unicode_literals from __future__ import unicode_literals
import io
from django.http import FileResponse
from reportlab.pdfgen import canvas
from django.shortcuts import render from django.shortcuts import render
# Create your views here. # Create your views here.
from collections import OrderedDict from collections import OrderedDict
import json import json
#-------------------------------------------------------------------------------
def report_L2ASCL(request, report=0):
with open("/home/mario/NAS_MarioCh/mario_repsat_test/T15QZD_sclData.json") as f: # -------------------------------------------------------------------------------
from reportlab.pdfgen import canvas
from GeoInt_SIDT import settings
def report_L2ASCL(request, report):
with open("/home/ulises/REPSAT_NAS/mario_repsat_test/"+report+".json") as f:
json_data = OrderedDict(json.load(f)) json_data = OrderedDict(json.load(f))
graphData = dict() graphData = dict()
graphData['type']="line" graphData['type'] = "line"
data=dict() data = dict()
data['labels'] = [ k for k,v in sorted(json_data.items()) ] data['labels'] = [k for k, v in sorted(json_data.items())]
# data['click']="chartOnClick" # data['click']="chartOnClick"
data['datasets'] = list() data['datasets'] = list()
labels = set() labels = set()
for d in json_data: for d in json_data:
labels |= set(json_data[d].keys()) labels |= set(json_data[d].keys())
labels.remove('date') labels.remove('date')
labelNames = ["No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "Not-Vegetated", "Whater", "Unclassified", "Cloud Medium Probablilty", "Cloud Hight Probablilty", "Thin Cirrus", "Snow"] labelNames = ["No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "Not-Vegetated", "Whater",
colors = ["Black", "Red", "DarkGray", "Brown", "Green", "Yellow", "Blue", "Grey", "LightGray", "White", "Aqua", "Pink"] "Unclassified", "Cloud Medium Probablilty", "Cloud Hight Probablilty", "Thin Cirrus", "Snow"]
colors = ["Black", "Red", "DarkGray", "Brown", "Green", "Yellow", "Blue", "Grey", "LightGray", "White", "Aqua",
"Pink"]
for l in labels: for l in labels:
item = dict() item = dict()
item['label'] = labelNames[int(l)] item['label'] = labelNames[int(l)]
# item['fill'] = "false"
if l == "0": if l == "0":
item['hidden'] = "true" item['hidden'] = "true"
item['data'] = [ v[l] * 60*60/1000000. for k,v in sorted(json_data.items()) if l in v] item['data'] = [v[l] * 60 * 60 / 1000000. for k, v in sorted(json_data.items()) if l in v]
item['backgroundColor']=colors[int(l)] item['backgroundColor'] = colors[int(l)]
data['datasets'].append(item) data['datasets'].append(item)
graphData['data']=data graphData['data'] = data
#print(settings.BASE_URL)
# graphData['options']['responsive']=True
# graphData['options']['maintainAspectRatio']=False
#print(json.dumps(graphData).encode("utf-8"))
# graphData['options']['responsive']=True return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData), "report_name": report})
# graphData['options']['maintainAspectRatio']=False # -------------------------------------------------------------------------------
print( json.dumps(graphData).encode("utf-8"))
return render(request, 'L2ASCL_data.html', {"graphData":json.dumps(graphData).encode("utf-8")})
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