juba / shinyglide Goto Github PK

View Code? Open in Web Editor NEW

91.0 91.0 8.0 1.93 MB

Glide.js component for Shiny apps

Home Page: https://juba.github.io/shinyglide/

R 62.90% JavaScript 34.95% CSS 2.14%

glide r shiny

shinyglide's People

Contributors

Stargazers

Watchers

Forkers

yongheshinian tazovsky jimsforks drroad takewiki julianoatto

shinyglide's Issues

Content gets squished when used in multiple tabPanels

Does next_condition support ns() within shiny modules

Modularizing your minimal example that I found here

The next button remains disabled even though the conditional is fulfilled. In conditionalPanel, there is an explicit ns argument included. Is there support for this within shinyglide?

test_mod_ui <- function(id) {
  ns <- NS(id)
  numericInput(ns("n"), "n :", value = 0)
  
  plotOutput(ns("plot"))
}

test_mod_server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(rnorm(input$n), main = paste("n =", input$n))
  })
}

ui <- fluidPage(
  glide(
    screen(
      next_condition = "input.n > 0",
      
      p("Please choose a value for n :"),
      test_mod_ui("mod1")
    ),
    screen(
      p("Done."),
    )
  )
)

server <- function(input, output, session) {
  callModule(test_mod_server, "mod1")
            
}

shinyApp(ui, server)

Unexpected behavior when using the tab key to jump between fields

Hi,

Thank you for the great package, I really enjoy working with it! Recently I encountered one issue though: Whenever I use the tab key to jump between input fields, the smooth transition from one screen to the next does not seem to work properly anymore. There are two problems:

Using the tab key defeats the "next_condition", i.e. I can still reach the next page even when the condition is not met.
When I jump to the next page by using the tab key, it is not displayed properly (it only jumps to the right end of the next input field).

I tried using “keyboard = FALSE” in the development version, but it does indeed only disable the arrow keys. Hence my question: Would it be possible to include a functionality that also disables the tab key, so that I can prevent this behavior?
Please see my (hopefully) reproducible example below.

library(shiny)
library(shinyglide)

ui <- fixedPage(titlePanel("MWE: Tab Key"),
                
                glide(
                  keyboard = FALSE,
                  screen(
                    p("It is not possible to meet the next_condition (n < 10 in this case)."),
                    p("Going to the next screen should therefore be impossible."),
                    p("However, see what happens when you click on the input field and then hit the tab key."),
                    numericInput("n", "First field", value = 10, min = 10),
                    next_condition = "n < 10"
                  ),
                  screen(
                    p("You jumped + the page is not displayed correctly."),
                    plotOutput("plot"),
                    numericInput("x", "Second field", value = 1)
                  )
                )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(
      rnorm(input$n),
      main = paste("n =", input$n),
      xlab = ""
    )
  })
}

shinyApp(ui, server)

shinyglide Conflicts with slickR

Hi!

Great package; I love the functionality. However, I think I've found a bug. It seems that whenever slickR is used, the 'glide' content of the modal gets very squished and unreadable. I'm not sure if this is your package or if it's slickR's package but I thought I should let you know.

library(shiny)
library(shinyglide)
library(slickR)

ui <- fixedPage(  
  fluidRow(
    slickROutput("slickr", width="500px")
  ) 
)

server <- function(input, output, session) {
  
  showModal(
    modalDialog(
      title = "Startup assistant",
      easyClose = FALSE,
      footer = NULL,
      glide(
        screen(
          p("Let's initialize some values, would you ?")
        ),
        screen(
          p("First, please select a mean value"),
          numericInput("mean_modal", "Mean", value = 0)
        ),
        screen(
          p("Then, please select a sd value"),
          numericInput("sd_modal", "SD", value = 0)
        )
      )
    )
  )
  
  png('image1.png'); plot(rnorm(100)); dev.off()
  png('image2.png'); plot(runif(100)); dev.off()
  output$slickr <- renderSlickR({
    slickR(c("image1.png",
             "image2.png"),
           height='400px',width='100%')
  })
  }

shinyApp(ui, server)

Displaying shinyglide in modal issue

Hi, when opening a modal containing a shinyglide it works fine the first time, but then not after that. You'll notice the buttons are not rendering or functioning correctly on the second time of clicking the action button.
Thanks

