编辑

Question

我遇到的问题是我必须创建一个心理在线实验。我不会涉及所有细节，但是，一个方面涉及显示图像或绘图一定的秒数。我已经开始学习Shiny了，而且我已经花了两个小时了（因为我对R相当满意，这似乎是一个不错的步骤），但是我找不到解决方法。

我知道showNotification具有“ duration”属性，但没有找到showPlot或Image。

有没有办法做到这一点，还是在我没有浪费太多时间的情况下退出Shiny？

问候，乔治

编辑：哇。或多或少是我想要的。谢谢大家！

由于询问了详细信息（并感谢您），实验仅需要一张图像。将有两个实验条件，并且都将显示一个图（该图我打算用ggplot2绘制），并且包含30-50点的数量，持续约4秒钟。受试者必须评估点数（因为他无法计数），并将其插入字段中，然后受试者必须评估某些评估参数。数据将被重用以与他人进行比较。就是这样！

由于现在显然可以做到这一点，所以我将从认真对待Shiny入手。谢谢大家！

Answer 1

您将能够做到这一点。您可以使用reactiveTimer例如

if (interactive()) {

  ui <- fluidPage(
    plotOutput("plot")
  )

  server <- function(input, output) {

    # every 2 seconds.
    autoHide <- reactiveTimer(2000)

    display <- TRUE

    observe({
      # re-execute this reactive expression every time the
      # timer fires.
      autoHide()
      display <- if_else(display,FALSE,TRUE)
    })

    output$plot <- renderPlot({
      autoHide()
      if(display){
      hist(rnorm(200))
      } else {
        hist(rnorm(100))
      }
    })
  }

  shinyApp(ui, server)
}

Answer 2

这是使用slick.js JavaScript库的解决方案。您必须下载zip文件here，并将其解压缩到应用程序的www子文件夹中。

library(shiny)

# images to be displayed ####
## these images are in the www subfolder
images <- c("img1.JPG", "img2.JPG", "img3.JPG", "img4.JPG", "img5.JPG")

# ui #####
ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick-theme.css"),
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick.css"),
    tags$script(type="text/javascript", 
                src="slick-1.8.1/slick/slick.js"),
    tags$script(HTML(
"$(document).ready(function(){
  $('#images').slick({
    arrows: true,
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 500,
    infinite: false
  }).on('afterChange', function(e, slick, cur){
      if(cur === slick.$slides.length-1){
        slick.setOption('autoplay', false, true);
    }
  });
});")),
    tags$style(HTML(
"#images .slick-prev {
    position:absolute;
  top:65px; 
  left:-50px;
}
#images .slick-next {
  position:absolute;
  top:95px; 
  left:-50px;
}
.slick-prev:before, .slick-next:before { 
    color:red !important;
    font-size: 30px;
}
.content {
    margin: auto;
    padding: 2px;
    width: 90%;
}"))
  ),
  sidebarLayout(

    sidebarPanel(
      # empty sidebar #
    ),

    mainPanel(
      tags$div(class="content",
               do.call(function(...) tags$div(id="images", ...), 
                       lapply(seq_along(images), function(i){
                         uiOutput(paste0("img",i))
                       })
               )
      )
    )
  )
)

# server #####
server <- function(input, output) {

  lapply(seq_along(images), function(i){
    output[[paste0("img",i)]] <- renderUI({
      tags$img(src = images[i], width = "400px", height = "400px")
    })
  })

}

# Run the application #### 
shinyApp(ui = ui, server = server)

您想要这样的东西吗？我们可以尝试添加“转到”按钮，因为自动播放幻灯片在此处在启动时运行。尽管这不是必需的：要停止幻灯片播放，只需将鼠标光标放在图像上即可。

编辑

这里是带有“转到”按钮的版本。

library(shiny)

# images to be displayed ####
## these images are in the www subfolder
images <- c("img1.JPG", "img2.JPG", "img3.JPG", "img4.JPG", "img5.JPG")

# ui #####
ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick-theme.css"),
    tags$link(rel="stylesheet", type="text/css",
              href="slick-1.8.1/slick/slick.css"),
    tags$script(type="text/javascript", 
                src="slick-1.8.1/slick/slick.js"),
    tags$script(HTML(
      "function runSlick(x){
  $('#images').slick({
    arrows: true,
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 500,
    infinite: false
  }).on('afterChange', function(e, slick, cur){
      if(cur === slick.$slides.length-1){
        slick.setOption('autoplay', false, true);
    }
  });
};
Shiny.addCustomMessageHandler('runSlick', runSlick);")),
    tags$style(HTML(
      "#images .slick-prev {
    position:absolute;
  top:65px; 
  left:-50px;
}
#images .slick-next {
  position:absolute;
  top:95px; 
  left:-50px;
}
.slick-prev:before, .slick-next:before { 
    color:red !important;
    font-size: 30px;
}
.content {
    margin: auto;
    padding: 2px;
    width: 90%;
}"))
  ),

  sidebarLayout(

    sidebarPanel(
      actionButton("go", "Go!")
    ),

    mainPanel(
      conditionalPanel(
        "input.go > 0",
        tags$div(class="content",
                 do.call(function(...) tags$div(id="images", ...), 
                         lapply(seq_along(images), function(i){
                           uiOutput(paste0("img",i))
                         })
                 )
        )
      )
    )
  )
)

# server #####
server <- function(input, output, session){

  lapply(seq_along(images), function(i){
    output[[paste0("img",i)]] <- renderUI({
      tags$img(src = images[i], width = "400px", height = "400px")
    })
  })

  observeEvent(input[["go"]], {
    session$sendCustomMessage("runSlick", "")
  }, once = TRUE)

}

# Run the application #### 
shinyApp(ui = ui, server = server)

有没有办法在设定的时间段（秒）内显示图或图像？

2 个答案:

编辑