爲閃亮的應用程序添加'正在處理的計算'指示器

我使用閃亮來構建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

爲閃亮的應用程序添加'正在處理的計算'指示器

回答

相關問題