Unverified Commit 65434e97 authored by Vaibhav Sagar's avatar Vaibhav Sagar Committed by GitHub

Merge pull request #1242 from daviddavo/master

Updating IHaskell-widgets
parents b82134f9 5cf83262
......@@ -24,3 +24,7 @@ cabal.sandbox.config
.tmp3
stack.yaml.lock
result
default.nix
dist-*/
cabal.project.local
cabal.config
\ No newline at end of file
# ChangeLog for `ihaskell-widgets`
## `v0.3.0.0`
> Revamped to be compatible with Widget Messaging Protocol, version 2
## `v0.2.2.1`
+ The `properties` function now prints types associated with widget fields.
......
......@@ -24,7 +24,7 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
"tags": []
},
"outputs": [],
"source": [
......@@ -46,7 +46,9 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
......@@ -71,16 +73,29 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
"-- Display the widgets\n",
"setField tgb Description \"Button\"\n",
"chk\n",
"tgb\n",
"vld"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"getField chk BoolValue >>= setField chk BoolValue . not\n",
"getField tgb BoolValue >>= setField tgb BoolValue . not"
]
},
{
"cell_type": "markdown",
"metadata": {},
......@@ -92,7 +107,9 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
......@@ -132,7 +149,9 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
......@@ -153,7 +172,9 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
......@@ -177,7 +198,9 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
......@@ -222,7 +245,9 @@
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
"jupyter": {
"outputs_hidden": false
}
},
"outputs": [],
"source": [
......@@ -263,10 +288,12 @@
"language_info": {
"codemirror_mode": "ihaskell",
"file_extension": ".hs",
"mimetype": "text/x-haskell",
"name": "haskell",
"version": "7.10.2"
"pygments_lexer": "Haskell",
"version": "8.10.4"
}
},
"nbformat": 4,
"nbformat_minor": 0
"nbformat_minor": 4
}
{
"cells": [
{
"cell_type": "markdown",
"id": "6513368f-ebd6-4c00-b69b-7004c3189fc6",
"metadata": {},
"source": [
"## Controller widgets"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "1db1ebee-6896-4a92-9a9c-4d0c0e2fef34",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"{-# LANGUAGE OverloadedStrings #-}\n",
"controller <- mkController\n",
"setField controller Index 0\n",
"controller"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "463d9488-8941-4e4a-aa47-83ba2f879368",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"False"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/plain": [
"\"\""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/plain": [
"0.0"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/plain": [
"\"\""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"getField controller Connected\n",
"getField controller Name\n",
"getField controller Timestamp\n",
"getField controller Mapping\n",
"getField controller Buttons"
]
},
{
"cell_type": "code",
"execution_count": 7,
"id": "a19e8443-2f74-47b6-b17a-d860289bc20b",
"metadata": {},
"outputs": [
{
"ename": "",
"evalue": "",
"header": "MessageHeader {mhIdentifiers = [\"b1a38970-0242-4f9b-be4a-a439b9458ed4\"], mhParentHeader = Just (MessageHeader {mhIdentifiers = [\"b1a38970-0242-4f9b-be4a-a439b9458ed4\"], mhParentHeader = Nothing, mhMetadata = Metadata (fromList [(\"recordTiming\",Bool False),(\"deletedCells\",Array []),(\"cellId\",String \"a19e8443-2f74-47b6-b17a-d860289bc20b\")]), mhMessageId = UUID {uuidToString = \"e9dc7aff-4bd9-4419-91ee-5ec41a25ed5d\"}, mhSessionId = UUID {uuidToString = \"b1a38970-0242-4f9b-be4a-a439b9458ed4\"}, mhUsername = \"\", mhMsgType = ExecuteRequestMessage, mhBuffers = []}), mhMetadata = Metadata (fromList []), mhMessageId = UUID {uuidToString = \"b3701acd-6179-45ab-9eca-9ecacfdb5be8\"}, mhSessionId = UUID {uuidToString = \"b1a38970-0242-4f9b-be4a-a439b9458ed4\"}, mhUsername = \"\", mhMsgType = ExecuteErrorMessage, mhBuffers = []}",
"output_type": "error",
"traceback": [
"The field SName is read only\nCallStack (from HasCallStack):\n error, called at src/IHaskell/Display/Widgets/Types.hs:953:21 in ihaskell-widgets-0.3.0.0-6i4Ez3HICSV5LpRY8SD96:IHaskell.Display.Widgets.Types"
]
}
],
"source": [
"-- Read only\n",
"setField controller Name \"AAAAAAAA\""
]
}
],
"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": "8.10.4"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The `Image` Widget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This widget can be used to display images given in the form of base64 encoded `Text`. The widget has a `B64Value` field, which can be changed to display images to it. It also has an `ImageFormat` field, which is set to `PNG` by default."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"{-# LANGUAGE OverloadedStrings #-}\n",
"import IHaskell.Display.Widgets\n",
"import IHaskell.Display (base64, encode64)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `base64` and `encode64` functions are useful with `ImageWidget`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
":t base64\n",
":t encode64"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The following example downloads an xkcd comic and displays it in an image widget. The example below requires the HTTP package. If you don't have it then you can either install it and restart the ihaskell kernel, or just skip to the next example."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"import Network.HTTP\n",
"import IHaskell.Display (encode64)\n",
"\n",
"get url = simpleHTTP (getRequest url) >>= getResponseBody\n",
"jpg <- get \"http://imgs.xkcd.com/comics/functional.png\"\n",
"\n",
"img <- mkImageWidget\n",
"setField img B64Value (encode64 jpg)\n",
"img"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Replace the call to undefined by the path to an image, and it will be displayed in an image widget."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"imgpath = undefined\n",
"\n",
"import qualified Data.ByteString as B\n",
"import IHaskell.Display (base64)\n",
"\n",
"i <- mkImageWidget\n",
"B.readFile imgpath >>= setField i B64Value . base64\n",
"\n",
"i"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Haskell",
"language": "haskell",
"name": "haskell"
},
"language_info": {
"codemirror_mode": "ihaskell",
"file_extension": ".hs",
"name": "haskell",
"version": "7.10.2"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# The IPython widgets, now in IHaskell !!"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"It is highly recommended that users new to jupyter/ipython take the *User Interface Tour* from the toolbar above (Help -> User Interface Tour)."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"> This notebook introduces the [IPython widgets](https://github.com/ipython/ipywidgets), as implemented in [IHaskell](https://github.com/gibiansky/IHaskell). The `Button` widget is also demonstrated as a live action example."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The Widget Hierarchy\n",
"\n",
"These are all the widgets available from IPython/Jupyter."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Uncategorized Widgets\n",
"\n",
"+ Button\n",
"+ Image*Widget*\n",
"+ Output*Widget*\n",
"\n",
"#### Box Widgets\n",
"\n",
"+ Box\n",
"+ FlexBox\n",
"+ Accordion\n",
"+ Tab*Widget*\n",
"\n",
"#### Boolean Widgets\n",
"\n",
"+ CheckBox\n",
"+ ToggleButton\n",
"\n",
"#### Integer Widgets\n",
"\n",
"+ IntText\n",
"+ BoundedIntText\n",
"+ IntProgress\n",
"+ IntSlider\n",
"+ IntRangeSlider\n",
"\n",
"#### Float Widgets\n",
"\n",
"+ FloatText\n",
"+ BoundedFloatText\n",
"+ FloatProgress\n",
"+ FloatSlider\n",
"+ FloatRangeSlider\n",
"\n",
"#### Selection Widgets\n",
"\n",
"+ Selection\n",
"+ Dropdown\n",
"+ RadioButtons\n",
"+ Select\n",
"+ SelectMultiple\n",
"+ ToggleButtons\n",
"\n",
"#### String Widgets\n",
"\n",
"+ HTML*Widget*\n",
"+ Latex*Widget*\n",
"+ TextArea\n",
"+ Text*Widget*"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Using Widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Necessary Extensions and Imports\n",
"\n",
"All the widgets and related functions are available from a single module, `IHaskell.Display.Widgets`. It is strongly recommended that users use the `OverloadedStrings` extension, as widgets make extensive use of `Text`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"{-# LANGUAGE OverloadedStrings #-}\n",
"import IHaskell.Display.Widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The module can be imported unqualified. Widgets with common names, such as `Text`, `Image` etc. have a `-Widget` suffix to prevent name collisions."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Widget interface\n",
"\n",
"Each widget has different properties, but the surface level API is the same.\n",
"\n",
"Every widget has:\n",
"\n",
"1. A constructor:\n",
" An `IO <widget>` value/function of the form `mk<widget_name>`.\n",
"2. A set of properties, which can be manipulated using `setField` and `getField`.\n",
"\n",
"The `setField` and `getField` functions have nasty type signatures, but they can be used by just intuitively understanding them."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
":t setField"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `setField` function takes three arguments:\n",
"\n",
"1. A widget\n",
"2. A `Field`\n",
"3. A value for the `Field`"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false,
"scrolled": true
},
"outputs": [],
"source": [
":t getField"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `getField` function takes a `Widget` and a `Field` and returns the value of that `Field` for the `Widget`."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Another utility function is `properties`, which shows all properties of a widget."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
":t properties"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Displaying Widgets\n",
"\n",
"IHaskell automatically displays anything *displayable* given to it directly."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"-- Showables\n",
"1 + 2\n",
"\"abc\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Widgets can either be displayed this way, or explicitly using the `display` function from `IHaskell.Display`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"import IHaskell.Display\n",
":t display"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Multiple displays\n",
"\n",
"A widget can be displayed multiple times. All these *views* are representations of a single object, and thus are linked.\n",
"\n",
"When a widget is created, a model representing it is created in the frontend. This model is used by all the views, and any modification to it propagates to all of them."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Closing widgets\n",
"\n",
"Widgets can be closed using the `closeWidget` function."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
":t closeWidget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Our first widget: `Button`"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Let's play with buttons as a starting example:\n",
"\n",
"As noted before, all widgets have a constructor of the form `mk<Widget>`. Thus, to create a `Button`, we use `mkButton`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"button <- mkButton -- Construct a Button\n",
":t button"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Widgets can be displayed by just entering them into a cell."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"button -- Display the button"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To view a widget's properties, we use the `properties` function. It also shows the type represented by the `Field`, which generally are not visible in type signatures due to high levels of type-hackery."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false,
"scrolled": false
},
"outputs": [],
"source": [
"-- The button widget has many properties.\n",
"properties button"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Let's try making the button widget wider."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"-- 250 pixels wide\n",
"setField button Width 250"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"There is a lot that can be customized. For example:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false,
"scrolled": true
},
"outputs": [],
"source": [
"setField button Description \"Click Me (._.\\\")\"\n",
"setField button ButtonStyle SuccessButton\n",
"setField button BorderStyle RidgeBorder\n",
"setField button BorderWidth 20\n",
"setField button BorderRadius 30\n",
"setField button Padding 10\n",
"setField button Height 125\n",
"setField button FontFamily \"cursive\"\n",
"setField button FontSize 30"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The button widget also provides a click handler. We can make it do anything, except console input. Universally, no widget event can trigger console input."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"setField button ClickHandler $ putStrLn \"fO_o\"\n",
"button -- Displaying again for convenience"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now try clicking the button, and see the output. If we try to do console input, an error occurs."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"setField button ClickHandler $ getLine >>= putStrLn"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Haskell",
"language": "haskell",
"name": "haskell"
},
"language_info": {
"codemirror_mode": "ihaskell",
"file_extension": ".hs",
"name": "haskell",
"version": "7.10.2"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
{
"cells": [
{
"cell_type": "markdown",
"id": "089cfc9a-ee04-4a75-b519-e1b1ef4c5ed5",
"metadata": {},
"source": [
"The layout widget is a widget that adheres to any other widget"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "3643e44d-0220-46be-867e-8e7781fb7bbe",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style>/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
"display: block;\n",
"padding-bottom: 1.3em;\n",
"padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
"display: block;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"}\n",
".hoogle-text {\n",
"display: block;\n",
"}\n",
".hoogle-name {\n",
"color: green;\n",
"font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
"display: block;\n",
"margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
"font-weight: bold;\n",
"font-style: italic;\n",
"}\n",
".hoogle-module {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
"font-weight: bold;\n",
"}\n",
".get-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"display: block;\n",
"white-space: pre-wrap;\n",
"}\n",
".show-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"margin-left: 1em;\n",
"}\n",
".mono {\n",
"font-family: monospace;\n",
"display: block;\n",
"}\n",
".err-msg {\n",
"color: red;\n",
"font-style: italic;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"display: block;\n",
"}\n",
"#unshowable {\n",
"color: red;\n",
"font-weight: bold;\n",
"}\n",
".err-msg.in.collapse {\n",
"padding-top: 0.7em;\n",
"}\n",
".highlight-code {\n",
"white-space: pre;\n",
"font-family: monospace;\n",
"}\n",
".suggestion-warning { \n",
"font-weight: bold;\n",
"color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
"font-weight: bold;\n",
"color: red;\n",
"}\n",
".suggestion-name {\n",
"font-weight: bold;\n",
"}\n",
"</style><div class=\"suggestion-name\" style=\"clear:both;\">Unused LANGUAGE pragma</div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Found:</div><div class=\"highlight-code\" id=\"haskell\">{-# LANGUAGE OverloadedStrings #-}</div></div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Why Not:</div><div class=\"highlight-code\" id=\"haskell\"></div></div>"
],
"text/plain": [
"Line 1: Unused LANGUAGE pragma\n",
"Found:\n",
"{-# LANGUAGE OverloadedStrings #-}\n",
"Why not:"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"{-# LANGUAGE OverloadedStrings #-}\n",
"import IHaskell.Display.Widgets\n",
"import IHaskell.Display.Widgets.Layout\n",
"import Data.Text as T"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "d8430ed3-0e24-4057-8230-73c47fa75793",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "e3fec42f-c887-4ecf-922d-b4a3754cee5a",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"button <- mkButton\n",
"setField button Description \"Click me!\"\n",
"button"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "08d9c91c-8065-4a66-b564-b225e316f379",
"metadata": {},
"outputs": [],
"source": [
"layout <- mkLayout\n",
"setField button Layout $ Just layout"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "6357dffb-f70e-475e-a007-41211d495042",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"ModelModule ::: Text\n",
"ModelModuleVersion ::: Text\n",
"ModelName ::: Text\n",
"ViewModule ::: Text\n",
"ViewModuleVersion ::: Text\n",
"ViewName ::: Text\n",
"LAlignContent ::: Maybe [Char]\n",
"LAlignItems ::: Maybe [Char]\n",
"LAlignSelf ::: Maybe [Char]\n",
"LBorder ::: Maybe [Char]\n",
"LBottom ::: Maybe [Char]\n",
"LDisplay ::: Maybe [Char]\n",
"LFlex ::: Maybe [Char]\n",
"LFlexFlow ::: Maybe [Char]\n",
"LGridArea ::: Maybe [Char]\n",
"LGridAutoColumns ::: Maybe [Char]\n",
"LGridAutoFlow ::: Maybe [Char]\n",
"LGridAutoRows ::: Maybe [Char]\n",
"LGridColumn ::: Maybe [Char]\n",
"LGridGap ::: Maybe [Char]\n",
"LGridRow ::: Maybe [Char]\n",
"LGridTemplateAreas ::: Maybe [Char]\n",
"LGridTemplateColumns ::: Maybe [Char]\n",
"LGridTemplateRows ::: Maybe [Char]\n",
"LHeight ::: Maybe [Char]\n",
"LJustifyContent ::: Maybe [Char]\n",
"LJustifyItems ::: Maybe [Char]\n",
"LLeft ::: Maybe [Char]\n",
"LMargin ::: Maybe [Char]\n",
"LMaxHeight ::: Maybe [Char]\n",
"LMaxWidth ::: Maybe [Char]\n",
"LMinHeight ::: Maybe [Char]\n",
"LMinWidth ::: Maybe [Char]\n",
"LOrder ::: Maybe [Char]\n",
"LOverflow ::: Maybe [Char]\n",
"LOverflowX ::: Maybe [Char]\n",
"LOverflowY ::: Maybe [Char]\n",
"LPadding ::: Maybe [Char]\n",
"LRight ::: Maybe [Char]\n",
"LTop ::: Maybe [Char]\n",
"LVisibility ::: Maybe [Char]\n",
"LWidth ::: Maybe [Char]"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"properties layout"
]
},
{
"cell_type": "code",
"execution_count": 6,
"id": "ef00e9aa-3f48-42ff-bb45-9f59b09e78e4",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "e3fec42f-c887-4ecf-922d-b4a3754cee5a",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField layout Border $ Just \"3px solid red\"\n",
"button"
]
},
{
"cell_type": "code",
"execution_count": 9,
"id": "141277e9-4082-4b93-a597-9f34c4bfcf2c",
"metadata": {},
"outputs": [],
"source": [
"setField layout Visibility $ Just \"unset\""
]
}
],
"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": "8.10.4"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"id": "a0d6ef1e-d8cd-40dc-8928-aa984ea6e788",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style>/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
"display: block;\n",
"padding-bottom: 1.3em;\n",
"padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
"display: block;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"}\n",
".hoogle-text {\n",
"display: block;\n",
"}\n",
".hoogle-name {\n",
"color: green;\n",
"font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
"display: block;\n",
"margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
"font-weight: bold;\n",
"font-style: italic;\n",
"}\n",
".hoogle-module {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
"font-weight: bold;\n",
"}\n",
".get-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"display: block;\n",
"white-space: pre-wrap;\n",
"}\n",
".show-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"margin-left: 1em;\n",
"}\n",
".mono {\n",
"font-family: monospace;\n",
"display: block;\n",
"}\n",
".err-msg {\n",
"color: red;\n",
"font-style: italic;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"display: block;\n",
"}\n",
"#unshowable {\n",
"color: red;\n",
"font-weight: bold;\n",
"}\n",
".err-msg.in.collapse {\n",
"padding-top: 0.7em;\n",
"}\n",
".highlight-code {\n",
"white-space: pre;\n",
"font-family: monospace;\n",
"}\n",
".suggestion-warning { \n",
"font-weight: bold;\n",
"color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
"font-weight: bold;\n",
"color: red;\n",
"}\n",
".suggestion-name {\n",
"font-weight: bold;\n",
"}\n",
"</style><div class=\"suggestion-name\" style=\"clear:both;\">Unused LANGUAGE pragma</div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Found:</div><div class=\"highlight-code\" id=\"haskell\">{-# LANGUAGE OverloadedStrings #-}</div></div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Why Not:</div><div class=\"highlight-code\" id=\"haskell\"></div></div>"
],
"text/plain": [
"Line 1: Unused LANGUAGE pragma\n",
"Found:\n",
"{-# LANGUAGE OverloadedStrings #-}\n",
"Why not:"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"{-# LANGUAGE OverloadedStrings #-}\n",
"import IHaskell.Display.Widgets"
]
},
{
"cell_type": "markdown",
"id": "bdf75813-33a0-4b98-a41a-35b3d88bcee9",
"metadata": {},
"source": [
"# The `Link` widgets"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "107c6fc9-c1fd-433d-8719-fa3daea8bc51",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "89dcb9bc-8085-4087-8992-8c440fecee25",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "a31e978c-bc60-4d4c-bf4b-f9a5962d2873",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"is1 <- mkIntSlider\n",
"is2 <- mkIntSlider\n",
"\n",
"is1\n",
"is2"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "a8334d7b-d687-49c7-a191-fa3970690e1a",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"link <- mkLink\n",
"setField link Source (WidgetFieldPair is1 IntValue)\n",
"setField link Target (WidgetFieldPair is2 IntValue)"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "f71e323b-ac72-42e5-8823-b768d6f9cb58",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "e1eebc22-055d-4b52-b020-4fd30dea38fb",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "d3b37a97-0423-4ff1-969d-1e8c76946f18",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"fs1 <- mkFloatSlider\n",
"fs2 <- mkFloatSlider\n",
"\n",
"fs1\n",
"fs2"
]
},
{
"cell_type": "code",
"execution_count": 5,
"id": "c3a64106-3a89-4cfb-9a07-da251ebf9d1a",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"link <- mkDirectionalLink\n",
"setField link Source (WidgetFieldPair fs1 FloatValue)\n",
"setField link Target (WidgetFieldPair fs2 FloatValue)"
]
},
{
"cell_type": "code",
"execution_count": 8,
"id": "91ccf115-57b4-4176-b157-0e79c27f4341",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "f12e8868-2684-4ccc-b6da-60d0a30425d9",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "aecf1170-0f04-4dfa-9dc1-98a751599847",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"chk <- mkCheckBox\n",
"tgb <- mkToggleButton\n",
"\n",
"-- The Link widget cannot be displayed, so we ignore the return value\n",
"_ <- jsdlink (WidgetFieldPair chk BoolValue) (WidgetFieldPair tgb BoolValue)\n",
"\n",
"chk\n",
"tgb"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "ee974e80-4d83-4e3a-9496-e08756fdfd17",
"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": "8.10.4"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## The `Media` Widgets\n",
"All the media widgets have a `BSValue`. It's a ByteStream value with the data to display."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The `Image` Widget\n",
"\n",
"This widget can be used to display images, with `ImageFormat` we can set the format of the image. If we set `ImageFormat` to `IURL` and `BSValue` to the utf8-encoded URL, the online image will be displayed automatically."
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style>/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
"display: block;\n",
"padding-bottom: 1.3em;\n",
"padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
"display: block;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"}\n",
".hoogle-text {\n",
"display: block;\n",
"}\n",
".hoogle-name {\n",
"color: green;\n",
"font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
"display: block;\n",
"margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
"font-weight: bold;\n",
"font-style: italic;\n",
"}\n",
".hoogle-module {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
"font-weight: bold;\n",
"}\n",
".get-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"display: block;\n",
"white-space: pre-wrap;\n",
"}\n",
".show-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"margin-left: 1em;\n",
"}\n",
".mono {\n",
"font-family: monospace;\n",
"display: block;\n",
"}\n",
".err-msg {\n",
"color: red;\n",
"font-style: italic;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"display: block;\n",
"}\n",
"#unshowable {\n",
"color: red;\n",
"font-weight: bold;\n",
"}\n",
".err-msg.in.collapse {\n",
"padding-top: 0.7em;\n",
"}\n",
".highlight-code {\n",
"white-space: pre;\n",
"font-family: monospace;\n",
"}\n",
".suggestion-warning { \n",
"font-weight: bold;\n",
"color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
"font-weight: bold;\n",
"color: red;\n",
"}\n",
".suggestion-name {\n",
"font-weight: bold;\n",
"}\n",
"</style><div class=\"suggestion-name\" style=\"clear:both;\">Unused LANGUAGE pragma</div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Found:</div><div class=\"highlight-code\" id=\"haskell\">{-# LANGUAGE OverloadedStrings #-}</div></div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Why Not:</div><div class=\"highlight-code\" id=\"haskell\"></div></div>"
],
"text/plain": [
"Line 1: Unused LANGUAGE pragma\n",
"Found:\n",
"{-# LANGUAGE OverloadedStrings #-}\n",
"Why not:"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"{-# LANGUAGE OverloadedStrings #-}\n",
"import IHaskell.Display.Widgets"
]
},
{
"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": "b82b6c13-f47c-43cf-a801-8dc2f6abcc24",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"png <- get \"https://imgs.xkcd.com/comics/haskell.png\"\n",
"img <- mkImageWidget\n",
"setField img ImageFormat PNG\n",
"setField img BSValue 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": 7,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "cb2129d6-418d-4c05-873b-34befb693555",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"imgurl <- mkImageWidget\n",
"setField imgurl ImageFormat IURL\n",
"setField imgurl BSValue \"https://imgs.xkcd.com/comics/functional.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": 5,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "b88a1b8c-a022-47fa-b417-27e63640f3f1",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"video <- mkVideoWidget\n",
"mp4 <- get \"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\"\n",
"setField video BSValue 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": 6,
"metadata": {},
"outputs": [],
"source": [
"setField video Controls False\n",
"setField video Loop 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": 12,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "0baa58f4-b663-489d-b18e-af51da067342",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"audio <- mkAudioWidget\n",
"setField audio BSValue \"https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3\"\n",
"setField audio AudioFormat AURL\n",
"setField audio Loop False\n",
"setField audio AutoPlay False\n",
"audio"
]
}
],
"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": "8.10.4"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"id": "c6eaf03d-cf32-448f-949f-1dcafeed8e56",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style>/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
"display: block;\n",
"padding-bottom: 1.3em;\n",
"padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
"display: block;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"}\n",
".hoogle-text {\n",
"display: block;\n",
"}\n",
".hoogle-name {\n",
"color: green;\n",
"font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
"display: block;\n",
"margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
"font-weight: bold;\n",
"font-style: italic;\n",
"}\n",
".hoogle-module {\n",
"font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
"font-weight: bold;\n",
"}\n",
".get-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"display: block;\n",
"white-space: pre-wrap;\n",
"}\n",
".show-type {\n",
"color: green;\n",
"font-weight: bold;\n",
"font-family: monospace;\n",
"margin-left: 1em;\n",
"}\n",
".mono {\n",
"font-family: monospace;\n",
"display: block;\n",
"}\n",
".err-msg {\n",
"color: red;\n",
"font-style: italic;\n",
"font-family: monospace;\n",
"white-space: pre;\n",
"display: block;\n",
"}\n",
"#unshowable {\n",
"color: red;\n",
"font-weight: bold;\n",
"}\n",
".err-msg.in.collapse {\n",
"padding-top: 0.7em;\n",
"}\n",
".highlight-code {\n",
"white-space: pre;\n",
"font-family: monospace;\n",
"}\n",
".suggestion-warning { \n",
"font-weight: bold;\n",
"color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
"font-weight: bold;\n",
"color: red;\n",
"}\n",
".suggestion-name {\n",
"font-weight: bold;\n",
"}\n",
"</style><div class=\"suggestion-name\" style=\"clear:both;\">Unused LANGUAGE pragma</div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Found:</div><div class=\"highlight-code\" id=\"haskell\">{-# LANGUAGE OverloadedStrings #-}</div></div><div class=\"suggestion-row\" style=\"float: left;\"><div class=\"suggestion-warning\">Why Not:</div><div class=\"highlight-code\" id=\"haskell\"></div></div>"
],
"text/plain": [
"Line 1: Unused LANGUAGE pragma\n",
"Found:\n",
"{-# LANGUAGE OverloadedStrings #-}\n",
"Why not:"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"{-# LANGUAGE OverloadedStrings #-}"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "8546ec77-be19-44f3-987e-91eafd890a5a",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "6564fe33-83bb-4230-b5b5-74704c9ec25a",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"colorPicker <- mkColorPicker\n",
"colorPicker"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "19429010-1c60-4001-b69e-1db09f0066c4",
"metadata": {},
"outputs": [],
"source": [
"setField colorPicker StringValue \"aquamarine\""
]
},
{
"cell_type": "markdown",
"id": "63bd4861-8db4-4782-a74f-dfc67183ae02",
"metadata": {},
"source": [
"### The `DatePicker` widget"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "fe024e0b-7b08-4fc9-ba22-1e706d31b4b8",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "2690ca3f-218f-479b-87df-eb1d88c69729",
"version_major": 2,
"version_minor": 0
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"datePicker <- mkDatePicker\n",
"datePicker"
]
},
{
"cell_type": "code",
"execution_count": 11,
"id": "e48d68a2-d49e-45f2-89c4-cc8f8613187c",
"metadata": {},
"outputs": [],
"source": [
"setField datePicker DateValue (Date 1999 15 30)"
]
},
{
"cell_type": "code",
"execution_count": 8,
"id": "5789b89d-f0d9-47b8-888f-54d30f4b2a27",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"1999-04-30"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"getField datePicker DateValue"
]
}
],
"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": "8.10.4"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
This diff is collapsed.
Copyright (c) 2015 Sumit Sahrawat
The MIT License (MIT)
Copyright (c) 2021 David Davó
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment