Linear (thermometer) style gauges?

Niko I was just wondering, so I now looked at some WDL sites and wanted to try to do something similar with HTML5 and CSS, but what surprised me is that you are here mentioning a linear gauge for T, but looking at WDL, it doesnt use linear gauge for temperature. So do we want to create something that would look as much as possible as WDL or do we want to have something completely new?

For example here:
http://www.weather-display.com/windy/gb/flash/

One can customize WD-L very easily, that is why most of them look different.
But this WD-L is mostly standard. The three “gauges” for Heat index, Windchill and Temp at the right of this display are also called linear gauges, vertical ones this time. As are the monthly and daily rainfall.
http://www.weerstation-wilsele.be/index.php?p=21&wp=MH&lang=en

Wim

Jachym: WDL includes a number of templates, illustrated from page 69 onwards in the manual. Most of those examples use the linear style gauge for temp and it’s an easily selectable (and popular) option, whereas in the SteelSeries wx gauge set that Mark has very kindly provided there is no linear option. So my thinking is that any substitute for WDL needs a linear gauge.

OK, I think I found some scripts which would be usable and I will try to slowly start putting it together. I guess I will have more time over the weekend and I will try to make just the first basic “concept”, which we can then work with.

So I was working on it yesterday night.

So far I have this, but there is still plenty of work to be done. I need to add the fields for displaying the actual values, solar radiation gauge, I want to also make like a “material design” version without the shadows and 3D effects (because that is what I prefer, but I know that lot of you here like the 3D, colors and shadows, so I want to have both). I also want to add icon for current weather conditions (if available) and especially I need to set up the AJAX for regular updates.

Basically this is just the first preview of what it could look like and I still need to add a lot of stuff and I am open to any ideas and comments. But I think it could be used as the basis and now I just need to tweak it.

The thermometers would correspond to temperature and apparent temperature, but that could also be changed to whatever - windchill, dewpoint etc.

The gauges show wind average and gust and the scale is adjusted to match Beaufort

The columns on the right and left is cumulative daily rain and rain rate

The middle one shows wind bearing and the other two on top humidity and pressure

great work so far!

OK,

so some progress made again. I have added fields for showing the actual values in the gauges and most importantly, I finally managed to get the AJAX calls working so the gauges and the value fields are now being updated at regular intervals (currently set to 1s, but can be anything).

I now have important question for you (Brian and Niko):

With regards to my template, I can basically calculate anything since I have access to all the data. But since we wanted this to work with WD as well, could you include what information we want to be included in the gauges apart from the actual values - i.e. what is possible (available in some of the txt files being uploaded to the server) and what you think is relevant.

So for example, right now I have the gauges you see above (I added solar radiation too, which looks like the humidity/pressure gauge, but is styled in yellow). I can of course also do any calculations, so having H and T I can calculate dewpoint and having W also allows me to calculate apparent temperature (I have equations and functions for that in my template, I tried to use relatively complex forumula to get the best results, so I could use that), but I also thought it would be nice if for example it showed “today hi/lo” etc. Again, if I use this in my template, this is not a problem at all, I simply get the data from MySQL, but Im not sure what the files generated and uploaded by WD contain and also, what you think would be worth including - obviously we also dont want to have “everything” and overwhelm the user completely (which is also why I would use some “interactivity” such as showing this upon clicking on the gauge or some button etc., so the user can click stuff and it would show/hide interactively).

And also with graphs, Im not sure how that would work. I can of course include graphs there and also connect them through ajax so they would update or the parameter could be changed - there would only be one “field” for graphs and maybe icons below it and user can switch between various graphs. But Im not sure how this would work with WD. Either it would have to include relatively lot of information in the txt file (to generate the graph) or it would have to provide the images of the graphs already, in which case the ajax call would not use highcharts and just simply load a different image (which is not ideal, since the graph is not interactive - cannot be zoomed, series turned on/off etc, but at least something).

I appreciate any ideas.

Does this help from Kevin’s WD Parser?

WD data files

Doug

