PCE Console display

[gluepack]

Not sure where to post this but as the code I worked with was integrated into a Saratoga template, I'll post here.

Some time ago I was inspired by a Davis console display to create my own for my PCE-FWS 20.
I tried to adapt the code for the Davis console and, although I was able to generate something reasonable, I was stumped by fitting the wind direction arrow to an ellipse (on reflection, as the values are increments of 22.5 degrees, I could have just as easily used hard coded tables, rather than calculating variables) so I abandoned it.
Recently I revisited it and now it doesn't look too bad.
I have managed to separate the code so that it can be run standalone as well as in a Saratoga template.
In doing so, I hit another problem that nearly exhausted me in resolving it where the text in the standalone version was displaced from that when incorporated into the template. I eventually discovered that it was the css line-height: 1.5em on the main-body div in the standard Saratoga code that was causing the problem. I still haven't figured out why but removing it made little difference to any of my web pages and it resolved the problem.
Another problem is that the code I based it on was overly complex for what I needed and I am still in the process of getting rid of superfluous code/scripts. It uses two php scripts, one to handle retrieval of realtime.txt parameters and the other to consolidate them with a few extra parameters from an additional uploaded file. I should really consolidate the two. Also, there are several js scripts and I haven't identified which are now still necessary yet, lol!
A further problem is that although the overlaid text refreshes automatically (every 15 seconds), the additional things (wind arrow, barometer history) don't and I would like to fix that.
There are limitations, as it stands, e.g. it is only for Cumulus output (the Davis one catered for other software too), it is metric only, the barometer is relative, as opposed to absolute, and the pressure graph is fixed at 12 hours. Oh, the tendency image is based on the Zambretti forecast from Cumulus so it may not match that which is shown on the physical console.
I guess it could be adapted to similar consoles with a bit of Photoshop'ng on the base image.

Anyway... it still isn't in a reasonable state to publish but I would welcome comments.

You can see it standalone at...
http://www.jerbils.info/saratoga/pceconsole.php
and embedded into my weather home page at...
http://www.jerbils.info/saratoga/wxindex.php
also, in it's own webpage at...
http://www.jerbils.info/saratoga/wxdisplayPCE.php
although that isn't public yet.


Current version is at: http://www.jerbils.info/pceconsole%20(JD1-3).zip

[steve]

Nicely done!

[mcrossley]

There is nothing like doing something like this to learn lots of stuff, it is coming along nicely.

[gluepack]

Improved a bit...
Merged the two PHP scripts.
Removed more extraneous material.
Introduced tendency up/down arrow, although neither the arrow nor the sun/clouds/etc. images necessarily reflect what is actually on the physical device as they are based on Cumulus interpretation.


You can see it standalone at...
http://www.jerbils.info/saratoga/pceconsole.php
and embedded into my weather home page at...
http://www.jerbils.info/saratoga/wxindex.php
also, in it's own webpage at...
http://www.jerbils.info/saratoga/wxdisplayPCE.php
although that last one isn't public yet.

[gluepack]

I didn't think about it as I haven't really looked at other weather stations too much but the same code could be used for WH1080/81 and WS1080 (the only ones that I have noticed) with some image overlays to change the name(s).

[water01]

Are you making the code etc. available as I would like to have a go modifying it for a WH1081.

[gluepack]

I'll try and package it all up for later today. Meanwhile, with the base image the same (my PCE device) I have done overlays for the WH1080 and the equivalent display from Maplin, Ambient Weather and AstroTouch. I'm not sure how accurate they are as I interpreted them from poor images...

conoverlays1.jpg

[nitrx]

I've this one letters WEATHER STATION on the bottom http://www.alecto.nl/media/catalog/prod ... -front.jpg

[gluepack]

I assume it is an Alecto WS-4000, so I have made an overlay for it but... I am guessing

alecto.JPG

[nitrx]

Yes it's an Alecto WS4000 nice

About you sunicons I've a complete round sun is this different on some consoles?

[gluepack]

In Tendency?
When I set it up, I couldn't find the correct sun (well, without taking a photograph which, in retrospect, I guess I could have done). Some advertisement versions of my console show a massive sun that covers nearly the whole box but that never actually displays on my console. So, being lazy, I just searched for any image that I could use.
It is basically the same size as the original (I had to reduce it a bit because the overlay image, being a rectangle with the same color as the background, without transparency, it would interfere with the word Tendency), it is just that the rays are different.
Some day I may revert back to the original but, as I said, I'm lazy. Apart from that, given that the images will be included in the package, when I zip it up, anyone can change them to whatever they wish.
I hate issuing poor code and there may still be superfluous code there from when I merged the two scripts but I will try to get it uploaded asap.

[gluepack]

OK I have packaged it up. It is a bit sloppy code in as much as, in the merging of two scripts, although I have tidied it up to a certain extent, there is probably superfluous code that could be removed. The php script contains php, java, ajax and html code.

