windhamdavid 4 years ago
parent
commit
c0e6b43c42

+ 79 - 0
bill.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>Bill Fetch |Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzK93ZAR-RHPNwB-xMLdBQSv-pz1wEOtg&v=3.exp&sensor=false&libraries=places,drawing,geometry"> </script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item">Project Size</a>
+                    <a href="utility.html" class="list-group-item">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item active">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item">System Production</a>
+						  <a href="incentives.html" class="list-group-item">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item">Installation Cost</a>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+				 <h2>Bill Fetch</h2>
+				 <h4>This PowerTool returns the electricity companies and rates in the organization location</h4>
+					<div class="panel panel-danger">
+					<div class="panel-heading">This Service Utilizes Utilty API - <a target="_blank" href="https://utilityapi.com/#pricing">https://utilityapi.com/</a> (which does not query our service providers)</div>
+				 	  <object type="text/html" data="https://utilityapi.com/portal/amokri_villagepower" width="100%" height="700px" style="overflow:auto;"></object>
+					</div>
+            </div>
+        </div>
+    </div>
+
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>

+ 92 - 0
costs.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>Installation Cost | Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item">Project Size</a>
+                    <a href="utility.html" class="list-group-item">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item">System Production</a>
+						  <a href="incentives.html" class="list-group-item">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item active">Installation Cost</a>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+					 <h2>Installation Cost</h2>
+					 <h4>This tool returns the installation cost within the same county</h4>
+						<br> <br>
+						<form class="form-inline">
+							<div class="form-group">
+							<label for="kw">Installation Cost System Size (kW):</label>
+							<input type="text" class="form-control" id="openpv_system_size" value="70" placeholder="SC" size="4">
+							</div>
+						</form>
+						<br />
+						<form class="form-inline">
+							<div class="form-group">
+							<label for="city">County:</label>
+							<input type="text" class="form-control" id="openpv_county" value="Greenwood">
+							</div>
+							<input type="button" class="btn btn-success" onclick="avg_costperwatt();" VALUE="Show cost per watt">
+						</form>
+						
+						<br><br>                   
+					<div id="openpv_summary_results"></div>
+            </div>
+        </div>
+    </div>
+        <hr>
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>

File diff suppressed because it is too large
+ 6584 - 0
css/bootstrap.css


File diff suppressed because it is too large
+ 5 - 0
css/bootstrap.min.css


+ 70 - 0
css/style.css

@@ -0,0 +1,70 @@
+body {
+    padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
+}
+
+.thumbnail img {
+    width: 100%;
+}
+
+.ratings {
+    padding-right: 10px;
+    padding-left: 10px;
+    color: #d17581;
+}
+
+.thumbnail {
+    padding: 0;
+}
+
+.thumbnail .caption-full {
+    padding: 9px;
+    color: #333;
+}
+
+footer {
+    margin: 50px 0;
+}
+
+
+#draggable { 
+	position: absolute;
+	width: 150px; 
+	height: 150px; 
+	padding: 0.5em; 
+	left: 100px;
+	top: 200px;
+	display: none;}
+
+#mapDiv45 { 
+	display: none;
+	width: 250px; 
+	height: 250px; 
+	padding: 0.5em; 
+	position: absolute; 
+	border: 10px solid #FFFFFF;
+	right: 0px;
+	top: 600px;
+    } 
+
+#mapDivImage { 
+	width: 400px; 
+	height: 400px; 
+	padding: 0.5em; 
+	position: absolute; 
+	border: 2px solid #eeeeee;} 
+
+#mapDiv { 
+	height: 70%; 
+	width: 100% }
+
+
+#draggable { 
+	width: 150px; 
+	height: 150px; 
+	padding: 0.5em; }
+
+#advanced-fields, #mapcontrols {
+	display: none;
+}	
+
+#results, #results2, #results3 { display: block; }

BIN
fonts/glyphicons-halflings-regular.eot


File diff suppressed because it is too large
+ 288 - 0
fonts/glyphicons-halflings-regular.svg


BIN
fonts/glyphicons-halflings-regular.ttf


BIN
fonts/glyphicons-halflings-regular.woff


BIN
fonts/glyphicons-halflings-regular.woff2


BIN
img/compass.png


