Skip to content

Commit

Permalink
doc: remove references to hosted shiny app
Browse files Browse the repository at this point in the history
  • Loading branch information
@juba
juba committed Mar 4, 2024
1 parent 89b773d commit 371787f
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 171 deletions.
32 changes: 17 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
# shinyglide

<!-- badges: start -->

[![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)

<!-- badges: end -->

`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

Expand All @@ -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)
Expand Down Expand Up @@ -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

Expand All @@ -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)
146 changes: 66 additions & 80 deletions inst/examples/01_presentation/app.R
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
## shinyglide presentation app
## Live version at : https://data.nozav.org/app/shinyglide/01_presentation/

library(shiny)
library(shinyglide)
Expand All @@ -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"
)
)
Expand Down Expand Up @@ -53,139 +52,126 @@ 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 <code>shinyglide</code>, an R package to make carousel-like or assistant-like or younameit-like <a href='https://shiny.rstudio.com/'>shiny apps</a>.")),
p("Did you already install a program on Windows ? Yup, this is the same thing."),
p(HTML("To continue, click <em>Next</em>, use keyboard arrows, or swipe if you're on mobile."))
),


screen(
h3("Screens"),
p(HTML("A <code>glide</code> 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 <em>Back</em> or the <em>Next</em> control.")),
p(HTML("Here, the <em>Next</em> control gets a <em>disabled</em> 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&nbsp;:")),
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 <em>Next</em> 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&nbsp;:")),
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&nbsp;:")),
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 <em>Next</em> 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&nbsp;:")),
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&nbsp;:")),
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&nbsp;:")),
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 <code>glide</code>. 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&nbsp;:")),
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 <code>glide</code>. 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&nbsp;:")),
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")
)
)
})
outputOptions(output, "gif_screen", suspendWhenHidden = FALSE)

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)
13 changes: 6 additions & 7 deletions inst/examples/02_simple/app.R
View file
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -28,15 +29,13 @@ ui <- fixedPage(style = "max-width: 500px;",


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

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

}

shinyApp(ui, server)
Loading

0 comments on commit 371787f

Please sign in to comment.