Program not displaying controls or running in javascript mode

Rocks

My Processign 2.2.1 code doesn't display and doesn't run in javascript mode. But is running fine from Processing application in JAVA mode. I want it run in javascript mode. Please help and its urgent to commission my project. My code is as follows:-

//Imports
import processing.serial.*;
import controlP5.*;
import java.util.*;
import de.bezier.data.sql.*;

//Variable Declarations
ControlP5 cp5;
ScrollableList portList;
ScrollableList baudList;
Textlabel labelPort;
Textlabel labelBaud;
Textlabel messages;
Textfield receivedFromSerial;
Textfield sendToSerial;
Serial myPort;      // The serial port
int whichKey = -1;  // Variable to hold keystoke values
int inByte = -1;    // Incoming serial data
int Indexport =0;
int Indexbaud =1;
String tport;
int tbaud;
boolean NewCOMSetting = false;
String currentPortName;
int currentBaud;
int lf = 10;    // Linefeed in ASCII
String tString = null;
String PortmsgString = "Not Connected to any COMM Port";
String MySqlmsgString = "Not Logged to Database";
//Variables for MySQL 
Textlabel labelServer;
Textlabel labelUserID;
Textlabel labelPassword;
Textlabel labelTabelName;

Textfield textServer;
Textfield textUserID;
Textfield textPassword;
Textfield textTabelName;

String dbHost; 
String dbPort; 
String dbUser; 
String dbPass; 
String dbName; 
String tableName;
String[] tableNames;
// = db.getTableNames();

MySQL msql;
Boolean dbOpen = false;
///Setup/////
void setup() {
  initialiser();
}

void draw() { 
  background(15);
  stroke(color(0, 100, 255));
  //line(400, 0, 400, 75);
  line(0, 105, 800, 105);
  line(0, 185, 800, 185);
  line(0, 370, 800, 370);

  //===Write to MySQL==========================
  if (tString != null) {
    try {
      cp5.get(Textfield.class, "Received").setText(tString);
      writeToMySQL();
      cp5.get(Textfield.class, "Received").setText("");
      cp5.get(Textfield.class, "Rx_Time").setText("");
      tString = null;
    }
    catch (RuntimeException ex) {
      // println(ex);
    }
  }

  //===Read From MySQL==========================
  if (dbOpen == true) {
    //int recCount = msql.query("SELECT * FROM %s  WHERE %s IS NOT NULL", "interface", "ToSerial");
    //if (recCount > 0) { 

    msql.query("SELECT * FROM %s  WHERE %s IS NOT NULL", "interface", "ToSerial");
    while (msql.next ())
    {
      String serialTxt = msql.getString("ToSerial");
      int deleteID = msql.getInt("ID");
      try {
        if (serialTxt != null) {
          cp5.get(Textfield.class, "Transmit").setText(serialTxt);
          sendToSerial();
          msql.query( "DELETE FROM %s WHERE  %s = %s", "interface", "ID", deleteID );
        }
      }
      catch (RuntimeException ex) {
        Logout();
        Login();
      }
    }
  }
}

//======================================================================================================
void sendToSerial() {
  //====Write to Serial Port===============
  if (cp5.get(Textfield.class, "Transmit").getText() != null) {
    try {
      if (myPort != null) 
      {
        String tStr = trim(cp5.get(Textfield.class, "Transmit").getText());
        myPort.write(tStr);
        println("Sent to Serial");
      }
      cp5.get(Textfield.class, "Transmit").setText("");
      //  cp5.get(Textfield.class, "Tx_Time").setText("");//What to do with This. We will think Later
      tString = null;
    }
    catch (RuntimeException ex) {
    }
  }
}

void writeToMySQL() {
  if (msql.connect())
  {
    String tStr = trim(cp5.get(Textfield.class, "Received").getText());
    msql.query( "INSERT INTO `interface` ( `FromSerial`, `DateTimeFromSerial`) VALUES ( '%s', '%s')", tStr, 
    cp5.get(Textfield.class, "Rx_Time").getText());
  }
}

//Login to Database
void Login() {
  // msql = new MySQL( this, dbHost + ":" + dbPort, dbName, dbUser, dbPass );
  msql = new MySQL( this, dbHost, dbName, dbUser, dbPass);
  if (msql.connect())
  {
    MySqlmsgString = "Logged to Database " + dbName + " on Server " + dbHost;
    dbOpen = true;
  } else
  {
    MySqlmsgString = "Not Logged to Database";
    dbOpen = false;
  }
  displayMessage();
}

