I've got an R Shiny dashboard, and adding the package slickR, which works. However, i'm struggling to set the whitespace on side of each image to my desired color. Suggestions? I've even tried CSS and that doesn't seem to take.
fluidRow(
tags$div(
slickROutput("slickr"),
#style='background-color:red;' # didnt' work, got overwritten by slickR
) #close tags
) #close fluidRow
output$slickr <- renderSlickR({
imgs <- list.files("images/", pattern=".jpg", full.names = TRUE)
slickR(obj = imgs ,slideId = 'ex1',height = 450, width='100%')
})
Create a separate .css file and add the custom styling there to prevent it getting overwritten in the style attribute.
ui.R
fluidPage(
tags$head(
tags$style(rel = "stylesheet", type = "text/css", href = "slickr.css")
),
...,
fluidRow(
column(12, slickROutput("slickr"))
)
)
www/slickr.css
#slickr {
background-color: red;
}
There is more information about CSS here: https://shiny.rstudio.com/articles/css.html
Related
I am trying to load an image from the www folder (this part works) and then using the image name to display it in the UI. When I try this I get the following error:
Warning: Error in cat: argument 1 (type 'closure') cannot be handled by 'cat'
Here is the fairly simple code
'''
library(shiny)
library(imager)
setwd("E:/CIS590-03I Practical Research Project/Project")
# ui object
ui <- fluidPage(
titlePanel(p("Dog Breed Classification", style = "color:#3474A7")),
sidebarLayout(
sidebarPanel(
fileInput("image",
"Select your image:", placeholder = "No file selected"),
tags$head(
tags$style("body .sidebar {background-color: white; }",
".well {background-color: white ;}"),
),
p("Image to categorize"),
),
mainPanel(htmlOutput("testHTML"),
)
)
)
# server()
server <- shinyServer(function(input, output) {
output$testHTML <- renderText({
paste("<b>Selected image file is: ", input$image$name, "<br>")
reactive(img(
src = input$image$name,
width = "250px", height = "190px"
))
})
})
# shinyApp()
shinyApp(ui = ui, server = server)
'''
Any help will be greatly appreciated.
Thank you,
Bill.
The reason you are getting the error message is because the renderText is returning a reactive function rather than the image HTML tag. reactive shouldn't appear in any render... function.
As #MrFlick has mentioned, renderText will only return a character string to the UI. An alternative for renderUI and uiOutput is renderImage and imageOutput. These will add the uploaded image to the UI in a convenient way, as the render function only requires a list of attributes to give the img tag. This also allows easy inclusion of images that aren't in the www directory.
In the solution below, I have included req to the render functions so that error messages don't appear when no image has been uploaded.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(
".sidebar {background-color: white;}",
".well {background-color: white;}",
".title-text {color: #3474A7;}"
)
),
h2(
class = "title-text",
"Dog Breed Classification"
),
sidebarLayout(
sidebarPanel(
fileInput(
"image",
"Select your image:",
placeholder = "No file selected"
),
p("Image to categorize")
),
mainPanel(
tags$p(textOutput("filename", container = tags$b)),
imageOutput("testHTML")
)
)
)
server <- function(input, output) {
output$filename <- renderText({
req(input$image)
paste("Selected image file is:", input$image$name)
})
output$testHTML <- renderImage({
req(input$image)
list(
src = input$image$datapath,
width = "250px",
height = "190px"
)
}, deleteFile = TRUE)
}
shinyApp(ui = ui, server = server)
I would like to know what was the easiest way to set up a different image to each of my 3 shiny main tabpanels ?
I thought that using setBackgroundImage(src = "image1.jpg", shinydashboard = TRUE), setBackgroundImage(src = "image2.jpg", shinydashboard = TRUE), etc. in each of them would do the trick but unfortunately it is not that simple.
I guess I shall use some CSS but I'm very new to this and I didn't find a solution to my problem yet.
Any guess about how I should do that ?
Minimal app:
library(shiny)
library(shinyWidgets)
ui <- shinyUI(navbarPage(id="Test", "TEST",
header = tagList(
useShinydashboard()
),
tabPanel(
"Welcome", value="welcome",
verbatimTextOutput("text1")),
tabPanel(
"Tab1", value="first_tab",
verbatimTextOutput("text2")),
tabPanel(
"Tab2", value="second_tab",
verbatimTextOutput("text3"))))
server <- shinyServer(function(input, output, session){
output$text1 <- renderText("Trying to set up a first background image in this whole panel")
output$text2 <- renderText("Trying to set up a second background image in this whole panel")
output$text3 <- renderText("Trying to set up a third background image in this whole panel")
})
shinyApp(ui, server)
You can use the CSS background-image Property to achive this:
library(shiny)
library(shinyWidgets)
# remove /* ... */ to use the arguments
backgroundImageCSS <- "/* background-color: #cccccc; */
height: 91vh;
background-position: center;
background-repeat: no-repeat;
/* background-size: cover; */
background-image: url('%s');
"
ui <- shinyUI(navbarPage(id="Test", "TEST",
header = tagList(
useShinydashboard()
),
tabPanel(
"Welcome", value="welcome",
verbatimTextOutput("text1"),
style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/r-logo.png")
),
tabPanel(
"Tab1", value="first_tab",
verbatimTextOutput("text2"),
style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/matlab-logo.png")
),
tabPanel(
"Tab2", value="second_tab",
verbatimTextOutput("text3"),
style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/python-logo.png")
)
))
server <- shinyServer(function(input, output, session){
output$text1 <- renderText("Trying to set up a first background image in this whole panel")
output$text2 <- renderText("Trying to set up a second background image in this whole panel")
output$text3 <- renderText("Trying to set up a third background image in this whole panel")
})
shinyApp(ui, server)
When using local images store them into a www folder (subdirectory of your app folder) or use addResourcePath to add the images as static resources to Shiny's web server,
Also see this related answer.
I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.
Does anybody know how to make a reproducible example from this answer?
Here's what I've tried so far:
library(shiny)
ui <- navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> `</div>');
console.log(header)")
),
title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
This is the image called image.png. I put it in the www folder, which is placed in my app directory.
There are mainly two things to solve:
* some text is displayed on the below the navbar whereas it shouldn't be displayed at all
* the image and the text at the left are not centered
I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).
The only problem with your code is not the problem in your code, is the problem in your files structure.You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or ui.R).
library(shiny)
ui <- fluidPage(
tags$head(
tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
tags$title("Browser tab title")
),
navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </div>');
console.log(header)")
),
title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!But now the main UI is the fluidPage so it's title will be the browser title. this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!
Background
I am trying to place a shinyWidget::dropdownButton in the header of a shinydashboard::box. The button should have the look and feel of the button created when using a collapsible box (box(..., collapsible = TRUE).
With the help of some JavaScript I was able to move the dropdown, which seemed to me the easier approach rather than constructing all the HTML myself.
The code below does what I want to do, however I am struggling with the css, because the elements in the dropdown are partly white on white (which makes sense I guess because they are (grand) children of class .box-tools)
What I want
I want that all controls in the dropdown look like as if I put the dropdown in the body of the box:
Goal: Dropdown in the body
Current Situation: Dropdown in the header
Questions
How can I achieve this? Which css rules do I have to use, to make sure that any kind of control looks like as if in the body of the box? Could I achieve the same behaviour even easier? (For instance by wrapping all my controls in the dropdown in another element)? I do know my basics in css but here I feel a bit at loss which rules I need to consider to get to the desired result.
Code
library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)
makeDropDown <- function(i) {
dropdownButton(
h3("Heading"),
selectInput(paste0("sel", i), "Select:", LETTERS),
downloadButton(paste0("down", i), "Load"),
circle = FALSE,
icon = icon("cog")
)
}
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
box(solidHeader = TRUE,
status = "info",
title = "Box",
div(
makeDropDown(1),
class = "box-tools pull-right",
id = "moveme"
),
makeDropDown(2)
)
)
)
server <- function(input, output, session) {
runjs("$('.box-header').append($('#moveme').detach())")
}
shinyApp(ui, server)
You're right, some CSS rules are overwritten, you can use some inline CSS with !important to control appearance :
makeDropDown <- function(i) {
dropdownButton(
tags$div(
style = "color: black !important;", # for text
h3("Heading"),
selectInput(paste0("sel", i), "Select:", LETTERS),
downloadButton(
outputId = paste0("down", i), label = "Load",
style = "background-color: #f4f4f4 !important; color: #444 !important; border: 1px solid #ddd !important;" # for button
)
),
circle = FALSE,
icon = icon("cog")
)
}
Otherwise, maybe #DivadNojnarg have a better solution in shinydashboardPlus, I'll ask him !
trying to get a dark theme to work with datatables (DT) package in a shiny application. I've tried shinytheme("cyborg") and also downloading the cyborg CSS sheet from Bootswatch, (for call in datatables, style="bootstrap") but it doesn't seem to work when I use shinytheme. I need shinytheme for the rest of the app, since the css thows off all of the plots and spacing etc. Is there a dark CSS I could use in place of shinythemes which would work with plotly and datatables?
library(shiny)
library(shinythemes)
library(DT)
ui<- fluidPage(theme = shinytheme("cyborg"),
fluidRow(column(7, DTOutput("showdata")))
)
server<-function(input, output) {
output$showdata<- DT::renderDT({
datatable(iris, rownames=F, filter="top", extensions = "Scroller", width = "100%", style="bootstrap",
options = list(deferRender = TRUE, scrollY = 300,scrollX=FALSE, scroller = TRUE, dom = 'tp'),
selection ='single' ) %>%
formatStyle(columns=colnames(iris),
backgroundColor = '#282828', color = "white")
})
}
shinyApp(ui=ui, server=server)
dark table screenshot
note that the main issue is the filter text does not appear (maybe it is white because of shinytheme)
You can make the text visible if you set the font color to black. Just include some CSS in the header like: div.dataTables_scrollHead span {color: black;}
Example UI:
ui <- fluidPage(theme = shinytheme("cyborg"),
tags$head(tags$style("div.dataTables_scrollHead span {color: black;}")),
fluidRow(column(7, DTOutput("showdata")))
)
Output: