Applet to javascript woes..

So I’m working on making a game using Slick as an applet, but seem to have gotten myself stumped. :-/

I’ve got the basic applet up and running in a webpage however when it comes to having the applet call a Javascript function and vice versa, all I can manage to do is to hang the java plugin and lock up the browser. Eventually (in Chrome at least) the browser detects that the Java plugin is not responding and asks me if I want to kill it. I do so and then the webpage runs the function.

I’m using a statebased game and in my main gamestate GameBoard’s init I do this:

public void init(GameContainer gc, StateBasedGame sbg) 
         throws SlickException { 
      Log.info("Init Board"); 
      if (gc instanceof AppletGameContainer.Container) { 
         Applet applet = ((AppletGameContainer.Container) gc).getApplet(); 
         jso = JSObject.getWindow(applet); 
         if(jso != null ) 
            try { 
               jso.call("Update", new String[] {"Hello from Applet"}); 
            } 
            catch (Exception ex) { 
                ex.printStackTrace(); 
            } 
         Log.info("APPLET"); 
         Log.info(applet.getParameter("name")); 
         //applet.getParameterInfo() 
      } 
... ... more init junk .... 

The culprit is the jso.call line…
I’ve tried it in the Update portion of the class, Signing Jars, making sure the Applet Tag has the MAYSCRIPT in it…

At this point I’ve read every piece of documentation I can find and am pretty much at my wits end. Any suggestions would be more than welcome.

in chrome if you call a java method it often lock/hang (showing dialog) until you wait that applet is fully loaded before calling java from JS

even doing in JS :
var test=document.getElementById(‘myApplet’).anything ; //may lock/hang

I tossed in a counter so it would try the call out to javascript on the 1,000th update… which lets me play around in the game and have the applet working a bit to make sure it’s finished loading it’s images etc… but no luck it still seizes up :frowning:
I was able to add a bunch of Log messages in there and its definatly the:
jso.call(“Update”, new String[] {“Hello from Applet”});
line that’s causing the hang.
I tried
JSObject response = (JSObject) jso.eval(“Update(‘hullo’);”);
and in gives the same response.

strange but not an expert in slick does this one work well ?

import java.awt.*;
import java.applet.*;
import java.net.*;

public class JS extends Applet 
{
	

	public void paint(Graphics g) 
	{
		try
		{
		 this.getAppletContext().showDocument(new URL("Javascript:alert('Hello from Applet')"));	
		}
		catch(Throwable t)
		{
			t.printStackTrace();
		}
	}
}

Not in the Opera browser.

yup but I notice that OP use chrome ^^, just to ensure there is no prob with liveconnect

Yeah that worked.
I made that JS the al_main parameter and got a nice little javascript alert.

:-/ so that appears to be working.

The applet code I’m running is virtually identical to the one on the Slick Wiki tutorial
here: http://slick.cokeandcode.com/wiki/doku.php?id=03_-_setting_up_the_web-page
With the exception of having added MAYSCRIPT to the applet tag using my class in the parameter.

you got free time ? me too :slight_smile: maybe try …

jso = JSObject.getWindow(applet); 

replaced by

jso = JSObject.getWindow(this); 

EDIT:
MAYSCRIPT was ignored in some browsers for a while ( it seems to be requiered now in some case…WTF…), and it should not change anything (but this is only conditional)

EDIT2:
mabe a new plugin different classloader issue ?

Unfortunately that won’t compile.
The method getWindow(Applet) in the type JSObject is not applicable for the arguments (GameBoard)

If I understand the way things work (and I may be horribly horribly wrong) is that
When you call the slick.AppletGameContainer from the Applet tag it wraps itself around the standalone game class (StateBasedGame in this case) and runs the main function.
The StateBasedGame then makes the canvas and graphics and then passes them to the individual game states…(GameBoard in this case) which is where I’m trying to run the call.

exactly how any of that works … well… is kinda fuzzy to me. :-\

I am pretty sure I have experienced problem without mayscript recently, will look if I can remember how (not sure but probably on FF, will let you know)

EDIT: or maybe safari…

As of java plugin2, MAYSCRIPT no longer does anything and javascript communication is enabled by default (as far as I know there is no way to disable it anymore).

In Slick2D you can get the applet object from the container using the following:

// you can check if container is an applet 
if (container instanceof AppletGameContainer.Container) { 
    // do foo 
} 


// cast the container to get the applet instance 
Applet applet = ((AppletGameContainer.Container) container).getApplet(); 
jso = JSObject.getWindow(applet);

You could maybe try calling the javascript from another thread to make sure its not blocking the main thread.

another try plz…

Java :

import java.awt.*;
import java.applet.*;
import java.net.*;
import netscape.javascript.*;
public class JS extends Applet 
{
	private int n;
	public String test;
	public void paint(Graphics g) 
	{
	
		try
		{
			if(n++==0)
			{
			 //this.getAppletContext().showDocument(new URL("Javascript:alert('Hello from Applet')"));
			 JSObject.getWindow(this).eval("alert('Hello from Applet 2')");	
			}
			g.setColor(Color.black);
			g.drawString(this.test,50,50);
		}
		catch(Throwable t)
		{
			t.printStackTrace();
		}
	}
}

HTML :

<html>
	<head>
	<script language=Javascript>
	
		function testLiveConnect()
		{
			try
			{
				var applet=document.getElementById('appletTest');
				applet.test="from javascript";
				applet.repaint();
			}
			catch(exception)
			{
				alert(exception);
			}
		
		}
	</script>
	</head>
	<body onload="testLiveConnect()">
			<applet 
				id="appletTest"
				code	= "JS.class"
				width	= "500"
				height	= "300"
				>
			</applet>
	</body>
</html>

“hum… that’s embarrasing…”

can’t reproduce the problem in any browser I got

Notice: for the last sample I posted opera & safari draw the “from javascript” string but do not show any JS popup ( throw a malformed URLException, seems they need a “javascript:” proto or such while other chrome/IE/FF doesn’t requiere it )

(just an idea, maybe try to do your work in another method than the init)

Woo!

  1. Slick Applet calling Javascript functions [Done!]

Thanks for the excellent help guys.
After reading up a bit on how threading basically works I was able to start a new thread and in the run() get the Applet and run the jso.call and it worked like a champ!!!

For posterity http://www.realapplets.com/tutorial/ThreadExample.html is the example that I used to show me how to get the new thread working.

  1. … But going the other direction…

I’ve found this thread: http://lwjgl.org/forum/index.php?topic=3266.0 that basically says

[quote]AppletLoader.getApplet() method, can’t you use that to get your main class and call methods from it?
[/quote]
…which… i Almost understand… but I don’t get how to implement that… Anyone able to clarify a bit?

Thanks ever so much.

Ok, so you’d like to know how javascript to java communication works.

Give your applet tag an id.

<applet code=“org.lwjgl.util.applet.AppletLoader”
id = “myApplet”
archive=“lwjgl_util_applet.jar”
codebase="."
width=“640” height=“480”>

The main applet in this case is the appletloader and you’ll need to get the applet loaded by it (the Slick2D applet), this is done as follows.

var appletloader = document.getElementById(‘myApplet’);
var applet = appletloader.getApplet();

That is it, you have the main applet object (which is slicks applet instance) and can call any public method therein using applet.x()

As you want to call methods in your main slick Game class you’ll need to get this from slicks applet instance. Unfortunately Slicks API doesn’t expose getting the Game object (although you could raise a RFE).

One immediate solution is that you can use a custom AppletGameContainer which exposes this for you.

just a quick mock up at a custom AppletGameContainer, just put it with your own code and point al_main to it in the html (instead of at the standard AppletGameContainer).

You should then be able to do applet.getGame() which will return your main class and allowing you to call any method therein (e.g. applet.getGame().x() ).


import java.applet.Applet;
import java.awt.BorderLayout;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.Label;
import java.awt.Panel;
import java.awt.TextArea;
import java.io.PrintWriter;
import java.io.StringWriter;
import java.nio.ByteBuffer;

import org.lwjgl.BufferUtils;
import org.lwjgl.LWJGLException;
import org.lwjgl.input.Cursor;
import org.lwjgl.input.Mouse;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.GL11;
import org.lwjgl.opengl.PixelFormat;
import org.newdawn.slick.Game;
import org.newdawn.slick.GameContainer;
import org.newdawn.slick.Graphics;
import org.newdawn.slick.Image;
import org.newdawn.slick.SlickException;
import org.newdawn.slick.openal.SoundStore;
import org.newdawn.slick.opengl.CursorLoader;
import org.newdawn.slick.opengl.ImageData;
import org.newdawn.slick.opengl.InternalTextureLoader;
import org.newdawn.slick.util.Log;

/**
 * A game container that displays the game as an applet. Note however that the
 * actual game container implementation is an internal class which can be
 * obtained with the getContainer() method - this is due to the Applet being a
 * class wrap than an interface.
 *
 * @author kevin
 */
public class AppletGameContainer extends Applet {
   /** The GL Canvas used for this container */
   protected ContainerPanel canvas;
   /** The actual container implementation */
   protected Container container;
   /** The parent of the display */
   protected Canvas displayParent;
   /** The thread that is looping for the game */
   protected Thread gameThread;
   /** Alpha background supported */
   protected boolean alphaSupport = true;
   
   /**
    * @see java.applet.Applet#destroy()
    */
   public void destroy() {
      if (displayParent != null) {
         remove(displayParent);
      }
      super.destroy();
      
      Log.info("Clear up");
   }

   /**
    * Clean up the LWJGL resources
    */
   private void destroyLWJGL() {
      container.stopApplet();
      
      try {
         gameThread.join();
      } catch (InterruptedException e) {
         Log.error(e);
      }
   }

   /**
    * @see java.applet.Applet#start()
    */
   public void start() {
      
   }
   
   /**
    * Start a thread to run LWJGL in
    */
   public void startLWJGL() {
      if (gameThread != null) {
         return;
      }
      
      gameThread = new Thread() {
         public void run() {
            try {
               canvas.start();
            }
            catch (Exception e) {
               e.printStackTrace();
               if (Display.isCreated()) {
                  Display.destroy();
               }
               displayParent.setVisible(false);//removeAll();
               add(new ConsolePanel(e));
               validate();
            }
         }
      };
      
      gameThread.start();
   }

   /**
    * @see java.applet.Applet#stop()
    */
   public void stop() {
   }

   /**
    * @see java.applet.Applet#init()
    */
   public void init() {
      removeAll();
      setLayout(new BorderLayout());
      setIgnoreRepaint(true);

      try {
         Game game = (Game) Class.forName(getParameter("game")).newInstance();
         
         container = new Container(game);
         canvas = new ContainerPanel(container);
         displayParent = new Canvas() {
            public final void addNotify() {
               super.addNotify();
               startLWJGL();
            }
            public final void removeNotify() {
               destroyLWJGL();
               super.removeNotify();
            }

         };

         displayParent.setSize(getWidth(), getHeight());
         add(displayParent);
         displayParent.setFocusable(true);
         displayParent.requestFocus();
         displayParent.setIgnoreRepaint(true);
         setVisible(true);
      } catch (Exception e) {
         Log.error(e);
         throw new RuntimeException("Unable to create game container");
      }
   }

   /**
    * Get the GameContainer providing this applet
    *
    * @return The game container providing this applet
    */
   public GameContainer getContainer() {
      return container;
   }
   
   /**
    * Get the Game object for this applet
    *
    * @return The game object in the GameContainer
    */
   public Game getGame() {
	   return container.getGame();
   }

   /**
    * Create a new panel to display the GL context
    *
    * @author kevin
    */
   public class ContainerPanel {
      /** The container being displayed on this canvas */
      private Container container;

      /**
       * Create a new panel
       *
       * @param container The container we're running
       */
      public ContainerPanel(Container container) {
         this.container = container;
      }

      /**
       * Create the LWJGL display
       * 
       * @throws Exception Failure to create display
       */
      private void createDisplay() throws Exception {
         try {
            // create display with alpha
            Display.create();//new PixelFormat(8,8,GameContainer.stencil ? 8 : 0));
            alphaSupport = true;
         } catch (Exception e) {
            // if we couldn't get alpha, let us know
            alphaSupport = false;
             Display.destroy();
             // create display without alpha
            Display.create();
         }
      }
      
      /**
       * Start the game container
       * 
       * @throws Exception Failure to create display
       */
      public void start() throws Exception {
         Display.setParent(displayParent);
         Display.setVSyncEnabled(true);
         
         try {
            createDisplay();
         } catch (LWJGLException e) {
            e.printStackTrace();
            // failed to create Display, apply workaround (sleep for 1 second) and try again
            Thread.sleep(1000);
            createDisplay();
         }
         
         initGL();
         displayParent.requestFocus();
         container.runloop();
      }

      /**
       * Initialise GL state
       */
      protected void initGL() {
         try {
            InternalTextureLoader.get().clear();
            SoundStore.get().clear();

            container.initApplet();
         } catch (Exception e) {
            Log.error(e);
            container.stopApplet();
         }
      }
   }

   /**
    * A game container to provide the applet context
    *
    * @author kevin
    */
   public class Container extends GameContainer {
      
	   
	   /**
	    * Returns the game instance held by the container
	    */
	   public Game getGame() {
		   return game;
	   }
	   
	   /**
       * Create a new container wrapped round the game
       *
       * @param game The game to be held in this container
       */
      public Container(Game game) {
         super(game);

         width = AppletGameContainer.this.getWidth();
         height = AppletGameContainer.this.getHeight();
      }

      /**
       * Initiliase based on Applet init
       *
       * @throws SlickException Indicates a failure to inialise the basic framework
       */
      public void initApplet() throws SlickException {
         initSystem();
         enterOrtho();

         try {
            getInput().initControllers();
         } catch (SlickException e) {
            Log.info("Controllers not available");
         } catch (Throwable e) {
            Log.info("Controllers not available");
         }

         game.init(this);
         getDelta();
      }

      /**
       * Check if the applet is currently running
       *
       * @return True if the applet is running
       */
      public boolean isRunning() {
         return running;
      }

      /**
       * Stop the applet play back
       */
      public void stopApplet() {
         running = false;
      }

      /**
       * @see org.newdawn.slick.GameContainer#getScreenHeight()
       */
      public int getScreenHeight() {
         return 0;
      }

      /**
       * @see org.newdawn.slick.GameContainer#getScreenWidth()
       */
      public int getScreenWidth() {
         return 0;
      }
      
      /**
       * Check if the display created supported alpha in the back buffer
       *
       * @return True if the back buffer supported alpha
       */
      public boolean supportsAlphaInBackBuffer() {
         return alphaSupport;
      }
      
      /**
       * @see org.newdawn.slick.GameContainer#hasFocus()
       */
      public boolean hasFocus() {
         return true;
      }
      
      /**
       * Returns the Applet Object
       * @return Applet Object
       */
      public Applet getApplet() {
         return AppletGameContainer.this;
      }
      
      /**
       * @see org.newdawn.slick.GameContainer#setIcon(java.lang.String)
       */
      public void setIcon(String ref) throws SlickException {
         // unsupported in an applet
      }

      /**
       * @see org.newdawn.slick.GameContainer#setMouseGrabbed(boolean)
       */
      public void setMouseGrabbed(boolean grabbed) {
         Mouse.setGrabbed(grabbed);
      }

	  /**
	   * @see org.newdawn.slick.GameContainer#isMouseGrabbed()
	   */
      public boolean isMouseGrabbed() {
    	  return Mouse.isGrabbed();
	  }
      
      /**
		 * @see org.newdawn.slick.GameContainer#setMouseCursor(java.lang.String,
		 *      int, int)
		 */
      public void setMouseCursor(String ref, int hotSpotX, int hotSpotY) throws SlickException {
         try {
            Cursor cursor = CursorLoader.get().getCursor(ref, hotSpotX, hotSpotY);
            Mouse.setNativeCursor(cursor);
         } catch (Throwable e) {
            Log.error("Failed to load and apply cursor.", e);
			throw new SlickException("Failed to set mouse cursor", e);
         }
      }

      /**
       * Get the closest greater power of 2 to the fold number
       * 
       * @param fold The target number
       * @return The power of 2
       */
      private int get2Fold(int fold) {
          int ret = 2;
          while (ret < fold) {
              ret *= 2;
          }
          return ret;
      }
      
      /**
       * {@inheritDoc}
       */
      public void setMouseCursor(Image image, int hotSpotX, int hotSpotY) throws SlickException {
          try {
             Image temp = new Image(get2Fold(image.getWidth()), get2Fold(image.getHeight()));
             Graphics g = temp.getGraphics();
             
             ByteBuffer buffer = BufferUtils.createByteBuffer(temp.getWidth() * temp.getHeight() * 4);
             g.drawImage(image.getFlippedCopy(false, true), 0, 0);
             g.flush();
             g.getArea(0,0,temp.getWidth(),temp.getHeight(),buffer);
             
             Cursor cursor = CursorLoader.get().getCursor(buffer, hotSpotX, hotSpotY,temp.getWidth(),temp.getHeight());
             Mouse.setNativeCursor(cursor);
          } catch (Throwable e) {
             Log.error("Failed to load and apply cursor.", e);
 			 throw new SlickException("Failed to set mouse cursor", e);
          }
       }
      
      /**
       * @see org.newdawn.slick.GameContainer#setIcons(java.lang.String[])
       */
      public void setIcons(String[] refs) throws SlickException {
         // unsupported in an applet
      }

      /**
       * @see org.newdawn.slick.GameContainer#setMouseCursor(org.newdawn.slick.opengl.ImageData, int, int)
       */
      public void setMouseCursor(ImageData data, int hotSpotX, int hotSpotY) throws SlickException {
         try {
            Cursor cursor = CursorLoader.get().getCursor(data, hotSpotX, hotSpotY);
            Mouse.setNativeCursor(cursor);
         } catch (Throwable e) {
            Log.error("Failed to load and apply cursor.", e);
			throw new SlickException("Failed to set mouse cursor", e);
         }
      }

      /**
       * @see org.newdawn.slick.GameContainer#setMouseCursor(org.lwjgl.input.Cursor, int, int)
       */
      public void setMouseCursor(Cursor cursor, int hotSpotX, int hotSpotY) throws SlickException {
         try {
            Mouse.setNativeCursor(cursor);
         } catch (Throwable e) {
            Log.error("Failed to load and apply cursor.", e);
			throw new SlickException("Failed to set mouse cursor", e);
         }
      }

      /**
       * @see org.newdawn.slick.GameContainer#setDefaultMouseCursor()
       */
      public void setDefaultMouseCursor() {
      }

      public boolean isFullscreen() {
         return Display.isFullscreen();
      }

      public void setFullscreen(boolean fullscreen) throws SlickException {
         if (fullscreen == isFullscreen()) {
            return;
         }

         try {
            if (fullscreen) {
               // get current screen resolution
               int screenWidth = Display.getDisplayMode().getWidth();
               int screenHeight = Display.getDisplayMode().getHeight();

               // calculate aspect ratio
               float gameAspectRatio = (float) width / height;
               float screenAspectRatio = (float) screenWidth
                     / screenHeight;

               int newWidth;
               int newHeight;

               // get new screen resolution to match aspect ratio

               if (gameAspectRatio >= screenAspectRatio) {
                  newWidth = screenWidth;
                  newHeight = (int) (height / ((float) width / screenWidth));
               } else {
                  newWidth = (int) (width / ((float) height / screenHeight));
                  newHeight = screenHeight;
               }

               // center new screen
               int xoffset = (screenWidth - newWidth) / 2;
               int yoffset = (screenHeight - newHeight) / 2;

               // scale game to match new resolution
               GL11.glViewport(xoffset, yoffset, newWidth, newHeight);

               enterOrtho();

               // fix input to match new resolution
               this.getInput().setOffset(
                     -xoffset * (float) width / newWidth,
                     -yoffset * (float) height / newHeight);

               this.getInput().setScale((float) width / newWidth,
                     (float) height / newHeight);

               width = screenWidth;
               height = screenHeight;
               Display.setFullscreen(true);
            } else {
               // restore input
               this.getInput().setOffset(0, 0);
               this.getInput().setScale(1, 1);
               width = AppletGameContainer.this.getWidth();
               height = AppletGameContainer.this.getHeight();
               GL11.glViewport(0, 0, width, height);

               enterOrtho();

               Display.setFullscreen(false);
            }
         } catch (LWJGLException e) {
            Log.error(e);
         }

      }

      /**
       * The running game loop
       * 
       * @throws Exception Indicates a failure within the game's loop rather than the framework
       */
      public void runloop() throws Exception {
         while (running) {
            int delta = getDelta();

            updateAndRender(delta);

            updateFPS();
            Display.update();
         }

         Display.destroy();
      }
   }
   
   /**
    * A basic console to display an error message if the applet crashes.
    * This will prevent the applet from just freezing in the browser
    * and give the end user an a nice gui where the error message can easily
    * be viewed and copied.
    */
   public class ConsolePanel extends Panel {
      /** The area display the console output */
      TextArea textArea = new TextArea();
      
      /**
       * Create a new panel to display the console output
       * 
       * @param e The exception causing the console to be displayed
       */
      public ConsolePanel(Exception e) {
         setLayout(new BorderLayout());
         setBackground(Color.black);
         setForeground(Color.white);
         
         Font consoleFont = new Font("Arial", Font.BOLD, 14);
         
         Label slickLabel = new Label("SLICK CONSOLE", Label.CENTER);
         slickLabel.setFont(consoleFont);
         add(slickLabel, BorderLayout.PAGE_START);
         
         StringWriter sw = new StringWriter();
         e.printStackTrace(new PrintWriter(sw));
         
         textArea.setText(sw.toString());
         textArea.setEditable(false);
         add(textArea, BorderLayout.CENTER);
         
         // add a border on both sides of the console
         add(new Panel(), BorderLayout.LINE_START);
         add(new Panel(), BorderLayout.LINE_END);
         
         Panel bottomPanel = new Panel();
         bottomPanel.setLayout(new GridLayout(0, 1));
         Label infoLabel1 = new Label("An error occured while running the applet.", Label.CENTER);
         Label infoLabel2 = new Label("Plese contact support to resolve this issue.", Label.CENTER);
         infoLabel1.setFont(consoleFont);
         infoLabel2.setFont(consoleFont);
         bottomPanel.add(infoLabel1);
         bottomPanel.add(infoLabel2);
         add(bottomPanel, BorderLayout.PAGE_END);
      }
   }
}

Thank you so much!

The one little thing I’d missed was that appletloader.getApplet(); is called in the javascript… which totally makes sense in hindsight. :slight_smile:
My brain had skipped the point apparently.

And thank you so much for custom AppletGameContainer mockup.