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

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "c6eaf03d-cf32-448f-949f-1dcafeed8e56",
   "metadata": {},
   "outputs": [],
   "source": [
    "{-# LANGUAGE OverloadedStrings #-}\n",
    "import Data.Text\n",
    "import Text.Printf\n",
    "import IHaskell.Display.Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "alert-arrangement",
   "metadata": {},
   "source": [
    "# The Picker widgets\n",
    "\n",
    "Here we have two widgets that allow you input of special inputs, like dates or colors. They are the `ColorPicker` and `DatePicker`. These widgets work on almost every modern web browser.\n",
    "\n",
    "## `ColorPicker`\n",
    "\n",
    "Is a widget that displays a color wheel and allows you to select a color, you can pick it with your mouse or write its HTML name/code it in its text box.\n",
    "\n",
    "We can see and set what color is selected using the field `StringValue`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "8546ec77-be19-44f3-987e-91eafd890a5a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2287681c-6e9e-4585-97c4-823903305f90",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "-- Creating a color widget\n",
    "colorPicker <- mkColorPicker\n",
    "setField @StringValue colorPicker \"#fabada\"\n",
    "colorPicker"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "handled-barcelona",
   "metadata": {},
   "source": [
    "We can display a condensed color picker, without the text box, setting `Concise` to `True`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "phantom-cricket",
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @Concise colorPicker True"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "technical-forward",
   "metadata": {},
   "source": [
    "Let's make a button that changes color to a color chosen by the user!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "continent-given",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2287681c-6e9e-4585-97c4-823903305f90",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a2fc28ac-9bab-4fcd-9c1d-28324848ee24",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "-- Creating the button and style\n",
    "b <- mkButton\n",
    "stl <- mkButtonStyle\n",
    "setField @Style b $ StyleWidget stl\n",
    "\n",
    "-- Creating the handler\n",
    "colorHandler :: IO ()\n",
    "colorHandler = getField @StringValue colorPicker >>= setField @ButtonColor stl . Just . unpack\n",
    "-- calling the handler to initialize the button\n",
    "colorHandler\n",
    "\n",
    "-- Setting color picker attributes\n",
    "setField @Concise colorPicker False\n",
    "setField @ChangeHandler colorPicker colorHandler\n",
    "\n",
    "-- Displaying the widgets\n",
    "colorPicker\n",
    "b"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "63bd4861-8db4-4782-a74f-dfc67183ae02",
   "metadata": {},
   "source": [
    "### The `DatePicker` widget\n",
    "\n",
    "The Date Picker displays a calendar and allows you to display a date. It uses the data type `Date`. The first number is the year, then the month, then the day."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "fe024e0b-7b08-4fc9-ba22-1e706d31b4b8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cf98b4a3-8547-4006-b224-fe6df0f079b7",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "datePicker <- mkDatePicker\n",
    "datePicker"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "caroline-aberdeen",
   "metadata": {},
   "source": [
    "We can get the selected date getting the `DateValue` field. And we can extract the year, month and day using pattern matching. Be careful, as the date can also be `NullDate`, the following cell could fail if you didn't select a date value."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "purple-specification",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Today's date is 16/10/2024"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "(Date y m d) <- getField @DateValue datePicker\n",
    "printf \"Today's date is %d/%d/%d\" d m y"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "flexible-democracy",
   "metadata": {},
   "source": [
    "If we set the Date to `NullDate`, then the widget appears empty"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5789b89d-f0d9-47b8-888f-54d30f4b2a27",
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @DateValue datePicker NullDate"
   ]
  }
 ],
 "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": 5
}