Beschrijving van de bouw van de website.

  1. De opzet
    • Keuze van de template
    • Menu
  2. De inhoud
    • Een overzicht.
    • Wat we gaan tonen.
    • Beschikbare variabelen.
    • Manueel ingegeven variabelen.
    • Beschikbare afbeeldingen.
    • Weer- en wind iconen.
    • Blog
    • Gastenboek
    • Onderhoud - update februari 2014
  3. De technieken
  4. Webkleuren

De template

Er is gekozen voor een eenvoudige template zonder frames met enkel een menu bovenaan en popup vensters. De layout wordt volledig bepaald in de style.css. We maken eerst een kleurenpalet van de samenhorende kleuren waarop we ons gaan baseren (onderaan de pagina een afbeelding). Frames geven moeilijkheden wanneer de site gevonden wordt via een zoekrobot en niet alle browser reageren op dezelfde manier, een menu links of rechts neemt ruimte in en is toch maar een herhaling van het menu bovenaan, we kiezen er voor om noodzakelijke herhalingen via links in de paginas te verwerken. Deze links zijn bordeau kleurig en worden donker blauw zodra eenmaal bezocht. De pagina staat centraal en heeft een breedte om te passen in een scherm van minstens 1280 x 800 pixels.

Het menu heeft zes hoofdmenus, een Home link en verder: Het weer | Over het weer | Afbeeldingen | Weerstation | Moerzeke met submenus. Een volledig overzicht is te zien op de pagina Inhoud

Onder het menu de titelbalk met links en rechts een eenvoudige navigatie: links bepaald de positie in de structuur en rechts laat toe een vorige/volgende of bovenliggende pagina te openen.

Onderaan elke pagina hebben we de footer met een link naar de Contactpagina, het deel voor wie geregistreerd is, Mailen en de link naar de Inhoudpagina.

Pagina's met normale inhoud zijn html pagina's, deze met stationinformatie waarin variabelen verwerkt zijn worden in php opgemaakt, voor sommige toepassingen gebruiken we java.

Er zijn twee kleurenpaletten, de eerste voor de website en de tweede geeft de kleuren die met het type meting overeenstemmen, deze kleuren worden gebruikt bij de opmaak van grafieken door de cronjobs en de programmas WSwin en Weatherlink.


hogere pagina

De inhoud

Een overzicht.

