examples/notebooks/28_voila.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Deploy Earth Engine Apps using Voila and ngrok\n",
    "\n",
    "**Steps to deploy an Earth Engine App:**\n",
    "1. Install ngrok by following the [instruction](https://ngrok.com/download)\n",
    "2. Install voila by following the [instruction](https://voila.readthedocs.io/en/stable/install.html)\n",
    "3. Download the notebook [28_voila.ipynb](https://github.com/giswqs/geemap/blob/master/examples/notebooks/28_voila.ipynb) \n",
    "4. Run this from the command line: `voila --no-browser 28_voila.ipynb`\n",
    "5. Run this from the command line: `ngrok http 8866`\n",
    "6. Copy the link from the ngrok terminal window. The links looks like the following: https://randomstring.ngrok.io\n",
    "7. Share the link with anyone. \n",
    "\n",
    "**Optional steps:**\n",
    "* To show code cells from you app, run this from the command line: `voila --no-browser --strip_sources=False 28_voila.ipynb`\n",
    "* To protect your app with a password, run this: `ngrok http -auth=\"username:password\" 8866`\n",
    "* To run python simple http server in the directory, run this:`sudo python -m http.server 80` "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import ee\n",
    "import geemap\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "Map = geemap.Map()\n",
    "Map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "style = {'description_width': 'initial'}\n",
    "title = widgets.Text(\n",
    "    description='Title:',\n",
    "    value='Landsat Timelapse',\n",
    "    width=200,\n",
    "    style=style\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "bands = widgets.Dropdown(\n",
    "    description='Select RGB Combo:',\n",
    "    options=['Red/Green/Blue', 'NIR/Red/Green',  'SWIR2/SWIR1/NIR', 'NIR/SWIR1/Red','SWIR2/NIR/Red', \n",
    "             'SWIR2/SWIR1/Red', 'SWIR1/NIR/Blue', 'NIR/SWIR1/Blue', 'SWIR2/NIR/Green', 'SWIR1/NIR/Red'],\n",
    "    value='NIR/Red/Green',\n",
    "    style=style\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hbox1 = widgets.HBox([title, bands])\n",
    "hbox1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "start_year = widgets.IntSlider(description='Start Year:', value=1984, min=1984, max=2019, style=style)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "end_year = widgets.IntSlider(description='End Year:', value=2019, min=1984, max=2019, style=style)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hbox2 = widgets.HBox([start_year, end_year])\n",
    "hbox2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "speed = widgets.IntSlider(\n",
    "    description='Frames per second:',\n",
    "    tooltip='Frames per second:',\n",
    "    value=10,\n",
    "    min=1, \n",
    "    max = 30,\n",
    "    style=style\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "upload = widgets.Checkbox(\n",
    "    value=False,\n",
    "    description='Upload to imgur.com',\n",
    "    style=style\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hbox3 = widgets.HBox([speed, upload])\n",
    "hbox3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "font_size = widgets.IntSlider(description='Font size:', value=30, min=10, max=50, style=style)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "font_color = widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Font color:',\n",
    "    value='white',\n",
    "    style=style\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "progress_bar_color = widgets.ColorPicker(\n",
    "    concise=False,\n",
    "    description='Progress bar color:',\n",
    "    value='blue',\n",
    "    style=style\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hbox4 = widgets.HBox([font_size, font_color, progress_bar_color])\n",
    "hbox4"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "submit = widgets.Button(\n",
    "    description='Submit',\n",
    "    button_style='primary',\n",
    "    tooltip='Click the submit the request to create timelapse',\n",
    "    style=style\n",
    ")\n",
    "\n",
    "output = widgets.Output()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def submit_clicked(b):\n",
    "    \n",
    "    with output:\n",
    "        output.clear_output()\n",
    "        if start_year.value >= end_year.value:\n",
    "            print('The end year must be great than the start year.')\n",
    "            return\n",
    "        print('Computing...')\n",
    "        \n",
    "        Map.add_landsat_ts_gif(roi=Map.user_roi, label=title.value, start_year=start_year.value, \n",
    "                               end_year=end_year.value, start_date='05-01', end_date='10-31', \n",
    "                               bands=bands.value.split('/'), font_color=font_color.value, \n",
    "                               frames_per_second=speed.value, font_size=font_size.value, \n",
    "                               progress_bar_color=progress_bar_color.value, upload=upload.value)    \n",
    "            \n",
    "submit.on_click(submit_clicked)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "submit"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "output"
   ]
  }
 ],
 "metadata": {
  "hide_input": true,
  "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.8.2"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": true,
   "title_cell": "Table of Contents",
   "title_sidebar": "Table of Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": true
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}