Dynamically change image of an imageview in a thread - multithreading

Question

Application:
I'm trying to create a slide show inside my JavaFX application. To do this I created a thread and handle the image changes inside that thread. I use Thread.sleep(int) inside the thread to pause the transition between images.
Implementation:
I created the application in the Scene Builder so it's in FXML. The imageview starts out with an image and I gave the imageview an id. Here is a portion of the FXML where the imageview is located:
<Tab>
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="376.0" prefWidth="981.0">
<children>
<ImageView fx:id="myImage" fitHeight="197.0" fitWidth="294.0" layoutX="20.0" layoutY="151.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../Pictures/NevadaDesert.jpg" />
</image>
<effect>
<Glow />
</effect>
</ImageView>
I am getting the imageview inside my Java code with:
#FXML
private ImageView myImage;
Then I handle all the image changes inside the new runnable thread which I call after loading the FXML:
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("MyResume.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
(new Thread(new PictureRunnable())).start();
}
The run method from PictureRunnable is shown here:
public void run() {
try {
File file1 = new File("C:/Users/Kyle/Documents/NetBeansProjects/MyResume/src/Pictures/activities.jpg");
File file2 = new File("C:/Users/Kyle/Documents/NetBeansProjects/MyResume/src/Pictures/foodService2.png");
File file3 = new File("C:/Users/Kyle/Documents/NetBeansProjects/MyResume/src/Pictures/NevadaDesert.jpg");
Image a = new Image(file1.toURI().toURL().toExternalForm());
Image b = new Image(file2.toURI().toURL().toExternalForm());
Image c = new Image(file3.toURI().toURL().toExternalForm());
for(int i=0; true; i++) {
//Pause for 5 seconds
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
if( i%2 == 0 )
myImage.setImage(a);
else if( i%3 == 0 )
myImage.setImage(b);
else
myImage.setImage(c);
}
}
catch(MalformedURLException e) {
e.printStackTrace();
}
}
Problem:
I'm getting a NullPointerException on the lines where I set the images myImage.setImage(abc).
Is there a problem in my code with how I'm changing the images?
Or is the problem the thread, perhaps I cannot open a new thread and make changes to the Stage?

Answer 1

If you want to set an image on an imageView it has to be on the javafx thread: use Platform.runLater() from your thread or some other mechanism.
I just noticed that my simple slideshow post has a few hits over its history - sorry it had a couple of bugs and the final release of java8 changed the way it handled null pointers in animations. I've fixed those bugs and updated the post.
(i'm notzed)

Answer 2

Using just java
package sample;
import java.util.ArrayList;
import java.util.List;
import javafx.application.*;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.geometry.Insets;
import javafx.scene.control.Label;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.Cursor;
import java.lang.String;
import javafx.scene.layout.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.geometry.*;
import javafx.scene.paint.ImagePattern;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import com.jfoenix.controls.JFXButton;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
private List<String> list = new ArrayList<String>();
int j = 0;
JFXButton lbutton, rButton;
ImageView imageView;
#Override
public void start(Stage primaryStage) {
// images in src folder.
try {
list.add("/image/1.jpg");
list.add("/image/2.jpg");
list.add("/image/3.jpg");
list.add("/image/4.jpg");
list.add("/image/5.jpg");
list.add("/image/6.jpg");
list.add("/image/7.jpg");
list.add("/image/8.jpg");
GridPane root = new GridPane();
root.setAlignment(Pos.CENTER);
lbutton = new JFXButton("<");
rButton = new JFXButton(">");
Image images[] = new Image[list.size()];
for (int i = 0; i < list.size(); i++) {
images[i] = new Image(list.get(i));
}
imageView = new ImageView(images[j]);
imageView.setCursor(Cursor.CLOSED_HAND);
rButton.setOnAction(e -> {
System.out.print("hello");
j++;
if (j > list.size()-1)
{
j = list.size()-1;
imageView.setImage(images[j]);
}
else
{
imageView.setImage(images[j]);
}
});
lbutton.setOnAction(e -> {
System.out.print("hello");
j--;
if (j < 0)
{
j = 0;
imageView.setImage(images[j]);
}
else
{
imageView.setImage(images[j]);
}
});
imageView.setFitHeight(350);
//main controls
AnchorPane pane = new AnchorPane(imageView, rButton, lbutton);
AnchorPane.setTopAnchor(lbutton, 300.0);
AnchorPane.setLeftAnchor(lbutton, 210.0);
AnchorPane.setTopAnchor(rButton, 300.0);
AnchorPane.setRightAnchor(rButton, 210.0);
// Set the stage
Scene scene = new Scene(pane, 600, 600);
imageView.fitWidthProperty().bind(scene.widthProperty());
primaryStage.setScene(scene);
primaryStage.setResizable(false);
primaryStage.setTitle("Sample");
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
}