R闪亮: slickR选择事件

Question

slickR包有一个focusOnSelect选项-当单击旋转木马中的图像时，它会被高亮显示。如何访问R中要使用的选择事件来触发其他操作？具体来说，我想点击一个图像并让它用图像名称更新一个文本框。

要使用下面的示例，将3个图像(image1.jpg、image2.jpg、image3.jpg)放在与应用程序相同的目录中。

library(shiny)

ui <- shiny::basicPage(

  slickROutput("my_slick",width='100%',height='200px')

)

server <- function(input, output) {

  output$my_slick <- renderSlickR({
      my_images <- c("image1.jpg", "image2.jpg", "image3.jpg")
      slickR(
        my_images,
        slideId = 'slick_images',
        width='90%'
      )
  })

}

shinyApp(ui, server)

Answer 1

是你想要的吗？

library(shiny)
library(slickR)

my_images <- c("image1.png", "image2.png", "image3.png")

ui <- shiny::basicPage(

  slickROutput("my_slick",width='100%',height='200px'), 

  tags$p(id="textbox"),

  tags$script('var my_images = ["image1.png","image2.png","image3.png"];
              $("#my_slick").on("click", function(e){ 
                var slideClicked = $(this).find(".slick-active").attr("data-slick-index"); 
                document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
              });')
)

server <- function(input, output) {

  output$my_slick <- renderSlickR({
    slickR(
      my_images,
      slideId = 'slick_images',
      width='90%'
    )
  })    
}

shinyApp(ui, server)

​

​

如果要以闪亮的形式获取所选图像的名称，请在脚本中添加一行：

  tags$script('var my_images = ["image1.png","image2.png","image3.png"];
              $("#my_slick").on("click", function(e){ 
                var slideClicked = $(this).find(".slick-active").attr("data-slick-index"); 
                Shiny.setInputValue("selectedImage", my_images[slideClicked]); 
                document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
              });')

然后所选图像的名称在input$selectedImage中。

编辑

下面是OP在评论中要求的改进脚本：

  tags$script('var my_images = ["image1.png","image2.png","image3.png"];
              var binary = true;
              $("#my_slick").on("click", function(e){ 
                if(e.target.localName == "img"){
                  if(binary){
                    var slideClicked = $(this).find(".slick-active").attr("data-slick-index"); 
                    Shiny.setInputValue("selectedImage", my_images[slideClicked]); 
                    document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
                  }else{
                    document.getElementById("textbox").innerHTML = "";
                  }
                  binary = false;
                }else{
                  document.getElementById("textbox").innerHTML = "";
                  binary = true;
                }
              });')