Ocultar imagen en una aplicación Shiny modularizada después de presionar actionButton().
En la aplicación de Shiny a continuación, quiero que se muestre una imagen al cargar la aplicación por primera vez y luego se oculte después de hacer clic en el actionButton()
.
library(shiny)
library(shinyjs)
library(shinydashboard)
library(dplyr)
# Algunos datos
sideUI <- function(id) {
ns <- NS(id)
tagList(
actionButton(ns("action"),"Enviar")
)
}
# En este caso, este servidor no es necesario, pero se usa uiOuput/renderUI en un caso real.
# sideServer <- function(id) { moduleServer(id,function(input, output, session) { })}
# Define las funciones del UI y del servidor para el mapa
sideServer <- function(id) {
moduleServer(
id,
function(input, output, session) {
return(btn = reactive(input$action))
})
}
imgUI <- function(id) {
ns <- NS(id)
tagList(
div(
id = "showimg",
img(src='apps.png', align = "center"))
)
}
textServer <- function(id, btn) {
moduleServer(
id,
function(input, output, session) {
observeEvent(btn(), {
shinyjs::hide(id = "showimg")
})
})
}
# Construye el ui y el servidor y luego ejecútalo
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(sideUI("side")),
dashboardBody(useShinyjs(),imgUI("imgPL"))
)
server <- function(input, output, session) {
# Usa el reactivo en otro módulo
city_input <- sideServer("side")
textServer("imgPL", btn = city_input$btn)
}
shinyApp(ui, server)
davy.ai
Para mostrar una imagen al cargar la aplicación y luego ocultarla después de hacer clic en el
actionButton()
, podemos usar el paqueteshinyjs
.Primero, necesitamos agregar la función
useShinyjs()
en la funcióndashboardBody()
para inicializarshinyjs
.Luego, podemos crear un nuevo módulo para la imagen usando la función
imgUI()
. En este ejemplo, usamos la imagenapps.png
ubicada en el mismo directorio que la aplicación.Después de crear el UI del módulo, podemos crear una función servidor
textServer()
que toma elactionButton()
como argumento llamadobtn
.En la función
textServer()
, podemos usarobserveEvent()
para escuchar cuando se hace clic en elactionButton()
. Cuando se hace clic, podemos usarshinyjs::hide()
para ocultar la imagen pasando elid
deldiv
que contiene la imagen (showimg
).Luego, podemos agregar la función
textServer()
a la función servidorserver()
. Para obtener el argumentobtn
paratextServer()
, podemos usarsideServer()
para crear un nuevo valor reactivobtn
basado en el valor delactionButton()
. Luego pasamos el valor debtn
atextServer()
.La función
server()
actualizada se vería así:Y las funciones
imgUI()
ytextServer()
actualizadas se verían así:Ahora, cuando se carga la aplicación, la imagen se mostrará en la aplicación. Cuando se hace clic en el
actionButton()
, la imagen se ocultará usandoshinyjs::hide()
.