Transparency Issues

[dchen71]

I have a sidebar which has a opacity of 0.65 when it is not being hovered upon. The data steps show this element as a giant white box so is it possible to pass in arguments before and after to adjust opacity so the element shows up properly?

[carlganz]

This is possible using a javascript callback. Please provide a minimal reproducible example

[dchen71]

Below is a reproducible example.

library(shiny)
library(scales)
library(lattice)
library(dplyr)
library(rintrojs)

# Choices for drop-downs
vars <- c(
  "Is SuperZIP?" = "superzip",
  "Centile score" = "centile",
  "College education" = "college",
  "Median income" = "income",
  "Population" = "adultpop"
)

# Define UI for application that draws a histogram
ui <- fluidPage(
  introjsUI(), # Load the rintrojs 
  sidebarLayout(
    sidebarPanel (div(class="outer",
                      # Load styling for absolute panel
                      tags$head(tags$style(HTML(
                        "
                        .outer {
                        /* Appearance */
                        background-color: white;
                        padding: 0 20px 20px 20px;
                        cursor: move;
                        /* Fade out while not hovering */
                        opacity: 0.65;
                        zoom: 0.9;
                        transition: opacity 500ms 1s;
                        }
                        .outer:hover {
                        /* Fade in while hovering */
                        opacity: 1.00;
                        transition-delay: 0;
                        }
                        "
                      ))),

                      h2("ZIP explorer"),

                      selectInput("color", "Color", vars),
                      actionButton("help", "Help Button", icon=icon("question"))
                      )),
    mainPanel()
  )

  )

# Generic Server Logic
server <- function(input, output, session) {
  # Help introjs
  steps <- data.frame(
    element = c(".outer", ".form-group", "#help"),
    intro = c("Transparent part",
              "Input element",
              "Help")
  )

  observeEvent(input$help, {
    introjs(session, options = list(steps = steps))
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

[carlganz]

So you want to include a javascript callback function like this:

introjs(session, options = list(steps = steps, events = list(onbeforechange=I("
// this is javascript
if (this._currentStep == *theIndexNumberOfStepWhereYouWantToChangeOpacity*) {
 $('*selector*').css('opacity', *whateverYouWantToChangeOpacityTo*);
} else {
// change opacity back
$('*selector*').css('opacity', *whateverYouWantToChangeOpacityTo*);
}
"))))

You might want to add another callback to put opacity back on exit in case person exits during the step you change the opacity.

[dchen71]

In your example, when I do the following for my example I do not get any opacity changes.

introjs(session, options = list(steps = steps, events = list(onbeforechange=I("
// this is javascript
if (this._currentStep == 0) {
 $('.outer').css('opacity', 1);
} else {
// change opacity back
$('.outer').css('opacity', 0.45);
}
"))))

Do I have the right syntax for targeting the first step event or am I perhaps targeting the wrong class for the opacity change?

[rareaquaticbadger]

Hi there,

First off, thanks for the excellent package!

I have a similar issue with fixedPanels transparency, specifically in Chrome. I'm not sure if it is directly related to this issue or the Chrome position issue #28 that @dchen71 also raised.

In Chrome (65.0.3325.181) if I run the example code from the README file it works fine, but changing the sidePanel to a fixed location makes any highlighted elements in the sidePanel disappear during the rintrojs walkthrough:

library(rintrojs)
library(shiny)

# Define UI for application that draws a histogram
ui <- shinyUI(fluidPage(
  introjsUI(),

  # Application title
  introBox(
    titlePanel("Old Faithful Geyser Data"),
    data.step = 1,
    data.intro = "This is the title panel"
  ),

  # Sidebar with a slider input for number of bins 

#################################
# THIS IS THE ONLY LINE CHANGED #
#################################
 #sidebarLayout(sidebarPanel(
  sidebarLayout(sidebarPanel(style="position:fixed;", # CHANGE TO FIXED POSITION
    introBox(
      introBox(
        sliderInput(
          "bins",
          "Number of bins:",
          min = 1,
          max = 50,
          value = 30
        ),
        data.step = 3,
        data.intro = "This is a slider",
        data.hint = "You can slide me"
      ),
      introBox(
        actionButton("help", "Press for instructions"),
        data.step = 4,
        data.intro = "This is a button",
        data.hint = "You can press me"
      ),
      data.step = 2,
      data.intro = "This is the sidebar. Look how intro elements can nest"
    )
  ),

  # Show a plot of the generated distribution
  mainPanel(
    introBox(
      plotOutput("distPlot"),
      data.step = 5,
      data.intro = "This is the main plot"
    )
  ))
))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output, session) {
  # initiate hints on startup with custom button and event
  hintjs(session, options = list("hintButtonLabel"="Hope this hint was helpful"),
         events = list("onhintclose"=I('alert("Wasn\'t that hint helpful")')))

  output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x,
         breaks = bins,
         col = 'darkgray',
         border = 'white')
  })

  # start introjs when button is pressed with custom options and events
  observeEvent(input$help,
               introjs(session, options = list("nextLabel"="Onwards and Upwards",
                                               "prevLabel"="Did you forget something?",
                                               "skipLabel"="Don't be a quitter"),
                                events = list("oncomplete"=I('alert("Glad that is over")')))
  )
})

# Run the application
shinyApp(ui = ui, server = server)

This code does seem to work without issue on Explorer however (I haven't tried any other browsers). I would like to keep my sidepanel fixed if possible, but don't want to get rid of the rintrojs walkthough, as it's an incredibly useful package and really helps users navigate the app.

Thanks so much for any help/insight you can offer.