Hola, actualmente estoy creando un tablero que muestra una imagen cuando un usuario carga una imagen en R Shiny. Pero quiero moverlo usando las teclas de flecha y/o usando un botón de acción y la única solución que puedo encontrar es usando Javascript, pero no sé cómo integrarlo correctamente con R shiny.
Este es mi código hasta ahora:
library(shiny) library(shinydashboard) library(base64enc) shinyApp( ui = fluidPage( fluidRow(box( width = 12, fileInput( "image", "Choose an image:", accept = ".jpeg" ), column(12, actionButton("submit1", "Submit"), align = "right") )), uiOutput('avatar'), actionButton("left", "", icon = icon("arrow-left")), actionButton("right", "", icon = icon("arrow-right")), actionButton("up", "", icon = icon("arrow-up")), actionButton("down", "", icon = icon("arrow-down")) ), server = function(input, output, session) { base64 <- reactive( if (input$submit1 == TRUE) {inFile <- input$image if(!is.null(inFile)){ dataURI(file = inFile$datapath, mime = "image/jpeg") }} ) output$avatar <- renderUI({ if(!is.null(base64())){ tags$div( tags$img(src= base64(), width="100%"), style = "width: 100px;" ) } }) } )Esto es lo que encontré con respecto al código Javascript sobre imágenes en movimiento usando las teclas de flecha (no sé cómo codificar en JavaScript, así que estoy perdido):
$(document).on('keydown', function(e) { // e stands for "event" - the event is the keypress // e.key means the key that was pressed switch (e.key) { // left arrow pressed case "ArrowLeft": $('#zebra').animate({ left: "-=10px" }, 'fast'); break; // up arrow pressed case "ArrowUp": $('#zebra').animate({ top: "-=10px" }, 'fast'); break; // right arrow pressed case "ArrowRight": $('#zebra').animate({ left: "+=10px" }, 'fast'); break; // down arrow pressed case "ArrowDown": $('#zebra').animate({ top: "+=10px" }, 'fast'); break; } });El #zebra es la identificación de la imagen que usa el usuario que escribió el código Javascript como ejemplo.
¡Gracias!
Estabas tan cerca. Realmente todo lo que se necesitaba es agregar position: relative; a su div. Funciona con position: absolute también. Parece que necesita ser posicionado ya que está haciendo una animación "relativa". También veo que se necesita e.preventDefault() para evitar un comportamiento inesperado.
Asegúrese de hacer clic dentro del cuadro RESULTADO en el fragmento antes de realizar la prueba.
$(document).on('keydown', function(e) { // e stands for "event" - the event is the keypress // e.key means the key that was pressed e.preventDefault(); switch (e.key) { // left arrow pressed case "ArrowLeft": $('#zebra').animate({ left: "-=10px" }, 'fast'); break; // up arrow pressed case "ArrowUp": $('#zebra').animate({ top: "-=10px" }, 'fast'); break; // right arrow pressed case "ArrowRight": $('#zebra').animate({ left: "+=10px" }, 'fast'); break; // down arrow pressed case "ArrowDown": $('#zebra').animate({ top: "+=10px" }, 'fast'); break; default : console.log("fell through"); } }); #zebra { position: relative; left: 30px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="zebra">ZEBRA</div>