Er is een groot aantal meetgegevens en daaruit afgeleide waarden, grafieken, tabellen en afbeeldingen beschikbaar. Het is zaak ze zodanig te groeperen dat een beeld van de weersituatie duidelijk wordt, bovendien hebben we statistieken, de huidige situatie en de weersvooruitzichten. Als voorbeeld kunnen we de buitentemperatuur nemen waaarvan we het volgende kunnen weergeven:

  • De huidige temperatuur (gemeten in geventileerde thermometerhut op 1,5m hoogte, type B)
  • De grafiek van de temperatuur de laatste 24u, 3 dagen enz.
  • De maximum- gemiddelde en minimum temperatuur (ook overeenkomende waarden van vorig jaar) + tijd
  • De normale gemiddelde temperatuur
  • De trend (stijgend - dalend)
  • De gevoelstemperatuur
  • Het dauwpunt
  • De bodemtemperatuur op 5cm, -5cm en -15cm
  • Beschikbare variabelen.

    De variabelen worden uitgelezen, opgeslagen en verwerkt door twee programmas, Weatherlink en WSwin. we stellen ze beschikbaar voor de php pagina's in include-bestanden.

    We beschikken over twee stations, beide doen alle metingen doch we gebruiken telkens enkel de waarden van het station met de beste ligging. We noemen ze Moes1 & Moes2, Moes1 meet voornamelijk temperaturen, bodem, Zon ( helderheid,) luchtdruk en luchtvochtigheid. Moes2 meet Wind - zon & UV - Neerslag - Serre.

  • Alle variabelen worden omgezet naar drie bestand upload/include_sensors.php, include_var_30min.php, en include_var_5min.php ze zijn beschikbaar voor alle *.php paginas en worden vernieuwd respectievelijk elke 24u - 30min of 5min. We gebruiken met dank, het gratis programma Notepad++ om de bestanden te bewerken.
  • Variabelen omzetten gebeurd met een omweg, de bestanden met *.htx zijn uitleesbaar door Weatherlink waarbij we kunnen aangeven dat nadat de variabelen een waarde kregen het bestand opnieuw moet opgeslagen worden met de *.php uitgang. Weatherlink schrijft dit bestand weg zowel naar de harde schijf als naar de server.
  • Net als de variabelen worden ook de *.gif afbeeldingen aangemaakt door Weatherlink en weggeschreven naar de HD & server
  • Alle WSwin variabelen worden ook omgezet naar dezelfde drie bestanden (zie verder op deze pagina onder Techniek).
  • Manueel ingegeven variabelen.

    We beschikken over een groot packet variabelen die automatisch verkregen worden, het komt er natuurlijk ook op aan om enkele voorspellingen te maken en deze moeten dagelijks aangepast worden. Deze gegevens verzamelen we in variabelen en slaan ze centraal op in include_*.php bestanden zodat ze voor alle paginas beschikbaar zijn.

    Beschikbare afbeeldingen.

    De programmas Weatherlink en WSwin leveren een groot aantal *.gif afbeeldingen. Beide in grote lijnen met dezelfde inhoud, er moeten dus keuzes gemaakt worden. Er zijn ook heel wat instelmogelijkheden ivm afmetingen, kleur, achtergrond en inhoud. Wanneer we de achtergrond transparant maken duikt de mogelijkheid op om ze weer te geven bovenop een zelf gemaakte achtergrond. Dit laatste doet ons besluiten om voor het grootste deel met Weatherlink te werken en ze transparant te maken.

    Van WSwin krijgen we een afbeelding met de wolkhoogte, we plaatsen ze op de site met een reeks andere afbeeldingen in dezelfde ruimte met een diashow.

    Er is een pagina toegevoegd met grafieken. De opbouw wordt gedaan met het javascript van Highcharts.

    Weer- en wind iconen.

    Stilaan werd het een chaos in de Weer- en wind iconen, we hebben verschillende reeksen zoals van WSwin, metar van cumulus voor oa de Metar weerberichten, de icons gebruikt voor het weerbericht van MeteoConsult en de afbeeldingen op de pagina met het Benelux weer. Het lijkt dus aangewezen om een poging te doen om één uniforme reeks te scheppen voor de gehele site.

    Om het overzichtelijk te houden plaatsen we alles op een nieuwe pagina meet Weer- en windiconen.

    Blog.

    De blog werd oa aangepast in volgende bestanden: blog/config/plugins/sidebar/

    - Bookmarks.txt -> enabled|1| naar enabled|0|

    - Badges.txt -> enabled|1| naar enabled|0|

    - CreativeCommons.txt -> enabled|1| naar enabled|0|

    Gastenboek.

    - Het gastenboek werd gedownload op DigiOz en aangepast voor de site. Het bestand gastenboek.php roept gastboek.php op welke eerst via include("header.php") de bovenzijde van de pagina opent. De header.php geeft de links onder het menu voor 'Tekenen', 'Zoeken' en rangschikken. gastboek.php geeft tien berichten (instelbaar via $perpage = 10;) weer en kijkt alles na op geldigheid. Vervolgens wordt afgesloten met footer.php.
    - Klikken op 'Tekenen' opent guestbook.php welke zijn eigen header.php en footer.php heeft en laat toe een nieuw bericht te plaatsen (gebruikt oa CaptchaSecurityImages.php als anti spam).
    - Bij klikken op Opslaan wordt add.php opgeroepen welke het bericht na controle omzet, opslaat en een mail zendt. (bij eventuele fout kan men terug - de teksten blijven behouden).
    - Klikken op Bekijken laat via add.php toe het bericht te controleren en eventueel te verbeteren.
    - Klikken op 'Zoeken' opent search.php welke opnieuw zijn eigen header.php en footer.php heeft.
    De volgende bestanden worden gebruikt (aangeroepen door header.php):
    include("language/gbclass.php"); (verwerken van nieuw bericht)
    include("language/config.php"); (instellingen)
    include("language/functions.php"); (bewerkingen)
    include("language/language_dutch.php"); (vertalingen)
    include("language/ban.php"); (geblokeerde ip adresen)
    include("../upload/include_var_30min.php"); (vertaling dag v/d week)

    METAR

    De gegevens zijn reeds gedecodeerd beschikbaar via NOAA, (gecodeerd NOAA), de trend van de voorbije 24u is beschikbaar op NOAA

    Onderhoud

    In de footer van elke pagina kan de Admin pagina bereikt worden met de link Onderhoud. Dit laat toe berichten te wissen in het gastenboek en IP adressen te controleren.
    Er kan ook gecontroleerd worden op updates voor de Benelux pagina.


    hogere pagina

    De technieken

    1. De layout bepalen we in style.css
      • De meeste gegevens komen uit de template, we passen wel de kleuren en achtergronden aan.
      • Ook de positie van paragrafen, hoofdingen enz krijgen een eigen tint.
    2. Javascript functies slaan we op in script.js of het bestand zelf.
      • Een veelgebruikte functie is deze waar bijvoorbeeld ééndags grafieken veranderen in driedags grafieken via muisbeweging (rollover).
      • Een tweede functie is een afbeelding met ernaast een aantal tekstlijnen, de muis bewegen over de tekst geeft telkens een andere afbeelding (diashow).
      • Het script voor het tonen van tekst bij een muisbeweging over een tekst of afbeelding (Tooltip).
    3. Normale paginas slaan we op als html bestanden
      • Ze bevatten meestal algemene informatie, zoals deze pagina.
    4. Paginas met weerstationgegevens slaan we op als php bestanden
      • Weatherlink en WSwin variabelen staan in include_*.php bestanden
      • PHP paginas hebben de slechte eigenschappen om geen speciale tekens weer te geven wanneer ze niet in de broncode genoteerd staan zo moet °C als °C geschreven worden. Een pagina met speciale tekens
    5. De layout van de afbeeldingen wordt bepaald door ze doorschijnend te laten, ze op te slaan in tabellen waarvan elke cel een achtergrond krijgt die verder het uizicht bepaald. De Nederlandstalige titeltekst is Arial bold 14pt
      • We testen dit in alle browsers en merken dat het prima werkt.
      • Afbeeldingen die een weergave zijn van variabelen kunnen op verschillende manieren gemaakt worden. hierbij enkele voorbeelden:
        • Luchtdruk, UV Index en zonnestraling:
          De drie "meters" zijn in Photoshop gemaakt zonder de naald en worden in een tabel als achtergrond weergegeven.
          De naalden zijn waarde per waarde gemaakt op een doorschijnende achtergrond met als naam bvb: 1002.png voor een luchtdruk van 1002hPa, 5p1.png voor een UV van 5.1 of zon20.png voor 200W/m², telkens in de gepaste kleur.
        • De thermometer heeft ook een afbeelding per graad en is doorschijnend.
          De max / min pijltjes worden gemaakt met een php script, hierover valt wel wat te vertellen, het komt aan bod in de laatste paragraaf.
        • De barotrend, vulling van de trechters, wijzers van de windroos zijn afbeeldingen gemaakt met een php script.
          Ook de rollover afbeeldingen met info zijn afbeeldingen uit php.
        • De maan, groot en klein zijn twee maal tweehonderd figuren, één per % wassens en krimpend.
        • Als laatste zijn er nog de afbeeldingen en grafieken aangeleverd door WSwin en Weatherlink.
    6. De meetgegevens van het station worden uitgelezen zowel door Weatherlink als door WSwin. De methode om ze over te brengen naar een webpagina heeft bij beide hetzelfde schema.
      • Weatherlink:
        We creëren een station 'Moes' wat de volgende dir geeft op onze harde schijf c:\Weatherlink\Moes\Templates
        Bestanden die variabelen bevatten plaatsen we hier, ze hebben een uitgang *.htx
        Weatherlink kan ingesteld worden om deze bestanden met bepaalde regelmaat uit te lezen, de variabelen om te zetten en de bestanden weg te schrijven naar onze server. De uitgang kan ingesteld worden, we nemen over het algemeen *.php doch *.html kan ook.
      • WSwin:
        Hier is de folder waar de bestanden uitgelezen worden de folder van het programma, in ons geval c:\Weatherlink\Wswin
        WSwin zoekt naar custom.txt om de variabelen over te brengen, het bestand wordt herbenoemd bijvoorbeeld naar display.html en wordt opgeslagen in dezelfde folder op de harde schijf. WSwin brengt de bestanden over naar de server via ftp.exe zoals reeds beschreven op de pagina over het station onder de rubriek software.
      • Weatherlink & WSwin:
        Hier maken we gebruik van beide programmas om alle stationvariabelen beschikbaar te maken. We maken de drie tekstbestanden die uiteindelijk de drie include_*.php bestanden zullen worden.
        Ze zijn: include_var_5min.txt, include_var_30min.txt en include_sensors.txt
        • In custom.txt wordt de hoofding:
          <!-- %customfile=display.html% -->
          <!-- %openfile=include_var_5min.txt% -->
        • We maken vervolgens c:\Weatherlink\Wswin\include_var_5min.txt met de php $variabelen en aangepaste eerste regel als volgt:
          <!-- %customfile=include_var_5min.htx% -->
          <!-- %openfile=include_var_30min.txt% -->
        • In include_var_30min.txt
          <!-- %customfile= include_var_30min.htx% -->
          <!-- %openfile=include_sensors.txt% -->
        • In include_sensors.txt
          <!-- %customfile=include_sensors.htx% -->
        WSwin wordt ingesteld in menu Sturing/Aanpassingen wordt Tijdsturing & Extern ftp (C:\WINDOWS\system32\ftp.exe met opdrachtregel: -v -s:"C:\WeatherLink\weerstation\wswin\ftp_send.txt") aangevinkt. We kiezen 5min voor het vernieuwen. Hierdoor worden de drie *.htx bestanden aangemaakt.
        In Weatherlink in menu Setup/Internet settings worden Profile 1,2 & 3 geconfigureerd met de drie bestanden om ze elke 5min, 30min en 24u te behandelen (ook de grafieken worden hier aangevinkt). Transfer naar internet en local zetten we op on.
        Het resultaat is onze drie bestanden: include_var_5min.php, include_var_30min.php en include_sensors.php met variabelen uit zowel WSwin als Weatherlink.
      • De variabelen zijn herkenbaar voor de programmas onder volgende vorm:
        WSwin: %variabel%
        Weatherlink: <!--insideTemp-->
        php: &variabel
    7. De techniek om afbeeldingen te maken met php scripts.
      • Cronjobs: het is mogelijk de server cronjobs te laten uitvoeren. Dit zijn opdrachten die op ingestelde tijd gedaan worden, zo maken we er eentje om elk uur gegevens weg te schrijven naar een database en een tweede maakt om de vijf minuten *.png afbeeldingen die meestal als rollover gebruikt worden. De afbeeldingen zijn eenvoudig en meestal gewoon een weergave van tekst op een achtergrond.
      • In Admin van de server maken we volgende opdrachten aan voor het maken van de afbeeldingen:
        -> Minute: 6-59/5 en Command: wget -q http://www.meteomoes.be/afbeelding/cronjob/cronjobpng.php
        -> Minute: */10 en Command: wget -q http://www.meteomoes.be/libs/cronjob10min.php >/dev/null 2>&1
        -> Hour: 1,5,9,13,17,21 en Command: wget -q http://www.meteomoes.be/afbeelding/cronjob/cronjob4h.php
        -> Minute: 55 en Hour: 23 en Command: wget -q http://www.meteomoes.be/libs/cronjob24u.php >/dev/null 2>&1
        cronjobpng.php maakt afbeeldingen elke 5min, cronjob10min.php elke 10min, cronjob4h.php om de 4h en cronjob24u.php 5min voor middernacht.
      • Grafieken maken. We konden ook een PHPGraphLib Graphing Library downloaden welke toelaat om grafieken op te bouwen met PHP code. De uitleg staat op de site.
    8. Bugs en errors - Weatherlink
      • In menu File/View log kan men de eventuele fouten opvolgen.
      • De afbeeldingen met daggrafieken uit Weatherlink zijn leeg, het Plot en Chartsvenster zijn vastgelopen: in het log bestand kregen we regelmatig de melding "Error writing after download". Het bleek dat er fouten waren bij het schrijven naar download.txt - uitschakelen in menu Setup/Station config... bleek een oplossing te zijn. We hebben ook het bestand download.txt herbenoemd en Weatherlink maakte automatisch een nieuw aan.

    hogere pagina

    Up to date houden van de site.


    hogere pagina

    Databases in mysql.

    Tabel parameters uit database metesbe1_meteomoes voor records met daggemiddelden, voorbeeld is dinsdag 31 januari 2012 ingevuld door cronjob24u.php 15 min voor middernacht

    veld variabel in omschrijving voorbeeld
    temp1 $buitentempgem include_var_5min.php gemiddelde t°  
    temp2 $tempmin include_var_5min.php minimum t°  
    temp3 $tempmax include_var_5min.php maximum t°  
    temp4 $gemgrastemp include_var_30min.php gemiddelde gras t°  
    temp5 $gemmin5temp include_var_30min.php gemiddelde t° -5cm  
    temp6 $gemmin15temp include_var_30min.php gemiddelde t° -15cm  
    luchtdruk $Average33 include_var_30min.php gemiddelde luchtdruk  
    vocht1 $Average18 include_var_30min.php gemiddelde luchtvochtigheid  
    windrun $windrun = round($Average35 * 24); include_var_30min.php windrun v/d dag  
    windenergie     windenergie v/d dag  
    zonenergie     zonenergie v/d dag  
    uv        
    zon        
    windrichting     windrichting in graden  
    maand $maand include_var_30min.php maand van het jaar 1
    week $weekgetal include_var_30min.php week van het jaar 5
    jaar $hetjaar include_sensors.php jaar 2012
    jaardag $dagjaar include_sensors.php dag van het jaar 31
    maanddag $dagmaand include_var_30min.php dag van de maand 31
    weekdag $dagweek include_var_30min.php dag van de week 2
             

     


    hogere pagina
    Kleuren
    Kleurenpalet
    Kleurenpalet