Hinzufügen eines Firmenlogos zu ShinyDashboard Header

Question

Also nur neugierig, gibt es eine Möglichkeit, ein Firmenlogo in den Header eines ShinyDashboard hinzuzufügen? Wie ich das documentation betrachte, beschreibt es das Ändern des "Logos" in der CSS, das ist nur Konfigurieren, was in der oberen linken Ecke geht, soweit ich das beurteilen kann und ich möchte meinen Titel dort behalten.

Ich verwende nicht die Dropdown-Menüs und deshalb möchte ich mein Firmenlogo oben rechts hinzufügen, wo die rote Box ist.

Hat jemand eine Idee, wie dies mit Shinydashboard kann getan werden? Vielen Dank.

Answer 1

Ich habe mit ein bisschen ein Hack für diese Arbeit (und ich weiß, Sie nicht für sie fragte, aber hier ist eine anklickbare Logo, während wir gerade dabei sind):

library(shiny) 
library(shinydashboard) 

dbHeader <- dashboardHeader() 
dbHeader$children[[2]]$children <- tags$a(href='http://mycompanyishere.com', 
              tags$img(src='logo.png',height='60',width='200')) 

dashboardPage(
     dbHeader, 
     dashboardSidebar(), 
     dashboardBody() 
) 

Das nistet also einen glänzenden Tag in der Kopfzeile. Der zweite Schlitz in diesem speziellen glänzenden Objekt ist der Logo-Steckplatz (Sie werden in Ihren/www/Ordnern im App-Verzeichnis ein ‚logo.png‘ müssen)

EDIT:

ich gerade überprüft, und als von jetzt, dieser Hack sollte nicht mehr notwendig sein, können Sie die HTML direkt von der DashboardHeader-Funktion über die title=-Parameter einfügen, (vorher, dieser Parameter wurde nur Durchsetzung von Text),

Ich denke, die Antwort könnte immer noch nützlich sein als eine Methode, um bestehende glänzende Funktionen zu modifizieren, wo Dinge ARE hardcoded in obwohl.

Hier ist das Verfahren jetzt:

dashboardPage(
    dashboardHeader(title = tags$a(href='http://mycompanyishere.com', 
            tags$img(src='logo.png'))) 

oder, ein wenig mehr Magie zum Logo hinzufügen (ich auch mein Logo als Ladeleiste):

# Takes a location 'href', an image location 'src', a loading gif 'loadingsrc' 
# height, width and alt text, and produces a loading logo that activates while 
# Shiny is busy 
loadingLogo <- function(href, src, loadingsrc, height = NULL, width = NULL, alt = NULL) { 
    tagList(
    tags$head(
     tags$script(
     "setInterval(function(){ 
        if ($('html').attr('class')=='shiny-busy') { 
        $('div.busy').show(); 
        $('div.notbusy').hide(); 
        } else { 
        $('div.busy').hide(); 
        $('div.notbusy').show(); 
      } 
     },100)") 
), 
    tags$a(href=href, 
     div(class = "busy", 
      img(src=loadingsrc,height = height, width = width, alt = alt)), 
     div(class = 'notbusy', 
      img(src = src, height = height, width = width, alt = alt)) 
    ) 
) 
} 

dashboardBody(
    dashboardHeader(title = loadingLogo('http://mycompanyishere.com', 
             'logo.png', 
             'loader.gif'), 
    dashboardSidebar(), 
    dashboardBody() 
) 

Answer 2

Hier ist mein Hack (Setzen Sie Ihr Logo, wie bereits erwähnt, in ein www Unterverzeichnis Ihres App-Verzeichnisses).
Da dashboardHeader() ein Tag-Element des Typs erwartet li und Klasse dropdown, können wir solche Elemente statt dropdownMenu s passieren:

library(shiny) 
library(shinydashboard) 

dbHeader <- dashboardHeader(title = "My Dashboard", 
          tags$li(a(href = 'http://shinyapps.company.com', 
             icon("power-off"), 
             title = "Back to Apps Home"), 
            class = "dropdown"), 
          tags$li(a(href = 'http://www.company.com', 
             img(src = 'company_logo.png', 
              title = "Company Home", height = "30px"), 
             style = "padding-top:10px; padding-bottom:10px;"), 
            class = "dropdown")) 

server <- function(input, output) {} 

shinyApp(
    ui = dashboardPage(
     dbHeader, 
     dashboardSidebar(), 
     dashboardBody() 
    ), 
    server = server 
)