Contenidos

Probaremos los siguientes:

  • Imágenes
    • SVG
    • Image
  • Video
    • Video
    • VimeoVideo
    • YoutubeVideo
  • Audio
    • Audio
  • Texto o Código
    • Code
    • FileLink y FileLinks
    • Javascript
    • Latex
    • Markdown
    • Math
    • Scribd Document
  • Otros
    • JSON
    • GEOJSon
    • TextDisplayObject
    • DisplayObject
    • DisplayHandle
    • Pretty

1. Antes de: principales errores

Mi principal aprendizaje es que lo que se genera son objetos de distintos tipos. Los objetos no se muestran por defecto. Si el objeto es el resultado de la celda, el objeto se despliega por defecto. Sino es el resultado de la celda, no se muestra.

Es posible mostrar uno o varios objetos, con la función display. Display funciona en jupyter notebook/lab, pero no en python o IPython.

from IPython.display import Audio
Audio("http://www.w3schools.com/html/horse.ogg")
from IPython.display import Audio
a = Audio("http://www.w3schools.com/html/horse.ogg")
from IPython.display import Audio, display
a = Audio("http://www.w3schools.com/html/horse.ogg")
display(a)
from IPython.display import Audio, Image, display
a = Audio("http://www.w3schools.com/html/horse.ogg")
i1 = Image(filename="2021-05-ipython-display/Python.png", width=100)
i2 = Image(filename="2021-05-ipython-display/Python.jpg", width=150)
display(a,i1,i2)

2. Diferencias Jupyter Notebook/Lab y Google Colab

En Jupyter Notebook puedes instalar cualquier versión de IPython. Acá probamos la versión 7.7; en Google Colab está instalado IPython 5.5.5, por lo que no funcionará todo.

 3 Imágenes

3.1 Image

Image(data=None,
      url=None,
      filename=None,
      format=None,
      embed=None,
      width=None,
      height=None,
      retina=False,
      unconfined=False,
      metadata=None)

Métodos o atributos del objeto creado:

  • metadata: Atributo string con la metadata con la que fue creado el objeto.
  • reaload: Método para recargar el contenido del objeto, si fue creado desde url o archivo.
from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.png", width=100)
from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.jpg", width=150)
from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.gif", width=100)
<IPython.core.display.Image object>
from IPython.display import Image
my_url = "https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/images/Python.png"
Image(url=my_url, width=100)
None
from IPython.display import Image
import numpy as np
my_data = ""
a = Image(data=my_data)

Más información

from IPython.display import Image
Image?

2.18 SVG

class IPython.display.SVG(data=None,
                          url=None,
                          filename=None, 
                          metadata=None)

Un objeto SVG creado tiene los siguientes métodos o atributos:

  • data: Entrega los datos del SVG.
  • metadata: String con la metadata proporcionada en la creación.
  • reload: Método para recargar el SVG, si fue creado por url o filename.
