matthewwall / weewx-forecast

forecasting extension for weewx
GNU General Public License v3.0
4 stars 18 forks source link

Icons in Seasons for forecast single strip vertical are hughe #9

Open SylvainGa opened 4 years ago

SylvainGa commented 4 years ago

Hi, installed the forecast plugin yesterday. I added the strip view to the Seasons skin. In its horizontal orientation, it works very well (https://i.imgur.com/HR5jX81.png). However, when installed vertically, the icons take about half the web page (https://i.imgur.com/fFnbG6q.png).

Hitting http://x.x.x.x/weewx/forecast/single-strip-vertical.html displays the icons correctly (https://i.imgur.com/sluJhF6.png)

Anybody knows how to fix this? All my attempts prove unsuccessful :-(

Here's the relevant (I think) info from my latest attempt.

Platform Linux-4.19.118-v7+-armv7l-with-debian-10.4 running on a Raspberry 3 Python 2.7.16 (default, Oct 10 2019, 22:02:15) #012[GCC 8.3.0] weewx version 4.1.1 forecast version 3.4.0b1

Relevant lines added in weewx.conf

[Forecast]
    data_binding = forecast_binding
    [[OWM]]
        api_key = ...

[StdReport]
    [[SeasonsReport]]
        # Forecast added to Seasons
        [[[CheetahGenerator]]]
            search_list_extensions = user.forecast.ForecastVariables
        [[[CopyGenerator]]]
            copy_once = seasons.css, seasons.js, favicon.ico, font/*.woff, font/*.woff2, forecast_strip.css, icons/*

Relevant lines added in the [Extras] of Seasons/skin.conf

    [[forecast_strip_settings]]
        source = OWM
        num_periods = 40
        show_temp = 1
        show_temp_min = 1
        show_temp_max = 1
        show_dewpoint = 0
        show_humidity = 0
        show_wind = 1
        show_clouds = 1
        show_pop = 1
        show_snow = 1
        show_precip = 1
        show_sun = 0
        show_moon = 0
        show_moonphase = 0
        show_tides = 0

Relevant lines added to Seasons/index.html.tmpl

    <div id="contents">
      <div id="widget_group">
        #include "current.inc"
        #include "sunmoon.inc"
        #include "hilo.inc"
        #include "sensors.inc"
        #include "radar.inc"
        #include "satellite.inc"
        #include "map.inc"
        #include "forecast.inc"
        #include "about.inc"
      </div>

New Seasons/forecast.inc script:

## forecast module for weewx skins
## Copyright Tom Keffer, Matthew Wall
## See LICENSE.txt for your rights
#errorCatcher Echo

<link rel='stylesheet' type='text/css' href='forecast.css'/>
<link rel='stylesheet' type='text/css' href='forecast_strip.css'/>

<div id='forecast_widget' class="widget">
  <div class="widget_title">
    Forecast
    <a class="widget_control"
      onclick="toggle_widget('forecast')">&diams;</a>
  </div>
  <div class="widget_contents" id='forecast_strip'>
    #set global $forecast_strip_settings = dict()
    #set global $forecast_strip_settings['orientation'] = 'vertical'

    #include "forecast_strip.inc"
    <script>
      populate_strip('forecast_strip', 'OWM');
    </script>
  </div>
</div>

File forecast_strip.inc, forecast_strip.css and forecast.css are left intact and copied to Seasons from forecast as well as the icons

Thanks.

SylvainGa commented 4 years ago

Looking at it through Chrome's inspector, it looks like the images do not take the style they were given in the td class statement as can be seen here https://i.imgur.com/t1HRk8c.png

The 'width' property is taken from the seasons widget and NOT from the forecast_strip clouds class definition. When hard coded into the td img statement (as in class="clouds"), it works if I also remove 'img' from the class definition for clouds (as in '.fc_strip .clouds' instead of '.fc_strip .clouds img'). Looks like it has trouble inheriting them from the column's definition. The definition is inherited correctly when set to horizontal (gets its definition from the row, not the column). It's just the vertical orientation that's not working.

SylvainGa commented 4 years ago

So I took the easy way out, I commented out '.widget img' from seasons.css.

Beside the radar image being too big, it doesn't seem to produce any side effect in my installation. I fixed the radar image being too big by adding 'width="450"' in radar.inc '<img src...' line

So, I'm "happy" (spent way too much time trying to figure this out) with this fix but still wondering why the columns' classes are not being inherited by the corresponding row data columns.