Close

Demo Web App

A project log for Internet of Trash

Trashcan sending the data to the internet!

tomislav-preksavecTomislav Preksavec 08/20/2016 at 12:110 Comments

Once we got our hardware working and sending data to server, it's time to show the data to users. It was clear from the beginning that we would represent data on a map, because position is very important part of information in this project. After some research, we opted for Geomajas - open source platform for web GIS applications. Of course, we're not building a full featured GIS application, we only need data representation, but everything that Geomajas offers, both server and client side, will make our life much easier. And plugins and widgets support means that we can only use what we need, making our application agile, but at the same time we'll be able to add much more to it if needed.

Also, being Java developers ourselves, we like the fact that Geomajas is Java based, with GWT, Hibernate, Spring, and many other things under the hood. Finally, there is a great quickstart application that we used as basis for our demo.
As we needed only to demonstrate how the application would work once it's deployed, we used just the client part for demo, so we turned the preconfigured layers off, leaving Open Street Map layer as background, zooming in on part of Croatia where demo will be presented, and adding our prototype as a red dot on the map. Since we didn't use server, we had to add a piece of code that transforms GPS coordinates (EPSG:4326, also known as WGS84) to Open Street Map projection (EPSG:3857, aka EPSG:900913 - yes, it spells 'google' on 7-segment display :-) ):
private Coordinate toProjection(Coordinate point){
		double x = point.getX() * 20037508.34 / 180;
		double y = Math.log(Math.tan((90 + point.getY()) * Math.PI / 360)) / (Math.PI / 180);
		y *= 20037508.34 / 180;
		return new Coordinate(x, y);
	}
Than we added code to read last data received for given station from our server, using callback implementation of RequestBuilder to receive JSON from server (FetchRequest class). Now, when user clicks on a station on the map, dialog box pops up, displaying the latest information received from that station. You can see it in action here, using real data from out prototype.

So, to make things work the way we wanted, we just had to add few classes (FetchRequest, StationManager, DemoDialogBox) and make some changes to existing class ApplicationLayout and mapMain.xml configuration file. Thanks, Geomajas!

Discussions