R Shiny and p5.js

Я использую R Shiny для разработки веб-страницы, а также моего собственного R-кода.R Shiny and p5.js

Я использую p5.js (https://p5js.org/), чтобы отобразить игру на веб-странице.

Как и на официальной веб-странице, у меня есть HTML и код javascript p5 вместе с библиотекой javascript. Если я запустил HTML, то есть щелкнуть правой кнопкой и нажимая хром для отображения, я получаю начальный пример (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>

Когда я делаю то же самое в Shiny, работающий код с R-Studio не получить ничего от него. Я сохранил файлы javascript в папке www, как и предполагалось, и теперь я знаю, что мой HTML называется javascript, так как я установил предупреждение в файле javascript p5, но вне методов настройки и рисования. Проблема в том, что, несмотря на то, что предупреждение загружено, похоже, что методы настройки и рисования не вызываются и, как следствие, они не загружают холст. Я знаю, что они не вызываются, потому что у меня есть вызов для предупреждения в методе настройки, который работает непосредственно с файлом HTML, но нет, если я запускаю тот же файл из R-Studio.

Вот это p5 Javascript код:

alert("GOOD1"); 

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

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

я загрузить страницу HTML в Shiny, используя следующую строку кода

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

Присоединить к тегу «processingMasterThesis» Я Соответствующий URL-адрес HTML-файла на сервере.R, так как предполагается, что проблемы здесь нет.

Почему это может быть причиной этого? Он работает, если я вызываю HTML-файл непосредственно для загрузки в браузере, но не, если я делаю это из R-Studio, почему?

источник

2016-07-29 EaglesAzul

У вас возникли ошибки в консоли JavaScript? –

Привет, господин Кивин, благодарю вас за ответ. Я получаю это предупреждение, когда пытаюсь загрузить веб-страницу: «Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя. Для получения дополнительной справки проверьте https: // xhr.spec.whatwg.org/.'. В моем файле javascript я не использую этот запрос напрямую, но, возможно, библиотека p5js делает внутренне. Кажется, проблема здесь, но если это так, почему я получаю эту ошибку, когда я запускаю из RStudio веб-страницу (то, что я на самом деле запускаю из RStudio, является файлом ui.R), а не когда я загружаю HTML-файл с помощью щелкните правой кнопкой мыши? – EaglesAzul

Я решил проблему. Сначала мне нужно создать переменную в файле p5js, которую я могу ссылаться из HTML, скажем canvas = createCanvas (640, 480) ;. Как только я объявлю свою глобальную переменную, я просто должен сказать ей ее родительский элемент, скажем, myCanvas.parent («divCanvas») ;. После этого вам просто нужно создать либо в блестящем, либо в чистом html коде, как это: # UI , теги $ html (теги $ body ( теги $ head (теги $ script (src = "app/libraries/p5.js ")) , теги $ head (теги $ script (src =" app/sketch.js ")) , теги $ div (id = 'divCanvas') )) – EaglesAzul

Я решил проблему. Код сценария p5 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 элемента, так что место, где я установлю свой холст. Как только это будет сделано, остальная часть кода 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

Доброе утро, @ Хенди, вам просто нужен тег типа div, чтобы сохранить холст и сделать ссылку на него из файла javascript, который должен быть предварительно установлен в голове. С текущим кодом, это ответ, вы можете напрямую запустить P5.js из RShiny. Конечно, вы должны поместить файлы javascript в каталоги, которые я указываю в ответе, чтобы заставить его работать. – EaglesAzul

ответ

Смежные вопросы