Warm tip: This article is reproduced from stackoverflow.com, please click
r shiny

Refresh an image when it is clicked (play animation on click

发布于 2020-03-29 20:59:46

I am working on a satisfaction survey. Which is pretty simple, or so I thought. It is just three smiley faces. I thought that it would be great fort he user to receive some feedback that the smiley has been clicked. While the notification message is great, I thought that it would be great that the images would play a simple animation on click. Here are the png picture and a test gif fort he happy smiley. It will be enough to reproduce the issue, just save the images in the folder images.

My idea was to initially just use the png picture at start of the app and then when the image is clicked the gif replaces the png image every time it is clicked. I have tried countless ways and googled everything, but I'm stuck. If anyone has an idea how to tackle this issue, here is the very basic code : 

library(shiny)
library(shinyjs)
ui <- fluidPage(
  useShinyjs(),

   fluidRow(column(div(id = "happy", plotOutput("plot1")),width = 2,offset =1)
     )
)
server <- function(input, output) {

  output$plot1 <- renderImage({
       filename <- normalizePath(file.path('./images',  paste('happy','.png', sep='')))
       list(src = filename, width=250, height=250)
    }, deleteFile = FALSE)

  onclick(                            
    "happy", 
    { 
      #do stuff
      print("clicked on happy")
      showNotification(h4("Thanks!"), duration = 2,closeButton = FALSE, type = "message")
      })
}
shinyApp(ui = ui, server = server)
Questioner
jerry_K7
Viewed
16
分享
jerry_K7 2020-02-12 04:25

Andrea's response was very helpful here. While the matter could not be done as it was intended since the .gif does not play at every click. There is another way to get a feedback at every click, which is to include CSS animation to provide the visual feedback for the users. It is very simple to do so. To Andrea's code, I added the call to the CSS file with tags$head(includeCSS("./www/animate.css")) and then in the section of the code where the next image is loaded on click I added the attribute class = "animated pulse". The whole code is below:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  tags$head(includeCSS("./www/animate.css")),
  useShinyjs(),
  fluidRow(column(div(id = "happy", uiOutput("plot1")),width = 2,offset =1)
  )
  )

server <- function(input, output) {

  # Render a UI element instead of an image
  output$plot1 <- renderUI({
    div(id = "my_img",
        tags$img(src="0.png", height=250, width=250),
        width = 2, offset =1 )
  })

  onclick(
    "plot1", 
    { 
      print("clicked on happy")
      showNotification(h4("Thanks!"), duration = 2,closeButton = FALSE, type = "message")

      # Update UI element on click
      output$plot1 <- renderUI({
        div(id = "my_img",
            tags$img(src="0.png", class = "animated pulse", height=250, width=250),
            width=2, offset=1)
      })
    })
}
shinyApp(ui = ui, server = server)

Related issues

1
Filter in rows of all columns with specific conditions
2
ggplot2 both axis labels inside plot area
3
Error: could not find function ... in R
4
Create loading messages that will change based on loading time of plot in a shiny app
5
cut.default error in heatmap generation R
6
Problem with apply function in r: it's applied only in the first column
7
R to create a tally of previous events within a sliding window time period
8
combine many columns from one dataframe into another dataframe using setDT
9
Display download button in a tab based on actions in other tabs of a shiny dashboard
10
Parsing dates in R with weird format