I have seen similar questions posted before but seems the general answer is that it cannot be done.
So, here is my HTML code :
<head>
…
<script type="text/javascript" src="js/processing.js"></script>
…
</head>
<body>
…
<canvas id="my_prog" data-processing-sources="project/my_prog.pde project/my_class.pde"/></canvas>
…
</body>
And in my sketch I use Minim libraries :
import ddf.minim.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;
Instead of having my project on my website, there is a rectangular shape proportional to the project size, but without image and sound.
Moreover, this method doesn't work either…
I do not know what to do.
Any suggestions? :)
Thank you,
Thib
Think about it this way:
"Core Processing" contains all of the variables and functions you can use in a plain old Processing sketch.
You can deploy "core Processing" as a Java application. If you do so, you can also use Java libraries, like minim.
You can also deploy "core Processing" as JavaScript using Processing.js. If you do so, you can embed your sketch into a webpage and use JavaScript syntax to access the html components of that surrounding webpage.
But you can't mix them: you can't embed a Java application in a webpage (applets are dead), and you can't use Java libraries in a JavaScript webpage.
Minim is a Java library, so you can't use it directly in a JavaScript application. Instead, you have to find a JavaScript library that does something similar. You've posted one method (what do you mean when you say it didn't work?), but googling "processing.js audio" or "minim javascript" returns a bunch of others, including this related question:
Exporting a Processing sketch with audio to JavaScript
Also, you should get acquainted with the JavaScript console. In your web browser, press F12, then go to the console tab, then refresh your page. That will show you any errors you're hitting, that way you have more information than "it's a blank rectangle".
Related
I have implemented some Trustpilot Trustboxes to get Rich Snippets for SEO on my website. This guide has been used. The issue is that the Google-bot and Google structured-data testing-tool do not recognise the markup that should be included in the header.
My tests:
I have created a "blank" page on the website that loads nothing but
the necessary Trustpilot stuff. The testing-tool did not recognise the markup and did not detect the structured data.
I tested the markup through custom code on Structured Data Testing Tool, by adding the fetched markup directly in the header. The testing-tool detected the structured data.
When browsing the website, the markup can be seen in the html-header when inspecting the website in e.g. Chrome, Firefox etc. (it just cannot be seen by the Google bot or structured data testing tools).
My conclusion on the tests:
The problem is not caused by slow loading speed or faulty markup. My best guess at the moment is that something in the framework or configuration used for the website blocks google from recognising/fetching the markup from Trustpilot. Of course, this is just my conclusion. I could be completely wrong.
Heroku and Play Framework is used to host/as framework for the website. Could it be that I have missed enabling some option in Play or Heroku that allows google to recognise/fetch the Trustpilot markup? Should something be added to the content security policy (something related to schema.org)?
Note: I may have wrongfully used terminologies in this question.
[UPDATED]
The Trustbox is used on lendino.dk and on this test app.
The code below is used on the test app:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="trustpilot-widget"
data-locale="en-US"
data-template-id="54ad5defc6454f065c28af8b"
data-businessunit-id="54e497ed0000ff00057d80c7"
data-style-height="220px"
data-style-width="100%"
data-theme="light"
data-tags="SelectedReview"
data-schema-type="Organization">
Trustpilot
</div>
</div>
</body>
I tried the link for the test app and got the same result. Also I tried to do it with the httpversion of the link. Then the markup appears in the testing tool.
My best guess at this point is that your Content-Security-Policy is preventing something. I do not see https://widget.trustpilot.com in there, whereas the http version is specified in there (3 times). That seems to be the only difference as far as I can tell.
I have modified my modified my html5 library to point my kaltura server. Now I am able to play videos as static html webpage. but I tried in my project which is developed using php, it doesn't play the videos in even PC's too.
It says kwidget is not defined.
I used the kWidget embed code. But it s not happened in auto embed or flash embed.
But I read that kwidget is good to reduce the page load timings
If you are using any MVC, you need to add the mwEmbedLoader script in the service or controller's head. I think you used the kwidget code in view sector and not add your script in controller page. you need to add your script in all the pages wherever the player function calls as below.
You can add that in couple of ways.
<script src="http://youkalturaserver.example.com/p/partnerId/sp/partnerId+00/embedIframeJs/uiconf_id/11170264/partner_id/partnerId"></script>
<script type="text/javascript" src="http://youkalturaserver.example.com/html5/html5lib/v2.69.7/mwEmbedLoader.php"></script>
replace v2.6.7 with current release version:
https://github.com/kaltura/mwEmbed/releases
It will solve this error
OK so I've got this addon where I'm trying to load a bitmap from a file:/// URI and draw it to canvas.
All that goes fine until I need to get the data off the canvas using getImageData, then I run into a security exception. I go to Moz Chat and am told that because I'm loading the image from a page modded HTML File, it's a cross domain policy issue and not allowed.
The solution, they say, is to go to the main module and load the image there, copy it to a canvas, then serialize the data with getImageData and send it back to the HTML doc.
One problem: Jetpack doesn't know what "Image" is because it doesn't have an HTML DOM, thus the operation seems to be rendered more or less impossible.
Why is this a cross domain policy issue in the first place? Beyond that, how do I load the image without access to the DOM?
The simpler and best example of communication between main.js module and a content script you can read is in Add-on SDK docs: look for the section under the title Communicating With Content Scripts.
Basically, this is how the main module tells the content script (the pagemod in your case) something:
worker.port.emit("getElements", tag);
and this is how it listens to whatever the content script tells him:
worker.port.on("gotElement", function(elementContent) {
console.log(elementContent);
});
On the other side, the content script listens to what the main module says to it this way:
self.port.on("getElements", ...
And finally, a case this example is missing is how the content script may emit an event to tell something to the main module:
self.port.emit("myCustomEvent", var1=someValue, var2=otherValue, ...)
But that's the idea. I also recommend you to tale a careful look at this more general explanation about how content script (pagemods, widgets, tabs, panels, etc) work because this is the mosst important concept to understand how sdk addons work.
Last, about the cross domain issue on content scripts you can read more here.
When someone navigates to my Meteor app, I would like the home page to be loaded first, rendered, and displayed. And then as soon as this is done (the user can start clicking around), all the other resources and databases for all pages of my app are loaded (cached) in the background to LocalStorage (as much as can fit), so that all the pages, images, etc, of my app will appear instantly when navigated to.
What's the no-brainer convention for doing this in Meteor? Is there a package?
And secondly, how do I indicate which resources I want to be highest priority in the background loading queue? For example, how do I make sure that a "splash page" and its images shows up right away?
Meteor apps are, by design, single-page sites. If you view-source on a deployed Meteor app, for example http://docs.meteor.com, the <head> always looks something like this:
<link rel="stylesheet" href="/5a6084946b1bc47e30e45c05bdecb13536a2dc64.css">
<script type="text/javascript">
__meteor_runtime_config__ = {"meteorRelease":"galaxy-follower-5","ROOT_URL":
"http://docs.meteor.com","ROOT_URL_PATH_PREFIX":"","serverId":
"964b34dc-ffbb-b860-a313-9eedca254d83","DDP_DEFAULT_CONNECTION_URL":
"ddp+sockjs://ddp--****-docs.meteor.com/sockjs"};
</script>
<script type="text/javascript" src="/3353c2b059d42f3fe42e0d5eba87882b955d7cbe.js">
</script>
That .css file is all of your app's CSS, concatenated into one file; and that .js file is all of your app's JavaScript, including all of your templates, concatenated into one file. That's just the way Meteor is designed, and it's not something you can change without delving deep into Meteor's source and rewriting some major chunks.
The only suggestion I have for you is to have your homepage served by something else, such as an Apache or Nginx server, which really does serve up just the bare minimum that you're after; and fetches the above .css and .js files and preloads them. Use a router package in your Meteor app, and take care that all the links in your homepage point to routes that are defined in the Meteor app. You can also speed things up a bit by separating out and loading from a CDN or your Apache/Nginx server any resources not directly needed by Meteor—images, additional CSS, external JavaScript like libraries—and having those preloaded by your non-Meteor-hosted homepage.
Finally take a look at meteor-external-file-loader. It's designed for loading external JavaScript libraries on the fly in Meteor apps, for example loading Google Maps only on the pages where you're actually showing maps. I'm not sure if it can be used to load JavaScript that's core to your app like templates, but if your app is so large that you're thinking of splitting it up anyway then presumably there are parts of your code that you can separate into packages like your own custom JavaScript libraries, which can then be loaded dynamically from your Apache/Nginx server using meteor-external-file-loader.
I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).
I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.
Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?
They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).
Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.
Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.
Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).
jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.
http://api.jquery.com/
http://docs.jquery.com/Ajax
You don't need iFrames and you don't need AJAX. It's really, really simple!
You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.
We do this all the time with media stored on separate sites. Here's an example.
YOUR SERVER: file.php (which outputs js)
<script>
document.write("I'm on a remote server");
</script>
OTHER SITE:
<script src='http://www.yourserver.com/file.php'></script>
And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.
I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
The example uses jQuery, but you can use it standalone as well.