split celestial details into separate page. include fonts in setup.py. split title to separate include.

This commit is contained in:
Matthew Wall
2017-01-29 09:53:47 -05:00
parent 12c2ac12b2
commit c74e15f497
11 changed files with 159 additions and 89 deletions

View File

@@ -546,6 +546,7 @@ if __name__ == "__main__":
('skins/Standard',
['skins/Standard/about.inc',
'skins/Standard/analytics.inc',
'skins/Standard/celestial.html.tmpl',
'skins/Standard/celestial.inc',
'skins/Standard/current.inc',
'skins/Standard/favicon.ico',
@@ -554,18 +555,22 @@ if __name__ == "__main__":
'skins/Standard/radar.inc',
'skins/Standard/rss.xml.tmpl',
'skins/Standard/satellite.inc',
'skins/Standard/skin.conf',
'skins/Standard/sensors.inc',
'skins/Standard/skin.conf',
'skins/Standard/standard.css',
'skins/Standard/standard.js',
'skins/Standard/statistics.html.tmpl',
'skins/Standard/statistics.inc']),
'skins/Standard/statistics.inc',
'skins/Standard/sunmoon.inc',
'skins/Standard/titlebar.inc']),
('skins/Standard/NOAA',
['skins/Standard/NOAA/NOAA-YYYY-MM.txt.tmpl',
'skins/Standard/NOAA/NOAA-YYYY.txt.tmpl']),
('skins/Standard/font',
['skins/Standard/font/NotoSans-Bold.ttf',
'skins/Standard/font/NotoSans-Regular.ttf']),
['skins/Standard/font/OpenSans-Bold.ttf',
'skins/Standard/font/OpenSans-Regular.ttf',
'skins/Standard/font/OpenSans.woff',
'skins/Standard/font/OpenSans.woff2']),
('skins/Mobile',
['skins/Mobile/favicon.ico',
'skins/Mobile/index.html.tmpl',

View File

@@ -0,0 +1,36 @@
## Copyright 2017 Tom Keffer, Matthew Wall
## Distributed under terms of GPLv3. See LICENSE.txt for your rights.
#errorCatcher Echo
#encoding UTF-8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$station.location Celestial Details</title>
<link rel="icon" type="image/png" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="standard.css"/>
<script type="text/javascript" src="standard.js"></script>
<style>
#celestial_widget th {
font-weight: normal;
text-align: right;
}
#celestial_widget .widget_title {
margin-bottom: 25px;
}
</style>
</head>
<body>
#include "titlebar.inc"
<div id="contents">
<p><a href="index.html">&#10096; Current Conditions</a></p>
<div id="widget_group">
#include "celestial.inc"
</div>
</div>
</body>
</html>

View File

@@ -26,75 +26,10 @@
<div id="celestial_widget" class="widget">
<div class="widget_title">
Celestial
#if $almanac.hasExtras
:&nbsp;&nbsp;
<a class="button_selected" id="button_celestial_summary"
onclick="choose_celestial('summary')">Summary</a>
<a class="button" id="button_celestial_details"
onclick="choose_celestial('details')">Details</a>
#end if
<a class="widget_control"
onclick="toggle_widget('celestial')">&diams;</a>
</div>
<div class="widget_contents">
<div id="celestial_summary">
#if $almanac.hasExtras
<div class="celestial_body">
<table class="celestial">
<tr><th>Sun</th></tr>
<tr>
<td class="label">Rise</td>
<td class="data">$almanac.sun.rise.string($sun_None)</td>
</tr>
<tr>
<td class="label">Set</td>
<td class="data">$almanac.sun.set.string($sun_None)</td>
</tr>
<tr>
<td class="label">Daylight</td>
<td class="data">$daylight_str</td>
</tr>
</table>
</div>
<div class="celestial_body">
<table class="celestial">
<tr><th>Moon</th></tr>
<tr>
<td class="label">Rise</td>
<td class="data">$almanac.moon.rise</td>
</tr>
<tr>
<td class="label">Set</td>
<td class="data">$almanac.moon.set</td>
</tr>
<tr>
<td class="label"></td>
<td class="data">$almanac.moon_phase<br/>
$almanac.moon_fullness% full</td>
</tr>
</table>
</div>
#else
## No extended almanac information available. Fall back to a simple table.
<table class="celestial">
<tr>
<td class="label">Sunrise</td>
<td class="data">$almanac.sunrise</td>
</tr>
<tr>
<td class="label">Sunset</td>
<td class="data">$almanac.sunset</td>
</tr>
<tr>
<td class="label">Moon Phase</td>
<td class="data">$almanac.moon_phase<br/>
$almanac.moon_fullness% full</td>
</tr>
</table>
#end if
</div>
#if $almanac.hasExtras
<div id="celestial_details" style="display:none">
<div id="celestial_details">
<div class="celestial_body">
<table class="celestial">
<tr><th>Sun</th></tr>
@@ -221,6 +156,8 @@
</table>
</div>
</div>
#else
<p>Install <em>pyephem</em> for detailed celestial timings.</p>
#end if
</div>
</div>

View File

@@ -15,12 +15,12 @@
<table>
<tbody>
<tr>
<th></th>
<td></td>
<th>Today</th>
<th class="hilo_week">Week</th>
<th class="hilo_month">Month</th>
<th class="hilo_year">Year</th>
<th></th>
<td></td>
</tr>
<tr>
<td class="label">$obs.label.outTemp</td>

View File

