The web-applet I am building is an interactive 3D display of an architectural 3D model with buttons and text input fields overlaid on it that allow users to login.

When an awt textfield is used in a Processing sketch it displays and runs correctly when run from the Processing IDE but when the sketch is exported as applet and loaded through any browser all texfields render solid black.

The applet can be seen in action on this video - https://vimeo.com/68475579

and in reality you can experience the problem here when trying to login or create a new user - http://www.boxinacloud.com/biac/

In general there are few libraries for GUI in Processing such as the controlP5 and I have tried using all of them before resorting to awt's TextField. Reason is: ControlP5 has the same problem for all its UI components - they render black in a browser. Other libraries (G4P, interfascia, etc.) either don't have version for Processing 1.51 or don't offer a Textfield class or have issues with displaying the text in legible graphics - probably because of the P3D display mode which is used in my case.

Unfortunately Processing 1.5.1 must be used instead of the latest 2.0. This is because PeasyCam library and other specifics to the code that has been written so far are not compatible with Processing 2.0.

I am open to suggestions for other TextField classes or any hints as to what might cause the problem of the TextField built in AWT to render black.

Below is the code used to generate the TextFields with awt:

1. import java.awt.*;

   /// textfields

   Panel dummyPanel = new Panel(); // voodoo 

   //

   Panel usernamePanel = new Panel(); // holder for input field 

   TextField usernameField = new TextField(""); 

   //

   Panel passwordPanel = new Panel(); // holder for input field 

   TextField passwordField = new TextField(""); 

   //

   Panel password2Panel = new Panel(); // holder for input field 

   TextField password2Field = new TextField(""); 

   //

   Panel emailPanel = new Panel(); // holder for input field 

   TextField emailField = new TextField("");       

   // give all the containers a layout 

   setLayout(new BorderLayout()); // main container (window?) 

   usernamePanel.setLayout(new BorderLayout()); 

   passwordPanel.setLayout(new BorderLayout()); 

   password2Panel.setLayout(new BorderLayout()); 

   emailPanel.setLayout(new BorderLayout()); 

   // add the containers to the main container 

   
   

   // Now we can set the bounds of the text fields // left, top, width, height 

   int borderSize = 100; // for calculating size of fields 

   int inputHeight = 20; // height of input field 

   usernamePanel.setBounds(618, 85, 1000-618-15, inputHeight); 

   passwordPanel.setBounds(618, 135, 1000-618-15, inputHeight); 

   password2Panel.setBounds(618, 185, 1000-618-15, inputHeight); 

   emailPanel.setBounds(618, 235, 1000-618-15, inputHeight); 

   //

   usernamePanel.setBackground(new Color(128, 128, 128, 0)); 

   passwordPanel.setBackground(new Color(128, 128, 128, 0)); 

   password2Panel.setBackground(new Color(128, 128, 128, 0)); 

   emailPanel.setBackground(new Color(128, 128, 128, 0)); 

   // Don't know why this works but it does. 

   // The dummy is held by the main container and doesn't contain anything 

   // yet without it, the input field inexplicably expands to contain the output field 

   // (try commenting it out). 

   // It also needs to be placed in the center. 

   dummyPanel.setBackground(new Color(128, 128, 128, 0)); 

   
   

   add(dummyPanel, BorderLayout.CENTER);

   passwordField.setEchoChar('*');

   password2Field.setEchoChar('*');

   //    

   add(usernamePanel); 

   add(passwordPanel); 

   add(password2Panel);

   add(emailPanel); 

   usernamePanel.add(usernameField);

   passwordPanel.add(passwordField);

   password2Panel.add(password2Field);

   emailPanel.add(emailField);