put sketch with external libraries in website

jane38

put sketch with external libraries in website

in Integration and Hardware • 7 months ago

I have seen similar questions posted before but seems the general answer is that it cannot be done

but I know for a fact that this is not true for example why do quarks examples work.

older processing version used to be able to export as an applet which you could embed in a html file.

I have read how processing makes a web sketch by turning the sketch code to JavaScript with canvas tag referencing the .pde file

what I basically want to do is do what quarks did with his example, he seems to have somehow converted his sketches into an applet which can use external libraries or jars without any problem

I don't know much about html I can probably make static pages but that about it but I viewed one of his examples

I tried to copy what he did with sketch but it did not work

view-source:http://www.lagers.org.uk/g4p/applets/g4p_dialogs/index.html

any suggestions

Replies(11)

GoToLoop

Re: put sketch with external libraries in website

7 months ago

If your program uses Java libraries which are not "official" Processing ones,
you have to export them as Java applets on Processing v1.5.1.
Use <CTRL> + <E> for it.

Otherwise, publish your code as JavaScript, since it's a built-in browser programming language!
Also, you can use new beta versions of Processing as well!

Go here for more instructions after making an account:
http://www.openprocessing.org/sketch/upload

jane38

Re: put sketch with external libraries in website

7 months ago

you are not wrong but that is not what I meant

in my current sketch I'm using the latest G4P which only seems to compatible with Processing v 2.07b+

I need the new methods available in the latest G4P version.

see example in my post here

which you answered yourself GoToLoop

cause of this I cannot use Processing v1.5.1.

besides I'm thinking of using more libraries

so multiple libraries in one sketch

I did some research and watched some tutorials and this what I came up with

the mysketch.jar is the jar that is created in the lib folder when a sketch is exported in windows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<applet codebase ="." code="mysketch.class"
archive="mysketch.jar,core.jar,G4P.jar"
height="800" width="1200"/>
</body>
</html>

I would follow through with your idea but the newer versions of G4P are not compatible with Processing v1.5.1

I remember quark mentioning something about different thread handling in older and newer processing version

in one of his update posts

GoToLoop

Re: put sketch with external libraries in website

7 months ago

Just letting you know that last Processing v1.5.1 compatible G4P is v3.0.0.

Processing series 2 removed export as Java applet!

PhiLho

Re: put sketch with external libraries in website

7 months ago

" seems the general answer is that it cannot be done"
Indeed. At least, as GoToLoop said, not with Processing 2.0.

JavaScript cannot use the Java libraries while Java Processing can use any Java library. They are just different languages, not (directly) compatible with each other.

I believe G4P is a different beast, IIRC quarks rewrote it in JavaScript (or to be JS compatible, at least).
So what works with G4P won't work with other libraries, unless the library writer took the extra steps to convert it too.
Which is generally not possible with libraries that are just wrappers of other Java libraries. Or using advanced Java classes. Or native code. Etc.

quarks

Re: put sketch with external libraries in website

7 months ago

I believe G4P is a different beast, IIRC quarks rewrote it in JavaScript (or to be JS compatible, at least).
So what works with G4P won't work with other libraries, unless the library writer took the extra steps to convert it too.

I am afraid that's not the case, at present G4P is not compatible with Processing.js and the support for text-styling introduced in V3.0 is heavily dependent on Java's AWT.

But there is some good news -

I have created a Processing tool that will enable the exporting of applets from 2.0b8

The tool will only work in JAVA mode and with sketches that use the default JAVA2D renderer. The tool will not work with P2D, P3D and OPENGL because they are all based on OpenGL.

The export tool also allows the user to sign (self-certificate) their applet.

The tool is nearly finished and I have tested it with Processing 2.0b8 in Windows 7

I have used it to create applets (with and without signing) that use various contributed libraries including Minim and G4P successfully. I still have to test uploading the exported applet to OpenProcessing but I don't expect that to be a problem.

I anticipate releasing the tool in the next few days so it can be used on different platforms and with different contributed libraries so I can get some user feedback.

Obviously I will announce the release in this forum and you could also keep an eye on the project repository for the first tool download if you want.

jane38

Re: put sketch with external libraries in website

7 months ago

seems processing is getting better and better

quarks you would not have date for that like in a month or 2

by the way quark how do the examples work on your site

quarks

Re: put sketch with external libraries in website

7 months ago

quarks you would not have date for that like in a month or 2

The tool is fully functional tool now, it needs some testing and documentation so I anticipate no more than a week and possibly sooner.

by the way quark how do the examples work on your site

Not sure what you mean by that.

Most of the original applets were exported from Processing 1.5.1, this includes all the 3D stuff using the old P3D renderer.

Where neccessary all my libraries have been refactored to work with the new event handling system used in Processing 2.0 which means they are no longer compaitible with 1.5.1 so can't be exported.

It turns out that the jars created by Export Application work when run in a web browser, so I created a sketch that made the applet folder, copied the required jars into it and a simple web page from a template using a rather neat JavaScript applet loader I found on the Internet after it got mentioned in this forum.

As proof of concept I added applet signing to the sketch and used that to create the G4P Dialogs applet.

Although the sketch worked it was not an ideal solution so I decided to create a Processing tool that provided a GUI wizard style approach to exporting and signing the applets.

jane38

Re: put sketch with external libraries in website

7 months ago

actually i have tried applet fu.js as well still does not work only shows a white background no erors nothing in all rights it should work

quarks

Re: put sketch with external libraries in website

7 months ago

I experienced that problem but it was caused by the applet not finding resources (images) that it was looking for.

Anyway you will be pleased to hear it works in the exprter tool.

jane38

Re: put sketch with external libraries in website

7 months ago

if I had your answer before quarks it would not have necessary to trouble so many people you were right it was the applet not finding resources.

it works now so I'm gonna share it for any other person looking for something similar

NOTE: mysketch.jar is from when the sketch is exported in windows it creates a folder with the exported sketch

there is normally a mysketch .exe found here besides that you find lib folder which contains all the jar files you need

if you are using external libraries you can find the their perspective jar file in there

copy all the jar files and all other resources that you need into the same folder as the html file

the applet_fu.js you can get from github

here is my first version

the second version centres the sketch and puts a border around it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>apptest</title>
</script>
<style type="text/css"></style></head>
<body>
<script type="text/javascript" src="applet-fu.js"> </script>
<script type="text/javascript">
applet_fu.run(
{'width':'1200','height':'800'},
{
'archive':'mysketch.jar,G4P.jar,core.jar',
'code':'mysketch.class',
},
'1.5',
'<img src="/no-java.png" />'
);
</script>
</body></html>

second version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>apptest</title>
</script>
<style type="text/css"></style></head>
<body>
<center>
<table width="1200" border="5" bordercolor="#c0c0c0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<script type="text/javascript" src="applet-fu.js"> </script>
<script type="text/javascript">
applet_fu.run(
{'width':'1200','height':'800'},
{
'archive':'mysketch.jar,G4P.jar,core.jar',
'code':'mysketch.class',
},
'1.5',
'<img src="/no-java.png" />'
);
</script>
</td>
</tr>
</table>
</center>
</body></html>

PhiLho

Re: put sketch with external libraries in website

7 months ago

" it would not have necessary to trouble so many people"
Not at all: sharing error is the best way to reduce the inconvenience of making them! Not only errors improve your experience, but sharing them helps other people to learn from them...

Beside, the thread has interesting information!

Top Reply