Could anybody tell me why my background image for stage1 is not displaying while the displayBox is?

AmyM

import processing.serial.*;

import cc.arduino.*;

import static javax.swing.JOptionPane.*;
import javax.swing.JPasswordField;


final StringDict accounts = new StringDict(
  new String[] {
  "john", "tony", "amy"
  }
  , new String[] {
    "ilikedogs", "husky", "pepsi"
  }
  );

final JPasswordField pwd = new JPasswordField();

{
  println(accounts);
} 

PImage startGameBackground;
PImage kitchen;
int stage =1;
Serial port;




void setup() {


  size(1800, 900);
  String comPort = "COM3";

  stage =1;
  port = new Serial(this, comPort, 9600);


  startGameBackground = loadImage("startGameBackground.png");
  kitchen = loadImage("kitchen.png");

  startGameBackground.resize(1800, 900);
  kitchen.resize(1800, 900);
}



void draw() {

  if (stage ==1) {

    background(startGameBackground);

    if (frameCount == 10)  surface.setVisible(true);


    String user = askUser();

    if (user == null)           confirmQuit();
    else if (!"".equals(user))  askPass(user);
  } else if (stage ==2) {

    background(kitchen);
  }
}


String askUser() {
  String id = showInputDialog("Please enter user:");

  if (id == null)
    showMessageDialog(null, "You've canceled login operation!"
      , "Alert", ERROR_MESSAGE);

  else if ("".equals(id))
    showMessageDialog(null, "Empty user input!"
      , "Alert", ERROR_MESSAGE);

  else if (!accounts.hasKey(id = id.toLowerCase()))
    showMessageDialog(null, "Unknown \"" + id + "\" user!" + (id = "")
      , "Alert", ERROR_MESSAGE);

  return id;
}

boolean askPass(String id) {
  boolean isLogged = false;
  pwd.setText("");

  int action = showConfirmDialog(null, pwd
    , "Now enter password:", OK_CANCEL_OPTION);

  if (action != OK_OPTION) {
    showMessageDialog(null, "Password input canceled!"
      , "Alert", ERROR_MESSAGE);

    return false;
  }

  String phrase = pwd.getText();
  //String phrase = new String(pwd.getPassword());

  if ("".equals(phrase))
    showMessageDialog(null, "Empty password input!"
      , "Alert", ERROR_MESSAGE);

  else if (accounts.get(id).equals(phrase)) {
    showMessageDialog(null, "Welcome \"" + id + "\"!\nYou're logged in!"
      , "Info", INFORMATION_MESSAGE);

    isLogged = true;
    stage=2;
  } else
    showMessageDialog(null, "Password \"" + phrase + "\" mismatch!"
      , "Alert", ERROR_MESSAGE);

  return isLogged;
}

void confirmQuit() {
  if (showConfirmDialog(null, "Wanna quit then?", "Exit"
    , OK_CANCEL_OPTION) == OK_OPTION)  exit();
}

GoToLoop

Canvas is updated once draw() finishes. Since all of those JOptionPane stuff is blocking the sketch, your background(startGameBackground); is only gonna be rendered at the end of the process.

There are many workarounds for it. But the easiest I can advise you is to skip the whole JOptionPane when frameCount == 1.

A more advanced solution is rely on thread() for the JOptionPane.

AmyM

Thank u for answering all my questions :)