Package: respysive-slide
respysive-slideA Python package that allows you to create interactive presentations using Python,
Bootstrap and Reveal.js.
Charts from Altair and Plotly can also be added.You will find alive example hereInstallationWith PyPIpip install respysive-slideYou can also clone therepoand import respysive as a moduleUsageThe package consists of two main classes:PresentationandSlide.Presentationis the main instance, containing your slides.Slideis used to create a unique slide. You can add various elements to it such as text, headings, images, cards etc.EachSlideinstance is added to thePresentationinstance for final rendering.Creating a new PresentationHere's an example of how to userespysive-slidefromrespysiveimportSlide,Presentation# Create a new presentationp=Presentation()# Create the first slide with a centered layoutslide1=Slide(center=True)# Content for the title pagelogo_url="https://upload.wikimedia.org/wikipedia/commons/4/4d/Fractal_canopy.svg"title_page_content={'title':'Your presentation title','subtitle':'Your subtitle','authors':'Author 1, Author 2','logo':logo_url}# Styles for the title page content in the same order as contentstyles=[{'color':'#e63946','class':'r-fit-text border-top'},# title{},# subtitle style by default{},# authors style by default{'filter':'invert(100%) opacity(30%)'},# logo]# Add the title page to the slideslide1.add_title_page(title_page_content,styles)You can pass CSS styles and classes as kwargs. For example, in the code below,
the add_title method takes a dictionary kwargstylescontaining :one or several CSS styles as key : valuesand class as a unique key:A simple text slideNow, lets create a simple slide with a title and some content.Markdown is more intuitive, so we will use it, but it's not mandatory.# Create the second slideslide2=Slide()# Add a title to the slide with a fontawesome iconslide2.add_title("Your title with a fontawesome icon",icon="fas fa-infinity fa-beat")# Create some text in markdown formattxt=markdown("""This is some dummy text- and it's easier to use Markdown<ul><li>but it's ok to use HTML tag</li></ul>""")# Add the text to the slide in a new Bootstrap column with a width of 12 (default)slide2.add_content([txt],columns=[12])Note that for the add_title() method,Fontawesome iconscan be added.A two columns slide with text and imageLet's add  two columns :the first with some textthe second with an imagerespysive-slidewill try to find automatically the content type (txt, image, chart from json).
You only have to pass the content list with the add_content() method# Create a new slideslide3=Slide()text=markdown("""En cosmologie, le modèle de l'univers fractal désigne un modèle cosmologiquedont la structure et la répartition de la matière possèdent une dimension fractale,et ce, à plusieurs niveaux.De façon plus générale, il correspond à l'usage ou l'apparence de fractalesdans l'étude de l'Univers et de la matière qui le compose.Ce modèle présente certaines lacunes lorsqu'il est utilisé à de très grandes ou detrès petites échelles.""")# Add image urlurl="https://upload.wikimedia.org/wikipedia/commons/d/d5/Univers_Fractal_J.H..jpg"# Add title to slideslide3.add_title("Bootstrap powering")# Add styles to slidecss_txt=[{'font-size':'70%','text-align':'justify','class':'bg-warning fragment'},# text styleNone# url style is mandatory even it is None]# Add content to slide, where text and url are added to the slide with 7 and 5 columns respectively# css_txt is added as stylesslide3.add_content([text,url],columns=[7,5],styles=css_txt)class : 'fragment'is used to passReveal.js fragmentsPlotly, Altair and MatplotlibPlotly, Altair or Matplotlib graphs can be easily added withadd_content(). Interactivity
is fully functional for Plotly and Altair.## Slide 4 ##slide4=Slide()slide4.add_title("Plotly")# import plotly express for creating scatter plotimportplotly.expressaspx# load iris datadf=px.data.iris()# create scatter plotfig=px.scatter(df,x="sepal_width",y="sepal_length",color="species",size="petal_length",hover_data=["petal_width"])# update layoutfig.update_layout(autosize=True)# Export the figure to json formatj=fig.to_json()# apply css to the figurecss_txt=[{'class':'stretch'}]# add the scatter plot to the slideslide4.add_content([j],columns=[12],styles=css_txt)## Slide 5 : Altair plot##slide5=Slide()slide5.add_title("Altair")# import altair for creating scatter plotimportaltairasaltsource=px.data.iris()# create scatter plotchart=(alt.Chart(source).mark_circle(size=60).encode(x="sepal_width",y="sepal_length",color="species",tooltip=["species","sepal_length","sepal_width"],).interactive().properties(width=900,height=500))# Export the figure to json formatj=chart.to_json()# add the scatter plot to the slideslide5.add_content([j],columns=[12])Matplotlib fig are automatically converted to svg## Slide 5_fig : Matplotlib plot##slide5_fig=Slide()slide5_fig.add_title("Matplotlib")importnumpyasnpimportmatplotlib.pyplotaspltx=np.arange(0,4*np.pi-1,0.1)# start,stop,stepy=np.sin(x)z=np.cos(x)plt.rcParams["figure.figsize"]=(8,5)fig,ax=plt.subplots()plt.plot(x,y,x,z)plt.xlabel('x values')plt.title('sin and cos ')plt.legend(['sin(x)','cos(x)'])plt.show()# add the  plot to the slideslide5_fig.add_content([fig],columns=[12])It ishighly recommendedto set chart's width and height manuallyBootstrap CardsBootstrap Cards can also be added withadd_card()method.## Slide 6 : Bootstrap Cards ##slide6=Slide()# card 1 contenttxt_card1=markdown("""- list 1- list 2""")# card 1 imageuniv_url="https://upload.wikimedia.org/wikipedia/commons/b/b5/Mandel_zoom_04_seehorse_tail.jpg"# list of cards. These orders will be the same on the HTML pagecards=[{'text':txt_card1,'image':univ_url},# Only text and image{'image':logo_url,'text':"Card text 2",'title':"Card Title 2",},# Image, text and title{'title':"Card Title 3",'text':"Card text 3"}]# Title and text# styles for each cardsstyles_list=[{'font-size':'20px','color':'#1d3557','class':'bg-danger'},{'font-size':'20px','color':'#e63946','class':'bg-warning'},{'font-size':'20px','color':'#f1faee','class':'bg-info'}]# add title and card to slideslide6.add_title("Bootstrap cards can be added")slide6.add_card(cards,styles_list)Background imageReveal.js Slide Backgroundsby passing a classdata-background-*to
the Slide() method with a kwarg## Slide 7 : Background ##bckgnd_url="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Frost_patterns_2.jpg/1920px-Frost_patterns_2.jpg"# Create a dictionary with slide kwargsslide_kwargs={'data-background-image':bckgnd_url,'data-background-size':'cover',# more options here : https://revealjs.com/backgrounds/}# Create a slide object with slide kwargsslide7=Slide(center=True,**slide_kwargs)css_background={"class":"text-center","color":"#e63946","background-color":"#f1faee"}slide7.add_title("Image  background",**css_background)Vertical slidesYou can add vertical slides. First, let's create slide 8 (horizontal one) and slide 9 (vertical one)## Slide 8 and 9 : Vertical slide ##slide8=Slide()text=markdown("""Press arrow down to show vertical slide""")slide8.add_title("Horizontal and vertical slides")slide8.add_content([text])## Slide 8 and 9 : Vertical slide ##slide9=Slide(center=True)slide9.add_title("Horizontal and vertical slides")text=markdown("""This is a vertical slide""")slide9.add_content([text])They will be added as list in the next method to export your presentationPresentation renderingLast step in rendering your Reveal.js presentation withrespysive-slideas  HTML
ThePresentation.add_slide()method is used# Adding slide to the presentationp.add_slide([slide1,slide2,slide3,slide4,slide5,slide6,slide7,[slide8,slide9]])# Saving the presentation in HTML formatp.save_html("readme_example.html")As you can see, slides 8 and 9 are inside a list. That telsrespysive-slideto create vertical slideDifferentReveal.js themeand parameters can be added :Presentation.add_slide(file_name,theme="moon",width=960,height=600,minscale=0.2,maxscale=1.5,margin=0.1,custom_theme=None)# If theme="custom", pass here the custom css urlNote that you need an internet connection to show your Slides !PDF ExportThe slide can be exported with the classicReveal.js method.Just add ?print-pdf at the end of the url and open the in-browser print dialog :https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf.Best results are obtained with Chrome or ChromiumFuture featuresadd method for speaker viewoffline presentationbetter recognition of json plotlyprettify the final rendering