Tuesday, December 13, 2011

Reservoir Water Level Monitoring System Using Ultrasonic (part–2)

 
In the previous post, I told about sending the information gathered through SMS. Then the next part would be on the development of the web interface. The web interface I designed show the water levels on a map using the Google maps API (). This API is based on Java scripts, which means the things happen on the client side. Client side refers to the user who visits the website. When the user browses to the website the browser run the Java scripts and generate the maps. However, in order to show the water level details on the map we need Java scripts to access the data that are on the central server. Solution I used is XML, widely used technology with web development.

A XML file will be generated upon the request of the webpage with the data in the database. Then the Java scripts running on the client machine will download this XML file and get the data within that. What I am going to explain here is how to generate the XML file and bit on Google maps API to show these data. Before going technical, I would like to tell about the technologies used here.
The web application was developed in ASP.NET using C# as the coding language and Visual Studio 2008 as IDE. Database used was MSSQL express 2005. Google maps API Java script version-3 was used. Unlike the version-2, this does not need a key use the API. In addition, other than the Java script maps Google provide Static version, which generate an image of the map show it on the page, Flash version that provide more functional views.
First, I will tell about generating the XML file. I went through several ways of doing it and this one looks good for the work. Here I assume you are able to get the required data into a Dataset object. I am using XmlTextWriter (in System.Xml) object ‘writer’ to generate the XML. The data would be something like this,
Name – Image – Longitude – Latitude – Location – Water Level Status
What matters most will be Longitude, Latitude and Water Level Status (whether it is critical or normal). Other data are information about the reservoir, which are to be displayed in the map.
public void createXML()
{
DataSet dsMarkers = new DataSet();
dsMarkers = getResLevData();
XmlTextWriter writer = new XmlTextWriter(HttpContext.Current.Server.MapPath("markers.xml"), Encoding.UTF8);
writer.WriteStartDocument();
writer.WriteStartElement("markers");
foreach (DataRow row in dsMarkers.Tables[0].Rows)
{
writer.WriteStartElement("marker");
writer.WriteAttributeString("name", row["reservoir_name"].ToString());
writer.WriteAttributeString("image", row["image"].ToString());
writer.WriteAttributeString("address", row["location"].ToString());
writer.WriteAttributeString("lat", row["latitude"].ToString());
writer.WriteAttributeString("lng", row["longitude"].ToString());
writer.WriteAttributeString("type", row["status"].ToString());
writer.WriteEndElement();
}
writer.WriteEndElement();
writer.WriteEndDocument();
writer.Close();
}
The Object is initialized giving the filename and Unicode type. When giving the filename, did you note that HttpContext.Current was used? That was because this function is in different class than the page class. Therefore, this refers to the current page class and creates the XML file in the same folder as the page. Now the foreach-loop will go through each row in the dataset and write the data to XML file. The XML look like this,
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker name="Reservoir1" image="../images/index1.jpg" address="location1" lat="7.88" lng="80.29" type="normal" />
<marker name="Reservoir2" image="../images/index2.jpg" address="location2" lat="9.3" lng="80.32" type="critical" />
</markers>
That was about generating the XML. Next, Java script to download this and show the information in the map. downloadUrl method download the XML and then after downloading it will iterate through the elements and assign information to the markers of the map. The function (function name is ‘load’) do this was called on the loading of the page.

<body onload = “load()”>
</body>
image
More information on Google maps are available in there references. Here are the links. When working with the Java scripts the results may depend on the browser. What I see, many old version of the browser will not give what you expect. Moreover, you may consider about this because not everyone uses the up to date version of the browser.
Link for java script I used.
Code files (Generate XML, Data Access)
Output XML
Complete project Report can be downloaded from here.

2 comments:

  1. this is i can right search title. can you help me to develop the project my self. and full details about the projects i am new in micro controller.

    ReplyDelete
    Replies
    1. There is a link to the complete project report at the bottom of the post.
      "this is i can right search title." I cant understand what do you mean by that.
      Ask if you want to know anything about the project.

      Delete