How to change the position of a plot on the page?

[PJD]

Apologies if there is an answer already in the docs or here - have had no joy in my search so far.

I'd like to re-order the day plots that appear in the Standard skin, moving the barometer graph down the page.  I think the answer is in the Standard skin.conf but I'm not sure and would appreciate any tips on exactly where I need to edit.

The page I'm trying to edit is here and I'd like to move Barometer down from "pole position".

Thanks.

[gjr80]

Hi,

Your link is to the Seasons skin not the Standard skin, no matter the solution is virtually the same. The [ImageGenerator] stanza of skin.conf determines the order in which the plot files are generated by WeeWX, not the order or placement on the web page. For that you need to look in the index.html template file index.html.tmpl. Make a backup copy of index.html.tmpl just in case and then open index.html.tmpl in your editor and locate the following (its starts about line 46):

          <div id="history_day" class="plot_container">
            <img src="daybarometer.png" alt="$obs.label.barometer"/>
            <img src="daytempdew.png"   alt="$obs.label.outTemp" />
            <img src="daytempfeel.png"  alt="$obs.label.feel" />
            <img src="dayhum.png"       alt="$obs.label.outHumidity" />
            <img src="daywind.png"      alt="$obs.label.windSpeed" />
            <img src="daywinddir.png"   alt="$obs.label.windDir" />
            <img src="daywindvec.png"   alt="$obs.label.windvec" />
            <img src="dayrain.png"      alt="$obs.label.rain" />
            #if $day.UV.has_data
            <img src="dayuv.png"        alt="$obs.label.UV" />
            #end if
            #if $day.radiation.has_data
            <img src="dayradiation.png" alt="$obs.label.radiation" />
            #end if
            #if $day.inTemp.has_data
            <img src="daytempin.png"    alt="$obs.label.inTemp" />
            #end if
            #if $day.extraTemp1.has_data or $day.extraTemp2.has_data or $day.extraTemp3.has_data
            <img src="daytemp.png"      alt="$obs.label.extraTemp1" />
            #end if
            #if $day.rxCheckPercent.has_data
            <img src="dayrx.png"        alt="$obs.label.rxCheckPercent"/>
            #end if
          </div>
          <div id="history_week" class="plot_container" style="display:none">
            <img src="weekbarometer.png" alt="$obs.label.barometer"/>
            <img src="weektempdew.png"   alt="$obs.label.outTemp" />
            <img src="weektempfeel.png"  alt="$obs.label.feel" />
            <img src="weekhum.png"       alt="$obs.label.outHumidity" />
            <img src="weekwind.png"      alt="$obs.label.windSpeed" />
            <img src="weekwinddir.png"   alt="$obs.label.windDir" />
            <img src="weekwindvec.png"   alt="$obs.label.windvec" />
            <img src="weekrain.png"      alt="$obs.label.rain" />
            #if $week.UV.has_data
            <img src="weekuv.png"        alt="$obs.label.UV" />
            #end if
            #if $week.radiation.has_data
            <img src="weekradiation.png" alt="$obs.label.radiation" />
            #end if
            #if $week.inTemp.has_data
            <img src="weektempin.png"    alt="$obs.label.inTemp" />
            #end if
            #if $week.extraTemp1.has_data or $week.extraTemp2.has_data or $week.extraTemp3.has_data
            <img src="weektemp.png"      alt="$obs.label.extraTemp1" />
            #end if
            #if $week.rxCheckPercent.has_data
            <img src="weekrx.png"        alt="$obs.label.rxCheckPercent"/>
            #end if
          </div>
          <div id="history_month" class="plot_container" style="display:none">
            <img src="monthbarometer.png" alt="$obs.label.barometer"/>
            <img src="monthtempdew.png"   alt="$obs.label.outTemp" />
            <img src="monthtempfeel.png"  alt="$obs.label.feel" />
            <img src="monthhum.png"       alt="$obs.label.outHumidity" />
            <img src="monthwind.png"      alt="$obs.label.windSpeed" />
            <img src="monthwinddir.png"   alt="$obs.label.windDir" />
            <img src="monthwindvec.png"   alt="$obs.label.windvec" />
            <img src="monthrain.png"      alt="$obs.label.rain" />
            #if $month.UV.has_data
            <img src="monthuv.png"        alt="$obs.label.UV" />
            #end if
            #if $month.radiation.has_data
            <img src="monthradiation.png" alt="$obs.label.radiation" />
            #end if
            #if $month.inTemp.has_data
            <img src="monthtempin.png"    alt="$obs.label.inTemp" />
            #end if
            #if $month.extraTemp1.has_data or $month.extraTemp2.has_data or $month.extraTemp3.has_data
            <img src="monthtemp.png"      alt="$obs.label.extraTemp1" />
            #end if
            #if $month.rxCheckPercent.has_data
            <img src="monthrx.png"        alt="$obs.label.rxCheckPercent"/>
            #end if
          </div>
          <div id="history_year" class="plot_container" style="display:none">
            <img src="yearbarometer.png" alt="$obs.label.barometer"/>
            <img src="yeartempdew.png"   alt="$obs.label.outTemp" />
            <img src="yeartempfeel.png"  alt="$obs.label.feel" />
            <img src="yearhum.png"       alt="$obs.label.outHumidity" />
            <img src="yearwind.png"      alt="$obs.label.windSpeed" />
            <img src="yearwinddir.png"   alt="$obs.label.windDir" />
            <img src="yearwindvec.png"   alt="$obs.label.windvec" />
            <img src="yearrain.png"      alt="$obs.label.rain" />
            #if $year.UV.has_data
            <img src="yearuv.png"        alt="$obs.label.UV" />
            #end if
            #if $year.radiation.has_data
            <img src="yearradiation.png" alt="$obs.label.radiation" />
            #end if
            #if $year.inTemp.has_data
            <img src="yeartempin.png"    alt="$obs.label.inTemp" />
            #end if
            #if $year.extraTemp1.has_data or $year.extraTemp2.has_data or $year.extraTemp3.has_data
            <img src="yeartemp.png"      alt="$obs.label.extraTemp1" />
            #end if
            #if $year.rxCheckPercent.has_data
            <img src="yearrx.png"        alt="$obs.label.rxCheckPercent"/>
            #end if
          </div>

The first div tag with id=history_day handles the day plots and the img tags under that div determine the order of the plots on the day history page. Feel free to re-order to suit, be careful with the UV and radiation img tags, you need to make sure you include the surrounding #if/#end if lines as well. Likewise for the history_week div tag for week plots, history_month for month plots etc 

Once you are finished just save index.html.tmpl and the once the next report cycle completes your changes should appear. If you mess it up just revert back to your backup copy and try again.

Gary

[PJD]

Thanks for such a clear and comprehensive answer Gary.  I'd estimate you have saved my about a week of trial and error - mainly error.  Really appreciate it!

Peter