Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit dac74eac authored by Emmanuel René Huchim Puc's avatar Emmanuel René Huchim Puc
Browse files
Options

Merge branch 'dev' of gitlab.geoint.mx:mario.chirinos/GeoInt_SIDT into dev

parents 24dd9f6c cfb3df0a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 261 deletions
catalog/forms.py
View file @ dac74eac
...@@ -12,7 +12,7 @@ platforms = [ ...@@ -12,7 +12,7 @@ platforms = [
class ASFSearchForm(forms.Form): class ASFSearchForm(forms.Form):
polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"})) polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"}))
platform = forms.ChoiceField(choices=platforms, widget=forms.Select(attrs={'class':"form-control"})) platform = forms.ChoiceField(choices=platforms, widget=forms.Select(attrs={'class':"form-control"}))
start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False) start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True)
end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False) end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True)
maxResults = forms.IntegerField() maxResults = forms.IntegerField()
catalog/static/css/body.css
View file @ dac74eac
...@@ -144,7 +144,20 @@ div .item-info-view { ...@@ -144,7 +144,20 @@ div .item-info-view {
top: 52px; top: 52px;
left: -402px; left: -402px;
width: 400px; width: 400px;
height: 418px; height: 360px;
background-color: #dc7828;
}
div .item-info-cart-view {
position: absolute;
background: white;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
top: -106px;
left: -417px;
width: 400px;
height: 360px;
background-color: #dc7828; background-color: #dc7828;
} }
...@@ -157,10 +170,14 @@ ul.control-sidebar-menu li:hover div.item-info-view { ...@@ -157,10 +170,14 @@ ul.control-sidebar-menu li:hover div.item-info-view {
} }
div .cropped-preview { div .cropped-preview {
max-height: 140px; max-height: 200px;
overflow: hidden; overflow: hidden;
} }
div .cropped-preview img {
width: 50px;
}
div .cropped-preview img { div .cropped-preview img {
width: 100%; width: 100%;
border-top-left-radius: 10px; border-top-left-radius: 10px;
...@@ -172,7 +189,7 @@ div .polygon-item-data { ...@@ -172,7 +189,7 @@ div .polygon-item-data {
} }
div .polygon-item-data .city { div .polygon-item-data .city {
font-size: 20px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 2px solid; border-bottom: 2px solid;
...@@ -197,12 +214,32 @@ div .item-info-view .button-add-del { ...@@ -197,12 +214,32 @@ div .item-info-view .button-add-del {
padding-left: 58%; padding-left: 58%;
} }
div #product-list-globe { div #product-list-globe,
max-height: 100px; div #product-list-cart-items {
max-height: 500px;
overflow: auto;
}
div #product-list-cart-items {
max-height: 167px;
overflow: auto; overflow: auto;
} }
div .sidebar-title h3 {
float: left;
}
div .sidebar-button button {
margin-top: 17px;
margin-left: 10px;
}
/*----------product list clases----------*/ /*----------product list clases----------*/
div .draw-button {
float: left;
margin-left: 20px;
}
div .sidebar-input { div .sidebar-input {
border-radius: 3px; border-radius: 3px;
border: 1px solid #374850; border: 1px solid #374850;
......
catalog/static/css/map.css
View file @ dac74eac
...@@ -25,3 +25,8 @@ html, body ...@@ -25,3 +25,8 @@ html, body
background-color: rgba(220,220,220,0.9); background-color: rgba(220,220,220,0.9);
float:right; float:right;
} }
#div-draw-btn
{
text-align: center;
}
\ No newline at end of file
catalog/static/js/dataRetrieval.js
View file @ dac74eac
This diff is collapsed.
catalog/static/js/openLayers4.js
View file @ dac74eac
...@@ -120,6 +120,38 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt) ...@@ -120,6 +120,38 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt)
document.getElementById("id_polygon").value = wkt; document.getElementById("id_polygon").value = wkt;
} }
OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
{
if (prevFeature) {
this.vectorLayer.getSource().removeFeature(prevFeature);
}
var format = new ol.format.WKT();
var feature = format.readFeature(wkt, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#dc7828',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.1)'
})
})
feature.setStyle(style);
this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
this.vectorLayer.getSource().addFeature(feature);
return feature;
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
/** /**
* calculate the area of each polygon and return the coords of the biggest polygon * calculate the area of each polygon and return the coords of the biggest polygon
......
catalog/static/js/sidtMap.js
View file @ dac74eac
...@@ -105,24 +105,22 @@ function sidtMap(divID, lng, lat, z) ...@@ -105,24 +105,22 @@ function sidtMap(divID, lng, lat, z)
this.map.on("pointermove",function(e){self.onMousemove(e)}); this.map.on("pointermove",function(e){self.onMousemove(e)});
}; };
sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype ); sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype );
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sidtMap.prototype.addInteraction = function()
sidtMap.prototype.draw = function ()
{ {
var self = this; var self = this;
this.interaction = new ol.interaction.Draw({ this.interaction = new ol.interaction.Draw({
source:this.vectorLayer.getSource(), source:this.vectorLayer.getSource(),
features: this.features, features: this.features,
type: "Polygon" type: "Polygon"
}); });
this.selectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
this.interaction.on("drawend",function(e){ this.interaction.on("drawend",function(e){
self.showCoords(e.feature.getGeometry()); self.showCoords(e.feature.getGeometry());
self.map.removeInteraction(self.interaction);
}); });
this.interaction.on("drawstart",function(e){ this.interaction.on("drawstart",function(e){
...@@ -133,6 +131,18 @@ sidtMap.prototype.addInteraction = function() ...@@ -133,6 +131,18 @@ sidtMap.prototype.addInteraction = function()
this.map.addInteraction(this.selectPointerMove); this.map.addInteraction(this.selectPointerMove);
} }
sidtMap.prototype.addInteraction = function()
{
var self = this;
this.interactionSelect = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
this.map.addInteraction(this.interactionSelect);
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sidtMap.prototype.onMousemove = function(e) sidtMap.prototype.onMousemove = function(e)
{ {
......
catalog/templates/base_top.html
View file @ dac74eac
...@@ -104,124 +104,18 @@ ...@@ -104,124 +104,18 @@
<div class="tab-content"> <div class="tab-content">
<!-- Home tab content --> <!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab"> <div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading"><b>Products</b></h3> <div class="container">
<ul id="product-list-globe" class="control-sidebar-menu"></ul> <div class="sidebar-title">
<h3><b>Products</b></h3>
<!-- <li id="me-id">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Mérida, Yucatán</h4>
<p>May 26th 2018</p>
</div>
</a>
</li>
<div id="me-id-hover" class="row">
<div class="col-12">
<div id="polygon id" class="item-info-view">
<div class="cropped-preview">
<img src="{% static 'images/sat_preview/sat_test.jpg' %}">
</div>
<div class="polygon-item-data">
<div class="city">Mérida, Yucatán</div>
<p class="info">
<span class="type">Process:</span><br>
Vegetation index
</p>
<p class="info">
<span class="type">Date range:</span><br>
2018-05-19 to 2018-05-26
</p>
<p class="info">
<span class="type">Polygon:</span><br>
WKT format
</p>
<p class="info">
<span class="type">Cloud percentage:</span><br>
25%
</p>
</div>
<div class="button-add-del">
<button type="button" class="btn btn-success">Add to cart</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div> </div>
<li id="va-id"> <div class="sidebar-button">
<a href="javascript:void(0)"> <button type="button" name="search" id="add-cart" class="btn btn-primary">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i> Add to cart
</button>
<div class="menu-info"> </div>
<h4 class="control-sidebar-subheading">Valladolid, Yucatán</h4> </div>
<p>May 26th 2018</p> <!-- this ul element is filled with data -->
</div> <ul id="product-list-globe" class="control-sidebar-menu"></ul>
</a>
</li>
<div id="va-id-hover" class="row">
<div class="col-12">
<div id="polygon id" class="item-info-view">
<div class="cropped-preview">
<img src="{% static 'images/sat_preview/sat_test.jpg' %}">
</div>
<div class="polygon-item-data">
<div class="city">Valladolid, Yucatán</div>
<p class="info">
<span class="type">Process:</span><br>
Water bodies
</p>
<p class="info">
<span class="type">Date range:</span><br>
2018-05-19 to 2018-05-26
</p>
<p class="info">
<span class="type">Polygon:</span><br>
WKT format
</p>
<p class="info">
<span class="type">Cloud percentage:</span><br>
40%
</p>
</div>
<div class="button-add-del">
<button type="button" class="btn btn-success">Add to cart</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div> -->
<!-- <h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
</ul> -->
<!-- /.control-sidebar-menu -->
<!-- <h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul> -->
<!-- /.control-sidebar-menu --> <!-- /.control-sidebar-menu -->
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
...@@ -230,33 +124,18 @@ ...@@ -230,33 +124,18 @@
<!-- /.tab-pane --> <!-- /.tab-pane -->
<!-- Settings tab content --> <!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab"> <div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post"> <div class="container">
<h3 class="control-sidebar-heading">General Settings</h3> <div class="sidebar-title">
<h3><b>My cart</b></h3>
<div class="form-group"> </div>
<label class="control-sidebar-subheading"> <div class="sidebar-button">
Report panel usage <button type="button" name="search" id="add-cart" class="btn btn-primary">
<input type="checkbox" class="pull-right" checked> Buy products
</label> </button>
</div>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div> </div>
<!-- /.form-group --> <!-- this ul element is filled with data -->
</form> <ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
</div> </div>
......
catalog/templates/map.html
View file @ dac74eac
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" name="value" 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"> <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>
</button> </button>
</span> </span>
...@@ -139,11 +139,6 @@ ...@@ -139,11 +139,6 @@
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> --> <!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->
<form id='product-form' role="form" method="post"> <form id='product-form' role="form" method="post">
{% csrf_token %} {% csrf_token %}
<div class="row" id="option-list">
<div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
...@@ -199,8 +194,7 @@ ...@@ -199,8 +194,7 @@
<li> <li>
<a href="#"> <a href="#">
<span> <span>
<i class="fa fa-search"></i> <button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
<button type="submit" name="search" id="search-btn" class="btn btn-primary">Search</button>
<!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> --> <!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
</span> </span>
</a> </a>
...@@ -212,6 +206,10 @@ ...@@ -212,6 +206,10 @@
</ul> </ul>
</form> </form>
</div> </div>
<div id="div-draw-btn" class="draw-button">
<button type="submit" name="draw" id="draw-btn" class="btn btn-primary" onclick="osmap.draw()"><i class="fa fa-object-ungroup"></i> Dibujar</button>
</div>
<!-- form-group--> <!-- form-group-->
{% endblock %} {% endblock %}
...@@ -268,5 +266,6 @@ ...@@ -268,5 +266,6 @@
osmap.addInteraction(); osmap.addInteraction();
var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data
var prod_req_url = "{% url 'productList' %}" // url for requesting product data var prod_req_url = "{% url 'productList' %}" // url for requesting product data
var img_req_url = "{% url 'img-rqst' %}" // url for requestim preview image
</script> </script>
{% endblock %} {% endblock %}
catalog/urls.py
View file @ dac74eac
...@@ -7,6 +7,7 @@ urlpatterns = [ ...@@ -7,6 +7,7 @@ urlpatterns = [
url(r'^$', views.map, name='map'), url(r'^$', views.map, name='map'),
url(r'^productlist/$', views.productList, name='productList'), url(r'^productlist/$', views.productList, name='productList'),
url(r'^regionsearched/$', views.regionSearched, name='regionSearched'), url(r'^regionsearched/$', views.regionSearched, name='regionSearched'),
url(r'^searchsubmit/$', views.SearchSubmitView.as_view(), name='search-submit') url(r'^searchsubmit/$', views.SearchSubmitView.as_view(), name='search-submit'),
url(r'^imgrequest/$', views.requestToImage, name='img-rqst')
] ]
catalog/views.py
View file @ dac74eac
...@@ -9,9 +9,12 @@ from django.urls import reverse ...@@ -9,9 +9,12 @@ from django.urls import reverse
from django.views.generic.base import View from django.views.generic.base import View
from django.template import loader from django.template import loader
from urllib import urlencode from urllib import urlencode
import requests, json, unicodedata import requests, json, unicodedata, sys
from apis.sentinel import APISentinel
import random sys.path.append('../')
from geosentinel import APISentinel
sentinel = APISentinel.APISentinel('emmhp', 'geoemm29')
# Create your views here. # Create your views here.
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
...@@ -33,6 +36,18 @@ def map(request): ...@@ -33,6 +36,18 @@ def map(request):
# Render the HTML template index.html with the data in the context variable # Render the HTML template index.html with the data in the context variable
return render(request, 'map.html', { "searchForm": form }) return render(request, 'map.html', { "searchForm": form })
#-------------------------------------------------------------------------------
def requestToImage(request):
# print("REQUEST: ", request.GET)
img_link = request.GET['value']
# img_link = img_link[:img_link.find("/") + 2] + "emmhp:geoemm29@" + img_link[img_link.find("/") + 2:]
# r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
# print("RAAAW: ", r.raw.read())
return JsonResponse({'img': "reqToIMG"})
# return HttpResponse(r.raw.read(), content_type="image/jpeg")
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def productList(request): def productList(request):
""" """
...@@ -45,33 +60,40 @@ def productList(request): ...@@ -45,33 +60,40 @@ def productList(request):
area = req['polygon'][0] area = req['polygon'][0]
init_date = req['start'][0][:10] init_date = req['start'][0][:10]
end_date = req['end'][0][:10] end_date = req['end'][0][:10]
cloud_percentage = req['cloudPercentage'][0] cloud_percentage = "[0 TO " + req['cloudPercentage'][0] + "]"
## ----- aqui llamada a api sentinel ## ----- aqui llamada a api sentinel
## ----- antes consultar en DB si no se tiene ya el producto ## ----- antes consultar en DB si no se tiene ya el producto
sentinel = APISentinel() date = ("".join(init_date.split('-')), "".join(end_date.split('-')))
products = sentinel.getProducts(area, init_date, end_date, cloud_percentage) params = {"platformname": "Sentinel-2"}
# if cloud_percentage.strip():
# params['cloudcoverpercentage'] = cloud_percentage
params['cloudcoverpercentage'] = cloud_percentage
products = sentinel.getProducts(area, date, params)
## simulation of 6-digit random id, this will be obtain from sentinel(?) ## simulation of 6-digit random id, this will be obtain from sentinel(?)
# random_id = ''.join(["%s" % random.randint(0, 9) for i in range(0, 6)]) # random_id = ''.join(["%s" % random.randint(0, 9) for i in range(0, 6)])
## path from image preview storage location ## path from image preview storage location
img_preview = '/static/images/sat_preview/sat_test.jpg' img_preview = '/static/images/sat_preview/sat_test.jpg'
item_data = {
'img' : img_preview,
'process' : process,
'start_date' : init_date,
'end_date' : end_date,
'cloud_percentage': cloud_percentage
}
# se crea una lista de objetos del catalogo # se crea una lista de objetos del catalogo
catalog = [] catalog = []
for p in products: for p in products:
item_data['id'] = products[p]['uuid'] img_link = products[p]['link_icon']
item_data['product'] = products[p] img_link = img_link[:img_link.find("/")+2] + "emmhp:geoemm29@" + img_link[img_link.find("/")+2:]
catalog.append(item_data)
catalog.append({
'process' : process,
'start_date' : init_date,
'end_date' : end_date,
'cloud_percentage': cloud_percentage,
'product' : products[p],
'id' : products[p]['uuid'],
'img' : img_preview
})
return JsonResponse({'catalog':catalog}); return JsonResponse({'catalog':catalog});
......
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