Rename Slider class to PlaybackControl, Added time reporting back to …

…Shiny
bupaverse · Nov 19, 2018 · 6fbc9cb · 6fbc9cb
1 parent 9199ffc
commit 6fbc9cb
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 213 deletions.
diff --git a/R/processanimateR.R b/R/processanimateR.R
@@ -1,6 +1,7 @@
 #' @title Animate cases on a process map
 #'
-#' @description A function for creating a SVG animation of an event log on a process map created by \code{\link{process_map}} from the processmapR package.
+#' @description A function for creating a SVG animation of an event log on a process map created by
+#'  \code{\link{process_map}} from the processmapR package.
 #'
 #' @param eventlog The event log object that should be animated
 #' @param processmap The process map created with processmapR that the event log should be animated on,

diff --git a/inst/htmlwidgets/lib/modules/animation_slider.js b/inst/htmlwidgets/lib/modules/animation_slider.js
diff --git a/inst/htmlwidgets/processanimateR.js b/inst/htmlwidgets/processanimateR.js
@@ -10,33 +10,11 @@ HTMLWidgets.widget({
 
   factory: function(el, width, height) {
 
-    var slider = new Slider(el);
+    var control = new PlaybackControl(el);
     var scales = new Scales(el);
     var tokens = null;
     var renderer = null;
 
-    var repeatLoop = null;
-    var repeatCount = 1;
-
-    function repeatAnimation(data, svg) {
-      if (data.repeat_count === null) {
-        data.repeat_count = Infinity;
-      }
-      if (repeatLoop) {
-        window.cancelAnimationFrame(repeatLoop);
-      }
-      (function(){
-        var time = svg.getCurrentTime();
-        if (time > (data.duration + data.repeat_delay) && repeatCount < data.repeat_count) {
-          svg.setCurrentTime(0);
-          repeatCount++;
-        }
-        if (repeatCount < data.repeat_count) {
-          repeatLoop = window.requestAnimationFrame(arguments.callee);
-        }
-      })();
-    }
-
     return {
 
       renderValue: function(data) {
@@ -63,24 +41,26 @@ HTMLWidgets.widget({
           var tokenGroup = tokens.insertTokens(svg);
           tokens.attachEventListeners(svg, tokenGroup);
 
-          slider.renderSlider(data, svg, width);
+          control.renderPlaybackControl(data, svg, width);
           scales.renderLegend(data, svg, width, height);
 
-          repeatAnimation(data, svg);
-
-          renderer.resize(width, Math.max(0, height - slider.getHeight()));
+          renderer.resize(width, Math.max(0, height - control.getHeight()));
         });
 
       },
 
       resize: function(width, height) {
 
         if (renderer) {
-          slider.renderSlider(renderer.getData(), renderer.getSvg(), width);
+          control.renderPlaybackControl(renderer.getData(), renderer.getSvg(), width);
           scales.resizeLegend(renderer.getSvg(), width, height);
-          renderer.resize(width, Math.max(0, height - slider.getHeight()));
+          renderer.resize(width, Math.max(0, height - control.getHeight()));
         }
 
+      },
+
+      getPlaybackControl: function() {
+        return control;
       }
 
     };

diff --git a/inst/htmlwidgets/processanimateR.yaml b/inst/htmlwidgets/processanimateR.yaml
@@ -1,9 +1,9 @@
 dependencies:
   - name: processanimater-libs
-    version: 0.3.0
+    version: 1.0.0
     src: "htmlwidgets/lib/modules"
     script:
-      - animation_slider.js
+      - animation_playback_control.js
       - animation_scales.js
       - animation_tokens.js
       - animation_renderer_graphviz.js

diff --git a/vignettes/use-shiny-selections.Rmd b/vignettes/use-shiny-selections.Rmd
@@ -36,7 +36,9 @@ shinyAnimation <- function(eventlog, min.time = 30, max.time = 600, default.time
       h4("Selected cases"),
       textOutput(ns("token_selection")),
       h4("Selected activities"),
-      textOutput(ns("activity_selection"))
+      textOutput(ns("activity_selection")),
+      h4("Current time"),
+      textOutput(ns("activity_time"))
     )
   }
 
@@ -58,6 +60,14 @@ shinyAnimation <- function(eventlog, min.time = 30, max.time = 600, default.time
         paste0("(", activities$id, ",", activities$activity, ")", collapse = ",")
       }
     })
+    
+    output$activity_time <- renderText({
+      if (is.null(input$process_time)) {
+        "0"
+      } else {
+        input$process_time
+      }
+    })    
 
     output$process <- renderProcessanimater(expr = {
       animate_process(eventlog, ...)
@@ -72,7 +82,7 @@ shinyAnimation <- function(eventlog, min.time = 30, max.time = 600, default.time
 
   # Two animations
   server <- function(input, output, session) {
-    callModule(animation, "module1", animation_mode = "relative")
+    callModule(animation, "module1", mode = "relative")
     callModule(animation, "module2")
   }