Tried using CRAN 0.1.3 and dev version 0.1.3.9

library(shiny)
library(shinyglide)

ui <- fixedPage(style = "max-width: 500px;",
                titlePanel("Simple shinyglide app"),
                
                actionButton(inputId = 'show', label = 'show')
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    hist(
      rnorm(input$n),
      main = paste("n =", input$n),
      xlab = ""
    )
  })
  
  observeEvent(input$show, ignoreInit = TRUE, {
    
    showModal(
      modalDialog(
        title = 'Glide', 
        fade = FALSE,
        glide(
          height = "350px",
          screen(
            p("This is a very simple shinyglide application."),
            p("Please click on Next to go to the next screen.")
          ),
          screen(
            p("Please choose a value."),
            numericInput("n", "n", value = 10, min = 10)
          ),
          screen(
            p("And here is the result."),
            plotOutput("plot")
          )
        )
      )
    )
    
  })
  
}

Swipe and drag not disabled when loading

In loading state, detectors are not toggled, so swipe and drag are still possible

Conflict with shinyBS modal

Hi,
I've found a problem using the bsModal() from the shinyBS package. Basically bsModals can be used but the code for the modal must stay outside the glide() function. Here's a reproducible example:

library(shiny)
library(shinyglide)
library(shinyBS)
ui <- fixedPage(
  h3("Simple shinyglide app"),
  glide(
    screen(
      p("First screen."),
      actionButton("gomodal", "go"),
      shinyBS::bsModal("modal1", "ok", trigger = "gomodal",
                       p("here is the modal"))

    ),
    screen(
      p("Second screen.")
    )
  )
)

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

shinyApp(ui, server)

And here's a working example where I moved bsModal outside the glide function:

library(shiny)
library(shinyglide)
library(shinyBS)
ui <- fixedPage(
  h3("Simple shinyglide app"),
  glide(
    screen(
      p("First screen."),
      actionButton("gomodal", "go")

    ),
    screen(
      p("Second screen.")
    )
  ),
  
  shinyBS::bsModal("modal1", "ok", trigger = "gomodal",
                   p("here is the modal"))
  
)

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

shinyApp(ui, server)

I tried to render the bsmodal inside a renderUI() function but the problem still persists if I put the uiOutput inside the glide function. It seems a minor problem (I can just move the bsmodal outside glide) but that's true for small modals. I use DataEditR package that uses a shinymodule with many options. The problem is that the ui part of the shinymodule contains both the trigger button and the bsModal and so can't be outside the glide function.

Is possible to send the user back to the first screen using a shiny::actionButton() that is positioned outside of shinyglide::screen()?

Hi,

I want to create a button that is positioned outside the shinyglide::screen's() that enables the user to reset the glide at any moment (any screen). One of the main requirements to reset is to send the user to the first screen.

I tried to use the code below but it only works inside some shinyglide::screen() and besides that I need it to be a shiny::actionButton() so that I can shiny::observeEvent() and execute other needed actions in my app during the reset.

div(`data-glide-el`="controls",
   tags$button(`data-glide-dir`="<<", href="#", "Back to start")
)

Also I checked the glide.js documentation and noticed that there is the following code that sends the user to the initial screen:

var glide = new Glide('.glide').mount()

glide.go('<<')

Is there any workaround to run this javascript code to control the shinyglide::glide() inside an shiny::observeEvent()?

Customize Next Button to add validations

Hi,

Is it possible to make validations when user clicks on Next and go to next screen only if the validations pass?

Buttons on left and right

Hi, first of all thank you for your fantastic package! It will greatily improve my shinyapps. I have two questions:

Is it possible to put the next button on the right and the previous button on the left? The default is only top and bottom, but I think a third options "on the sides" can be a very nice upgrade. The buttons could be in the middle of the screen() content.
Is it possible to change the animation of the transition? For example check the gif in this question:
https://stackoverflow.com/questions/73680535/nested-animated-conditionalpanel?noredirect=1#comment130119613_73680535
That would be my app. That solution was very beautiful, but it was a mess. Your package simplifies everything by a lot but if I can use the same transition I will be nicer.

Thanks!

"Refresh" or clear output of current screen when you navigate away

Hi, recently found your package, and thanks for developing it!

