imageOutput在conditionalPanel中单击
我正在构建一个闪亮的应用程序，用户在其中点击图像，并将其推进到另一个图像。 这看起来相对简单，但在用户查看第一张图片之前，他们需要输入他们的电子邮件地址。 为了实现这一点，我一直在使用conditionalPanel ，其中第一个图像只有在用户点击一个动作按钮时才会显示。 但是，当图像的面板嵌入到conditionalPanel面板中时， imageOutput的click参数似乎停止工作。
我有一个名为images其中包含9个图像，文件名为1.png, 2.png...9.png （顺便说一句，如果有一种上传这个目录的方法，使得这个例子更容易复制，我很乐意接受建议！）。 以下MWE（不包括conditionalPanel元素）运行良好：
library(shiny)
## User interface
ui <- fluidPage(
h1("MWE",align="center"),
fluidRow(
column(4, conditionalPanel(condition = "input.signingo == 0",
wellPanel(
textInput("who",label = "Please enter your email address.", value=""),
actionButton("signingo",label="Go.")
))
),
column(6, align="center",
wellPanel(
imageOutput("image", height = 175, width = 116, click = "photo_click")
)
)
)
)
server <- function(input, output){
values <- reactiveValues(i = 0, selections = sample(1:9,1))
## Load image
output$image <- renderImage({
filename <- normalizePath(file.path(paste0('images/',values$selections,".png")))
# Return a list containing the filename and alt text
list(src = filename,
alt = paste(input$name))
}, deleteFile = FALSE)
## Function to increment counter by one and to randomly select new image
click.function <- function(){isolate({
values$i <- values$i + 1
values$selections <- sample(1:9,1)
})}
## Move on
observeEvent(input$photo_click,{click.function() })
}
shinyApp(ui = ui, server = server)
但是，当我包含conditionalPanel元素时，单击图像不再会产生新图像。 这是我正在使用的代码：
library(shiny)
## User interface
ui <- fluidPage(
h1("MWE",align="center"),
fluidRow(
column(4, conditionalPanel(condition = "input.signingo == 0",
wellPanel(
textInput("who",label = "Please enter your email address.", value=""),
actionButton("signingo",label="Go.")
))
),
column(6, align="center",
conditionalPanel(condition = "input.signingo > 0",
wellPanel(
imageOutput("image", height = 175, width = 116, click = "photo_click")
))
)
)
)
server <- function(input, output){
values <- reactiveValues(i = 0, selections = sample(1:9,1))
## Load image
output$image <- renderImage({
filename <- normalizePath(file.path(paste0('images/',values$selections,".png")))
# Return a list containing the filename and alt text
list(src = filename,
alt = paste(input$name))
}, deleteFile = FALSE)
## Function to increment counter by one and to randomly select new image
click.function <- function(){isolate({
values$i <- values$i + 1
values$selections <- sample(1:9,1)
})}
## Move on
observeEvent(input$photo_click,{click.function() })
}
shinyApp(ui = ui, server = server)
问题是，虽然第一个conditionalPanel面板似乎在做它的工作 - 用户首先看到“请输入你的电子邮件地址”，并且只有在点击“开始”后才看到第一个图像 - 点击图像不再提前用户转发到下一个图像。 任何想法将不胜感激。
出于测试目的，我使用以下代码生成了9个PNG文件，数字从1到9
for (i in 1:9) {
#png(paste0(i, ".png"), bg = "grey") # you can manipulate the size of graphics
png(paste0(i, ".png"), bg = "grey", height = 400, width = 400)
plot(1:10, type = "n", axes = F, xlab = "", ylab = "")
text(5,5, i, cex = 15, col = i)
box()
dev.off()
}
我也在你的代码中做了一些改变：
取而代之的是条件面板，它有一个动态的UI取决于value$i
初始value$i设置为-1 ，并显示textInput和一个按钮
如果用户输入包含@字符串并按下该按钮，则value$i的value$i将增加1，并显示plotOutput。
如果输入的字符串不包含@则显示警告（ shinyBS ）
问题在某种程度上是由使用参数height和width来调整plotOutput的大小造成的。 input$photo_click不会返回一个值，或者更准确地说它返回NULL 。 如果情节没有调整大小，一切都很完美。 因此，其中一个解决方案是将plotOutput放入一个div并使用非常简单的CSS来设置所需的输出大小。
你可以调整div的大小，如下所示：
div(style = "background:red; height: 400; width: 400;",
imageOutput("image", click = "photo_click")
)
您可以使用div内的height和width值以及png文件的大小来获得想要的结果。
...
png(paste0(i, ".png"), bg = "grey", height = 400, width = 400)
...
背景颜色设置为红色，png文件为灰色以便于定位。
我希望这个解决方案对你有所帮助：
library(shiny)
library(shinyBS)
## User interface
ui <- fluidPage(
uiOutput("dynamic")
)
server <- function(input, output, session){
output$dynamic <- renderUI({
if (values$i == -1) {
list(
h1("MWE", align = "center"),
wellPanel(
textInput("who", label = "Please enter your email address.", value = ""),
actionButton("signingo", label = "Go."),
bsAlert("alert")
)
)
}
else {
fluidRow(
column(4),
column(6,
# imageOutput("image", height = 175, width = 116, click = "photo_click")
# Setting a custom height and width causes the problem.
# You can wrap imageOutput into a div.
div(style = "background:red; height: 400; width: 400;",
imageOutput("image", click = "photo_click")
)
)
)
}
})
# values$i changed to -1
values <- reactiveValues(i = -1, selections = sample(1:9,1))
## Load image
output$image <- renderImage({
filename <- normalizePath(file.path(paste0('images/',values$selections,".png")))
#filename <- paste0("/Users/User/Downloads/images/", values$selections, ".png")
# Return a list containing the filename and alt text
# list(src = filename,
# alt = paste(input$name)) # I don't know what is input$name
list(src = filename,
alt = paste(values$i))
}, deleteFile = FALSE)
## Function to increment counter by one and to randomly select new image
click.function <- function(){ # isolate({
values$i <- values$i + 1
values$selections <- sample(1:9,1)
# })
}
# increment once values$i (from -1 to 0) to close the first menu.
observeEvent(input$signingo, {
#if (input$who != "")
# Require that the inputed string includes @
if (gregexpr(pattern = "@", input$who) != -1) {
click.function()
closeAlert(session, "Alert")
} else {
# If the inputed string doesen't contain @ create a warning
createAlert(session, "alert", "Alert", title = "Not valid email",
content = "", dismiss = T, style = "warning")
}
})
observeEvent(input$photo_click, {
click.function()
})
}
shinyApp(ui = ui, server = server)