@@ -15,13 +15,13 @@
<script type="text/javascript" src="standard.js"></script>
</head>
<body onload="setup(['radar', 'satellite', 'current', 'celestial', 'hilo', 'sensors', 'about']);">
<body onload="setup(['current', 'sunmoon', 'hilo', 'sensors', 'about','radar', 'satellite']);">
#include "titlebar.inc"
<div id="contents">
<div id="widget_group">
#include "current.inc"
#include "celestial.inc"
#include "sunmoon.inc"
#include "hilo.inc"
#include "sensors.inc"
#include "about.inc"

View File

@@ -8,9 +8,9 @@
#def get_battery_status($x)
#if $x == 0
OK
<span class="status_ok">OK</span>
#else
LOW
<span class="status_low">LOW</span>
#end if
#end def

View File

@@ -249,6 +249,9 @@
template = index.html.tmpl
[[[statistics]]]
template = statistics.html.tmpl
[[[celestial]]]
template = celestial.html.tmpl
stale_age = 3600 # generate celestial page only every hour
[[[RSS]]]
template = rss.xml.tmpl

View File

@@ -162,6 +162,14 @@ a:hover {
color: #4444aa;
}
.status_ok {
color: #448844;
}
.status_low {
color: #884444;
}
.button {
cursor: pointer;
padding-left: 10px;
@@ -217,16 +225,16 @@ a:hover {
float: left;
}
#celestial_widget table th {
.widget table th {
font-weight: normal;
text-align: right;
border-bottom: 1px solid #dddddd;
}
#hilo_widget table th {
font-weight: normal;
font-size: 80%;
text-align: right;
border-bottom: none;
}
#hilo_widget .data {
@@ -237,10 +245,7 @@ a:hover {
}
#sensors_widget table th {
font-weight: normal;
text-align: right;
padding-top: 10px;
border-bottom: 1px solid #dddddd;
}
#history_widget img {

View File

@@ -5,8 +5,6 @@ var cookie_prefix = "weewx.standard.";
function setup(widgets) {
var id = get_cookie('history', 'day');
choose_history(id);
id = get_cookie('celestial', 'summary');
choose_celestial(id);
if(widgets) {
for(var i=0; i<widgets.length; i++) {
var state = get_cookie(widgets[i]+'.state', 'expanded');
@@ -20,10 +18,6 @@ function choose_history(id) {
choose_col('hilo', id, ['week', 'month', 'year']);
}
function choose_celestial(id) {
choose_div('celestial', id, ['summary', 'details']);
}
function toggle_widget(id, state) {
var c = document.getElementById(id+'_widget');
if(c) {

View File

@@ -13,8 +13,8 @@
<table>
<tbody>
<tr>
<th></th>
<th></th>
<td></td>
<td></td>
<th>Today</th>
<th class="hilo_week">Week</th>
<th class="hilo_month">Month</th>

View File

@@ -0,0 +1,90 @@
## sun/moon rise/set module for standard skin
## Copyright Tom Keffer, Matthew Wall
## See LICENSE.txt for your rights
## If extended almanac information is available, do extra calculations.
#if $almanac.hasExtras
#set $sun_altitude = $almanac.sun.alt
#if $sun_altitude < 0
#set $sun_None="<i>(Always down)</i>"
#set $daylight_str = "00:00"
#else
#set $sun_None="<i>(Always up)</i>"
#set $daylight_str = "24:00"
#end if
#set $sunrise_ts = $almanac.sun.rise.raw
#set $sunset_ts = $almanac.sun.set.raw
#if $sunrise_ts and $sunset_ts
#set $daylight_s = $sunset_ts - $sunrise_ts
#set $daylight_hours = int($daylight_s / 3600)
#set $daylight_minutes = int(($daylight_s % 3600) / 60)
#set $daylight_str = "%02d:%02d" % ($daylight_hours, $daylight_minutes)
#end if
#end if
<div id="sunmoon_widget" class="widget">
<div class="widget_title">
<a href="celestial.html">Celestial</a>
<a class="widget_control"
onclick="toggle_widget('sunmoon')">&diams;</a>
</div>
<div class="widget_contents">
<div id="celestial_summary">
#if $almanac.hasExtras
<div class="celestial_body">
<table class="celestial">
<tr><th>Sun</th></tr>
<tr>
<td class="label">Rise</td>
<td class="data">$almanac.sun.rise.string($sun_None)</td>
</tr>
<tr>
<td class="label">Set</td>
<td class="data">$almanac.sun.set.string($sun_None)</td>
</tr>
<tr>
<td class="label">Daylight</td>
<td class="data">$daylight_str</td>
</tr>
</table>
</div>
<div class="celestial_body">
<table class="celestial">
<tr><th>Moon</th></tr>
<tr>
<td class="label">Rise</td>
<td class="data">$almanac.moon.rise</td>
</tr>
<tr>
<td class="label">Set</td>
<td class="data">$almanac.moon.set</td>
</tr>
<tr>
<td class="label"></td>
<td class="data">$almanac.moon_phase<br/>
$almanac.moon_fullness% full</td>
</tr>
</table>
</div>
#else
## No extended almanac information available. Fall back to basic info.
<table class="celestial">
<tr>
<td class="label">Sunrise</td>
<td class="data">$almanac.sunrise</td>
</tr>
<tr>
<td class="label">Sunset</td>
<td class="data">$almanac.sunset</td>
</tr>
<tr>
<td class="label">Moon Phase</td>
<td class="data">$almanac.moon_phase<br/>
$almanac.moon_fullness% full</td>
</tr>
</table>
#end if
</div>
</div>
</div>