New Moon Phase Images for WB2_2b

[Andy9164]

Hi everyone,

I have created some detailed moon images for use on WB2_2b template. It may work on others but I have only tested it on the above but if you know how to adjust those templates then they could work for you. It will ONLY work on php templates. There are 200+ images which show the moon in every visible percentage and it uses the $moonphase and $MoonPercentAbs to select the correct image so you get a very accurate view of the visible moon.

I have uploaded a demo to www.midlifedad.me.uk/WB2_moons although this image wont change or you can see the idea fully working / changing version on my website at www.midlifedad.me.uk/weather

To install is very simple. Download the attached zip folder, unzip and place the unzipped "moon" folder which contains the images in your style folder. (There should already be a folder in there called "forecast".)

Then using a text editor edit the index.php file in your main directory as follows:

Look for this piece of code:

div class="pan night" style="margin-bottom:5px;">
                  <h2><?php echo $Tr_moonphase; ?></h2>
                  <img src="images/moon.bmp" style="padding: 50px 0px 52px 120px" alt="Forecast icon" title="Forecast icon" />
                  <p style="text-align:center">Phase : <strong><?php echo $moonphase; ?></strong><br />
                  <?php echo $Tr_MoonPercent; ?> <strong><?php echo $MoonPercentAbs; ?>%</strong></p>
               </div>

Change the line in red above to the following:

<img src="style/moon/<?php echo $moonphase. ' ' .$MoonPercentAbs; ?>.png" style="padding: 33px 0px 25px 50px" />

Any questions or problems then reply back in the forum.

I will soon be posting a second set of images which are "cartoon like" but work on the same principle.

Hope you enjoy.

Andy

[Andy9164]

Adding a second set of moon images.

Follow instructions above to use making sure the unzipped folder is renamed to moon.

If you have already uploaded and are using the first set then I suggest you rename your style/moon folder to style/old_moon and then unzip the attached file, rename the folder to moon and upload into your style folder.

These images are 110px x 110px if you need a smaller version then let me know what size and I can use a batch file in Photoshop to make them smaller quite easily. Not too many requests though 

If you do use a smaller size then you will need to adjust the "padding" in the above code to get them to work.

Looking at other Weather By You templates that use php I think they will work in the same way although the images will need to be made smaller and the "padding" changed to get things looking nice. Happy to help if you need it.

Comments and questions welcome.

Andy

[Steve Bannister]

Hi Andy,

Long time, no speak! I hope you're well and keeping safe.

I came across your Moon files, but the link doesn't work anymore. Do you still have a set? I'm also interested in how you got your Beaufort images to work.

Hopefully, you see this.

Steve

[Andy9164]

Hi Steve,
Keeping well thanks hope you and everyone here is as well.

I still heve a set of moons, in fact I have several as I modified some and found a new way of creating the shading so am happy to post them if you need them. However.....

If you are using CmulusMX then that now has the ability to create a daily moon image, very similar to mine and I actually use that on my website now rather than holding 200+ images. If you need help with that take a look in the CumulusMX forum or give me a shout here. By all means, if you need my images let me know and I will attach them.

As for the Beaufort, it works on the same principle as the original moon. I have 13 images named 0,1,2...12 in a folder located at style/beaufort and then on the index.php page you would need to add some code similar to the moon code. This is from my page just to give you an idea.

<div class="picture beaufort" style="margin-bottom:25px;">
                  <h5 style="padding-top:38px;">Currently : Force <strong><?php echo $beaufortnumber; ?></strong><br>
                  <?php echo $beaudesc; ?> </h5>
                  <img src="../style/beaufort/<?php echo $beaufortnumber; ?>.png" alt="" style="padding: 10px 0px 0px 75px" />

Hope that helps

Andy

[Steve Bannister]

Hi Andy,

Thanks for the code, I really appreciate it. This is what I ended up with;

               <div class="pan beaufort">
                  <h2><?php echo $Tr_beaufort; ?></h2>
                  <img src="style/beaufort/<?php echo $beaufortnumber; ?>.png" alt="" style="padding: 20px 0px 10px 0px" />
                  <p style="text-align:center">Currently : Force <?php echo $beaufortnumber; ?><br>
                  <?php echo $beaudesc; ?> </p>
               </div>

I'd love a copy of the Moon files, please. I have found a set but there are 361 of them from 0 to 360. Great files, but Cumulus 1 seems to work best with 200 using the negative numbers for waning and <#MoonPercent>

