Display different pair of images in a shiny app based on each time any actionButton() is pressed-CodePudding

I have the shiny app below with 3 actionButtons. I want every time a user presses any of them a different pair of images should be displayed. The images are already saved in a folder named www inside my working directory. And they are named like:

"1betA_green.jpg"
"1betA_green.jpg"

for first time the user presses any actionButton().(Default case).

"2betA_green.jpg"
"2betA_green.jpg"

for 2nd time the user press any actionButton().

etc..

This can happen up to 6 times then it stops.

library(shiny)
library(shinyjs)


ui <- fluidPage(
  id="main",
  title="Risk and ambiguity",
  useShinyjs(),
  
  #when you press on of the 3 actionbuttons for first-example
  fluidRow(wellPanel(
    splitLayout(cellWidths = c("50%", "50%"),
                column(12,img(src="1betA_green.jpg", height="80%", width="80%", align="left")),
                column(12,img(src="1betB_green.jpg", height="80%", width="80%", align="right"))))),
  
  #when you press on of the 3 actionbuttons for second time-example
  #fluidRow(wellPanel(
   # splitLayout(cellWidths = c("50%", "50%"),
    #            column(12,img(src="2betA_green.jpg", height="80%", width="80%", align="left")),
     #           column(12,img(src="2betB_green.jpg", height="80%", width="80%", align="right"))))),
  
  ####
  fluidRow(wellPanel(
    splitLayout(cellWidths = c("33%", "33%", "33%"),
                #uiOutput("myactions")
                column(12,align="center",actionButton("action11", label = "Je choisis option A")),
                column(12,align="center",actionButton("action12", label = "Je choisis le sac avec A et B")),
                column(12,align="center",actionButton("action13", label = "Je choisis option B"))
    )))
)

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

shinyApp(ui = ui, server = server)

CodePudding user response：

Each action button is tied to a pair of images here. Obviously, you need to replace the names of the images with what you have in your www folder. Try this

  library(shiny)
  library(shinyjs)

  ui <- fluidPage(
    id="main",
    title="Risk and ambiguity",
    useShinyjs(),

    #when you press on of the 3 actionbuttons for first-example
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("50%", "50%"), column(6,uiOutput("image1")), column(6,uiOutput("image2"))
                  # column(12,img(src="1betA_green.jpg", height="80%", width="80%", align="left")),
                  # column(12,img(src="1betB_green.jpg", height="80%", width="80%", align="right"))
                  ))),

    #when you press on of the 3 actionbuttons for second time-example
    #fluidRow(wellPanel(
    # splitLayout(cellWidths = c("50%", "50%"),
    #            column(12,img(src="2betA_green.jpg", height="80%", width="80%", align="left")),
    #           column(12,img(src="2betB_green.jpg", height="80%", width="80%", align="right"))))),

    ####
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("33%", "33%", "33%"),
                  #uiOutput("myactions")
                  column(12,align="center",actionButton("action11", label = "Je choisis option A")),
                  column(12,align="center",actionButton("action12", label = "Je choisis le sac avec A et B")),
                  column(12,align="center",actionButton("action13", label = "Je choisis option B"))
      )))
  )

  server <- function(input, output, session){
    rv <- reactiveValues(img11=NULL, img12=NULL)

    myimage1 <- c("YBS.png", "mouse.png","EC.jpg", "man_log.png", "cube.png", "hotdog.png")
    myimage2 <- c("man_log.png", "cube.png", "hotdog.png", "YBS.png", "mouse.png","EC.jpg")

    output$image1 <- renderUI({tags$img(src=rv$img11, height = "50px")})
    output$image2 <- renderUI({tags$img(src=rv$img12, height = "50px")})
    
    observe({
      nclick <- sum(as.numeric(input$action11)   as.numeric(input$action12)   as.numeric(input$action13))
     
      if (nclick==0) { ###  initial display
        rv$img11=myimage1[1]
        rv$img12=myimage2[1]  
      }else if (nclick>0 & nclick<7){
        rv$img11 <- myimage1[nclick]
        rv$img12 <- myimage2[nclick]
      }else{
        rv$img11 <- NULL
        rv$img12 <- NULL
      }
    })
  }

  shinyApp(ui = ui, server = server)