R JavaScript TeX
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
R
docs git cleanup Feb 1, 2017
inst upgrade to Introjs 2.4.0 Feb 17, 2017
man update docs Feb 17, 2017
paper typo in url Oct 18, 2016
tests
.Rbuildignore User2017 Dec 22, 2016
.gitignore initial commit Jul 9, 2016
.travis.yml travis blah Oct 21, 2016
CONDUCT.md Contibuting Guidelines Sep 21, 2016
DESCRIPTION Bump version Feb 17, 2017
License Use correct license Sep 22, 2016
NAMESPACE
NEWS.md add to news Feb 17, 2017
README.Rmd update docs Feb 17, 2017
README.md update docs Feb 17, 2017
_pkgdown.yml update pkgdown Oct 28, 2016
appveyor.yml Do more appveyor testing Oct 27, 2016
codecov.yml
cran-comments.md bump version 0.1.2 Dec 1, 2016
rintrojs.Rproj git cleanup Feb 1, 2017

README.md

JOSS StatusProject Status: Active. Build StatusCoverage StatusAppVeyor Build StatusCRAN\_Status\_BadgeLicenceminimal R version

rintrojs

R was originally developed with the name S in the 70's as a glue language. Statisticians at Bell Labs needed an interactive environment for working with their C and Fortran scripts. Decades later, R is still a glue language, except instead of C and Fortran, it brings together C++, and JavaScript. With the advent of the Shiny package, R is now a popular platform for developing data-driven web applications. As Shiny increases in popularity so will the complexity of the Shiny apps built. In many instances, new-users will require guidance when they first use a Shiny application.

Luckily, there is already a well established JavaScript library for this purpose. Intro.js, written by Afshin Mehrabani, is a JavaScript library that helps integrate step-by-step introductions, and clickable hints into websites. The rintrojs R package integrates Intro.js into Shiny, so that users can easily add instructions to their application without having to use HTML, CSS, or JavaScript.

Install

rintrojs is available on CRAN:

install.packages("rintrojs")

To access the bleeding-edge version, use devtools to install rintrojs from github:

devtools::install_github("carlganz/rintrojs")

Usage

To use rintrojs, you need to call introjsUI() once in the UI. rintrojs supports both static and programmatic introductions meaning you can either wrap the elements you want to introduce with introBox, or dynamically generate your introduction using the steps option (see the Intro.js documentaion). You specify the order of the introduction with the data.step parameter, and you specify the content of the introduction with the data.intro parameter. You can initiate the introduction from the server by calling introjs(session). You can also specify options, and pass text as the body of javascript events associated with Intro.js.

Here is an example with a static introduction, but with options, and events used.

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

You can also generate introductions dynamically.

library(shiny)
library(rintrojs)

ui <- shinyUI(fluidPage(
      introjsUI(),
      mainPanel(
        textInput("intro","Enter an introduction"),
         actionButton("btn","Press me")
      )
   )
)

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

  steps <- reactive(data.frame(element = c(NA,"#btn"),
                               intro = c(input$intro,"This is a button")))

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

  })

})

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

Click here to view example.

Contributing

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

If you find any problems or have any questions, please feel free to file an issue.