+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: Python (https://www.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
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload="{"align":"left","id":"489491","slug":"default","valign":"top","reference":"auto","class":"","count":"1","readonly":"","score":"5","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}">
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</div>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> This article will show you how to use the <code>BeforeAfter</code> image component in your Plotly Dash project.</p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<p><a rel="noreferrer noopener" href="https://nostarch.com/python-dash" data-type="URL" data-id="https://nostarch.com/python-dash" target="_blank">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 <code><a rel="noreferrer noopener" href="https://pypi.org/project/dash-extensions/" data-type="URL" data-id="https://pypi.org/project/dash-extensions/" target="_blank">dash-extensions</a></code> library.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">pip install dash-extensions</pre>
<p>Before we dive into the code, here’s a screenshot of the stunning interactive dashboard visualization created in the project:</p>
<figure class="wp-block-image size-large"><img src="https://i0.wp.com/user-images.githubusercontent.com/72614349/179326884-a9a01fef-6f64-4de0-a40f-b206f3a99ff8.gif?w=780&ssl=1" alt="" data-recalc-dims="1"/></figure>
<p>Feel free to visit the live app showing different exciting images from the Hubble and Webb telescopes here:</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30e.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Interactive Live App</strong>: <a rel="noreferrer noopener" href="https://dash-webb-compare.herokuapp.com/" target="_blank">https://dash-webb-compare.herokuapp.com/</a></p>
<p>It’s fun to play with it for 5-minutes—the pics from the Universe are stunning! <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f40d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<p>You can find the source code here:</p>
<p class="has-base-2-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4bb.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Full Source Code</strong>: <a rel="noreferrer noopener" href="https://github.com/AnnMarieW/webb-compare" target="_blank">https://github.com/AnnMarieW/webb-compare</a></p>
<p>The code to produce this easy app can be packed in only ~40 lines Python!</p>
<p>I highlighted the necessary code to create the <code>BeforeAfter</code> component from the <code>dash-extensions</code> package:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2,16-27,32-35" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">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()</pre>
<p>It makes use of the <code>BeforeAfter</code> component and the <code><a rel="noreferrer noopener" href="https://www.dash-mantine-components.com/" data-type="URL" data-id="https://www.dash-mantine-components.com/" target="_blank">dash_mantine_components</a></code> from <a rel="noreferrer noopener" href="https://blog.finxter.com/python-plotly-dash-cheat-sheet/" data-type="post" data-id="28074" target="_blank">Plotly Dash</a>.</p>
<p>Adam’s video greatly explains the <strong>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>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Before After Image Slider - Dash Component" width="780" height="439" src="https://www.youtube.com/embed/-0bqU94KGMw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</figure>
<p>You can find a tutorial on how to<a href="https://blog.finxter.com/how-to-install-dash-on-pycharm/" data-type="post" data-id="35262" target="_blank" rel="noreferrer noopener"> install dash</a> here.</p>
<p>You can find our full <a href="https://blog.finxter.com/the-book-of-dash-reviews/" data-type="post" data-id="453602" target="_blank" rel="noreferrer noopener">book</a> on Python Dash here:</p>
<h2>Book Python Dash</h2>
<hr class="wp-block-separator has-css-opacity"/>
<p><em>If you’re interested in learning more about how to create beautiful dashboard applications in Python, check out our new book <a rel="noreferrer noopener" href="https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly-dp-1718502222/dp/1718502222/" data-type="URL" data-id="https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly-dp-1718502222/dp/1718502222/" target="_blank">Python Dash</a>. </em></p>
<div class="wp-container-3 wp-block-columns">
<div class="wp-container-1 wp-block-column">
<figure class="wp-block-image size-full is-resized"><a href="https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly-dp-1718502222/dp/1718502222/" target="_blank" rel="noopener"><img loading="lazy" src="https://i0.wp.com/blog.finxter.com/wp-content/uploads/2022/05/image-24.png?resize=292%2C384&ssl=1" alt="" class="wp-image-336350" width="292" height="384" srcset="https://i0.wp.com/blog.finxter.com/wp-content/uploads/2022/05/image-24.png?w=325&ssl=1 325w, https://i0.wp.com/blog.finxter.com/wp-content/uploads/2022/05/image-24.png?resize=228%2C300&ssl=1 228w" sizes="(max-width: 292px) 100vw, 292px" data-recalc-dims="1" /></a></figure>
</div>
<div class="wp-container-2 wp-block-column">
<p><em>You’ve seen dashboards before; think election result visualizations you can update in real-time, or population maps you can filter by demographic. </em></p>
<p><em>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.</em></p>
</div>
</div>
<p><em>Get the book on <a rel="noreferrer noopener" href="https://nostarch.com/python-dash" data-type="URL" data-id="https://nostarch.com/python-dash" target="_blank">NoStarch</a> or <a rel="noreferrer noopener" href="https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly-dp-1718502222/dp/1718502222/" data-type="URL" data-id="https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly-dp-1718502222/dp/1718502222/" target="_blank">Amazon</a>! </em></p>
<hr class="wp-block-separator has-css-opacity"/>
</div>
https://www.sickgaming.net/blog/2022/07/20/before-after-image-in-plotly-dash/