6

I am using shiny to build a web application. Some steps will take some time to calculate, so I want to add a calculation in process indicator in shiny application.

I found Show that Shiny is busy (or loading) when changing tab panels in stackoverflow, but the shinyIncubator package seams need to specify min and max.

Then I found this blog:http://withr.me/blog/2014/01/03/add-calculation-in-process-indictor-for-shiny-application/ He provided a great way to do this. 

shinyUI(bootstrapPage(
  # Add custom CSS & Javascript;
  tagList(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",href="style.css"),
      tags$script(type="text/javascript", src = "busy.js")
    )
  ),
  div(class = "busy",  
      p("Calculation in progress.."), 
      img(src="http://imageshack.us/a/img827/4092/ajaxloaderq.gif")
  ),
  div(class = "span4", uiOutput("obs")),
  div(class = "span8", plotOutput("distPlot"))
))

Java script;

setInterval(function(){
  if ($('html').attr('class')=='shiny-busy') {
    setTimeout(function() {
      if ($('html').attr('class')=='shiny-busy') {
        $('div.busy').show()
      }
    }, 1000)
  } else {
    $('div.busy').hide()
  }
}, 100)

style.css

div.busy { 
  position:absolute;
  top: 40%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
  display:none;
  background: rgba(230, 230, 230, .8);
  text-align: center;
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 40px;
  padding-right: 30px;
  border-radius: 5px;
}

So my question is how to add custom CSS and Javascript in my ui file? I tried to creat two separate files of js and css, but the indicator appears at the left-top constantly. Then I tried to put these two pieces of code directly in R, while definitely, syntax error. Thanks!

Problem solved: Create a folder called "www" and put thoes two files in it.

Community
  • 1
  • 1
Yoki
  • 863
  • 4
  • 14
  • 26
  • What exactly are you trying to do? Do you want the progress indicator to appear in the middle of the page? Or aligned with a specific piece of content on your page or something? (I'm curious because we're currently putting together the design for what progress indication will look like in Shiny 0.10.) – Joe Cheng Mar 31 '14 at 22:36
  • I am trying to make the progress indicator appear in the middle of the page when calculating and disappear afterwards. So far I got the indicator appears continuously at the left-top(default place I guess) which means the java script and style.css didn't work. – Yoki Mar 31 '14 at 22:41
  • 2
    Misread your post as "I am trying to build a shiny new web application"! – Robbie JW May 20 '14 at 17:04
  • @Yoki, if you solved your own problem it would be helpful if you could post your own answer and accept it so the question is marked as answered. – cdeterman Feb 13 '15 at 20:48

1 Answers1

0

Create a folder called "www" and put those two files in it.

Yoki
  • 863
  • 4
  • 14
  • 26