+ 90 - 0
incentives.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>Financial Incentives | Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item">Project Size</a>
+                    <a href="utility.html" class="list-group-item">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item">System Production</a>
+						  <a href="incentives.html" class="list-group-item active">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item">Installation Cost</a>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+					 <h2>Financial Incentives</h2>
+					 <h4>This tool fetches solar incentives based on the geographic location</h4>
+					 <br> <br>
+					  <form class="form-inline">
+					    <div class="form-group">
+					      <label for="city">City</label>
+					      <input type="text" class="form-control" name="city" id="city" value="Greenwood" placeholder="Greenwood">
+					    </div>
+					    <div class="form-group">
+					      <label for="state">State</label>
+					      <input type="text" class="form-control" name="state" id="state" value="SC" placeholder="SC" size="3">
+					    </div>
+					    <input type="button" class="btn btn-success" onclick="show_incentives();" VALUE="Show Incentives">
+					  </form> 
+					  <br><br>                   
+					<div id='incentives' style="min-height: 300px;">
+						<div id="list_of_incentives"></div>
+					</div>
+            </div>
+        </div>
+    </div>
+        <hr>
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>

+ 130 - 0
index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>Project Size | Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzK93ZAR-RHPNwB-xMLdBQSv-pz1wEOtg&v=3.exp&sensor=false&libraries=places,drawing,geometry"> </script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item active">Project Size</a>
+                    <a href="utility.html" class="list-group-item">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item">System Production</a>
+						  <a href="incentives.html" class="list-group-item">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item">Installation Cost</a>
+                </div>
+					
+            </div>
+
+            <div class="col-md-9">
+					<h2>Project Size</h2>
+                <div class="thumbnail">
+					     <div style="width: 100%; height: 500px;" id="mapDiv"></div>
+					     <div id="mapDiv45"></div>
+					     <div style="display: none;" id="mapDivImage"> </div>
+					     <div  id="draggable"><img src="img/compass.png"></div>
+                    <div class="caption-full">
+							    <form class="form-inline">
+							   ADDRESS:
+							   <br /> 
+							   <div class="form-group first-row">
+							   <input id="address" class="form-control" size="60" value="1306 SC-72, Greenwood, SC 29649" /> 
+							   </div>
+							   <div class="form-group form-groups btn-group">	
+								<input type="button" class="btn btn-default" href="javascript:void(0)" id="update_address" value="Update Address">
+							   </div>
+							   <div class="form-group">	
+								<input type="button" class="btn btn-success" id="calculate" VALUE="Run Model"> 
+								</div>
+						      </form>  
+							</div>
+                </div>
+
+                <div class="well">
+						  <div class="text-right">
+							  <a id="show-hide-advanced-fields" href="#">Show / Hide Advanced Fields</a>
+      					</div>
+						<div id="advanced-fields">
+ 					     <div id='mapcontrols'>
+				 		   <input type="button" class="btn btn-default" id="btnTerrain" value="Terrain"> 
+				 			<input type="button" class="btn btn-default" id="btnRoadmap" value="Roadmap">
+				 			<input type="button" class="btn btn-default" id="btnSatellite"  value="Satellite">
+				 			<input type="button" class="btn btn-default" id="btnHybrid" value="Hybrid"> 
+				 			<input type="button" class="btn btn-default" id="btnCompass" value="Compass"> 
+				 			<input type="button" class="btn btn-default" id="btnInspector" value="Inspect Roof">
+ 					     </div>
+
+							<br />
+							INPUTS:
+							<br />       
+						   <div class="form-group" style="margin-right: 20px;">
+							Orientation of the roof: <input id="azimuth" size="4" value="180" /> (<a href="#" onclick="$('#draggable').toggle();">Show/Hide Compass</a>)
+						   </div>
+						    <div class="form-group" style="margin-right: 20px;">	
+							Tilt: <input id="tilt" size="4" value="20" />
+							</div>
+						    <div class="form-group" style="margin-right: 20px;">	
+							PPA Price: <input id="ppa" size="4" value="0.15" />
+							</div>
+							<br><br>
+					    </div>
+					    <div id="results"></div>
+					    <div id="results2"></div>
+					    <div id="results3"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <hr>
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                     <p><small>Data provided by <a href="http://www.nrel.gov/" target="_blank">NREL</a></small></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>

