{"id":126721,"date":"2022-07-20T20:26:48","date_gmt":"2022-07-20T20:26:48","guid":{"rendered":"https:\/\/blog.finxter.com\/?p=489491"},"modified":"2022-07-20T20:26:48","modified_gmt":"2022-07-20T20:26:48","slug":"before-after-image-in-plotly-dash","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/07\/20\/before-after-image-in-plotly-dash\/","title":{"rendered":"Before After Image in Plotly Dash"},"content":{"rendered":"\n
\n
\n
\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n
5\/5 – (1 vote) <\/div>\n<\/div>\n

\"\ud83d\udca1\" This article will show you how to use the BeforeAfter<\/code> image component in your Plotly Dash project.<\/p>\n

\n

Dash book<\/a> 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 dash-extensions<\/a><\/code> library.<\/p>\n

pip install dash-extensions<\/pre>\n
Before we dive into the code, here’s a screenshot of the stunning interactive dashboard visualization created in the project:<\/p>\n
\"\"<\/figure>\n
Feel free to visit the live app showing different exciting images from the Hubble and Webb telescopes here:<\/p>\n
\"\ud83c\udf0e\" Interactive Live App<\/strong>: https:\/\/dash-webb-compare.herokuapp.com\/<\/a><\/p>\n
It’s fun to play with it for 5-minutes—the pics from the Universe are stunning! \"\ud83d\udc0d\"<\/p>\n
\n
You can find the source code here:<\/p>\n
\"\ud83d\udcbb\" Full Source Code<\/strong>: https:\/\/github.com\/AnnMarieW\/webb-compare<\/a><\/p>\n
The code to produce this easy app can be packed in only ~40 lines Python!<\/p>\n
I highlighted the necessary code to create the BeforeAfter<\/code> component from the dash-extensions<\/code> package:<\/p>\n
from dash import Dash, html\nfrom dash_extensions import BeforeAfter\nimport 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\"), ],\n) 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\"), ],\n) app.layout = dmc.MantineProvider( dmc.Container([header, tabs]), theme={\"colorScheme\": \"dark\"}, withGlobalStyles=True\n) if __name__ == \"__main__\": app.run()<\/pre>\n
It makes use of the BeforeAfter<\/code> component and the dash_mantine_components<\/a><\/code> from Plotly Dash<\/a>.<\/p>\n
Adam’s video greatly explains the Before After Image Slider<\/strong> — feel free to watch it and leave a like in the video for his effort educating the Dash community for free with outstanding content:<\/p>\n
\n
\n