Level: All users
Prerequisite:
Suggested software:
Links:
As we seen in last article PHP for Dummies, PHP has a lot of similarities with Cumulus webtags. Cumulus and PHP are both replacing "special words" with relevant informations.
In this article we will see how PHP could help you to customize, enhance and help your personnal weather site to become more interactive!
Like you already know, Cumulus strengh is in its special tags, the webtags.They allow to have more then 400 different informations, from your weather station!
Cumulus webtags
Cumulus use ordinary web pages, in which are inserted some "special words" recognized by "signs agreed" <#...> Cumulus know at this moment that it does have to replace this special word with information coming from your Weather Pc.
eg. <#temp> could have to be replaced by -21,5°C in Quebec, during winter.
Cumulus has more then 400 diffrent informations that you can use for your own pages. Powerful and versatile transfer options are available into the software. Whether you decide to only change some parts of the standard pages from the Cumulus included template or if you decide to create you own page in which you will insert some Webtags, Cumulus has anticipated everything!
Its operation
We have seen that Cumulus has a long list of Webtags and that it scan your pages in search of these codes: <#...> to replace them with associated informations (eg. <#hum> contain the last read exterior humidity value).
PHP has a similar operation. It search particular codes <?php ... ?> and consider all between these codes as PHP commands to process. We have see how to insert a timestamp in a particular format with the command: <?php echo date('H:i:s, l d-m-Y'); ?>
Variables are present in all computer languages (Web or others), they allow to store informations to be processed later. Php has advantage to be simple because it need no 'declaration", before associate a value. In effect, in most languages you have to "declare" how will be used the variable. Example, a variable that you've called "Total" (for a bill) will have as declaration "format: 2 decimals number" or "Format: monetary".
But with PHP all is easier, we just have to assign a value to the variable, no declaration to do. The only thing to remember: A variable name ALWAYS begin with a dollar sign ($). Our "Total" variable then has to be writed like that: $Total
We could simply assign a value like that: $Total = 72,25;
(remark the semi-colon ";" needed at the end of each php "phrases")
A small example:
Imagine that we want to buy in a meteorological material shop, all compenents needed to build a prime quality weather station. At moment to pay, the cashier count our "Total" as the price for all parts, plus taxes. The cash register would caculate our bill like that:
$Total = 723,29; (total for all items)
$Tax_rate = 0.15; (sale tax at 15%)
$Taxes = $Total x $Tax_rate; (Taxes to pay)
$To_pay = $Total + $Taxes; (Total including taxes)
Then, your printed bill will appear like that:
Total: 723,29 $
Taxes: 108,49 $
To pay: 831.78 $
Then you see with that little example how PHP variables works. We are then ready to start using them to something a bit more interesting!
Now, I'll give you some interesting little Snippets for your personnal weather website. Based on these examples, you will be able to quickly improve your web site. To begin, take a html page and make a copy, but with the Php extension.
Note: //In PHP 2 consecutive slash are for inserting comments in your code!
As first project, I propose you a simple example, the atmospheric pressure. In Canada, we're using kilopascal (kPa) as pressure unit, but Cumulus offer only hectopascal (hPa). As we know that to convert 1 kPa = 10 hPa, it would be easy to divide the Cumulus given number by 10 to have the desired measure!
Step 1:
Previously, we have inserted an echo command inside a html line, This time, you have to insert the folowing lines between 2 lines in your web page:
<php // Start PHP code section
//$press will be equal to <#RCpress> (pressure w/o comma) divided by 10
$press = <#RCpress> / 10;
?>
Step 2:
...Now that the variable $press exist, we could use it below this place in the page (As an advantage of putting all PHP variables together, at the top of the page).
Then elsewhere below in your page, insert a code of that kind:
<p>Pressure is curently <?php echo $press; ?> kPa</p>
Now, your page is ready to be processed by Cumulus to replace <#RCpress> by real weather pressure read recently from your weather station. That should display something like this, after Cumulus processing:
Pressure is curently 102.3 kPa
Since a couple of weeks Weather byYou! offer a broader set of forecast images, to being able to switch from night and day icons! In effect, just follow this little hint:
<img src="images/forecast_<#isdaylight>_<#forecastnumber>.png"... />
will be transformed to this by Cumulus processing:
<img src="images/forecast_0_21.png" alt="" title="" />
But in Canada, we have snow during winter! For that purpose I provide a Winter kit to enhance these forecast icons, but swapping these images could be a chore as in early spring (and late autumn), day could begin with snow, became rain during the warmer period of the day and end with snow again. Then what a job to change these icons 2 or 3 times a day!
To solve that problem we could add a new webtag available since Cumulus version 1.9.3, #isFreezing to check if temperature is below 0°C.
In a html only context, we could add it to our precedent example to have it in a short line:
<img src="images/forecast_<#isFreezing>_<#isdaylight>_<#forecastnumber>.png"
This time Cumulus will transform the line like this:
<img src="images/forecast_1_0_21.png" alt="" title="" />
But to have a more signifiant icon name we will change these numbers against more meaning words with a really useful PHP command, the ... IF statement:
<?php
// Store Number of the forecast given by Cumulus.
$forecast_no = <#forecastnumber>; // Number of the forecast.
$daytime = "day"; // suppose that it is during day
if (<#isdaylight> < 1) $daytime = "night"; // NO! it's the night!
// Check webtag #isFreezing if temperature below freezing temp.
if (<#isFreezing> > 0)
$season = "winter"; // If yes (=1), It is the cold season.
else
$season = "summer"; // If no (=0), this is warm season.
// Now assemble the icon name with all options
echo '<img src="'.$season.'_'.$daytime.'_'.$forecast_no.'.png" />';
?>
Like you see with that code, only one line have the "echo" command, then in all that bunch of code, only one line will be in you html page. Check also how the echo line assemble that line, taking sometime text between simple quotes (like '<img src="' or '_') and other time variables ($season, $daytime...) and "attach" them together with simple dots "." to build a complete line.
<img src="winter_night_1.png" alt="Forecast icon" title="Settled fine"/>
(For lisibility reason I haven't include alt="" and title-"" in code, but represent it here):
Then this "Snippet" allow you to use more significative names for your forecast icons. But mostly it was a pretext to introduce the IF statement that can be used alone or with ELSE complement to say to the computer what to do when IF fail (you could see that $daytime also should have been a IF... ELSE, but was written that way to show that a short IF could be written in one line also).
Take now the example of exterior temperature; It could be amusing to have a different colors used to display temperature, depending on cold, tempered or hot weather.
Then, let's define that temperature under the freezing line will be represented by blue color, for hot temperature above 30°C, red will be used and for temperature between 0°C and 30°C, numbers will appear in white. Then see our following code
<?php
$temp = <#RCtemp>; // Cumulus webtag for extérior temperature.
if ($temp > 30) // If temperature above 30°C
{
$temp_color = '#FF0000'; // Write in Red.
}
elseif ($temp < 0) // If temperature below zero
{
$temp_color = '#0000FF'; // Write with Blue.
}
else // If temperature above 0, but below 30.
{
$temp_color = '#FFFFFF'; // Write in White.
}
?>
Then, we have a $temp_color variable containing the hex color bunber for all temperature we want to highlight... let's now use our color code somewhere below, as this:
<p>Temp: <span style="color:<?php echo $temp_color; ?>"><#temp></span></p>
That should be processed to display that result:
Temp: 31.4°C
Now, let's take an eye on this code! Like we see in that example, the statement IF is taken to its extreme limit. In general, you will use the more usual way with the IF... ELSE. In forecast icon example above, we've made 2 distinct IF as an icon could be in summer, and during night too.
In this temperature example, 3 status could be possible: Hot, "warm" and cold; but IF... ELSE offer only 2 choices! Then PHP add a third choice by using the IF... ELSEIF... ELSE structure. In our example a temperature could be hot (+30), cold (below 0°C)... or other (considered as "warm" temperature).
GOOD PRACTICES: I've used many ways to write IF code as PHP allow us to write with many shortcuts when there is only one line into the IF statement and you will see it like this in many places, but the best way to write IF statement is with open and close brackets, like this:
if (want_troubles == 'NO") {
use_bracket = "ALWAYS!";
}
Last thing to remember, like you see here, with "==" we compare 2 things, but with one "=" we put content in a variable!
I hope that these little tricks have give you envy to go a little further... because our next article will talk about Cumulus webtags and way to integer them more easily in each page, and reducing in the same time the upload time and size.
I you have any idea for an article or comment on these articles, Go to our Forum!