Generated HTML...

g4bri3l

in Integration and Hardware • 2 years ago

Here's the problem...let's suppose I have a simple HTML page with two textfields, the user type in, I don't know, let's say his name and surname, then when he/she presses Enter I get this code...(generated Html):

...
      < td id= "name">John</ td>
....
      < td id= "surname">Red</ td>
...

Before he typed Enter it was just:

...
      < td id= "name"></ td>
....
      < td id= "surname"></ td>
...

but I want to get his name and surname and put them in my Sketch...

PS = I know I can do that easily in processing using textfields and so on, but that's not what I need...

Replies(12)

g4bri3l

Re: Generated HTML...

2 years ago

Well, since I can't find a documentation about netscape.javascript.* I'm having some troubles making that work, is there someone who can help me to make the processing applet and a random javascript communicate ?

Let's say that I want my applet to have the two vars name and surname from the javascript which implements a submint form...

Maybe my explanation wasn't godd enough... =(

Thanks =D

mbraendle

Re: Generated HTML...

2 years ago

See http://forum.processing.org/topic/modify-html-instructions-from-a-sketch for an example.

g4bri3l

Re: Generated HTML...

2 years ago

Thank you, I already read that topic. But I'm still having troubles. I think the problem right now is that I don't know how to correctly put everything together...I mean...I have this html page with an input textfield, I want the user to put in his name, then when he presses ok the applet starts and knows the name of the user...any more hints ?

This is my html page + script

<head>
<title>Test page</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var form = $("#myForm");
var ontologyID = $("#ontologyID");
var idValue = $('#IDValue');
var className = $('#className');
var classValue = $('#classValue');
var check = $('#check');
//On Submitting
form.submit(function(event){
//form sending prevention
event.preventDefault();
idValue.html(ontologyID.val());
ontologyID.val('');
classValue.html(className.val());
className.val('');
check.html(1);
});
});
</script>
<form id="myForm">
<table>
<tr>
<td>OntologyID</td>
<td><input type="text" name="ontologyID" id="ontologyID"/></td>
<td id="IDValue"></td>
</tr>
<tr>
<td>ClassName</td>
<td><input type="text" name="className" id="className"/></td>
<td id="classValue"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="postN" class="postN"/></td>
<td id="check"></td>
</tr>
</table>
</form>
</body>

I'm sorry but I'm not really understanding how it's supposed to work =\ ... dunno how to put everything together as I said before..

mbraendle

Re: Generated HTML...

2 years ago

Seems more to be a JavaScript problem than a Processing problem.

There are two possible scenarios:

1. Push the values only when the applet is deployed:

