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.

Input

  • image [str]
  • ghost_glyph [str]

Output

  • ghost_map [str]

Enpoint

https://hub.xpub.nl/soupboat/si16/api/ghost_map/ ? image=<image> & ghost_glyph=<ghost_glyph>

Try it



ghost_map

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.

def ghost_map(image: str, ghost_glyph: str ) -> str:

    """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."""    

    from urllib.request import urlopen
    import json

    url = f"https://hub.xpub.nl/soupboat/si16/annotation-compass/get-labels/{image}/"
    response = urlopen(url)
    data_json = json.loads(response.read())

    filtered_map = '<link rel="stylesheet" href="/soupboat/si16/static/css/jian.css">'
    for label in data_json['labels']:
        replaced_text = ''
        for char in label['text']:
            replaced_char = char
            if not char.isspace():
                replaced_char = ghost_glyph
            replaced_text = replaced_text + replaced_char
        html_tag = f'<p class="lowlight" style="left: {label["position"]["x"]}%; top: {label["position"]["y"]}%; position: absolute;">{ replaced_text }</p>'
        filtered_map = filtered_map + html_tag
    return filtered_map

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.

Example for a label:

{'image': 'map.jpg',
'position': {'x': 12, 'y': 97},
'size': {'width': 43, 'height': 18},
'text': 'This is a text! Is this a text?',
'timestamp': 'Wed, 01 Dec 2021 14:04:00 GMT',
'userID': 5766039063}

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.

How to get a json-file with annotation-labels?

https://hub.xpub.nl/soupboat/generic-labels/

The Annotation Compass allows people to uplaod an image and ask others to annotate it. A json-file of the annotations is provided.

Examples

In this example, the function replaces all characters of the annotation-texts with a ghost-glyph

ghost_map('rejection_map.jpg', '#')
'<link rel="stylesheet" href="/soupboat/si16/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>'