Introducing Meteotemplate 2.0 Watermelon

20watermelonBlack

A major upgrade to Meteotemplate 2.0 is now available. This upgrade contains some major changes, which will substantially improve not just the look and user experience, but also allow for much easier further development and expansion.

Please read carefully the install/upgrade instructions to make sure everything works correctly.

First just a little bit of general info with regards to this update. As I mentioned above, this upgrade includes some major changes in the core files of the template. Right at the beginning though I would like to emphasize that I still managed not to change the config.php, so you will not have to set up everything again.

Also I would like to thank Tom and Bill for testing the update scripts, and in particular David, who helped me substantially with thorough testing of the new version on various platforms and also for his suggestions and feedback!

There have been some things in the template (versions 1.x), which were bothering me and which I knew will be or even were already problematic. It was therefore obvious that some changes have to be made in the core files of the template and I also knew that the sooner I make these, the easier it would be. I will not go into too much detail, but basically the major issues were that the weather station section was quite limited. It was based on the design I used for my personal site, and even though it did look nice when it looked like a real console with content being loaded in the middle, this solution turned out to be problematic for several reasons – first, it did not work on some devices and browsers at all, which is a major problem. Second, yes it was nice to have all the weather station links available all the time in the left and right “menu”, but this was limiting the space in the middle and especially on smaller screens there was not much space left for the content, which is what matters the most. Also, I would like to further add pages to the weather station section, which would be problematic because there simply was no space left in the menus and also, would require always making changes to all pages from this section with each upgrade. I have thought quite a lot about this, trying to find a solution which would allow full compatibility, better use of space, potential for more or less infinite expansion, but in the mean time, still make sure the template remains easy to use, with clean design and all features available from every page. I tried several alternatives and in the end decided to use a new menu, which now allows basically infinite possibilites of adding new stuff, including images, icons, interactive features etc.

Next thing that was problematic was a lot of errors with regards to W3C validation. In fact, some pages showed more than 1000 errors! I decided to try to solve the majority of these and also migrate the entire template to HTML 5.0 standard. I can now already proudly announce, that all pages are now in HTML 5.0 and all pages are fully valid in terms of W3C! (just if you are curious, the total number of errors in the 1.x version of the core template files was originally over 120 000 – given there is several hundreds of pages of the template and each had on average 300-400. Of course I did not have to go through each one of them and similar errors could be fixed in bulk, but it still took some time) and the important thing is that right now, based on my testing there should be exactly 0. This has further advantages in ensuring full browser compatibility and easier changing of the code.

This upgrade also fixes some bugs that were present in the template right from the beginning. Some of them were just minor things, which however still could be annoying and were related especially to how some interactive features behaved in various browsers and also, sometimes some parts displayed differently in various browsers.

Last very important thing! I have also made changes to the update script, the one that actually sends data to the database. There were some bugs, which could result in incorrect data being saved to db under very special circumstances, and also this change was necessary to create one new feature outlined below. However, please read the upgrade instructions very carefully because otherwise it could result in your db not being updated in case of incorrect setting of the new file.

The new version has been tested quite thoroughly and also compatibility tested with mobile devices. It should now work with Android and Apple devices and functions were added so that all features are available even on these devices (which was also problematic in 1.x version as some things differentiated between mouseover and click, which is something a mobile device cannot use).

Also some new languages are now available, credits and more info is on the language page of this blog (Translations). And there are also new update scripts, which allow updating the db directly from Weather Underground and using text files generated by WView and Meteohub.

What is new/changed

  • NEW menu – a brand new fully interactive menu, which allows adding not just text, but also images and interactive features. It is also much easier to modify, because all menu items are simple <div> containers, where anything can be added with just a simple HTML.
  • NEW HTML 5.0 and W3C valid – all template files are now in HTML 5.0 standard and should be fully valid in terms of W3C
  • NEW icons – some new icons are introduced in the menu for the main pages of the template
  • NEW – feature allowing sending email notifications in case station is not reporting
  • NEW design tweaks – the menu now also shows current temperature and precipitation, time of last db update and this is available on each site
  • NEW – there is now error log available (a text file saved in the admin folder on your server), which contains various information regarding the actual functioning of the template. This feature will be further expanded in the future.
  • NEW – the template is now also available in French, German and Slovak
  • NEW – database updates are now also possible using directly data from WU and also using files generated by WView and Meteohub
  • NEW – some pages were optimized for faster loading
  • CHANGED – the trends page in the weather station section is now separate for each parameter. This change was necessary because larger databases would cause problems and load very slowly and often throw errors
  • FIXED – calendar now works correctly even with shorter databases and shows the correct months for all years
  • FIXED – scrolling of pages in the reports section was problematic in some cases, now works fine.
  • FIXED – the show all/hide all buttons in reports now work correctly
  • FIXED – METAR sometimes reported incorrect visibility.