+ 172 - 0
irradiance.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>Solar Irradiance | Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzK93ZAR-RHPNwB-xMLdBQSv-pz1wEOtg&v=3.exp&sensor=false&libraries=places,drawing,geometry"> </script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item">Project Size</a>
+                    <a href="utility.html" class="list-group-item">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item active">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item">System Production</a>
+						  <a href="incentives.html" class="list-group-item">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item">Installation Cost</a>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+				 <h2>Solar Irradiance</h2>
+				 <h4>This tool allows you to estimate solar irradiance available in a location</h4>
+				  <br><br>
+				  <form class="form-inline">
+				    <div class="form-group">
+				      <label for="city">City</label>
+				      <input type="text" class="form-control" name="city" id="city" value="Greenwood" placeholder="Greenwood">
+				    </div>
+				    <div class="form-group">
+				      <label for="state">State</label>
+				      <input type="text" class="form-control" name="state" id="state" value="SC" placeholder="SC" size="3">
+				    </div>
+					 <br /><br />
+				    <div class="form-group">
+				      <label for="tilt">Tilt</label>
+				      <input type="text" class="form-control" name="tilt" id="tilt" value="40"  size="4">
+				    </div>
+				    <div class="form-group">
+				      <label for="azimuth">Azimuth</label>
+				      <input type="text" class="form-control" name="azimuth" id="azimuth" value="40"  size="4">
+				    </div>
+				    <div class="form-group">
+				      <label for="size">System Size</label>
+				      <input type="text" class="form-control" name="size" id="size" value="50"  size="4">
+				    </div>
+
+				  </form>
+				  <br />
+				  <form class="form-inline">
+						<label for="mount">Mount Type:</label>
+						<select name="array_type" id="array_type" class="form-control" width="200" style="width:180px"> 
+							<option value="0" > Fixed - Open Rack </option>
+							<option value="1" selected> Fixed - Roof Mounted </option>
+							<option value="2" > 1-Axis </option>
+							<option value="3" > 1-Axis Backtracking </option>
+							<option value="4" > 2-Axis </option> 
+						</select>                                 
+						<label for="module"> Module Type:</label>
+						<select name="module_type" id="module_type" class="form-control" width="200" style="width:150px"> 
+							<option value="0" > Standard </option>
+							<option value="1" selected> Premium </option>
+							<option value="2" > Thin Film </option>
+						</select> 
+					    <input type="button" class="btn btn-success" onclick="pvwatts_irradiance();" value="Run PV Watts">
+					</form>
+					<br><br>
+					<div id="pv_watts_annual_production" class="alert alert-success" role="alert"></div> 
+						<div id="pv_watts_output_table">
+						<table class="table" width="100%" border="1px;" cellpadding="2px;">
+						       <tr>
+						        <td> Month </td>
+						        <td> Jan </td>
+						        <td> Feb </td>
+						        <td> Mar </td>
+						        <td> Apt </td> 
+						        <td> May </td>
+						        <td> Jun </td>
+						        <td> Jul </td>
+						        <td> Aug </td>
+						        <td> Sep </td>
+						        <td> Oct </td>
+						        <td> Nov </td>
+						        <td> Dec </td>
+						       </tr>
+						        <tr>
+						        <td> Radiation <br /> (kWh) </td>
+						        <td> <span id="radiation_jan"></span> </td>
+						        <td> <span id="radiation_feb"></span> </td>
+						        <td> <span id="radiation_mar"></span> </td>
+						        <td> <span id="radiation_apr"></span> </td> 
+						        <td> <span id="radiation_may"></span> </td>
+						        <td> <span id="radiation_jun"></span> </td>
+						        <td> <span id="radiation_jul"></span> </td>
+						        <td> <span id="radiation_aug"></span> </td>
+						        <td> <span id="radiation_sep"></span> </td>
+						        <td> <span id="radiation_oct"></span> </td>
+						        <td> <span id="radiation_nov"></span> </td>
+						        <td> <span id="radiation_dec"></span> </td>
+						       </tr>
+						        <tr>
+						        <td> Production <br /> (AC kWh) </td>
+						        <td> <span id="production_jan"></span> </td>
+						        <td> <span id="production_feb"></span> </td>
+						        <td> <span id="production_mar"></span> </td>
+						        <td> <span id="production_apr"></span> </td> 
+						        <td> <span id="production_may"></span> </td>
+						        <td> <span id="production_jun"></span> </td>
+						        <td> <span id="production_jul"></span> </td>
+						        <td> <span id="production_aug"></span> </td>
+						        <td> <span id="production_sep"></span> </td>
+						        <td> <span id="production_oct"></span> </td>
+						        <td> <span id="production_nov"></span> </td>
+						        <td> <span id="production_dec"></span> </td>
+						       </tr>
+
+						    </table>
+						</div>  
+					 </div>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <hr>
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>

