add gifs

README.md

@@ -1,4 +1,2 @@
 R shiny tricks (shinyjs - reset inputs, disable, hide), global.R, 
-global.R, splitting off big ui/server into files
-
-show custom message when the'res an error in a reactive context
+global.R, splitting off big ui/server into files

error-custom-message/README.md

@@ -0,0 +1,5 @@
+# Show user a generic error message when a Shiny error occurs inan output
+
+*Dean Attali, July 2015*
+
+When a Shiny output encounters an error, the exact error message will be shown to the user in place of the output. This is generally a good feature because it's easier to debug when you know the exact error. But sometimes this is undesireable if you want to keep the specifics of what happened unknown to the user, and you prefer to just show the user a generic "Some error occurred; please contact us" message. This may sound counter intuitive, but you can actually do this with a tiny bit of CSS, as this example shows.

error-custom-message/app.R

@@ -1,8 +1,13 @@
+css <- "
+.shiny-output-error { visibility: hidden; }
+.shiny-output-error:before {
+  visibility: visible;
+  content: 'An error occurred. Please contact the admin.'; }
+}
+"
+
 ui <- fluidPage(
-  tags$style(type="text/css",
-             ".shiny-output-error { visibility: hidden; }",
-             ".shiny-output-error:before { visibility: visible; content: 'An error occurred. Please contact the admin.'; }"
-  ),
+  tags$style(type="text/css", css),
   textOutput("text1"),
   textOutput("text2")
 )

hide-tab/README.md

@@ -4,4 +4,6 @@
 
 This app demonstrates how `shinyjs` can be used to hide/show a specific tab in a `tabsetPanel`.  In order to use this trick, the `tabsetPanel` must have an id. Using this id and the value of the specific tab you want to hide/show, you can call `shinyjs::hide()`/`shinyjs::show()`/`shinyjs::toggle()`.
 
-This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to show/hide the tab.
+This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to show/hide the tab.
+
+[![Demo](./hide-tab.gif)](./hide-tab.gif)

loading-screen/README.md

@@ -4,4 +4,6 @@
 
 This simple app shows how to add a "Loading..." screen overlaying the main app while the app's server is initializing.  The main idea is to include an overlay element that covers the entire app (using CSS), hide the main app's UI, and at the end of the server function show the UI and hide the overlay.
 
-This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to show/hide elements.
+This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to show/hide elements.
+
+[![Demo](./loading-screen.gif)](./loading-screen.gif)

multiple-pages/README.md

@@ -4,4 +4,6 @@
 
 This app demonstrates how to write a Shiny app that has a sequence of different pages, where the user can navigate to the next/previous page. This can be useful in many scenarios that involve a multi-step process. This behaviour can also be achieved by simply using tabs, but when using tabs the user can freely move from any tab to any other tab, while this approach restricts the user to only move to the previous/next step, and can also control when the user can move on to the next page (by enabling/disabling the navigation buttons using `shinyjs::enable` and `shinyjs::disable`).
 
-This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to show/hide the pages and to enable/disable the buttons.
+This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to show/hide the pages and to enable/disable the buttons.
+
+[![Demo](./multiple-pages.gif)](./multiple-pages.gif)

navigate-history/README.md

@@ -18,4 +18,6 @@ For example, try this sequence of events to see what this app can do:
 
 The code is a bit complex and might take some time to understand how it works. This is certainly not an ideal solution, I'd love to know if someone has a nicer method for navigating a Shiny app. It's possible that the core Shiny team will work on this and that soon this functionality will be native to shiny.
 
-This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to call custom JavaScript functions.
+This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package to call custom JavaScript functions.
+
+[![Demo](./navigate-history.gif)](./navigate-history.gif)

plot-spinner/README.md

@@ -4,4 +4,6 @@
 
 When a Shiny plot is recalculating, the plot gets grayed out. This app shows how you can add a spinner wheel on top of the plot while it is recalculating, to make it clear to the user that the plot is reloading. There can be many different ways to achieve a similar result using different combinations of HTML/CSS, this is just the simplest one I came up with.
 
-The idea is to place a spinner image in the same container as the plot, center it, and give it a below-default z-index. Whenever the plot is recalculting, make the plot's z-index even lower so that the spinner will show.
+The idea is to place a spinner image in the same container as the plot, center it, and give it a below-default z-index. Whenever the plot is recalculting, make the plot's z-index even lower so that the spinner will show.
+
+[![Demo](./plot-spinner.gif)](./plot-spinner.gif)

select-input-large/README.md

@@ -2,4 +2,6 @@
 
 *Dean Attali, July 2015*
 
-One common CSS question in Shiny is how to make the select input dropdown menu have some more whitespace.  It's actually very easy to do with just two CSS rules, as demonstrated in this example.
+One common CSS question in Shiny is how to make the select input dropdown menu have some more whitespace.  It's actually very easy to do with just two CSS rules, as demonstrated in this example.
+
+[![Demo](./selectize-large.gif)](./selectize-large.gif)

serve-images-files/README.md

@@ -6,4 +6,6 @@ It is possible to serve an image or another file directly from your Shiny app in
 
 The main idea is to use `session$clientData$registerDataObj` to associate a file with a specific endpoint URL. Since this URL is generated dynamically and cannot be used by the user before accessing the app, the Shiny app automatically redirects the user to the requested file after generating it and figuring out the URL internally.
 
-This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package.
+This example makes use of the [shinyjs](https://github.com/daattali/shinyjs) package.
+
+[![Demo](./serve-images-files.gif)](./serve-images-files.gif)

shinydashboard-sidebar-hide/README.md

@@ -4,4 +4,6 @@
 
 A common question regarding `shinydashboard` is how to programatically hide/show the sidebar.
 
-To solve this problem, I first looked at the HTML and tried to see what happens when the button to toggle the sidebar is clicked. It seems like the `<body>` HTML tag gains and loses a CSS class "sidebar-collapse" when the toggle button is clicked. Therefore, all we have to do to show/hide the sidebar is simply remove/add that class to the document's body tag. This can easily be done using the [shinyjs](https://github.com/daattali/shinyjs) package.
+To solve this problem, I first looked at the HTML and tried to see what happens when the button to toggle the sidebar is clicked. It seems like the `<body>` HTML tag gains and loses a CSS class "sidebar-collapse" when the toggle button is clicked. Therefore, all we have to do to show/hide the sidebar is simply remove/add that class to the document's body tag. This can easily be done using the [shinyjs](https://github.com/daattali/shinyjs) package.
+
+[![Demo](./shinydashboard-sidebar-hide.gif)](./shinydashboard-sidebar-hide.gif)

url-inputs/README.md

@@ -2,4 +2,6 @@
 
 *Dean Attali, July 2015*
 
-This simple app demonstrates how you can fill out certain input fields when a Shiny app loads based on URL parameters.
+This simple app demonstrates how you can fill out certain input fields when a Shiny app loads based on URL parameters.
+
+[![Demo](./url-inputs.gif)](./url-inputs.gif)