I was wondering if it's possible to "reset" inputs/outputs when you navigate away a screen.

For instance, if you have (using pseudocode here):

selectInput on Screen 1, buttons: Next
random HTML text on Screen 2, buttons: Previous, Next
print(input) on Screen 3, buttons: Previous, Return to first screen (<<)

How do you reset selectInput and print(input) on Screens 1 and 3 respectively when you navigate to away from those screens?

Create the glide screens dynamically

Hi, great package! Is it possible to create the glide screens dynamically?
Here's what I tried. It outputs a glide but not as expected.
Thank you

library(shinyglide)

ui <- fixedPage(
	h3("Simple shinyglide app"),
	
	uiOutput('glide_ui')
)

server <- function(input, output, session) {
	
	dynamic_list <- c('a', 'b')
	
	output$glide_ui <- renderUI({
		glide(
			tagList(
				for (i in 1:length(dynamic_list)) {
					screen(dynamic_list[i])
				}
			)
		)
	})
	
}

shinyApp(ui, server)

Is there an indicator of the number of slides?

In Glide.js there are translucent dots that indicate the number of slides and where you are in the order.

Does shinyglide have a similar indicator? If so, how do I turn it on?

Simple Example Without Indicator

library(shiny)
library(shinyglide)

ui <- fluidPage(
  titlePanel("Basic shinyglide app"),
  glide(
    next_label = paste("Next", icon("play", lib = "glyphicon")),
    previous_label = span(style = "opacity: 0.5;", "Previous"),
    
    screen(
      p("Image 1"),
      tags$img(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=This+is+slide+1")
    ),
    screen(
      p("Image 2"),
      tags$img(src = "https://placehold.it/900x500/39CCCC/ffffff&text=This+is+slide+2")
    )
  )
)

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

shinyApp(ui, server)

Documentation Request: where to place glideControls

The documentation for glideControls does not specify where the function is to be used. From this article it appears that the output ought to be saved to a variable outside of ui and server sections. Can the documentation be improved to provide more clarity?

Step through n screens when n is unknown

Hello, I'm trying to modify this example from SO. Code is below.

I'd like the user to step through each group in dat, subset the data to that group, and do something to that subset. In this case the user chooses a spline stiffness and the residuals are saved along with the smoothing parameter.

First, is using lapply a good way of going about this or is there a simpler way? And second, in the example below the data (dat) is loaded with the app. In my application, the user would choose between data sets with a varying number of groups making me think that I'd want to use screenOutput inside of renderUI but I'm unsure of how to go about that.

Is this something that shinyglide is good for?

library(shiny)
library(shinyglide)
library(tidyverse)

# what if the user loaded a different `dat` with 2 or 8 groups in z?
dat <- data.frame(x = rep(1:10,4),
                  y = rnorm(40),
                  z = rep(1:4,each=10))
nGroups <- 4
dat

ui <- fixedPage(style = "max-width: 500px;",
                titlePanel("Simple shinyglide app"),
                glide(
                  screen(
                    p("This is the intro screen")
                  ),
                  lapply(1:nGroups, function(i) {
                    screen(
                      p(paste0("Here you'd do something to the group ",i)),
                      numericInput(inputId = paste0("spar",i),
                                   label = "choose smooth param",
                                   value = 0.5,min = 0,max = 1,step = 0.1),
                      plotOutput(paste0("group",i,"Plot"))
                    )
                  }),
                  screen(
                    p("After all the groups are done you'd get to this screen."),
                    div(style = 'overflow-x: scroll',
                        verbatimTextOutput("summaryResults"))
                  )
                )
)

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

  outRV <- reactiveValues()
  # see if you can put this into a render UI and us screenOutput
  lapply(1:nGroups, function(i) {
    output[[paste0('group', i,'Plot')]] <- renderPlot({
      tmp <- dat %>% filter(z == i)
      tmp$ySm <- smooth.spline(tmp$y,spar = input[[paste0("spar",i)]])$y
      outRV[[paste0("spar",i)]] <- input[[paste0("spar",i)]]
      outRV[[paste0("resids",i)]] <- tmp$y - tmp$ySm

      res <- ggplot(tmp) +
        geom_line(aes(x=x,y=y)) +
        geom_line(aes(x=x,y=ySm),color="red")

      return(res)
    })
  })

  values <- reactive({
    reactiveValuesToList(outRV)
  })
  output$summaryResults <- renderPrint({
    values()
  })
}

