{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "1542b19e",
   "metadata": {},
   "source": [
    "# Composite components short demos\n",
    "\n",
    "This notebook provides simple example usages for composite H5Gizmo components,\n",
    "\n",
    "Please see the \n",
    "<a href=\"https://github.com/AaronWatters/H5Gizmos/blob/main/doc/Components/Composite.md\">\n",
    "H5Gizmos composite components documentation</a>\n",
    "for discussions of theses examples."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "db0908fe",
   "metadata": {},
   "outputs": [],
   "source": [
    "from H5Gizmos import ClickableText, Label\n",
    "\n",
    "def play(*ignored):\n",
    "    L.add(\"I'm afraid I can't do that, Dave.\")\n",
    "    \n",
    "T = ClickableText(\"global thermonuclear war.\", on_click=play)\n",
    "L = Label(\"Click to play: \", T)\n",
    "await L.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "be9c25bf",
   "metadata": {},
   "outputs": [],
   "source": [
    "from H5Gizmos import RadioButtons, Button, Stack, Html\n",
    "\n",
    "title = Html(\"<h4>Entertainment</h4>\")\n",
    "genre = RadioButtons(\"scifi action romance\".split())\n",
    "duration = RadioButtons(\"half hour series\".split())\n",
    "language = RadioButtons(\"Spanish French German\".split())\n",
    "show_options = Button(\"Show options\")\n",
    "\n",
    "S = Stack(\n",
    "    children=[\n",
    "        title,\n",
    "        genre, \n",
    "        duration, \n",
    "        language, \n",
    "        show_options]\n",
    ")\n",
    "await S.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2a160b8e",
   "metadata": {},
   "outputs": [],
   "source": [
    "from H5Gizmos import Html, RadioButtons, Button, Shelf\n",
    "\n",
    "title = Html(\"<h4>Entertainment</h4>\")\n",
    "genre = RadioButtons(\"scifi action romance\".split())\n",
    "duration = RadioButtons(\"half hour series\".split())\n",
    "language = RadioButtons(\"Spanish French German\".split())\n",
    "show_options = Button(\"Show options\")\n",
    "\n",
    "S = Shelf(\n",
    "    children=[\n",
    "        title,\n",
    "        genre, \n",
    "        duration, \n",
    "        language, \n",
    "        show_options]\n",
    ")\n",
    "await S.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d33adb34",
   "metadata": {},
   "outputs": [],
   "source": [
    "from H5Gizmos import RangeSlider, Text, Shelf\n",
    "\n",
    "low_text = Text(\"low\")\n",
    "low_text.resize(width=150).css({\"text-align\": \"center\"})\n",
    "hi_text = Text(\"high\")\n",
    "hi_text.resize(width=150).css({\"text-align\": \"center\"})\n",
    "\n",
    "def r_slide_callback(*ignored):\n",
    "    low = RS.low_value\n",
    "    high = RS.high_value\n",
    "    low_text.text(\" %s <= %s \" % (m, low))\n",
    "    hi_text.text(\" %s <= %s \" % (high, M))\n",
    "\n",
    "m = -50\n",
    "M = 100\n",
    "d = 30\n",
    "RS = RangeSlider(\n",
    "    minimum=m,\n",
    "    maximum=M,\n",
    "    low_value=m+d,\n",
    "    high_value=M-d,\n",
    "    step=1,\n",
    "    orientation=\"horizontal\", # or \"vertical\"\n",
    "    on_change=r_slide_callback,\n",
    ")\n",
    "RS.resize(width=300)\n",
    "\n",
    "S = Shelf(\n",
    "    children=[low_text, RS, hi_text]\n",
    ")\n",
    "\n",
    "await S.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "77993f85",
   "metadata": {},
   "outputs": [],
   "source": [
    "from H5Gizmos import RadioButtons, Button, Template\n",
    "\n",
    "genre = RadioButtons(\"scifi action romance\".split())\n",
    "duration = RadioButtons(\"half hour series\".split())\n",
    "language = RadioButtons(\"Spanish French German Greek\".split())\n",
    "show_options = Button(\"Show options\")\n",
    "\n",
    "T = (Template(\"\"\"\n",
    "<table>\n",
    "<tr> <th colspan=\"2\">Entertainment Choices</th> </tr>\n",
    "<tr>\n",
    "    <th> Genre </th>\n",
    "    <td> <div class=\"GENRE\"/> </td>\n",
    "</tr>\n",
    "<tr>\n",
    "    <th> Length </th>\n",
    "    <td> <div class=\"DURATION\"/> </td>\n",
    "</tr>\n",
    "<tr>\n",
    "    <th> Language </th>\n",
    "    <td> <div class=\"LANGUAGE\"/> </td>\n",
    "</tr>\n",
    "<tr> <th colspan=\"2\"> <div class=\"SHOW_OPTIONS\"/> </th> </tr>\n",
    "</table>\n",
    "\"\"\").put(genre, \"GENRE\")\n",
    "    .put(duration, \"DURATION\")\n",
    "    .put(language, \"LANGUAGE\")\n",
    "    .put(show_options, \"SHOW_OPTIONS\")\n",
    "    )\n",
    "\n",
    "await T.show()\n",
    "\n",
    "def show(*ignored):\n",
    "    T.add(\"I'm afraid I can't do that, Dave.\")\n",
    "    \n",
    "show_options.set_on_click(show)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7540c59e",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Implicit shelf in stack\n",
    "from H5Gizmos import Html, RadioButtons, Button, Stack\n",
    "\n",
    "genre = RadioButtons(\"scifi action romance\".split())\n",
    "duration = RadioButtons(\"half hour series\".split())\n",
    "language = RadioButtons(\"Spanish French German\".split())\n",
    "show_options = Button(\"Show options\")\n",
    "\n",
    "S = Stack(\n",
    "    children=[\n",
    "        \"<h4>Entertainment</h4>\", \n",
    "        [genre, duration, language], \n",
    "        show_options]\n",
    ")\n",
    "await S.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7bb2609c",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}