Looking to add uicons to my Shiny app. I have downloaded the fonts after making an account, and moved the CSS and webfonts to the root directory of my .R file.(per instructions) Now I want to add one of the icons in my infobox in Shiny, I have a very simple example
I think I could use some sort of shiny::tags but not sure which one, or how. I used This Stackoverflow answer to help guide me,
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$i("#import url(/css/uicons-regular-rounded.css);"),
icon("fi fi-rr-camera")
))
server <- function(input, output) { }
shinyApp(ui, server)
Which gives me this
Any help would be appreciated. Thank you.
You need to put all folders including svg folder into www folder in root of your shiny app. Then you can import the icon with tags$img(src='svg/fi-rr-camera.svg')
To use it in info box, simply wrap it with tags$i.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$img(src='svg/fi-rr-camera.svg', height='40', width='40')
infoBox("info","info",icon = tags$i(tags$img(src='svg/fi-rr-camera.svg', height='40', width='40')))
))
server <- function(input, output) { }
shinyApp(ui, server)
As #phago29 mentioned, uicons-regular-rounded.css need to be in a subdirectory inside the project directory (or simply the directory using setwd()).
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(includeCSS('www/uicons-regular-rounded.css'),
tags$i(class = "fi fi-rr-camera")))
server <- function(input, output) { }
shinyApp(ui, server)
reproducible example:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(includeCSS('https://fonts.googleapis.com/icon?family=Material+Icons'),
tags$i(class = "material-icons", "accessibility", style = "font-size: 6em;")))
server <- function(input, output) { }
shinyApp(ui, server)
Related
I would like to print all levels of a factor in a shiny dashboard. I know I could easily do that by:
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
# Application title
titlePanel("Testing shiny App"),
# Show a plot of the generated distribution
mainPanel(
htmlOutput("my_levels_list")
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$my_levels_list <- renderUI({
HTML(levels(iris$Species))
})
}
# Run the application
shinyApp(ui = ui, server = server)
But all the results are outputed within the same row:
<div id="my_levels_list" class="shiny-html-output shiny-bound-output">setosa versicolor virginica</div>
What I would like to have is something like this instead:
<div id="my_levels_list" class="shiny-html-output shiny-bound-output">
<ul><li>setosa</li> <li>versicolor</li> <li>virginica</li></ul></div>
I tried with more extravagant code like:
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
# Application title
titlePanel("Testing shiny App"),
# Show a plot of the generated distribution
mainPanel(
htmlOutput("my_levels_list")
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$my_levels_list <- renderUI({
for (i in iris$Species) {
HTML(i)
}
})
}
# Run the application
shinyApp(ui = ui, server = server)
But nothing is outputted.
I have an application that displays data on indicators. Each indicator (30+) has a definition. We have this definition of all indicators in a single html file (easier to maintain than 30 different ones).
In my ShinyApp, I want to show only the section relevant to the indicator selected, not the full document.
I was wondering how this could be done....
Here is an example that is only showing the full 'document' instead of the part which is selected in the sidebar:
documentation <- structure("<div> <div id=\"part1\"> <h1>Part 1</h1> <p>This is part 1 out of 2</p> <p> </p> </div> <div id=\"part2\"> <p> </p> <h1>Part 2</h1> <p>This is part 2 out of 2.</p> </div> </div>", html = TRUE, class = c("html", "character"))
documentation
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
selectInput(inputId = "part",label = "Select the part you want to see", choices = c("part1", "part2"))
),
dashboardBody(
uiOutput("section")
)
)
server <- function(input, output) {
output$section <- renderUI({
HTML(documentation) # This needs subsetting based on input$part
})
}
shinyApp(ui, server)
I came up with a quick and dirty solution, by manipulating the HTML as a string.
I wonder if there are more elegant methods though...
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
selectInput(inputId = "part",label = "Select the part you want to see", choices = c("part1", "part2"))
),
dashboardBody(
uiOutput("section")
)
)
server <- function(input, output) {
output$section <- renderUI({
# HTML(documentation)
t1 <- strsplit(documentation, "<div")[[1]][grepl(input$part, strsplit(documentation, "<div")[[1]])]
t2 <- paste0("<div", t1)
t2 <- gsub("</div> </div>", "</div>", t2)
HTML(t2)
})
}
shinyApp(ui, server)
I'm dealing with a quite complicated shiny app in which I would like to create an UI output inside server function. UI is not that easy and depends on many items created on a server side so I'm creating it concatenating HTML parts of UI. Everything works until I meet plotly chart.
I've created a simpler version of my app to make it easier to understand my problem.
Normally I'd do sth like that:
library("shiny")
library("plotly")
library("dplyr")
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
),
mainPanel(
plotlyOutput("distPlot1"),
plotOutput("distPlot2")
)
)
)
server <- function(input, output) {
output$distPlot1 <- renderPlotly({
x <- faithful[, 2]
plot_ly(x = x, type = "histogram")
})
output$distPlot2 <- renderPlot({
x <- faithful[, 2]
hist(x)
})
}
shinyApp(ui = ui, server = server)
to obtain this:
But when I start to create ui on server side like here (edited part with more divs inside ui):
library("shiny")
library("plotly")
library("dplyr")
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
),
mainPanel(
htmlOutput("ui1"),
uiOutput("ui2")
)
)
)
server <- function(input, output) {
output$distPlot1 <- renderPlotly({
x <- faithful[, 2]
plot_ly(x = x, type = "histogram")
})
output$distPlot2 <- renderPlot({
x <- faithful[, 2]
hist(x)
})
output$ui1 <- renderUI({
show <- h1("lfkhg")
show <- paste0(show, plotlyOutput("distPlot1") %>% as.character())
HTML(show)
})
output$ui2 <- renderUI({
show <- h1("lfkhg")
show <- paste0(show, plotOutput("distPlot2") %>% as.character())
HTML(show)
})
}
# Run the application
shinyApp(ui = ui, server = server)
Plotly plot does not appear...
Do you know why and how to deal with this problem?
I dont know why you need %>% HTML() in there as it works for me without it. Also if you want to add more things into the renderUI then simply use tagList and combine them together, here I will add h1 as per your comment
library("shiny")
library("plotly")
library("dplyr")
ui <- fluidPage(
sidebarLayout(sidebarPanel(),
mainPanel(
uiOutput("ui1"),
uiOutput("ui2")
)
)
)
server <- function(input, output) {
output$distPlot1 <- renderPlotly({
x <- faithful[, 2]
plot_ly(x = x, type = "histogram")
})
output$distPlot2 <- renderPlot({
x <- faithful[, 2]
hist(x)
})
output$ui1 <- renderUI({
tagList(h1("lfkhg"),plotlyOutput("distPlot1"))
})
output$ui2 <- renderUI({
plotOutput("distPlot2")
})
}
# Run the application
shinyApp(ui = ui, server = server)
I want to fit Resource Activity text within the given button such that Activity comes below the Resource in the button. Currently the complete word gets hidden because of less space of the button and I do not want to increase the space. Please help.
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
actionButton("buttonresinvthree", "Resource Activity",style="color:
#000000; width:8%; ")
)
)
server <- function(input, output) { }
shinyApp(ui, server)
The following works for me:
## app.R ##
library(shiny)
library(shinydashboard)
library(tableHTML)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$head(tags$style(make_css(list('.btn', 'white-space', 'pre-wrap')))),
actionButton("buttonresinvthree", HTML("Resource\nActivity"),
style="color: #000000; width:8%; ")
)
)
server <- function(input, output) { }
shinyApp(ui, server)
I added tags$head... to add CSS to the button (class btn) and used \n for the break line between Resource\nActivity.
The result looks like this:
Set white-space to normal:
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
actionButton("buttonresinvthree", "Resource Activity",style="color:
#000000; width:8%;white-space:normal;font-size:.8vw;")
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Though there is the posibility to add a title in a shiny dashboard app, which appears correctly in the app page,
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "my title"),
dashboardSidebar(),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
It does not appear as the name of tab of the browser. As name of tab in browser only appears the URL (like 127...).
You can set the browser page title like this
ui <- dashboardPage(title="Browser title",
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
...