Animate a series of images with an image overlay.

Use case
An image overlay is useful for displaying fast and dynamic images; for example, rendering real-time sensor data captured from a drone. Each frame from the drone becomes a static image which is updated on the fly as the data is made available.
How to use the sample
The application loads a map of the Southwestern United States. Click the “Start/Stop” button to start or stop the radar animation. Use the drop down menu to select how quickly the animation plays. Move the slider to change the opacity of the image overlay.
How it works
- Create an
ImageOverlayand add it to theSceneView. - Set up a timeline with an interval period.
- For every image, create a new
ImageFrameand add it to the image overlay at every timer interval.
Relevant API
- ImageFrame
- ImageOverlay
- SceneView
About the data
These radar images were captured by the US National Weather Service (NWS). They highlight the Pacific Southwest sector which is made up of part the western United States and Mexico. For more information visit the National Weather Service website.
Additional information
The supported image formats are GeoTIFF, TIFF, JPEG, and PNG. ImageOverlay does not support the rich processing and rendering capabilities of a RasterLayer. Use Raster and RasterLayer for static image rendering, analysis, and persistence.
Tags
3D, animation, drone, dynamic, image frame, image overlay, real time, rendering
Sample Code
/* * Copyright 2022 Esri. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */
module com.esri.samples.animate_images_with_image_overlay { // require ArcGIS Maps SDK for Java module requires com.esri.arcgisruntime;
// handle SLF4J http://www.slf4j.org/codes.html#StaticLoggerBinder requires org.slf4j.nop;
// require JavaFX modules that the application uses requires javafx.graphics; requires javafx.controls; requires javafx.fxml;
// make all @FXML annotated objects reflectively accessible to the javafx.fxml module opens com.esri.samples.animate_images_with_image_overlay to javafx.fxml;
exports com.esri.samples.animate_images_with_image_overlay;}/* * Copyright 2020 Esri. * * Licensed under the Apache License, Version 2.0 (the "License"); you may not * use this file except in compliance with the License. You may obtain a copy of * the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations under * the License. */
package com.esri.samples.animate_images_with_image_overlay;
import java.io.File;import java.util.Arrays;import java.util.List;import java.util.stream.Collectors;
import javafx.animation.Animation;import javafx.animation.KeyFrame;import javafx.animation.Timeline;import javafx.fxml.FXML;import javafx.scene.control.Button;import javafx.scene.control.ComboBox;import javafx.scene.control.Slider;import javafx.util.Duration;
import com.esri.arcgisruntime.geometry.Envelope;import com.esri.arcgisruntime.geometry.Point;import com.esri.arcgisruntime.geometry.SpatialReferences;import com.esri.arcgisruntime.layers.ArcGISTiledLayer;import com.esri.arcgisruntime.mapping.ArcGISScene;import com.esri.arcgisruntime.mapping.ArcGISTiledElevationSource;import com.esri.arcgisruntime.mapping.Basemap;import com.esri.arcgisruntime.mapping.Surface;import com.esri.arcgisruntime.mapping.Viewpoint;import com.esri.arcgisruntime.mapping.view.Camera;import com.esri.arcgisruntime.mapping.view.ImageFrame;import com.esri.arcgisruntime.mapping.view.ImageOverlay;import com.esri.arcgisruntime.mapping.view.SceneView;
public class AnimateImagesWithImageOverlayController {
@FXML private SceneView sceneView; @FXML private Button controlAnimationButton; @FXML private Slider opacitySlider; @FXML private ComboBox<String> framesComboBox;
private List<ImageFrame> imageFrames; private ImageOverlay imageOverlay;
private Integer frameIndex = 0; private Integer period = 67; private Timeline animation;
public void initialize() {
try {
// populate the frames combo box with speed descriptions framesComboBox.getItems().addAll("Fast", "Medium", "Slow"); // open the sample at slow speed framesComboBox.getSelectionModel().select(2);
// create a new ArcGISScene and set it to the scene view ArcGISScene scene = new ArcGISScene(); sceneView.setArcGISScene(scene);
// create a camera, looking at the pacific southwest sector Point observationPoint = new Point(-116.621, 24.7773, 856977.0); Camera camera = new Camera(observationPoint, 353.994, 48.5495, 0.0);
// create an envelope of the pacific southwest sector for displaying the image frame Point pointForImageFrame = new Point(-120.0724273439448, 35.131016955536694, SpatialReferences.getWgs84()); Envelope imageFrameEnvelope = new Envelope(pointForImageFrame, 15.09589635986124, -14.3770441522488); scene.setInitialViewpoint(new Viewpoint(imageFrameEnvelope, camera));
// create a new tiled layer from the World Dark Gray Base REST service and set it as the scene's basemap Basemap basemap = new Basemap(new ArcGISTiledLayer("https://services.arcgisonline" + ".com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer")); scene.setBasemap(basemap);
// create a new elevation source from the Terrain3D REST service and set it as the scene's base surface Surface surface = new Surface(); surface.getElevationSources().add(new ArcGISTiledElevationSource("https://elevation3d.arcgis" + ".com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer")); scene.setBaseSurface(surface);
// create and append an image overlay to the scene view sceneView.getImageOverlays().add(new ImageOverlay()); // store the newly created image overlay imageOverlay = sceneView.getImageOverlays().get(0);
// get the image files from local storage as an unordered list File[] imageFiles = new File(System.getProperty("data.dir"), "./samples-data/PacificSouthWest").listFiles(); // sort the list of image files by file name in ascending order if (imageFiles != null) { imageFrames = Arrays.stream(imageFiles) .sorted() .map(f -> new ImageFrame(f.getAbsolutePath(), imageFrameEnvelope)) .collect(Collectors.toList()); }
startNewAnimationTimeline();
} catch (Exception e) { // on any exception, print the stack trace e.printStackTrace(); } }
/** * Set up a timeline to display the images at the specified speed from the combobox. */ private void startNewAnimationTimeline() {
animation = new Timeline(); animation.setCycleCount(-1); // loop animation animation.getKeyFrames().add(new KeyFrame(Duration.millis(period), e -> { // set image frame to image overlay imageOverlay.setImageFrame(imageFrames.get(frameIndex)); // update to the next frame frameIndex = (frameIndex + 1) % imageFrames.size(); })); animation.play(); }
/** * Controls the opacity of the image overlay using the slider. */ @FXML private void changeImageOverlayOpacity() { imageOverlay.setOpacity((float) opacitySlider.getValue()); }
/** * Handles the rate at which the image frames are displayed using the combo box. */ @FXML private void handleFramesComboBoxInteraction() { // set the period for the chosen frame display speed switch (framesComboBox.getSelectionModel().getSelectedItem()) { case "Fast": period = 17; break; case "Medium": period = 33; break; case "Slow": period = 67; break; }
if (animation.getStatus() == Animation.Status.RUNNING) { animation.pause(); startNewAnimationTimeline(); } }
/** * Stops/starts the animation of the image frames on the image overlay. */ @FXML private void handleControlAnimationButtonClicked() { if (animation.getStatus() == Animation.Status.RUNNING) { animation.pause(); controlAnimationButton.setText("Start"); } else { startNewAnimationTimeline(); controlAnimationButton.setText("Stop"); } }
/** * Disposes of application resources. */ void terminate() {
// release resources when the application closes if (sceneView != null) { sceneView.dispose(); } }}/* * Copyright 2020 Esri. * * Licensed under the Apache License, Version 2.0 (the "License"); you may not * use this file except in compliance with the License. You may obtain a copy of * the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations under * the License. */
package com.esri.samples.animate_images_with_image_overlay;
import java.io.IOException;
import javafx.application.Application;import javafx.fxml.FXMLLoader;import javafx.scene.Parent;import javafx.scene.Scene;import javafx.stage.Stage;
public class AnimateImagesWithImageOverlaySample extends Application {
private static AnimateImagesWithImageOverlayController controller;
@Override public void start(Stage stage) throws IOException {
// set up the scene FXMLLoader loader = new FXMLLoader(getClass().getResource("/animate_images_with_image_overlay/main.fxml")); Parent root = loader.load(); controller = loader.getController(); Scene fxScene = new Scene(root);
// set up the stage stage.setTitle("Animate Images with Image Overlay Sample"); stage.setWidth(800); stage.setHeight(700); stage.setScene(fxScene); stage.show(); }
/** * Stops and releases all resources used in application. */ @Override public void stop() { controller.terminate(); }
/** * Opens and runs application. * * @param args arguments passed to this application */ public static void main(String[] args) {
Application.launch(args); }}