How to load external image to Shiny - r

In my current project, I am trying to load images to shiny dashboard using R. The code snippet is as shown below:
dashboardBody(
hr(),
fluidRow(
column(6,align="center",imageOutput("ginger"))
)
)
)
server <- function(input, output) {
output$ginger <- renderImage({
return(list(
src = "images/ginger.jpg",
contentType = "image/jpeg",
width = 300,
height = 200,
alt = "Face"
))
}, deleteFile = FALSE)
Basically, it just display the image on the shiny dashboard. Here the image is stored in the local machine. Now, I want to load image from google drive or from the web. I am trying to load the image from my google drive and URL is https://drive.google.com/file/d/0By6SOdXnt-LFaDhpMlg3b3FiTEU/view.
I could not able to figure out that how to load images from google drive or web in shiny and how to add title in the image also? Am I missing something?

This answer is instructive. Here's a barebones shiny app with an external image call to display the image that you mention on your Google Drive account.
library(shiny)
# Define UI with external image call
ui <- fluidPage(
titlePanel("Look at the image below"),
sidebarLayout(sidebarPanel(),
mainPanel(htmlOutput("picture"))))
# Define server with information needed to hotlink image
server <- function(input, output) {
output$picture <-
renderText({
c(
'<img src="',
"http://drive.google.com/uc?export=view&id=0By6SOdXnt-LFaDhpMlg3b3FiTEU",
'">'
)
})
}
shinyApp(ui = ui, server = server)

Related

How to display a SVG image in shiny

I would like to display in my web application an SVG image that I have hosted in the images folder. First I tried to display it with a tag but it didn't work:
ui <- fluidPage(
tags$img(src = "./images/SVG_Logo.svg", width = "99px")
)
Then I used the rsvg and htmltools packages:
library(shiny)
library(htmltools)
library(rsvg)
#Load SVG image
miLogo <- rsvg_svg("./images/SVG_Logo.svg", width = 99)
miLogo_html <- as.character(miLogo)
ui <- fluidPage(
HTML(miLogo_html)
)
server <- function(input, output, session) {
}
shinyApp(ui = ui, server = server)
But I couldn't get it to work either. In both cases the browser displays this:
But if I replace the source path for example by: https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg
It works correctly
Could someone help me, please?
Best regards,
Wardiam
This code works for me. I had to create an images folder inside the www folder. Have you created a www folder to store your assets?
library(shiny)
library(htmltools)
ui <- fluidPage(
# tags$img(src = "https://raw.githubusercontent.com/paladinic/data/main/LINEA_black.svg", width = "99px")
tags$img(src = "./images/logo.svg", width = "99px")
)
server <- function(input, output, session) {
}
shinyApp(ui = ui, server = server)

Printing linked text based on user input in shiny

I want to display text that links to a website based on user input and when an action button is pressed so it looks like this:
The linked text goes to the cran documentation. Here's what I have so far.
library(shiny)
ui <- fluidPage(
sidebarPanel(
textInput(inputId = 'package',
label = 'Enter package name:'),
actionButton("webpage", "View Webpage"),
hr(),
textOutput("site",container=span),
),
mainPanel()
)
server <- function(input, output) {
url <- eventReactive(input$webpage, {
paste0('selected pakcage: https://cran.r-project.org/web/packages/',
input$package,'/index.html')
})
output$site <- renderText({url()})
}
shinyApp(ui = ui, server = server)
How can I format it so that the package the user enters will be displayed as a linked text?
one method is to change your textOutput to
htmlOutput("site",container=span)
then, try this server
server <- function(input, output) {
url <- eventReactive(input$webpage, {
paste0('https://cran.r-project.org/web/packages/',
input$package,'/index.html')
})
output$site <- renderUI(a(input$package, target="_blank", # site link
href = url()
))
}
see this page for more info

R Shiny hyperlink with custom font size, color, and open link in new browser tab

this question is a follow-up of previous post Create URL hyperlink in R Shiny? .
I'm using the solution shared there, namely:
runApp(
list(ui = fluidPage(
uiOutput("tab")
),
server = function(input, output, session){
url <- a("Google Homepage", href="https://www.google.com/")
output$tab <- renderUI({
tagList("URL link:", url)
})
})
)
The solution above works fine. However, I would need to:
customize the font size and color
make sure the link opens up a new page in a new browser tab.
I can't find a way to achieve these two goals and I'm not familiar with HTML. Any help would be much appreciated. Thanks
Use style to change font size and color and target="_blank" to open the link in new tab.
library(shiny)
runApp(
list(ui = fluidPage(
uiOutput("tab")
),
server = function(input, output, session){
url <- a("Google Homepage", href="https://www.google.com/",
style = "color:orange;font-size:18px", target="_blank")
output$tab <- renderUI({
tagList("URL link:", url)
})
})
)

R Shiny display output externally hosted image

I have a Shiny app that returns a character string containing the direct URL to an image hosted on the web. I am trying to find a way to display this image directly as an output.
When using renderImage() with src = "image url" the app does not display the image.
Here is an example of the problem:
ui.R
library(shiny)
shinyUI(fluidPage(
headerPanel("render externally hosted Image example"),
mainPanel(
# Use imageOutput to place the image on the page
imageOutput("myImage")
)
))
server.R
library(shiny)
shinyServer(function(input, output, session) {
output$myImage <- renderImage({
list(src = "http://data-informed.com/wp-content/uploads/2013/11/R-language-logo-224x136.png",
contentType = 'image/png',
width = 224,
height = 136,
alt = "This is image alternate text")
})
})
Any help is appreciated!
You could use htmlOutput() in the ui and renderText() in server.
Server.r
src = "https://theWeb/aPictureSomewhere.jpg"
output$picture<-renderText({c('<img src="',src,'">')})
ui.r
htmlOutput("picture")

displaying a pdf from a local drive in shiny

I'm still new to r and shiny, and i'm stumped with what should otherwise be simple logic. I am trying to display pdf files in imageOutput widgets but with no luck. Could someone steer me in the right direction?
sample ui.R
shinyUI(pageWithSidebar(
mainPanel(
selectInput("sel_ed",
label = "View outputs for Ecodistrict:",
choices = c(244,245,247,249),
selected = NULL,
multiple = FALSE),
imageOutput("imp_pdf",width="500px",height="500px")
))
sample server.R
shinyServer(function(input, output, session) {
importance <- function(inputSpecies){
img_dir <- pdf(paste(inputSpecies,"\\models\\MATL\\MATRF_Importance",sep=""))
}
output$imp_pdf <- renderImage({importance(input$sel_ed)})
})
Most of the errors i get have to do with expected character vector arguments, or atomic vectors. I know that shiny is more or less designed to render AND display images or plots but there has to be a way to display pdf's that are already on a local drive..
To embed a PDF viewer (the default PDF viewer of your web browser, pdf.js on mozilla for example) in your Shiny ui, you can use an iframe which the src will be the path to your PDF.
Here is 2 differents ways to include an iframe in your interface :
in the Ui you can directly add an iframe tag with an absolute src attribute as bellow :
tags$iframe(style="height:600px; width:100%", src="http://localhost/ressources/pdf/R-Intro.pdf"))
Or get an URL from the ui in the server , write the iframe tag with the input URL and return the HTML code in a htmlOutput in the ui :
Ui :
textInput("pdfurl", "PDF URL")
htmlOutput('pdfviewer')
Server :
output$pdfviewer <- renderText({
return(paste('<iframe style="height:600px; width:100%" src="', input$pdfurl, '"></iframe>', sep = ""))
})
Note that when pages are loaded with a HTTP(S) protocol (the case of the Shiny app) for security reasons you can't framed locals files with their "file:" URLs. If you want to display locals pdf you should access to them with a http(s): URL, so you have to save them in your www directory (a local web server) and access to files with their http(s): URLs (the URL will be something like http://localhost/.../mypdf.pdf) as in the second iframe of my example. (Then you can't use a fileInput directly, you have to format it)
Ui.R :
library(shiny)
row <- function(...) {
tags$div(class="row", ...)
}
col <- function(width, ...) {
tags$div(class=paste0("span", width), ...)
}
shinyUI(bootstrapPage(
headerPanel("PDF VIEWER"),
mainPanel(
tags$div(
class = "container",
row(
col(3, textInput("pdfurl", "PDF URL"))
),
row(
col(6, htmlOutput('pdfviewer')),
col(6, tags$iframe(style="height:600px; width:100%", src="http://localhost/ressources/pdf/R-Intro.pdf"))
)
)
)
))
Server.R :
shinyServer(function(input, output, session) {
output$pdfviewer <- renderText({
return(paste('<iframe style="height:600px; width:100%" src="', input$pdfurl, '"></iframe>', sep = ""))
})
})
The web pages with the PDF viewers :
Hope this help.
Create a folder called www in the original directory that contains your server.R and ui.R scripts. Place the PDF in the www/ folder, then use something like the code below:
In server.R:
shinyServer(function(input, output) {
observeEvent(input$generate, {
output$pdfview <- renderUI({
tags$iframe(style="height:600px; width:100%", src="foo.pdf")
})
})
})
In ui.R:
shinyUI(fluidPage(
titlePanel("Display a PDF"),
sidebarLayout(
sidebarPanel(
actionButton("generate", "Generate PDF")
),
mainPanel(
uiOutput("pdfview")
)
)
))
Additional to Fabian N.'s answer.
There are two important things:
Make sure you create a R Shiny Web Application from Rstudio. Make sure you run as "Run App". Otherwise, files in "www" folder can not be accessed!
Make sure you create a "www" folder in Web Application directory.

Resources