I am able to use shiny's custom themes successfully, i.e.
# Internal, hidden function
# Called by CherryPickPalette()
CustomPal <- function(new_pal){
if (interactive()){
cherrypickedpalette <- runApp(list(
ui = fluidPage(
theme = shinythemes::shinytheme("slate"),
Will give app the following look and feel
However if I replace with custom .css, the program ignores it, i.e.
Custom CSS, h5.css
h5 {
color: orange;
text-align: center;
}
Code using h5.css
# Internal, hidden function
# Called by CherryPickPalette()
CustomPal <- function(new_pal){
if (interactive()){
cherrypickedpalette <- runApp(list(
ui = fluidPage(
theme = "h5.css",
titlePanel("Cherry Pick Your Own Palette!"),
sidebarPanel (hr(),
selectInput('col', 'Options', new_pal, multiple=TRUE, selectize=FALSE, size = 15)
),
mainPanel(
h5('Your Cherry-Picked Palette'),
fluidRow(column(12,verbatimTextOutput("col"))),
h5 text, i.e. "Your Cherry-Picked Palette" is unaffected.
R directory structure is here
Please help!
I am not sure why it does not work with this directory structure, but you can try that instead:
ui = fluidPage(
# theme = "h5.css",
tags$head(includeCSS("R/www/h5.css")),
titlePanel("Cherry Pick Your Own Palette!"),
...
)
Related
I want to style a shiny input from dqshiny package in my Shiny app as below -
library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
ui = fluidPage(
autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
),
server = function(input, output, session) {
}
)
I want to 2 things to achieve -
Want to change the highlight color in the suggestion field from yellowish to green
Also want to change the distance between the input field and the suggestion container with let say 10px.
I have a few other Widgets in my App, so above modified styling should not impact other widgets.
Is there any way to achieve this?
Any pointer will be highly appreciated.
Easiest way is just adding the CSS directly into the header. There's a really useful article about styling Shiny apps here.
library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
ui = fluidPage(
tags$head(
tags$style(
HTML(
'
.autocomplete-items div:hover {
background-color: green;
}
#auto1autocomplete-list {
margin-top: 10px;
}
'
)
)
),
autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
),
server = function(input, output, session) {
}
)
I want to know if it is possible to create pdf viewer element in R Shiny and change it reactively.
Example:
I have a list of pdf files in folder. Now pdf element should view the selected file and change dynamically with the input.
I have tried this using iframe but it does not change dynamically .Also pdf file should be present in www directory of shiny app....
tags$iframe(src='highl.pdf', height=550)
Can anyone help me to achieve this incase possible ?
I think you probably put the html tags in the ui section, something like this:
ui <- fluidPage(
sidebarLayout(
sidebarPanel( selectinput(inputId = "pdf_selection", .. other stuff ..) ),
mainPanel( tags$iframe(src = input$pdf_selection, height = 550) )
)
)
server <- function(input, output) { .. other stuff .. }
To render the PDF viewer dynamically by the reactive input, you should render it within the server section like:
ui <- fluidPage(
sidebarLayout(
sidebarPanel( selectinput(inputId = "pdf_selection", .. other stuff ..) ),
mainPanel( uiOutput("pdf_viewer") )
)
)
server <- function(input, output) {
output$pdf_viewer <- renderUI( tags$iframe(src = input$pdf_selection, height = 550) )
}
I've created a Shiny app that allows for dynamic selection of Bootswatch themes. The dynamic selection occurs in the server.R file using tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "...")) with each .css file saved in my app's www directory as "themename.min.css." Here's a minimal example:
library(shiny)
shinyApp(
ui <- fluidPage(
# style ui output (changed on server side )
uiOutput("style"),
# navigation toolbar
navbarPage(id = "navbar",
title = "Themes",
position = "fixed-top",
collapsible = T,
navbarMenu(title = "Theme Selector",
tabPanel("Cosmo", value = "cosmo"),
tabPanel("Journal", value = "journal"),
tabPanel("Slate", value = "slate"),
tabPanel("United", value = "united"))
) # END NAVBAR PAGE
), # END UI
server <- function(input, output, session){
# dynamically update bootswatch theme
output$style <- renderUI({
# themes
themes <- c("cosmo", "journal", "slate", "united")
# loop through layouts and apply css file accordingly
for(i in 1:length(themes)){
if(input$navbar == themes[i]){
return(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = paste0(themes[i], ".min.css"))))
}
} # END LOOP
}) # END RENDER UI
} # END SERVER
) # END SHINY APP
So in this example, I have the 4 themes saved in my www directory as "cosmo.min.css," "journal.min.css," etc. The dynamic selection of themes does work in a sense--the themes do change as the user selects them from the navigation bar dropdown menu. BUT it seems that certain CSS elements overwrite others as the user changes theme selections. For example, the Slate theme has a gray/silvery navbar. After I select that theme, all subsequent theme selections display that same silver navbar. Each theme works individually, but selecting them dynamically causes issues.
It seems that using tags$head overwrites certain elements from each CSS file? But I can't seem to use includeCSS in the server.R file to make the selection dynamic, but I also don't know how to make the theme selection dynamic in the ui.R file.
I am familiar with the shinythemes package, which does have a dynamic theme selector, but the package explicitly states that this function is only to be used in development, whereas I want to deploy my theme-selector application. I checked out the source code for that function, but I don't know Javascript to be able to tailor it to my specific needs.
I was able to accomplish this by using includeCSS instead of HTML tags to reference the stylesheet.
for(i in 1:length(themes)){
if(!is.null(input$themes)){
if(input$themes == themes[i]){
return(includeCSS(paste0("www/", themes[i], ".css")))
}
}
} # END LOOP
Is there a way to color fileInput button in R shiny? It looks like it is possible as shown here on this page on github. However I cannot find the code for this to be done.
This is the simple application that I would like to modify to have the button and progress bar colored red.
In ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Test"),
fileInput("Test","")
))
and server.R
library(shiny)
shinyServer(
function(input, output) {
}
)
Thanks for any advice.
You can use standard Bootstrap classes to style action buttons:
library(shiny)
shinyApp(
ui=shinyUI(bootstrapPage(
actionButton("infoButton", "Info", class="btn-info"),
actionButton("warningButton", "Warning", class="btn-warning"),
actionButton("successButton", "Success", class="btn-success"),
actionButton("dangerButton", "Danger", class="btn-danger"),
actionButton("defaultButton", "Default", class="btn-default"),
actionButton("primaryButton", "Primary", class="btn-primary")
)),
server=shinyServer(function(input, output, session){
})
)
Regarding file inputs as far as I know it is not possible without using CSS directly. Page you've linked is an opened pull-request and it doesn't look like it will be merged soon.
This answer provides a good description how to create fancy upload buttons with bootstrap. It should work just fine in Shiny as well.
CSS could be used in shiny to custom your fileInput widget !
Use the following code in order to color it in red.
NB - Any browser you're using to view the app should have developer tools that let you inspect elements and see styles applied to any element. You have to right click on the relevant element and choose inspect !
library(shiny)
ui <- fluidPage(
fileInput(inputId = "Test",label = ""),
tags$style("
.btn-file {
background-color:red;
border-color: red;
}
.progress-bar {
background-color: red;
}
")
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I have created quite a large app that I now want to extent by introducing tabs. So far I have, as an example:
ui.R
shinyUI(
#OLD CODE
)
server.R
(
#OLD CODE
)
What I would like to do:
ui.R
shinyUI(
tabsetPanel(
"Tabs",
tabPanel("Old Code",value="tb1"),
tabPanel("New Code",value="tb2"),
id = "nlp"
),
if (id=="tb1") {
#OLD CODE
} else if (id=="tb2") {
#New Code
} else {
#Do nothing
}
How do I get the if function to recognise id as a variable?
When I run the script it comes up with the error object 'id' not found. So then I've tried input$id and output$id with no avail.
I have also tried going to the server.R and tried
Server.R
output$id <- renderText("id")
also didn't work when trying to bring that back into the UI
and I have also tried
Server.R
output$id <- reactive({input$id})
this also didn't work when I tried to use it in the UI. Where am I going wrong and how can I use the Id variable in the UI?
Thanks
Based on the Shiny Tabsets example, you should be putting the UI elements into each call to tabPanel, like so:
shinyUI(
tabsetPanel(
tabPanel(
title = "Old Code",
plotOutput('plot1'),
plotOutput('plot2')
),
tabPanel(
title = "New Code",
tableOutput('table')
),
id = "nlp"
)
)
Unless you are trying to do more than necessary, your code does not need to know what tab the client has selected. I may be wrong (please do not think I'm an authority on shiny), I think the elements within the not-selected tabs are not unnecessarily recalculated (unless dependencies exist and require it).