Current wind graphic?

153 views
Skip to first unread message

RobbH

unread,
Mar 23, 2018, 2:44:49 PM3/23/18
to weewx-user
Is it possible, using the standard image generator, to create an image of the maximum and average wind vector, only for the most recent archive period?

I assume not, as the docs are very clear that there is no current.windvec tag. Still, I have some hope that Those Who Know A Lot More Than I Do might have an alternate way of achieving the results.

What I'm looking for is a graphic display of current wind, as discussed in this very old thread: https://groups.google.com/d/topic/weewx-user/vwX11T8pBlM/discussion . Tom provided a good way to display current wind direction on a compass rose, but I thought a vector display would be cooler.

RobbH

unread,
Mar 30, 2018, 4:54:30 PM3/30/18
to weewx-user
Still pursuing this, and I have learned how to generate the sort of image I want, but not within Weewx. Is it possible call an external program (shell script) during each report cycle?

vince

unread,
Mar 30, 2018, 6:51:49 PM3/30/18
to weewx-user
On Friday, March 30, 2018 at 1:54:30 PM UTC-7, RobbH wrote:
Still pursuing this, and I have learned how to generate the sort of image I want, but not within Weewx. Is it possible call an external program (shell script) during each report cycle?


It is possible to do darn near anything if you write an extension to do so.....assuming the account weewx runs as has privileges to do so.
 

RobbH

unread,
Mar 30, 2018, 8:27:41 PM3/30/18
to weewx-user
Maybe, at long last, I'm going to have to buckle down and learn enough of Python to do this!

RobbH

unread,
Mar 31, 2018, 8:16:36 PM3/31/18
to weewx-user
On the other hand, it may be possible to do all I need with javascript, and I'll probably try that first.

A crude version, without making the wind directional pointer proportional to wind speed, can be done with svg graphics and no outside help. I've posted that to the old thread that I linked in the first post.

Alec Bennett

unread,
Apr 1, 2018, 10:32:53 PM4/1/18
to weewx-user
> On the other hand, it may be possible to do all I need with javascript, and I'll probably try that first.

If you want to use javascript, you might be interested in this project of mine:


Personally I think javascript is a good method for current wind conditions, since it makes it easy to update a graphic continually. This live demo should update every 2 seconds or so (every time the wind indicator turns green is an update):


I should really update that though, since it's very small on my screen. A CSS issue. Or here (css optimized for mobile):


Note that this requires enabling the RTC ("real time gauge") extension in weewx. And fyi the effect is achieved by rotating the circle to the current wind direction. 

RobbH

unread,
Apr 2, 2018, 8:21:51 PM4/2/18
to weewx-user
Very nice! That's not exactly what I'm attempting right now, but I'll keep in mind for the future.

I hope you'll add it to the weewx wiki, so it'll be easy to find in the future.

I didn't find the realtime gauge data extension in the wiki, either, but found it here:

RobbH

unread,
Apr 5, 2018, 3:36:42 PM4/5/18
to weewx-user
I finally came to the realization that everything I wanted to do could be done with the Cheetah engine, and even learned a tiny bit of Python in the process. The following code, added to index,html.tmpl (or some other template) generates a crude compass rose with up to two directional vanes, one (in red) for gust direction and one (in blue) for wind direction. The length of the vanes is proportional to the corresponding speed value, on a logarithmic scale.

#import math
       <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
       <!-- draw outer ring, then 10-degree tickmarks, 2 gray inner circles and 3 scale labels (1, 10, 100)  -->
        <circle cx="90" cy="85" r="75" stroke="black" stroke-width="5" stroke-dasharray="1,12.08" fill="transparent" />
        <circle cx="90" cy="85" r="80" stroke="lightgray" stroke-width="10" fill="transparent" />
        <circle cx="90" cy="85" r="38" stroke="lightgray" fill="transparent" />
        <circle cx="90" cy="85" r="56" stroke="lightgray" fill="transparent" />
        <text x="120" y="26" font-size="8" text-anchor="middle" fill="gray">100</text>
        <text x="112" y="42" font-size="8" text-anchor="middle" fill="gray">10</text>
        <text x="103" y="58" font-size="8" text-anchor="middle" fill="gray">1</text>
       <!-- draw compass rose background (2 polygons) then 4 directional letters and innermost circle  -->
        <polygon points="90 35, 100 75, 140 85, 100 95, 90 135, 80 95, 40 85, 80 75" fill="lightgray" transform="rotate(45 90 85)" />
        <polygon points="90 25, 100 75, 150 85, 100 95, 90 145, 80 95, 30 85, 80 75" fill="lightgray" />
        <text x="90" y="22" font-size="16" text-anchor="middle" fill="gray">N</text>
        <text x="90" y="159" font-size="16" text-anchor="middle" fill="gray">S</text>
        <text x="22" y="91" font-size="16" text-anchor="middle" fill="gray">W</text>
        <text x="158" y="91" font-size="16" text-anchor="middle" fill="gray">E</text>
        <circle cx="90" cy="85" r="20" stroke="black" fill="white" />
       <!-- put current values for gust and wind speed in inner circle, then calculate and draw vanes if direction given and speed > 0   -->
        <text x="90" y="83" font-size="12" text-anchor="middle" fill="orangered">$current.windGust.formatted</text>
        <text x="90" y="97" font-size="12" text-anchor="middle" fill="dodgerblue">$current.windSpeed.formatted</text>
       #if $current.windGustDir.formatted != "   N/A" and float($current.windGust.formatted) > 0
       #set $wg = 65 - 18 * (1 + math.log(float($current.windGust.formatted), 10))
        <polygon points="90 $wg, 100 65, 80 65" fill="orangered" transform="rotate($current.windGustDir.formatted 90 85)" />
       #end if
        #if $current.windDir.formatted != "   N/A" and float($current.windSpeed.formatted) > 0
       #set $ws = 65 - 18 * (1 + math.log(float($current.windSpeed.formatted), 10))
        <polygon points="90 $ws, 95 65, 85 65" fill="dodgerblue" transform="rotate($current.windDir.formatted 90 85)" />
       #end if
       </svg>