from IPython.display import SVG
SVG(filename="2021-05-ipython-display/Python.svg")
image/svg+xml
from IPython.display import SVG
SVG(url="https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/images/Python.svg")
image/svg+xml
from IPython.display import SVG, display
data = '<svg height="109.8461" id="svg2169" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.45.1" sodipodi:docbase="/home/bene/Desktop" sodipodi:docname="dessin-1.svg" sodipodi:version="0.32" version="1.0" width="110.4211" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n  <defs id="defs2171">\n    <linearGradient id="linearGradient11301" inkscape:collect="always">\n      <stop id="stop11303" offset="0" style="stop-color:#ffe052;stop-opacity:1"/>\n      <stop id="stop11305" offset="1" style="stop-color:#ffc331;stop-opacity:1"/>\n    </linearGradient>\n    <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient11307" inkscape:collect="always" x1="89.136749" x2="147.77737" xlink:href="#linearGradient11301" y1="111.92053" y2="168.1012"/>\n    <linearGradient id="linearGradient9515" inkscape:collect="always">\n      <stop id="stop9517" offset="0" style="stop-color:#387eb8;stop-opacity:1"/>\n      <stop id="stop9519" offset="1" style="stop-color:#366994;stop-opacity:1"/>\n    </linearGradient>\n    <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient9521" inkscape:collect="always" x1="55.549179" x2="110.14919" xlink:href="#linearGradient9515" y1="77.070274" y2="131.85291"/>\n  </defs>\n  <sodipodi:namedview bordercolor="#666666" borderopacity="1.0" height="184.25197px" id="base" inkscape:current-layer="layer1" inkscape:cx="-260.46312" inkscape:cy="316.02744" inkscape:document-units="px" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="624" inkscape:window-width="872" inkscape:window-x="5" inkscape:window-y="48" inkscape:zoom="0.24748737" pagecolor="#ffffff" width="131.10236px"/>\n  <metadata id="metadata2174">\n    <rdf:RDF>\n      <cc:Work rdf:about="">\n        <dc:format>image/svg+xml</dc:format>\n        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>\n      </cc:Work>\n    </rdf:RDF>\n  </metadata>\n  <g id="layer1" inkscape:groupmode="layer" inkscape:label="Calque 1" transform="translate(-473.36088,-251.72485)">\n    <g id="g1894" transform="translate(428.42338,184.2561)">\n      <path d="M 99.75,67.46875 C 71.718268,67.468752 73.46875,79.625 73.46875,79.625 L 73.5,92.21875 L 100.25,92.21875 L 100.25,96 L 62.875,96 C 62.875,96 44.9375,93.965724 44.9375,122.25 C 44.937498,150.53427 60.59375,149.53125 60.59375,149.53125 L 69.9375,149.53125 L 69.9375,136.40625 C 69.9375,136.40625 69.433848,120.75 85.34375,120.75 C 101.25365,120.75 111.875,120.75 111.875,120.75 C 111.875,120.75 126.78125,120.99096 126.78125,106.34375 C 126.78125,91.696544 126.78125,82.125 126.78125,82.125 C 126.78125,82.124998 129.04443,67.46875 99.75,67.46875 z M 85,75.9375 C 87.661429,75.937498 89.8125,78.088571 89.8125,80.75 C 89.812502,83.411429 87.661429,85.5625 85,85.5625 C 82.338571,85.562502 80.1875,83.411429 80.1875,80.75 C 80.187498,78.088571 82.338571,75.9375 85,75.9375 z " id="path8615" style="opacity:1;color:#000000;fill:url(#linearGradient9521);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>\n      <path d="M 100.5461,177.31485 C 128.57784,177.31485 126.82735,165.1586 126.82735,165.1586 L 126.7961,152.56485 L 100.0461,152.56485 L 100.0461,148.7836 L 137.4211,148.7836 C 137.4211,148.7836 155.3586,150.81787 155.3586,122.53359 C 155.35861,94.249323 139.70235,95.252343 139.70235,95.252343 L 130.3586,95.252343 L 130.3586,108.37734 C 130.3586,108.37734 130.86226,124.03359 114.95235,124.03359 C 99.042448,124.03359 88.421098,124.03359 88.421098,124.03359 C 88.421098,124.03359 73.514848,123.79263 73.514848,138.43985 C 73.514848,153.08705 73.514848,162.6586 73.514848,162.6586 C 73.514848,162.6586 71.251668,177.31485 100.5461,177.31485 z M 115.2961,168.8461 C 112.63467,168.8461 110.4836,166.69503 110.4836,164.0336 C 110.4836,161.37217 112.63467,159.2211 115.2961,159.2211 C 117.95753,159.2211 120.1086,161.37217 120.1086,164.0336 C 120.10861,166.69503 117.95753,168.8461 115.2961,168.8461 z " id="path8620" style="opacity:1;color:#000000;fill:url(#linearGradient11307);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>\n    </g>\n  </g>\n</svg>'    
my_svg = SVG(data=data, metadata = "SVG creado por datos")
display(my_svg)
print(my_svg.metadata)
image/svg+xml
SVG creado por datos

Más información:

from IPython.display import SVG
SVG?

4 Video

4.1 Video

Video(data=None,
    url=None,
    filename=None,
    embed=False,
    mimetype=None,
    width=None,
    height=None,
    html_attributes='controls')
from IPython.display import Video
Video("2021-05-ipython-display/Python.webm",
      width=600,
      height=400)
from IPython.display import Video
Video("https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b4/Ball_python_%28Python_regius%29_in_a_zoo.webm/Ball_python_%28Python_regius%29_in_a_zoo.webm.1080p.vp9.webm",
      width=600,
      height=400)
from IPython.display import Video
Video('2021-05-ipython-display/Python.webm', embed=True, html_attributes="no-controls muted autoplay", width=600, height=400)