Agrego boton de play y stop

reports/templates/L2ASCL_data.html

@@ -9,7 +9,9 @@
     <!--  <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://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
+    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></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://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
@@ -255,8 +257,8 @@
                                 <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>
+                                <!-- <button type="button" class="btn btn-box-tool" data-widget="remove"><i
+                                        class="fa fa-times"></i></button> -->
                             </div>
                         </div>
                         <div class="box-body">
@@ -276,14 +278,22 @@
                     <!-- DONUT CHART -->
                     <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()">
+                                    <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>
 
                             <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>
+                                <!-- <button type="button" class="btn btn-box-tool" data-widget="remove" onclick="stop()"><i
+                                        class="fa fa-times"></i></button> -->
                             </div>
                         </div>
                         <div class="box-body">
@@ -379,13 +389,12 @@
         var myChart = new Chart(ctx, config);
         var activePoints = [];
         var imageNumber = 0;
+        var playImages;
         //var myChart;
 
         // mostrar imagen al dar click en los puntos
         document.getElementById("myChart").onclick = function (evt) {
-            $("#showImage").removeClass('col-lg-offset-1');
-            $(".next").show()
-            $(".prev").show()
+            stop();
             activePoints = myChart.getElementsAtEvent(evt);
             var activePoint  = myChart.getElementAtEvent(evt);
             var firstPoint = activePoint[0];
@@ -402,6 +411,25 @@
             //document.getElementById("satImage").src = "{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg";
         };
 
+        function play(){
+            $("#play").hide();
+            $("#stop").show();
+            $(".next").hide();
+            $(".prev").hide();
+            $("#showImage").addClass('col-lg-offset-1');
+            playImages = setInterval(() => {
+                next();
+            }, 2000);
+        }
+
+        function stop(){
+            clearInterval(playImages)
+            $("#showImage").removeClass('col-lg-offset-1');
+            $("#play").show();
+            $("#stop").hide();
+            $(".next").show();
+            $(".prev").show();    
+        }
         // cambiar el tipo de gráfica
         function next(){
             if(imageNumber==(activePoints.length-1)){