cloudy cloudy

Author Topic: Creating Custom Screen For WxSim Forecast Graphic  (Read 16883 times)

0 Members and 1 Guest are viewing this topic.

Offline TokKiwi

  • Techno Dad
  • Posts: 4,312
  • Mech Engineer and Hobbyist
  • Tokoroa, Sth Waikato, New Zealand
    • Tokoroa North Weather
Creating Custom Screen For WxSim Forecast Graphic
« on: January 20, 2008, 11:16:35 AM »
[Edited on January 10th 2009]
Here is the How-To for a custom screen of the Forecast Graphic. You may want to print this out. (You can print it by Selecting the whole post and Copying and Pasting into Word and printing from there.  You may want to narrow the margins.)I am assuming you already have the latest.bmp graphic file being created.  Then if you go to [View] and click on the artist head icon for Custom Screens.

To Start a Custom Screen image

Note - if you have already tried to create something in the past at the screen number chosen, (make sure it is not a current active one!!) then you can reset that particular one if the radio button is highlighted and then click the [Reset] button, and start again.  Note that when you have created a custom screen and it is normally holding live data, then you have to uncheck the [Update data toggle] while editing it.  Also - if all else fails and you need to start again on a particular custom screen (careful) then click on Reset - this way gives you a clean slate again.

Now, the first thing you need to do is to Right Click (R/C) and select and [Set/load background image of this screen].  So you just navigate to C:\wxsim folder and find the file.

Right-Click menu

And now you will see a page with the black graphic.  This Wxsim graphic should be 752 width x 478 height originally (Jan 10th 2009). Write these down. (You can check in Wxsim directory with Explorer and hold cusor over or check Properties).

R/C again and hit the bold ellipse for [Save settings now - scroll to top].  Aha! - saved part way through - we all know why we have to do this occasionally!!

Now you can go R/C again and select The rectangle above (2nd up in middle table) on [Show back ground image] and that will temporarily make the image disappear - good.  Do it again to prove you can get it back :)  Turn it off for now.   We still have a large image area - there is a reason - the date and time tag need to be found when they arrive.  Don't about the large size of the page for now.

Now we need to add the time and date on the final image.  These get planted on the page in black typeset so we would not be able to find them on the black image.  Aha! - the reason we hid the image!

R/C again and the bottom ellipse Show custom tags.  We next see this... and select [Show custom tag 1].

Custom Tag Menu, Select Tag1

Once selected we get something like [customtag1] in the center...  right click on this and a small sub menu arrives...

To set a Name to the Custom tag manually from a known Tag-name

Now we may want the date first or the time first - it doesn't really matter as we can move them around easily shortly with the Triangle highlighted command at the top of the R/C list but more about that shortly.

For the date, use the bottom command as selected and enter  [%date%] [Enter] in the first custom tag, and for custom tag 2, enter [%time%]. These will get updated frequently (see [Update data freq] ) and only saved at the selected time we want to upload them.  Or you can just select [Show clock] near the bottom. It may end up top line far right and will need to be shifted over. the scroll bars should disappear when the time is back on the image.

Entering a custom tag name with the list

Note there is a complete .txt file list of all of the custom tags in the C:\wdisplay folder [taglist.txt].
Go to the option for [Set the tag to use] and the list appears - you can select %date% or %time% quite easily.

Now use the same mini menu and change the font to lime and bold and pica size 10.  This will match the rest of the image. done -  OK save again!

 Now we need to slide them down lower so we can grab them easily to place in final position.

Font Formatting

R/C and the top triangle command will enable the Shift and Ctrl keys.  [Shift] will Move a tag, and [Ctrl] will Resize an image or tag box - TAKE CARE! Move the mouse over the tag and a hand appears, press [Shift] and a "move cross" allows you to move it with the mouse - no clicks needed! 

Move both near the bottom - they will be easily seen when the graphic re-appears.  It is best to [Stop/move/resize] when finished.  [Save] the Custom Screen now.

Green tags to be shifted to upper part of screen

Set the Rough Size of the Image

Since the image size is 752 x 478, (well it was for me) then choose numbers and then set the Width to 775 and the Height to 485.  We need a background border outside the image. - this is key! (Ed: Jan 10 2009)

