{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "kl_ipython_html_js_minta_01.ipynb",
      "provenance": [],
      "collapsed_sections": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/klajosw/python/blob/master/kl_ipython_html_js_minta_01.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "nO6NWQoxJ-YM",
        "colab_type": "text"
      },
      "source": [
        "# HTML kezelés \n",
        "\n",
        "## Egyszerű fejléc formázású kiírás"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "jQ8vYuArM7ML",
        "colab_type": "code",
        "outputId": "e0b728bf-1166-4ca0-94b1-2c2cb84e952a",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 65
        }
      },
      "source": [
        "from IPython.display import HTML, SVG\n",
        "from IPython.core.magic import register_cell_magic\n",
        "\n",
        "HTML('''\n",
        "<h2>Hello</h2>\n",
        "''')\n",
        "\n"
      ],
      "execution_count": 3,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<h2>Hello</h2>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 3
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Xun0EKisNnWb",
        "colab_type": "text"
      },
      "source": [
        "## HTM oldal JS kiírási minta"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "jhMHjAMONpze",
        "colab_type": "code",
        "outputId": "7a96e5dc-c34a-4a3f-d524-68cfe5c3a912",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 34
        }
      },
      "source": [
        "def js(src):\n",
        "  return HTML(f\"\"\"\n",
        "<div class='chart'></div>\n",
        "<!-- script src=\"https://d3js.org/d3.v5.min.js\"></script -->\n",
        "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.js\"></script>\n",
        "<script>\n",
        "{src}\n",
        "</script>\n",
        "\"\"\")\n",
        "\n",
        "js('''\n",
        "document.querySelector('.chart').innerHTML = 'Bye';\n",
        "''')"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<div class='chart'></div>\n",
              "<!-- script src=\"https://d3js.org/d3.v5.min.js\"></script -->\n",
              "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.js\"></script>\n",
              "<script>\n",
              "\n",
              "document.querySelector('.chart').innerHTML = 'Bye';\n",
              "\n",
              "</script>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 5
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "xXMtjnfHKuoO",
        "colab_type": "text"
      },
      "source": [
        "## HTM oldalban JS animáció használata"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "kTY5neZjN32P",
        "colab_type": "code",
        "outputId": "d09f9bff-0508-418c-c86a-fdc098b218f8",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 105
        }
      },
      "source": [
        "HTML(\"\"\"\n",
        "<style>\n",
        "article div {\n",
        "  width: 2rem;\n",
        "  height: 2rem;\n",
        "  margin: .5rem;\n",
        "}\n",
        ".green {\n",
        "  background-color: green;\n",
        "}\n",
        ".blue {\n",
        "  background-color: blue;\n",
        "}\n",
        "</style>\n",
        "\n",
        "<section>\n",
        "  <article>\n",
        "    <div class=\"blue\"></div>\n",
        "    <div class=\"green\"></div>\n",
        "  </article>\n",
        "</section>\n",
        "\n",
        "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js\"></script>\n",
        "<script>\n",
        "\n",
        "  var myAnimation = anime({\n",
        "    targets: ['.blue', '.green'],\n",
        "    translateX: '13rem',\n",
        "    rotate: 180,\n",
        "    borderRadius: '8px',\n",
        "    duration: 5000,\n",
        "    loop: false\n",
        "  });\n",
        "\n",
        "</script>\n",
        "\"\"\")   # ez egy HTM +js minta"
      ],
      "execution_count": 6,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "article div {\n",
              "  width: 2rem;\n",
              "  height: 2rem;\n",
              "  margin: .5rem;\n",
              "}\n",
              ".green {\n",
              "  background-color: green;\n",
              "}\n",
              ".blue {\n",
              "  background-color: blue;\n",
              "}\n",
              "</style>\n",
              "\n",
              "<section>\n",
              "  <article>\n",
              "    <div class=\"blue\"></div>\n",
              "    <div class=\"green\"></div>\n",
              "  </article>\n",
              "</section>\n",
              "\n",
              "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js\"></script>\n",
              "<script>\n",
              "\n",
              "  var myAnimation = anime({\n",
              "    targets: ['.blue', '.green'],\n",
              "    translateX: '13rem',\n",
              "    rotate: 180,\n",
              "    borderRadius: '8px',\n",
              "    duration: 5000,\n",
              "    loop: false\n",
              "  });\n",
              "\n",
              "</script>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 6
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "swg3XIHQN_oh",
        "colab_type": "text"
      },
      "source": [
        "## HTM oldalban JS rajzolás minta"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "ZF-nM2cbOR2l",
        "colab_type": "code",
        "outputId": "cc87d688-0b99-4fa7-8da5-88c7176f864a",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 121
        }
      },
      "source": [
        "HTML('''\n",
        "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\"></script>\n",
        "<script>\n",
        "new p5();\n",
        "\n",
        "ellipse(50, 50, 80, 80);\n",
        "\n",
        "</script>\n",
        "''')"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\"></script>\n",
              "<script>\n",
              "new p5();\n",
              "\n",
              "ellipse(50, 50, 80, 80);\n",
              "\n",
              "</script>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 7
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "OEDjP_afOXTx",
        "colab_type": "text"
      },
      "source": [
        "## HTML lapon JS kör és négyszög rajzolás minta"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "NzSESbbbOh9U",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "# kör rajzolás\n",
        "@register_cell_magic\n",
        "def ps(line, src):\n",
        "  return HTML(f\"\"\"\n",
        "  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\"></script>\n",
        "  <script>\n",
        "  new p5();\n",
        "  {src.replace(\" #\", \" //\")}  // allow python-style comment\n",
        "  </script>\n",
        "  \"\"\")\n",
        "\n"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "udRMdJ82PLEq",
        "colab_type": "code",
        "outputId": "64f931e9-322d-412d-c0c1-f9474b9d15e2",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 221
        }
      },
      "source": [
        "%%ps\n",
        "createCanvas(200, 200)\n",
        "ellipse(50, 50, 80, 80)  # circle\n",
        "rect(50, 50, 80, 80)\n",
        "line(50, 50, 80, 80)"
      ],
      "execution_count": 5,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\"></script>\n",
              "  <script>\n",
              "  new p5();\n",
              "  createCanvas(200, 200)\n",
              "ellipse(50, 50, 80, 80)  // circle\n",
              "rect(50, 50, 80, 80)\n",
              "line(50, 50, 80, 80)  // allow python-style comment\n",
              "  </script>\n",
              "  "
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 5
        }
      ]
    }
  ]
}