Añadir un botón de reinicio de zoom en el archivo SVG en la aplicación Shiny.
Tengo la aplicación “shiny” a continuación en la que quiero agregar controles para desplazamiento y zoom como se muestra aquí utilizando el paquete “panzoom”. Ya he agregado los botones “+/-“, pero ¿qué hay de la opción de reinicio? Si conoces algún otro paquete que pueda hacerlo, siéntete libre de hacerlo.
library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)
js <- '
$(document).ready(function(){
var element = document.getElementById("grr");
var instance = panzoom(element);
$("#zoomout").on("click", function(){
instance.smoothZoom(0, 0, 0.9);
});
$("#zoomin").on("click", function(){
instance.smoothZoom(0, 0, 1.1);
});
});
$("#zoomout").on("dblclick", function(){
return false;
});
$("#zoomin").on("dblclick", function(){
return false;
});
';
ui <- fluidPage(
tags$head(
tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"),
tags$script(HTML(js))
),
grVizOutput("grr", width = "100%", height = "90vh"),
actionGroupButtons(
inputIds = c("zoomout", "zoomin"),
labels = list(icon("minus"), icon("plus")),
status = "primary"
)
)
server <- function(input, output) {
reactives <- reactiveValues()
observe({
reactives$graph <- render_graph(
create_graph() %>%
add_n_nodes(n = 2) %>%
add_edge(
from = 1,
to = 2,
edge_data = edge_data(
value = 4.3
)
)
)
})
output$grr <- renderGrViz(reactives$graph)
}
shinyApp(ui, server)
davy.ai
Para agregar una opción de reinicio a la aplicación
shiny
, podemos agregar otro botón a la funciónactionGroupButtons
con una etiqueta de “Reset” y un ID de entrada correspondiente de “reset”. Luego, podemos crear un listener de eventos de clic en JavaScript para este botón, que establecerá los valores de zoom y pan en sus posiciones predeterminadas. Podemos usar la funciónreset
de la bibliotecapanzoom
para lograr esto. Aquí está el código actualizado:“`{r}
library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)
js <- ‘
$(document).ready(function(){
var element = document.getElementById(“grr”);
var instance = panzoom(element);
$(“#zoomout”).on(“click”, function(){
instance.smoothZoom(0, 0, 0.9);
});
$(“#zoomin”).on(“click”, function(){
instance.smoothZoom(0, 0, 1.1);
});
$(“#reset”).on(“click”, function(){
instance.reset();
});
});
$(“#zoomout”).on(“dblclick”, function(){
return false;
});
$(“#zoomin”).on(“dblclick”, function(){
return false;
});
‘
ui <- fluidPage(
tags$head(
tags$script(src = “https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js”),
tags$script(HTML(js))
),
grVizOutput(“grr”, width = “100%”, height = “90vh”),
actionGroupButtons(
inputIds = c(“zoomout”, “zoomin”, “reset”),
labels = list(icon(“minus”), icon(“plus”), “Reset”),
status = “primary”
)
)
server <- function(input, output) {
reactives <- reactiveValues()
observe({
reactives$graph <- render_graph( create_graph() %>%
add_n_nodes(n = 2) %>%
add_edge(
from = 1,
to = 2,
edge_data = edge_data(
value = 4.3
)
)
)
})
output$grr <- renderGrViz(reactives$graph)
}
shinyApp(ui, server)
“`
Ten en cuenta que hemos agregado un nuevo botón a
actionGroupButtons
, con una etiqueta de “Reset” y un ID de entrada de “reset”. También agregamos un nuevo listener de evento de clic para este botón en el código de JavaScript, utilizando la funciónreset
de la bibliotecapanzoom
. Ahora, cuando el usuario haga clic en el botón “Reset”, los valores de zoom y pan se restablecerán a sus posiciones predeterminadas.