es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Ocultar imagen en una aplicación Shiny modularizada después de presionar actionButton().

Ocultar imagen en una aplicación Shiny modularizada después de presionar actionButton().

02 Aug, 2023 Programación

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)
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 paquete shinyjs.

    Primero, necesitamos agregar la función useShinyjs() en la función dashboardBody() para inicializar shinyjs.

    Luego, podemos crear un nuevo módulo para la imagen usando la función imgUI(). En este ejemplo, usamos la imagen apps.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 el actionButton() como argumento llamado btn.

    En la función textServer(), podemos usar observeEvent() para escuchar cuando se hace clic en el actionButton(). Cuando se hace clic, podemos usar shinyjs::hide() para ocultar la imagen pasando el id del div que contiene la imagen (showimg).

    Luego, podemos agregar la función textServer() a la función servidor server(). Para obtener el argumento btn para textServer(), podemos usar sideServer() para crear un nuevo valor reactivo btn basado en el valor del actionButton(). Luego pasamos el valor de btn a textServer().

    La función server() actualizada se vería así:

    server <- function(input, output, session) {

  # usar el reactivo en otro módulo
  city_input <- sideServer("side")
  textServer("imgPL", btn = city_input$btn)

}

    Y las funciones imgUI() y textServer() actualizadas se verían así:

    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")
      })
    })
}

    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á usando shinyjs::hide().

Comments are closed.