I guess I'll see when you send them, but I assume they go from 0 (new) to 100 (full) then -100 to -1 (new again)?

I'm back in the UK now, teaching at a school in Bedfordshire. I've just got the PTA to buy us a weather station, so I'm doing it all again. Just a little bit more full-on this time.

Steve

[Andy9164]

Hi Steve,
Believe it or not in my "Lots of Moons" folder on my pc I just happen to have them 0 to 100 and -0 to -100.

I only did these recently for someone on the Cumulus form and I was totally unaware that this was the easiest way to do it. I always used the moonphae and the percentatgeAbs tags. I ended up with more than 200 images originally as sometimes you would get FullMoon99, FullMoon100 etc so had to make copies and rename them. I wish I new about the <#moonpercent> before. But we live and learn.

So these are 100px  x 100px. Hopefully they will do what you need. If not give me a shout and I will see what I can do.


Not thinking of going to CumulusMX? I ditched my old laptop, bought a PI went to MX some time ago. There were some changes to be made in some of the files due to the new formatting rules but once I got that sorted its all good. I dont think there is any further development on Cumulus1 anymore. BTW if you go to MX you dont need the moon icons as I mentioned earlier..

Also got rid of my old Maplin (FineOffset) weather station and upgraded to one of the new Ecowitt models. Found it to be so more accurate.

If you need any help let me know.

Have fun.

Andy

[Steve Bannister]

Hi andy,

Thanks for those, they work perfectly! I just resized them to 135x135 to fit the panel and they look great.

I thought I read that MX was for Windows 8 and above, and the school has Windows 7, but the Cumulus 1 works fine for what we need.

I'm just trying to write a couple of new pages for the template, which is taking me ages. I've copied the index page as a template and I'm adapting them for a 'Wind' page and a 'Night Sky' page. What's bugging me at the moment is the rounded edge image at the bottom (cont_bot) which has jumped to the left. Plus, I've made a larger panel for a Earth and Moon phase image, but I can't get it to appear, I've added it to the style.css sheet to know what I'm talking about, the image is in the right folder, but it just won't appear. Any ideas with PHP?

Have a look and you'll see what I mean;

http://www.eatonbrayweather.co.uk/nightsky.php

http://www.eatonbrayweather.co.uk/wind.php

Steve

[Andy9164]

Hi Steve,
I think you have too many </DIV>'s under where it says "Moon Visible at" on Line 209. My comments in brackets

On the original WB2 index page it has:

</div> (his closes the DIV "pan night")
            </div> (this closes the DIV "right_h")
            <div style="clear: both"></div>
         </div> (this closes the DIV "razd_lr_h")
      </div> (this closes the div "content")

In your page you have the same but you dont have a DIV  "razd_lr_h" so you have an extra </div) and your </DIV>'s are working as follows

</div> (Closes DIV "pan nightlong")
            </div> (this closes DIV "right_h")
            <div style="clear: both"></div>
         </div> (this closes DIV "content")
      </div> (this closes the DIV "main")

Therefore your box div <div class="cont_bot" style="padding: 0px 0px 0px 120px"></div> is outside of the DIV "main". In CSS the DIV "main" is set to 1000px and is centred by margin: 0px auto in the css file. As you box is outside the div, it treats it as part of the page body and just sticks it on the left.

Take a backup of the files and then delete the last </DIV> highlighted above on both pages. Hopefully that will fix it

I simulated it here by adding an extra div.

http://midlifedad.me.uk/WB2_MX/

Andy

[Andy9164]

For your second problem with the background / frame not showing.

Your background image is 270px x 395px but the div its trying to fit in to is only 270px x 250px so you are (I have to be careful here as I am speaking to a teacher) 145px short.

From what I can see the DIV have a class of pan.nightlong. If you look in CSS the class .pan is defined as 220 x 250 + 20 padding right and 20 padding left so it shows up as 270 x 250.

You could create a new class in CSS by combining pan and nighlong in to one new class like this

.pannightlong {
   width: 220px;
   height: 395px;
   padding: 0px 20px 0px 30px;
   margin-bottom:15px;
   font-size:120%;
   float:left;
   color: #000000;
        background: url(style/pan_nightlong.png) 0px 0px no-repeat;
}

Then change you html code on the page to..

