CODEWITHSUNDEEP
rshiny
Marie-Louise
Marie-Louise

Reputation: 419

change the layout of shiny app

I built a shiny app that tells you how much days are left untill it's your birthday. But visually I want the text to be in one row while it's currently like this: enter image description here

I guess this should be easy but I am new to shiny and don't really get it. This is my code: library(shiny)

ui <- (shinyUI(fluidPage(
  sidebarPanel(
    strong("Wann wurdest du geboren?"),
    selectInput("a1",label="Tag", choices=(c(1:31))),
    selectInput("a2",label="Monat", choices=(c(1:12))),
    selectInput("a3",label="Jahr", choices=(c(1940:year(Sys.time())))),

    mainPanel(
      verbatimTextOutput('a_out'),

      # UI output
        uiOutput("b1")
 )
))))

server <- shinyServer(function(input, output) {
  data <- reactive({
  Geburtsdatum <- paste0(input$a1,".", input$a2, ".", input$a3)
  Uhrzeit <- "00:00:01"
  Geb <- paste(Geburtsdatum, Uhrzeit)
  geburt <- strptime(c(Geb), format = "%d.%m.%Y %H:%M:%S", tz = "CET")
  geburtstag <- geburt
  year(geburtstag) <- year(Sys.time())
  gebu <- geburtstag - Sys.time()
  if(gebu < 0){year(geburtstag) <- year(Sys.time())+1}
  gebu <- geburtstag - Sys.time()
  Alter <- ceiling((Sys.time() - geburt)/365)
  runden <- function(Wert){
    trunc(Wert)
  }
  decimalpl <- function(Wert){
    Wert-trunc(Wert)
  }
  list(a = (trunc(gebu)), 
       b = (runden(decimalpl(gebu)*24)), 
       c = (runden(decimalpl(decimalpl(gebu)*24)*60)), 
       d = (runden(decimalpl(decimalpl(decimalpl(gebu)*24)*60)*60)), 
       e = (paste(Alter,".", sep="")))
  })
  output$b1 <- renderUI({
    strong(paste("Noch", data()$a, "Tage,",
                 data()$b, "Stunden,",
                 data()$c, "Minuten, und",
                 data()$d, "Sekunden bis zu deinem", 
                 data()$e, "Geburtstag!"))
  })
  })


shinyApp(ui = ui, server = server)

Thank you really much! P.S.: could I collorize the backgorund and the text, too? Or include an image?

Upvotes: 0

Views: 624

Answers (1)

K. Rohde
K. Rohde

Reputation: 9676

as for the styling of your app, here is an example that gives a hint on how to colour your text, background and add images.

I hope this helps.

library(shiny)

ui <- shinyUI(
  fluidPage(
    sidebarPanel(style = "background-color: orange;",
      strong("Wann wurdest du geboren?"),
      selectInput("a1",label="Tag", choices=(c(1:31))),
      selectInput("a2",label="Monat", choices=(c(1:12))),
      selectInput("a3",label="Jahr", choices=(c(1940:year(Sys.time()))))
    ),
    mainPanel(
      #verbatimTextOutput('a_out'),
      tags$img(src = "http://media.kuechengoetter.de/media/735/13553229675100/geburtstag-kuechengoetter.jpg", style = "z-index: -1; position: fixed;"),
      # UI output
      uiOutput("b1", style = "color: blue;")
    )
))

server <- shinyServer(function(input, output) {
  data <- reactive({
    Geburtsdatum <- paste0(input$a1,".", input$a2, ".", input$a3)
    Uhrzeit <- "00:00:01"
    Geb <- paste(Geburtsdatum, Uhrzeit)
    geburt <- strptime(c(Geb), format = "%d.%m.%Y %H:%M:%S", tz = "CET")
    geburtstag <- geburt
    year(geburtstag) <- year(Sys.time())
    gebu <- geburtstag - Sys.time()
    if(gebu < 0){year(geburtstag) <- year(Sys.time())+1}
    gebu <- geburtstag - Sys.time()
    Alter <- ceiling((Sys.time() - geburt)/365)
    runden <- function(Wert){
      trunc(Wert)
    }
    decimalpl <- function(Wert){
      Wert-trunc(Wert)
    }
    list(a = (trunc(gebu)), 
         b = (runden(decimalpl(gebu)*24)), 
         c = (runden(decimalpl(decimalpl(gebu)*24)*60)), 
         d = (runden(decimalpl(decimalpl(decimalpl(gebu)*24)*60)*60)), 
         e = (paste(Alter,".", sep="")))
  })
  output$b1 <- renderUI({
    strong(paste("Noch", data()$a, "Tage,",
                 data()$b, "Stunden,",
                 data()$c, "Minuten, und",
                 data()$d, "Sekunden bis zu deinem", 
                 data()$e, "Geburtstag!"))
  })
})


shinyApp(ui = ui, server = server)

Upvotes: 1

Related Questions