The php script can be run independently or incorporated into, for example, a Saratoga template. However, in incorporating it into a Saratoga template, I was unable to ensure integrity of placement of the overlaying text without removing the css
line-height: 1.5em
statement from the main-body div in the standard Saratoga css file e.g. weather-screen-xxxxxxx-narrow.css.
Be aware that, if you do remove that line, it may affect your website generally, although it had a minimal effect on mine. Of course, if you are smart, you may be able to figure out a different modification.

The zip contains the main php script file (pceconsole.php), a text file template for Cumulus (pcecon24T.txt) and a folder (pcecon) that contains all necessary images, font, java scripts and css file.

1) Unzip the attached zip file to an appropriate location on your system.
2) Move the pcecon24T.txt template file to an appropriate location in relation to your Cumulus folder.
3) Update Cumulus to add the template file and an appropriate output file, e.g. pcecon24.txt, to the external file list.
- Set it to FTP (unless, like me, you use an alternative method to transfer Cumulus output) to your website.
4) Upload the pcecon folder to an appropriate location at your website.
5) Modify the pceconsole.php to reflect your environment...
- from around line 50
--- $imgdir = location/name of the pcecon folder containing jquery, css, images and font files.. with trailing /
--- $dataurl = location/name of Cumulus realtime.txt data file
--- $rawfile = location/name of Cumulus additional data file e.g. pcecon24.txt
- if your console is not a PCE-FWS20, you can specify the overlay of the appropriate text for your model at around line 56
--- $console =
WH = WH1080/1 - Text (top/bottom): radio controlled/blank
AM = Ambient - Text (top/bottom): logo ambient weather/blank
MA = Maplin - Text (top/bottom): radio controlled/Gadget wireless weather forecaster
AS = AstroTouch - Text (top/bottom): AstroTouch/ELecsa
AL = Alecto - Text (top/bottom): radio controlled/WEATHER STATION
(- if you have an alternative display to those listed, you can copy and modify blank top/bottom images, that are in the pcecon folder, using appropriate graphics software, to create your own overlays, set an alternative console code here and add the appropriate testing code at around lines 185-190.)
6) Upload the pceconsole.php to an appropriate location at your website.

NOTES:
It is only for Cumulus output.
The base image is for a silver console version.
The console image is 750x480 and is on a white background (visible where the console is curved).
The text overlays may not exactly match those on your physical console.
Some indicators displayed, e.g. memory, are fixed.
It is for metric data only.
The barometer reading is relative.
The pressure graph is fixed at 12 hours and may not exactly match what is shown on your physical console.
The tendency sun icon is not accurate.
The tendency image displayed depends on the Zambretti forecast from Cumulus so may not match that which is shown on your physical console.
The tendency up/down arrows are based on data from Cumulus and may not reflect that which is shown on your physical console.
The wind direction arrow shape is calculated from a base image and is not identical to that on your physical console.


You can see it standalone at...
http://www.jerbils.info/saratoga/pceconsole.php
and embedded into my weather home page at...
http://www.jerbils.info/saratoga/wxindex.php
also, in it's own webpage at...
http://www.jerbils.info/saratoga/wxdisplayPCE.php
although that isn't public yet.

Update: I have a version of the console that has a transparent surround so that it can be placed on other than a white background. I will add it to future versions, in place of the current image but, if you want a copy now, let me know.

[water01]

Thanks for that.

Mine is live here. http://www.dmjsystems.co.uk/weather/gspceconsole.php

Do you want any credits?

[gluepack]

I see that you attempted to make the surround transparent. I have tried several different methods using PaintShop Pro X8 but, so far, although I can make excellent transparency, I can't retain a good looking smooth edge for the console. Actually, I can but, in doing so, it reduces the image size slightly and then (even when I increase it back to 750x480) that small difference affects the wind arrow placement. I'll see if other software that I have can improve it or look at a mod to the arrow.
I notice that your rainfall is in inches. The effect is that, apart from the base image being hard coded to display as mm, there are two decimal places instead of 1 so you may want to change the span at line 222 to right: 218px; to avoid it colliding.
Also your wind speed is mph and pressure is mb.
I guess I could check the realtime.txt file to see what your settings are and do overlays of mb, mph and in, depending on those settings.

This is the credits that I have on my website (adapted from the credits in the original code that I based mine on) but it is up to you...

Code: Select all

<div style="width:700px; margin: 0 auto; text-align:left;font-size:10px;">
	Based on script by <a rel="external" href="http://www.axelvold.net">Axelvold's weather & Photo</a> and
	<a rel="external" href="http://www.stenestad-vader.com/">Stenestads Vader</a>. Modification by
	<a rel="external" href="http://www.nordicweather.net/">Weatherstation Pertteli</a> and
	<a rel="external" href="http://www.lokaltvader.se/">Saro/Budskars Vader</a>, Graphics, icons and code revised by
	<a rel="external" href="http://silveracorn.co.nz/weather/">SilverAcorn Weather</a> and
	<a rel="external" href="http://jerbils.info/saratoga/wxindex.php">Jerbils Weather</a>.
	</div>

[mcrossley]

If you want proper transparency (anti-aliased) you need to save the file in PNG format rather than GIF. GIF only supports on/off transparency per pixel, PNG does 255 levels of transparency.