{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "66f72396-0cf1-41cf-a486-2930d2ad1652",
   "metadata": {},
   "source": [
    "# ghost_map\n",
    "Give a string with the name of the image-file that was annotated with the Annotation Compass; Replace all characters of all annotation-texts with a ghost-glyph and return a string that includes all replaced annotation-texts plus html-tags that place them back into their original position."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "444e0267-c783-4b5a-9546-ad007175b6ea",
   "metadata": {},
   "outputs": [],
   "source": [
    "from urllib.request import urlopen\n",
    "import json"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "9bd8860a-9967-49d5-a74a-b5de669dfe6d",
   "metadata": {},
   "outputs": [],
   "source": [
    "def ghost_map(image: str, ghost_glyph: str ) -> str:\n",
    "    \"\"\"give a string with the name of the image-file that was annotated with the Annotation Compass; Replace all characters of all annotation-texts with a ghost-glyph and return a string that includes all replaced annotation-texts plus html-tags that place them back into their original position.\"\"\"    \n",
    "    \n",
    "    url = f\"https://hub.xpub.nl/soupboat/generic-labels/get-labels/?image={image}\"\n",
    "    response = urlopen(url)\n",
    "    data_json = json.loads(response.read())\n",
    "    \n",
    "    filtered_map = '<link rel=\"stylesheet\" href=\"/soupboat/si16-app/static/css/jian.css\">'\n",
    "    for label in data_json['labels']:\n",
    "        replaced_text = ''\n",
    "        for char in label['text']:\n",
    "            replaced_char = char\n",
    "            if not char.isspace():\n",
    "                replaced_char = ghost_glyph\n",
    "            replaced_text = replaced_text + replaced_char\n",
    "        html_tag = f'<p class=\"lowlight\" style=\"left: {label[\"position\"][\"x\"]}%; top: {label[\"position\"][\"y\"]}%; position: absolute;\">{ replaced_text }</p>'\n",
    "        filtered_map = filtered_map + html_tag\n",
    "    return filtered_map"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1094ed8e-1387-481e-b612-9a8cc81d5c18",
   "metadata": {},
   "source": [
    "This function was built for a project where individuals are invited to add their annotations on a map using the Annotation Compass. Each annotation-label is stored in a json-file and includes the annotation-text itself, but also the name of the image-file as well as the position, size, index, timestamp and userID of the annotation.\n",
    "\n",
    "    Example for a label:\n",
    "\n",
    "    {'image': 'map.jpg',\n",
    "    'position': {'x': 12, 'y': 97},\n",
    "    'size': {'width': 43, 'height': 18},\n",
    "    'text': 'This is a text! Is this a text?',\n",
    "    'timestamp': 'Wed, 01 Dec 2021 14:04:00 GMT',\n",
    "    'userID': 5766039063}\n",
    "\n",
    "\n",
    "If interested in the traces the annotations leave, ghost_map() can help. The function needs a string with the name of the of the image-file that was annotated with the annotation compass tool as well as a ghost-glyph that will replace all characters of the annotation-texts. The output is a string that includes all replaced annotation-texts plus html-tags that place them back into their original position.\n",
    "\n",
    "How to get a json-file with annotation-labels?\n",
    "\n",
    "    https://hub.xpub.nl/soupboat/generic-labels/\n",
    "The Annotation Compass allows people to uplaod an image and ask others to annotate it. A json-file of the annotations is provided."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2c3e992a-317b-4433-8c3b-9efcedea575d",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Examples\n",
    "\n",
    "In this example, the function replaces all characters of the annotation-texts with a ghost-glyph"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "60d22cde-79da-4dbd-a8a7-7028f785ec93",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'<link rel=\"stylesheet\" href=\"/soupboat/si16-app/static/css/jian.css\"><p class=\"lowlight\" style=\"left: 63.9896%; top: 34.2958%; position: absolute;\">##### ####### ###### ## ######### #########</p><p class=\"lowlight\" style=\"left: 33.6269%; top: 65.1408%; position: absolute;\">#### ## ## ## #### ## # ## ## # ##### ## #### ## #### ### ### #### ##\\n# ### ## ## ## ####### \\n##### #### ## ### ## ### \\n## ## ###### ######## #### ###</p><p class=\"lowlight\" style=\"left: 92.3483%; top: -0.179426%; position: absolute;\">### ############ ## ######### ####### ########## ###### ####### ## ####### ## ####### ## ############ ####### ### ####### ## #### ####### #### ## ### ####### ## ### \\n#### #### #### ## # ##### ## ##### ########### #### ###### #### ## # #### # ### #### ## ### ################### #####</p><p class=\"lowlight\" style=\"left: 65.3034%; top: 35.4839%; position: absolute;\">####### # #### ####### #### ## #### ####### ####### ## #### ### #### ### ##### ## ## ######### ####### ### ######## ###</p><p class=\"lowlight\" style=\"left: 48.135%; top: 20.4458%; position: absolute;\">##### ####### ## ####### #### #### ##### ## ### ####### ## ### # ##### #### ##### ####### ### ######## ##### ### #### ######## ###</p><p class=\"lowlight\" style=\"left: 76.25%; top: 69.5246%; position: absolute;\"># #### #### ## #### # ##### #### ### ## ###### #### ### ###### #####</p><p class=\"lowlight\" style=\"left: 39.3264%; top: 46.831%; position: absolute;\">##### ####### ######## ## ## ##### ####### #######</p><p class=\"lowlight\" style=\"left: 77.0%; top: 63.7521%; position: absolute;\">##### ####### ######### ########## #####\\n</p><p class=\"lowlight\" style=\"left: 63.7806%; top: 41.0296%; position: absolute;\"># ##### ## ### ##### ###### ## ### ###### ###### ### ##### ### # ####### ## ######### ### # ###### ###### ########## ### ####### ##### ### ### #### ### #### #### ## ## ### ##### #####</p><p class=\"lowlight\" style=\"left: 48.9886%; top: 51.256%; position: absolute;\">## ##### # #### ### ###### ## ### #### ### ########## ##### ####### ## #### #####</p><p class=\"lowlight\" style=\"left: 36.5285%; top: 54.2958%; position: absolute;\">##### ####### ######## ## ### ##### #### ## ##### ######### # ##### ### ##########</p><p class=\"lowlight\" style=\"left: 55.0889%; top: 15.6154%; position: absolute;\">### #### ########## ##### ######## ## ####### ########## #### ### ######## ###### ### # ###### ### ### ###### ## ####### #### ### #### ###### ##### ### ##### #### #### #### ### # ## ### #### ######## ## ### ### #####</p><p class=\"lowlight\" style=\"left: 47.2668%; top: 70.1459%; position: absolute;\">####### ### ## ### ##### ### ####### ### ####### ### ####### #### ### ### #### ### ### ## #### ##### ###### ### # ####### ## #### ## ######## ######## ## ############</p><p class=\"lowlight\" style=\"left: 42.5389%; top: 45.7042%; position: absolute;\">##### ####### #### ## ## #### ####</p><p class=\"lowlight\" style=\"left: 45.2507%; top: 29.3907%; position: absolute;\"># ### ### #### ####### ##### ####### ##### ### ###### ###### ###### ## ## ### ###### ### ## #### #### #### ###### #### ### ########## # ### ### ### ### #####</p><p class=\"lowlight\" style=\"left: 60.774%; top: 59.7488%; position: absolute;\">######## ## ### ######</p><p class=\"lowlight\" style=\"left: 42.0882%; top: 18.8014%; position: absolute;\">## ##### ##### ######## # ### ###### ####### ##### #### #### ######### ####### # #### # ########## #### ### ##### # ###### # ##### ## ## ######## #### #### ####</p><p class=\"lowlight\" style=\"left: 39.1192%; top: 36.2676%; position: absolute;\">##### ####### #### ## #### ####### ## ####</p><p class=\"lowlight\" style=\"left: 43.7995%; top: 27.0609%; position: absolute;\"># ### ### #### ####### ##### ####### ##### ### ###### ###### ###### ## ## ### ###### ### ## #### #### #### ###### #### ### ### ############# # ### ### ### ### #####</p><p class=\"lowlight\" style=\"left: 75.285%; top: 29.2254%; position: absolute;\">### ## ###### ######### #### # ### ### ##### ## ### #### #### ## #### ## #### ## ##### ##### ##### ## ### #### ## ### ### ## #### ### ###### ### ### ## #### ## ##### </p><p class=\"lowlight\" style=\"left: 52.0%; top: 48.1324%; position: absolute;\"># ######## ### ######## #### # #### ####### ## ### ####### #### ### ########### ######### </p><p class=\"lowlight\" style=\"left: 16.5775%; top: 28.7791%; position: absolute;\"># #### ######### ## ### ######### #### #### ### ####### ## ## ########### ############ #### ## ##### ## ############ ########## ##### ### # #### ##### ### ## ###### ####### </p><p class=\"lowlight\" style=\"left: 60.1554%; top: 63.3099%; position: absolute;\">##### ## #### ## #### ### ## ########### ## ###### </p><p class=\"lowlight\" style=\"left: 65.0396%; top: 45.3405%; position: absolute;\">## ### ###### ## #### #### # #### #### ## #### ####### #### ####### ## ##### # ####### ### ## ### ### ######### ## #### ### ##### ## ###### #### ###</p><p class=\"lowlight\" style=\"left: 46.3713%; top: 58.4289%; position: absolute;\">######### ####### #### #### # #### ## ## ##### ### # ###### ##### ##### #### #### ##### ###### # ### ## ############ ## ### ############# #### ##### ######### ### ####### ### ### ## # #### # ### ########## ##### ###### ## ###### ######## ######### ### # ## ### ####### ###### ### # ## ##### ### ###########</p><p class=\"lowlight\" style=\"left: 30.75%; top: 43.0391%; position: absolute;\">##### #### ####### #### ## ######## ## # ##### #######</p><p class=\"lowlight\" style=\"left: 60.3757%; top: 46.2333%; position: absolute;\"># ### ####### #### # #### #####   # ### #### ###### ## #### ####### ###### ###  ##### ##### #### ##</p><p class=\"lowlight\" style=\"left: 49.2084%; top: 34.0502%; position: absolute;\">## #### ### ######  #####</p><p class=\"lowlight\" style=\"left: 38.4744%; top: 58.0105%; position: absolute;\">### ##### #### # ###### ######### ## ########## ##### # #### #### ## ### #### # ### ##### # ##### ## ######### ####### ### ######### ###### ##### ##### # #### ######## ## ###</p><p class=\"lowlight\" style=\"left: 23.9572%; top: 33.8663%; position: absolute;\"># #### #### ######### ## ### ######### #### #### ####### # #### #### # ####### ####### ### ## ### ##### #### ##### ## ###### ######</p><p class=\"lowlight\" style=\"left: 57.625%; top: 34.3803%; position: absolute;\">######</p><p class=\"lowlight\" style=\"left: 40.125%; top: 29.966%; position: absolute;\">###### # ### ## ######</p><p class=\"lowlight\" style=\"left: 51.123%; top: 18.1686%; position: absolute;\"># #### ######## #### #### ####### #### #### ## # #### ### #### ######## ## ## ######## ##### ## ########</p><p class=\"lowlight\" style=\"left: 44.3557%; top: 20.4458%; position: absolute;\">## ##### ############## ##########</p><p class=\"lowlight\" style=\"left: 55.621%; top: 33.6313%; position: absolute;\">## #### ##### ## # ####### ##### #### ## ### ####### #### ### #### ####### ##### ############ ### # ### ### ## #### ### ## ### ##### ### ## ### ### ### ##### ### ##### ###### ### # #### ##### ### ### ### # #### ###### ## ### ## ###### ## # #####</p><p class=\"lowlight\" style=\"left: 39.745%; top: 19.3153%; position: absolute;\">## ###### ######### #### ########## ## # ##### #### #### ######## #### #### ## #### # #### ######## ## </p><p class=\"lowlight\" style=\"left: 57.9156%; top: 37.276%; position: absolute;\">###### ######## ######## ## ##### ###### #### ###### ## #### ###### ############## </p><p class=\"lowlight\" style=\"left: 50.3743%; top: 52.0349%; position: absolute;\"># #### ######## #### #### ### ###### ######### ## ## ########## ## ## ####### #### ####### ## ########</p><p class=\"lowlight\" style=\"left: 73.703%; top: 49.514%; position: absolute;\"># ### ######## #### # ########## ##### #### ###### ###### ####### #### ###### ###### ## ###### ### ### ### #### ## ######</p><p class=\"lowlight\" style=\"left: 58.7942%; top: 43.0025%; position: absolute;\">#### ###### ## ### ##### ## ### ## #### ####### ###### #### ## ### ###### ### #### #### ### ####### ### ######## ########## ## #########</p><p class=\"lowlight\" style=\"left: 64.4007%; top: 39.7934%; position: absolute;\">## ###### ######## ## ### ##### ## #### ###### ## #### #### ## ###### ## ###### ##### ### ## ######## ## ### ######## ####### ##### ## ### ########</p><p class=\"lowlight\" style=\"left: 33.8622%; top: 34.9877%; position: absolute;\">##### #########\\n</p><p class=\"lowlight\" style=\"left: 5.84518%; top: 49.088%; position: absolute;\">##### ##### ## ######### # ### ## ##### ######### ### # #### ## #### ############## ### #### #### ### # ### ###### ## #### ### ### ## ### #### # ### ######### ### #### ### ##### ##### ##### ## #### # ###### #### ## #### #### # #### # ### ######## ##### #####</p><p class=\"lowlight\" style=\"left: 40.8373%; top: 7.34979%; position: absolute;\">#### ## ### ############ ##### # ####### ######### ### ### ##### ##### # ### ####### #### ###### # ## ######## # ### ####### # ######## ## ##### ### ####### ## #### # ##### ##### ## #### ##### ## #### #### ####</p><p class=\"lowlight\" style=\"left: 0.868878%; top: 1.4485%; position: absolute;\"># #### ##### #### ## #### #### ## ########## # ##### # ######## ## ### #### #######</p><p class=\"lowlight\" style=\"left: 45.8926%; top: 95.0107%; position: absolute;\"># #### ####### # #### ### ## ### ###### ## ##</p>'"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ghost_map('rejection_map.jpg', '#')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7a8c88f3-2f16-4dce-9e29-547648e251c2",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}