system.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <title>System Production | Solar</title>
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  11. <link href="css/style.css" rel="stylesheet">
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  13. <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  14. <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>
  15. <script src="js/script.js"></script>
  16. </head>
  17. <body>
  18. <script>
  19. </script>
  20. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  21. <div class="container">
  22. <div class="navbar-header">
  23. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  24. <span class="sr-only">Toggle</span>
  25. <span class="icon-bar"></span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. </button>
  29. <a class="navbar-brand" href="#"></a>
  30. </div>
  31. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  32. <ul class="nav navbar-nav">
  33. <li><a href="#"></a></li>
  34. <li><a href="#"></a></li>
  35. <li><a href="#"></a></li>
  36. </ul>
  37. </div>
  38. </div>
  39. </nav>
  40. <div class="container">
  41. <div class="row">
  42. <div class="col-md-3">
  43. <p class="lead">Solar Tools</p>
  44. <div class="list-group">
  45. <a href="index.html" class="list-group-item">Project Size</a>
  46. <a href="utility.html" class="list-group-item">Utility Rates</a>
  47. <a href="bill.html" class="list-group-item">Bill Fetch</a>
  48. <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
  49. <a href="system.html" class="list-group-item active">System Production</a>
  50. <a href="incentives.html" class="list-group-item">Financial Incentives</a>
  51. <a href="costs.html" class="list-group-item">Installation Cost</a>
  52. </div>
  53. </div>
  54. <div class="col-md-9">
  55. <h2>Solar Production (PV Watts)</h2>
  56. <h4>This tool allows you to estimate a PV system output</h4>
  57. <br><br>
  58. <form class="form-inline">
  59. <div class="form-group">
  60. <label for="city">City</label>
  61. <input type="text" class="form-control" name="city" id="city" value="Greenwood" placeholder="Greenwood">
  62. </div>
  63. <div class="form-group">
  64. <label for="state">State</label>
  65. <input type="text" class="form-control" name="state" id="state" value="SC" placeholder="SC" size="3">
  66. </div>
  67. <br /><br />
  68. <div class="form-group">
  69. <label for="tilt">Tilt</label>
  70. <input type="text" class="form-control" name="tilt" id="tilt" value="40" size="4">
  71. </div>
  72. <div class="form-group">
  73. <label for="azimuth">Azimuth</label>
  74. <input type="text" class="form-control" name="azimuth" id="azimuth" value="40" size="4">
  75. </div>
  76. <div class="form-group">
  77. <label for="size">System Size</label>
  78. <input type="text" class="form-control" name="size" id="size" value="50" size="4">
  79. </div>
  80. </form>
  81. <br />
  82. <form class="form-inline">
  83. <label for="mount">Mount Type:</label>
  84. <select name="array_type" id="array_type" class="form-control" width="200" style="width:180px">
  85. <option value="0" > Fixed - Open Rack </option>
  86. <option value="1" selected> Fixed - Roof Mounted </option>
  87. <option value="2" > 1-Axis </option>
  88. <option value="3" > 1-Axis Backtracking </option>
  89. <option value="4" > 2-Axis </option>
  90. </select>
  91. <label for="module"> Module Type:</label>
  92. <select name="module_type" id="module_type" class="form-control" width="200" style="width:150px">
  93. <option value="0" > Standard </option>
  94. <option value="1" selected> Premium </option>
  95. <option value="2" > Thin Film </option>
  96. </select>
  97. <input type="button" class="btn btn-success" onclick="pvwatts();" value="Run PV Watts">
  98. </form>
  99. <br><br>
  100. <div id="pv_watts_annual_production" class="alert alert-success" role="alert"></div>
  101. <div id="pv_watts_output_table">
  102. <table class="table" width="100%" border="1px;" cellpadding="2px;">
  103. <tr>
  104. <td> Month </td>
  105. <td> Jan </td>
  106. <td> Feb </td>
  107. <td> Mar </td>
  108. <td> Apt </td>
  109. <td> May </td>
  110. <td> Jun </td>
  111. <td> Jul </td>
  112. <td> Aug </td>
  113. <td> Sep </td>
  114. <td> Oct </td>
  115. <td> Nov </td>
  116. <td> Dec </td>
  117. </tr>
  118. <tr>
  119. <td> Radiation <br /> (kWh) </td>
  120. <td> <span id="radiation_jan"></span> </td>
  121. <td> <span id="radiation_feb"></span> </td>
  122. <td> <span id="radiation_mar"></span> </td>
  123. <td> <span id="radiation_apr"></span> </td>
  124. <td> <span id="radiation_may"></span> </td>
  125. <td> <span id="radiation_jun"></span> </td>
  126. <td> <span id="radiation_jul"></span> </td>
  127. <td> <span id="radiation_aug"></span> </td>
  128. <td> <span id="radiation_sep"></span> </td>
  129. <td> <span id="radiation_oct"></span> </td>
  130. <td> <span id="radiation_nov"></span> </td>
  131. <td> <span id="radiation_dec"></span> </td>
  132. </tr>
  133. <tr>
  134. <td> Production <br /> (AC kWh) </td>
  135. <td> <span id="production_jan"></span> </td>
  136. <td> <span id="production_feb"></span> </td>
  137. <td> <span id="production_mar"></span> </td>
  138. <td> <span id="production_apr"></span> </td>
  139. <td> <span id="production_may"></span> </td>
  140. <td> <span id="production_jun"></span> </td>
  141. <td> <span id="production_jul"></span> </td>
  142. <td> <span id="production_aug"></span> </td>
  143. <td> <span id="production_sep"></span> </td>
  144. <td> <span id="production_oct"></span> </td>
  145. <td> <span id="production_nov"></span> </td>
  146. <td> <span id="production_dec"></span> </td>
  147. </tr>
  148. </table>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <footer>
  155. <div class="row">
  156. <div class="col-lg-12">
  157. <p></p>
  158. </div>
  159. </div>
  160. </footer>
  161. </div>
  162. <script src="js/bootstrap.min.js"></script>
  163. </body>
  164. </html>