Secuencia de Imagenes en reportes

parent e75db92c
......@@ -2,3 +2,17 @@ body
{
background-color:White;
}
.next{
padding: 0px;
padding-top: 50%;
cursor: pointer;
font-size: 20px;
}
.prev{
padding-left: 20px;
padding-top: 50%;
cursor: pointer;
font-size: 20px;
}
......@@ -5,6 +5,7 @@
<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="{% static 'reports/css/scldata.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">
......@@ -275,7 +276,7 @@
<!-- DONUT CHART -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" id="titleMap">{{dafaultLabel}}</h3>
<h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{defaultDataSet}}</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
......@@ -286,9 +287,19 @@
</div>
</div>
<div class="box-body">
<img onclick="window.open(this.src)" class="img-responsive" id="satImage" width="400"
height="400px" src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/{{dafaultLabel}}_TCI_60m.jpg"
style="margin-left: auto; margin-right: auto; display: block;">
<div class="row">
<div class="col-lg-1 prev" style="display: none">
<i class="glyphicon glyphicon-chevron-left" onclick="prev()"></i>
</div>
<div class="col-lg-10 col-lg-offset-1" id="showImage">
<img onclick="window.open(this.src)" class="img-responsive" id="satImage" width="400"
height="400px" src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/{{dafaultLabel}}_TCI_60m.jpg"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
<div class="col-lg-1 next" style="display: none">
<i class="glyphicon glyphicon-chevron-right" onclick="next()"></i>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
......@@ -366,23 +377,63 @@
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
var activePoints = [];
var imageNumber = 0;
//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];
$("#showImage").removeClass('col-lg-offset-1');
$(".next").show()
$(".prev").show()
activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt);
var firstPoint = activePoint[0];
if (!firstPoint) return;
activePoints.forEach(function(value,index){
if(value==firstPoint){
imageNumber=index;
}
});
label = myChart.data.labels[firstPoint._index];
updateImage(firstPoint);
//alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
//document.getElementById("satImage").src = "{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg";
document.getElementById("titleMap").innerHTML = label;
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/" + label + "_TCI_60m.jpg"
};
// cambiar el tipo de gráfica
function next(){
if(imageNumber==(activePoints.length-1)){
imageNumber=0;
}else {
imageNumber++;
}
var imagePoint = activePoints[imageNumber];
if (!imagePoint) return;
updateImage(imagePoint);
}
function prev() {
if (imageNumber == 0) {
imageNumber = activePoints.length - 1;
} else {
imageNumber--;
}
var imagePoint = activePoints[imageNumber];
if (!imagePoint) return;
updateImage(imagePoint);
}
function updateImage(imagePoint){
label = myChart.data.labels[imagePoint._index];
datasets = myChart.data.datasets[imagePoint._datasetIndex].label;
document.getElementById("titleMap").innerHTML = label + " - " + datasets;
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/" + label + "_TCI_60m.jpg"
}
function change(newType) {
var ctx = document.getElementById("myChart").getContext("2d");
......
......@@ -68,12 +68,13 @@ def report_L2ASCL(request, report,purchase_id):
graphData['data'] = data
defaultLabel = graphData['data']['labels'][0]
defaultDataset = graphData['data']['datasets'][0]['label']
# print(settings.BASE_URL)
# graphData['options']['responsive']=True
# graphData['options']['maintainAspectRatio']=False
# print(json.dumps(graphData).encode("utf-8"))
return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData), "report_name": report, "IMAGE_PATH": image_path, 'dafaultLabel': defaultLabel})
return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData), "report_name": report, "IMAGE_PATH": image_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset})
# -------------------------------------------------------------------------------def Reports(request):
......
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