shinyApp(ui, server)

Container resize does not resize contents

I'm sorry I don't have an easy reprex, but I think I can describe it well enough. I have a glide that works as expected except when the container is resized. I'm using shinydashboard and if the sidebar is opened or closed the screen contents maintain their original size instead of scaling with the box container. This ends up showing multiple screen contents on the same page. If the browser is resized, the contents will resize in that situation and the issue resolves.

Infobox/valuebox

I tried to use infobox and value box inside glide > screen but it doesn't keep the style of boxex

.

Glide failing to display correctly in Firefox

I have a Glide placed in a ShinyModal, that is displayed on the applications initiation.

In chrome, works perfect, in Firefox, it has issues, with all glide screens bunched up to the left hand side, non of the buttons work.

Can provide more context if needed.

Thanks.

Find out which screen is currently active

This is not an issue per se, but more of a question. Is there anyway to programmatically know which of the screens is currently active? I looked at the pkgdown website and I did not see anything to that effect. My apologies if I missed it.

In the example below, I give an id argument to the glide root element and try to check its content in the console; however, it returns NULL.

library(shiny)
library(bs4Dash)
library(shinyglide)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody(
      
      glide(
        id = "glider",
        screen(h1("First screen")),
        screen(h1("Second green"))
      ),
      
      actionButton("btn", "Click")
      
    )
  ),
  server = function(input, output) {
    
    observeEvent(input$btn, {
     
      print(input$glider)
      
    })
    
  }
)

glide isn't properly resized when a vertical scrollbar appears

Using shinyglide 0.1.3 (latest CRAN) the glide isn't properly resized when a vertical scrollbar appears.

Please see the following example and note the upper right part of the app (the right side of the upper wellPanel gets cut-off):

library(shiny)
library(shinyglide)
library(datasets)

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    sidebarPanel(
      radioButtons("test", "test", choices = c("show", "hide")),
      sliderInput("obs",
                  "Number of observations:",
                  min = 0,
                  max = 1000,
                  value = 500)
    ),
    mainPanel(
      glide(screen(wellPanel("First screen.")), screen(wellPanel("Second screen."))),
      p(),
      wellPanel("Another wellPanel."),
      conditionalPanel("input.test === 'show'",
                       tableOutput("iris_out"))
    )
  )
)

server <- function(input, output) {
  output$iris_out <- renderTable(iris)
}

shinyApp(ui, server)

resize shiny glide

I am trying to embed a highchart object into a shiny glide but I cannot figure out how to resize the glide object to make the highcharter object larger.

I have been able to adjust modalDialog height but cannot adjust width. And it looks like the highchart object is cut out before the adjust height was hit

any ideas

Jumping back to previous screen when next_condition is set

I posted this on stackoverflow, but have not received any answers, I don't know if it's my coding mistake or an issue with shinyglide (which is a great package, thank you for that!).

I have a shiny app in which a datatable is displayed and upon a click on a row, a modalDialog opens in which I embedded a glide. This worked fine until I introduced the next_condition to the second screen. Now whenever the first box is selected (or after deselecting everything and selecting again), the glide jumps back to the first screen. If I now change the option on the first screen, then the behaviour gets very strange altogether. My example (with Version 0.1.3.9000):

Code:

Library Calls:

library(shiny)
library(shinydashboard)
library(shinyBS)
library(shinyglide)
library(shinyWidgets)
library(shinyjs)
library(DT)

UI:

ui <- dashboardPage(skin = 'purple',
                    dashboardHeader(title = "Shinyglide Example"),
                    dashboardSidebar(disable = TRUE),
                    dashboardBody(
                        useShinyjs(),
                        tags$head(tags$style("#modal1 .modal-body {min-height:750px; padding: 10px}
                       #modal1 .modal-dialog { width: 1280px; height: 1280px;}"
                        )),
                        
                        fixedRow(
                            column(width = 12,
                                   box(title = "I am the table!",width = NULL,status = 'info',solidHeader = TRUE,
                                       DT::dataTableOutput("table")))
                        )
                    )
)

Setup Functions:

render_my_table <- function(){
    col_a <- c("A","B","C","D","E")
    col_b <- c("Human","Cat","Human","Dog","Dog")
    col_c <- c(35,7,42,5,11)
    col_d <- c("Earth","Earth","Earth","Earth","Mars")
    
    my_data <- data.frame(letter = col_a,species = col_b,age = col_c,planet = col_d)
    my_data <- datatable(my_data,colnames = c("ID","Species","Age","Home Planet"),rownames = FALSE,filter = 'top',selection = 'single',
                         callback = JS("table.on('click.dt','tr',function() {
                                        Shiny.onInputChange('rows',table.rows(this).data().toArray(),{priority:'event'});});"))
    return(my_data)
}

pickerinput_choices <- function(my_species){
    if(my_species == "Human"){
        return(c("Job","Family","Mortgage"))
    }else{
        return(c("Breed","Owner","Family"))
    }
}

advanced_inputs <- function(my_species,my_choiceA){
    
    if(is.null(my_choiceA)){return(0)}
    
    if(my_choiceA == "Job"){
        return(checkboxGroupInput("my_checkbox",label = "Type of Jobs",choices = c("Employed","Self-Employed","Apprenticeship")))
    }else if(my_choiceA == "Mortgage"){
        return(checkboxGroupInput("my_checkbox",label = "Type of Housing",choices = c("Apartment","House")))
    }else if(my_choiceA == "Breed"){
        return(checkboxGroupInput("my_checkbox",label = "Details",choices = c("Height","Fur","Weight")))
    }else if(my_choiceA == "Owner"){
        return(checkboxGroupInput("my_checkbox",label = "Details",choices = c("Age","Employed","Children")))
    }else{
        if(my_species == "Human"){
            return(checkboxGroupInput("my_checkbox",label = "Details",choices = c("Partner","Parents","Children","Siblings")))
        }else{
            return(checkboxGroupInput("my_checkbox",label = "Details",choices = c("Owner","Children","Owners of Children")))
        }
    }
}

Server:

server <- function(input, output,session) {
    
    glide_modal <- modalDialog(
        renderUI({title = tags$span(paste("You have chosen Row",input$rows[1]),style = "font-size: 20px; font-weight: bold")}),
        footer = NULL,
        easyClose = TRUE,
        glide(
            id = "my_glide",
            controls_position = 'bottom',
            height = "800px",
            screen(
                renderUI({
                    pickerInput(inputId = "my_pickerinput",h3("Make Choice A"),choices = pickerinput_choices(input$rows[2]),
                                options = pickerOptions(container = 'body'))
                })
            ),
            screen(
                renderUI({
                    tagList(
                        h3("Make Choice B"),
                        advanced_inputs(input$rows[2],input$my_pickerinput)
                    )
                }),
                next_condition = "(typeof input['my_checkbox'] !== 'undefined' && input['my_checkbox'].length > 0)"
            ),
            screen(
                renderText({
                    paste("You have selected row",input$rows[1],"which is a",input$rows[2],"and have requested information about",
                          input$my_pickerinput,", especially about",paste(input$my_checkbox,collapse = " and "))
                })
            )
        )
    )
    
    output$table <- DT::renderDataTable({
        render_my_table()
    })
    
    observeEvent(input$rows,{
        showModal(tags$div(id="modal1",glide_modal))
    })
}

and function call:

shinyApp(ui = ui, server = server)

Unexpected behavior with bs4Dash

The original poster of Issue #10 used the shinydashboard package, which is based on Bootstrap v.3. Their problem was fixed by the current dev version of the package. I use bs4Dash, which is based on Bootstrap v.4 and I suspect that this is the reason why my problem is not fixed by the current dev version.

For some reason, the "Next" and "Back" buttons get forced into the left side of the glide window (top or bottom depending on the controls_position argument).

library(shiny)
library(bs4Dash)
library(shinyglide)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody(
      
      glide(
        screen(h1("First screen")),
        screen(h1("Second green"))
      )
      
    )
  ),
  server = function(input, output) {}
)

Unexpected behavior with shinyDashboardPlus sidebar

Hi, Awesome package! I'm making a dashboard for showing different health topics using shinydashboardplus. I'm having an issue with different shinyglide screens not being hidden properly when the sidebar is closed.

