diff --git a/www/js/hugvey_timeline.js b/www/js/hugvey_timeline.js
index 4b9c94a..41a19b1 100644
--- a/www/js/hugvey_timeline.js
+++ b/www/js/hugvey_timeline.js
@@ -38,14 +38,31 @@ class Timeline{
startDate.setMinutes(startDate.getMinutes()-1);
let endDate = new Date();
endDate.setMinutes(endDate.getMinutes()+20);
- setTimeout(function(){
- tl.setWindow(startDate, endDate);
- }, 500);
+
+
+//follow the timeline or not if checkbox is checked
+setTimeout(function(){
+ tl.setWindow(startDate, endDate);
+}, 500);
+
+this.moveInterval = setInterval(function(){
+ // skip movement if not visible
+ tl.moveTo(new Date());
+}, 1000);
+
+var checkbox = document.getElementById('follow_checkbox')
+
+checkbox.addEventListener('change', (event) => {
+ if (event.target.checked) {
this.moveInterval = setInterval(function(){
// skip movement if not visible
tl.moveTo(new Date());
}, 1000);
+ } else {
+ clearInterval(this.moveInterval)
+ }
+})
ws.addEventListener( 'message', this);
diff --git a/www/timeline.html b/www/timeline.html
index f960c35..3eaea8d 100644
--- a/www/timeline.html
+++ b/www/timeline.html
@@ -31,7 +31,7 @@
background-color: greenyellow;
border-color: green;
}
-
+
.vis-text,.vis-labelset .vis-label {
color: #999;
}
@@ -71,8 +71,9 @@ font-size: 4.5pt;
+ Follow timeline
-
+
-