I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.
Related
Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.
No matter what I try, images won't display in my browser. I've made sure file names were matching, that the directories were correct, etc. I've tried different images just to see if anything will load.
Here is an example of my code. The image and index file are in the same folder. Can anyone help?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=“rollingrick.jpg” alt=“Rick”>
</body>
</html>
I am really confused and I do not understand why I am getting the error below whenever I add an img element and I link an image file to it. The path to the image is correct, everything is done locally, the image is displayed without any visual issues. But whenever I open the console I see this error message:
The weirdest thing is that whenever I open another html file in the same project and I just add ANY image to it just to test, I get the same error, even though I never got that before. This is in Chrome by the way. I also tested in Firefox, Opera, IE, Edge and Safari, but there I see no error messages. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Warcraft III Veto</title>
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<!-- Main Style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="veto">
<div class="bar">
<img src="img/races/human.png">
</div>
</div>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<!-- Main Script -->
<script src="dist/js/veto.js"></script>
</body>
</html>
Something else I noticed is that whenever I delete my scipt tags that link to both my script file (which by the way is empty as well as my css), and vue.js, the error message dissapearas. I checked to see if the link to vue was correct and it was. I deleted all files and re-created them, but I still get the error. I am so confused, any help would be greatly appreciated.
I think this might be an issue with the version of Chrome.
This should be resolved in the latest update as per the discussion on this thread.
Hope that helps.
Here, the processing website explains two ways to set up the processing library. I'm trying to use the first way. My code:
<html>
<head>
<title>PATHOGEN</title>
</head>
<body>
<script src="processing.min.js"/>
<canvas data-processing-sources="main.pde"/>
</body>
</html>
It works, but what if I don't want all my code on one page? main.pde is gonna get crowded. I've tried writing this:
<script src="processing.min.js"></script>
<script src="blobby.js"></script>
<canvas data-processing-sources="main.pde"></canvas>
But it just gives me a grey canvas.
For all you other people trying to use processing.js for the first time, and if you want to include multiple pages, just write this for your canvas:
<canvas data-processing-sources="blobby.pde main.pde"></canvas>
Just make all your pages end in .pde. For some reason it doesn't want to work for Chrome, (which is really a bummer) but it does work on Safari.
Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.
You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.
Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.