IHaskell/ihaskell-display/ihaskell-widgets/Examples/Media Widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `Media` Widgets\n",
    "\n",
    "The media widgets allow you to display images, video and audio.\n",
    "\n",
    "All the media widgets have a `BSValue`. It's a ByteStream value with the data to display."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "{-# LANGUAGE OverloadedStrings #-}\n",
    "import IHaskell.Display.Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The `Image` Widget\n",
    "\n",
    "This widget can be used to display images. It has the field `ImageFormat`, with which we can set the format of the image.\n",
    "\n",
    "Now we're going to download some image from the internet and display it\n",
    "\n",
    "If we set `ImageFormat` to `IURL` and `BSValue` to the utf8-encoded URL, the online image will be displayed automatically."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "First, let's create a function to download data. You'll need to install `http-conduit`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import Data.Functor ((<&>))\n",
    "import Network.HTTP.Simple\n",
    "\n",
    "get url = httpBS url <&> getResponseBody"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, let's display a XKCD comic (of course). It's a PNG so we set the image format to PNG."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0658c23f-7cba-4ab9-b6d6-93fad5648695",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "png <- get \"https://imgs.xkcd.com/comics/functional.png\"\n",
    "img <- mkImage\n",
    "setField @ImageFormat img PNG\n",
    "setField @BSValue img $ JSONByteString png\n",
    "img"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's display another image, but this time setting `ImageFormat` to `IURL`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6397a504-b72e-48b4-8fdc-7acec20c18cc",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "imgurl <- mkImage\n",
    "setField @ImageFormat imgurl IURL\n",
    "setField @BSValue imgurl \"https://imgs.xkcd.com/comics/haskell.png\"\n",
    "imgurl"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The `Video` widget\n",
    "\n",
    "With this widget, we can display video. We are going to display an mp4 file with the first 60 seconds of Big Buck Bunny."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "bdc1ff8b-8a8d-4050-bd1e-fbcf05a874d0",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "video <- mkVideo\n",
    "mp4 <- get \"https://download.samplelib.com/mp4/sample-5s.mp4\"\n",
    "setField @BSValue video $ JSONByteString mp4\n",
    "video"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This widget has some more attributes, they are:\n",
    "+ `AutoPlay`: Whether to start playing when the video is displayed\n",
    "+ `Loop`: Whether to start again the video when it finishes\n",
    "+ `Controls`: Whether to display the control overlay on the video\n",
    "\n",
    "If we wanted to display it directly given the URL, we would need to set the format to `VURL`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @Controls video False\n",
    "setField @Loop video False"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The `Audio` Widget\n",
    "Let's do the same, but now with an audio file. It has the same 3 attributes of the video, so we can disable looping and autoplay."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e5aeffaa-f2d7-4abe-914e-e7f67403b01b",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "audio <- mkAudio\n",
    "setField @BSValue audio \"https://download.samplelib.com/mp3/sample-12s.mp3\"\n",
    "setField @AudioFormat audio AURL\n",
    "setField @Loop audio False\n",
    "setField @AutoPlay audio False\n",
    "audio"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Haskell",
   "language": "haskell",
   "name": "haskell"
  },
  "language_info": {
   "codemirror_mode": "ihaskell",
   "file_extension": ".hs",
   "mimetype": "text/x-haskell",
   "name": "haskell",
   "pygments_lexer": "Haskell",
   "version": "9.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}