I'm new to Shiny and can't figure out how to "unbold" labels (feed rate and operation in the screenshot attached). Here's my code for the UI part:
ui <- fluidPage(titlePanel(""),
sidebarLayout(
sidebarPanel(
# adding the new div tag to the sidebar
tags$div(class="header", checked=NA,
tags$h4(strong("Duty"))),
selectInput('id1', 'Feed rate (m^3/h)', c("All", main$metric[1:3])),
selectInput('id2', 'Operation', c("All", main$metric[4:5])),
mainPanel(DT::dataTableOutput("table"))
))
And here's the screenshot:
You can do this by adding your own style sheet to your Shiny app. First we give the sidebar panel a class sidebar so we can refer to it. Then we can add the following to a file www/style.css:
.sidebar label {
font-weight: 400;
}
Finally we set the theme parameter of your fluidPage to "style.css".
ui <- fluidPage(theme="style.css", titlePanel(""),
# content here
))
The result should look like this:
This is another option (you don't have to create a file)
library(shiny)
remove_bold <-"
#expr-container label {
font-weight: 400;
}
"
ui <- fluidPage(
titlePanel("My app"),
sidebarLayout(
sidebarPanel(
tags$style(remove_bold), ####### NEW CODE
tags$div(id = "expr-container", ####### NEW CODE
textInput(inputId = "data2", "Data1", value = "data"))
),
mainPanel(
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Inspired in this post: How to change the pickerinput label to fine instead of bold
Related
In order to make an app where panels are created dynamically, I would like to remove, hide and/or update panels from the package shinyWidgets.
I didn't find any function to do so nor way to add IDs to these panel.
If you have the solution or a way around, I would be more than happy. Thank you in advance !
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
panel(
heading = "Test panel",
actionButton("remove_panel", "Remove this panel")
)
)
server <- function(input, output) {
observeEvent(input$remove_panel,{
print("remove panel")
})
}
shinyApp(ui = ui, server = server)
There is no official method you can use to change the panel states, but we can do it with custom expressions.
library(shiny)
library(shinyWidgets)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
panel(
heading = "Test panel1",
id = "test_panel1",
actionButton("remove_panel", "Remove this panel")
),
panel(
heading = "Test panel2",
id = "test_panel2",
"some content"
),
actionButton("hide_panel", "Hide this panel")
)
server <- function(input, output) {
observeEvent(input$remove_panel,{
removeUI('.panel:has([id="test_panel1"])', immediate = TRUE)
})
observeEvent(input$hide_panel,{
toggle(selector = '.panel:has([id="test_panel2"])')
if(input$hide_panel %% 2 == 1) return(updateActionButton(inputId = "hide_panel", label = "Show this panel"))
updateActionButton(inputId = "hide_panel", label = "Hide this panel")
})
}
shinyApp(ui = ui, server = server)
To remove:
add an ID argument to your panel, and use removeUI to remove it. Remember to change the ID in you own case.
To hide/show:
We can use toggle from shinyjs to show or hide some elements we choose.
Use updateActionButton to also change it text when hidden.
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 add a tooltip for navbarMenu in Shiny app. Similar question asked here but, there is no answer.Here is my reproducible code
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu("Tab1",bsTooltip(id="Tab1", title="Short description for the tab", trigger = "hover"),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
During my research I found this solution R Shiny: Use navbarPage with bsModal by shinyBS, but for bsModel.
Also, there is a procedure mentioned here which is based in java-script.I know both solutions are for tabpanel but I believe it's the same problem, which is navbarMenu and tabpanel don't have an id.
I'm statistician and I don't have background in HTML or java-script to rewrite the attribute for the tab title or navbarMenu.
I hope I phrase my question in a clear manner. Thanks in advance for your time and kind help.
you can use HTML wenn passing the Title of the Tabs. in this case I just pt the title in a span and added the attribute titlewhich is the attribute HTML uses default for mouse-overs. For me this is much sinpler the trying to add it over shinyBS.
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu(span("Tab1",title="Short description for the tab" ),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
hope this helps!
I found another solution using javascript. Perhaps it may be more useful.
library(shiny)
shinyApp(
ui = navbarPage(
tags$script(HTML('
$( document ).on("shiny:sessioninitialized", function(event) {
$(\'span[data-toggle="tooltip"]\').tooltip({
html: true
});
});'
)),
navbarMenu(
"Menu"
,tabPanel(span("navbarTitle 1",title="XXX",`data-toggle`="tooltip"),
tabsetPanel(
tabPanel(span("Tab 1", title = "aaa",`data-toggle`="tooltip")),
tabPanel(span("Tab 2",title="bbb",`data-toggle`="tooltip")),
tabPanel(span("Tab 3",title="ccc",`data-toggle`="tooltip"))
)
)
,tabPanel( "navbarTitle 2")
)
),
server = function(input, output) {
}
)
I have a dataTableOutput in my main panel. Then I have an action button "Go". Once I click "Go" I want rHandsOutput to appear in the main panel but not beneath dataTableOutput. How can I remove dataTableOutput in the main panel and display rHandsOutput. In my current code both tables appearing together. Once I click "Go", the second table comes under the first table where I want to appear only second table (rHandsOutput) removing 1st table from the main panel.
Please help me!1
You can use a combination of insertUI and removeUI to make UI components dynamic. For example:
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
actionButton(inputId = "go", label = "Go")
),
mainPanel(
fluidRow(
tags$div(id = "firstOutput",
dataTableOutput("myDataTable"))
),
fluidRow(
tags$div(id = "placeholder") # the dynamic UI will be inserted relative to this placeholder
)
))
)
server <- function(input, output) {
output$myDataTable <- renderDataTable(iris)
observeEvent(input$go, {
removeUI("div:has(>#firstOutput)")
insertUI(
selector = "#placeholder",
where = "afterEnd", # inserts UI after the end of the placeholder element
ui = fluidRow(
actionButton(inputId = "newButton", label = "A new button")))
})
}
shinyApp(ui = ui, server = server)
You can use showElement() and hideElement() from shinyjs:
observeEvent(input$go, {
shinyjs::hideElement(“firsttable”)
shinyjs::showElement(“rHandsOutput”)
})
Assuming the ID of the first table is “firsttable” and the ID of the second table is “rHandsOutput”, and the ID of the “Go” button is “go”.
Generate the ui dynamically.
Use uiOutput("someidentifier") in the ui.r and then fill it with your datatable with the following in server.r
output$someidentifier <-
renderUI({
dataTableOutput("datatableidentifier")
})
output$datatableidentifier <- renderDataTable(iris)
uiOutput takes the place (in ui.r) of whatever ui element you want to add dynamically. The necessary code for that ui then moves to renderUI in server.r.
I've been trying to use shinyBS modals with dateInput. The problem is that the calendar widget is hidden behind the modal. Here is my example code:
library(shiny)
library(shinyBS)
shinyApp(
ui =fluidPage(
mainPanel(
actionButton("button", label = "Open Modal"),
bsModal("modalExample", "Data Table", "rowtogg", size = "small",
fluidPage(dateInput("dates", "Enter date")))
)
),
server = function(input, output, session) {
observeEvent({
input$button
},{
toggleModal(session, "modalExample", "open")
})
}
)
A screenshot of the problem can be found at: https://github.com/ebailey78/shinyBS/issues/46, where I already asked the question. However it seems to me like this is a more "general" problem, so I was hoping someone over here could help me out.
EDIT: Thanks to Yenne Info it works by adding:
tags$style(type = "text/css", ".datepicker{z-index: 1100 !important;}"),