.. |new| image:: assets/new.png :height: 30px How to create a story --------------------- The user can create stories exploring the DEA data portfolio with the DEA **Story Editor**, which includes an editing side on the left and the corresponding world map visualization in the middle of the screen. .. image:: assets/editor_new.png :alt: DEA Story Editor :width: 80% :align: center | First of all, it is possible to define: * A story title (mandatory) * A story description * A location, by clicking on the proper icon to the right of the text box and then selecting a point on the map * An author * A cover, choosing an image or a video from local computer [#f1]_, from User Assets or from an external URL [#f2]_. If no cover is selected, a default one will be used. .. image:: assets/story_props_new.png :alt: Story properties :align: center :width: 50% | Add data from DEA portfolio ^^^^^^^^^^^^^^^^^^^^^^^^^^^ The user can start adding data to his/her story selecting them, for instance, from the DEA portfolio. The list of available data is shown by clicking on the ``Datasets`` button indicated in the picture below. .. image:: assets/add_datasets.png :alt: Add data from DEA portfolio :width: 80% :align: center | Clicking on an item of the ``Layers`` tab, the corresponding data is applied to the map. Natural Hazards |new| ^^^^^^^^^^^^^^^^^^^^^ The new **Natural Hazards** dataset is available since the DEA 1.8.0 release. Generated exploiting the Copernicus Emergency API Layers, it allows adding events like floods, wildfires and earthquakes in user stories. By clicking on the ``Datasets`` button available in the Story Editor and then selecting the ``Natural hazards`` tab, the updated list of events is shown. The user can filter the list by selecting the event categories shown in the panel. .. image:: assets/add_hazards.png :alt: Add Natural Hazards to map :width: 80% :align: center | The user can select an event from the panel and then select up to 10 affected areas in a slide to see the data on the map. Each affected area has pre-event data that can be added to the map, as indicated in the picture below. Pre-event data includes reference layers such as buildings, transportation, and lakes that may be affected by the event. .. image:: assets/add_pre_event_data.png :alt: Add pre-event information :width: 80% :align: center | The user can move the timeline to see the evolution of the data over time. Please note that **only one event can be added per slide**. Timeline autoplay and globe rotation ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Since the DEA 1.5.0 release, the user can enable the autoplay of the timeline to start the animation of the data automatically. It is also possible to set the timeline speed, depending on the time resolution of the selected data. .. image:: assets/timeline_options.png :alt: Set timeline autoplay and speed :width: 50% :align: center | To create more attractive stories, the user can enable the globe rotation from the DEA **Story Editor**, as indicated below. .. image:: assets/globe_rotation.png :alt: Enable globe rotation :width: 50% :align: center | Data comparison ^^^^^^^^^^^^^^^ To compare different data in the same view is possible by clicking on the dedicated icon, to the right of the slide title, and then moving the split line that appears on the screen. .. image:: assets/compare_new.png :alt: Compare data :width: 50% :align: center | Odd-numbered datasets are displayed on the right side of the screen, while even-numbered datasets are displayed on the left side of the screen. .. image:: assets/datasets_comparison.png :alt: Dataset comparison order :width: 75% :align: center | Center the map according to the user's needs ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The user can capture the slide view by clicking on the proper icon, to the right of the slide title, as shown in the picture below. .. image:: assets/capture_new.png :alt: Capture view :width: 50% :align: center | Set the slide layout ^^^^^^^^^^^^^^^^^^^^ This feature allows to change the text position in a slide by clicking on the proper icon, to the right of the slide title. It is also possible to set the text of the slide as: * Resizable * Transparent In case of transparent background, the text of the slide will not be resizable and the title of the slide will not be visible. .. image:: assets/layout.png :alt: Change layout :width: 50% :align: center | .. |left-right| image:: assets/left_right.png :height: 25px Since the DEA 1.6.0 release, users can add text on both the left and the right side of the screen by selecting this new layout: |left-right| Users can write their contents in both the Left and Right panels from the DEA **Story Editor**. This layout can be used, for instance, to describe datasets shown on the screen in comparison mode. .. image:: assets/left_right_content.png :alt: Left-Right layout :width: 50% :align: center | At this point, the story can be saved by clicking on the ``Save Story`` button at the bottom of the editing section. .. image:: assets/save_story.png :alt: Save the story :width: 35% :align: center | Once the story is saved, a resizable slide preview can be displayed directly in the DEA **Story Editor** to check if it looks as expected. .. image:: assets/slide_preview.png :alt: Slide Preview :width: 80% :align: center | Set images or videos as slide background ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ This feature allows to add an image or a video as slide background replacing the globe. The user can upload an image or a video from local computer [#f1]_, select an image or a video from User Assets or add an external URL [#f2]_. .. image:: assets/img_video_bg.png :alt: Image or Video as slide background :width: 50% :align: center | Story autoplay and loop ^^^^^^^^^^^^^^^^^^^^^^^ In case of need to show the story as a video without loosing the interactive features of the DEA **Story Viewer**, it is possible to enable the story autoplay and the story loop from the DEA **Story Editor**. .. image:: assets/autoplay_loop.png :alt: Story Autoplay and Loop :width: 45% :align: center | The autoplay allows the automatic loading of the slides of a story, without the need to interact with the menu buttons. It is always possible to interrupt the autoplay by clicking on the *pause* icon of the viewer. .. image:: assets/stop_autoplay.png :alt: Stop Autoplay :width: 80% :align: center | The loop option allows to restart the story from the beginning when the last slide's time expires. Add new slides to the story ^^^^^^^^^^^^^^^^^^^^^^^^^^^ To add more slides to the story, it is needed to click on the ``+`` button, below the last slide preview of the story. .. image:: assets/add_slide.png :alt: Add new slide :width: 10% :align: center | To sort the slides in a different way the user can simply drag and drop them to the desired position. Slide Duplication ^^^^^^^^^^^^^^^^^ Since the DEA 1.6.0 release, users can duplicate an existing slide by clicking on the ``Duplicate slide`` option of the slide menu. .. image:: assets/slide_duplication.png :alt: Duplicate slide :width: 35% :align: center | The slide menu is shown by clicking the ``⋮`` button on the slide preview. Slide Show/Hide ^^^^^^^^^^^^^^^ With this new feature, users can hide a slide by clicking on the slide menu's ``Hide slide`` option. .. image:: assets/slide_hide.png :alt: Hide slide :width: 35% :align: center | Hidden slides are not shown in the DEA **Story Viewer**. It is possible to restore a hidden slide by clicking on the ``Show slide`` option of the hidden slide menu. .. image:: assets/slide_show.png :alt: Show slide :width: 35% :align: center Add user-own assets ^^^^^^^^^^^^^^^^^^^ As a user registered on the DestinE Platform, users can integrate the DEA data portfolio with their own assets, stored on their private workspace with a size of 10 GB. Clicking on the ``User Assets`` button available in the DEA **Story Editor**, the list of uploaded files is shown. .. image:: assets/user_assets_new.png :alt: User Assets :width: 50% :align: center | The user can upload his/her assets by clicking on the ``+`` button of the *User Assets* panel and by following the instructions on screen. .. image:: assets/upload_assets.png :alt: Upload an asset :width: 35% :align: center | .. |info| image:: assets/info.png :height: 20px By clicking on the info icon |info| of the *User Assets* panel, the user can access the details and a preview of an already uploaded asset. .. image:: assets/assets_details.png :alt: Asset details :width: 80% :align: center | The types of supported assets, as shown in the filter section of the *User Assets* panel, are: * 3D models in |GLB| (Graphics Library Transmission Format Binary) format * Vector formats such as |GeoJSON|, |TopoJSON|, |KML| (Keyhole Markup Language) and |CZML| (Cesium Language) * Videos [#f3]_ in |MP4|, |QuickTime File Format| or |WebM| formats (please note that the videos will be uploaded on the 2D/3D map) * Cloud Optimized GeoTIFF (|COG|), with the compressions listed below [#f4]_ .. image:: assets/cog_supported_formats.png :alt: COG supported compression formats :width: 75% :align: center | .. |important| image:: assets/warning.png :height: 24px |important| **The comparison feature is supported only for assets of type Cloud Optimized GeoTIFF.** An example of how to create a raster time series from raster files is available on an INSULA's |Notebook|. .. note:: Please note that DEA supports only the |WGS 84| Coordinate Reference System (CRS) for Cloud Optimized GeoTIFF. If your COG files are not using WGS 84 as CRS, you should apply a proper transformation. With |GDAL|, the commands useful to convert a GeoTIFF file in a WGS 84 COG file are: **1. Convert to WGS 84 projection** .. code-block:: bash gdalwarp -t_srs EPSG:4326 input.tif output_4326.tif **2. Convert to COG format** .. code-block:: bash gdal_translate input.tif output_cog.tif -of COG -co COMPRESS=LZW -co OVERVIEWS=AUTO |important| **Assets containing time information, as KML or CZML, are visualized according to the current time of the timeline. The time window is automatically set based on the overall timespan of the assets added to a slide, so, if time interval do not overlap, it is possible to see only an asset at a time.** Generate plots ^^^^^^^^^^^^^^ Measures evolve over time! Through DEA, the user can enable the plot feature by selecting the proper icon placed in the header of the **Story Editor**. Please note that it is needed to add on the map a measure of interest from the *Datasets* panel before asking for the corresponding plot generation. .. image:: assets/enable_plot.png :alt: Enable plots :align: center | Once the plot feature is enabled, the user can click on a location on the map to trigger the generation of the plot. .. image:: assets/enable_plot_feature.png :alt: Click on the map to show the plot :width: 40% :align: center | .. image:: assets/plots.png :alt: Generate plots :width: 80% :align: center | Please note that the time window available to achieve this is limited. If the time window expires, please click again on the plot icon to re-enable the feature. .. image:: assets/plot_expired.png :alt: Time window for plots expired :width: 40% :align: center | The plots can be added in the rich text editor to be displayed in the textual section of the story or, in case the user knows how to deal with KML, he/she can add them as markups on the map (click |here| to get an example of KML editor online). Get Climate Trends ^^^^^^^^^^^^^^^^^^ With the new release 1.5.0 of DEA, we provided a fancy tool to support climate change stories with qualitative plots. By clicking on the ``Climate Trends`` button of the DEA **Story Editor**, the list of places for which this feature is available will appear. .. image:: assets/trends_places.png :alt: Show Trends places :width: 80% :align: center | For instance, by clicking on the ``Climate Trends > Countries`` button, the countries for which the climate trends are available are highlighted on the map. Then, a menu with the type of anomaly plots is shown by clicking on one of these countries. .. image:: assets/trends_types.png :alt: Types of Climate Trends :width: 80% :align: center | This feature allows to select select: * Spiral plots * Stripes plots * Bar plots For instance, by selecting the ``Spiral`` button, the Climate Spiral of the selected country is shown. Please note that the video option is available only for Climate Spiral plots. .. image:: assets/climate_spiral.png :alt: Climate Spiral :width: 80% :align: center | The parameters of the *Climate Trends* panel can be modified depending on the user's needs: * The "Variable", which can be *2 metre temperature* or *sea surface temperature* (the latter only for climate trends on global scale) * The "Reference", which can be *pre-industrial reference period (1850-1900)* or *near-past reference period (1991-2020)* * The "Data Origin", which can be *ERA5*, *DestinE* or a combination of them * The "Temporal Resolution", which can be *yearly* or *monthly* (the latter only for spiral plots) * The "Plot Type", which can be *Spiral*, *Stripe* or *Bar* .. image:: assets/bar.png :alt: Bar plot :width: 80% :align: center | .. |photo| image:: assets/photo.png :height: 20px The user can save the trends by clicking on this |photo| icon and use the image or video in his/her stories. By clicking outside the globe, the current selection of the places is reset. Map Pins ^^^^^^^^ Since the DEA 1.7.0 release, users can pin the map to add **interactive** location elements. .. image:: assets/pins.png :alt: Add map pins :width: 80% :align: center | By clicking on the ``Pins`` button of the DEA **Story Editor** and then clicking on the map, a pin is added on the globe, anchored to a panel in which it is possible to add text, images, and videos, using an interface similar to the one available for writing the content of the slides. .. image:: assets/map-pin-editor.png :alt: Add content in map pin :width: 80% :align: center | By default, the size of the panel linked to the pin fits the content and it is fixed. If users want to resize the content of the panel, they have to disable the option ``Fit content in Viewer`` and drag the bottom-right corner of the panel to set the chosen dimension. The map pins can be combined with datasets, terrains, base layers and assets. The title of the pin will be shown on the map, on the bottom of the marker. Users have to save their stories to see the pins in the Story Viewer. .. image:: assets/multi-pin.png :alt: Pin title :width: 60% :align: center | The content of the pin, which can be dragged from the header, is shown by clicking on the pin itself, both in the **Story Editor** and in the **Story Viewer**. If no content is defined for a pin, the panel will not be visualized by clicking on the pin. Similarly, if no title is defined for a pin, no label will be shown on the map for the corresponding marker. .. image:: assets/map-pin-viewer.png :alt: Map pin in Story Viewer :width: 80% :align: center | |new| Since the DEA 1.8.0 release, users can: * Update pins' position by dragging them on the map. * Duplicate an existing pin, selecting the option from the context menu shown by right-clicking the pin. * Change the font size, font family and font color of the pin's title. .. image:: assets/pin_new_features.png :alt: Pin new features :width: 60% :align: center | |alert| **Where is my text?** ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | Since the DEA 1.6.0 release, the empty text of a slide will not be visible. | This should be useful if users want to add a video or an image as a slide background or if they do not need text. .. |alert| image:: assets/alert.png :height: 30px | .. rubric:: Footnotes .. [#f1] Local video duration must not exceed 60 seconds. .. [#f2] Please note that only YouTube video URLs are supported. URLs from other platforms are not allowed. .. [#f3] Please note there is a known issue related to the videos visualization on the Firefox Browser version 131.0 Windows 64 bit. .. [#f4] An example of how to generate a COG file suitable for DEA is available on |INSULA|. .. |INSULA| raw:: html INSULA .. |GLB| raw:: html GLB .. |GeoJSON| raw:: html GeoJSON .. |TopoJSON| raw:: html TopoJSON .. |KML| raw:: html KML .. |CZML| raw:: html CZML .. |COG| raw:: html COG .. |MP4| raw:: html MP4 .. |QuickTime File Format| raw:: html QuickTime File Format .. |WebM| raw:: html WebM .. |here| raw:: html here .. |Notebook| raw:: html Notebook .. |WGS 84| raw:: html WGS 84 .. |GDAL| raw:: html GDAL