CODEWITHSUNDEEP
rshinymessage
Mily
Mily

Reputation: 351

Change style and position of the message box generated by withProgress()

The withProgress() function can generate a message box indicating the shiny app is running. But the message is at the top-right conner of the browser with a small text size, which makes the message not that eye-catching.

So I wonder is there any way that I could change the style and the position of this box, so that the message can be more expressive.

Here is a part of my code:

output$plot <- renderPlot({ 
 if (input$button){

 withProgress(
              distributionPolygon(data(),unit="years",colors=c("black","gray30","gray50","gray70","blue3","dodgerblue3","steelblue1","lightskyblue1","red4","indianred3","orange","seagreen4"),main=title(),tpsMax=input$months),
              message = 'Loading...',
              detail = ''
              )
      }
   })

Upvotes: 4

Views: 8687

Answers (3)

Primax1995
Primax1995

Reputation: 91

Easy way: You can just include the HTML function tags$head() in the ui to overlay the progress bar. Since it's a notification it can be called with .shiny-notification. Simplest way is to put this line somewhere in the ui and adjust the positions (and other CSS related parameters, see here. 

ui <- fluidPage(
  titlePanel(),

  tags$head(tags$style(".shiny-notification {position: fixed; top: 60% ;left: 50%)),

  sidebarPanel()
  mainPanel()
         )

Upvotes: 5

Cris Silva
Cris Silva

Reputation: 121

Try modifying the CSS style shiny-notification. You can check out this post.

Upvotes: 0

Pork Chop
Pork Chop

Reputation: 29387

Update

This is an updated version so you can refer to this example, the example is taken from here

server <- function(input, output) {
  output$plot <- renderPlot({
    input$goPlot # Re-run when button is clicked

    # Create 0-row data frame which will be used to store data
    dat <- data.frame(x = numeric(0), y = numeric(0))

    withProgress(message = 'Making plot', value = 0, {
      # Number of times we'll go through the loop
      n <- 10

      for (i in 1:n) {
        # Each time through the loop, add another row of data. This is
        # a stand-in for a long-running computation.
        dat <- rbind(dat, data.frame(x = rnorm(1), y = rnorm(1)))

        # Increment the progress bar, and update the detail text.
        incProgress(1/n, detail = paste("Doing part", i))

        # Pause for 0.1 seconds to simulate a long computation.
        Sys.sleep(0.1)
      }
    })

    plot(dat$x, dat$y)
  })
}

ui <- shinyUI(basicPage(
  plotOutput('plot', width = "300px", height = "300px"),
  actionButton('goPlot', 'Go plot')
))

shinyApp(ui = ui, server = server)

Original Post

This is related to your previous question too. So you would probably want to change cssstyle of the progress bar. Feel free to play around and do more research if you want a fancier css progress bar.

Note: during the calculations I have also disabled the button so users do not click the button multiple times forcing the computation to repeat itself. You can further look into shinyjs for more information. As you can see in the image below during the computation that button is disabled. It will be back up once it is finished 

rm(list = ls())
library(shiny)
library(shinyIncubator)
library(shinyjs)

server <- function(input, output, session) {
  observe({
    if(input$aButton==0) return(NULL)
    withProgress(session, min=1, max=15, expr={
      disable("aButton")
      for(i in 1:20) {
        setProgress(message = 'Finished...',detail = paste0('Number ',i, ':20'))
        Sys.sleep(0.1)
      }
      Sys.sleep(1.5)
    })
    enable("aButton")
  })
}

ui <- fluidPage(
  tags$head(tags$style(".shiny-progress {top: 50% !important;left: 50% !important;margin-top: -100px !important;margin-left: -250px !important; color: blue;font-size: 20px;font-style: italic;}")),
  sidebarPanel(actionButton("aButton", "Let's go!"), width=2),
  useShinyjs(),
  mainPanel(progressInit())
)

shinyApp(ui = ui, server = server)

enter image description here

Upvotes: -1

Related Questions