R Shiny 및 p5.js

R Shiny를 사용하여 웹 페이지를 개발하고 있으며 자체 R 코드도 포함하고 있습니다.R Shiny 및 p5.js

웹 페이지에 게임을 표시하기 위해 p5.js (https://p5js.org/)를 사용하고 있습니다.

공식 웹 페이지에서와 같이 HTML과 p5 자바 스크립트 코드가 자바 스크립트 라이브러리와 함께 있다고 말합니다. HTML을 실행하면 오른쪽 클릭하고 크롬을 눌러 표시하면 시작된 예제()가 발생하지 않습니다.

여기에는 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라는 것을 알고 있지만 설정과 그 외의 메소드를 제외하고는 www 폴더에 javascript 파일을 저장했습니다. 문제는 경고가로드 되어도 설치 및 그리기 메소드가 호출되지 않는 것 같고 결과적으로 캔버스가로드되지 않는다는 것입니다. R-Studio에서 동일한 파일을 실행하는 경우 HTML 파일을 직접 실행하는 설정 방법에 경고가 필요하기 때문에 호출되지 않았 음을 알고 있습니다.

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 페이지를로드 : 여기

는 코드 자바 스크립트 P5입니다 server.R에있는 HTML 파일에 대한 URL입니다. 문제가 여기에 없기 때문입니다.

왜 이런 이유가있을 수 있습니까? 브라우저에서 HTML 파일을 직접 불러 오지만 R-Studio에서로드하지 않으면 작동합니다 (이유는 무엇입니까?).

출처

2016-07-29 EaglesAzul

자바 스크립트 콘솔에 오류가 있습니까? –

안녕하세요 @ 케빈 워크맨, 답변 해 주셔서 감사합니다. 웹 페이지를로드하려고하면 경고 메시지가 나타납니다.'메인 스레드의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향을 미치므로 사용되지 않습니다. 도움이 더 필요하면 https : // xhr.spec.whatwg.org/.'를 확인하십시오. 내 자바 스크립트 파일에서 직접이 요청을 호출하지 않지만 어쩌면 p5js 라이브러리 내부적으로 않습니다. 그것은 문제가 여기에있는 것 같지만, 그렇다면 왜 RStudio에서 웹 페이지를 실행할 때 (실제로 RStudio에서 실행하는 것이 ui.R 파일인지), HTML 파일을로드 할 때이 오류가 발생하지 않습니다. 마우스 오른쪽 버튼으로 클릭? – EaglesAzul

문제를 해결했습니다. 먼저 p5js 파일에서 HTML에서 참조 할 수있는 변수를 만들어야합니다. canvas = createCanvas (640, 480);라고 말하면됩니다. 일단 전역 변수를 선언했다면 부모에게 말해야 만합니다. myCanvas.parent ("divCanvas");라고 말하면됩니다. # UI UI , tags $ body ( tags $ head (tags = $ script (src = "app/libraries/p5.js)"태그는 다음과 같이 코드를 작성해야합니다. ")) 태그 $ 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를 생성 한 자바 스크립트 파일이에서 https://p5js.org/

에서 찾을 수있는 예제를 실행하는 데 필요한 라이브러리 내 캔버스를 세울 곳. 이 작업이 완료되면 나머지 자바 스크립트 코드도 완벽하게 코딩됩니다. 요점은 캔버스의 부모가 코드에서 볼 수있는 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가 있고 두 번째 "head"줄에는 "이게 내 p5 스크립트 파일입니다"라고 쓰여지고 "divCanvas가 내가 인쇄 할 div가됩니다"라고 말합니다.

자바 스크립트 파일에 대한 참조 사항에 문제가있을 수 있습니다. 나는 루트 반짝이는 응용 프로그램에 www 폴더를 만들어야한다는 것에 주목할 가치가 있다고 생각합니다. 이 폴더에서 자바 스크립트 파일을 넣어야합니다.예를 들어, 내 코드에서 볼 수 있듯이 사용하고있는 두 개의 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, 캔버스를 저장하고 머리에 미리 설정해야하는 javascript 파일에서 div와 같은 태그가 필요합니다. 현재 코드를 사용하면 RShiny에서 직접 P5.js를 실행할 수 있습니다. 물론, 당신은 내가 대답하도록 지시 한 디렉토리에 javascript 파일을 두어야합니다. – EaglesAzul

R Shiny 및 p5.js

답변

관련 문제