I was wondering if it were possible to use the cicerone package to create a guided tour that spans multiple tabs, starting from a guide button located on an "About" tab, as per the script below. I can only get a tour to work on one tab so far. However, I have been asked to use a tour to show the connection between plots on different tabs of a shiny app.
If Cicerone is not the answer, could someone please suggest a good alternative?
Btw, I don't have sufficient reputation to create a cicerone tag. If someone else would, that would be great.
library(shiny)
library(cicerone)
#Cicerone guide
guide <- Cicerone$
new(allow_close = FALSE)$
step(
"nobs1",
"Observations",
"Number of observations to draw distribution for plot 1"
)$
step(
"submit_button1",
"Submit Data",
"Hit the button after you've set the number of observations for the first plot"
)$
step(
"hist1",
"Histogram",
"The first histogram appears here."
)$
step(
"nobs2",
"Observations",
"Number of observations to draw distribution for plot 1"
)$
step(
"submit_button2",
"Submit Data",
"Hit the button after you've set the number of observations for the second plot"
)$
step(
"hist2",
"Histogram",
"The second histogram appears here."
)
#####################################
#UI
ui <-
shinyUI(
navbarPage("One tour with Cicerone across different tabs",
###########################
tabPanel("About",
"In this app you can input data and try out different plots.",
tags$br(),
tags$br(),
"If you need help, take the tour below.",
tags$br(),
tags$br(),
use_cicerone(),
actionButton("guide", "Take the tour")
),
###########################
########################################################
tabPanel("Plots",
#######################################
tabsetPanel(
tabPanel("Plot 1",
sidebarPanel(
numericInput("nobs1", "Observations", min = 50, max = 200, value = 20),
actionButton("submit_button1", "Submit observations")
),
mainPanel(
plotOutput("hist1")
)
), #closes tab panel Plot 1
tabPanel("Plot 2",
sidebarPanel(
numericInput("nobs2", "Observations", min = 50, max = 200, value = 20),
actionButton("submit_button2", "Submit observations")
),
mainPanel(
plotOutput("hist2")
)
) #closes tab panel Plot 2
)#closes tabset panel
)#closes tab panel
) #closes navBarPage
) #closes shinyUI
#####################################
#SERVER
server <- function(input, output){
guide$
init()$
start()
dat1 <- eventReactive(input$submit_button1, {
runif(input$nobs1)
})
dat2 <- eventReactive(input$submit_button2, {
runif(input$nobs2)
})
output$hist1 <- renderPlot({
hist(dat1())
})
output$hist2 <- renderPlot({
hist(dat2())
})
observeEvent(input$guide, {
guide$start()
})
}
shinyApp(ui, server)
It is funny how you can head scratch for days over a problem and you type a stack question and you suddenly find an answer.
I have figured out how to navigate the tabs with a guide as per the below. Now I am left with the smaller question of how do I activate the tour only when the guide button is clicked (i.e. not upon loading of the page).:
#New guide
#Cicerone guide
guide <- Cicerone$
new()$
step(
"[data-value='Plots']",
"Plots",
"Click on the Plots tab to see available plots",
is_id = FALSE
)$
step(
"nobs1",
"Observations",
"Number of observations to draw distribution for plot 1"
)$
step(
"submit_button1",
"Submit Data",
"Hit the button after you've set the number of observations for the first plot"
)$
step(
"hist1",
"Histogram",
"The first histogram appears here."
)$
step(
"[data-value='Plot 2']",
"Plot 2",
"Click on the Plot 2 tab to try the next plot",
is_id = FALSE
)$
step(
"nobs2",
"Observations",
"Number of observations to draw distribution for plot 2"
)$
step(
"submit_button2",
"Submit Data",
"Hit the button after you've set the number of observations for the second plot"
)$
step(
"hist2",
"Histogram",
"The second histogram appears here."
)
and altogether now:
library(shiny)
library(cicerone)
#Cicerone guide
guide <- Cicerone$
new()$
step(
"[data-value='Plots']",
"Plots",
"Click on the Plots tab to see available plots",
is_id = FALSE
)$
step(
"nobs1",
"Observations",
"Number of observations to draw distribution for plot 1"
)$
step(
"submit_button1",
"Submit Data",
"Hit the button after you've set the number of observations for the first plot"
)$
step(
"hist1",
"Histogram",
"The first histogram appears here."
)$
step(
"[data-value='Plot 2']",
"Plot 2",
"Click on the Plot 2 tab to try the next plot",
is_id = FALSE
)$
step(
"nobs2",
"Observations",
"Number of observations to draw distribution for plot 2"
)$
step(
"submit_button2",
"Submit Data",
"Hit the button after you've set the number of observations for the second plot"
)$
step(
"hist2",
"Histogram",
"The second histogram appears here."
)
#####################################
#UI
ui <-
shinyUI(
navbarPage("One tour with Cicerone across different tabs",
###########################
tabPanel("About",
"In this app you can input data and try out different plots.",
tags$br(),
tags$br(),
"If you need help, take the tour below.",
tags$br(),
tags$br(),
use_cicerone(),
actionButton("guide", "Take the tour")
),
###########################
########################################################
tabPanel("Plots",
#######################################
tabsetPanel(
tabPanel("Plot 1",
sidebarPanel(
numericInput("nobs1", "Observations", min = 50, max = 200, value = 20),
actionButton("submit_button1", "Submit observations")
),
mainPanel(
plotOutput("hist1")
)
), #closes tab panel Plot 1
tabPanel("Plot 2",
sidebarPanel(
numericInput("nobs2", "Observations", min = 50, max = 200, value = 20),
actionButton("submit_button2", "Submit observations")
),
mainPanel(
plotOutput("hist2")
)
) #closes tab panel Plot 2
)#closes tabset panel
)#closes tab panel
) #closes navBarPage
) #closes shinyUI
#####################################
#SERVER
server <- function(input, output){
guide$
init()$
start()
dat1 <- eventReactive(input$submit_button1, {
runif(input$nobs1)
})
dat2 <- eventReactive(input$submit_button2, {
runif(input$nobs2)
})
output$hist1 <- renderPlot({
hist(dat1())
})
output$hist2 <- renderPlot({
hist(dat2())
})
observeEvent(input$guide, {
guide$start()
})
}
shinyApp(ui, server)