Now re-enable the [Show back ground image] and then move the tags with [Shift] again to where you want them to see this...

First rough version - nearly there

Not far to go.  A good time to Save again!

Now use the right click menu again and set the width and height.  Click on  [Enter screen width needed] in a box - slowly make the Width smaller to still leave a thin border.  Do the same with the height. About 2 or 3 pixels is fine. Now we can do another Save.  Now remember the colour of the webpage it is going on and we want to change this narrow border to suit the webpage.  R/C and go to 5th line down [Set Background colour] and choose closest or Define Custom Colours with the closest and adjust it with the R/H slider, Add to Custom Colours, then select this colour and then OK.   OR... just choose black - the same as the image background!

Note: if the Time and Date tags are not where you want them, you can always use R/C again and go through top menu item, Click and [Shift] (holding down) to move with the mouse.  Also, the size of the Custom Screen can be altered again by Width and Height easily, then Save.  DO NOT HAVE SCREEN SCROLL BARS ON!  Save again!

The second last item to do is to set the upload times - there is no marker beside this item in R/C menu  - top third of list, [Set update/upload times to web page and /gif/jpg/png selection options] (Default is gif)

Selecting update times and output type - default = gif, or jpg/png

Now, enable with the switch and do a [Test] upload OK and Save again and then we can close the Custom Screen window - note it all takes some time for the Save and Close operations - don't mind the delays.

Now in Custom Screens again review your image - open it up again.

If you find that the whole Wxsim bmp is stretched and incomplete, or the image is tiny inside the area we had set - we can fix it.  If the black Wxsim graphic is out of shape then you need to make the custom screen wider than the image with a small border around it.  We know how to reset the Width and height.

To make the Wxsim graphic larger inside, we re-enable the [To enable move/resize of object] and very carefully use [Ctrl] to stretch the image back to the boundaries we had planned and closer to the Date and Time data.  Do not touch the tags with the [Ctrl] Resize function or you may close it up and have a 1 pixel height which you cannot see anymore. :(  Or you can just close and [Reset] the Custom screen and start again.

So you place the mouse over near the bottom right of the graph itself, hold down the [Ctrl] key as you slide/move the mouse down and out.  You can let go [Ctrl] and reselect either at the bottom (away from the tags) and pull down or sideways as required.  Go slowly and you will be able to stop.  Make sure your mouse is clean and working properly... ;) 
Anyway, this will stretch out to the desired size as before and Save again.  If all has gone "Pear shaped" then you can back out without saving - bottom of top list = [Close screen without saving any settings].

If your image was stretched and out of shape, then we need to make the custom screen size larger with border visible.  Reset the Width and Height with a border.  there was a note above about changing the border colour (the background) to either black orthe colour of your website page.

This should be the final image.

Good forecasting and now you have a graphic on the website - now you will have to alter or add the image customscreenX.gif to your web page html or whatever.  Make sure the file type is lower case, Windy has done that with all generated files.

I hope you have found this an easy task...


« Last Edit: January 10, 2009, 12:10:12 PM by TokKiwi »
Dad's have hobbies because they are children's rugby, football and Committee Fathers!!

Offline MichaelPT

  • Posts: 1,229
  • Staffordshire Nr Leek
    • Weather-Above
Re: Creating Custom Screen For WxSim Forecast Graphic
« Reply #1 on: April 01, 2008, 09:07:56 AM »

 thank you for these instructions   I could not have done this without them

mick :)

Offline TokKiwi

  • Techno Dad
  • Posts: 4,312
  • Mech Engineer and Hobbyist
  • Tokoroa, Sth Waikato, New Zealand
    • Tokoroa North Weather
Re: Creating Custom Screen For WxSim Forecast Graphic
« Reply #2 on: April 01, 2008, 09:14:13 AM »
Aha!  That's fixed the size and file is small now too - not the 2.3MB bmp it was before!!  Its now a 24kB gif... what a huge difference!!  And you added the time and date tags too...  well done!

Dad's have hobbies because they are children's rugby, football and Committee Fathers!!