Draw bullets/circles on an Image given image coordinates

Posit Professional & Hosted Products shinyapps.io
,
1

Hi I have a R shiny app displaying an image. I would like to draw a bullets/circles on an image based on image coordinates. The image coordinates are being read from a data frame where I would like to iterate over every row, plot and then remove the coordinates drawn for every iteration.

I have something like this now

#UI
UI <- function(id) {
fluidPage(
useShinyjs(),

fluidRow(
  column(width=12,
         box(title='Select', width = NULL, closable = TRUE,
                 actionButton("draw", "draw"))
  )),

fluidRow(width=7,
         align="center",
         box(title='Draw', width=7, height = NULL,
             uiOutput("sample")
             )
         )
  )
}
#server
Server <-function(input, output, session) {
 useShinyjs()
 
#loop to iterate over every x,y coordinate value in data frame
 for(i in 1:nrow(data))
{
    x = data[i,1]
    y = data[i,2]
    #how do I draw these coordinates values on the below displayed image and clear 
    #the drawn figures every iteration something like addCircles() and clearShapes() in 
    #leafletProxy() used for drawing figures on maps
}

 observeEvent(input$draw, {
 output$sample<-renderUI({tags$img(src = "data/test.png",
                                        type = "image/png", width = 700, height = 400)})
 })
}

Note: My original image is 1920x1080 and the image coordinates are accoding to these dimensions and I want to display the image in the app with custom width and height, like I have above(700x400).

2

Hi,

Here is my first attempt for drawing the circles on an image

library(ggplot2)
library(magick)

image <- image_fill(logo, 'none')
raster <- as.raster(image)
imgHeight = image_info(image)$height
imgWidth = image_info(image)$width

myData = data.frame(x = runif(10, 0, imgWidth), 
                    y = runif(10, 0, imgHeight))

ggplot() + 
  annotation_raster(raster, 0, imgWidth, 0, imgHeight) + 
  xlim(0, imgWidth) + ylim(0, imgHeight) +
  geom_point(data = myData, aes(x = x, y = y), 
                      color = "orange", size = 10, shape = 1, stroke = 2)+
  theme_void()

image

First I converted the image to a raster using the magick package. Then I used ggplot to create an empty plot with the dimensions of the figure, after which I plotted circles (geom_point) given certain coordinates.

This could easily be implemented in Shiny, but instead of ggplot a better implementation would be with plotly as you can use the proxy to only update the circles and not the whole image (will be slower). I didn't have time yet to figure out that part since I'm a plotly beginner myself :slight_smile:

Hope this already helps,
PJ