//Logout to Database
void Logout() {
  if (msql.connect())
  {
    msql.close();
    MySqlmsgString = "Not Logged to Database";
    dbOpen = false;
  }
  displayMessage();
}

void controlEvent(ControlEvent theEvent) {

  if (theEvent.getController() == portList) {
    if (portList.getCaptionLabel().getText() != currentPortName) {
      NewCOMSetting = true;
    }
  }
  if (theEvent.getController() == baudList) {
    if (int(baudList.getCaptionLabel().getText()) != currentBaud) {
      NewCOMSetting = true;
    }
  }
  if (NewCOMSetting == true) {
    currentPortName =portList.getCaptionLabel().getText();
    currentBaud = int (baudList.getCaptionLabel().getText());
    setSerialPort(currentPortName, currentBaud);
    NewCOMSetting = false;
  }
}

//======================================================================================================
void serialEvent(Serial myPort) {
  while (myPort.available () > 0) {
    tString = myPort.readStringUntil(lf);
  }
  String today = (year()) + "-" + nf(month(), 2) + "-" + nf(day(), 2) + " " + nf(hour(), 2) + ":" + nf(minute(), 2) + ":" + nf(second(), 2);
  cp5.get(Textfield.class, "Rx_Time").setText(trim(today));
}

// Set serial port to desired value.
void setSerialPort(String portName, int baud) {
  // Close the port if it's currently open.
  if (myPort != null) {
    myPort.stop();
  }
  try {
    // Open port
    myPort = new Serial(this, portName, baud);
    //selectedPort.setText(portName);
    // selectedBaud.setText(str(baud));
    myPort.bufferUntil('\n');
    PortmsgString = "Current Port - " + portName + " at Baud - " + str(baud);
    displayMessage();
  }
  catch (RuntimeException ex) {
    // Swallow error if port can't be opened, keep port closed.
    myPort = null;
    PortmsgString = "Not Connected to any COMM Port";
  }
}

void displayMessage() {
  messages.setText(PortmsgString + " & " + MySqlmsgString);
}

