"These widgets are used to represent string-y data. There are four of them. Let's create one of each:"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"htm <- mkHTMLWidget\n",
"latex <- mkLatexWidget\n",
"text <- mkTextWidget\n",
"area <- mkTextArea"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Widgets can be displayed explicitly using `display` from `IHaskell.Display`. Multiple displays of the same widget result in the same view being displayed multiple times. These views always stay synchronized as they are represent the same object."
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import IHaskell.Display (display)"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"display htm\n",
"display latex\n",
"display text\n",
"display area"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `String` widgets have a `StringValue` property which represents their string content. We can modify it to display text using these widgets."
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField htm SStringValue \"<b>Bold</b>\""
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField latex SStringValue \"$x + y$\"\n",
"-- The default width is somewhat small\n",
"setField latex SWidth 400"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To add some space around the widgets, we can use the `Padding` field."
]
},
{
"cell_type": "code",
"execution_count": 15,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField htm SPadding 10\n",
"setField latex SPadding 10\n",
"setField text SPadding 10\n",
"setField area SPadding 10"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `TextWidget` and `TextArea` also have a `Placeholder` property, which represents the text displayed in empty widgets."
]
},
{
"cell_type": "code",
"execution_count": 16,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField text SPlaceholder \"Enter your text here...\"\n",
"setField area SPlaceholder \"Parsed output will appear here...\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"`TextWidget` and `TextArea` also accept input. The `StringValue` of the widget is automatically updated on every change to the widget. Additionally, the `TextWidget` also has a `SubmitHandler` which is triggered on hitting the return/enter key."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The example below sets up the `TextWidget` and `TextArea` for parsing numbers using parsec. The `TextWidget` is used to recieve input, and the `TextArea` is used to display output."
]
},
{
"cell_type": "code",
"execution_count": 17,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import Text.Parsec\n",
"import Text.Parsec.String\n",
"import Data.Text (pack, unpack)\n",
"import Control.Applicative ((<$>))\n",
"\n",
"------------------------- THE PARSER ---------------------------\n",
"\n",
"-- Parse a single digit\n",
"digit :: Parser Char\n",
"digit = oneOf ['0'..'9']\n",
"\n",
"-- Parse a multi-digit number.\n",
"number :: Parser Integer\n",
"number = do\n",
" digits <- many1 digit -- At least one digit\n",
" return (read digits) -- Convert [Char] to Integer\n",
" \n",
"-- Parse a country code, starting with a +.\n",
"countryCode :: Parser Integer\n",
"countryCode = do\n",
" char '+'\n",
" number\n",
" \n",
"-- Parse an area code, optionally with parentheses.\n",
" input <- unpack <$> getField text SStringValue\n",
" str <- case parse phoneNumber \"<text widget>\" input of\n",
" Left error -> return (show error)\n",
" Right x -> return (show x)\n",
" setField area SStringValue (pack str)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## More widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"There are a lot of widgets. To prevent repeating the same thing again and again, some short examples involving rest of the other widgets are shown below."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The `Bool` Widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `CheckBox` and `ToggleButton`"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"These widgets can be used to represent a Boolean value."
]
},
{
"cell_type": "code",
"execution_count": 18,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"-- Using toggle buttons to represent a 8-bit binary number.\n",
"import Control.Monad (replicateM, forM_)\n",
"import Data.IORef\n",
"import Data.Text (pack, unpack)\n",
"import IHaskell.Display (plain)\n",
"\n",
"val <- newIORef 0\n",
"\n",
"sgn <- mkCheckBox -- Create a check box\n",
"tgs <- replicateM 8 mkToggleButton -- Create a toggle button\n",
"let tbuttons = zip tgs $ iterate (*2) 1\n",
"\n",
"-- Output widget to display output\n",
"o <- mkOutputWidget\n",
"\n",
"setField sgn SDescription \"Negative\"\n",
"setField sgn SChangeHandler $ do\n",
" modifyIORef val negate\n",
" readIORef val >>= replaceOutput o . plain . show\n",
"\n",
"setField o SWidth 200\n",
"\n",
"forM_ tbuttons $ \\(t, n) -> do\n",
" setField t SDescription \"0\"\n",
" setField t SChangeHandler $ do\n",
" f <- getField t SBoolValue\n",
" setField t SDescription (if f then \"1\" else \"0\")\n",
" modifyIORef val (if f then (+n) else (\\x->x-n))\n",
" readIORef val >>= replaceOutput o . plain . show\n",
"\n",
"sgn -- Display the check box\n",
"mapM_ display tgs -- Display the toggle buttons\n",
"o -- Display the output widget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The `Output` Widget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The output widget can be used to display rich output. `IHaskell.Display` provides functions to create such rich displays from raw data."
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<style>/*\n",
"Custom IHaskell CSS.\n",
"*/\n",
"\n",
"/* 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",
"\n",
"/* Styles used for basic displays */\n",
".get-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" display: block;\n",
" white-space: pre-wrap;\n",
"}\n",
"\n",
".show-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" margin-left: 1em;\n",
"}\n",
"\n",
".mono {\n",
" font-family: monospace;\n",
" display: block;\n",
"}\n",
"\n",
".err-msg {\n",
" color: red;\n",
" font-style: italic;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
" display: block;\n",
"}\n",
"\n",
"#unshowable {\n",
" color: red;\n",
" font-weight: bold;\n",
"}\n",
"\n",
".err-msg.in.collapse {\n",
" padding-top: 0.7em;\n",
"}\n",
"\n",
"/* Code that will get highlighted before it is highlighted */\n",
"The `Output` widget is meant to be used through the functions:\n",
"\n",
"+ `appendOutput`: Append more output to the widget.\n",
"+ `clearOutput`: Clear the output widget ASAP.\n",
"+ `clearOutput_`: Clear the output widget on next use of `appendOutput`.\n",
"+ `replaceOutput`: Clear then append."
]
},
{
"cell_type": "code",
"execution_count": 20,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"o <- mkOutputWidget -- Make output widget\n",
"setField o SWidth 500\n",
"o -- Display output widget\n",
"appendOutput o $ IHaskell.Display.html \"<font color=\\\"WHITE\\\"><marquee direction=\\\"left\\\" style=\\\"background:RED\\\">The <b>OUTPUT</b> Widget</marquee></font>\"\n",
"appendOutput o $ IHaskell.Display.html \"<font color=\\\"WHITE\\\"><marquee direction=\\\"left\\\" style=\\\"background:BLUE\\\">Is really <b>SIMPLE</b></marquee></font>\"\n",
"appendOutput o $ IHaskell.Display.html \"<font color=\\\"WHITE\\\"><marquee direction=\\\"left\\\" style=\\\"background:GREEN\\\">Use it as an <b>UPDATABLE</b> display</b></marquee></font>\""
]
},
{
"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": 21,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<style>/*\n",
"Custom IHaskell CSS.\n",
"*/\n",
"\n",
"/* 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",
"\n",
"/* Styles used for basic displays */\n",
".get-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" display: block;\n",
" white-space: pre-wrap;\n",
"}\n",
"\n",
".show-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" margin-left: 1em;\n",
"}\n",
"\n",
".mono {\n",
" font-family: monospace;\n",
" display: block;\n",
"}\n",
"\n",
".err-msg {\n",
" color: red;\n",
" font-style: italic;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
" display: block;\n",
"}\n",
"\n",
"#unshowable {\n",
" color: red;\n",
" font-weight: bold;\n",
"}\n",
"\n",
".err-msg.in.collapse {\n",
" padding-top: 0.7em;\n",
"}\n",
"\n",
"/* Code that will get highlighted before it is highlighted */\n",
"These widgets can be used to select one from many. The `SelectMultiple` widget allows multiple selections, whereas `Dropdown`, `RadioButtons`, `ToggleButtons`, and `Select` only allow one selection."
]
},
{
"cell_type": "code",
"execution_count": 23,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"-- Allows single selection\n",
"tgbs <- mkToggleButtons\n",
"\n",
"-- Allows multiple selections\n",
"msel <- mkSelectMultiple"
]
},
{
"cell_type": "code",
"execution_count": 24,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField msel SDescription \"Functions to show (One or more)\"\n",
"The `Dropdown`, `RadioButtons` and `Select` widgets behave just like the `ToggleButtons` widget. They have the same properties, and the same functionality."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The Numeric Widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**NOTE**: The following examples use widgets with `Int` in their names. There are also analogous widgets with `Float` in their names.\n",
"\n",
"As the widgets are the same operationally, only the `Int` widgets are shown."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `IntText` and `BoundedIntText`"
]
},
{
"cell_type": "code",
"execution_count": 27,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"int <- mkIntText\n",
"bit <- mkBoundedIntText"
]
},
{
"cell_type": "code",
"execution_count": 28,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"int\n",
"bit"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Both the widgets are similar, but the second one possesses some additional properties."
]
},
{
"cell_type": "code",
"execution_count": 29,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField bit SMaxInt 20\n",
"setField bit SMinInt 10\n",
"setField bit SChangeHandler (getField bit SIntValue >>= print)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now, the first widget will accept arbitrary input whereas the second one wil accept input the the 10-20 range. For example, try entering large values and hitting return/enter in the second widget."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `IntSlider` and `IntRangeSlider`"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Both these widgets are sliders (duh!). `IntSlider` represents a single value, whereas `IntRangeSlider` represents a pair (range) of values."
]
},
{
"cell_type": "code",
"execution_count": 30,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"ins <- mkIntSlider\n",
"irs <- mkIntRangeSlider"
]
},
{
"cell_type": "code",
"execution_count": 31,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"ins\n",
"irs"
]
},
{
"cell_type": "code",
"execution_count": 32,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": [
"(25,75)"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"getField irs SIntPairValue"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `IntProgress`"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This widget is meant to be used as a progress bar."
