From 371787f68c33b87e078c40b977375ea60fcca9c3 Mon Sep 17 00:00:00 2001 From: Julien Barnier Date: Mon, 4 Mar 2024 18:29:09 +0100 Subject: [PATCH] doc: remove references to hosted shiny app --- README.md | 32 +++--- inst/examples/01_presentation/app.R | 146 +++++++++++-------------- inst/examples/02_simple/app.R | 13 +-- inst/examples/03_modal/app.R | 37 +++---- inst/examples/04_custom_controls/app.R | 71 ++++++------ inst/examples/05_multi_glides/app.R | 12 +- vignettes/b_conditionals.Rmd | 2 +- vignettes/c_custom_controls.Rmd | 5 +- 8 files changed, 147 insertions(+), 171 deletions(-) diff --git a/README.md b/README.md index bbece01..1132e2c 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,32 @@ # shinyglide + [![Lifecycle: stable](https://img.shields.io/badge/lifecycle-stable-brightgreen.svg)](https://lifecycle.r-lib.org/articles/stages.html) [![CRAN status](https://www.r-pkg.org/badges/version-ago/shinyglide)](https://cran.r-project.org/package=shinyglide) [![CRAN downloads](https://cranlogs.r-pkg.org/badges/shinyglide)](https://cran.r-project.org/package=shinyglide) [![R build status](https://github.com/juba/shinyglide/workflows/R-CMD-check/badge.svg)](https://github.com/juba/shinyglide/actions) + `shinyglide` is an R package which provides carousel-like or assistant-like components to [shiny](https://shiny.rstudio.com) applications, thanks to the [Glide](https://glidejs.com) JavaScript library. -It allows to create this sort of app ([live example](https://data.nozav.org/app/shinyglide/01_presentation/)) : +It allows to create this sort of app: ![presentation](man/figures/shinyglide_presentation.gif) -Or can be integrated into an existing app to create an "assistant-like" interface ([live example](https://data.nozav.org/app/shinyglide/03_modal/)): +Or can be integrated into an existing app to create an "assistant-like" interface: ![modal](man/figures/shinyglide_modal.gif) ## Features -- Responsive, navigation by mouse, keyboard, swiping -- Controls are completely customizable ([live example](https://data.nozav.org/app/shinyglide/04_custom_controls/)) -- *Next* and *Back* controls can be disabled until an input condition is met (same syntax as `shiny::conditionalPanel`) -- "Screens" can be generated or hidden depending on user inputs. Loading time are taken into accounts (disabled *Next* button and customizable animation) -- Integration with Shiny modal dialogs ([live example](https://data.nozav.org/app/shinyglide/03_modal/)) -- Multiple glides per app ([live example](https://data.nozav.org/app/shinyglide/05_multi_glides/)) +- Responsive, navigation by mouse, keyboard, swiping +- Controls are completely customizable +- _Next_ and _Back_ controls can be disabled until an input condition is met (same syntax as `shiny::conditionalPanel`) +- "Screens" can be generated or hidden depending on user inputs. Loading time are taken into accounts (disabled _Next_ button and customizable animation) +- Integration with Shiny modal dialogs +- Multiple glides per app ## Installation @@ -42,9 +44,9 @@ remotes::install_github("juba/shinyglide") ## Usage -A `shinyglide` component is created with the `glide()` function. This component is then divided intro *screens* with the `screen()` function. +A `shinyglide` component is created with the `glide()` function. This component is then divided intro _screens_ with the `screen()` function. -Here is the code of a very basic app ([live example](https://data.nozav.org/app/shinyglide/02_simple/)): +Here is the code of a very basic app : ```{r} library(shiny) @@ -89,9 +91,9 @@ shinyApp(ui, server) For more information, see the three available vignettes : -- [Introduction to shinyglide](https://juba.github.io/shinyglide/articles/a_introduction.html) -- [Conditional controls and screen output](https://juba.github.io/shinyglide/articles/b_conditionals.html) -- [Custom controls](https://juba.github.io/shinyglide/articles/c_custom_controls.html) +- [Introduction to shinyglide](https://juba.github.io/shinyglide/articles/a_introduction.html) +- [Conditional controls and screen output](https://juba.github.io/shinyglide/articles/b_conditionals.html) +- [Custom controls](https://juba.github.io/shinyglide/articles/c_custom_controls.html) ## Development notes @@ -117,5 +119,5 @@ packer::bundle_prod() ## Credits -- [Glide](https://glidejs.com/) JavaScript library, by [Jędrzej Chałubek](https://github.com/jedrzejchalubek) -- [packer](https://github.com/JohnCoene/packer) package by [John Coene](https://twitter.com/jdatap) +- [Glide](https://glidejs.com/) JavaScript library, by [Jędrzej Chałubek](https://github.com/jedrzejchalubek) +- [packer](https://github.com/JohnCoene/packer) package by [John Coene](https://twitter.com/jdatap) diff --git a/inst/examples/01_presentation/app.R b/inst/examples/01_presentation/app.R index 922be22..347df3b 100644 --- a/inst/examples/01_presentation/app.R +++ b/inst/examples/01_presentation/app.R @@ -1,5 +1,4 @@ ## shinyglide presentation app -## Live version at : https://data.nozav.org/app/shinyglide/01_presentation/ library(shiny) library(shinyglide) @@ -9,8 +8,8 @@ controls <- glideControls( list( nextButton(), lastButton( - class="btn btn-success", - href="https://juba.github.io/shinyglide", + class = "btn btn-success", + href = "https://juba.github.io/shinyglide", "Go to project website" ) ) @@ -53,118 +52,107 @@ ui <- fluidPage( tags$style(css) ), fluidRow( - div(class="glide-wrapper", + div( + class = "glide-wrapper", glide( custom_controls = controls, - screen( - h3("shinyglide presentation app"), p(HTML("This is an presentation app of shinyglide, an R package to make carousel-like or assistant-like or younameit-like shiny apps.")), p("Did you already install a program on Windows ? Yup, this is the same thing."), p(HTML("To continue, click Next, use keyboard arrows, or swipe if you're on mobile.")) ), - - screen( h3("Screens"), p(HTML("A glide component can be integrated into any shiny application. It is divided in screens. Each screen can contain anything you want, such as shiny inputs :")), numericInput("n", "n value :", value = 100) ), - screen( h3("Screens"), p(HTML("Or outputs :")), plotOutput("plot") ), - - screen( next_condition = "input.val > 0", - h3("Conditional controls"), p(HTML("Sometimes you don't want your user to be able to go to the next screen if a certain condition is not met. You can provide such a condition for the Back or the Next control.")), p(HTML("Here, the Next control gets a disabled status while the following input is 0 (you can choose to hide the control instead of disabling it).")), numericInput("val", "Value", value = 0, min = 0) ), - - screen( - h3("Screen output"), - p(HTML("Sometimes you want to generate a screen and to show it depending of user inputs. This is possible in `shinyglide` thanks to the `screenOutput` function."), - p(HTML("For example, check the following checkbox to get a next screen with a GIF :")), - div(class="bg-info", - checkboxInput("gif", "A GIF please !", value = FALSE) - ) - ), - screenOutput("gif_screen"), - screen( - h3("Screen output"), - p(HTML("When screen output computations takes long, the Next control is disabled and can show a loading label and a spinner. It comes back to its normal state when all the following screen outputs are updated.")), - p(HTML("For example, when you check the following checkbox, an artificial two seconds loading time is taken to display the next screen (yes, with another GIF).")), - div(class="bg-info", - checkboxInput("gif_loading", "Show me the spinner !", value = FALSE) - ) - ), - - screenOutput("gif_loading_screen"), - - screen( - h3("In app controls"), - p(HTML("You can add links or buttons inside your app that will act as a control to navigate between screens.")), - p(HTML("For example, the following link will go back one screen :")), - p(`data-glide-el`="controls", - a(`data-glide-dir`="<", href="#", "Go back") + p( + HTML("Sometimes you want to generate a screen and to show it depending of user inputs. This is possible in `shinyglide` thanks to the `screenOutput` function."), + p(HTML("For example, check the following checkbox to get a next screen with a GIF :")), + div( + class = "bg-info", + checkboxInput("gif", "A GIF please !", value = FALSE) + ) + ), + screenOutput("gif_screen"), + screen( + h3("Screen output"), + p(HTML("When screen output computations takes long, the Next control is disabled and can show a loading label and a spinner. It comes back to its normal state when all the following screen outputs are updated.")), + p(HTML("For example, when you check the following checkbox, an artificial two seconds loading time is taken to display the next screen (yes, with another GIF).")), + div( + class = "bg-info", + checkboxInput("gif_loading", "Show me the spinner !", value = FALSE) + ) + ), + screenOutput("gif_loading_screen"), + screen( + h3("In app controls"), + p(HTML("You can add links or buttons inside your app that will act as a control to navigate between screens.")), + p(HTML("For example, the following link will go back one screen :")), + p( + `data-glide-el` = "controls", + a(`data-glide-dir` = "<", href = "#", "Go back") + ), + p(HTML("And this link will go back all the way to the first screen :")), + p( + `data-glide-el` = "controls", + a(`data-glide-dir` = "<<", href = "#", "Let's start again") + ) ), - p(HTML("And this link will go back all the way to the first screen :")), - p(`data-glide-el`="controls", - a(`data-glide-dir`="<<", href="#", "Let's start again") + screen( + next_label = paste("Next one please !", icon("arrow-right", lib = "glyphicon")), + previous_label = "Let\'s go back", + h3("Custom controls"), + p(HTML("Default controls are created when you setup a glide. You can customize them by changing their label, either at glide or screen level.")), + p(HTML("Here, this screen has different labels than the other screens.")) + ), + screen( + h3("Custom controls"), + p(HTML("You can also provide a completely custom code for your controls, either manually or with some helpers functions.")), + p(HTML("The following app gives you an example of custom controls :")), + tags$a(href = "https://github.com/juba/shinyglide/tree/master/inst/examples/04_custom_controls", "Sample custom controls app") + ), + screen( + h3("That's about it !"), + p(HTML("Thanks for your attention. If you want to learn more and see other example apps, you can go to the "), a(href = "https://juba.github.io/shinyglide", "project website.")), + p(HTML("You can also take a look at "), a(href = "https://github.com/juba/shinyglide/blob/master/inst/examples/01_presentation/app.R", "this application source code.")) ) - ), - - screen( - next_label = paste("Next one please !", icon("arrow-right", lib="glyphicon")), - previous_label = "Let\'s go back", - - h3("Custom controls"), - p(HTML("Default controls are created when you setup a glide. You can customize them by changing their label, either at glide or screen level.")), - p(HTML("Here, this screen has different labels than the other screens.")) - ), - - screen( - h3("Custom controls"), - p(HTML("You can also provide a completely custom code for your controls, either manually or with some helpers functions.")), - p(HTML("The following app gives you an example of custom controls :")), - tags$a(href="https://data.nozav.org/app/shinyglide/04_custom_controls/", "Sample custom controls app") - ), - - - screen( - h3("That's about it !"), - - p(HTML("Thanks for your attention. If you want to learn more and see other example apps, you can go to the "), a(href="https://juba.github.io/shinyglide", "project website.")), - p(HTML("You can also take a look at "), a(href="https://github.com/juba/shinyglide/blob/master/inst/examples/01_presentation/app.R", "this application source code.")) + ) ) ) ) - ) -) ) server <- function(input, output, session) { - output$plot <- renderPlot({ hist(rnorm(input$n), main = paste("n =", input$n), xlab = "x") }) output$gif_screen <- renderUI({ - if(!(input$gif)) return(NULL) + if (!(input$gif)) { + return(NULL) + } list( h3("Here is your GIF"), - div(class = "text-center", - tags$img(src="https://media.giphy.com/media/5wWf7GW1AzV6pF3MaVW/giphy.gif") + div( + class = "text-center", + tags$img(src = "https://media.giphy.com/media/5wWf7GW1AzV6pF3MaVW/giphy.gif") ) ) }) @@ -172,20 +160,18 @@ server <- function(input, output, session) { output$gif_loading_screen <- renderUI({ Sys.sleep(2) - if(!(input$gif_loading)) return(NULL) + if (!(input$gif_loading)) { + return(NULL) + } list( h3("Here is another GIF"), - div(class = "text-center", - tags$img(src="https://media.giphy.com/media/rq6c5xD7leHW8/giphy.gif") + div( + class = "text-center", + tags$img(src = "https://media.giphy.com/media/rq6c5xD7leHW8/giphy.gif") ) ) }) outputOptions(output, "gif_loading_screen", suspendWhenHidden = FALSE) - - - - - } shinyApp(ui, server) diff --git a/inst/examples/02_simple/app.R b/inst/examples/02_simple/app.R index e84632f..9801a5b 100644 --- a/inst/examples/02_simple/app.R +++ b/inst/examples/02_simple/app.R @@ -1,18 +1,19 @@ ## shinyglide simple example app -## Live version at : https://data.nozav.org/app/shinyglide/02_simple/ library(shiny) library(shinyglide) -ui <- fixedPage(style = "max-width: 500px;", +ui <- fixedPage( + style = "max-width: 500px;", titlePanel("Simple shinyglide app"), - glide( height = "350px", screen( p("This is a very simple shinyglide application."), - p("It's source code is ", - tags$a(href = "https://github.com/juba/shinyglide/blob/master/inst/examples/02_simple/app.R", "available on GitHub.")), + p( + "It's source code is ", + tags$a(href = "https://github.com/juba/shinyglide/blob/master/inst/examples/02_simple/app.R", "available on GitHub.") + ), p("Please click on Next to go to the next screen.") ), screen( @@ -28,7 +29,6 @@ ui <- fixedPage(style = "max-width: 500px;", server <- function(input, output, session) { - output$plot <- renderPlot({ hist( rnorm(input$n), @@ -36,7 +36,6 @@ server <- function(input, output, session) { xlab = "" ) }) - } shinyApp(ui, server) diff --git a/inst/examples/03_modal/app.R b/inst/examples/03_modal/app.R index d10a48c..fd494cd 100644 --- a/inst/examples/03_modal/app.R +++ b/inst/examples/03_modal/app.R @@ -1,11 +1,9 @@ ## shinyglide modal example app -## Live version at : https://data.nozav.org/app/shinyglide/03_modal/ library(shiny) library(shinyglide) ui <- fixedPage( - titlePanel("shinyglide modal example"), sidebarLayout( sidebarPanel( @@ -23,27 +21,25 @@ ui <- fixedPage( plotOutput("plot") ) ) - ) server <- function(input, output, session) { - modal_controls <- glideControls( - list( - prevButton(), - firstButton( - class = "btn btn-danger", - `data-dismiss`="modal", - "No, thanks !" - ) - ), - list( - nextButton(), - lastButton( - class = "btn btn-success", - `data-dismiss`="modal", - "Done" + list( + prevButton(), + firstButton( + class = "btn btn-danger", + `data-dismiss` = "modal", + "No, thanks !" + ) + ), + list( + nextButton(), + lastButton( + class = "btn btn-success", + `data-dismiss` = "modal", + "Done" ) ) ) @@ -78,7 +74,8 @@ server <- function(input, output, session) { hist(rnorm(req(input$n), req(input$mean), req(input$sd)), main = "Such wow", xlab = "Wonderful x values", - ylab = "Incredible frequencies") + ylab = "Incredible frequencies" + ) }) observe({ @@ -88,8 +85,6 @@ server <- function(input, output, session) { observe({ updateNumericInput(session, "sd", value = input$sd_modal) }) - - } shinyApp(ui, server) diff --git a/inst/examples/04_custom_controls/app.R b/inst/examples/04_custom_controls/app.R index 417c927..f8b2fcb 100644 --- a/inst/examples/04_custom_controls/app.R +++ b/inst/examples/04_custom_controls/app.R @@ -1,20 +1,20 @@ ## shinyglide custom controls app -## Live version at : https://data.nozav.org/app/shinyglide/04_custom_controls/ library(shiny) library(shinyglide) controls <- tags$div( - tags$div(class="my-control prev-screen"), - tags$div(class="my-control next-screen"), - div(`data-glide-el`="controls", - tags$a( - class="my-control last-screen", - `data-glide-dir` = "<<", - icon("repeat", lib = "glyphicon") - ) + tags$div(class = "my-control prev-screen"), + tags$div(class = "my-control next-screen"), + div( + `data-glide-el` = "controls", + tags$a( + class = "my-control last-screen", + `data-glide-dir` = "<<", + icon("repeat", lib = "glyphicon") ) ) +) css <- " .container-fluid { @@ -78,7 +78,8 @@ ui <- fluidPage( titlePanel("shinyglide custom controls app"), fluidRow( p("This simple app shows an example of completely custom controls."), - p("Its source code is", + p( + "Its source code is", tags$a( href = "https://github.com/juba/shinyglide/blob/master/inst/examples/04_custom_controls/app.R", "available on GitHub" @@ -86,43 +87,38 @@ ui <- fluidPage( ) ), fluidRow( - glide( - next_label = icon("chevron-right", lib="glyphicon"), - previous_label = icon("chevron-left", lib="glyphicon"), - loading_label = icon("hourglass", lib="glyphicon"), - height = "300px", - swipe = TRUE, - custom_controls = controls, - - screen( - h3("First screen"), - p("Click the arrow to go to next screen") - ), - - screen( - h3("Second screen"), - p("Check the following checkbox to see the loading animation."), - checkboxInput("x", "Such wow !", value = FALSE) - ), - - screenOutput("loading_screen"), - - screen( - h3("Final screen"), - p("And... this is the end.") - ) + glide( + next_label = icon("chevron-right", lib = "glyphicon"), + previous_label = icon("chevron-left", lib = "glyphicon"), + loading_label = icon("hourglass", lib = "glyphicon"), + height = "300px", + swipe = TRUE, + custom_controls = controls, + screen( + h3("First screen"), + p("Click the arrow to go to next screen") + ), + screen( + h3("Second screen"), + p("Check the following checkbox to see the loading animation."), + checkboxInput("x", "Such wow !", value = FALSE) + ), + screenOutput("loading_screen"), + screen( + h3("Final screen"), + p("And... this is the end.") ) + ) ) ) server <- function(input, output, session) { - output$loading_screen <- renderUI({ Sys.sleep(2) list( h3("Custom controls"), - if(input$x) { + if (input$x) { p("Incredible, you checked the box !") } else { p("You unchecked the box, unbelievable !") @@ -130,7 +126,6 @@ server <- function(input, output, session) { ) }) outputOptions(output, "loading_screen", suspendWhenHidden = FALSE) - } shinyApp(ui, server) diff --git a/inst/examples/05_multi_glides/app.R b/inst/examples/05_multi_glides/app.R index dd9c573..297bbbd 100644 --- a/inst/examples/05_multi_glides/app.R +++ b/inst/examples/05_multi_glides/app.R @@ -1,5 +1,4 @@ ## shinyglide multi-glides example app -## Live version at : https://data.nozav.org/app/shinyglide/05_multi_glides/ library(shiny) library(shinyglide) @@ -22,7 +21,8 @@ ui <- fluidPage( ), titlePanel("Multi-glides shinyglide app"), fluidRow( - p("The source code of this app is", + p( + "The source code of this app is", tags$a( href = "https://github.com/juba/shinyglide/blob/master/inst/examples/05_multi_glides/app.R", "available on GitHub" @@ -31,7 +31,8 @@ ui <- fluidPage( ) ), fluidRow( - column(6, + column( + 6, h3("First glide"), glide( keyboard = FALSE, @@ -49,7 +50,8 @@ ui <- fluidPage( ) ) ), - column(6, + column( + 6, h3("Second glide"), glide( keyboard = FALSE, @@ -71,7 +73,6 @@ ui <- fluidPage( server <- function(input, output, session) { - output$plot <- renderPlot({ hist( rnorm(input$n), @@ -87,7 +88,6 @@ server <- function(input, output, session) { xlab = "" ) }) - } shinyApp(ui, server) diff --git a/vignettes/b_conditionals.Rmd b/vignettes/b_conditionals.Rmd index 2504d94..9de43d5 100644 --- a/vignettes/b_conditionals.Rmd +++ b/vignettes/b_conditionals.Rmd @@ -153,6 +153,6 @@ You can customize the loading label and animation with options passed to `glide( - `loading_class` (default value : `"loading"`) : a CSS class passed to the *Next* button when in loading state - `loading_label` : the label of the *Next* button while in loading state. This can be any HTML, and you can insert a `span(class = "shinyglide-spinner")` in it if you want to display the defautl animated spinner somewhere. -You can take a look at the [custom controls sample app](https://data.nozav.org/app/shinyglide/04_custom_controls/) for an example of loading customization with [custom controls](https://juba.github.io/shinyglide/articles/c_custom_controls.html) and CSS. +You can take a look at the [custom controls sample app](https://github.com/juba/shinyglide/tree/master/inst/examples/04_custom_controls) for an example of loading customization with [custom controls](https://juba.github.io/shinyglide/articles/c_custom_controls.html) and CSS. diff --git a/vignettes/c_custom_controls.Rmd b/vignettes/c_custom_controls.Rmd index 8e00de2..3993918 100644 --- a/vignettes/c_custom_controls.Rmd +++ b/vignettes/c_custom_controls.Rmd @@ -130,8 +130,7 @@ server <- function(input, output, session) { shinyApp(ui, server) ``` -You can also take a look at the [sample custom controls app](https://data.nozav.org/app/shinyglide/04_custom_controls/ -) and at its [source code](https://github.com/juba/shinyglide/blob/master/inst/examples/04_custom_controls/app.R) to see a way to implement a rather different controls styling and positioning. +You can also take a look at the [sample custom controls app](https://github.com/juba/shinyglide/blob/master/inst/examples/04_custom_controls/app.R) to see a way to implement a rather different controls styling and positioning. ## First and last buttons @@ -213,7 +212,7 @@ modal_controls <- glideControls( ``` -You can take a look at the [sample modal app](https://data.nozav.org/app/shinyglide/03_modal/) and at its [source code](https://github.com/juba/shinyglide/blob/master/inst/examples/03_modal/app.R) to see a full way to implement it. +You can take a look at the [sample modal app](https://github.com/juba/shinyglide/blob/master/inst/examples/03_modal/app.R) to see a full way to implement it.