Search code examples
htmlrshinypathgolem

Where to store background picture in a shiny app using golem framework

I have this working example app. Here I set 12092021.png as background picture. 12092021.png lives in the www folder in the root directory -> Everything is perfect.

library(shiny)

ui <- fluidPage(
  
  #background image
  tags$img(
    src = "12092021.png",
    style = 'position: absolute; position: absolute;
      width: 1024px; height: 768px;'
  ),
  
  tags$head(
    tags$style(HTML("
      #container > .form-group {
        height: 30px; 
        margin-bottom: 5px;
        font-size:30px
      }"))
  ),
  
  tags$style("#a {font-size:30px;}"),
  tags$style("#b {font-size:30px;}"),
  tags$style("#c {font-size:30px;}"),
  
  tags$style("#a1 {font-size:30px;height:30px;}"),
  tags$style("#b1 {font-size:30px;height:30px;}"),
  tags$style("#c1 {font-size:30px;height:30px;}"),
  
  numericInput("a1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("b1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("c1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  div(id = "container",
      style="position: relative;left: 650px; top: 190px; ",
      numericInput("a", "", value = 0, min=0, max=3, step=1, width = "100px"),
      numericInput("b", "", value = 0, min=0, max=3, step=1, width = "100px"),
      numericInput("c", "", value = 0, min=0, max=3, step=1, width = "100px")
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

Now I am playing around with golem to create a package of my shiny app. There are a lot of things that are quite new for me. I managed that the app works using run_app().

My question is, where do I have to save the www folder within the golem framework and how would the path look like to get my background picture presented?

So far I have copied the www folder to the R folder and also to inst/app/.

enter image description here

Solution

  • It took me the whole day and as usual it was simple. So far I used this code:

      tags$img(
    src = "12092021.png",
    style = 'position: absolute; position: absolute;
      width: 1024px; height: 768px;'
  )

    In contrast to usual coding where the files in www folder are directly accessed in a shiny app, within this constellation (golem framework) we have to use the www in the path:

      tags$img(
    src = "www/12092021.png",
    style = 'position: absolute; position: absolute;
      width: 1024px; height: 768px;'
  )

    12092021.png lives in ..inst/app/www