Particles in header

[Dave-stat]

Thanks for the great package.

I want to add animation in the header of my dashboard. It works under body of the dashboard but not in header. I tried with tags$li(class='dropdown' in dashboardHeader( ) but it does not show the animation.

library(shiny)
library(particlesjs)

ui <- dashboardPage(

  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(

    tags$li(class = "dropdown",
            tags$div(
              id="particles-target", 
              style = "position: absolute; height: 600px; width: 100%;"
            ),
            particles(target_id = "particles-target")
    ),

    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

[pvictor]

Hello!

Ah yes hard to target the header of shinydashboard, here's a not perfect way to do it:

library(shiny)
library(shinydashboard)
library(particlesjs)

ui <- dashboardPage(

  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(

    tags$script("$('.navbar-static-top').attr('id', 'MYID');"),
    tags$script("$('.navbar-static-top').css('height', '50px');"),
    tags$style(".particles-js-canvas-el {position: absolute;}"),
    particles(
      target_id = "MYID",
      config = particles_config(
        particles.number.value = 150,
        particles.color.value = "#FFF", 
        particles.line_linked.color = "#FFF"
      ), 
      timeout = 1000
    ),

    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Let me know if it works for you,

VIctor