{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "0",
   "metadata": {},
   "source": [
    "<a href=\"https://githubtocolab.com/gee-community/geemap/blob/master/examples/notebooks/28_voila.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>\n",
    "\n",
    "Uncomment the following line to install [geemap](https://geemap.org) if needed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1",
   "metadata": {},
   "outputs": [],
   "source": [
    "# !pip install geemap"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2",
   "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/gee-community/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,
   "id": "3",
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import ee\n",
    "import geemap\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4",
   "metadata": {},
   "outputs": [],
   "source": [
    "Map = geemap.Map()\n",
    "Map.add_basemap(\"HYBRID\")\n",
    "Map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5",
   "metadata": {},
   "outputs": [],
   "source": [
    "style = {\"description_width\": \"initial\"}\n",
    "title = widgets.Text(\n",
    "    description=\"Title:\", value=\"Landsat Timelapse\", width=200, style=style\n",
    ")\n",
    "\n",
    "bands = widgets.Dropdown(\n",
    "    description=\"Select RGB Combo:\",\n",
    "    options=[\n",
    "        \"Red/Green/Blue\",\n",
    "        \"NIR/Red/Green\",\n",
    "        \"SWIR2/SWIR1/NIR\",\n",
    "        \"NIR/SWIR1/Red\",\n",
    "        \"SWIR2/NIR/Red\",\n",
    "        \"SWIR2/SWIR1/Red\",\n",
    "        \"SWIR1/NIR/Blue\",\n",
    "        \"NIR/SWIR1/Blue\",\n",
    "        \"SWIR2/NIR/Green\",\n",
    "        \"SWIR1/NIR/Red\",\n",
    "    ],\n",
    "    value=\"NIR/Red/Green\",\n",
    "    style=style,\n",
    ")\n",
    "\n",
    "hbox1 = widgets.HBox([title, bands])\n",
    "hbox1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6",
   "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",
    ")\n",
    "\n",
    "cloud = widgets.Checkbox(\n",
    "    value=True, description=\"Apply fmask (remove clouds, shadows, snow)\", style=style\n",
    ")\n",
    "\n",
    "hbox2 = widgets.HBox([speed, cloud])\n",
    "hbox2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7",
   "metadata": {},
   "outputs": [],
   "source": [
    "start_year = widgets.IntSlider(\n",
    "    description=\"Start Year:\", value=1984, min=1984, max=2020, style=style\n",
    ")\n",
    "end_year = widgets.IntSlider(\n",
    "    description=\"End Year:\", value=2020, min=1984, max=2020, style=style\n",
    ")\n",
    "start_month = widgets.IntSlider(\n",
    "    description=\"Start Month:\", value=5, min=1, max=12, style=style\n",
    ")\n",
    "end_month = widgets.IntSlider(\n",
    "    description=\"End Month:\", value=10, min=1, max=12, style=style\n",
    ")\n",
    "hbox3 = widgets.HBox([start_year, end_year, start_month, end_month])\n",
    "hbox3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8",
   "metadata": {},
   "outputs": [],
   "source": [
    "font_size = widgets.IntSlider(\n",
    "    description=\"Font size:\", value=30, min=10, max=50, style=style\n",
    ")\n",
    "\n",
    "font_color = widgets.ColorPicker(\n",
    "    concise=False, description=\"Font color:\", value=\"white\", style=style\n",
    ")\n",
    "\n",
    "progress_bar_color = widgets.ColorPicker(\n",
    "    concise=False, description=\"Progress bar color:\", value=\"blue\", style=style\n",
    ")\n",
    "\n",
    "hbox4 = widgets.HBox([font_size, font_color, progress_bar_color])\n",
    "hbox4"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9",
   "metadata": {},
   "outputs": [],
   "source": [
    "create_gif = widgets.Button(\n",
    "    description=\"Create timelapse\",\n",
    "    button_style=\"primary\",\n",
    "    tooltip=\"Click to create timelapse\",\n",
    "    style=style,\n",
    ")\n",
    "\n",
    "download_gif = widgets.Button(\n",
    "    description=\"Download GIF\",\n",
    "    button_style=\"primary\",\n",
    "    tooltip=\"Click to download timelapse\",\n",
    "    disabled=False,\n",
    "    style=style,\n",
    ")\n",
    "\n",
    "output = widgets.Output()\n",
    "\n",
    "hbox5 = widgets.HBox([create_gif])\n",
    "hbox5"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "10",
   "metadata": {},
   "outputs": [],
   "source": [
    "def submit_clicked(b):\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",
    "        if start_month.value > end_month.value:\n",
    "            print(\"The end month must be great than the start month.\")\n",
    "            return\n",
    "        if start_year.value == end_year.value:\n",
    "            add_progress_bar = False\n",
    "        else:\n",
    "            add_progress_bar = True\n",
    "\n",
    "        start_date = str(start_month.value).zfill(2) + \"-01\"\n",
    "        end_date = str(end_month.value).zfill(2) + \"-30\"\n",
    "\n",
    "        print(\"Computing...\")\n",
    "\n",
    "        Map.add_landsat_ts_gif(\n",
    "            roi=Map.user_roi,\n",
    "            label=title.value,\n",
    "            start_year=start_year.value,\n",
    "            end_year=end_year.value,\n",
    "            start_date=start_date,\n",
    "            end_date=end_date,\n",
    "            bands=bands.value.split(\"/\"),\n",
    "            font_color=font_color.value,\n",
    "            frames_per_second=speed.value,\n",
    "            font_size=font_size.value,\n",
    "            add_progress_bar=add_progress_bar,\n",
    "            progress_bar_color=progress_bar_color.value,\n",
    "            download=True,\n",
    "            apply_fmask=cloud.value,\n",
    "        )\n",
    "\n",
    "\n",
    "create_gif.on_click(submit_clicked)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "11",
   "metadata": {},
   "outputs": [],
   "source": [
    "output"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}