为闪亮的应用程序添加'正在处理的计算'指示器

我使用闪亮来构建Web应用程序。某些步骤需要一些时间才能计算，所以我想在闪亮的应用程序中添加计算过程指示器。为闪亮的应用程序添加'正在处理的计算'指示器

我在堆栈溢出中找到了Show that Shiny is busy (or loading) when changing tab panels，但shinyIncubator程序包接缝需要指定最小值和最大值。

然后我发现这个博客：http://withr.me/blog/2014/01/03/add-calculation-in-process-indictor-for-shiny-application/他提供了一个很好的方法来做到这一点。

shinyUI(bootstrapPage(
    # Add custom CSS & Javascript; 
    tagList(
    tags$head(
     tags$link(rel="stylesheet", type="text/css",href="style.css"), 
     tags$script(type="text/javascript", src = "busy.js") 
    ) 
), 
    div(class = "busy", 
     p("Calculation in progress.."), 
     img(src="http://imageshack.us/a/img827/4092/ajaxloaderq.gif") 
), 
    div(class = "span4", uiOutput("obs")), 
    div(class = "span8", plotOutput("distPlot")) 
))

Java脚本;

setInterval(function(){ 
    if ($('html').attr('class')=='shiny-busy') { 
    setTimeout(function() { 
     if ($('html').attr('class')=='shiny-busy') { 
     $('div.busy').show() 
     } 
    }, 1000) 
    } else { 
    $('div.busy').hide() 
    } 
}, 100)

的style.css

div.busy { 
    position:absolute; 
    top: 40%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
    display:none; 
    background: rgba(230, 230, 230, .8); 
    text-align: center; 
    padding-top: 20px; 
    padding-left: 30px; 
    padding-bottom: 40px; 
    padding-right: 30px; 
    border-radius: 5px; 
}

所以我的问题是如何添加自定义的CSS和Javascript在我的UI文件？我试图创建两个单独的js和css文件，但指示符不断显示在左上角。然后我试图把这两段代码直接放在R中，而绝对是语法错误。谢谢！

问题解决：创建一个名为“www”的文件夹，并在其中放入两个文件。

来源

2014-03-31 Yoki

你究竟想要做什么？您是否希望进度指示符出现在页面中间？或者与您网页上的特定内容相一致？（我很好奇，因为我们目前正在设计什么进度指示看起来像是在Shiny 0.10中。） –

我试图在进行计算时将进度指示器显示在页面中间，然后消失。到目前为止，我得到的指标连续出现在左上角（我猜的默认地方），这意味着Java脚本和style.css不起作用。 – Yoki

将您的帖子误读为“我正在尝试构建一个闪亮的新Web应用程序”！ –

创建一个名为“www”的文件夹，并将这两个文件放入其中。

来源

2015-02-17 15:16:40 Yoki

为闪亮的应用程序添加'正在处理的计算'指示器

回答

相关问题