R Shinyとp5.js

私はR Shinyを使ってWebページを開発しています。自分のRコードも含めています。R Shinyとp5.js

私は、Webページにゲームを表示するためにp5.js（https://p5js.org/）を使用しています。

公式のWebページにあるように、私は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からコードを実行しています。私はそれがされていると仮定されているように、私は、p5のjavascriptファイルでアラートを設定して以来、私のHTMLは、JavaScriptが呼ばれていることを知っているが、セットアップと描画の方法の外では、問題は、警告がロードされているにもかかわらず、セットアップのように見え、描画メソッドが呼び出されず、明らかに結果としてキャンバスが読み込まれないということです。 R-Studioから同じファイルを実行しても、HTMLファイルを直接実行するセットアップ方法で警告が表示されるため、呼び出されていないことがわかります。

ここではjavascriptのコードP5である：私はコード

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

の次の行を使用してシャイニーにHTMLページをロードする

alert("GOOD1"); 

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

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

は、私が対応しているタグに「processingMasterThesis」を添付しserver.R内のHTMLファイルへのURL。問題はここにはないはずです。

なぜこの原因が考えられますか？ブラウザでロードするHTMLファイルを直接呼び出すと動作しますが、R-Studioから実行する場合は動作しません。なぜですか？

出典

2016-07-29 EaglesAzul

JavaScriptコンソールでエラーが発生しましたか？ –

こんにちは@ケビン・ワーカー、お返事ありがとうございます。 Webページをロードしようとすると、この警告が表示されます。 'メインスレッド上の同期XMLHttpRequestは、エンドユーザの経験に悪影響を与えるため、非推奨です。詳細については、https：// xhr.spec.whatwg.org/.'をご覧ください。私のjavascriptファイルでは、このリクエストコールを直接使用しませんが、おそらくp5jsライブラリは内部的に行います。これは問題だと思われますが、そうであればRStudioからWebページ（実際にはRStudioから実行されるのはui.Rファイルです）を実行すると、なぜこのエラーが発生するのですか？右クリック？ – EaglesAzul

私はこの問題を解決しました。まず、p5jsファイルに変数を作成して、HTMLから参照できるようにしなければなりません。canvas = createCanvas（640、480）;と言うことができます。グローバル変数を宣言したら、その変数を親に伝える必要があります。myCanvas.parent（ "divCanvas"）;と言うことができます。＃UI UI 、タグ$ html（tags $ body（ tags $ head（tags = $ script（src = "app/libraries/p5.js）"このようなコードを光沢のある、または純粋なhtmlで作成する必要があります。 "）、タグ$ head（tags $ script（src =" app/sketch.js "））、タグ$ div（id = 'divCanvas'） – EaglesAzul

私はこの問題を解決しました。 P5ジャバスクリプトコードは次のようになります。

// ===================== 
// "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); 
}

あなたが例を実行する必要があるライブラリが、私はそれがあるので、HTMLのdiv要素を参照するIDを作成しているこのJavaScriptファイルでhttps://p5js.org/

で見つけることができます私がキャンバスを置く場所。これが完了すると、残りの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')) 
)) 
) 
)

を。最初の "head"行にはライブラリp5.jsが含まれ、2番目の "head"行には "これは私のp5スクリプトファイルです"と "divCanvasは私が印刷するdivになります"と表示されます。

javascriptファイルへの参照に問題がある可能性があります。私はあなたのルートの光沢のあるアプリケーションでwwwフォルダを作成する必要があることに注意する価値があると思います。このフォルダには、javascriptファイルを置く必要があります。これは助けることができる

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

希望：たとえば、として、あなたは私のコードでは、私は次のパスをたどる使用しています2つのJavaScriptファイルを見ることができます！

出典

2016-08-11 14:03:09 EaglesAzul

これについてちょっと詳しく説明できますか？私はそれを得ると思いますが、 'ui.R'の出力型についてはっきりしていません... UIの構造をもう少し詳しく記入することができますか？htmlOutput例えば？ – Hendy

おはようございます、あなたはちょうど頭の中に設定する必要があるjavascriptファイルからキャンバスを保存し、それへの参照を作成するdivのようなタグが必要です。これは答えです。RShinyからP5.jsを直接実行することができます。もちろん、答えを示すディレクトリにjavascriptファイルを置いて、それを動作させる必要があります。 – EaglesAzul

答えて

関連する問題