I am using R Shiny to develop a web page and also include my own R code.
I am using p5.js(https://p5js.org/) to display a game in the web page.
As in the official web page says I have an HTML and the p5 javascript code together with the javascript library. If I run the HTML, that is, clicking right and pressing chrome to display I get the started example (https://p5js.org/get-started/) with no incidence.
Here it is the 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>
When I do the same in Shiny, running the code from R-Studio I do not get anything from it. I have stored the javascript files in the www folder as it is supposed to be and I currently know that my HTML called the javascript since I set an alert in the p5 javascript file, but outside the setup and draw methods. The problem is that, even though the alert is loaded, seems like the setup and draw methods are not called and, obviously, as a consequence, they do not load the canvas. I know that they are not called because I have a called to an alert in the setup method that works running the HTML file directly but not if I run the same file from R-Studio.
Here it is the 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);
}
I load the HTML page in Shiny using the next line of code
... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...
Attach to the tag "processingMasterThesis" I have the corresponding URL to the HTML file in the server.R, as it is supposed to be so the problem is not here.
Why may be the cause of this? It works if I call the HTML file directly to be load in the browser but not if I do it from R-Studio, why?
I have solved the problem. The p5 java script code will be:
// =====================
// "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);
}
The library you need to run the example can be found at https://p5js.org/
In this javascript file I have created an id that reference a html div element so that is the place where I will set my canvas. Once this is done, the rest of the javascript code will code perfectly. The point is to reference that the parent of the canvas is that div as you can see in the code.
After this you just have to create either in shiny or pure html code something like this:
# 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'))
))
)
)
The code that I show below is in shiny. The first "head" line include the library p5.js and the second "head" line just say "hey this is my p5 script file" and "divCanvas will be the div that I will print on".
You may have issues with the references to the javascript file. I think is worthy to note that you must create a www folder in your root shiny application. In this folder, you must put your javascript files. For example, as you can see in my code the two javascript files that I am using follow the next path:
ShinyApplication/www/app/libraries/p5.js
ShinyApplication/www/app/sketch.js
Hope this can help!
Related
I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.
However, it is always a hit or a miss:
Out of 10 reloads, one loads the player.
But anytime I make a
change to the <stream> tag, and angular re-compiles, the player is
loaded. After this if I refresh the browser, it is a blank screen
again.
The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:
In the index.html file:
<!doctype html>
<html lang="en">
<head>
...............
</head>
<body>
<app-root></app-root>
</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>
</html>
In the videoFile.component.ts:
<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>
Found a solution here: https://github.com/angular/angular/issues/13965
So everytime the component loads, the script is removed and reattached using ngOninit, like so:
document.getElementById("video_embed").remove();
let testScript = document.createElement("script");
testScript.setAttribute("id", "video_embed");
testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
document.body.appendChild(testScript);
If anyone has any other solutions, please do let me know.
I downloaded the examples from https://ml5js.org/getting-started/running-examples/ and run them on digital ocean server.
cd /path/to/ml5-examples
python -m http.server 8081
I am running the p5js/PoseNet/PoseNet_webcam/ example
But, it just displays the following, without loading any model.
PoseNet example using p5.js
Loading model...
What i want is to get video stream from webcam on remote server.
EDIT:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with ml5.js</title>
<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5#0.3.1/dist/ml5.min.js"></script>
</head>
<body>
<script>
// Your code will go here
// open up your console - if everything loaded properly you should see 0.3.1
console.log('ml5 version:', ml5.version);
let capture;
function setup() {
createCanvas(390, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
//capture.hide();
}
function draw() {
background(255);
image(capture, 0, 0, 320, 240);
filter(INVERT);
}
</script>
</body>
</html>
The JS console gives the following error:
Error: getUserMedia is not implemented in this browser
at Object.navigator.mediaDevices.getUserMedia.navigator.mediaDevices.getUserMedia (p5.dom.min.js:3)
at m.d.createCapture (p5.dom.min.js:3)
at setup ((index):29)
at m.<anonymous> (p5.min.js:3)
at m.<anonymous> (p5.min.js:3)
at new m (p5.min.js:3)
at n (p5.min.js:3)
When i open the program as a local file on the same Chrome browser, there is no error. I only get the error when i run my program on a cloud server.
I have qrc file that looks like this:
<qresource prefix="/web">
<file alias="assets.js">../web/assets.js</file>
<file alias="index.html">../web/index.html</file>
</qresource>
Inside assets.js Just adding function for allert popup:
function myFunction()
{
window.alert("Hello from assets.js");
}
Inside index.html adding another javascript for alert popup, loading assets.js and adding 2 buttons. First one to call window popup from external javascript file (assets.js) and second to call the javascript that is embeded into index.html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function localFunction()
{
window.alert('HTML loaded');
}
</script>
<script src="assets.js"></script>
<button onclick="myFunction()">External JS</button>
<button onclick="localFunction()">Local JS</button>
</body>
</html>
Now when I'm trying to load index.html in qtwebkit:
webView->load(QUrl(QStringLiteral("qrc:/web/index.html")));
I can see that index.html has been loaded ok (I can see the 2 buttons )
When clicking on the button that should call the local (html embeded) javascript it works.
Clicking the second button does nothing.
It seems like the external assets.js is not loaded properly.
Any sugestions how I can get it working?
Thanks.
Javascript isn't evaluated from the html. Your JS file could not be found. The following has no effect:
<script src="assets.js"></script>
Try it explicitly:
const QString js = readFile("qrc:/web/assets.js"); // Load your javascript file
view->page()->mainFrame()->evaluateJavaScript(js);
Another solution, more efficient: Use the QRC System and set the baseUrl in setHtml to link all files correctly:
const QString html = readFile(":/index.html");
view->setHtml(html, QUrl("qrc:/"));
I have been searching for this all over, but can not find an answer or example.
Can a Ractive template be used to construct head elements that are consistant across pages, and can that be loaded from a separate file?
For example: all html, head, and title tag info is loaded via a referencable template from an external file into an index page.
+html+
+head+
+title+
+/title+
+/head+
And if so, how do you do it? As I try to wrap my head around it, jquery and ractive.js would need to load. Is there a different/better solution?
It is possible. But it's not practical and it raises other issues.
Here's a basic implementation that shows how <head> can be templated but without concentrating on putting the template in an external file. This works for me in Chrome and IE.
<html>
<head id="output"></head>
<script id="template" type="text/html">
<title>{{ title }}</title>
</script>
<script type="text/javascript" src="ractive.min.js"></script>
<script type="text/javascript">
var ractive = new Ractive({
template: "#template",
el: "#output",
data: {
title: "This is the title"
}
});
</script>
<body>
...
</body>
</html>
You'll run into problems with this approach because the head elements won't be loaded until after the page has loaded and Ractive kicks in. This may cause the following problems:
Search engines might not be able to read the page title and meta tags
Any javascript you need to load into <head> may not work (I tried some simple examples and was able to get the javascript to run but it failed to reference any elements in the body. Maybe it's a context issue and maybe Ractive has support to overcome this but this is an area I'm unfamiliar with.)
If you require valid HTML, this probably won't work for you because script tags can't be direct children of <html>, and <head> is supposed to have <title> as a direct child.
You're better off using a server-side solution to template <head>.
i was wondering if this setup would work. i have to crank out a batch of PDF from a bunch of variables i'm pushing into the $_SESSION via a form (duh...). the idea is to pass the template file to the dompdf engine and have the template populate from the $_SESSION then out to PDF. it seems to me that when the $template gets loaded it should do that, yes?
here's the basic code:
<?php
function renderToPDF($theTemplate = "template.php") // this is just to show the value
{
require_once("dompdf/dompdf_config.inc.php");
$content = file_get_contents($theTemplate);
if ($content !== false)
{
$dompdf = new DOMPDF();
$dompdf->load_html($content);
$dompdf->render();
$dompdf->stream("kapow_ItWorks.pdf");
}
}
?>
and this is the template.php file (basically... you don't want all 16 pages...)
<html>
<meta>
<head>
<link href="thisPage.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1><?php echo $_SESSION['someTitle'] ?></h1>
<h2>wouldn't it be nice, <?php echo $_SESSION['someName'] ?></h2>
</body>
</html>
so my thinking is that the template.php will pull the variables right out of the $_SESSION array without any intervention, looking like this:
BIG TITLE
wouldn't it be nice, HandsomeLulu?
i guess the nut of the question is: Do $_SESSION variables get evaluated when PHP files are loaded, but not rendered?
WR!
file_get_contents does not evaluate the PHP file, it simply gets its contents (the file as it is in the hard drive).
To do what you want, you need to use output buffering and include.
ob_start(); // Start Output beffering
include $theTemplate; // include the file and evaluate it : all the code outside of <?php ?> is like doing an `echo`
$content = ob_get_clean(); // retrieve what was outputted and close the OB
for some reason, the code ON the page that calls the function ALSO gets dumped into the file. this was placed before the header. i understand now why: i wasn't referencing an external page, i was importing and external page. don't know why that didn't click.
anyway. as soon as i got rid of the page's extra stuff, it worked just fine. in retrospect, what dompdf needed to state was quite simply that NO HTML of ANY kind (echo, print, &c.) can be on the page that calls the function. at least that what it appears to require at this level of my knowledge.
for those who, like me, are floundering in a misma of 'everything but the answer', here's the bare bones code that did the job:
buildPDF.php:
<?php
session_start();
$_SESSION['someTitle'] = "BIG FAT TITLE";
$_SESSION['someName'] = "HandomeLu";
$theTemplate = 'template.php';
function renderToPDF($templateFile)
{
require_once("_dox/dompdf/dompdf_config.inc.php");
ob_start();
include $templateFile;
$contents = ob_get_clean();
if ($contents !== false)
{
$dompdf = new DOMPDF();
$dompdf->load_html($contents);
$dompdf->render();
$dompdf->stream("kapow_ItWorks.pdf");
}
}
renderToPDF($theTemplate);
?>
and this is the template.php:
<!DOCTYPE HTML>
<html>
<meta>
<head>
<meta charset="utf-8">
<link href="thisPage.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1><?php echo $_SESSION['someTitle'] ?></h1>
<p>wouldn't it be nice, <?php echo $_SESSION['someName'] ?></p>
</body>
</html>
also note that the external CSS file reads in just fine. so you can still keep the structure and style separate. also, the $_SESSION variables can be set anywhere, obviously, i just set them here to keep testing easy.
hope this is useful for those getting started with this GREAT class. if you're looking to get up and running cranking out PDF files, this kicks so much butt, it should have a trigger and a grip on it. :)
thanks to everyone who commented. you got me in the place i needed to be. :)
this site ROCKS.
WR!