<div class="pannightlong" style="margin-bottom:5px;">
                  <h2> Earth & Moon Phase </h2>

Let me know how it goes

Andy

[Andy9164]

Alternatively change the class .nightlong as follows and then keep the html as it is.

I tested it, see attached image.

.nightlong {
    background: url(style/pan_nightlong.png) 0px 0px no-repeat;
    width: 220px;
    height: 395px;
    padding: 0px 20px 0px 30px;
}

Andy

[Steve Bannister]

Thanks, Andy.

I knew that it had to be either a div or a br error. I thought I'd counted them all compared to the Index page that I copied, but I must have missed that one. Thanks for finding it, it looks great now.

As for the pan_nightlong, I just can't get that to work properly. I've have to redo the nightlong image as the blue spacing at the top and bottom of the panel were different and didn't allow for the text.

Now, the title, Earth & Moon Phase, is not to the left as the others and the underline is off. Grr. It should be the same as all of the others.

Sent to try us, eh? Haha

[Steve Bannister]

Ok, still working on the Night Sky page.

Just got the padding correct, so the image is in the panel.

Still working on the H2 and underline problem, though.

http://www.eatonbrayweather.co.uk/nightsky.php

This is what I have for line 145 to 150;

               <div class="pannightlong">
                  <h2> <p style="text-align:left"> Earth & Moon Phase </p></h2>
                  <p style="padding: 30px 0px 0px 0px" >
                  <script src="https://www.albinoblacksheep.com/earth-moon/embed.js"></script><noscript><a href="https://www.albinoblacksheep.com/earth-moon/">Earth and Moon Phase embed</a></noscript>
                  <p style="text-align:center">Phase : <strong><?php echo $moonphase; ?></strong><br />
                  <?php echo $Tr_MoonPercent; ?> <strong><?php echo $MoonPercentAbs; ?>%</strong></p>

[Steve Bannister]

Of course, after all of this, the next challenge is to have 3 panels across the bottom instead of just the Earth/Moon one. I'm assuming it'll be easier to stop after the Forcast panel, and have the three as a 'Bottom row' instead of leaving the current Earth/Moon one in the Right Margin. Am I correct?

I've attached a mock-up to give you an idea. The other two will have planetary data, rise and set times, etc.

[Andy9164]

Hi Steve,
Looks like you got the h2 and underline issue sorted, One thing I noticed is that you dont appear to have a class .pannightlong defined in your css, the one I suggested earlier. I can only see pan and nightlong. When I look at the div for pannightlong it takes up the whole right hand section and is 270 x 915. Dont know if you changed the css and forgot to upload it.

As for putting three across the bottom, I agree. I would stop after the forecast and then add a "blank div" right across the screen to give a bit of spacing You can adjust the size later <div style="height:30px; width: 100%;"></div>

Then create a new div called "row" and specify the width (100%) and the height. I would use the same height as pannightlong - which should be adjusted depending on the size of the new backroung image you will be using. It was 395px.

You can use pannightlong again here for the 3 different boxes so your code should look something like

<div id = "row" style="height: 395px; width: "100%">
<div class="pannightlong">
Enter the contents of the div
</div>
<div class="pannightlong">
Enter the contents of the div
</div>
<div class="pannightlong">
Enter the contents of the div
</div>
</div> This will end the div "row"

You may need to adjust the padding to get them even but that should work, hopefully

BTW, love the Beaufort section, very informatve.

Andy

[Steve Bannister]

Hi Andy,

No, the H2 isn't sorted, it still appears more centred and higher above the underline than the other panels. Which is odd, as it was in the correct place earlier.

I've added your bottom row code, using the Earth/Moon panel for all three just to test it. I can change the content later. They all appear in a column, though, not as a row. Do I not need a couple of ';'s somewhere? I remember writing in BASIC when I was at school, and copying code out of magazines and typing it into my VIC20. Me and my friend used to take in turns to read and type. We used to call the semi-colon "stay-where-it-is". He had a Tandy TRS-80, which was far better than mine!

The Wind and Night Sky pages are in the header menu now, so should be clickable.

I'll send you the PHP file. It might be easier to see where I've gone wrong on there, rather than Inspecting the page. I know that doesn't always show everything.

Thanks for your comment on the Beaufort images. Some of them are quite funny, I've attached them if you want to have a look.

Thanks again, Andy, I really appreciate all of this help.