{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "f6315c1a",
   "metadata": {},
   "source": [
    "# Hello world example\n",
    "\n",
    "In this example we demonstrate the very basics of the ``RemoteFrameBuffer`` class."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "eb328d8f",
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import jupyter_rfb"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "627cd505",
   "metadata": {},
   "source": [
    "We start by implementing ``get_frame()`` to produce an image."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "7691480a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "436052ad76034c2fa0d3c78bd312d5b4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RFBOutputContext()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class='initial-snapshot-4a9b60370e6640df88b19cd3445e094b' style='position:relative;'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAiUlEQVR42u3QQQ0AIBDAsPNvGhTwHpAuU9AZSZIkSZIkSZJ0X+vBYcGClQ8LFqx8WLBg5cOCBSsfFixY+bBgwcqHBQtWPixYsPJhwYKVDwsWrHxYsGDlw4IFKx8WLFj5sGDByocFC1Y+LFiw8mHBgpUPCxasfFiwYOXDgvUZliRJkiRJkiRJOrUBoCYCw1tyqXoAAAAASUVORK5CYII=' style='width:500.0px;height:300.0px;' /><div style='position: absolute; top:0; left:0; padding:1px 3px; background: #777; color:#fff; font-size: 90%; font-family:sans-serif; '>initial snapshot</div></div>"
      ],
      "text/plain": [
       "<jupyter_rfb._utils.Snapshot at 0x1a47b542c10>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4a9b60370e6640df88b19cd3445e094b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HelloWorld1()"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "class HelloWorld1(jupyter_rfb.RemoteFrameBuffer):\n",
    "   \n",
    "    def get_frame(self):\n",
    "        a = np.zeros((100, 100, 3), np.uint8)\n",
    "        a[20:-20,20:-20,1] = 255\n",
    "        return a\n",
    "\n",
    "w = HelloWorld1()\n",
    "w"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "91b9bcd3",
   "metadata": {},
   "source": [
    "Let's make it a bit more advanced. By keeping track of the widget size, we can provide an array with matching shape. We also take pixel_ratio into account, in case this is a hidpi display, or when the user has used the browser's zoom."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "45578bd6",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1de6133f95554828933f4d0af365349c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RFBOutputContext()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class='initial-snapshot-60a3f946aa4c4567afe46657e09eb3aa' style='position:relative;'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEsCAIAAAC62dafAAAEAklEQVR42u3UAQkAMAzAsPk3/asYjJISDZ2RJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSpKs9ANaYO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQuQMEmTtAkLkDBJk7QJC5AwSZO0CQJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJB3tA6QZeBChUzb6AAAAAElFTkSuQmCC' style='width:500.0px;height:300.0px;' /><div style='position: absolute; top:0; left:0; padding:1px 3px; background: #777; color:#fff; font-size: 90%; font-family:sans-serif; '>initial snapshot</div></div>"
      ],
      "text/plain": [
       "<jupyter_rfb._utils.Snapshot at 0x1a47b569c10>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "60a3f946aa4c4567afe46657e09eb3aa",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HelloWorld2()"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "class HelloWorld2(jupyter_rfb.RemoteFrameBuffer):\n",
    "    \n",
    "    def handle_event(self, event):\n",
    "        if event[\"event_type\"] == \"resize\":\n",
    "            self._size = event\n",
    "            # self.print(event)  # uncomment to display the event\n",
    "        \n",
    "    def get_frame(self):\n",
    "        w, h, r = self._size[\"width\"], self._size[\"height\"], self._size[\"pixel_ratio\"]\n",
    "        physical_size = int(h*r), int(w*r)\n",
    "        a = np.zeros((physical_size[0], physical_size[1], 3), np.uint8)\n",
    "        margin = int(20 * r)\n",
    "        a[margin:-margin,margin:-margin,1] = 255\n",
    "        return a\n",
    "\n",
    "w = HelloWorld2()\n",
    "w"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a9cfd8f7",
   "metadata": {},
   "source": [
    "If this is a live session, try resizing the widget to see how it adjusts."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "00c53e7e",
   "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.9.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}