CHAPTER 4 RESULTS AND DISCUSSION
4.5 Web Development
4.5.2 Web System Design
The HTML script serve as the background algorithm, which connects and combines the data layer together with the service layer to deliver the web-based solar photovoltaic potential system. An overview of the system architecture is represented in Figure 4.18.
125
Within the HTML document are the CSS scripts which describes the styling on the web-map page. Also contained in the HTML document are the JavaScript libraries and the link to their source codes. With the source-code links declared, the HTML document also contained the JavaScript codes which interacts with the API to manipulate and deliver web services. A single HTML document is written in this study to display the web-based system and it is named “index.html”.
At the beginning of the HTML scripting, the appropriate tags of the root element (<html> </html>) are declared and all subsequent scripts goes inside this root element. Starting with the header of the HTML document, the opening and closing head tags are declared (<head> </head>) and the title of the web page given as “Solar PV Potential” is written within the title tags. Within the style tags, the style of the objects within the division element (div) on the web page is defined using the CSS scripts. The “div” objects styled include the map, query tool, checkboxes and the legend. The CSS scripts defines the style information such as the feel of the aforementioned “div” objects, its position, colour, font size and type. Position-wise, the map object, which is the Google map tiles, is positioned to fill the entire web page. Other “div” objects are then layered on the map object. The query tool sits on the top-left corner of the web – page, this would allow space for drop down list when searching for street addresses. The checkboxes and the legend on the other hand are placed on the right border of the web page, in between the base map tools. Before the header element is closed, the links to the CSS stylesheet and JavaScript source codes are stated, without which, the JavaScript codes to be written subsequently would not be able to communicate the web services or the data layer.
Next to the header element is the body of the HTML document. After opening the body tag (<body>), a “div” element is created for each “div” object with unique identities given. The identity would allow actions and results from JavaScript calls to be attached to the appropriate “div” object for display and interaction purposes. A look at the web page at this stage is shown in Figure 4.19.
126
Figure 4.19: Web page view 1
Upon creation of “div” elements for each object, the JavaScript codes to interact with data layer and the web service through the API is written within the script tags. The map object is initially added after the script tag is opened (<script>). A global variable (var map;) is declared outside a function to initialize the map object. This is done so that the map object could be referenced in other places outside the map initialize function. Within the map initialize function, a new map is added and options such as where to centre the map, start zoom and the position of map controls was stated. The map object is the anchored to the “div” element created earlier to house it.
Also within the map initialize function, scripts are written to overlay the data layer, which contains the solar photovoltaic database. An empty array (var layer = [ ];) is declared global variable to house layers to be imported. A layer is declared a map data, subsequently, a jQuery AJAX function is used to request the JSON file of the whole roof and give a response, which is then added as a GeoJSON object to the map. The whole roof layer is then styled to draw only the outline, leaving the fill-space for the roof plane layer to fill. The roof plane layer on the table web service is also added to the map and styled in colour to reflect the direction each roof plane is facing. At this stage, all the essential objects have been added to the web page, however, it remains mainly static with little or no interaction possible. Therefore, JavaScript
127
functions are added to make the web page interactive, as the essence of deploying the solution online is to disseminate information to users. To begin with, a toggle function is written to switch between layers using the checkboxes created earlier. This would make it easy and possible to be able to click on each feature and obtain information about it. Afterwards, event functions are created, so that when any feature is clicked on the map, it would popup an information window displaying pre-set attributes of the feature. Likewise, event functions are created to change the style of the layers by highlighting it or increase the outline weight, as the mouse moves the layer feature. Other interactivity function added includes the map zooming into a building roof, when clicked.
To make information extraction more rich and user-friendly, JavaScript functions are written to activate the query toolbox. The first element within the query tool “div” object is the local autocomplete search bar. By typing street addresses into this search bar, and clicking the search button, the building roof of the street address typed is zoomed to and a popup is triggered, which displays pre-set information about the solar photovoltaic potential of that building roof. This is implemented using the jQuery user interface autocomplete function. Again, a jQuery AJAX function is written to request and return the address field of the whole roof database, which is then used as the source of the autocomplete plugin function. Other elements of the query toolbox, such as checkbox and radio button options are all tied to the “Submit Query” button, which when triggered, displays the solar photovoltaic potential of the building selected via the address search bar.
A click function is written and anchored to the “Submit Query” button, using the conditional “if statement”. The function matches the street address typed in by a user with the address value in the street address field of the data layer. If it matches, then it returns requested information about solar photovoltaics potentials of the building roof, such as optimal percentage, percentage contribution of a roof plane to the whole building roof, etc. These information are then displayed on the query dashboard as soon as the “Submit Query” button is triggered. On completion of the query tool design, the closing script tag (</script>) is appended. The body of the web page is completed and this stage and also closed using the appropriate closing tag (“</body>). Likewise, the entire HTML document comprising the styling, “div” elements and objects is closed using the HTML document closing tag (</html>). The complete HTML document, with
128
JavaScript codes inherent is attached as Appendix 4. Displays of the customised web- based solar photovoltaic system are shown in Figure 4.20(a) and (b).
Figure 4.20(a): Web page view 2
Figure 4.20(b): Web page view 3
A sample of the designed system is provided through this link
(file://///geoubufsh001.wf.uct.ac.za/adlade005@wf/Demo/index.html), the link is better
129
version and other web browsers would require additional settings to access local files via the web.