File diff suppressed because it is too large
+ 2317 - 0
js/bootstrap.js


File diff suppressed because it is too large
+ 7 - 0
js/bootstrap.min.js


File diff suppressed because it is too large
+ 4 - 0
js/jquery.js


+ 313 - 0
js/script.js

@@ -0,0 +1,313 @@
+/*=============================================
+		Project Size
+=============================================== */
+
+$(function() {
+	$( "#draggable" ).draggable();
+	$( "#mapDiv45" ).draggable();
+	$( "#show-hide-advanced-fields" ).click(function(){
+		$( "#advanced-fields, #mapcontrols").toggle();
+	});
+});
+
+$(document).ready(function() {           
+
+function initialize(){
+	var geocoder = new google.maps.Geocoder();
+	address = document.getElementById('address').value;
+	var mapOptions = {
+		zoom: 40,
+		disableDefaultUI: true,
+		zoomControl: true,
+		panControl: true,
+		mapTypeControl: true,
+		scaleControl: true,
+		streetViewControl: true,
+		overviewMapControl: true,
+		mapTypeId:google.maps.MapTypeId.SATELLITE,
+		tilt: 0
+	};
+	geocoder.geocode( { 'address': address}, function(results, status) {
+		if (status == google.maps.GeocoderStatus.OK) {
+		map.setCenter(results[0].geometry.location);
+		x = results[0].geometry.location;
+	}
+}); 
+
+var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
+var mapOptions45 = {
+	zoom: 20,
+	minZoom: 18,
+	disableDefaultUI: true,
+	zoomControl: true,
+	mapTypeId:google.maps.MapTypeId.SATELLITE,
+	tilt: 45
+};
+
+geocoder.geocode( { 'address': address}, function(results, status) {
+	if (status == google.maps.GeocoderStatus.OK) {
+		map45.setCenter(results[0].geometry.location);
+		x = results[0].geometry.location;
+	}
+}); 
+
+var map45 = new google.maps.Map(document.getElementById("mapDiv45"), mapOptions45);
+var mapOptionsImage = {
+	zoom: 20,
+	disableDefaultUI: true,
+	zoomControl: false,
+	draggable: false,
+	mapTypeId:google.maps.MapTypeId.SATELLITE,
+	tilt: 45
+};
+
+geocoder.geocode( { 'address': address}, function(results, status) {
+	if (status == google.maps.GeocoderStatus.OK) {
+		mapImage.setCenter(results[0].geometry.location);
+		x = results[0].geometry.location;
+	}
+}); 
+
+var mapImage = new google.maps.Map(document.getElementById("mapDivImage"), mapOptionsImage);
+	addButtons(map);
+	drawEditablePolygon(map);			    
+}
+
+function addButtons(map){
+	document.getElementById('btnTerrain').addEventListener('click', function(){
+		map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
+	});
+	document.getElementById('btnRoadmap').addEventListener('click', function(){
+		map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
+	});
+	document.getElementById('btnSatellite').addEventListener('click', function(){
+		map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
+	});
+	document.getElementById('btnHybrid').addEventListener('click', function(){
+		map.setMapTypeId(google.maps.MapTypeId.HYBRID);
+	});
+	document.getElementById('btnCompass').addEventListener('click', function(){
+		$('#draggable').toggle();
+	});
+	document.getElementById('btnInspector').addEventListener('click', function(){
+		$('#mapDiv45').toggle();
+	});
+}
+
+
+function drawEditablePolygon(map) {
+	geocoder = new google.maps.Geocoder();
+	address = document.getElementById('address').value;
+	geocoder.geocode( { 'address': address}, function(results, status) {
+	if (status == google.maps.GeocoderStatus.OK) {
+		map.setCenter(results[0].geometry.location);
+		lat = results[0].geometry.location.lat();
+		lon = results[0].geometry.location.lng();
+		lat_adjacent = Number(results[0].geometry.location.lat()) + 0.0001;
+		lon_adjacent = Number(results[0].geometry.location.lng()) + 0.0001;
+		console.log("LAT: " + lat + " | ADJACENT LAT: " + lat_adjacent + " LON: " + lon + " | ADJACENT LON: " + lon_adjacent);
+		natureCoords = [
+			new google.maps.LatLng(lat, lon_adjacent),   
+			new google.maps.LatLng(lat, lon),   
+			new google.maps.LatLng(lat_adjacent, lon),   
+			new google.maps.LatLng(lat_adjacent, lon_adjacent) 
+		];
+		natureArea = new google.maps.Polygon({
+			path: natureCoords,
+			strokeColor: "#FFFFFF",
+			strokeOpacity: 0.8,
+			strokeWeight: 2,
+			fillColor: "#00FF00",
+			fillOpacity: 0.6,
+			editable: true,
+			draggable: true
+		});
+		natureArea.setMap(map);
+		document.getElementById('calculate').addEventListener('click', function(){
+			calculateValue();
+		});
+	}
+});
+
+}
+
+google.maps.event.addDomListener(window, "load", initialize);
+$('#update_address').click( function(){
+	initialize();
+}); 
+$('#calculate').click( function(){
+$('#results, #results2, #results3').show();    		
+}); 
+});
+
+function calculateValue() {
+	surface_area =  Number(google.maps.geometry.spherical.computeArea(natureArea.getPath()));
+	size_premimum = Number(surface_area * 0.15);
+	size_standard = Number(surface_area * 0.10);
+	document.getElementById('results').innerHTML = "<br><br>RESULTS:<br><br>";
+	document.getElementById('results').innerHTML += "Surface Area = " + surface_area.toFixed(0) + " sq meter <br/>";
+	document.getElementById('results').innerHTML += "System size by using premium solar panels (SunPower) = " + size_premimum.toFixed(2) + " kW <br/>";
+	document.getElementById('results').innerHTML += "System size by using standard solar panels = " + size_standard.toFixed(2) + " kW <br/>";
+	var tilt = parseInt(document.getElementById('tilt').value);
+	var azimuth = parseInt(document.getElementById('azimuth').value); 
+	var requestUrl="https://developer.nrel.gov/api/pvwatts/v5.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&lat=" + lat + "&lon=" + lon + "&timeframe=monthly&system_capacity=" + size_premimum + "&module_type=1&losses=14&array_type=1&tilt=" + tilt + "&azimuth=" + azimuth + "&callback=?";
+	$.getJSON(requestUrl, { }, function (data){ 
+	console.log(data.outputs);
+	var energyGenerated = data.outputs.ac_annual;
+	var ppa = document.getElementById('ppa').value;
+	var lease = energyGenerated * 0.15 * ppa;
+	document.getElementById('results3').innerHTML = "<br /> Estimated Electricity Production = " + energyGenerated.toFixed(2) + " kWh per year <br/>";
+	document.getElementById('results3').innerHTML += "<h3>Year 1 PPA Revenue $" + lease.toFixed(2) + ".</h3>";
+});
+
+requestUtilityCompanies ="https://developer.nrel.gov/api/census_rate/v3.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&region=block&id=101&lat=" + lat + "&lon=" + lon; 
+
+$.getJSON(requestUtilityCompanies, { }, function (data){
+	document.getElementById('results2').innerHTML = "<br />Local Electric Utility Company: <br/>";
+
+var i=0;
+utility='';
+while(data.outputs.utility_info[i]){
+	console.log(data.outputs.utility_info[i].utility_name);
+	document.getElementById('results2').innerHTML += data.outputs.utility_info[i].utility_name + "<br />";
+	utility += data.outputs.utility_info[i].utility_name ;
+	i++;
+}
+
+});
+
+}
+
+
+
+/*=============================================
+		Utility
+=============================================== */
+function show_utility_companies() {  
+	var city = document.getElementById('city').value;
+	city = city.trim();
+	city = city.split(' ').join('+'); 
+	var address = city + "+" + document.getElementById('state').value; 
+	var requestUtilityCompanies ="https://developer.nrel.gov/api/census_rate/v3.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&region=block&id=101&address=" + address; 
+	$.getJSON(requestUtilityCompanies, { 
+	},
+	function (data){
+		document.getElementById('utility_companies').innerHTML = "<h3>Local Eletric Utility Companies:</h3>";
+		var i=0;
+		while(data.outputs.utility_info[i]){
+			console.log(data.outputs.utility_info[i].utility_name);
+			document.getElementById('utility_companies').innerHTML += data.outputs.utility_info[i].utility_name + "<br />";
+			i++;
+		}
+	});
+
+	}
+	function show_average_electrcity_tariffs() {  
+	var city = document.getElementById('city').value;
+	city = city.trim();
+	city = city.split(' ').join('+'); 
+	var address = city + "+" + document.getElementById('state').value; 
+	var requestAvgElectTariffs ="https://developer.nrel.gov/api/utility_rates/v3.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&address=" + address; 
+
+	$.getJSON(requestAvgElectTariffs, {
+	},
+	function (data){
+		document.getElementById('average_electricity_tariffs').innerHTML = "<h3>Local Average Electricity Rates:</h3>";
+		document.getElementById('average_electricity_tariffs').innerHTML += "<div><strong> Commercial:</strong> $" + data.outputs.commercial + "<br />" +  "<strong>Industrial:</strong> $" + data.outputs.industrial + " <br/>" +  "<strong>Residential:</strong> $" + data.outputs.residential + "</div>";
+	});
+}
+  
+/*=============================================
+		Solar Irradiance
+=============================================== */
+function pvwatts_irradiance() {                       
+	var city = document.getElementById('city').value;
+	city = city.trim();
+	city = city.split(' ').join('+'); 
+	var address = city + "+" + document.getElementById('state').value; 
+	var size = document.getElementById('size').value;
+	var array_type = parseInt(document.getElementById('array_type').value);
+	var module_type = parseInt(document.getElementById('module_type').value);
+	var tilt = parseInt(document.getElementById('tilt').value);
+	var azimuth = parseInt(document.getElementById('azimuth').value);  
+	var requestUrl="https://developer.nrel.gov/api/pvwatts/v5.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&address=" + address + "&timeframe=monthly&system_capacity=" + size + "&module_type=" + module_type + "&losses=14&array_type=" + array_type + "&tilt=" + tilt + "&azimuth=" + azimuth + "&callback=?";
+	$.getJSON(requestUrl, {},
+	function (data){
+		document.getElementById('pv_watts_annual_production').innerHTML = "Annual Production: " + data.outputs.ac_annual.toFixed(2) + " kWh/year <br>";
+		var radiation = new Array ();
+		radiation = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+		for (i=0; i<12; i++){ 
+			document.getElementById('radiation_' + radiation[i] + '').innerHTML =  data.outputs.ac_monthly[i].toFixed(0);
+			document.getElementById('production_' + radiation[i] + '').innerHTML =  data.outputs.ac_monthly[i].toFixed(0);
+		}
+	});
+}
+
+
+/*=============================================
+		System Production
+=============================================== */
+function pvwatts() {                       
+	var city = document.getElementById('city').value;
+	city = city.trim();
+	city = city.split(' ').join('+'); 
+	var address = city + "+" + document.getElementById('state').value; 
+	var size = document.getElementById('size').value;
+	var array_type = parseInt(document.getElementById('array_type').value);
+	var module_type = parseInt(document.getElementById('module_type').value);
+	var tilt = parseInt(document.getElementById('tilt').value);
+	var azimuth = parseInt(document.getElementById('azimuth').value);  
+	var requestUrl="https://developer.nrel.gov/api/pvwatts/v5.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&address=" + address + "&timeframe=monthly&system_capacity=" + size + "&module_type=" + module_type + "&losses=14&array_type=" + array_type + "&tilt=" + tilt + "&azimuth=" + azimuth + "&callback=?";  
+	$.getJSON(requestUrl, {},
+	function (data){
+		document.getElementById('pv_watts_annual_production').innerHTML = "<br><br><b>Annual System Production:</b> " + data.outputs.ac_annual.toFixed(2) + " kWh/year AC<br>";
+		document.getElementById('pv_watts_annual_production').innerHTML += "<b>Annual Solar Radiation Available:</b> " + data.outputs.solrad_annual.toFixed(3)  * 365 + " kWh/year <br>";
+		var radiation = new Array ();
+		radiation = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+		for (i=0; i<12; i++){ 
+			document.getElementById('radiation_' + radiation[i] + '').innerHTML =  data.outputs.solrad_monthly[i].toFixed(3)*1000;
+			document.getElementById('production_' + radiation[i] + '').innerHTML =  data.outputs.ac_monthly[i].toFixed(0);
+		}
+	});
+}
+
+
+/*=============================================
+		Financial Incentives
+=============================================== */
+function show_incentives() {  
+	var city = document.getElementById('city').value;
+	city = city.trim();
+	city = city.split(' ').join('+'); 
+	var address = city + "+" + document.getElementById('state').value; 
+	var requestDsire = "https://developer.nrel.gov/api/energy-incentives/v1.json?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&address=" + address + "&incentive_types=solar_incentives&callback=?"; 
+	$.getJSON(requestDsire, {},
+	function (data){
+		document.getElementById('list_of_incentives').innerHTML = "<h2>List of Incentives:</h2><br>";
+		var i=0;
+		while(data.outputs.solar_incentives[i]){
+			document.getElementById('list_of_incentives').innerHTML += "<div><strong> Program Name:</strong> " + data.outputs.solar_incentives[i].program_name + "<br />" + "<strong> Description:</strong> " + data.outputs.solar_incentives[i].notes + " <hr/> </div>";
+			i++;
+		}
+		document.getElementById('list_of_incentives').innerHTML += "Read more <a href='" + "http://programs.dsireusa.org/system/program?zipcode=94649&technology=7" + "' target='_blank'> in the DSIRE website </a>";
+	});
+}
+
+
+/*=============================================
+		Installation Cost
+=============================================== */
+function avg_costperwatt(){
+	document.getElementById("openpv_summary_results").innerHTML ="<h4>Please wait ... retrieving data</h4>";
+	size = document.getElementById("openpv_system_size").value;
+	minsize = size * 0.8;
+	maxsize = size * 1.2;
+	county = document.getElementById("openpv_county").value;
+	var requestSystemCost ="https://developer.nrel.gov/api/solar/open_pv/installs/summaries?api_key=zoY9HFdYunwk1YAZ16nVrcmwzqotGDdnJONRA9oQ&county=" + county + "&minsize=" + minsize + "&maxsize=" + maxsize; 
+	$.getJSON(requestSystemCost, {},
+	function (data){
+		var number_of_system_costs = data.result.length;
+		document.getElementById("openpv_summary_results").innerHTML ="<h4>Average Cost per Watt: " + data.result.avg_cost_pw + " $/W</h4>";
+		document.getElementById("openpv_summary_results").innerHTML +="<h4>Best Average Cost per Watt: " + data.result.best_avg_cost_pw + " $/W</h4>";
+	});
+}

