{"id":26880450,"url":"https://github.com/fbxyz/respysive-slide","last_synced_at":"2025-05-07T21:47:08.623Z","repository":{"id":65341829,"uuid":"589759605","full_name":"fbxyz/respysive-slide","owner":"fbxyz","description":"A Python package that allows you to create interactive presentations  using Python, Bootstrap and Reveal.js.","archived":false,"fork":false,"pushed_at":"2024-05-16T10:49:54.000Z","size":73488,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T21:46:56.945Z","etag":null,"topics":["altair","bootstrap","matplotlib","plotly","presentation","python","responsive","revealjs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fbxyz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-01-16T21:42:55.000Z","updated_at":"2025-05-07T15:25:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"f0cb8a06-0a51-4d1c-a184-4373161d7b6b","html_url":"https://github.com/fbxyz/respysive-slide","commit_stats":{"total_commits":47,"total_committers":2,"mean_commits":23.5,"dds":0.2978723404255319,"last_synced_commit":"19f4a1ada94eecc73d4209261bd75d92b16e7585"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbxyz%2Frespysive-slide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbxyz%2Frespysive-slide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbxyz%2Frespysive-slide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbxyz%2Frespysive-slide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fbxyz","download_url":"https://codeload.github.com/fbxyz/respysive-slide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252961858,"owners_count":21832192,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["altair","bootstrap","matplotlib","plotly","presentation","python","responsive","revealjs"],"created_at":"2025-03-31T14:24:26.346Z","updated_at":"2025-05-07T21:47:08.577Z","avatar_url":"https://github.com/fbxyz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# respysive-slide\n___\nA Python package that allows you to create interactive presentations using Python, \nBootstrap and Reveal.js. \nCharts from Matplotlib Altair and Plotly can be easily added.\n\n![respysiv.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/respysiv.png)\n\nYou will find a \u003ca href=\"https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html\" target=\"_blank\"\u003elive example here\u003c/a\u003e\n\n\n___\n## Installation\nWith PyPI \n```\npip install respysive-slide\n```\n\nYou can also clone the \u003ca href=\"https://github.com/fbxyz/respysive-slide\" target=\"_blank\"\u003erepo\u003c/a\u003e and import respysive as a module\n\n___\n## Usage\n\nThe package consists of two main classes: `Presentation` and `Slide`.\n\n`Presentation` is the main instance, containing your slides. \n\n`Slide` is used to create a unique slide. You can add various elements to it such as text, headings, images, cards etc.\n\nEach `Slide` instance is added to the `Presentation` instance for final rendering.\n\n### Creating a new Presentation\nHere's an example of how to use `respysive-slide`\n\n```python\nfrom respysive import Slide, Presentation\n\n# Create a new presentation\np = Presentation()\n\n# Create the first slide with a centered layout\nslide1 = Slide(center=True)\n\n# Content for the title page\nlogo_url = \"https://upload.wikimedia.org/wikipedia/commons/4/4d/Fractal_canopy.svg\"\ntitle_page_content = {\n    'title': 'Your presentation title',\n    'subtitle': 'Your subtitle',\n    'authors': 'Author 1, Author 2',\n    'logo': logo_url\n}\n\n# Styles for the title page content in the same order as content\nstyles = [\n    {'color': '#e63946', 'class': 'r-fit-text border-top'},  # title\n    {},  # subtitle style by default\n    {},  # authors style by default\n    {'filter': 'invert(100%) opacity(30%)'},  # logo\n]\n\n# Add the title page to the slide\nslide1.add_title_page(title_page_content, styles)\n```\n\nYou can pass CSS styles and classes as kwargs. For example, in the code below,\nthe add_title method takes a dictionary kwarg `styles` containing : \n - one or several CSS styles as key : values\n - and class as a unique key:\n\n![slide1.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide1.png)\n\n### A simple text slide\n\nNow, lets create a simple slide with a title and some content. \n\nMarkdown is more intuitive, so we will use it, but it's not mandatory.\n\n ```python\n# Create the second slide\nslide2 = Slide()\n\n# Add a title to the slide with a fontawesome icon\nslide2.add_title(\"Your title with a fontawesome icon\", icon=\"fas fa-infinity fa-beat\")\n\n# Create some text in markdown format\ntxt = markdown(\"\"\"\nThis is some dummy text \n\n- and it's easier to use Markdown\n\u003cul\u003e\u003cli\u003ebut it's ok to use HTML tag\u003c/li\u003e\u003c/ul\u003e\n\"\"\")\n\n# Add the text to the slide in a new Bootstrap column with a width of 12 (default)\nslide2.add_content([txt], columns=[12])\n ```\nNote that for the add_title() method, \u003ca href=\"https://fontawesome.com/icons\" target=\"_blank\"\u003eFontawesome icons\u003c/a\u003e can be added.\n\n![slide2.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide2.png)\n\n### A two columns slide with text and image\n\nLet's add  two columns : \n- the first with some text\n- the second with an image\n\n`respysive-slide` will try to find automatically the content type (txt, image, chart from json). \nYou only have to pass the content list with the add_content() method\n\n ```python    \n# Create a new slide\nslide3 = Slide()\n\ntext = markdown(\"\"\"\nEn cosmologie, le modèle de l'univers fractal désigne un modèle cosmologique \ndont la structure et la répartition de la matière possèdent une dimension fractale, \net ce, à plusieurs niveaux. \n\nDe façon plus générale, il correspond à l'usage ou l'apparence de fractales \ndans l'étude de l'Univers et de la matière qui le compose.\nCe modèle présente certaines lacunes lorsqu'il est utilisé à de très grandes ou de \ntrès petites échelles.\n\n\"\"\")\n\n# Add image url\nurl = \"https://upload.wikimedia.org/wikipedia/commons/d/d5/Univers_Fractal_J.H..jpg\"\n\n# Add title to slide\nslide3.add_title(\"Bootstrap powering\")\n\n# Add styles to slide\ncss_txt = [\n    {'font-size': '70%', 'text-align': 'justify', 'class': 'bg-warning fragment'},  # text style\n    None  # url style is mandatory even it is None\n]\n\n# Add content to slide, where text and url are added to the slide with 7 and 5 columns respectively\n# css_txt is added as styles\nslide3.add_content([text, url], columns=[7, 5], styles=css_txt)\n```\n\n`class : 'fragment'` is used to pass \u003ca href=\"https://revealjs.com/fragments/\" target=\"_blank\"\u003eReveal.js fragments\u003c/a\u003e\n\n![slide3.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide3.png)\n\n### Plotly, Altair and Matplotlib\nPlotly, Altair or Matplotlib graphs can be easily added with `add_content()`. Interactivity \nis fully functional for Plotly and Altair.\n\n```python\n## Slide 4 ##\nslide4 = Slide()\nslide4.add_title(\"Plotly\")\n\n# import plotly express for creating scatter plot\nimport plotly.express as px\n\n# load iris data\ndf = px.data.iris()\n\n# create scatter plot\nfig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\",\n                 color=\"species\", size=\"petal_length\", hover_data=[\"petal_width\"])\n\n# update layout\nfig.update_layout(autosize=True)\n\n# Export the figure to json format\nj = fig.to_json()\n\n# apply css to the figure\ncss_txt = [{'class': 'stretch'}]\n\n# add the scatter plot to the slide\nslide4.add_content([j], columns=[12], styles=css_txt)\n\n```\n![slide4.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide4.png)\n\n```python\n## Slide 5 : Altair plot##\nslide5 = Slide()\nslide5.add_title(\"Altair\")\n\n# import altair for creating scatter plot\nimport altair as alt\n\nsource = px.data.iris()\n\n# create scatter plot\nchart = (\n    alt.Chart(source)\n    .mark_circle(size=60)\n    .encode(\n        x=\"sepal_width\", y=\"sepal_length\", color=\"species\",\n        tooltip=[\"species\", \"sepal_length\", \"sepal_width\"],\n    )\n    .interactive()\n    .properties(width=900, height=500)\n)\n\n# Export the figure to json format\nj = chart.to_json()\n\n# add the scatter plot to the slide\nslide5.add_content([j], columns=[12])\n```\n![slide5.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide5.png)\n\nMatplotlib fig are automatically converted to svg\n\n```python\n## Slide 5_fig : Matplotlib plot##\nslide5_fig = Slide()\nslide5_fig.add_title(\"Matplotlib\")\n\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nx = np.arange(0,4*np.pi-1,0.1)   # start,stop,step\ny = np.sin(x)\nz = np.cos(x)\n\nplt.rcParams[\"figure.figsize\"] = (8, 5)\nfig, ax = plt.subplots()\nplt.plot(x,y,x,z)\nplt.xlabel('x values')\nplt.title('sin and cos ')\nplt.legend(['sin(x)', 'cos(x)'])\nplt.show()\n\n# add the  plot to the slide\nslide5_fig.add_content([fig], columns=[12])\n```\n![slide5_fig.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide5_fig.png)\n\nIt is **highly recommended** to set chart's width and height manually\n\n### Bootstrap Cards\nBootstrap Cards can also be added with `add_card()` method.\n\n```python\n## Slide 6 : Bootstrap Cards ##\nslide6 = Slide()\n\n# card 1 content\ntxt_card1 = markdown(\"\"\"\n- list 1\n- list 2\n\n\"\"\")\n\n# card 1 image\nuniv_url = \"https://upload.wikimedia.org/wikipedia/commons/b/b5/Mandel_zoom_04_seehorse_tail.jpg\"\n\n# list of cards. These orders will be the same on the HTML page\ncards = [{'text': txt_card1, 'image': univ_url},  # Only text and image\n         {'image': logo_url, 'text': \"Card text 2\", 'title': \"Card Title 2\", },  # Image, text and title\n         {'title': \"Card Title 3\", 'text': \"Card text 3\"}]  # Title and text\n\n# styles for each cards\nstyles_list = [{'font-size': '20px', 'color': '#1d3557', 'class': 'bg-danger'},\n               {'font-size': '20px', 'color': '#e63946', 'class': 'bg-warning'},\n               {'font-size': '20px', 'color': '#f1faee', 'class': 'bg-info'}]\n\n# add title and card to slide\nslide6.add_title(\"Bootstrap cards can be added\")\nslide6.add_card(cards, styles_list)\n```\n\n![slide6.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide6.png)\n\n### Background image\n\n\u003ca href=\"https://revealjs.com/backgrounds/\" target=\"_blank\"\u003eReveal.js Slide Backgrounds\u003c/a\u003e by passing a class `data-background-*`  to \nthe Slide() method with a kwarg\n\n```python\n\n## Slide 7 : Background ##\nbckgnd_url = \"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Frost_patterns_2.jpg/1920px-Frost_patterns_2.jpg\"\n\n# Create a dictionary with slide kwargs\nslide_kwargs = {\n    'data-background-image': bckgnd_url,\n    'data-background-size': 'cover',  # more options here : https://revealjs.com/backgrounds/\n}\n\n# Create a slide object with slide kwargs\nslide7 = Slide(center=True, **slide_kwargs)\n\ncss_background = {\"class\": \"text-center\", \"color\": \"#e63946\", \"background-color\":\"#f1faee\"}\nslide7.add_title(\"Image  background\", **css_background)\n```\n\n![slide7.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide7.png)\n\n### Vertical slides\n\nYou can add vertical slides. First, let's create slide 8 (horizontal one) and slide 9 (vertical one)\n\n```python\n## Slide 8 and 9 : Vertical slide ##\nslide8 = Slide()\ntext = markdown(\"\"\"Press arrow down to show vertical slide\"\"\")\nslide8.add_title(\"Horizontal and vertical slides\")\nslide8.add_content([text])\n\n## Slide 8 and 9 : Vertical slide ##\nslide9 = Slide(center=True)\nslide9.add_title(\"Horizontal and vertical slides\")\ntext = markdown(\"\"\"This is a vertical slide\"\"\")\nslide9.add_content([text])\n```\n\nThey will be added as list in the next method to export your presentation\n\n![slide8_9.png](https://raw.githubusercontent.com/fbxyz/respysive-slide/master/assets/img/slide8_9.png)\n\n### Presentation rendering\nLast step in rendering your Reveal.js presentation with `respysive-slide` as  HTML\nThe `Presentation.add_slide()` method is used\n\n```python\n\n# Adding slide to the presentation\np.add_slide([slide1, slide2, slide3, slide4, slide5, slide6, slide7, [slide8, slide9]])\n\n# Saving the presentation in HTML format\np.save_html(\"readme_example.html\")\n```\n\nAs you can see, slides 8 and 9 are inside a list. That tels `respysive-slide` to create vertical slide\n\nDifferent \u003ca href=\"https://revealjs.com/themes/\" target=\"_blank\"\u003eReveal.js theme\u003c/a\u003e \nand parameters can be added :\n\n```python\np.save_html(file_name,\n            theme=\"moon\",\n            width=960,\n            height=600,\n            minscale=0.2,\n            maxscale=1.5,\n            margin=0.1,\n            custom_theme=None)  # If theme=\"custom\", pass here the custom css url \n```\n\nNote that you need an internet connection to show your Slides !\n\n### PDF Export\n\nThe slide can be exported with the classic  \u003ca href=\"https://revealjs.com/pdf-export/\" target=\"_blank\"\u003eReveal.js method\u003c/a\u003e.\n\nJust add ?print-pdf at the end of the url and open the in-browser print dialog : \n\u003ca href=\"https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf\" target=\"_blank\"\u003e https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf \u003c/a\u003e.\n\nBest results are obtained with Chrome or Chromium\n\n## Future features\n- add method for speaker view\n- offline presentation\n- better recognition of json plotly\n- prettify the final rendering\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbxyz%2Frespysive-slide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffbxyz%2Frespysive-slide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbxyz%2Frespysive-slide/lists"}