I am not able to find the error why the pic is not getting displayed inside the infoBox, shinyApp.
library(shiny)
library(shinydashboard)
a <- 45
ui <- shinyUI(
dashboardPage(
dashboardHeader(title = "ABC"),
dashboardSidebar(),
dashboardBody(
fluidPage(
infoBox("BCD", a, div(img(src = "img.png", width = 100), style = "text-
align: center;"))
)
)
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
The following worked for me:
Save the above script as app.R
In the folder of app.R, create a folder named www and save img.png in it
hit the Run App button on RStudio (top right)
You might want to have a look at the addResourcePath function for a more flexibel solution:
http://shiny.rstudio.com/reference/shiny/0.14/addResourcePath.html
Related
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)
I need your help for my R shiny application. I want to add a logo near the title in dashboardHeader. The logo don't display in the page. Can you help me ? Thanks in advance.
This is the code :
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = tags$img(src='logo.JPG', height = '60', width ='60')),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)
Just create a new folder with the name "www" in the same directory as your script and add your picture in that
Your code seems to work just fine. Try this for example with an image from the internet(I just put google as an example).
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='60')),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)
I am trying to use shiny for the first time to build a very simple web app.
I would like to add a logo on the left hand corner of my dashboard but failing to load the pic
this is what I have written:
library(shiny)
library(shinydashboard)
shinyUI(
dashboardPage(
dashboardHeader(title=tags$img(src='logo.jpg')),
dashboardSidebar(),
dashboardBody()
)
)
This is the structure of my folder
GH
-->model
---->app
------>webapp
server.R
ui.R
--> pictures
logo.jpg
If I run my app I get a question mark as a placeholder of the actual picture
Try forcing it with addResourcePath(prefix, path), and then use src = "prefix/logo.jpg"
library(shiny)
library(shinydashboard)
ui <- function(){
addResourcePath("www", "www")
tagList(
dashboardPage(
dashboardHeader(title = tags$img( src='www/logo.png') ),
dashboardSidebar(),
dashboardBody()
)
)
}
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
I would like to change background in my shiny dashboard App. I wound in internet function setBackgroundImage (https://rdrr.io/cran/shinyWidgets/man/setBackgroundImage.html). The problem is that I don't know were I should put that function in my app. In example is classic app, not dashboard.
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
setBackgroundImage(src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg")
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Also it is possible to put leaflet map as a background?
You can do it with tags$img(), and specifying position attribute to absolute. Note that img tag have to be placed as first in dashboardBody:
...
dashboardBody(
tags$img(
src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg",
style = 'position: absolute'
),
...
)
...
It also accepts width and height parameters. You can also position your image with hspace and vspace parameters.
Now there is also the possibility to add shinydashboard = TRUE to the setBackgroundImage function.
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
setBackgroundImage(
src = "https://www.fillmurray.com/1920/1080",
shinydashboard = TRUE
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
I read all the threads about dynamic ui within the Shiny framework, but I did not find anything that work. I want to display a twitter timeline. This chunk of code works really well :
library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
a("Tweets by Andrew Ng",
class="twitter-timeline",
href = "https://twitter.com/AndrewYNg"
)
)
)
)
, server = function(input, output, session){
}
)
)
But when, I try to make it reactive, I only got a link to the twitter timeline:
library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
uiOutput("mytimeline")
)
)
)
, server = function(input, output, session){
output$mytimeline <- renderUI({
a("Tweets by Andrew Ng",
class="twitter-timeline",
href = "https://twitter.com/AndrewYNg"
)
})
}
)
)
The Twitter script only loads embedded content when it runs the first time. Since the script is in static UI but the timeline is in dynamic UI, the script will always run before the timeline is inserted.
The Twitter docs have a section about this: https://dev.twitter.com/web/javascript/initialization
You can run twttr.widgets.load() to scan the page for newly added embedded content.
One way to run execute this when inserting embedded content would be to include it in a script tag:
library(shiny)
twitterTimeline <- function(href, ...) {
tagList(
tags$a(class = "twitter-timeline", href = href, ...),
tags$script("twttr.widgets.load()")
)
}
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
uiOutput("mytimeline")
)
)
)
,
server = function(input, output, session) {
output$mytimeline <- renderUI({
twitterTimeline("https://twitter.com/AndrewYNg", "Tweets by Andrew Ng")
})
}
))
See How to enable syntax highlighting in R Shiny app with htmlOutput for a similar issue with more details