R Shiny und p5.js

Ich benutze R Shiny, um eine Webseite zu entwickeln und auch meinen eigenen R-Code.R Shiny und p5.js

Ich benutze p5.js (https://p5js.org/), um ein Spiel auf der Webseite anzuzeigen.

Wie auf der offiziellen Webseite sagt, habe ich einen HTML und den p5 Javascript Code zusammen mit der Javascript Bibliothek. Wenn ich den HTML-Code ausführe, dh wenn ich nach rechts klicke und auf Chrom drücke, um anzuzeigen, bekomme ich das gestartete Beispiel (https://p5js.org/get-started/) ohne Einfall.

Hier ist es der HTML-Code:

<!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>

Wenn ich das gleiche in Shiny tun, den Code von R-Studio laufe ich etwas von ihm nicht bekommen. Ich habe die Javascript-Dateien im www-Ordner gespeichert, wie es sein soll und ich weiß derzeit, dass mein HTML das Javascript aufgerufen hat, da ich eine Warnung in der p5-Javascript-Datei, aber außerhalb der Setup- und Zeichenmethoden eingestellt habe. Das Problem ist, dass, obwohl die Warnung geladen ist, die Setup- und Draw-Methoden anscheinend nicht aufgerufen werden, und als Konsequenz wird die Canvas nicht geladen. Ich weiß, dass sie nicht aufgerufen werden, weil ich eine Warnung in der Setup-Methode aufgerufen habe, die die HTML-Datei direkt ausführt, aber nicht, wenn ich dieselbe Datei von R-Studio aus laufe.

Hier ist es die p5 JavaScript-Code:

alert("GOOD1"); 

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

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

ich die HTML-Seite in Shiny laden mit der nächsten Codezeile

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

dem Tag anhängen "processingMasterThesis" Ich habe die entsprechenden URL zu der HTML-Datei im Server.R, wie es sein soll, so ist das Problem nicht hier.

Warum kann die Ursache dafür sein? Es funktioniert, wenn ich die HTML-Datei direkt im Browser lade, aber nicht, wenn ich es aus R-Studio mache, warum?

Quelle

2016-07-29 EaglesAzul

Haben Sie Fehler in der JavaScript-Konsole? –

Hi @Kevin Workman, danke fürs Antworten. Ich erhalte diese Warnung, wenn ich versuche, die Webseite zu laden: 'Synchrone XMLHttpRequest auf dem Hauptthread ist wegen seiner schädlichen Auswirkungen auf die Erfahrung des Endbenutzers veraltet. Weitere Hilfe finden Sie unter https: // xhr.spec.whatwg.org/.'. In meiner Javascript-Datei verwende ich diesen Aufruf nicht direkt, aber vielleicht tut die p5js-Bibliothek intern. Es scheint, das Problem ist hier, aber wenn es so ist, warum bekomme ich diesen Fehler, wenn ich von RStudio die Webseite (was ich eigentlich von RStudio laufen, ist die ui.R-Datei) und nicht, wenn ich die HTML-Datei mit einem Rechtsklick? – EaglesAzul

Ich habe das Problem gelöst. Zuerst muss ich eine Variable in der p5js-Datei erstellen, die ich aus dem HTML referenzieren kann, sagen wir canvas = createCanvas (640, 480) ;. Sobald ich meine globale Variable deklariert habe, muss ich ihr nur ihre Eltern sagen, sagen wir myCanvas.parent ("divCanvas") ;. Danach müssen Sie nur in glänzendem oder reinem HTML einen Code wie diesen erstellen: # 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

Ich habe das Problem gelöst. Der p5 Java-Script-Code wird sein:

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

Die Bibliothek Sie müssen das Beispiel auszuführen kann bei https://p5js.org/

In dieser JavaScript-Datei Ich habe eine ID, die ein HTML-div-Element Referenz erstellt gefunden werden, so dass ist der Ort, an den ich meine Leinwand setzen werde. Sobald dies erledigt ist, wird der Rest des Javascript-Codes perfekt codieren. Der Punkt besteht darin, darauf zu verweisen, dass das übergeordnete Element der Arbeitsfläche das Div ist, wie Sie im Code sehen können.

Danach müssen Sie nur noch schaffen, entweder in glänzend oder reinen HTML-Code, so etwas wie dieses:

# 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')) 
)) 
) 
)

Der Code, den ich unten zeigen in glänzend ist. Die erste "Kopfzeile" enthält die Bibliothek p5.js und die zweite "Kopfzeile" sagt einfach "Hey, das ist meine p5-Skriptdatei" und "divCanvas wird das Div, auf dem ich drucken werde".

Möglicherweise haben Sie Probleme mit den Verweisen auf die Javascript-Datei. Ich denke, es ist erwähnenswert, dass Sie in Ihrer root-glänzenden Anwendung einen www-Ordner erstellen müssen. In diesem Ordner müssen Sie Ihre Javascript-Dateien ablegen.Zum Beispiel, wie können Sie in meinem Code, um die zwei Javascript-Dateien, die ich verwende den nächsten Pfad folgen:

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

Hope this helfen können!

Quelle

2016-08-11 14:03:09 EaglesAzul

Könntest du etwas näher darauf eingehen? Ich denke, ich verstehe, aber ich bin nicht klar über die Art der Ausgabe für "ui.R" ... Könnten Sie die Struktur der Benutzeroberfläche ein wenig mehr ausfüllen, wie, wo diese Argumente gehen, wenn man so etwas wie "htmlOutput" benötigt beispielsweise? – Hendy

Guten Morgen @Hendy, Sie brauchen nur ein Tag wie Div, um die Leinwand zu speichern und einen Verweis darauf aus der Javascript-Datei, die zuvor in den Kopf gesetzt werden müssen. Mit dem aktuellen Code, das ist die Antwort, können Sie direkt P5.js von RShiny ausführen. Natürlich müssen Sie die Javascript-Dateien in die Verzeichnisse einfügen, die ich in der Antwort angegeben habe, damit es funktioniert. – EaglesAzul

Antwort

Verwandte Themen