Major advantages of version 2.0

  • much higher potential for future development
  • easier navigation
  • W3C validity and use of HTML 5.0
  • new languages
  • better compatibility
  • new update scripts allowing more users to use the template
  • new features – email notifications etc.

Install instructions

In the update file you will find several folders with the new files.

Some general things to note:

  • you should replace all the update files (they were all modified due to the W3C validity, HTML 5.0 and bug fixes). Fortunately, these are pages, which you are unlikely to have modified and form the core part of the template.
  • if you have created some custom pages, they should still work absolutely fine with the new menu and there should be no changes necessary for these to work.
  • plugins are fully comptible with the new version and no changes are required (W3C validation of these and some minor tweaks will be introduced in new versions of the individual plugins)
  • there are some new icons and some optimization of some images for faster loading, so replace those as well
  • your original database updating script will still work, but if you want to use the new email notifications feature, you should replace this too (see instructions, it should be farily simple). Also, if you are using WD, then you should update this file as it contains some bug fixes as well.
  • the only thing you will have to go through again is the menu set up. Instructions are given below, but it is now also much easier to edit this and should not take very long.

Update proces:

  1. Extract the update files.
  2. Make a backup of your entire Meteotemplate folder before update!
  3. Go to meteotemplate.com and look at the demo to get an idea of how the new menu looks like. The new menu uses a div container for each menu item. Do not edit the home button image (it uses separate styling) and you are likely not to edit the weather station tab either, this one also contains some scripts connecting that tab to the station and showing current conditions. But you can do whatever you like with the other tabs, add new, modify the existing. A separate page showing the exact steps of how to do this is available here. Also, make sure that you make a back up copy of your original menu, just in case something goes wrong or you can use it to make sure you added all the links you had in your old menu to the new one.
  4. Now for the update script. There is now a new function which allows you to set up email notifications in case your station is not reporting. To set it up, simply open the update folder and find the file that you use for updates depending on how you update (wd.php, wview.php, cumulus.php, meteobridge.php, wu.php). Now, make sure you have the right interval for db updates set and also the password – both of these should be set up just like they are in your already existing and functioning update script, just make sure that you fill this again because you will then replace the original update script. There are also some new parameters. First one you set to either true/false, depending on whether you want this feature to be enabled at all. If you set this to false, you can ignore the rest. If set to true, you then specify some minimum interval from last update, after which the station will be considered as “offline”. I recommend using approximately 3 times the interval for your db update. Also note that this number is in seconds (all is described in comments in the actual file so don´t worry, you will know what to do). Last, you simply specify the email, where a notification should be sent should the station not be reporting.
  5. Once you have the update script set up, save the changes and close the file. In a nutshell, this is how it works – if your station is not reporting for the minimum interval specified, you will get an email about this. You will only get this email once, upon the first detection of the station being offline. However, this means that you then have to reset the script again once your station is back online so that you get emails in the future again – in other words, once an email is sent, it logs this and makes sure that you do not get email at each update every X minutes. But once your station is online, you need to tell the template that you again want the emails to be sent. The reset is very simple. When an email is sent, a new button will appear on the homepage of the administration section of the template (protected by password). You simply click this button and the button will disappear and the script will be reset.
    NOTE: I cannot fully guarantee this feature will work for all, because it also depends on the security settings of your server and whether it allows PHP to send emails. If therefore you do not get email even though you should have and also the reset button is in the admin section, it means you would have to change the server settings. If you want to test this, simply set the minimum interval for station being offline to something very small (1 second for example) and then upon next update of the db, it should send the email. You can then change it back to whatever you really want it to be.
  6. Make a back-up copy of your update script, just in case anything goes wrong and you are able to quickly make your updates working again and then try to find what is wrong, but with your db being updated.
  7. Now replace the original files on your server with the new files – this will include the core pages, the admin pages, the page for the menu, header, footer and also the css folder, the scripts folder etc. Simply the files that are included in the update file.
  8. As mentioned previously your custom pages will still work fine with the new template.
  9. Config.php has NOT been changed, the only change you can do if you want to, is add the abbreviations to enable the newly added languages (“fr” for French, “de” for German, “sk” for Slovak). The language files are included in the lang folder.
  10. Delete the header cache file (headerCache.txt) in the root directory of your server – so that the script reloads the forecast for the new menu
  11. You might have to empty your browser cache (in most browsers by holding the refresh button for a few seconds) for the changes to take effect – especially the main.css must be reloaded for the new version.

Your page should now be upgraded to version 2.0.

Last thing, I thought it would be nice to have a list of users of this template, therefore if you are using Meteotemplate, let me know and I will add a link to your site on the “Users” page of this blog – also allowing other people to look at your site 🙂

 

3 thoughts on “Introducing Meteotemplate 2.0 Watermelon

Leave a Comment