Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 43dd87b3 authored by Sergio Adrian Gongora Euan's avatar Sergio Adrian Gongora Euan
Browse files
Options

play images

parent 6f45d711
Show whitespace changes
Inline Side-by-side
Showing with 38 additions and 28 deletions
reports/templates/L2ASCL_data.html
View file @ 43dd87b3
......@@ -279,14 +279,15 @@
<div class="box box-danger">
<div class="box-header with-border">
<div class="pull-left">
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="display: none" onclick="play()">
<button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" onclick="play()">
<i class="fa fa-play"></i> Play
</button>
<button type="button" id="stop" class="btn btn-block btn-primary btn-xs" style="display: none; margin: 0px;" onclick="stop()">
<i class="fa fa-stop"></i> Stop
</button>
</div>
<h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{defaultDataSet}}</h3>
<!-- <h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{defaultDataSet}}</h3> -->
<h3 class="box-title" id="titleMap">{{defaultDataSet}}</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
......@@ -298,15 +299,15 @@
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-1 prev" style="display: none">
<div class="col-lg-1 col-md-1 col-xs-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">
<div class="col-lg-10 col-md-9 col-xs-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"
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">
<div class="col-lg-1 col-md-1 col-xs-1 next" style="display: none">
<i class="glyphicon glyphicon-chevron-right" onclick="next()"></i>
</div>
</div>
......@@ -352,7 +353,7 @@
<i class="fa fa-dribbble"> </i>
</a>
</li>
</ul>
</ul>-->
<!-- Social buttons -->
</div>
......@@ -387,7 +388,8 @@
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
var activePoints = [];
//var activePoints = [];
var activePoints = config.data.labels;
var imageNumber = 0;
var playImages;
//var myChart;
......@@ -395,18 +397,21 @@
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
stop();
activePoints = myChart.getElementsAtEvent(evt);
// activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt);
var firstPoint = activePoint[0];
if (!firstPoint) return;
var label = myChart.data.labels[firstPoint._index];
//if (!firstPoint) return;
activePoints.forEach(function(value,index){
if(value==firstPoint){
//if(value==firstPoint){
if (value == label) {
imageNumber=index;
}
});
updateImage(firstPoint);
var imagePoint = activePoints[imageNumber];
updateImage(imagePoint);
//updateImage(firstPoint);
//alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
//document.getElementById("satImage").src = "{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg";
};
......@@ -414,21 +419,21 @@
function play(){
$("#play").hide();
$("#stop").show();
$(".next").hide();
$(".prev").hide();
$("#showImage").addClass('col-lg-offset-1');
// $(".next").hide();
// $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1');
playImages = setInterval(() => {
next();
}, 2000);
}, 4000);
}
function stop(){
clearInterval(playImages)
$("#showImage").removeClass('col-lg-offset-1');
// $("#showImage").removeClass('col-lg-offset-1');
$("#play").show();
$("#stop").hide();
$(".next").show();
$(".prev").show();
// $(".next").show();
// $(".prev").show();
}
// cambiar el tipo de gráfica
function next(){
......@@ -457,10 +462,13 @@
}
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"
//label = myChart.data.labels[imagePoint._index];
//datasets = myChart.data.datasets[imagePoint._datasetIndex].label;
//document.getElementById("titleMap").innerHTML = label + " - " + datasets;
label = imagePoint;
titleLabel = label.slice(0,4)+"/"+label.slice(4, 6)+"/"+ label.slice(6);
document.getElementById("titleMap").innerHTML = titleLabel;
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}" + label + "_TCI_60m.jpg"
}
function change(newType) {
......@@ -498,8 +506,8 @@
height: reportPageHeight
});
// Mantenemos la posicion del canvas
var pdfctx = $(pdfCanvas)[0].getContext('2d');
// Mantenemos la posicion del canvaslabel
var pdfctx = $(pdfCanvas)[0].getContlabel
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
......
reports/views.py
View file @ 43dd87b3
......@@ -71,8 +71,10 @@ def report_L2ASCL(request, report, purchase_id):
data['datasets'].sort(key=lambda k: max(k['data']))
graphData['data'] = data
label = graphData['data']['labels'][0]
defaultLabel = graphData['data']['labels'][0]
defaultDataset = graphData['data']['datasets'][0]['label']
defaultDataset = label[0:4]+"/"+label[4:6]+"/"+label[6:]
#defaultDataset = graphData['data']['datasets'][0]['label']
# print(settings.BASE_URL)
# graphData['options']['responsive']=True
# graphData['options']['maintainAspectRatio']=False
......
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