Introduction
Are you bored or annoyed of shinyapps.io message "Disconnected from the server"? This message occurs because of inactivity in the app (idle state) for a long period of time or some programming error which may cause R session to shut down. If your app is in production you may also get escalation or stinkers from your client. At that time it is important to improve user experience via some creative methods. If you would be lucky you may get appreciation instead of escalation :-)
You can make the error message more fun by showing game in the screen when app is down (How about corona game?). This also works on your local machine or shiny server (not just shinyapps.io). Check out the demo app hosted on shinyapps.io
You can checkout the package named shinyGames which shows you how you can add and play games in your shiny app
Steps to show game
Follow the steps below how to implement it in shiny.
Step 1
Copy the following program and paste it in R editor and save it as app.R
library(shiny) # Define UI ---- ui <- fluidPage( tags$head(tags$style("#shiny-disconnected-overlay {display: none !important} #ss-overlay {display: none !important} #ss-connect-dialog {display: none !important}")), tags$script(" $(function() {$(document).on('shiny:disconnected shiny:error', function(event) { $('.container-fluid').load('./game2.html'); }) }); "), actionButton("disconnect", "Disconnect the app") ) server <- function(input, output, session) { observeEvent(input$disconnect, { session$close() }) } shinyApp(ui, server)
Step 2
Download supporting files from here and create www
folder in the same location where app.R
file is stored. Maintain the below folder structure.
├── app.R └── www └── 100-error-offline.png └── 100-offline-sprite.png └── 200-error-offline.png └── 200-offline-sprite.png └── game2.htmlOnce you are done with the above two steps, just run the
app.R
. In the app screen, click on Disconnect the app
button to see game.
How to play game
Press "Space" to start the game and jump your corona icon. Use down arrow (↓) to duck.
Thanks for the code snippet! However this doesn't work under a dashboardBody(). Any suggestions?
ReplyDeleteExample of what's not working under shinydashboard:
ReplyDeletelibrary(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$script("
$(function() {$(document).on('shiny:disconnected shiny:error', function(event) {
$('.container-fluid').load('./test.html');
}) });
"),
actionButton("disconnect", "Disconnect the app")
)
)
server <- function(input, output, session) {
observeEvent(input$disconnect, {
session$close()
})
}
shinyApp(ui, server)
Thanks. Where are style tags in your code to include CSS?
ReplyDelete