[Tut] Before After Image in Plotly Dash - Printable Version

[Tut] Before After Image in Plotly Dash - Printable Version

+- Sick Gaming (https://sickgaming.net)
+-- Forum: Programming (https://sickgaming.net/forum-76.html)
+--- Forum: Python (https://sickgaming.net/forum-83.html)
+--- Thread: [Tut] Before After Image in Plotly Dash (/thread-99735.html)

[Tut] Before After Image in Plotly Dash - xSicKxBot - 07-23-2022

Before After Image in Plotly Dash

5/5 – (1 vote)

[Image: 1f4a1.png]

This article will show you how to use the

Code:
BeforeAfter

image component in your Plotly Dash project.

Dash book author Ann just created the following stunning web project visualizing before/after galaxy images from the James Webb Space Telescope in a simple and straightforward Dash app using the BeforeAfter component of the

Code:
dash-extensions

library.

Code:
pip install dash-extensions

Before we dive into the code, here’s a screenshot of the stunning interactive dashboard visualization created in the project:

[Image: 179326884-a9a01fef-6f64-4de0-a40f-b206f3...=780&ssl=1]

[Image: 179326884-a9a01fef-6f64-4de0-a40f-b206f3...=780&ssl=1]

Feel free to visit the live app showing different exciting images from the Hubble and Webb telescopes here:

[Image: 1f30e.png]

Interactive Live App: https://dash-webb-compare.herokuapp.com/

It’s fun to play with it for 5-minutes—the pics from the Universe are stunning!

[Image: 1f40d.png]

You can find the source code here:

[Image: 1f4bb.png]

Full Source Code: https://github.com/AnnMarieW/webb-compare

The code to produce this easy app can be packed in only ~40 lines Python!

I highlighted the necessary code to create the

Code:
BeforeAfter

component from the

Code:
dash-extensions

package:

Code:
from dash import Dash, html
from dash_extensions import BeforeAfter
import dash_mantine_components as dmc app = Dash(__name__) header = html.Div( [ dmc.Title("James Webb Space Telescope", order=1), dmc.Text("First Images -- Before and After -- Hubble vs Webb"), dmc.Space(h="md"), ],
) def make_before_after(before, after): return html.Div( [ dmc.Space(h=40), dmc.Group( [dmc.Text("Hubble"), dmc.Text("Webb")], position="apart", style={"width": 1000}, ), BeforeAfter(before=before, after=after, height=800, width=1000), ], ) tabs = dmc.Tabs( [ dmc.Tab(make_before_after("/assets/webb_deep_field.jpg", "/assets/deep_field.jpg"), label="Galaxy Cluster SMACS 0723"), dmc.Tab(make_before_after("/assets/webb_stephans_quintet.jpg", "/assets/stephans_quintet.jpg"), label="Stephans Quintet"), dmc.Tab(make_before_after("assets/webb_carina.jpg", "/assets/carina.png"), label="Carina Nebula"), dmc.Tab(make_before_after("assets/webb_southern_nebula.jpg", "assets/southern_nebula.jpg"), label="Southern Ring Nebula"), ],
) app.layout = dmc.MantineProvider( dmc.Container([header, tabs]), theme={"colorScheme": "dark"}, withGlobalStyles=True
) if __name__ == "__main__": app.run()

It makes use of the

Code:
BeforeAfter

component and the

Code:
dash_mantine_components

from Plotly Dash.

Adam’s video greatly explains the Before After Image Slider — feel free to watch it and leave a like in the video for his effort educating the Dash community for free with outstanding content:

You can find a tutorial on how toinstall dash here.

You can find our full book on Python Dash here:

Book Python Dash

If you’re interested in learning more about how to create beautiful dashboard applications in Python, check out our new book Python Dash.

[Image: image-24.png?resize=292%2C384&ssl=1]

You’ve seen dashboards before; think election result visualizations you can update in real-time, or population maps you can filter by demographic.

With the Python Dash library, you’ll create analytic dashboards that present data in effective, usable, elegant ways in just a few lines of code.

Get the book on NoStarch or Amazon!