import HTML files to Processing

Question

I have been working in my first year of university and have been tasked with creating an application in Processing.

My group and I decided to create a basic template of HTML so we could call the div's and set them to rects in Processing in the page.

To link the HTML and Processing, I thought we could import it into the Processing file, like so;

import index.html;

for all the HTML files I have, but this doesn't work.

I used the import example from this webpage; http://processing.org/reference/import.html

Does anyone know if there is a way to import the HTML files, or do I have to go through some other method?

I'm fairly new to Processing so any help would be greatly appreciated

EDIT

here's an example rect();

//top right panel
rect(345, 280, 310, 200, 1, 20, 1, 20);

and the div by the name top-right-panel, once i've managed to link the files, should load into this rectangle. the code currently (for example) in the HTML is;

<div id = "top-right-panel">
    <title>Shop Online</title>
    <!-- List of latest deals on guiding shop -->
            <p> This is example text</p>
</div>

I think you are looking for that: [http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file][1] [1]: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — Vijay Verma, Nov 25 '13 at 12:35
Your question is confusing. "call div" doesn't make sense and I don't know what you mean by "set them to rects". — Aaron Digulla, Nov 25 '13 at 12:37
sorry @AaronDigulla, i thought it was clear - i meant call div as in the content of the HTML inside a certain div would be put inside a rect() that has been drawn to hold content. i'll put up an example in a second x — Megan Sime, Nov 25 '13 at 12:43
A rectangle is just 4 lines. It's *not* a DOM element (or rather it's probably not a *single* DOM element) and you certainly can't put content into it. — Aaron Digulla, Nov 25 '13 at 12:46
oh sorry, i thought i could set the dimensions of the rect() to the div like css, i just got confused — Megan Sime, Nov 25 '13 at 12:50
Processing is a script language like JavaScript or Python, only it's geared towards graphics and animation. It doesn't support HTML or CSS. — Aaron Digulla, Nov 25 '13 at 13:21

Aaron Digulla · Answer 1 · 2013-11-25T13:20:07.090

Processing doesn't use or understand HTML. It's a programming language that draws things in a view. You can create a HTML page and define one of the elements to be the view but you can't bring Processing to understand HTML. To access the DOM of the HTML you need pure JavaScript, Processing doesn't allow you to do that.

That means: If you want a rect, then you need to define it in the Processing script. You can't say "create a rect from this div"

So the "basic template" needs to be something which prepares the view, load the JavaScript and then the Processing script you want to display.

[EDIT] Processing uses a canvas element to render the script. A canvas can't have other HTML elements as children, so you can't make the div in your question a child of it.

There are frameworks which can render HTML in a canvas element but they analyse the HTML code and turn that into "draw line here, draw text there" commands. Processing can't do that out of the box.

You will have to figure out how to draw lines and texts yourself and write the script accordingly so that it looks as if the browser had done the rendering for you.

the site http://processingjs.org/articles/p5QuickStart.html implied i could use processing and HTML together, i thought i could manipulate it so i could upload it to openprocessing.org and have it still work. when i submit my assignment it has to be to this site. sorry :-/ — Megan Sime, Nov 25 '13 at 12:49
openprocessing.org takes a pure script, no HTML template. Is your question "how do I emulate openprocessing.org" or "how do I access the DOM from Processing"? — Aaron Digulla, Nov 25 '13 at 13:16

import HTML files to Processing

1 Answers1