Overlapping image and output value in shiny

Question

I want to create a page of my app in which there is an image, and in specific coordinates of the image I can add a numeric output or text output. You can find an example in the following figure (the shafts on the right)

Can you tell me if there is a way to create something like that?

Interesting capability. Welcome to SO! SO is very much about programming, and as such it is very much preferred to have *reproducible questions*. FOr this, it would help to have a basic shiny app that *starts* what you want to do, and what you've tried and how it failed (or misbehaved). Refs: https://stackoverflow.com/questions/5963269/, https://stackoverflow.com/help/mcve, and https://stackoverflow.com/tags/r/info. (Without anything else, your question is effectively *"recommend or find a book, tool, software library"*, which is [off-topic](https://stackoverflow.com/help/on-topic) on SO.) — r2evans, Sep 18 '18 at 02:22
I understand, since I do not have an example, but I am asking for a specific function that can solve my problem it is ok for me to move it to off topic. — Francesco, Sep 18 '18 at 06:19
It helps to show effort on your part. Your question seems to fall near either *"recommend a software library"* or "*code this for me"*; the former is off-topic, the latter is technically okay but depending on how you ask and how interesting the topic is can often spark down-votes. Perhaps instead of asking "how to add numbers to a png" you look into "how to put a graphic under a plot", then just use `plot` and `text`. — r2evans, Sep 18 '18 at 14:04
It seems like the core of your question is how to annotate an image in R. Something like this question might be helpful: https://stackoverflow.com/questions/30246467/add-text-and-line-to-an-image-in-graphics — divibisan, Sep 18 '18 at 18:23
Thank you for your input, I'll try with your suggestion and in case I will update this post with my test. — Francesco, Sep 19 '18 at 11:28

score 1 · Answer 1 · answered Sep 20 '18 at 14:11

You can use plot function to plot raster file and annotations using text function. Please see the code below:

library(png) 
library(shiny)
library(RCurl)

# Define UI for application that draws a histogram
ui <-fluidPage(
  titlePanel("Annotated plot output"),

  fluidRow(

           plotOutput("plot1")
  )
)

# Define server logic required to draw a histogram

server <- function(input, output, session) {
  output$plot1 <- renderPlot({
    myurl <- "https://i.stack.imgur.com/GcpUb.png"
    ima <- readPNG(getURLContent(myurl))
    op <- par(mar = rep(0, 4))
    plot(NULL, xlim = c(0, 100), ylim = c(0, 100), xaxs = "i", yaxs = "i")
    rasterImage(ima, 0, 0, 100, 100, interpolate = TRUE)
    text(50, 50, "Custom Label1", col = "red", cex = 2)
    text(25, 25, "Custom Label2", col = "red", cex = 2)
    par(op)
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

Output:

Overlapping image and output value in shiny

1 Answers1