station.html.tmpl 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head itemscope itemtype="http://schema.org/Website">
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta http-equiv="Refresh" content="180">
  7. <meta name="description" content="$station.location Weather Station ($Extras.cwop) - weather web site powered by WeeWX">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="profile" href="http://gmpg.org/xfn/11" />
  10. #if $Extras.has_key('web_url')
  11. <link rel="canonical" href="$Extras.web_url/station.html" itemprop="url"/>
  12. #end if
  13. <title itemprop="name">$station.location ($Extras.cwop) Station Information</title>
  14. <!-- Open Graph -->
  15. <meta property="og:site_name" content="$station.location ($Extras.cwop) Station Information" />
  16. <meta property="og:title" content="Station Information"/>
  17. #if $Extras.has_key('web_url')
  18. <meta property="og:url" content="$Extras.web_url/station.html"/>
  19. #end if
  20. <meta property="og:description" content="Station Information for $station.location ($Extras.cwop) - weather web site powered by WeeWX" />
  21. <meta property="og:type" content="website" />
  22. <!-- Icons -->
  23. <link rel="icon" href="favicon.ico" type="image/png">
  24. <link rel="apple-touch-icon" href="touch-icon.png"/>
  25. <!-- Styles -->
  26. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  27. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  28. <link rel="stylesheet" href="css/main.css">
  29. <!-- Skripte -->
  30. <script src="js/modernizr-2.6.2.min.js"></script>
  31. <script src="js/checkdiff.js"></script>
  32. </head>
  33. <body>
  34. <header>
  35. <div class="container-fix" >
  36. <div class="h-left" >
  37. <h1><i class="fa fa-cloud" ></i> $station.location </h1>
  38. <p>$station.latitude[0]&deg; $station.latitude[1]' $station.latitude[2] | $station.longitude[0]&deg; $station.longitude[1]' $station.longitude[2] | $station.altitude | <a href="https://www.google.com/maps/?q=$station.location" target="_blank" ><i class="fa fa-map-marker" ></i> Show on map</a></p>
  39. <h2>Station Information</h2>
  40. <p><i class="fa fa-clock-o" ></i> $current.dateTime $current.dateTime.format("%Z")</p>
  41. <p id="freshweather" class="m-orange"></p>
  42. <script type="text/javascript">
  43. window.onload = checkDiff("$current.dateTime ($current.dateTime.format('%Z'))");
  44. </script>
  45. </div>
  46. <div class="h-right" >
  47. <table>
  48. <tr><td><b>Station:</b></td><td>$station.hardware</td></tr>
  49. <tr><td><b>Software:</b></td><td><a href="http://weewx.com/" target="_blank" >WeeWX v$station.version</a></td></tr>
  50. <tr><td><b>Weewx uptime:</b></td><td>$station.uptime</td></tr>
  51. <tr><td><b>Server uptime:</b></td><td>$station.os_uptime</td></tr>
  52. <tr><td><b>Station IDs:</b></td><td><a href="$Extras.cwop_url" target="_blank">$Extras.cwop</a> | <a href="$Extras.crahs_url" target="_blank">$Extras.crahs</a></td></tr>
  53. </table>
  54. </div>
  55. <nav>
  56. <ul class="topnav" id="myTopnav">
  57. <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars" ></i></a></li>
  58. <li><a href="/" >Current</a></li>
  59. <li><a href="week.html" >Week</a></li>
  60. <li><a href="month.html" >Month</a></li>
  61. <li><a href="year.html" >Year</a></li>
  62. <li class="active"><a href="station.html" >Station</a></li>
  63. <li><a href="summary.html" >Summaries</a></li>
  64. <li><a href="RSS/weewx_rss.xml" ><i class="fa fa-rss" ></i> </a></li>
  65. </ul>
  66. </nav>
  67. </div>
  68. </header>
  69. <!-- Main container -->
  70. <div class="main" >
  71. <div class="container" >
  72. <div class="left" >
  73. <div class="card" >
  74. <h1><i class="fa fa-info-circle" ></i> Station Information</h1>
  75. The station is a <a href="http://www.lacrossetechnology.com/2316/">La Crosse WS-2316</a> located about 3 miles north-northwest of
  76. Meridian, Idaho in the Kelly Creek Subdivision. The station has been running since November 7, 2007. A <a href="https://www.raspberrypi.org/" target="_blank" >Raspberry Pi 2 Model B<!-- Raspberry Pi icon by Icons8 --> <img src="https://maxcdn.icons8.com/Color/PNG/24/Logos/raspberry_pi-24.png" title="Raspberry Pi" height="18" width="18"></a> running
  77. <a href="http://weewx.com/" target="_blank" >WeeWX v$station.version</a> processes the data which is sent to <a href="http://www.wxqa.com/" target="_blank" >CWOP</a> and <a href="http://www.wunderground.com/" target="_blank" >Weather Underground</a> in addition
  78. to this web site. Data is sent every 10 minutes.
  79. <br><br>
  80. Latitude: $station.latitude[0]&deg; $station.latitude[1]' $station.latitude[2]
  81. <br>
  82. Longitude: $station.longitude[0]&deg; $station.longitude[1]' $station.longitude[2]
  83. <br>
  84. Elevation: $station.altitude
  85. <br>
  86. <table class="tablespacer">
  87. <tr><td colspan="3"><br>Data is also available from:</td></tr>
  88. <tr><td><center><a href="$Extras.cwop_url" target="_blank"><img src="icons/cwop.png" title="CWOP" alt="cwop" /><br>$Extras.cwop</a></center></td>
  89. #if $Extras.has_key('wunderground')
  90. <td><center><a href="$Extras.wu_url" target="_blank"><img src="icons/wu.png" title="Weather Underground" alt="$Extras.wunderground" /><br>$Extras.wunderground</a></center></td>
  91. #end if
  92. #if $Extras.has_key('mwest')
  93. <td><center><a href="$Extras.mwest_url" target="_blank"><img src="icons/mesowest.png" height="84" width="84" title=Mesowest" alt="$Extras.mwest" /><br>$Extras.mwest</a></center></td>
  94. #end if
  95. #if $Extras.has_key('crahs')
  96. <td><center><a href="$Extras.crahs_url" target="_blank"><img src="icons/CoCoRaHS.png" height="84" width="84" title="CoCoRaHS" alt="CoCoRaHS" /><br>$Extras.crahs</a></center></td>
  97. #end if
  98. </tr>
  99. </table>
  100. </div>
  101. <div class="card" >
  102. <h1><i class="fa fa-code"></i> Site Code</h1>
  103. <p>
  104. This web site uses Sofaskin for WeeWx, designed by Sven at <a href="http://neoground.com/projects/weewx/">Neoground</a>. Sofaskin is a
  105. custom skin model from Google's Material Design that uses <a href="http://getbootstrap.com">Bootstrap</a> to display the weather data.
  106. I made a variety of functional changes to the
  107. original Sofaskin code which is available on GitHub. My Sofaskin-CW9009 skin
  108. needs an additional python script (historygenerator.py) which was adapted from another
  109. skin, <a href="http://www.dajda.net/about.html">Dajda.net</a>, to generate the history tables.
  110. I have also incorporated some changes in this template by <a href="http://www.torkel.se/weather/index.html">Bjorn Torkelsson</a>.
  111. The code for the web page skins and python script is available from the web sites below.
  112. <br><br>
  113. Sofaskin template from Neoground:
  114. <br>
  115. <i class="fa fa-info-circle"> </i><a href="http://neoground.com/projects/weewx/"> http://neoground.com/projects/weewx/</a>
  116. <br><br>
  117. My Sofaskin-CW9009 template:
  118. <br><i class="fa fa-github"> </i> <a href="http://github.com/weatherstorm/Sofaskin-CW9009"> http://github.com/weatherstorm/Sofaskin-CW9009</a>
  119. <br><br>
  120. Dajda template (historygenerator.py):
  121. <br>
  122. <i class="fa fa-info-circle"></i> <a href="http://www.dajda.net/about.html">http://www.dajda.net/about.html</a>
  123. <br>
  124. <i class="fa fa-github"></i> <a href="http://github.com/brewster76/fuzzy-archer">http://github.com/brewster76/fuzzy-archer</a>
  125. <br><br>
  126. Questions? Send them to <a href=mailto:josh@cw9009.x10host.com>josh@cw9009.x10host.com</a>
  127. <br>
  128. </p>
  129. </div>
  130. <div class="card" >
  131. <h1><i class="fa fa-server m-rot"></i> Status</h1>
  132. <table>
  133. <tr><td><b>WeeWX uptime:</b></td><td>$station.uptime</td></tr>
  134. <tr><td><b>Server uptime:</b></td><td>$station.os_uptime</td></tr>
  135. </table>
  136. </div>
  137. </div>
  138. <div class="right" >
  139. <div class="card" >
  140. <h1><i class="fa fa-history m-gruen" ></i> Station History</h1>
  141. <table class="tablespacer">
  142. <tr><td>12/26/2016</td></tr>
  143. <tr><td>Joined CoCoRaHs network as site number ID-AD-36 and will begin reporting Rain and Snowfall. Temporarily place the 8 inch rain gauge in the center of the backyard. I will find a more permanent location in the spring.</td></tr>
  144. </table>
  145. <table class="tablespacer">
  146. <tr><td>01/23/2016</td></tr>
  147. <tr><td>Moved temperature/humidity sensor to the front of the house (north facing) under eaves.</td></tr>
  148. </table>
  149. <table class="tablespacer">
  150. <tr><td><br>12/31/2015</td></tr>
  151. <tr><td>Changed hardware from PC to Raspberry Pi 2 Model B. Changed software from HeavyWeather to WeeWX 3.3.1. </td></tr>
  152. </table>
  153. <table class="tablespacer">
  154. <tr><td><br>09/18/2009</td></tr>
  155. <tr><td>Attached the wind sensor to the west side of the roof. The sensor is about a foot above the roof. Temperatures sensor was attached under the northwest corner eaves.</td></tr>
  156. </table>
  157. <img src="photo/IMG_0925.JPG" alt="photo" class="space small" />
  158. <table class="tablespacer">
  159. <tr><td><br>08/24/2008</td></tr>
  160. <tr><td>Moved station to the southwest corner of the property. Sensors about 5 feet above ground. Wind obstruction from trees and house. Temperature sensor partially shielded. </td></tr>
  161. </table>
  162. <img src="photo/IMG_5374.jpg" alt="photo" class="space small" />
  163. <table class="tablespacer">
  164. <tr><td><br>11/07/2007</td></tr>
  165. <tr><td>Station established in the backyard (south facing) next to the fence.</td></tr>
  166. </table>
  167. <img src="photo/IMG_4957.jpg" alt="photo" class="space small" />
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <footer>
  173. <div class="container-fix">
  174. <center>
  175. #if $Extras.has_key('you')
  176. <i class="fa fa-pied-piper-pp"> </i><a href=mailto:$Extras.email> $Extras.you</a>
  177. #end if
  178. &sdot;
  179. Copyright <i class="fa fa-copyright"></i> $latest.dateTime.format("%Y")
  180. <br>
  181. Design by <a href="http://blauesledersofa.de">blaues Ledersofa</a>
  182. &sdot;
  183. Powered by<i class="fa fa-cog fa-spin fa-fw" aria-hidden="true"></i><a href="http://weewx.com/" target="_blank">WeeWX</a>
  184. &sdot;
  185. Icons from <i class="fa fa-font-awesome" aria-hidden="true"></i><a href="http://fontawesome.io" target="_blank"> Font Awesome</a>
  186. </center>
  187. </div>
  188. </footer>
  189. #if $Extras.has_key('googleAnalyticsId')
  190. <!-- Google Analytics -->
  191. <script>
  192. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  193. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  194. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  195. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  196. ga('create', '$Extras.googleAnalyticsId', 'auto');
  197. ga('send', 'pageview');
  198. </script>
  199. #end if
  200. <!-- Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon -->
  201. <script>
  202. function myFunction() {
  203. var x = document.getElementById("myTopnav");
  204. if (x.className === "topnav") {
  205. x.className += " responsive";
  206. } else {
  207. x.className = "topnav";
  208. }
  209. }
  210. </script>
  211. </body>
  212. </html>