1

I'm wondering if there is a possibility to create something like "selectIcon" in shiny. I would like to have a selecter with only icons or e.g. colours.

selectizeInput('colours', '',
               choices = c("blue", "red"),
               selected = "blue")

But insead of words "blue" and "red" I would like to display colored squares. This should be also the case for selected option. Let's say that I have .png files for all my options. How can I include these files in selectizeInput()?

This is a very similar question to this one however there was no working solution for me as I have no knowledge of js.

I tried something like this

  selectizeInput('colours', '',
                 choices = c("blue", "red"),
                 selected = "blue",
                 options = list(render = I(
                   "{
                   option: function(item, escape) {
                   return '<div><img src=\"item.png\" width = 20 />' + escape(item.name) + '</div>'
                   }
                   }"))

but without any success. The options are now undefined. No figures are displayed.

I appreciate any help.

Community
  • 1
  • 1
Adela
  • 1,757
  • 19
  • 37

1 Answers1

3

You can do something like this with package shinyWidgets (This answer is biased, I'm the author of this package) :

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  br(),

  pickerInput(
    inputId = "one", 
    label = "Choose:", 
    choices = c("red", "blue", "green"),
    choicesOpt = list(content = sprintf(
      "<div style='background: %s;'>&nbsp;</div>",
      c("red", "blue", "green")
    ))
  ),
  verbatimTextOutput(outputId = "resone"),

  pickerInput(
    inputId = "two", 
    label = "Choose:", 
    choices = c("home", "search", "ok-sign"),
    choicesOpt = list(
      icon = c("glyphicon-home", 
               "glyphicon-search", 
               "glyphicon-ok-sign")
    )
  ),
  verbatimTextOutput(outputId = "restwo")


)

server <- function(input, output, session) {

  output$resone <- renderPrint(input$one)

  output$restwo <- renderPrint(input$two)

}

shinyApp(ui = ui, server = server)

A solution with selectizeInput is to put your images in a folder named www in your app directory, and after you can do this :

library("shiny")

# dummies images
png(filename = "www/red.png")
plot.new()
rect(0, 0, 1, 1, col = "red")
dev.off()

png(filename = "www/blue.png")
plot.new()
rect(0, 0, 1, 1, col = "blue")
dev.off()


# images are displayed only in dropdown menu
ui <- fluidPage(
  br(),
  selectizeInput(
    'colours', '',
    choices = c("blue" = "blue.png", "red" = "red.png"),
    selected = "blue",
    options = list(
      render = I(
        "{
      option: function(item, escape) {
      return '<div><img src=\"' + item.value + '\" width = 20 />' + escape(item.name) + '</div>'
      }
      }")
    )
  )
)

server <- function(input, output, session) {



}

shinyApp(ui = ui, server = server)

EDIT : In recent version of shiny, replace item.name by item.label.

Victorp
  • 13,636
  • 2
  • 51
  • 55