Jesteś w » Strona główna » Artykuły i porady » artykuł
PLIKI COOKIES: Serwis używa cookies. Więcej informacji w regulaminie serwisu. OK (wyłącz komunikat)

Artykuły i porady

  • Jak zrobić stronę WWW stacji pogodowej cz.2 - wskaźnik zegarowy

  • 2012-05-20 12:46 | aktualizacja: 2016-06-17 09:19
  • Druga część artykułu opisuje, jak w PHP zrobić wskaźniki typu zegarowego, wyświetlające parametry pogodowe takie jak np. temperatura, ciśnienie itp.

  • Tak będzie wyglądał nasz wskaźnik zegarowy


    Co potrzebujemy?


    Będziemy potrzebowali graficznych szablonów tarczy i wskazówki zegara. Szablony jak w poprzedniej części (róży wiatrów), muszą być przeźroczystymi plikami PNG (PNG-24) o identycznych wymiarach.

    Kilka informacji


    Zasada działania skryptu jest podobna do skryptu z cz. 1. Będziemy obracali szablon wskazówki o odpowiedni kąt i nakładali go na szablon tarczy zegara. Szablony możemy przygotować sami np. w Adobe PhotoShop lub skorzystać z załączonych do artykułu.

    Duża część kodu będzie wyglądała podobnie jak w przypadku róży wiatrów. Oprócz przesyłania do skryptu PHP wartości parametru ($_GET['w']), będziemy dodatkowo przesyłali jednostkę w jakiej jest parametr ($_GET['j']) i nazwę wyświetlaną na tarczy zegara (($_GET['n'])). Będziemy też przesyłać wartość minimalną ($_GET['min']) i maksymalną ($_GET['max']) parametru, będzie to nasze minimum i maksimum na skali zegara. Jednostkę i nazwę będziemy przed przesłaniem w adresie URL kodowali funkcją rawurlencode i w skrypcie dekodowali rawurldecode.


    Opis kodu PHP


    Sprawdzamy, czy wszystkie wymagane dane zostały przesłane, dekodujemy jednostkę i nazwę rawurldecode. Wartości minimalne i maksymalne przypisujemy do odpowiednich zmiennych $min i $max, a wartość parametru do zmiennej $wartosc.

    if(!isset($_GET['w'],$_GET['j'],$_GET['n'],$_GET['min'],$_GET['max']) or !(is_numeric($_GET['w']) and is_numeric($_GET['min']) and is_numeric($_GET['max'])))
    {
    exit;
    }

    $_GET['j'] = rawurldecode($_GET['j']);
    $_GET['n'] = rawurldecode($_GET['n']);

    $min = (int) $_GET['min'];
    $max = (int) $_GET['max'];
    $wartosc = $_GET['w'];


    Określamy w stopniach początek i koniec naszej skali.

    $start_stopnie=225;
    $koniec_stopnie=135;


    Obliczamy różnicę pomiędzy wartością maksymalną a minimalną. Różnice tą wykorzystujemy do obliczenia wartości przypadającej na jeden segment (podziałkę) na skali i wartości przypadającej na 1 stopień.

    $przedzial=$max-$min;
    $jeden_segment=$przedzial/12;
    $jeden_stopien=$przedzial/270;


    Ograniczamy wyjście wskaźnika poza skalę.

    if($wartosc>$max)
    {
    $wartosc=$max;
    }

    if($wartosc<$min)
    {
    $wartosc=$min;
    }


    Obliczamy kąt o jaki będziemy musieli przesunąć wskazówkę wskaźnika, dla danej wartości parametru.

    $kat=$start_stopnie+(($wartosc-$min)/$jeden_stopien);


    Deklarujemy nazwy szablonów graficznych dla tła zegara i wskazówki, a następnie tworzymy z nich obrazy.

    $wskaznik='zegar_wskaznik.png';
    $tlo_obrazu='zegar_tlo.png';

    $obr_tlo=imagecreatefrompng($tlo_obrazu);
    $obr_wsk=imagecreatefrompng($wskaznik);


    Deklarujemy kolory, które wykorzystamy przy nakładaniu tekstu.

    $kolor['czerwony'] = imagecolorallocate($obr_tlo,255,0,0);
    $kolor['czerwony2'] = imagecolorallocate($obr_tlo,162,64,51);
    $kolor['zielony2'] = imagecolorallocate($obr_tlo,13,165,0);


    Piszemy funkcje (rozbudowujemy wykorzystaną przy róży wiatru), która będzie umieszczała tekst i obliczała pozycje tekstu, tak aby był zawsze na środku niezależnie od długości i wielkości czcionki.

    function pozycja_tekstu($obrazek,$tekst,$font,$x,$y,$kolor,$lewe=0,$prawe=0)
    {
    $dlugosc_tekstu=strlen($tekst)*imagefontwidth($font);

    if($prawe==1)
    {
    $pozycja_x = ceil($x-($dlugosc_tekstu));
    }
    elseif($lewe==1)
    {
    $pozycja_x= $x;
    }
    else
    {
    $pozycja_x = ceil($x-($dlugosc_tekstu/2));
    }

    $pozycja_y = ceil($y-(imagefontheight($font)/2));

    imagestring($obrazek, $font, $pozycja_x, $pozycja_y, $tekst, $kolor);
    }


    Dla ułatwienia, deklarujemy standardową wielkość fontu. Nakładamy na obraz tarczy zegara nazwę, wartości na skali i na dole dodatkowo, wartość parametru z jednostkami.

    $font=2;

    pozycja_tekstu($obr_tlo,$_GET['n'],5,125,87,$kolor['czerwony2']);
    pozycja_tekstu($obr_tlo,$min,$font,83,165,$kolor['czerwony'],1);
    pozycja_tekstu($obr_tlo,$min+(3*$jeden_segment),$font,70,105,$kolor['czerwony'],1);
    pozycja_tekstu($obr_tlo,$min+(6*$jeden_segment),$font,125,70,$kolor['czerwony']);
    pozycja_tekstu($obr_tlo,$min+(9*$jeden_segment),$font,183,105,$kolor['czerwony'],0,1);
    pozycja_tekstu($obr_tlo,$max,$font,169,165,$kolor['czerwony'],0,1);
    pozycja_tekstu($obr_tlo,$_GET['w'].html_entity_decode($_GET['j']),5,125,195,$kolor['zielony2']);


    Dalej będzie podobnie jak w róży wiatrów. Pobieramy rozmiar wskazówki i obracamy wskazówkę. Obrócona wskazówka będzie miała większy rozmiar niż przed obrotem. Tak więc, pobieramy ponownie rozmiar po obrocie.

    $szerokosc= imagesx($obr_wsk);
    $wysokosc = imagesy($obr_wsk);

    $obr_wsk = imagerotate($obr_wsk, 360-$kat,-1);

    $nowa_szerokosc = imagesx($obr_wsk);
    $nowa_wysokosc = imagesy($obr_wsk);


    Aby przywrócić poprzednie wymiary wskazówki, tworzymy przeźroczysty obraz o szerokości i wysokości wskazówki przed obrotem.

    $obr_nowy = imagecreatetruecolor($szerokosc, $wysokosc);
    imagefill($obr_nowy, 0, 0, imagecolorallocatealpha($obr_nowy, 0, 0, 0, 127));


    Kopiujemy środkową część (o wymiarach przed obrotem) obróconej wskazówki do nowego obrazu $obr_nowy. Do obliczenia współrzędnych x i y punktów źródłowych, wykorzystamy wcześniej pobraną nową szerokość i wysokość.

    imagecopyresampled($obr_nowy, $obr_wsk, 0, 0, ($nowa_szerokosc-$szerokosc)/2, ($nowa_wysokosc-$wysokosc)/2, $szerokosc, $wysokosc, $szerokosc, $wysokosc);
    imagedestroy($obr_wsk);


    Utworzony nowy obraz obróconej wskazówki, nakładamy na obraz tarczy zegara.

    imagecopyresampled($obr_tlo,$obr_nowy,0, 0,0,0,$szerokosc, $wysokosc, $szerokosc, $wysokosc);
    imagedestroy($obr_nowy);


    Wyświetlamy wskaźnik zegarowy w przeglądarce.

    imagesavealpha($obr_tlo, true);

    header('Content-type: image/png');
    imagepng($obr_tlo);

    imagedestroy($obr_tlo);


    Do naszego wskaźnika zegarowego, odwołujemy się na stronie WWW w poniższy sposób. Przykład dla ciśnienia "1006.9", jednostki "hPa", nazwy "Ciśnienie" i skali zaczynającej się od 970(min) i kończącej na 1030(max).

    <img src="nasz_skrypt.php?w=1006.9&j=<?php echo rawurlencode('hPa'); ?>&n=<?php echo rawurlencode('Ciśnienie'); ?>&max=1030&min=970" alt="Ciśnienie" />


    Żeby nie było problemów z jednostkami i nazwami przekazywanymi w URL, kodujemy je funkcją rawurlencode.

    Autor: Parasol (Stacje-Pogody.pl)
  • Szablon tarczy wskaźnika zegarowego
    Szablon wskazówki wskaźnika zegarowego
    Tak będzie wyglądał nasz wskaźnik zegarowy
  • Dodaj komentarz
    • Ocena treści:
    • Imię (nick):
    • Komentarz:

      Komentarz może mieć do 1999 znaków. Liczba wprowadzonych znaków: 0
    • Wpisz kod z obrazka:    Aby dodać komentarz wpisz kod z obrazka
 
Copyright © 2018 Stacje-Pogody.pl. Korzystanie z serwisu oznacza akceptację regulaminu.
Powered by WMrecenzje