See my attached code (R shiny app) and screenshots that illustrate the problem.

Thanks for any insights! --Neil

This one shows the problem when the sidebar is closed

This one is the expected behavior when the sidebar is open:

Shiny code here:

This is a Shiny web application. You can run the application by clicking

the 'Run App' button above.

Find out more about building applications with Shiny here:

http://shiny.rstudio.com/

library(shiny)
library(shinydashboard)
library(dashboardthemes)
library(shinydashboardPlus)
library(shinyWidgets)
library(shinyglide)

ui <- dashboardPagePlus(

sidebar_fullCollapse=TRUE,

dashboardHeaderPlus(

title = tagList(
  span(class = "logo-mini", icon("list")),
  "Explore Topics"
)

),
dashboardSidebar(

tags$style(
  "#sidebarItemExpanded {
        overflow: auto;
        height: calc(100vh - 50px) !important;
    }"
),

sidebarMenu(
  menuItem("COVID-19", tabName = "covid", icon = icon("viruses")),
  menuItem("Wildfire Smoke", tabName = "wildfire", icon = icon("fire-smoke")),
  menuItem("Tobacco Smoke", tabName = "tobacco", icon = icon("smoking"))
 )

),
dashboardBody(

#  Works in a real browser
#      can be thin or none
tags$head(
  tags$style(HTML("* {
                         scrollbar-width: thin;
                         }
                    .sidebar-menu > li > a {
                        padding-top: 6px;
                        padding-right: 5px;
                        padding-bottom: 6px;
                        padding-left: 15px;
                        display: block;
                    }
                   "
  )
  )
),

shinyDashboardThemes(
  theme = "grey_dark"
),

