I'm trying my best to place a logo in my shiny app, but its showing blue question mark every time. I made a separate ui and server file as well but still didn't work. I also made a 'www' folder and set it as a working directly with image inside it, but no result.
Can someone please guide me?
library(dplyr)
library(shiny)
library(shinythemes)
#UI
ui = fluidPage(img(src = "picture.jpg"), fluidRow( rpivotTableOutput("pivot")))
#Server
server = function(input, output, session) {reactive({
mtcars %>% select(cyl, carb, vs, mpg) %>% group_by(carb,vs ) %>% summarise(mpg=sum(mpg))})
output$pivot <- renderRpivotTable( rpivotTable::rpivotTable(mtcars, rows = c( "vs"),cols=c("carb"), vals = "mpg", aggregatorName = "Sum", rendererName = "Table", width="50%", height="550px"))}
shinyApp(ui = ui, server = server)
Related
The below code does a terrific job of rendering a web-sourced image in a cell of the rhandsontable. However, I'd like swap that image with a jpg image I have stored on my computer. I've tried modifying the below as.character(img(src = "...")) to reflect the local directory and filename, with no luck.
Any suggestions for a straightforward way to do this?
I searched for solutions, for example, Display locally-stored image in R Shiny, but they look rather involved given what I thought is the simplicity of what I'm trying to do. Certainly accessing your local drive is easier than reaching out to the Web via API.
Here's the painfully simple image I want to upload (shrunken of course):
Code:
library(magrittr)
library(htmlwidgets)
library(rhandsontable)
library(shiny)
DF = data.frame(
Col_1 = c("Row 1"),
Col_Help = c(
as.character(img(
src = "https://images.plot.ly/language-icons/api-home/python-logo.png",
title = "My first help text",
style = "width: 50px;")
)
),
text = c("Row 1 does xxx"),
stringsAsFactors = FALSE
)
ui <- fluidPage(br(),rHandsontableOutput('my_table'))
server <- function(input, output, session) {
output$my_table <- renderRHandsontable({
rhandsontable::rhandsontable(
DF,
allowedTags = "<em><b><strong><a><big><img>"
) %>%
hot_cols(colWidths = c(200, 80)) %>%
hot_col(1:2, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
hot_cols(colWidths = ifelse(names(DF) != "text", 100, 0.1))
})
}
shinyApp(ui, server)
Put your file, say question_mark.jpg in the www folder of your shiny app, and then adjust your DF definition as below:
DF = data.frame(
Col_1 = c("Row 1"),
Col_Help = c(
as.character(img(
src = "question_mark.jpg",
title = "My first help text",
style = "width: 50px;")
)
),
text = c("Row 1 does xxx"),
stringsAsFactors = FALSE
)
Output:
So I have a simple shiny app that takes text as an input and outputs it.
But my goal is to make it easier for my users to be able to customize the font and formatting of this text in an easy to use way.
Here is a screenshot of the app (below). I can enter HTML code to change the formatting but my users do not know HTML or CSS.
Is there an easy way for my users to be able to have a little UI with basic formatting that can be passed through the input? Kind of like this?
Here is my app code:
library(shiny)
ui <- fluidPage(
sidebarLayout(
textAreaInput("text", label = HTML(paste0("Enter Text Here")), value = HTML(paste0("HTML ELEMENTS CAN BE USED"))),
mainPanel(
uiOutput("value"))
)
)
server <- function(input, output) {
output$value <- reactive({
shiny::HTML(paste0(input$text))
})
}
shinyApp(ui, server)
You can use the JavaScript library SunEditor
library(shiny)
js <- '
$(document).ready(function(){
const editor = SUNEDITOR.create(document.getElementById("editor"), {});
});
'
ui <- fluidPage(
tags$head(
tags$link(rel="stylesheet", href = "https://cdn.jsdelivr.net/npm/suneditor#latest/dist/css/suneditor.min.css"),
tags$script(src = "https://cdn.jsdelivr.net/npm/suneditor#latest/dist/suneditor.min.js"),
tags$script(HTML(js))
),
br(),
tags$textarea(id = "editor", class = "sun-editor-editable", cols = 80)
)
server <- function(input, output, session){
}
shinyApp(ui, server)
I have created an app that uploads an image and displays it but noticed that it wasn't working properly anymore. When a second image is uploaded the UI doesn't refresh and only the original image is shown. It seems that tags$img is behaving different than it did before. The idea of the app is users are able to upload an image, confirm it is the correct one and then do some things to the image. It doesn't make sense for the user to upload a new image and still have the previous image displaying.
I noticed that when I use tags$iframe it works as expected, which is that when a 2nd image is uploaded the 2nd image is then displayed in the app. I noticed if I use tags$iframe and tags$img to display the same item it works as expected where the 2nd item uploaded is displayed.
This example only uses tags$img, if you upload an image then it displays it and when you upload a 2nd image only the first image is displayed. The UI doesn't seem to update to display the 2nd image.
library(shiny)
options(shiny.maxRequestSize=12*1024^2)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
uiOutput("ui_file_input")
),
mainPanel(
uiOutput("ui_upload")
)
)
)
server <- function(input, output) {
rv <- reactiveValues(
upload_state = NULL,
img = NULL
)
output$ui_file_input <- renderUI({
fileInput("upload",
label = NULL,
accept = c(".jpg", ".jpeg")
)
})
observeEvent(input$upload, {
rv$upload_state <- "upload"
})
observe({
req(rv$upload_state)
test_file <- readBin(con = input$upload$datapath, what = "raw", n = input$upload$size)
writeBin(test_file, "www/fieldphoto.jpeg")
addResourcePath("www", "www")
})
output$ui_upload <- renderUI({
req(input$upload)
tags$img(src = "www/fieldphoto.jpeg", width = "300px")
})
}
shinyApp(ui = ui, server = server)
When I add a 2nd output that is linked to tags$iframe it behaves as expected. An image is uploaded and displays as normal and when a 2nd image is upload it updates to display the 2nd image in both the tags$img and tags$iframe outputs.
library(shiny)
options(shiny.maxRequestSize=12*1024^2)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
uiOutput("ui_file_input")
),
mainPanel(
uiOutput("ui_upload"),
uiOutput("ui_upload2")
)
)
)
server <- function(input, output) {
rv <- reactiveValues(
upload_state = NULL,
img = NULL
)
output$ui_file_input <- renderUI({
fileInput("upload",
label = NULL,
accept = c(".jpg", ".jpeg")
)
})
observeEvent(input$upload, {
rv$upload_state <- "upload"
})
observe({
req(rv$upload_state)
test_file <- readBin(
con = input$upload$datapath, what = "raw", n = input$upload$size
)
writeBin(test_file, "www/fieldphoto.jpeg")
addResourcePath("www", "www")
})
# this displays the uploaded card
output$ui_upload <- renderUI({
req(input$upload)
tags$img(src = "www/fieldphoto.jpeg", width = "300px")
})
output$ui_upload2 <- renderUI({
req(input$upload)
tags$iframe(src = "www/fieldphoto.jpeg", width = "300px")
})
}
shinyApp(ui = ui, server = server)
This was working as expected in the past, not sure the exact timeline but sometime with the last few months I think. The examples above are a simple reprex as the issue is part of a much larger Shiny app. I don't understand why tags$iframe causes the UI to update but not tags$img. The correct files are appearing in the www folder. It seems to be a problem with what is being displayed.
I would like to figure out how to use renderImage in Shiny with online located images (URL), and make the image clickable, so that I can hang an observeEvent() to it. I can do both these things, but not together. My approach to render an URL doesn't work with clicking, and the local image version that allows clicking doesn't render URL images.
Here are the two half working versions:
I took some inspiration from here for the
Clickable
library(shiny)
ui <- fluidPage(
imageOutput("image1", click = "MyImage")
)
server <- function(input, output, session) {
setwd(Set the directory of the image in here) #### modify to test
output$image1 <- renderImage({
list(
src = "YOUR_IMAGE.png", #### modify to test
contentType = "image/png",
width = 90,
height = 78,
alt = "This is alternate text"
)}, deleteFile = FALSE)
observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)
if I put an URL in (and remove the deleteFile = FALSE) it shows an empty square. still clickable though.
URLable by using renderUI()
library(shiny)
ui <- fluidPage(
uiOutput("image1", click = "MyImage")
)
server <- function(input, output, session) {
setwd(AppDir)
output$image1<- renderUI({
imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"
tags$img(src=imgurl2, width = 200, height = 100)
})
observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)
shows the image, but the image isn't clickable anymore.
If I change renderUI() and uiOuput() into renderImage() and imageOutput() in example 2, it throws a 'invalid file argument' error.
htmlOuput with renderText
I also tried this version that was in the other SO post, but again, not clickable. This approach is based on the answer on this link
library(shiny)
ui <- fluidPage(
htmlOutput("image1", click = "MyImage")
)
server <- function(input, output, session) {
setwd(AppDir)
imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"
output$image1<- renderText({c('<img src="',imgurl2,'">')})
observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)
I want to move away from local images because that seems to make more sense once we publish the Shiny App. So therefore really in need of a solution that allows rendering of URL images and have them being clickable. Bonus points if somebody can explain why the click = only works local files with imageOutput.
One alternative is to use the onclick function from shinyjs library. It allows you to include click events to specific html elements (targeted by id).
Here's the documentation
In your case the code would look like this:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
uiOutput("image1", click = "MyImage")
)
server <- function(input, output, session) {
output$image1<- renderUI({
imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"
div(id = "myImage",
tags$img(src = imgurl2, width = 200, height = 100)
)
})
onclick(
myImage,
{
# Do whatever you want!
print("Hey there")
}
)
}
shinyApp(ui, server)
What about transforming image from url into a ggplot as:
library(magick)
library(cowplot)
library(gtools)
library(shiny)
ui <- fluidPage(
uiOutput("myplotoutput"),
uiOutput("text")
)
server <- function(input, output, session) {
output$myplotoutput = renderUI( {
plotOutput("urlimage", click=clickOpts(id="myclick") )
} )
output$text=renderUI({
validate(
need(try(!invalid(input$myclick)), "Text will appear here")
)
textOutput("reactext")
})
output$reactext<-renderText(mytext$texto)
output$urlimage<- renderPlot({
g<- ggdraw() + draw_image("https://jeroen.github.io/images/frink.png")
g
})
mytext<-reactiveValues()
observeEvent(input$myclick, {
mytext$texto<-"Hey there"
})
}
shinyApp(ui, server)
Please can you help me to add company logo on the left top of shiny dashboard besides project name.
I have tried to use the code in the other answers here on stackoverflow but still can't solve my problem. I am a total ignorant in HTML and css.
Here is my code:
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(skin = "green",
dashboardHeader(title = "Project name",
# this could show the logo but not where I wanted !
tags$li(a(href = 'http://www.company.com',
img(src = 'logo.jpg',
title = "Company Home", height = 30px"),
style = "padding-top:10px; padding-bottom:10px;"),
class = "dropdown"))),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)
The picture that shows how I want to add the logo
Thank you
It is possible to set an image and text side by side as following.
library(shiny)
library(shinydashboard)
header <- dashboardHeader()
anchor <- tags$a(href='http://www.example.com',
tags$img(src='logo.png', height='60', width='50'),
'project name')
header$children[[2]]$children <- tags$div(
tags$head(tags$style(HTML(".name { background-color: black }"))),
anchor,
class = 'name')
ui <- dashboardPage(header, dashboardSidebar(), dashboardBody())
shinyApp(ui, server = function(input, output, session) {})