This is set up to work with speeds measured in miles per hour. Some modification would be needed to make it work with other units. I hope someone will find it useful. Improvements welcome.

Alec Bennett

unread,
Apr 5, 2018, 3:45:58 PM4/5/18
to weewx...@googlegroups.com
Possible to see the generated output of that somewhere?

--
You received this message because you are subscribed to a topic in the Google Groups "weewx-user" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/weewx-user/FAaVIAv-Hfs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to weewx-user+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

RobbH

unread,
Apr 5, 2018, 5:25:01 PM4/5/18
to weewx-user
It's available (temporarily) here:

To unsubscribe from this group and all its topics, send an email to weewx-user+...@googlegroups.com.

Glenn McKechnie

unread,
Apr 5, 2018, 7:15:40 PM4/5/18
to weewx...@googlegroups.com
Interesting, Nice and simple too.

Just dropped the code into the main index template here and it works well.

I'm using Metric and kph ( km/h ) here and I don't see anything
unusual in its scaling.


http://203.213.243.61/weewx/

In fact, it's probably a keeper. Just need to find a more suitable
spot to place it.



Cheers
Glenn

rorpi - read only raspberry pi & various weewx addons
https://github.com/glennmckechnie
> You received this message because you are subscribed to the Google Groups
> "weewx-user" group.
> To unsubscribe from this group and stop receiving emails from it, send an

RobbH

unread,
Apr 5, 2018, 7:15:50 PM4/5/18
to weewx-user
For future reference, if the graphic linked in the previous post is no longer available, just save the svg code (everything but the '#import math' line) to a file, rose.svg. Open it in a text editor, then replace the two lines of text declaration and the two "if" blocks, all following the final comment, with this code:

  <text x="90" y="83" font-size="12" text-anchor="middle" fill="red">10</text>
  <text x="90" y="97" font-size="12" text-anchor="middle" fill="dodgerblue">5</text>
  <polygon points="90 29, 100 65, 80 65" fill="red" transform="rotate(315 90 85)" />
  <polygon points="90 34.4, 95 65, 85 65" fill="dodgerblue" transform="rotate(200 90 85)" />

Thomas Keffer

unread,
Apr 5, 2018, 7:25:13 PM4/5/18
to weewx-user
Very clever!

-tk

On Thu, Apr 5, 2018 at 12:36 PM, RobbH <holm...@gmail.com> wrote:

--
You received this message because you are subscribed to the Google Groups "weewx-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+unsubscribe@googlegroups.com.

RobbH

unread,
Apr 5, 2018, 8:45:32 PM4/5/18
to weewx-user
Thanks, Tom! You made my day.

About other measurement units, the log scale in the graphic works with values from 1 to 100, and possibly a bit beyond. I think that might work reasonably well for knots and km per hour, but probably not for meters per second.
Very clever!

-tk

To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+...@googlegroups.com.

Glenn McKechnie

unread,
Apr 6, 2018, 4:42:40 AM4/6/18
to weewx...@googlegroups.com
For any one else who wants to tweak the colours to match their weewx skin.conf of choice.
It's worth noting the hint that's in the [ImageGenerator] section of the Standard skin.conf file
 
 # Colors can be specified any of three ways:
    #   1. Notation 0xBBGGRR;
    #   2. Notation #RRGGBB; or
    #   3. Using an English name, such as 'yellow', or 'blue'.
    # So, 0xff0000, #0000ff, or 'blue' would all specify a pure blue color.

The existing skin colors are probably in the first format.
To use those values in the svg windrose they needs to be changed to the 2nd format.

Note the BGR -- RGB reversal and you'll be less likely to be surprised by the weird results ;-)



Cheers
 Glenn

rorpi - read only raspberry pi & various weewx addons
https://github.com/glennmckechnie

RobbH

unread,
Apr 6, 2018, 2:52:10 PM4/6/18
to weewx-user
Thanks for the tips on color, Glenn. (Thanks also for providing a live example of how this looks.)

I hope someone can come up with a more attractive color combination that provides enough contrast between wind and gusts, without clashing. Colors are not my forte. Just ask my wife.

The other thing I'm less than happy with is the fatness of that gust pointer. It needs to be significantly larger than the wind pointer, so it's visible when they're pointing in the same direction. But it's really ugly.

At present, I'm trying this as a substitute for the gust pointer definition:

<polygon points="90 $wg, 95 50, 96 65, 84 65, 85 50" fill="orangered" transform="rotate($current.windGustDir.formatted 90 85)" />

I think it's a slight improvement.
Reply all
Reply to author
Forward
0 new messages