tabItems(

  tabItem(tabName="covid",

          h1("COVID-19"),

          glide(
            height = "100%",
            controls_position="top",
            screen(
              h2("Background"),
              h4("What is COVID-19?"),
              h4("How does it affect health?"),
              img(src='covid.jpg', align = "left",
                  width="400px")
            ),
            shinyglide::screen(
              h2("Questions"),
              flowLayout(
                box(title=span(icon("fingerprint", "fa-2x"),HTML("&nbsp;"), "How Does COVID-19 Spread?"),
                    p("What are the ways in which COVID-19 can spread."),
                    width=NULL, status="info", solidHeader = TRUE),
                box(width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("exchange-alt", "fa-2x"),HTML("&nbsp;"),"How do health measures affect transfer rates?"),
                    p("What is the population effect of distancing and masking?")),
                box(p("How many individual virus bodies are in a typical cough or sneeze?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("head-side-cough", "fa-2x"),HTML("&nbsp;"),"How much virus does a cough produce?")),
                box(p("Which masks are effective at protecting the wearer or those around them?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("head-side-mask", "fa-2x"),HTML("&nbsp;"),"Do Masks Help?")),
                box(p("How far from a person can the virus move?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("people-arrows", "fa-2x"),HTML("&nbsp;"),"How far is far enough?")),
                box(p("What is the chance of getting sick from an infected partygoer?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("birthday-cake", "fa-2x"),HTML("&nbsp;"),"How risky is having a party?")),
                box(p("How long does it take to air out a room?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("window-frame-open", "fa-2x"),HTML("&nbsp;"),"Does it stick around?")),
                box(p("What is the dissipation rate outdoors?"),
                    width=NULL,status="info",solidHeader = TRUE,
                    title=span(icon("trees", "fa-2x"),"How much exposure can occur outdoors?"))

              )

            ),
            shinyglide::screen(
              h2("Measures"),
              flowLayout(
                box(title=span(icon("wave-sine", "fa-2x"),HTML("&nbsp;"),
                               "Simulation"),
                    p("Perform simulation experiments of people and the environment."),
                    width=NULL, status="danger", solidHeader = TRUE),
                box(title=span(icon("gamepad-alt", "fa-2x"),HTML("&nbsp;"),
                               "Role playing game"),
                    p("Program and play a virtual reality game to explore different scenarios."),
                    width=NULL,status="danger",solidHeader = TRUE),
                box(title=span(icon("flask", "fa-2x"),HTML("&nbsp;"),
                               "Measure environment"),
                    p("Perform controlled experiments with aerosols or tracer chemicals."),
                    width=NULL,status="danger",solidHeader = TRUE)

              )
            ),
            shinyglide::screen(
              h2("Analysis and Visualization"),

              flowLayout(
                box(title=span(icon("tachometer-alt-fast", "fa-2x"),HTML("&nbsp;"),
                               "Create an Interactive Dashboard"),
                    p("Illustrate how different simulated or real factors affect outcomes."),
                    width=NULL, status="warning", solidHeader = TRUE),
                box(title=span(icon("function", "fa-2x"),HTML("&nbsp;"),
                               "Fit a Mathematical Model"),
                    p("Select and apply a model that describes the physical mechanism"),
                    width=NULL,status="warning",solidHeader = TRUE),
                box(title=span(icon("analytics", "fa-2x"),HTML("&nbsp;"),
                               "Fit a Statistical Model"),
                    p("Select and apply a model that describes the probability of different results."),
                    width=NULL,status="warning",solidHeader = TRUE)

              )
            )
          )

  ),

  tabItem(tabName="wildfire",

          h1("Wildfire Smoke")

  ),


  tabItem(tabName="tobacco",

          h1("Smoking"),


  )

 )

)
)

Define server logic required to draw a histogram

server <- function(input, output) {

}

Run the application

shinyApp(ui = ui, server = server)
`

gliderControls() missing default arguments

In attempting to modify only the lastButton, I am using gliderControls(). The function, however, fails indicating Error in dots_list(...) : argument "next_content" is missing, with no default.

In my server I have the below based on the vignette.

  controls <- glideControls(
    list(
      lastButton(class = "btn btn-success",
                 `data-dismiss` = "modal",
                 "Done")
    ))

Reopening an issue

I don't think I can reopen an issue so I just wanted to direct your attention back to shinyglide Conflicts with slickR #4. The bug is also present for modals that pop-up when a link is clicked. I have an example in the thread there.

"Race condition" in loading events

When the app is launched and a screen is rapidly displayed with a screenOutput after, the invalidated and value shiny events are messed up.

Why only the first glide works when create glides with `insertUI`

Hi,

The code below use insertUI to create a fixedPage with a glide inside.

I tried to change the id's dynamically because I thought it was generating some conflict but it had no effect.

library(shiny)
library(shinyglide)

ui <- fluidPage(actionButton("add_glide", "insert a glide"),
                tags$div(id = 'placeholder'))

server <- function(input, output, session) {
    
    observeEvent(input$add_glide, {
        
        insertUI(
            selector = "#placeholder",
            where = "afterEnd",
            ui = fixedPage(
                id = paste0("page_number_", input$add_glide),
                glide(
                    id = paste0("glide_number_", input$add_glide),
                    screen(p("First screen.")),
                    screen(p("Second screen."))
                )
            )
        )
        
    })
    
}

shinyApp(ui, server)

Resizing issues when sidebar toggled

When the sidebar of a dashboard app is toggled, glide screens are unable to resize properly

reload of glide() inside renderUI causes glide functionalities to disappear

Hi, I am trying to display a glide() window dynamically within a RenderUI statement to be able to customise it as required by different user specifications.

However, as soon as the UI output element is recalculated here, the entire glide functionality disappears. This includes the possibility to jump to other windows.

I am attaching a small minimal example in which this can be seen.

library(shiny)
library(shinyglide)


ui <- fixedPage(
  titlePanel("test shinyglide"),
  mainPanel(
    actionButton(inputId = "reload",label = "reload"),
    tags$br(),
    uiOutput(outputId = "glide_test_UI")
  )
)


server <- function(input, output, session) {
  
  output$glide_test_UI<-renderUI({
    input$reload
    glide(id = "test_glide",
      screen(
        tags$h4(runif(1,0,10)),
        p("Screen1")
      ),
      screen(
        p("Screen2")
      ),
      screen(
        p("Screen3")
      )
    )
  })
}

shinyApp(ui, server)

When loading the app for the first time, everything works and the interface looks like this:

After pressing reload, the Next button can no longer be pressed.
The interface then looks like this:

I appreciate any assistance you can give me.

Provide shiny input IDs for first and lastbutton

I'd like to be able to know if the modal pop up has been closed. It appears that there is no way to provide an input ID of some sort to the lastbutton. I'd like this to be able to submit values from the pop up after clicking submit.

Final Button "flashing" at startup

How to access the input of a previous screen?

Hello,

I would like to be able to use the selected value in a slider of a previous screen as a parameter of a successive screen ... is this possible?

For example, in the following case that I copy, I would like the second screen to be able to use in the argument 'min' the value retrieved in 'mean_modal'. I am using this modal on the server because it is activated when an actionButton is pressed (in case this influences).

Here the example:

glide_modal <- modalDialog(
title = "Startup assistant",
easyClose = FALSE,
footer = NULL,
glide(
custom_controls = modal_controls,
screen(
p("First, please select a mean value"),
numericInput("mean_modal",
"Mean",
value = 0)
),
screen(
p("Next, please select a standard deviation value"),
numericInput("sd_modal",
"Standard deviation",
value = 1,
min = input$mean_modal)
)
)
)

Thank you very much in advance!

Why the next_condition parameter in screenOutput() doesn't work the first time the screen is rendered?

Hi, thanks for this package. It's amazing!

Questions

Why when I click the "Next" button and then return to the first screen using the "Back" button, the condition works and I can't go forward until I click in at least one option, but the first time it does not work that way?

Explanation

I use insertUI() with a glide() inside it in the server function. To create the first screen of the glide I use screenOutput() and since shinyglide use the same syntax as conditionalPanel() the next_condition parameter is based in this conditionalPanel() example.

Code

# libraries
library(shiny)
library(shinyglide)
library(shinyjs)

# ui
ui <- fluidPage(useShinyjs(),
                tags$div(id = 'placeholder'),
                actionButton("btn",
                             "button"))

# server
server <- function(input, output, session) {
    # insertUI() when btn is clicked
    observeEvent(input$btn, {
        disable("btn")
        insertUI(selector = '#placeholder',
                 ui = tags$div(fixedPage(
                     glide(
                         id = "glide",
                         screenOutput(outputId = "screen",
                                      next_condition = "output['next_condition'] == 1"),
                         screen(p("Second screen."))
                     )
                 )))
    })
    
    # screenOutput() for the first screen
    output$screen <- renderUI({
        checkboxGroupInput("checkbox", "checkbox", list("A", "B"))
    })
    # condition to shinyglide works
    outputOptions(output, "screen", suspendWhenHidden = FALSE)
    
    # output variable in the server code that is used in argument 'next_condition' in screenOutput()
    output$next_condition <- reactive({
        if (isTruthy(input$checkbox)) {
            1
        } else {
            0
        }
        
    })
    # condition to output works
    outputOptions(output, "next_condition", suspendWhenHidden = FALSE)
    
}

shinyApp(ui, server)

selectizeInput Dropdown gets clipped off

Hey,

thank you very much for that useful shiny package.
I am using it currently in a Shiny Application in a modal dialog.
Everything worked fine so far.
However, I am using a selectizeInput with a dropdown within shinyglide in a modal dialog.
It is close to the bottom of the shinyglide/modal dialog element.
And the dropdown gets clipped off, so only half of the first entry of the dropdown is readable.
I think, it is due to that the selectizeInput is an element within shinyglide, but the dropdown spans beyond the modal dialog.
Shinyglide uses overflow : hidden. So, as far as I understand, everything spanning beyond the modal dialog gets clipped off or more specifically is hidden.
Thus, the selectizeInput is not really usable anymore. If I set overflow to visible, all other slides are already visible.
So, my question is, is this a bug or the desired behavior? Are there any fixes / adjustments I could do within the CSS file maybe?

Thank you very much in advance!

Touchscreen swipe action

Thanks for a wonderful library!

Ive just started using it today, created a small app to capture inputs from the user and then write to a database. It works fine on my mac, but when the app is accessed from my ipad the navigation between screens gets a bit buggy.

I use a button on the last screen to move back to the first page just like your demo app.

https://data.nozav.org/app/shinyglide/04_custom_controls/

This app shows the same behaviour on the tablet. If i swipe right until the last page, the 'reload' button takes me to the second page, sometimes to the correct page and other times its completely unstable.

Im not sure if this is related to the touch screen, but it it possible to disable swipe navigation as with keyboard navigation?

Thanks

Regards
Jan