Thanks Doug, that certainly does help, but now the question is, what do we want to include and what about the graphs - does WD generate the data for them, or is it only possible by using already made graphs uploaded as images

Sorry, I’ve been busy and will spend more time looking at this later. WDL generates some graphs from the data in the clientraw files, but they have a very limited number of data points and IMHO are of questionable utility, so I don’t have a good answer for your question. Later…

Jachym,

Those files were developed to support WDL and you’ll see that they contain the daily and hourly data that is used to create the graphs. I wonder if Brian would shoot you a copy of WDL so you can see how it is configured and what the capabilities are? Actually I believe you can download it … you don’t care if it says “demo” on the screen.

  • Jim

Thanks. Yes I see it, I dont actually need a copy of WDL, I can see the live demo. The only problem is that the graphs will obviously be quite limited given the number of datapoints available.

The number of parameters included in the file is huge so we will have to filter out the important ones to make it detailed on one hand, but not confusing on the other.

Maybe this can be of some help when studying clientraw files:

XREF (coss reference) of all fields in the 4 clientraw***.txt files:
http://www.weerstation-leuven.be/weather2/index.php?p=93-5&lang=en#

Field by field display of the 4 clientraw files:
http://www.weerstation-leuven.be/weather2/index.php?p=93-6&lang=en

Wim

Thanks Wim,

the WD parser is exhaustive and gives all the information, so now it is more about what we want to include.

So basically I will try to finish the basic version today, this will only have the gauges for humidity, pressure, solar, wind bearing, speed, gust, 2 thermometers and rain and rainrate. I will also make the important javascript and php for the updates.

Then next step will be adding the additional stuff such as daily hi/lo etc. As I said, I want these to be interactive, in other words, user “clicks something” and it shows, we obviously dont want a page where you just see thousands of numbers and dont even know what they mean.

I will try to post some first working demo tonight, where ideally will be the above mentioned gauges and I will try to make the updates working through AJAX and for now just have the php generating the values randomly to check the update works. Getting the data from text file into the PHP is trivial, so this can then be easily changed.

It may be worth to note that many fields unrelated to WDL have been added to the clientraw*.txt files over the years.

IMHO it would be useful to have the daily highs and lows marked gauges.

I think the best would be to take it step by step.

So first step will be just the basic gauges with regular updates and values displayed - I just finished that. I also made it so that the actual gauge can look depending on what the value is. This can be quite useful. For example I already implemented this into one thing, which is that the thermometer is colored red above 5

So, another update:

Today I added the following stuff:

  • fields for actual values
  • gauges show units
  • “records” button - i tried to make this similar to the WDL, so it opens a dialog window with records (again of course, all the numbers are just dummy values, which will be replaced by the fields from clientraw)
  • each gauge can now be clicked and this shows further information about that particular parameter
  • theremometer can be switched between temperature/apparent temperature/dewpoint
  • pressure gauge now also shows trend

Again, this is still just a test and work in progress, I appreciate any suggestions and comments. I havent started working on the graphs yet, that is the next major thing to do.

http://www.meteotemplate.com/templateTest/testing/index2.html

Hi, looks good so far :slight_smile:

When you click an object, i see it opens stats for it at the top, would this be better in a tooltip or popup of some sort?
When you do click another object it does not close the previous stats but adds to them thus moving the gauges down the page

Just thinking out aloud :slight_smile:

Hi,

yes, I was deciding if I will enable opening more stats at once and I decided that it will be better, for example someone might want to view more things at the same time. I could easily set it up so that whenever you click something, it hides all the other stats, but I find this better.

Originally I planned to display the stats on mouse over in a tooltip, but I then chose this option for two reasons:

  1. tooltip is not so good if for example someone wanted to copy the data etc. If it was in a tooltip you would have to have your cursor over it for it to show
  2. most importantly, when using mouseover these days, one must be extremely cautious for a very simple reason - touchscreen devices… the problem is that a touchscreen device can not differentiate between mouseover and click and this sometimes causes problems so I prefer to avoid this