Render image in validate function - shiny - r

Question

let's say a generic code of validate function of shiny R :
## Only run examples in interactive R sessions
if (interactive()) {
ui <- fluidPage(
checkboxGroupInput('in1', 'Check some letters', choices = head(LETTERS)),
selectizeInput('in2', 'Select a state', choices = state.name),
plotOutput('plot')
)
server <- function(input, output) {
output$plot <- renderPlot({
validate(
need(input$in1, 'Check at least one letter!'),
need(input$in2 != '', 'Please choose a state.')
)
plot(1:10, main = paste(c(input$in1, input$in2), collapse = ', '))
})
}
shinyApp(ui, server)
}
Could you think it's possible to replace mesage error in character ('Check at least one letter!') by an image (png, jpeg format) ? I tried with renderImage function or , with the help of package imager, and don't manage to do it.
many thanks to you,
echoes
Thanks you for your quick answer, it could be a great solution for my shiny application, and it works !
in :
tags$style(HTML("
.shiny-output-error-validation {
background-image: URL(https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg);
background-repeat: no-repeat;
}
"))
It would be nice to display a random or personalized image, who depends on user action. shinipsum package offer a random_image function, which could be quoted, something as :
tags$style(HTML("
.shiny-output-error-validation {
background-image: plotOutput("random_image");
background-repeat: no-repeat;
}
"))
and in server part :
output$random_image <- renderImage({
random_image()
},deleteFile=FALSE)
Do you think it's possible to use output of ui part in tags$style or tagsList parts ?
many thanks, echoes

Answer 1

A random ggplot:
library(shiny)
library(shinipsum)
ui <- fluidPage(
checkboxGroupInput('in1', 'Check some letters', choices = head(LETTERS)),
plotOutput('plot')
)
server <- function(input, output) {
output$plot <- renderPlot({
test <- need(input$in1, "")
if(!is.null(test)) {
random_ggplot()
} else {
plot(1:10, main = input$in1)
}
})
}
shinyApp(ui, server)
A random image:
library(shiny)
library(shinipsum)
library(imager)
ui <- fluidPage(
checkboxGroupInput('in1', 'Check some letters', choices = head(LETTERS)),
plotOutput('plot')
)
server <- function(input, output) {
output$plot <- renderPlot({
test <- need(input$in1, "")
if(!is.null(test)) {
img <- load.image(random_image()$src)
plot(img)
} else {
plot(1:10, main = input$in1)
}
})
}
shinyApp(ui, server)

Answer 2

Ase they say in this tutorial you can add css style to validation messages. Just target with the selector .shiny-output-error-validation.
In this case I rendernder stackoverflow logo as background to the validation html element.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.shiny-output-error-validation {
background-image: URL(https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg);
background-repeat: no-repeat;
}
"))
),
checkboxGroupInput('in1', 'Check some letters', choices = head(LETTERS)),
selectizeInput('in2', 'Select a state', choices = state.name),
plotOutput('plot')
)
server <- function(input, output) {
output$plot <- renderPlot({
validate(
need(input$in1, " ")
)
plot(1:10, main = paste(c(input$in1, input$in2), collapse = ', '))
})
}
shinyApp(ui, server)

Answer 3

I manage to do something with css tags in two parts, part one here :
css_content1 <- "
.shiny-output-error-validation {
background-image:"
writeLines(text = css_content1, con = "styles1.css")
css1 <- readLines(con = "styles1.css") %>% paste(collapse = "\n")
part two :
css_content2 <- "
background-repeat: no-repeat;
}
"
writeLines(text = css_content2, con = "styles2.css")
css2 <- readLines(con = "styles2.css") %>% paste(collapse = "\n")
I modify server file as below, using renderUi function :
server <- function(input, output) {
output$plot <- renderPlot({
validate(
need(input$in1, " ")
)
plot(1:10, main = paste(c(input$in1, input$in2), collapse = ', '))
})
output$css_style <- renderUI({
tags$head( tags$style(HTML(paste0(css1,"URL(test",sample(1:4,1),".png);",css2,collapse="\n"))
))
})
output$css_style_text <- renderText({
HTML(paste0(css1,"test",sample(1:4,1),".png",");",css2,collapse="\n"))
})
}
with test1.png, test2.png etc ... in a www directory.
I add in UI file part :
ui <- fluidPage(
uiOutput("css_style"),
checkboxGroupInput('in1', 'Check some letters', choices = head(LETTERS)),
selectizeInput('in2', 'Select a state', choices = state.name),
plotOutput('plot')
)
I didn't manage to use a random_image function from shinipsum package.
thanks for your help