Positioning of box and action buttons in R shiny - html

The following dashboard page consists of action buttons aligned to the left and the plot and two more zoom and reset buttons. I want to position the box at the center of the screen and zoom and reset buttons to the extreme top-right. Rest all buttons are fine. I tried to use tags$div but no help. Please help and big thanks in advance.
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "My Dashboard"),
dashboardSidebar(
width = 0
),
dashboardBody(
tags$br(actionButton("go", "Log")),
tags$br(),
tags$br(actionButton("go", "Case")),
tags$br(),
tags$br(actionButton("go", "Resource")),
tags$br(),
tags$br(actionButton("go", "Activity")),
tags$br(),
tags$br(actionButton("go", "Resource-activity")),
box(),
tags$br(actionButton("go", "Zoom")),
tags$br(actionButton("go", "Reset"))
))
server <- function(input, output)
{
}
shinyApp(ui, server)

You could play with fluidRow and column:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "My Dashboard"),
dashboardSidebar(
width = 0
),
dashboardBody(
fluidRow(
column(2, offset = 1,
actionButton("go", "Log")
),
column(2, offset = 7,
actionButton("go", "Zoom")
)
),
fluidRow(
column(2, offset = 1,
actionButton("go", "Case")
),
column(2, offset = 7,
actionButton("go", "Reset")
)
),
fluidRow(
column(2, offset = 1,
actionButton("go", "Resource")
),
column(8, offset = 1,
box()
)
),
fluidRow(
column(2, offset = 1,
actionButton("go", "Activity")
)
),
fluidRow(
column(2, offset = 1,
actionButton("go", "Resource-activity")
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
But there might be better alternatives.

Something like this do?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "My Dashboard"),
dashboardSidebar(
width = 0
),
dashboardBody(
fluidRow(
column(1,
tags$br(actionButton("go", "Log")),
tags$br(),
tags$br(actionButton("go1", "Case")),
tags$br(),
tags$br(actionButton("go2", "Resource")),
tags$br(),
tags$br(actionButton("go3", "Activity")),
tags$br(),
tags$br(actionButton("go4", "Resource-activity"))),
br(),
column(10,
box(width=12,plotOutput("plot"))),
column(1,
tags$br(actionButton("go5", "Zoom")),
tags$br(),
tags$br(actionButton("go6", "Reset"))))
))
server <- function(input, output){
output$plot <- renderPlot(hist(mtcars$disp))
}
shinyApp(ui, server)

Related

Shinydashboard, align logo to the right

Is it possible to move the logo in the header completely to the right side?
I have attached a pic how I would like it to look like.
here is a MWE
logo to the right
library(shiny)
library(shinydashboard)
ui <- function(){
dashboardPage(
dashboardHeader(title = tags$a(href = 'https://google.com',
tags$img(src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', height= 50,width= 50, align = "right"),
'Title')),
dashboardSidebar( sidebarMenu(id="side", menuItem("Option1", tabName="op1"),
menuItem("Option2", tabName="op2"))
),
body=dashboardBody())}
server <- function(input, output, session) {}
shinyApp(ui, server)
You could wrap it in a li wrapper of class dropdown. Try this
library(shiny)
library(shinydashboard)
ui <- function(){
dashboardPage(
dashboardHeader(
title = "Demo",
tags$li(class = "dropdown",
tags$a(href = 'https://google.com',
tags$img(src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', height= 50,width= 50, align = "right")
)
),
dropdownMenuOutput('messageMenu')
),
dashboardSidebar( sidebarMenu(id="side", menuItem("Option1", tabName="op1"),
menuItem("Option2", tabName="op2"))
),
body=dashboardBody())}
server <- function(input, output, session) {}
shinyApp(ui, server)

Vertically aligning image in Shiny

I am trying to vertically align an image in the second column of a tabPanel in Shiny. I have managed to align it horizontally (using align="center"), but cannot align it vertically without inserting several br(). I highly suspect there must be a more elegant solution to do this. An example of my code is below (br()'s not included). Any suggestions would be appreciated. Thanks in advance for your help!
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot",
column(width = 6,
plotOutput("plot")),
column(width = 6, align="center",
img(src = "image.jpg", height=140, width=140),
)),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
A not so great solution that greatly reduces the br() congestion:
library(shiny)
library(purrr)
n_br <- 17
ui <- fluidPage(
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot",
column(width = 6,
plotOutput("plot")),
column(width = 6, align="center",
map(1:n_br, ~br()), #add n number of br()
img(src = "image.jpg", height=140, width=140),
)),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
))
server <- function(input, output, session) {
}
shinyApp(ui, server)
Edit:
Following this tutorial and using shiny's tags function:
library(shiny)
library(tidyverse)
ui <- fluidPage(
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot",
column(width = 6,
plotOutput("plot")),
column(width = 6, align = "center",
tags$style(HTML('
.verticalcenter {
display: table-cell;
height: 400px;
vertical-align: middle;
}')),
tags$div(class = "verticalcenter", img(src = "image.png", height = "140px", width = "140px"))
)),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
))
server <- function(input, output, session) {
output$plot <- renderPlot(plot(iris$Sepal.Length, iris$Petal.Length))
}
shinyApp(ui, server)

How to change the font family of verbatimTextOutput to be the same as the input in Shiny and Shinydashboard?

I would like to change the font family of the verbatimTextOutput to be the same as the input in Shiny and Shinydashboard. Here is an example.
# Load the packages
library(shiny)
library(shinydashboard)
# User Interface
ui <- dashboardPage(
header = dashboardHeader(title = ""),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Example",
tabName = "tab1"
)
)
),
body = dashboardBody(
tabItems(
tabItem(
tabName = "tab1",
fluidRow(
column(
width = 4,
numericInput(inputId = "Number", label = "A numeric input", value = NA),
strong("The same number as the numeric input"),
verbatimTextOutput("Number_out")
)
)
)
)
)
)
server <- function(input, output, session){
output$Number_out <- renderText(as.character(input$Number))
}
# Run the app
shinyApp(ui, server)
By running the app and type in a number, we can see that the font family is different in the numericInput and the verbatimTextOutput.
Based on this answer (https://stackoverflow.com/a/48037443/7669809) and this answer (https://stackoverflow.com/a/50784117/7669809), I edited my script as follows.
# Load the packages
library(shiny)
library(shinydashboard)
# User Interface
ui <- dashboardPage(
header = dashboardHeader(title = ""),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Example",
tabName = "tab1"
)
)
),
body = dashboardBody(
tags$head(
tags$style(
HTML(
'#Number_out {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
}'
)
)
),
tabItems(
tabItem(
tabName = "tab1",
fluidRow(
column(
width = 4,
numericInput(inputId = "Number", label = "A numeric input", value = NA),
strong("The same number as the numeric input"),
verbatimTextOutput("Number_out")
)
)
)
)
)
)
server <- function(input, output, session){
output$Number_out <- renderText(as.character(input$Number))
}
# Run the app
shinyApp(ui, server)
But the font family is still not the same.
It seems like I have not used the correct font family yet. Please let me know how I can achieve this.
Try font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
So your tags$head will be:
tags$head(
tags$style(
HTML(
"#Number_out {
font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
}"
)
)
)
EDIT
In Chrome, if you right click and click on Inspect then scroll down to find relevant style elements:
And on bottom right you can see:

