Добавление логотипа компании в заголовок ShinyDashboard

Так что просто любопытно, есть ли способ добавить логотип компании в заголовок ShinyDashboard? Когда я просматриваю документацию, в ней описывается изменение логотипа в CSS. , это просто настройка того, что находится в верхнем левом углу, хотя, насколько я могу судить, я хотел бы сохранить там свой заголовок.

Я не использую раскрывающиеся меню, поэтому я хотел бы добавить логотип моей компании вверху справа, где находится красный квадрат.

введите описание изображения здесь

Кто-нибудь знает, как это можно сделать с помощью Shinydashboard? Спасибо.

Обновление 2020-10-27

Я недавно обнаружил, что для пользователей, которые знакомы с HTML или хотят большей гибкости в своем пользовательском интерфейсе и имеют доступ к интерфейсному разработчику, вы можете использовать HTML для создания всего пользовательского интерфейса. Об этом можно найти здесь. Это позволит сделать весь брендинг и макет таким образом, чтобы при желании соответствовать стандартам вашей компании. Надеюсь это поможет.


person decal    schedule 15.07.2015    source источник
comment
Это может помочь. stackoverflow.com/questions/21996887/   -  person Shiva    schedule 15.07.2015


Ответы (2)


Я работал с небольшим количеством хака для этого (и я знаю, что вы этого не просили, но вот логотип, который можно щелкнуть, пока мы на нем):

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()
)

Таким образом, внутри заголовка размещается блестящий тег. Второй слот в этом конкретном блестящем объекте - это слот для логотипа (вам понадобится «logo.png» в папке / www / в каталоге приложения).

РЕДАКТИРОВАТЬ:

Я только что проверил, и на данный момент этот хак больше не нужен, вы можете вставить html прямо из функции dashboardHeader с помощью параметра title= (раньше этот параметр принудительно вводил только текст),

Я думаю, что ответ все еще может быть полезен как метод для изменения существующих блестящих функций, в которых вещи ЕСТЬ жестко запрограммированы.

Вот способ:

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

или, добавив немного магии к логотипу (я также использую свой логотип как полосу загрузки):

# 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()
)
person Shape    schedule 29.09.2015
comment
как я могу изменить выравнивание логотипа? - person KillerSnail; 29.10.2015
comment
Это все, что касается стиля CSS. Есть два способа сделать это: один - заключить дочерние элементы в теги $ style (..). Другой (и, вероятно, предпочтительный метод) - создать файл custom.css и поместить его в папку / www /. Затем вызовите его с помощью tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"). Внутри таблицы стилей просто добавьте .logo {ALIGNMENTPARAMS: VALUE;}, где вы можете найти имена параметров и значений через Google. - person Shape; 29.10.2015
comment
@Shape с блестящей 0.13.2 и shinydashboard 0.5.1 решение, похоже, не работает: я получаю the server responded with a status of 404 (Not Found) - person Enzo; 17.04.2016
comment
@Enzo - это те версии, которые у меня есть, и они все еще работают для меня, убедитесь, что ссылка верна и логотип logo.png находится в вашей папке www. - person Shape; 19.04.2016
comment
404 звучит иначе, похоже, проблема с вашим хостингом. - person Shape; 19.04.2016
comment
Я обнаружил проблему: вам нужно иметь отдельные файлы ui.R и server.R, иначе, если вы используете все в одном файле app.R с shinyApp (ui, server), он не найдет файл logo.png в папку www (но она находит мой favicon.ico - бах?). - person Enzo; 20.04.2016

Вот мой прием (поместите ваш логотип, как уже упоминалось ранее, в подкаталог www каталога вашего приложения).
Поскольку dashboardHeader() ожидает элемент тега типа li и класса dropdown, мы можем передавать такие элементы вместо dropdownMenus:

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
)
person Matt Flor    schedule 14.12.2016
comment
Если кому-то не нужно, чтобы он был кликабельным - предлагаю заменить a() на div() и добавить margin-right:10px; в параметр стиля. - person Claud H; 27.11.2018
comment
В связи с недавним изменением правил обработки браузером требуется незначительное изменение файла img. Измените img(src=...) на tags$img(src=...). - person YBS; 16.10.2020
comment
Размер изображения тут не причем? - person RxT; 09.02.2021