css 调整闪亮进度条的大小并使其居中

z31licg0  于 2022-12-20  发布在  其他
关注(0)|答案(2)|浏览(148)

我正在使用一个需要计算进程的Shiny应用程序,当计算进程正在执行时,我使用progressBar来显示进程。
问题是进度条太小了,我不喜欢它的显示方式。
因此,我在想,也许有一种方法可以使用Shiny模态(有一个函数称为modalDialog)来实现进度条。
我的想法是,当用户运行calc时,将打开一个modal,显示progressBar
这是进度代码:

withProgress(message = 'Runing GSVA', value = 0, {
    incProgress(1, detail = "This may take a while...")
    functionToGenerate()
  })

你知道吗?

cnjp1d6j

cnjp1d6j1#

我建议定制通知的CSS类:如果您检查通告程序的元素,您会发现它具有“shiny-notification”类。因此,您可以使用tags$style()覆盖该类的一些属性。在下面的示例中(对于模板:看?withProgress)我决定调整高度+宽度使它更大,顶部+左侧使它居中。

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(".shiny-notification {
              height: 100px;
              width: 800px;
              position:fixed;
              top: calc(50% - 50px);;
              left: calc(50% - 400px);;
            }
           "
      )
    )
  ),
  plotOutput("plot")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    withProgress(message = 'Calculation in progress',
                 detail = 'This may take a while...', value = 0, {
                   for (i in 1:15) {
                     incProgress(1/15)
                     Sys.sleep(0.25)
                   }
                 })
    plot(cars)
  })
}

runApp(shinyApp(ui, server), launch.browser = TRUE)
dbf7pr2w

dbf7pr2w2#

我在shinyWidgets包里写了一个进度条函数,你可以把它放在一个模态里,但是在shiny::showModal里使用起来很棘手,所以你可以像下面这样手动创建你自己的模态。

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  actionButton(inputId = "go", label = "Launch long calculation"), #, onclick = "$('#my-modal').modal().focus();"
  
  # You can open the modal server-side, you have to put this in the ui :
  tags$script("Shiny.addCustomMessageHandler('launch-modal', function(d) {$('#' + d).modal().focus();})"),
  tags$script("Shiny.addCustomMessageHandler('remove-modal', function(d) {$('#' + d).modal('hide');})"),
  
  # Code for creating a modal
  tags$div(
    id = "my-modal",
    class="modal fade", tabindex="-1", `data-backdrop`="static", `data-keyboard`="false",
    tags$div(
      class="modal-dialog",
      tags$div(
        class = "modal-content",
        tags$div(class="modal-header", tags$h4(class="modal-title", "Calculation in progress")),
        tags$div(
          class="modal-body",
          shinyWidgets::progressBar(id = "pb", value = 0, display_pct = TRUE)
        ),
        tags$div(class="modal-footer", tags$button(type="button", class="btn btn-default", `data-dismiss`="modal", "Dismiss"))
      )
    )
  )
)

server <- function(input, output, session) {
  
  value <- reactiveVal(0)
  
  observeEvent(input$go, {
    shinyWidgets::updateProgressBar(session = session, id = "pb", value = 0) # reinitialize to 0 if you run the calculation several times
    session$sendCustomMessage(type = 'launch-modal', "my-modal") # launch the modal
    # run calculation
    for (i in 1:10) {
      Sys.sleep(0.5)
      newValue <- value() + 1
      value(newValue)
      shinyWidgets::updateProgressBar(session = session, id = "pb", value = 100/10*i)
    }
    Sys.sleep(0.5)
    # session$sendCustomMessage(type = 'remove-modal', "my-modal") # hide the modal programmatically
  })

}

shinyApp(ui = ui, server = server)

相关问题