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

回答

相关问题