Processing 1.0 - Processing Discourse - using the <embed> tag over <object> to

henry

using the <embed> tag over <object> to
Nov 12^th, 2008, 7:37pm

Okay, I did all my website testing in Safari and it turns out Safari is a lot more flexible than FF and IE! I have a java applet made from processing that I wanted to make clickable on my website; when a users clicked the applet the page would scroll down to an anchor (href="www.abc.com/index.html#bottom"), I did this simply by wrapping the exported code in an a href link, as I say it works under Safari but not FF and IE. So I tried to then overlay a transparent gif to use as the link, aligning with z-index, but it does not work with java applets, and then trying iframes, but the applet always stays on top. So no luck.

Then somebody told me the <object> tag was insufficient and that I needed to have an <embed> tag, also since I am using XHTML, if I did use the <applet> tag instead, any
"verifiers" would fail.

Searching for past posts I found this one which had an example of an both <embed> and <applet>, deciding to use the <applet> I tried to convert the outputted <object> code from Processing, but it did not work for me.

So I need somebody's help here, its all a little confusing. What I would like is for a web surfer to click a processing java applet and for that to link to an anchor (#bottom) which scrolls to where ever it is on the page. It has to work in FF, IE and Safari (I don't see Safari giving any issue with anything) but FF definitely.

Here is a simple example, if anybody can, could they show me what needs to be changed so that I can use href:

<!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" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>sketch_081112a : Built with Processing</title>

<style type="text/css">
/* <![CDATA[ */

body {
margin: 60px 0px 0px 55px;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 11px;
background-color: #ddddcc;
text-decoration: none;
font-weight: normal;
line-height: normal;
}

