文章/答案/技术大牛

发布

社区首页 >问答首页 >单击按钮，显示一个图像，等待4秒，然后在R中显示另一个图像

问单击按钮，显示一个图像，等待4秒，然后在R中显示另一个图像
EN

Stack Overflow用户

提问于 2021-08-21 07:27:08

回答 2查看 380关注 0票数 0

在UI方面，我有两个元素：

actionButton("flip_button"，“倒立硬币”)，
htmlOutput("flip_outcome")

当一个按钮被点击，我想显示一个翻转动画，然后是硬币翻转的结果。我可以用ObserveEvent对按钮单击作出反应，但是元素在观察事件结束时只更新一次，所以我不能进行2次更改。

#
# This is a Shiny web application. You can run the application by clicking
# the 'Run App' button above.
#
# Find out more about building applications with Shiny here:
#
#    http://shiny.rstudio.com/
#

library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sidebarPanel(

                
            ),
            
            # Show a plot of the generated distribution
            mainPanel(
                actionButton("flip_button", "Flip coin"),
                htmlOutput("flip_outcome")
            )
        ),

        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
    coin_image <- reactiveVal("stationary_coin.jpg")
    
    output$flip_outcome<- renderText({
        c('<img src="',coin_image(),'">')
    })
    
    
    observeEvent(input$flip_button, {
        coin_image("flipping.gif")
        Sys.sleep(4)
        outcome<-sample(c("heads.jpg","tails.jpg"), 1)
        coin_image(outcome)
    })
}

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

例如，上面的图片只更新一次。

shiny

回答 2

Stack Overflow用户

发布于 2021-08-21 09:31:57

这是一个JavaScript解决方案。www子文件夹包含文件和coin.js。

R码：

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script(src = "coin.js")
  ),
  br(),
  actionButton("btn", "Coin tossing", onclick = "coinTossing();"),
  br(),
  tags$div(
    id = "imgContainer",
    style = "display: none;",
    tags$img(id = "anim", src = "coinFlipping.gif", width = 400)
  )
)

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

shinyApp(ui, server)

JavaScript代码(文件'coin.js')：

function coinTossing(){
  $("#imgContainer").show();
  var $img = $("#anim");
  var src = $img.attr("src");
  if(src !== "coinFlipping.gif"){
    $img.attr("src", "coinFlipping.gif");
    coinTossing();
  }else{
    var u = Math.random();
    src = u < 0.5 ? "coin_head.png" : "coin_tail.png";
    setTimeout(function() {
      $img.attr("src", src);
    }, 3000);
  }
}

编辑

以下是评论中的问题。

R码：

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script(src = "coin.js")
  ),
  br(),
  actionButton("btn", "Coin tossing", onclick = "coinTossing();"),
  br(),
  tags$img(id = "anim", src = "coin_head.png", width = 400)
)

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

shinyApp(ui, server)

JavaScript代码(文件'coin.js')：

function coinTossing(){
  var $img = $("#anim");
  var src = $img.attr("src");
  if(src !== "coinFlipping.gif"){
    $img.attr("src", "coinFlipping.gif");
    coinTossing();
  }else{
    var u = Math.random();
    src = u < 0.5 ? "coin_head.png" : "coin_tail.png";
    setTimeout(function() {
      $img.attr("src", src);
    }, 3000);
  }
}

票数 2

Stack Overflow用户

发布于 2021-08-21 14:10:52

下面是一个使用observe、invalidateLater和标志vals$flag的闪亮解决方案

library(shiny)

ui <- fluidPage(
  br(),
  actionButton("btn", "Coin tossing"),
  br(),
  uiOutput("coin")
)

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

  vals <- reactiveValues(img = "coin_d.jpg",
                         flag = FALSE)

  observeEvent(input$btn, {
    vals$flag <- TRUE
    if (vals$flag) vals$img <- "coinFlipping.gif"

  })

  observe({
    input$btn
    if (isolate(vals$flag)) {
      vals$flag <- FALSE
      invalidateLater(4000)
    } else {
      vals$img <- sample(c("coin_c.jpg","coin_d.jpg"), 1)
    }
  })

  output$coin <- renderUI({
    tags$div(
      tags$img(id = "anim", src = vals$img, width = 800)
      )
  })
}

shinyApp(ui, server)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68870983

复制

相似问题

问单击按钮，显示一个图像，等待4秒，然后在R中显示另一个图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击按钮，显示一个图像，等待4秒，然后在R中显示另一个图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击按钮，显示一个图像，等待4秒，然后在R中显示另一个图像
EN