R Shiny和p5.js

我使用R Shiny開發網頁並且還包含自己的R代碼。R Shiny和p5.js

我使用p5.js（https://p5js.org/）在網頁中顯示遊戲。

在官方網頁上說我有一個HTML和P5 JavaScript代碼連同JavaScript庫。如果我運行HTML，也就是說，單擊右鍵並按下chrome來顯示，我可以看到已啓動的示例（https://p5js.org/get-started/），沒有發生。

這是HTML代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">--> 
    <script language="javascript" type="text/javascript" src="libraries/p5.js"> </script> 
    <script language="javascript" type="text/javascript" src="sketch.js"></script> 
    <!-- this line removes any default padding and style. you might only need one of these values set. --> 
    <style> body {padding: 0; margin: 0;} </style> 
</head> 
<body> 

</body> 
</html>

當我做閃亮一樣，從運行R-Studio中的代碼，我沒有得到任何東西。我已將JavaScript文件存儲在www文件夾中，因爲它應該是這樣，我當前知道我的HTML稱爲JavaScript，因爲我在p5 javascript文件中設置了警報，但在安裝和繪製方法之外。問題是，即使加載了警報，似乎沒有調用setup和draw方法，顯然，它們不會加載畫布。我知道它們沒有被調用，因爲我在setup方法中調用了一個警告，該方法直接運行HTML文件，但是如果我從R-Studio運行相同的文件，則不會。

這是JavaScript代碼P5：

alert("GOOD1"); 

function setup() { 
    alert("GOOD2"); 
    createCanvas(640, 480); 
} 

function draw() { 
    if (mouseIsPressed) {fill(0);} 
    else {fill(255);} 
    ellipse(mouseX, mouseY, 80, 80); 
}

我使用的下一行代碼

... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...

附加到標籤「processingMasterThesis」我相應的閃亮加載HTML頁面在server.R中的HTML文件的URL，因爲它應該是這樣的問題不在這裏。

爲什麼可能是這個原因？如果我直接調用HTML文件以在瀏覽器中加載，但如果我從R-Studio執行操作，那麼這起作用，爲什麼？

來源

2016-07-29 EaglesAzul

您是否在JavaScript控制檯中遇到任何錯誤？ –

嗨@Kevin Workman，謝謝你的回答。當我嘗試加載網頁時出現此警告：'主線程上的同步XMLHttpRequest已被棄用，因爲它對最終用戶的體驗有不利影響。如需更多幫助，請查看https：// xhr.spec.whatwg.org /。在我的JavaScript文件中，我不直接使用這個請求調用，但也許p5js庫在內部執行。這似乎是問題在這裏，但如果它是這樣的，爲什麼我從RStudio網頁（我實際從RStudio運行的是ui.R文件）運行時出現此錯誤，而不是當我加載HTML文件右鍵點擊？ – EaglesAzul

我已經解決了這個問題。首先，我必須在p5js文件中創建一個可以從HTML引用的變量，例如canvas = createCanvas（640，480）;.一旦我聲明瞭全局變量，我只需告訴它的父項，讓我們說myCanvas.parent（「divCanvas」）;.在此之後，您只需創建一個閃亮或純粹的html代碼，如下所示：＃THE UI ，tags $ html（tags $ body（ tags $ head（tags $ script（src =「app/libraries/p5.js 「）），tags $ head（tags $ script（src =」app/sketch.js「）），tags $ div（id ='divCanvas'））） – EaglesAzul

我已經解決了這個問題。五常Java腳本代碼將是：

// ===================== 
// "app/sketch.js" 
// ===================== 
var myCanvas; 

function setup() { 
    var idCanvas = 'divCanvas'; 
    myCanvas = createCanvas(300, 300); 
    myCanvas.parent(idCanvas); 
} 

function draw() { 
    if (mouseIsPressed) { 
    fill(0); 
    } else { 
    fill(255); 
    } 
    ellipse(mouseX, mouseY, 80, 80); 
}

你需要運行的例子可以在https://p5js.org/

在此JavaScript文件我已經創建了一個引用一個HTML div元素的ID，以便爲找到庫我將設置畫布的地方。一旦完成，其餘的JavaScript代碼將完美編碼。重點在於引用畫布的父級是該div，就像您在代碼中看到的那樣。

此之後，你只需要創建無論是在光亮或純HTML代碼是這樣的：

# THE UI (File ui.R) 
library(shiny) 
library(shinydashboard) 
library(rmarkdown) 

shinyUI(
fluidRow(
    # THE UI 
    tags$html(
    tags$body(
    singleton(tags$head(tags$script(src = "master_thesis/app/libraries/p5.js"))) 
    ,singleton(tags$head(tags$script(src = "master_thesis/app/sketch.js"))) 
    ,singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto')) 
)) 
) 
)

，我下面展示的是閃亮的代碼。第一個「頭」線包括圖書館p5.js和第二個「頭」線只是說「嘿，這是我的p5腳本文件」和「divCanvas將是我將打印的div」。

您可能對JavaScript文件的引用有問題。我認爲值得注意的是，你必須在你的根發光應用程序中創建一個www文件夾。在這個文件夾中，你必須把你的JavaScript文件。例如，您可以在我的代碼中看到我使用的兩個JavaScript文件遵循下一條路徑：

ShinyApplication/www/app/libraries/p5.js 
ShinyApplication/www/app/sketch.js

希望這可以幫助！

來源

2016-08-11 14:03:09 EaglesAzul

你能詳細說明這一點嗎？我想我明白了，但是對於'ui.R'的輸出類型我不清楚...你能否更多地填充UI的結構，比如這些參數的位置，如果需要'htmlOutput'例如？ – Hendy

早上好@Hendy，你只需要一個像div一樣的標籤來存儲畫布，並從JavaScript文件中引用它，這些文件必須先在頭部設置。使用當前代碼，這就是答案，您可以直接從RShiny運行P5.js。當然，您必須將javascript文件放在我在答案中指出的目錄中以使其正常工作。 – EaglesAzul

R Shiny和p5.js

回答

相關問題