SUSI.AI has many skills. Two of which are displaying web search of a certain query and displaying a map of certain position. This post will cover how these things are implemented in Susi Android App and how a preview is displayed using Bumptech’s free and open source Glide library. So, what is glide? According to Glide docs, Glide is a fast and efficient open source media management and image loading framework for Android that wraps media decoding, memory and disk caching, and resource pooling into a simple and easy to use interface.
Now, lets describe how this framework is used in Susi App. So, let’s cover it’s two uses one by one :
Map Preview :
Whenever a user queries something like “Where is Singapore” or “Where am I”, the response from server is a map with latitude, longitude and zoom level. See the “type” which is map. It indicates android app that it needs to display a map with provided values.
| “actions”: [ { “type”: “answer”, “expression”: “Singapore is a place with a population of 3547809. Here is a map: https://www.openstreetmap.org/#map=13/1.2896698812440377/103.85006683126556” }, { “type”: “anchor”, “link”: “https://www.openstreetmap.org/#map=13/1.2896698812440377/103.85006683126556”, “text”: “Link to Openstreetmap: Singapore” }, { “type”: “map”, “latitude”: “1.2896698812440377”, “longitude”: “103.85006683126556”, “zoom”: “13” } ] }] |
So, these values are then plugged into the below mentioned url where length x width is size of image to be retrieved. This url links to an image of the map with center and size as defined.
http://staticmap.openstreetmap.de/staticmap.php?center=latitude,longitude&zoom=zoom&size=lengthxwidth
So, now as we have a link to the image to be displayed. We just need something to get the image from that link and display it in the app. That’s where Glide comes to rescue. It loads the image from the link to an ImageView.
| Glide.with(currContext).load(mapHelper.getMapURL()).listener(new RequestListener<String, GlideDrawable>() {
@Override @Override }).into(mapViewHolder.mapImage); |
So, what the above code does is that it displays image from url mapHelper.getMapURL() to mapViewHolder.mapImage.
So, by this way, we are able to display a preview of the map in the chat itself. The user can then click on the image to load the complete map.
Web Search Preview :
When a user enters queries like “search for dog”, the response from server is a websearch with the query to be searched, something like this.
| “actions”: [ { “type”: “answer”, “expression”: “Here is a web search result:” }, { “type”: “websearch”, “query”: “dog” } ] |
So, now we know the query to be searched, we can use any search api to get results about that query ad display it in the app. In Susi android app, we have used DuckDuckGo open source api to do that task. We call this url
https://api.duckduckgo.com/?format=json&pretty=1&q=query&ia=meanings
which gives a json response with results. We then use the json results which contains the link to result, image to be displayed and a short abstract of the result.
| { “Result” : “<a href=\”https://duckduckgo.com/Dog\”>Dog</a>A member of genus Canis that forms part of the wolf-like canids, and is the most widely abundant…”, “Icon” : { “URL” : “https://duckduckgo.com/i/16101b42.jpg”, “Height” : “”, “Width” : “” }, “FirstURL” : “https://duckduckgo.com/Dog”, “Text” : “Dog A member of genus Canis that forms part of the wolf-like canids, and is the most widely abundant…” } |
There are three things we are displaying in the websearch preview, which are Title, text and an image. We display the query as the title, text in json response as text and use glide to get the image from the url provided in the the json response.
| glide.load(url) .crossFade() .into(websearchholder.previewImageView); |
Using the above code, we load the image from the image url to websearchholder.previewImageView().
So, by this way, we are able to display a preview of the search result. The user can then touch on this preview which opens the detailed page of the result.
Happy Coding!