How I can use "/%s" function into shiny r

I can't open and show html file into shiny code in r
I'm trying make it by R programm:
ui.R
tabItem(tabName = "ndvi",
fluidPage(tags$style(type = "text/css", "#map{height: 800px !important;}"),
fluidRow(
column(2,
dateInput("date1",
label = "DATE",
value = "2018-08-07")
)
),
fluidRow(
htmlOutput("frame1")
server.R
framePath <- reactive({
return(sprintf("http://10.0.6.179:5656/WEB_NKR/ndvi_shape_files/agro_priishimski//%s_agro_priishimski.html", input$date1))
})
output$frame1 <- renderUI({
tags$iframe(seamless="seamless", src=framePath(), height=800, width=1650)
})
I must take in the result:

bottom align a button in R shiny

I cannot figure out a way to bottom align downloadButton with a selectizeInput, i.e.,
library(shiny)
runApp(list(
ui = shinyUI(fluidPage(
fluidRow(align="bottom",
column(12, align="bottom",
h4("Download Options:"),
fluidRow(align="bottom",
column(6, selectizeInput("plot_dl", "File Type", width="100%",
choices = list("PDF"="pdf","PNG"="png"))),
column(3, downloadButton('plot1_dl', 'Left Plot')),
column(3, downloadButton('plot2_dl', 'Right Plot'))
)
)
),
tags$style(type='text/css', "#plot1_dl { width:100%; vertical-align:bottom}"),
tags$style(type='text/css', "#plot2_dl { width:100%;}")
)),
server = function(input, output) {
}
))
Placing align="bottom" anywhere and everywhere does not throw an error message, but does not have the desired effect either. Tried playing around with the style tags of the buttons, but well out my depth.
Found an ad-hoc fix with margin-top: 25px in the style tag...
library(shiny)
runApp(list(
ui = shinyUI(fluidPage(
h4("Download Options:"),
fluidRow(
column(6, selectizeInput("plot_dl", "File Type", width="100%",
choices = list("PDF"="pdf","PNG"="png"))),
column(3, downloadButton('plot1_dl', 'Left Plot')),
column(3, downloadButton('plot2_dl', 'Right Plot'))
),
tags$style(type='text/css', "#plot1_dl { width:100%; margin-top: 25px;}"),
tags$style(type='text/css', "#plot2_dl { width:100%; margin-top: 25px;}")
)),
server = function(input, output) {
}
))
Other way to do it is to pass style argument in the column function.
runApp(list(
ui = shinyUI(fluidPage(
h4("Download Options:"),
fluidRow(
column(6, selectizeInput("plot_dl", "File Type", width="100%",
choices = list("PDF"="pdf","PNG"="png"))),
column(3, style = "margin-top: 25px;", downloadButton('plot1_dl', 'Left Plot')),
column(3, style = "margin-top: 25px;", downloadButton('plot2_dl', 'Right Plot'))
)
)),
server = function(input, output) {
}
))