void initialiser()
{
  size(790, 400);
  // PImage icon = loadImage("ICON.png");
  frame.setIconImage((java.awt.Image) loadImage("ICON.png").getNative());
  // Common Font
  PFont myFont = createFont("Arial", 13);
  textFont(myFont);
  frame.setTitle("CIOM Serial COM Interface");

  cp5 = new ControlP5(this);
  //==============================
  cp5.addTextfield("Server")
    .setPosition(10, 10)
      .setSize(650, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("localhost")
              ;
  //==============================

  cp5.addTextfield("UserID")
    .setPosition(10, 60)
      .setSize(160, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("root")
              ;
  //==============================
  cp5.addTextfield("Password")
    .setPosition(180, 60)
      .setSize(160, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("")
              ;
  //==============================
  cp5.addTextfield("MySQLPort")
    .setPosition(350, 60)
      .setSize(160, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("3306")
              ;
  cp5.addTextfield("DatabaseName")
    .setPosition(520, 60)
      .setSize(140, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("CIOM")
              ;
  cp5.addButton("Login")
    .setPosition(675, 10)
      .setSize(100, 27)
        .setFont(myFont)
          .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
            ; 
  cp5.addButton("Logout")
    .setPosition(675, 50)
      .setSize(100, 30)
        .setFont(myFont)
          .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
            ; 
  //==============================
  // List all the available serial ports:
  String[] portNames = Serial.list();
  labelPort = cp5.addTextlabel("lblPort")
    .setText("COMM Port")
      .setPosition(10, 110)
        .setColorValue(0xffffff00)
          .setFont(myFont)
            ;
  labelBaud = cp5.addTextlabel("lblBaud")
    .setText("Baud Rate")
      .setPosition(200, 110)
        .setColorValue(0xffffff00)
          .setFont(myFont)
            ;
  portList = cp5.addScrollableList("Port") 
    .setPosition(10, 130) 
      .setSize(100, 100) 
        .setBarHeight(20) 
          .setItemHeight(20) 
            .addItems(portNames) 
              .setFont(myFont)
                .setColorForeground(color(40, 128))
                  .setValue(Indexport)
                    ;
  List BList = Arrays.asList("4800", "9600", "19200", "38400", "57600", "115200");
  baudList= cp5.addScrollableList("Baud")
    .setPosition(200, 130)
      .setSize(100, 100)
        .setBarHeight(20)
          .setItemHeight(20)
            .addItems(BList)
              .setFont(myFont)
                .setColorForeground(color(40, 128))
                  .setValue(Indexbaud)
                    ;
  //tport=  portList.get(ScrollableList.class, "port").getItem(Indexport).get("text");
  //  tbaud=  baudList.get(ScrollableList.class, "port").getItem(Indexbaud).get("text");
  currentPortName = portList.getCaptionLabel().getText();
  currentBaud = int (baudList.getCaptionLabel().getText());

  messages = cp5.addTextlabel("lblmessage")
    .setPosition(10, 375)
      .setColorValue(0xffffff00)
        .setFont(myFont)
          ;

  //cp5.addTextlabel("lblRxFromSerial")
  //  .setText("Received From Serial - ")
  //   .setPosition(10, 190)
  //     .setColorValue(0xffffff00)
  //        .setFont(myFont)
  //          ;

  //  cp5.addTextlabel("lblTxToSerial")
  //   .setText("Transmitted To Serial - ")
  //     .setPosition(10, 260)
  //      .setColorValue(0xffffff00)
  //        .setFont(myFont)
  //          ;
  setSerialPort(currentPortName, currentBaud);
  // Throw out the first reading, in case we started reading 
  // in the middle of a string from the sender.
  if (myPort != null) { 
    tString = myPort.readStringUntil(lf);
    tString = null;
  }
  cp5.addTextfield("Received")
    .setPosition(10, 190)
      .setSize(550, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("")
              ;
  cp5.addTextfield("Rx_Time")
    .setPosition(570, 190)
      .setSize(175, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
              .setText("")
                ; //.setText("2017-01-04 17:11:00")
  cp5.addTextfield("Transmit")
    .setPosition(10, 250)
      .setSize(550, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .setText("")
              ;
  cp5.addTextfield("Tx_Time")
    .setPosition(570, 250)
      .setSize(175, 20)
        .setFont(myFont)
          .setColor(color(255, 255, 255))
            .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
              .setText("")
                ; //.setText("2016-11-07 07:00:00")
  //receivedFromSerial =
  // sendToSerial = 

  dbHost = cp5.get(Textfield.class, "Server").getText(); // if you are using a using a local database, this should be fine
  dbPort = cp5.get(Textfield.class, "MySQLPort").getText(); // replace with database port, MAMP standard is 8889
  dbUser = cp5.get(Textfield.class, "UserID").getText(); // replace with database username, MAMP standard is "root"
  dbPass = cp5.get(Textfield.class, "Password").getText();  // replace with database password, MAMP standard is "root"
  dbName = cp5.get(Textfield.class, "DatabaseName").getText(); // replace with database name
  //String tableName = "table_name"; // replace with table name
  Login();
}

GoToLoop

JavaScript Mode (Pjs library) can only have a chance to successfully transpile Java to JS syntax when our sketch strictly adheres to Processing's API: L-)

1. http://ProcessingJS.org/reference/
2. http://ProcessingJS.org/articles/p5QuickStart.html

Your sketch needs both a serial port & a GUI libraries.
Realistically, you should switch from Pjs to p5.js library and convert everything to JS language. #:-S

There are some very useful 3rd-party libraries for p5.js:
http://p5js.org/libraries/

In your case, p5.serialport & p5.gui seem to be good replacements for your 2 Java Mode libraries:

1. https://GitHub.com/vanevery/p5.serialport
2. https://GitHub.com/bitcraftlab/p5.gui

And some tips for transitioning from Java Mode to p5.js: O:-)
https://GitHub.com/processing/p5.js/wiki/Processing-transition

Rocks

Ok Thanks sir. Will check out and revert back. But does it mean that my entire effort till now is wasted and I need to start from scratch?

GoToLoop

Mostly yes... wasted if your intention was to deploy to the web only. :(

Rocks

:(( Ok :(( .... Code is waste but am happy with new knowledge. Will trouble you with P5 hiccups ;))

Rocks

Thanks