+ 176 - 0
system.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>System Production | Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzK93ZAR-RHPNwB-xMLdBQSv-pz1wEOtg&v=3.exp&sensor=false&libraries=places,drawing,geometry"> </script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item">Project Size</a>
+                    <a href="utility.html" class="list-group-item">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item active">System Production</a>
+						  <a href="incentives.html" class="list-group-item">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item">Installation Cost</a>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+  				 <h2>Solar Production (PV Watts)</h2>
+  				 <h4>This tool allows you to estimate a PV system output</h4>
+			  <br><br>
+			  <form class="form-inline">
+			    <div class="form-group">
+			      <label for="city">City</label>
+			      <input type="text" class="form-control" name="city" id="city" value="Greenwood" placeholder="Greenwood">
+			    </div>
+			    <div class="form-group">
+			      <label for="state">State</label>
+			      <input type="text" class="form-control" name="state" id="state" value="SC" placeholder="SC" size="3">
+			    </div>
+				 <br /><br />
+			    <div class="form-group">
+			      <label for="tilt">Tilt</label>
+			      <input type="text" class="form-control" name="tilt" id="tilt" value="40"  size="4">
+			    </div>
+			    <div class="form-group">
+			      <label for="azimuth">Azimuth</label>
+			      <input type="text" class="form-control" name="azimuth" id="azimuth" value="40"  size="4">
+			    </div>
+			    <div class="form-group">
+			      <label for="size">System Size</label>
+			      <input type="text" class="form-control" name="size" id="size" value="50"  size="4">
+			    </div>
+
+			  </form>
+			  <br />
+			  <form class="form-inline">
+					<label for="mount">Mount Type:</label>
+					<select name="array_type" id="array_type" class="form-control" width="200" style="width:180px"> 
+						<option value="0" > Fixed - Open Rack </option>
+						<option value="1" selected> Fixed - Roof Mounted </option>
+						<option value="2" > 1-Axis </option>
+						<option value="3" > 1-Axis Backtracking </option>
+						<option value="4" > 2-Axis </option> 
+					</select>                                 
+					<label for="module"> Module Type:</label>
+					<select name="module_type" id="module_type" class="form-control" width="200" style="width:150px"> 
+						<option value="0" > Standard </option>
+						<option value="1" selected> Premium </option>
+						<option value="2" > Thin Film </option>
+					</select> 
+				    <input type="button" class="btn btn-success" onclick="pvwatts();" value="Run PV Watts">
+				</form>
+				<br><br>
+				<div id="pv_watts_annual_production" class="alert alert-success" role="alert"></div> 
+					<div id="pv_watts_output_table">
+					<table class="table" width="100%" border="1px;" cellpadding="2px;">
+					       <tr>
+					        <td> Month </td>
+					        <td> Jan </td>
+					        <td> Feb </td>
+					        <td> Mar </td>
+					        <td> Apt </td> 
+					        <td> May </td>
+					        <td> Jun </td>
+					        <td> Jul </td>
+					        <td> Aug </td>
+					        <td> Sep </td>
+					        <td> Oct </td>
+					        <td> Nov </td>
+					        <td> Dec </td>
+					       </tr>
+					        <tr>
+					        <td> Radiation <br /> (kWh) </td>
+					        <td> <span id="radiation_jan"></span> </td>
+					        <td> <span id="radiation_feb"></span> </td>
+					        <td> <span id="radiation_mar"></span> </td>
+					        <td> <span id="radiation_apr"></span> </td> 
+					        <td> <span id="radiation_may"></span> </td>
+					        <td> <span id="radiation_jun"></span> </td>
+					        <td> <span id="radiation_jul"></span> </td>
+					        <td> <span id="radiation_aug"></span> </td>
+					        <td> <span id="radiation_sep"></span> </td>
+					        <td> <span id="radiation_oct"></span> </td>
+					        <td> <span id="radiation_nov"></span> </td>
+					        <td> <span id="radiation_dec"></span> </td>
+					       </tr>
+					        <tr>
+					        <td> Production <br /> (AC kWh) </td>
+					        <td> <span id="production_jan"></span> </td>
+					        <td> <span id="production_feb"></span> </td>
+					        <td> <span id="production_mar"></span> </td>
+					        <td> <span id="production_apr"></span> </td> 
+					        <td> <span id="production_may"></span> </td>
+					        <td> <span id="production_jun"></span> </td>
+					        <td> <span id="production_jul"></span> </td>
+					        <td> <span id="production_aug"></span> </td>
+					        <td> <span id="production_sep"></span> </td>
+					        <td> <span id="production_oct"></span> </td>
+					        <td> <span id="production_nov"></span> </td>
+					        <td> <span id="production_dec"></span> </td>
+					       </tr>
+
+					    </table>
+					</div>  
+				 </div>
+				 
+				 
+				 
+				 
+
+            </div>
+        </div>
+    </div>
+
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>