a { color: #3399cc; }
a:link { color: #3399cc; text-decoration: underline; }
a:visited { color: #3399cc; text-decoration: underline; }
a:active { color: #3399cc; text-decoration: underline; }
a:hover { color: #3399cc; text-decoration: underline; }

/* ]]> */
</style>

</head>
<body>
<div id="content">
<div id="sketch_081112a_container">


<object classid="java:sketch_081112a.class"
type="application/x-java-applet"
archive="sketch_081112a.jar"
width="200" height="200"
standby="Loading Processing software..." >

<param name="archive" value="sketch_081112a.jar" />

<param name="mayscript" value="true" />
<param name="scriptable" value="true" />

<param name="image" value="loading.gif" />
<param name="boxmessage" value="Loading Processing software..." />
<param name="boxbgcolor" value="#FFFFFF" />

<param name="test_string" value="outer" />


<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_15-windows-i586.cab"
width="200" height="200"
standby="Loading Processing software..." >

<param name="code" value="sketch_081112a" />
<param name="archive" value="sketch_081112a.jar" />

<param name="mayscript" value="true" />
<param name="scriptable" value="true" />

<param name="image" value="loading.gif" />
<param name="boxmessage" value="Loading Processing software..." />
<param name="boxbgcolor" value="#FFFFFF" />

<param name="test_string" value="inner" />

<p>
<strong>
This browser does not have a Java Plug-in.
<br />
<a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">
Get the latest Java Plug-in here.
</a>
</strong>
</p>

</object>


</object>


</div>

<p>

</p>

<p>
Source code: <a href="sketch_081112a.pde">sketch_081112a</a>
</p>

<p>
Built with <a href="http://processing.org" title="Processing.org">Processing</a>
</p>
</div>
</body>
</html>

Alternatively if there is a way that the java applet can use the processing mouse click event to return a value of some kind which will trigger the anchor link, if its easier, please let me know.

Thanks for the help in advance.

PhiLho

Re: using the <embed> tag over <object>
Reply #1 - Nov 13^th, 2008, 1:39pm

I managed to make it working within the sketch, which is better as it is context driven and probably browser agnostic (tested with FF3 and IE6).

I found the solution in http://burks.brighton.ac.uk/burks/language/java/jprogfaq/faq_d.htm

Simple code to test:
Code:

final static int MIN_RAD = 10;
final static int MAX_RAD = 300;
int radius = MIN_RAD;

void setup()
{
  size(400, 400);
}

void draw()
{
  background(#2288EE);
  radius = (radius - MIN_RAD + 1) % MAX_RAD + MIN_RAD;
  ellipse(width/2, height/2, radius, radius);
}

void mouseClicked()
{
  if (dist(mouseX, mouseY, width/2, height/2) < radius)
  {
    URL url = getDocumentBase();
//    System.err.println(url);
    try {
      URL anchor = new URL(url, "#2.5");
//      System.err.println(anchor);
      getAppletContext().showDocument(anchor);
    } catch (MalformedURLException e) {}
  }
}

If you uncomment the System.err lines, you can see the output in the Java console. I had to remember to do a 'x' in the console to flush old versions of applets during the tests (on Windows).

For testing, I took a large HTML file with lot of anchors: http://www.lua.org/manual/5.1/manual.html and pasted the body content before the </body> in the generated index.html. I went right to chapter 2.5 upon clicking on the circle.

henry

Re: using the <embed> tag over <object>
Reply #2 - Nov 13^th, 2008, 5:42pm

Thanks PhiLho, I had been trying many things and got the same result as with your code: a dash to the bottom of the page., not a soft scrolling motion, which is what's supposed to happen.

http://lovelago.googlepages.com/text_box6m.html

..here is the page I am working on, normally the surfer would click the bottom right picture to scroll down, beneath that is an oscillation Java applet that will drag the page back up. That's all the navigation of the entire site, a single page. To make it nice I use a piece of javascript that gently scrolls the page to an anchor:

http://lovelago.googlepages.com/softscroll.js

I used a "_self" Target Argument link to get the Java applet to work as a button, using the moving icon on the disc (which temporarily is what I am testing to link to the bottom) as an example of a Java applet with a link, it *will* link to the anchor at the bottom of the page, but not softly scrolling with the javascript.

void mousePressed() {
if (ms.isReady() && isMouseInDisk()) {
link("http://lovelago.googlepages.com/text_box6m.html#Bottom","_self");
}

This works in both FF and Safari, but the tell-tale sign that it did not talk to the scroll javascript was that the anchor name appeared on the end of the url "#bottom" after being clicked, otherwise the url would just end in "html" (and scroll down).

It's not scrolling down that is the problem, the bottom right image is a PNG and works fine with the javascript, it's the oscillation Java applet beneath that PNG that I need to turn into a button to scroll back up.

On the following page I implemented your code, but get the same result, it does not talk to the javascript:

http://lovelago.googlepages.com/text_box6n.html

"window.location.hash='#bottom'" has been suggested to me, I'm not sure how to implement it, would this have a chance of working?

Thanks for your time.

PhiLho

Re: using the <embed> tag over <object>
Reply #3 - Nov 13^th, 2008, 5:59pm

That's entirely another problem. The solution I gave was using the standard browser behavior, like when you click on a regular link with an anchor.

What you want is different, you need to call a JavaScript function upon clicking on the Java applet. For this, you need to use the Netscape.JavaScript interface, as described in the Libraries page of Processing: "Methods for interfacing between Javascript and Java Applets exported from Processing."

JS was designed from the start (I think) to communicate with Java...

OK, I will see what I can get, you are lucky I am curious to experiment here...

henry

Re: using the <embed> tag over <object>
Reply #4 - Nov 13^th, 2008, 6:33pm

I know, I didn't expect to get any more help after the Rotating Disc applet, which was really good of you. I bet others will want to do this, I think a whole site on one pge is so much more elegant, when I release this FF ext I didn't want tit to look like all those other sites, a lot look the same with Mac bottom mirror reflections, 800x600 blog look a likes, and I didn't want to go the flash route, everything I've got is open source from editors to code.

That was one of the design criteria I set myself. But anything I was going to do was going to need a lot of help, research and testing, nearly there! I do really appreciate your help

PhiLho

Re: using the <embed> tag over <object>
Reply #5 - Nov 18^th, 2008, 11:26pm

OK, I played a bit with JS<->Java interaction, I might fill in the corresponding Hacks page which is empty...

Meanwhile, I will just show here how to do what you need: call a JavaScript function with a parameter. It is actually very simple. I replaced my link() call by:
Code:

void mousePressed() {
  if (ms.isReady() && isMouseInDisk()) {
    JSObject win = (JSObject) JSObject.getWindow(this);
    String[] arguments = { "Hello World!" };
    win.call("DumbTest", arguments);
//    link("http://Processing.org");
  }
}

After exporting, I added the following lines in the header of index.html:
Code:

<script type="text/javascript" language="JavaScript">//<![CDATA[
function DumbTest(message)
{
  alert("This is a dumb test with a message:\n" + message);
}
//]]>
</script>

And when I clicked on the icon, I got the alert message!

henry Junior Member Offline Posts: 62	Re: using the <embed> tag over <object> Reply #6 - Nov 19^th, 2008, 10:10am Thanks for the double post, is "JSObject win" anything to do with Windows? I am a Mac user, I think it could mean window though. I substituted the mouseClick code but I get the error telling me it cannot find a type or class object called JSObject. I appreciate this is just a snippet. Thanks.

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: using the <embed> tag over <object> Reply #7 - Nov 19^th, 2008, 10:02pm Ah sorry, I knew I was forgetting something... You must add the line: import netscape.javascript.*; at the start of the sketch.

henry

Re: using the <embed> tag over <object>
Reply #8 - Nov 19^th, 2008, 11:25pm

Ahh, the Processing code works, I run it and it works, but when I export it all I get is a blank applet. Nothing. I added the html code and still get a blank applet. I have tried it in Safari v3 and FFv2, the same blank applet.

I noticed you ask for "netscape" ~is that anything to do with the browser? is the code browser dependent?

Thanks.

PhiLho

Re: using the <embed> tag over <object>
Reply #9 - Nov 20^th, 2008, 3:29pm

I fear I can't help much here, as I don't have a Mac...
I tried the applet (exported by Processing) with FF3, IE6, Safari 3, Opera 9, it worked each time.
"Netscape" is here only because they invented JavaScript, hence Java <-> JS communication. But their method is supported by all major browsers.

Oh, ensure that your browsers support at least Java 1.5, they might still use an older Java, 1.4 or worse...

henry

Re: using the <embed> tag over <object>
Reply #10 - Nov 20^th, 2008, 3:44pm

I fear the problem is my end, its really wired. The example of 6m that I loaded onto my server still works for me, that is using a version called 7c of the processing code, but when I try to load that 7c example in my browser from the exported html it show blank, as do the two versions before that!

I don't know why, but even older ones work (the ones with the green dot). SO I'm not sure whats wrong but I'll have to keep trying...

henry

Re: using the <embed> tag over <object>
Reply #11 - Nov 20^th, 2008, 4:11pm

Retracing my steps, everything was working until I loaded your new code: the last working version I had was 7c (you can see that from the http://lovelago.googlepages.com/text_box6m.html example at the beginning of this thread).

Your new version I called 7d, now the code for that in Processing, will 'run', I can click it and when I do the code stops and lots of red writing appears in the Processing app.

Since I clicked the link, the version of 7a, 7b, 7c do not load in a web browser. So I tried them in processing and they work but on export they do not show up, this is the official export from Processing, the example index.html.

But the recursion examples work, right up unto the current one with varying speed code added, the export example index.html works also. What is really strange is that if I access the http://lovelago.googlepages.com/text_box6m.html which has the version 7c code, it works!

Ever since I tried the new code the examples for the spinning disc have not worked, they just load up as a blank block (the correct dimensions). I am thinking, maybe Javascript messed things up and it needs flushing, I've heard that terminology before, how do I do this.

Because everything works, except the rotating disc, it could be its stuck at the end of the code and any time any version is loaded it just shows white? And how come the 7c embedded java applet works from my server but not my HDD, it must be something here on my computer, but related to those spinning disc files only. As I said the far earlier ones work now, I haven't changed the 7a, 7b, 7c, so I think its looking at something and is stuck.

henry

Re: using the <embed> tag over <object>
Reply #12 - Nov 20^th, 2008, 4:19pm

Oh my life I don't get this, I just uploaded it to my server and it works! But why not my computer?

http://lovelago.googlepages.com/text_box7.html

So what do I have to do to make the HTML javascript link to the "#bottom" button, instead of popping-up a message:

<script type="text/javascript" language="JavaScript">//<![CDATA[
function DumbTest(message)
{
alert("This is a dumb test with a message:\n" + message);
}
//]]>

I take it that the processing code is just sending out a signal, so nothing needs to be changed, its the javascripts job to listen out to that signal and perform an action?

henry

Re: using the <embed> tag over <object>
Reply #13 - Nov 20^th, 2008, 5:06pm

I GOT IT.

I know what the problem is. Checking back on old code I found that if the image circulating on the disk was not linked properly (i.e. it could not be found when running) the top half of the disc would just disappear (this in version 7), it then dawned on me that my new server could not link to the prior server where the picture was located (which processing had been hard coded to look for it) and that the new code you wrote might make the whole thing dependent on the image.

I was right, the whole applet would be blank, not just the top half. So now it utterly works! But it must know where the image is kept.

henry

Re: using the <embed> tag over <object>
Reply #14 - Nov 22^nd, 2008, 3:08pm

I saw that the pop-up message box gets one message from the Java applet and from the Javascript inside the HTML. What I have done now is to replace the Javascript with:

</style>

<script type="text/javascript" language="JavaScript">//<![CDATA[
function DumbTest(message)
{
function moveWindow (){window.location.hash="bottom";}
}
//]]>
</script>

and realising the Java looks at:

String[] arguments = { "Hello World!" };

I tried changing that to the link to #Bottom, but I can't get it to work, changing that to a 'link' says a string can't be a void. I'm also confused as to what one should change, I thought it would be in the HTML as the Java applet should just send the message to tell the JavaScript do something.

As the disc is not the actual Java applet I wanted to change into a button, I thought I'd do change that to the recursion example now:

private static final int WIDTH = 100;
private static final int HEIGHT = 100;
private static final int HWIDTH = (WIDTH / 2);
private static final int HHEIGHT = (HEIGHT / 2);
private static final float LENGTH = (HEIGHT * .6);

float theta = 0.0;
float angle = 0.0;

import netscape.javascript.*;

void setup() {
size(WIDTH, HEIGHT);
smooth();
}

void draw() {
background(255);

// move origin to centre
translate(HWIDTH, 0);

// theta will oscillate between -1 and 1
// we want the angle to go from about -45 from vertical to +45 from vertical
// except we're using radians so -(PI/4) to +(PI/4)
// ALSO 0 is to the right so add PI/2 to rotate it to the bottom
// made this .2 * PI
angle = HALF_PI + (sin(theta) * PI * .1);

// With each cycle, increment theta
theta += 0.03;

drawCircle(LENGTH, LENGTH - 1);
}

void mousePressed() {
JSObject win = (JSObject) JSObject.getWindow(this);
String[] arguments = {"#Bottom"};
win.call("DumbTest", arguments);
// link("http://Processing.org");

}

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 13-8: Recursion (modified)

void drawCircle(float len, float radius) {
noFill();

float x = (len) * cos(angle);
float y = (len) * sin(angle);
ellipse(x, y, radius, radius);
if(radius > 2) {
// drawCircle() calls itself twice, creating a branching effect.
drawCircle(len + radius / 7, radius / 2);
drawCircle(len - radius / 1, radius / 2);
}
}