If you look at the JavaScript code of my Library Navigator ( http://www.infochembio.ethz.ch/en/librarynavigator.html ):

http://www.infochembio.ethz.ch/js/deploy_visualisation_en.js , you will see that, beginning with line 99, I push various dynamic parameters to the applet using the var parameters = {} section of the applet deployment part.

These parameters are then read by Processing using the param() statement and processed further.

So, when you export the applet, you may apply changes the in the index.html file or move the JavaScript Code out of it (as I did).

2. Dynamically change variables during runtime of the applet:

One can dynamically set a variable in Processing by calling a Processing (=Java) method that is exposed via the DOM. According to my experience and tests, one shouldn't do that too often in a given timeframe (e.g. using a for loop in JS), since it may result in timing problems and instability of the applet because it runs in a separate thread.

For an example, see http://www.infochembio.ethz.ch/js/topics_services_en.js , lines 345-346, which calls the update_view() method and passes two variables action_type and action_id.

The Processing code is as follows:

public void update_view(String action, String action_id) {
noLoop();
.
.
.
loop();
}

noloop() as the first action stops the drawing, so that nothing interferes with the processing of the update_view() method. loop() then starts the drawing again, with all the updated variables.

My solution in the Library Navigator is a little bit more complicated, as you may gather from the lengthy JS code: First I push the data (type and id of user action, the id of the view to be displayed and the value of the action, which might be a simple number, but can also be a URL) using AJAX to a database table for logging purposes; then I directly pass action type and ID given the method above to Processing. The Processing update_view() method then uses the action id and type to read the remaining parameters from the action table and depending on them, loads several other data (space objects etc.) from the database using XML calls.

BTW: I see that you are working on ontologies - may you publish a link where I can have a look at?

g4bri3l

Re: Generated HTML...

2 years ago

Nice! I can finally let Processing know the parameters! But there's still a little problem, it's another JS problem...now the applet knows the ontologyID and the className, but when I click on Submit, it refreshes the window and starts the applet in a blank page, deleting the textfields and everything else showing just the applet, my purpose is to show the applet under the textfields or wherever I want, keeping every other element so I can do another research If I want to...

PS = I wish I could give you a link but we are still working on this project offline so I actually have nothing to show you (we are working locally)

mbraendle

Re: Generated HTML...

2 years ago

Then you should use scenario 2 as described above and pass the parameters by calling a method in Processing.

Have a look at line 91 in http://www.infochembio.ethz.ch/js/deploy_visualisation_en.js

In the attributes section (that you also find in the index.html file that is created upon export of your applet), I have added an id attribute plus a name (id: 'libraryspace', ), and the mayscript: true attribute.

With any of the DOM methods (I use the YUI libraries), you can then access the applet using that id (you can do that similarly with your favorite AJAX library), here as I do in http://www.infochembio.ethz.ch/js/topics_services_en.js:

                 
                  var Dom = YAHOO.util.Dom;
(...)
var library_space = Dom.get("library_space");
library_space.update_view(action_type,action_id);

The rest is as described in my post before.

In my case, I use both scenarios, because users can either jump in from another web page (e.g. using a link like http://www.infochembio.ethz.ch/en/librarynavigator.html?location=366+C ), or they can select a topic, service or location in the left navigation frame when the applet is running already, and switch between them, which immediately updates the applet without restarting it.

g4bri3l

Re: Generated HTML...

2 years ago

Problem Solved. I deploy the applet using the canvas tag, but I'm using the library controlP5 in the main *.pde and when I run the applet via web it says:

"ControlP5 is not defiend"...what am I doing wrong ? Is there a special folder where I should put the library ?

PhiLho

Re: Generated HTML...

2 years ago

If you mean that you switched to Processing.js, you cannot use any Java library with it...

g4bri3l

Re: Generated HTML...

2 years ago

:sadface:

I'll figure it out...thank you =D

mbraendle

Re: Generated HTML...

2 years ago

Since everything is in HTML/JavaScript, you wouldn't need controlP5 for the GUI anymore.

g4bri3l

Re: Generated HTML...

2 years ago

I've switched back to Processing, dicthing the javscript version as i nedd to handle cross origin XML, I' ve menaged to deploy correctly the applet, but I can' use its methods via javascript.

I've got this method in the applet:

public void beep (){
      noLoop();
      oID="beeep";
      loop();
}

It simply changes the value of a variable.

I'm deploying the applet using a script into a <div> block adding an id and mayscript:true

<script type="text/javascript">

    var attributes = {
            code: "web_test__3.class",
            archive: "web_test__3.jar",
            id : "applet",
            width: 200,
            height: 200,
            image: "loading.gif",
            mayscript: true
          };
          var parameters = {
            };
          var version = "1.5";
          deployJava.runApplet(attributes, parameters, version);

    </script>

Now I'm trying to access the applet via JQuery form another script, triggered by a click on a button and nothing changes:

form.submit(function(event){
        //form sending prevention
        event.preventDefault();


        $('#applet').beep();





    });

Where am I doing wrong?

g4bri3l

Re: Generated HTML...

2 years ago

I found out that it's pretty simple..something like

document.myAppletId.myFunction();

works perfectly =D

Top Reply

Generated HTML...

Replies(12)

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Re: Generated HTML...

Statistics

Tags

Actions

Related Posts