如何在 Shiny 中将图像从一个 tabPanel 发送到另一个 tabPanel

Question

我需要创建一个充满图像的仪表板。

每个图像都应该有一个来自shinyWidgets包的pickerInput()关联。我将图像路径包含在标签参数中。我的想法是将每个 pickerInput 与每个图像相关联。我所做的有意义吗？

我使用 pickerInput 因为我希望使用他/她想要发送图像的面板。

然后，在用户选择面板后，图像将发送到用户选择的 tabpPanel。

library(shiny)
library(shinyWidgets)

 
ui <- fluidPage(
   
  
  titlePanel("Two Panels Image App"),
   
  tabsetPanel(
    tabPanel("Panel A",
             wellPanel(
               
               
               pickerInput(
                 inputId = "picker1a",
                 label = img(src = "www/panelA/image1a.jpg", width = "100%"),
                 choices = c("Panel A", "Panel B", "Panel C"),
                 selected = "Option A"
               ) ,
               
               pickerInput(
                 inputId = "picker1b",
                 label = img(src = "www/panelA/imagm1b.jpg", width = "100%"),
                 choices = c("Panel A", "Panel B", "Panel C"),
                 selected = "Option A"
               )  
               
               
             )
    ),
    tabPanel("Panel B",
             wellPanel(
              
               pickerInput(
                 inputId = "picker2a",
                 label = img(src = "www/panelB/imagem2a.jpg", width = "100%"),
                 choices = c("Panel A", "Panel B", "Panel C"),
                 selected = "Panel B"
               ),
               pickerInput(
                 inputId = "picker2b",
                 label = img(src = "www/panelB/imagem2b.jpg", width = "100%"),
                 choices = c("Panel A", "Panel B", "Panel C"),
                 selected = "Panel B"
               ),
                
             )
    )
  )
)
 
server <- function(input, output) {
   
}
 
shinyApp(ui, server)

Answer 1

这就是你的想法吗？

https://technophobe01.shinyapps.io/77875479/

根据您的代码，我的感觉是提供一个可行的示例。我们首先创建一个带有三个选项卡面板的流畅页面：（两个很好，但三个很棒）

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  titlePanel("Dynamic Image Panels"),
  tabsetPanel(
    id = "panelTabs",
    tabPanel("Panel A", uiOutput("panelAContent")),
    tabPanel("Panel B", uiOutput("panelBContent")),
    tabPanel("Panel C", uiOutput("panelCContent"))
  )
)

在服务器端，我们跟踪图像分配并观察分配何时发生更改。当用户为图像选择新面板时，我们会更新 UI 并将图像移动到所选面板。

library(shiny)
library(shinyWidgets)

images <- list(
  image1 = list(src = "panelA/image1a.jpg", panel = "Panel A"),
  image2 = list(src = "panelA/image1b.jpg", panel = "Panel A"),
  image3 = list(src = "panelB/image2a.jpg", panel = "Panel B"),
  image4 = list(src = "panelB/image2b.jpg", panel = "Panel B")
)

server <- function(input, output, session) {
  imagePanels <- reactiveValues(panelAssignments = list(image1 = "Panel A", image2 = "Panel A", image3 = "Panel B", image4 = "Panel B"))
  
  # Generate panel content based on current image assignments

  generatePanelContent <- function(panelName, imagePanels) {
    uiElements <- lapply(names(imagePanels$panelAssignments), function(imageId) {
      if (imagePanels$panelAssignments[[imageId]] == panelName) {
        src <- images[[imageId]]$src
        fluidRow(
          column(4,
                 img(src = src, width = "100%"),
                 pickerInput(inputId = imageId, 
                             label = paste("Move", imageId, "to:"),
                             choices = c("Panel A", "Panel B", "Panel C"),
                             selected = panelName)
          )
        )
      }
    })
    do.call(tagList, uiElements)
  }
  
  # Observe pickerInputs and update panel assignments

  lapply(names(images), function(imageId) {
    observeEvent(input[[imageId]], {
      imagePanels$panelAssignments[[imageId]] <- input[[imageId]]
    })
  })
  
  # Generate UI for each panel based on imagePanels

  output$panelAContent <- renderUI({ generatePanelContent("Panel A", imagePanels) })
  output$panelBContent <- renderUI({ generatePanelContent("Panel B", imagePanels) })
  output$panelCContent <- renderUI({ generatePanelContent("Panel C", imagePanels) })
}

希望这能为您指明正确的方向。