| Name | respysive-slide JSON |
| Version |
1.1.10
JSON |
| download |
| home_page | None |
| Summary | A Python package that allows you to create interactive presentations using Python, Bootstrap and Reveal.js. Charts from Altair and Plotly can also be added |
| upload_time | 2024-05-16 10:50:32 |
| maintainer | None |
| docs_url | None |
| author | fbxyz |
| requires_python | >=3.7 |
| license | None |
| keywords |
slide
presentation
reveal.js
bootstrap
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# respysive-slide
___
A Python package that allows you to create interactive presentations using Python,
Bootstrap and Reveal.js.
Charts from Matplotlib Altair and Plotly can be easily added.
You will find a <a href="https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html" target="_blank">live example here</a>
___
## Installation
With PyPI
```
pip install respysive-slide
```
You can also clone the <a href="https://github.com/fbxyz/respysive-slide" target="_blank">repo</a> and import respysive as a module
___
## Usage
The package consists of two main classes: `Presentation` and `Slide`.
`Presentation` is the main instance, containing your slides.
`Slide` is used to create a unique slide. You can add various elements to it such as text, headings, images, cards etc.
Each `Slide` instance is added to the `Presentation` instance for final rendering.
### Creating a new Presentation
Here's an example of how to use `respysive-slide`
```python
from respysive import Slide, Presentation
# Create a new presentation
p = Presentation()
# Create the first slide with a centered layout
slide1 = Slide(center=True)
# Content for the title page
logo_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 content
styles = [
{'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 slide
slide1.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 kwarg `styles` containing :
- one or several CSS styles as key : values
- and class as a unique key:
### A simple text slide
Now, 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.
```python
# Create the second slide
slide2 = Slide()
# Add a title to the slide with a fontawesome icon
slide2.add_title("Your title with a fontawesome icon", icon="fas fa-infinity fa-beat")
# Create some text in markdown format
txt = 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, <a href="https://fontawesome.com/icons" target="_blank">Fontawesome icons</a> can be added.
### A two columns slide with text and image
Let's add two columns :
- the first with some text
- the second with an image
`respysive-slide` will 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
```python
# Create a new slide
slide3 = Slide()
text = markdown("""
En cosmologie, le modèle de l'univers fractal désigne un modèle cosmologique
dont 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 fractales
dans 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 de
très petites échelles.
""")
# Add image url
url = "https://upload.wikimedia.org/wikipedia/commons/d/d5/Univers_Fractal_J.H..jpg"
# Add title to slide
slide3.add_title("Bootstrap powering")
# Add styles to slide
css_txt = [
{'font-size': '70%', 'text-align': 'justify', 'class': 'bg-warning fragment'}, # text style
None # 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 styles
slide3.add_content([text, url], columns=[7, 5], styles=css_txt)
```
`class : 'fragment'` is used to pass <a href="https://revealjs.com/fragments/" target="_blank">Reveal.js fragments</a>
### Plotly, Altair and Matplotlib
Plotly, Altair or Matplotlib graphs can be easily added with `add_content()`. Interactivity
is fully functional for Plotly and Altair.
```python
## Slide 4 ##
slide4 = Slide()
slide4.add_title("Plotly")
# import plotly express for creating scatter plot
import plotly.express as px
# load iris data
df = px.data.iris()
# create scatter plot
fig = px.scatter(df, x="sepal_width", y="sepal_length",
color="species", size="petal_length", hover_data=["petal_width"])
# update layout
fig.update_layout(autosize=True)
# Export the figure to json format
j = fig.to_json()
# apply css to the figure
css_txt = [{'class': 'stretch'}]
# add the scatter plot to the slide
slide4.add_content([j], columns=[12], styles=css_txt)
```
```python
## Slide 5 : Altair plot##
slide5 = Slide()
slide5.add_title("Altair")
# import altair for creating scatter plot
import altair as alt
source = px.data.iris()
# create scatter plot
chart = (
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 format
j = chart.to_json()
# add the scatter plot to the slide
slide5.add_content([j], columns=[12])
```
Matplotlib fig are automatically converted to svg
```python
## Slide 5_fig : Matplotlib plot##
slide5_fig = Slide()
slide5_fig.add_title("Matplotlib")
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(0,4*np.pi-1,0.1) # start,stop,step
y = 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 slide
slide5_fig.add_content([fig], columns=[12])
```
It is **highly recommended** to set chart's width and height manually
### Bootstrap Cards
Bootstrap Cards can also be added with `add_card()` method.
```python
## Slide 6 : Bootstrap Cards ##
slide6 = Slide()
# card 1 content
txt_card1 = markdown("""
- list 1
- list 2
""")
# card 1 image
univ_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 page
cards = [{'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 cards
styles_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 slide
slide6.add_title("Bootstrap cards can be added")
slide6.add_card(cards, styles_list)
```
### Background image
<a href="https://revealjs.com/backgrounds/" target="_blank">Reveal.js Slide Backgrounds</a> by passing a class `data-background-*` to
the Slide() method with a kwarg
```python
## 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 kwargs
slide_kwargs = {
'data-background-image': bckgnd_url,
'data-background-size': 'cover', # more options here : https://revealjs.com/backgrounds/
}
# Create a slide object with slide kwargs
slide7 = Slide(center=True, **slide_kwargs)
css_background = {"class": "text-center", "color": "#e63946", "background-color":"#f1faee"}
slide7.add_title("Image background", **css_background)
```
### Vertical slides
You can add vertical slides. First, let's create slide 8 (horizontal one) and slide 9 (vertical one)
```python
## 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 presentation
### Presentation rendering
Last step in rendering your Reveal.js presentation with `respysive-slide` as HTML
The `Presentation.add_slide()` method is used
```python
# Adding slide to the presentation
p.add_slide([slide1, slide2, slide3, slide4, slide5, slide6, slide7, [slide8, slide9]])
# Saving the presentation in HTML format
p.save_html("readme_example.html")
```
As you can see, slides 8 and 9 are inside a list. That tels `respysive-slide` to create vertical slide
Different <a href="https://revealjs.com/themes/" target="_blank">Reveal.js theme</a>
and parameters can be added :
```python
p.save_html(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 url
```
Note that you need an internet connection to show your Slides !
### PDF Export
The slide can be exported with the classic <a href="https://revealjs.com/pdf-export/" target="_blank">Reveal.js method</a>.
Just add ?print-pdf at the end of the url and open the in-browser print dialog :
<a href="https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf" target="_blank"> https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf </a>.
Best results are obtained with Chrome or Chromium
## Future features
- add method for speaker view
- offline presentation
- better recognition of json plotly
- prettify the final rendering
Raw data
{
"_id": null,
"home_page": null,
"name": "respysive-slide",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "slide, presentation, reveal.js, Bootstrap",
"author": "fbxyz",
"author_email": null,
"download_url": null,
"platform": null,
"description": "# 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\n\nYou will find a <a href=\"https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html\" target=\"_blank\">live example here</a>\n\n\n___\n## Installation\nWith PyPI \n```\npip install respysive-slide\n```\n\nYou can also clone the <a href=\"https://github.com/fbxyz/respysive-slide\" target=\"_blank\">repo</a> 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\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<ul><li>but it's ok to use HTML tag</li></ul>\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, <a href=\"https://fontawesome.com/icons\" target=\"_blank\">Fontawesome icons</a> can be added.\n\n\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\u00e8le de l'univers fractal d\u00e9signe un mod\u00e8le cosmologique \ndont la structure et la r\u00e9partition de la mati\u00e8re poss\u00e8dent une dimension fractale, \net ce, \u00e0 plusieurs niveaux. \n\nDe fa\u00e7on plus g\u00e9n\u00e9rale, il correspond \u00e0 l'usage ou l'apparence de fractales \ndans l'\u00e9tude de l'Univers et de la mati\u00e8re qui le compose.\nCe mod\u00e8le pr\u00e9sente certaines lacunes lorsqu'il est utilis\u00e9 \u00e0 de tr\u00e8s grandes ou de \ntr\u00e8s petites \u00e9chelles.\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 <a href=\"https://revealjs.com/fragments/\" target=\"_blank\">Reveal.js fragments</a>\n\n\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\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\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\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\n\n### Background image\n\n<a href=\"https://revealjs.com/backgrounds/\" target=\"_blank\">Reveal.js Slide Backgrounds</a> 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\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\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 <a href=\"https://revealjs.com/themes/\" target=\"_blank\">Reveal.js theme</a> \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 <a href=\"https://revealjs.com/pdf-export/\" target=\"_blank\">Reveal.js method</a>.\n\nJust add ?print-pdf at the end of the url and open the in-browser print dialog : \n<a href=\"https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf\" target=\"_blank\"> https://raw.githack.com/fbxyz/respysive-slide/master/readme_example.html?print-pdf </a>.\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\n",
"bugtrack_url": null,
"license": null,
"summary": "A Python package that allows you to create interactive presentations using Python, Bootstrap and Reveal.js. Charts from Altair and Plotly can also be added",
"version": "1.1.10",
"project_urls": {
"Home": "https://github.com/fbxyz/respysive-slide"
},
"split_keywords": [
"slide",
" presentation",
" reveal.js",
" bootstrap"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "a1fb5d678bc80c625060aa4b8700bf1ff3e1f29fe7d7bee7b9b03ab5ea018aec",
"md5": "c20d7150441db8438f96afe4d50efe9e",
"sha256": "b085314c3a2d774a3ea751ecfaaef52e37c5f631fea802376c9bdfa411cca9b2"
},
"downloads": -1,
"filename": "respysive_slide-1.1.10-py3-none-any.whl",
"has_sig": false,
"md5_digest": "c20d7150441db8438f96afe4d50efe9e",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 15771,
"upload_time": "2024-05-16T10:50:32",
"upload_time_iso_8601": "2024-05-16T10:50:32.867974Z",
"url": "https://files.pythonhosted.org/packages/a1/fb/5d678bc80c625060aa4b8700bf1ff3e1f29fe7d7bee7b9b03ab5ea018aec/respysive_slide-1.1.10-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-05-16 10:50:32",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "fbxyz",
"github_project": "respysive-slide",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [],
"lcname": "respysive-slide"
}