+ 91 - 0
utility.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="">
+	<meta name="author" content="">
+	<title>Utility Rates | Solar</title>
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script src="js/script.js"></script>
+</head>
+
+<body>
+<script>
+
+</script>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#"></a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                    <li><a href="#"></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3">
+                <p class="lead">Solar Tools</p>
+                <div class="list-group">
+                    <a href="index.html" class="list-group-item">Project Size</a>
+                    <a href="utility.html" class="list-group-item active">Utility Rates</a>
+                    <a href="bill.html" class="list-group-item">Bill Fetch</a>
+						  <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
+						  <a href="system.html" class="list-group-item">System Production</a>
+						  <a href="incentives.html" class="list-group-item">Financial Incentives</a>
+						  <a href="costs.html" class="list-group-item">Installation Cost</a>
+                </div>
+            </div>
+
+            <div class="col-md-9">
+					 <h2>Utilty Rates</h2>
+					 <h4>This tool returns the electricity companies and rates in the organization location</h4>
+					  INPUTS: <br> <br>
+					  <form class="form-inline">
+					    <div class="form-group">
+					      <label for="city">City</label>
+					      <input type="text" class="form-control" name="city" id="city" value="Greenwood" placeholder="Greenwood">
+					    </div>
+					    <div class="form-group">
+					      <label for="state">State</label>
+					      <input type="text" class="form-control" name="state" id="state" value="SC" placeholder="SC" size="3">
+					    </div>
+					    <input type="button" class="btn btn-success" onclick="show_utility_companies(); show_average_electrcity_tariffs();" value="Fetch Data">
+					  </form> 
+					  <br><br>                   
+					  <div style="height: 200px;">            
+						  <div id='utility_companies'> </div>
+						  <div id='average_electricity_tariffs'></div>
+					  </div>
+            </div>
+        </div>
+    </div>
+        <hr>
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p></p>
+                </div>
+            </div>
+        </footer>
+
+    </div>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>