This document describes the steps to create a simulation scenario in JavaFX 2.0 to model an emergency situation in an office building:
1. Create scenes for the ground floor, first floor, and parking levels by importing images and setting their dimensions.
2. Develop a menu to switch between the building scenes. Code event handlers to change the displayed image when a menu item is selected.
3. Add extinguishing equipment like fire extinguishers to the scenes by importing images, setting positions, and adding labels.
4. Insert a button to generate a fire emergency that displays a fire image at the triggered location.
5. Include labels with advisory messages for relevant parties like building managers that
2. María Dolores Vivancos Abad
In this Unit…
We are going to develop an application to apply all concepts of
prevention, acquired in previous units, which will be implemented for
the prevention and resolution of an emergency.
First of all, we create the scenarios where the action will be placed. In this case,
an office building with ground floor, first floor and parking..
Sequence of steps:
– Create scenarios: Images with flat floor, first floor and parking.
– Create a menu for changing between different scenarios of the building.
– Insert a button for creating an emergency situation (in this case, a fire).
– We show the emergency situation introducing new visual elements in the
scene, like fire, smoke…
– Insert a button to create the necessary notices in case of an emergency
situation.
3. María Dolores Vivancos Abad
STEP 1. CREATING A SCENE OF
ACTION
First, create the scenario of the ground floor.
We associate the image of the ground floor.
Remember to set a width and height for the image and to add the imageView
to the Group element.
Image d = new Image("planta_baja.png");
ImageView image = new ImageView();
image.setImage(d);
4. María Dolores Vivancos Abad
STEP 1. CREATING A SCENE OF
ACTION
We do the same with the others images of the building: First floor and parking.
Image d1 = new Image("primera_planta.png");
Image d2 = new Image("parking.png");
First floor:
5. María Dolores Vivancos Abad
STEP 1. CREATING A SCENE OF
ACTION
Parking:
Advice: For using images, you have to put them into the src folder.
6. María Dolores Vivancos Abad
STEP 2. CREATING A MENU TO
CHANGE THE SETTING
We are going to create a menu to choose between the various stages
of building.
MenuBar menuBar = new MenuBar();
Menu menu = new Menu("Escenarios");
MenuItem menuitem1=new MenuItem("Primera Planta");
MenuItem menuitem2=new MenuItem("Planta Baja");
MenuItem menuitem3=new MenuItem("Parking");
7. María Dolores Vivancos Abad
STEP 2. CREATING A MENU TO
CHANGE THE SETTING
The next thing is to establish a new scenario each time you change
the option in the menu.
menuitem1.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent t) {
image.setImage(d);
}
});
menuitem2.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent t) {
image.setImage(d1);
}
});
menuitem3.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent t) {
image.setImage(d2);
}
});
9. María Dolores Vivancos Abad
STEP 3. INSERT EXTINGUISHING
MEDIA
We have different extinction elements that we need to put in the stage, using
the theory of prevention:
You can search for other images or use these.
Using the theory you have learned, you have to position these elements in the
correct zone for proper use.
10. María Dolores Vivancos Abad
STEP 3. INSERT EXTINGUISHING
MEDIA
Example:
Important: You have to put your elements in the stage, so you
need to specify the x position and the y position for your element.
Image img = new Image(getClass().getResourceAsStream("fuego.jpg"));
ImageView imgv1= new ImageView(img);
imgv1.setFitWidth(40);
imgv1.setFitHeight(40);
Label fuego1= new Label("",imgv1);
fuego1.setLayoutX(160);
fuego1.setLayoutY(500);
fuego1.setLayoutX(160);
fuego1.setLayoutY(500);
11. María Dolores Vivancos Abad
STEP 4. INSERT NEW ELEMENTS TO
SIMULATE EMERGENCY
Insert a button whose action is to generate the fire.
How can we show the fire? We can insert a fire image in the position
where the fire has been iniciate.
Fire image:
Image img = new
Image(getClass().getResourceAsStream("fuego.jpg"));
ImageView imgv= new ImageView(img);
Label fuego= new Label("",imgv);
fuego.setLayoutX(250);
fuego.setLayoutY(500);
12. María Dolores Vivancos Abad
STEP 4. INSERT NEW ELEMENTS TO
SIMULATE EMERGENCY
Create the button:
We now indicate the button’s action is showing images of the fire:
boton1.setOnAction(new EventHandler<ActionEvent>() {
Image img = new Image(getClass().getResourceAsStream("fuego.jpg"));
ImageView imgv1= new ImageView(img);
imgv1.setFitWidth(40);
imgv1.setFitHeight(40);
Label fuego1= new Label("",imgv1);
fuego1.setLayoutX(160);
fuego1.setLayoutY(500);
}
final Button boton1 = new Button("Generar Incendio");
13. María Dolores Vivancos Abad
STEP 5: Advisories
We will indicate with messages, which entities are what we need to be
alerted when the alarm was generated.
You have to get that information on the documents: Who should be
notified when an emergency situation is generated?
We do this using label elements.
For example:
Label l1 = new Label("Director del plan de
autoprotección");
14. María Dolores Vivancos Abad
STEP 5: Advisories
Who generates the messages?
We can create a button that on setOnAction button function will
generate the Label elements.
We’ll press the button after the emergency’s been generated.
Button btnpersonal = new Button("Generar Avisos Equipos de
Intervención");
btnpersonal.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent e) {
Label l1 = new Label("Director del plan de
autoprotección");
l1.setLayoutX(1160);
l1.setLayoutY(10);
root.getChildren().add(l1);
}
});
15. María Dolores Vivancos Abad
STEP 5: Advisories
Notice that the size of the scene should be bigger than the
image’s size. This way, we have enough white space for
showing the messages of advice.
Now you have to continue with the other messages…