Projektowanie stron WWW od podszewki
Losowy artykuł: Bug YouTuba

Artykuły na każdy temat

[PHP] Własny Progress Bar

Dodano 15.02.2010r. o 09:18
Jakiś czas temu rozmawiałem ze swoim internetowym znajomym jsmp. Po krótkiej konwersacji pokazał mi swój progress bar. Po paru dniach udostępnił mi także źródła. Postanowiłem je gruntownie przebudować i pokazać światu. Wink Być może ktoś też chciałby mieć taki progress bar jak ten na stronie Aktualnie pracuję nad.

Opis konfiguracji

Po pierwsze sortowanie. Jeżeli chcemy aby wartości były w jakiś sposób sortowane musimy to ustawić w $config['progress_bar']['sort_type'] i $config['progress_bar']['sort_by']. Pierwsza zmienna mówi nam czy ma to być sortowanie malejące czy rosnące. Druga zmienna mówi nam według czego mamy sortować. W przypadku tego skryptu 0 oznacza sortowanie według nazw projektów natomiast 1 oznacza sortowanie według postępu prac. Jeżeli chcemy wyłączyć sortowanie wystarczy aby zmienna $config['progress_bar']['sort_type'] miała inna wartość niż asc i desc albo ustawiamy zmiennej $config['progress_bar']['sort_by'] wartość null. Zmienna $config['progress_bar']['right_aligned_procent'] informuje skrypt czy chcemy aby postęp prac był wyrównywany do prawej czy do lewej. Ostatnia zmienna jaka można napotkać jest $config['progress_bar']['inscriptions_on_the_bar'], która włącza napisy na progress barze gdy projekt jest bliski ukończenia bądź jest ukończony. Naturalnie można dodać własne wartości.

Wygląd

Tak jak wspomniałem podejrzeć prace skryptu można na stronie Aktualnie pracuję nad. Poniżej pokazuje zrzuty ekranu ze wszystkich możliwych stanów progress bara. Dodatkowo pokazuje porównanie względem mojego starego progress bara.

Stary

old-progress-bar.png

Nowy

new-progress-bar.png

Źródło

Plik config.php
Kod:
<?php
#--------------------------------------------+
# Authors: CapaciousCore & jsmp              |
# Website: www.CapaciousCore.pl              |
#          www.jsmp.republika.pl             |
#                                            |
#                       All rights reserved! |
#--------------------------------------------+

$config['progress_bar']['sort_type'] = 'desc'// asc / desc
$config['progress_bar']['sort_by'] = 1// null -> not sort / 0 -> sort by title / 1 -> sort by procent
$config['progress_bar']['width'] = 500// don't touch
$config['progress_bar']['height'] = 20// don't touch
$config['progress_bar']['font_size'] = 2// don't touch
$config['progress_bar']['right_aligned_procent'] = false// true -> wyrównuje procenty do prawej / false -> wyrównuje procenty do lewej
$config['progress_bar']['inscriptions_on_the_bar'] = true// true -> pokazuje napisy na pasku postępu / false -> nie pokazuje napisów na pasku postępu
?>
Plik lang_progress_bar.php
Kod:
<?php
#--------------------------------------------+
# Authors: CapaciousCore & jsmp              |
# Website: www.CapaciousCore.pl              |
#          www.jsmp.republika.pl             |
#                                            |
#                       All rights reserved! |
#--------------------------------------------+

$lang['progress_bar']['we_currently_do_not_work_on_any_project'] = 'Aktualnie nie pracuję nad żadnym projektem';
$lang['progress_bar']['been_completed'] = 'zakończony';
$lang['progress_bar']['its_almost_done'] = 'już prawie, prawie...';
?>
progress_bar.php
Kod:
<?php
#--------------------------------------------+
# Authors: CapaciousCore & jsmp              |
# Website: www.CapaciousCore.pl              |
#          www.jsmp.republika.pl             |
#                                            |
#                       All rights reserved! |
#--------------------------------------------+

define('PROGRESS_BAR'true);

// Pobranie konfiguracji
include './config.php';
// Pobranie zawartości progress bara
include './data.php';
// Pobranie tablicy języka
include './lang_progress_bar.php';

// Sorotwanie
if($config['progress_bar']['sort_by'] === || $config['progress_bar']['sort_by'] === AND $config['progress_bar']['sort_type'] == 'asc' || $config['progress_bar']['sort_type'] == 'desc')
{
 foreach($progress_bar as $key => $value)
 {
  $tmp['column'][$key] = $value[$config['progress_bar']['sort_by']];
 }

 array_multisort($tmp['column'], ($config['progress_bar']['sort_type'] == 'asc' SORT_ASC SORT_DESC), $progress_bar);
}

$tmp['how'] = count($progress_bar);
// Tworzenie obrazka
$img imagecreate($config['progress_bar']['width'], ($tmp['how'] == $tmp['how']) * $config['progress_bar']['height']);
// Tworzenie kolorów
$tmp['color']['dark_red'] = imagecolorallocate($img20000);
$tmp['color']['red'] = imagecolorallocate($img25500);
$tmp['color']['orange'] = imagecolorallocate($img2552000);
$tmp['color']['green'] = imagecolorallocate($img16921141);
$tmp['color']['dark_green'] = imagecolorallocate($img12816032);
$tmp['color']['black'] = imagecolorallocate($img000);
$tmp['color']['white'] = imagecolorallocate($img255255255);
// Tło
imagefill($img00$tmp['color']['white']);
// Rozmiary czcionek
$tmp['font']['width'] = imagefontwidth($config['progress_bar']['font_size']);
$tmp['font']['height'] = imagefontheight($config['progress_bar']['font_size']);

if($tmp['how'] > 0)
{
 for($h 0$h <  $tmp['how']; ++$h)
 {
  if(strlen($progress_bar[$h][0]) > 27)
  {
   $progress_bar[$h][0] = substr($progress_bar[$h][0], 024).'...';
  }

  if(!is_int($progress_bar[$h][1]) || $progress_bar[$h][1] < || $progress_bar[$h][0] > 100)
  {
   $progress_bar[$h][1] = 0;
  }

  // Pozycja procentów
  if($config['progress_bar']['right_aligned_procent'] == true)
  {
   $tmp['procent_length'] = strlen($progress_bar[$h][1]);

   if($tmp['procent_length'] == 1)
   {
    $tmp['procent_position'] = 170 $tmp['font']['width'];
   }
   else if($tmp['procent_length'] == 2)
   {
    $tmp['procent_position'] = 170 $tmp['font']['width'];
   }
   else
   {
    $tmp['procent_position'] = 170;
   }
  }
  else
  {
   $tmp['procent_position'] = 170;
  }

  // Obliczanie y1, y2
  $tmp['y'][0] = 20 $h;
  $tmp['y'][1] = 20 $h $tmp['font']['height'];
  // Nazwa projektu
  imagestring($img$config['progress_bar']['font_size'], 5$h 20 2$progress_bar[$h][0], $tmp['color']['black']);
  // Postęp
  imagestring($img$config['progress_bar']['font_size'], $tmp['procent_position'], $h 20 2$progress_bar[$h][1].'%'$tmp['color']['black']);

  // Wybieranie koloru dla paska postępu
  if($progress_bar[$h][1] > 85)
  {
   $tmp['color']['bar'] = $tmp['color']['dark_green'];
  }
  else if($progress_bar[$h][1] > 70)
  {
   $tmp['color']['bar'] = $tmp['color']['green'];
  }
  else if($progress_bar[$h][1] > 40)
  {
   $tmp['color']['bar'] = $tmp['color']['orange'];
  }
  else if($progress_bar[$h][1] > 10)
  {
   $tmp['color']['bar'] = $tmp['color']['red'];
  }
  else
  {
   $tmp['color']['bar'] = $tmp['color']['dark_red'];
  }

  // Pasek postępu
  if($progress_bar[$h][1] > 0)
  {
   imagefilledrectangle($img201$tmp['y'][0] + 3201 floor($progress_bar[$h][1] * 2.95), $tmp['y'][1], $tmp['color']['bar']);
  }

  // Lewa kreska postępu
  imagefilledrectangle($img200$tmp['y'][0] + 3200$tmp['y'][1], $tmp['color']['bar']);
  // Prawa kreska postępu
  imagefilledrectangle($img495$tmp['y'][0] + 3496$tmp['y'][1], $tmp['color']['bar']);

  // Napisy na progress barze
  if($config['progress_bar']['inscriptions_on_the_bar'] === true)
  {
   if($progress_bar[$h][1] == 100)
   {
    $tmp['inscription'] = $lang['progress_bar']['been_completed'];
   }
   else if($progress_bar[$h][1] > 95)
   {
    $tmp['inscription'] = $lang['progress_bar']['its_almost_done'];
   }
   else
   {
    $tmp['inscription'] = '';
   }

   imagestring($img2210$tmp['y'][0] + 1$tmp['inscription'], $tmp['color']['black']);
  }
 }
}
else
{
 $tmp['font']['width'] *= strlen($lang['progress_bar']['we_currently_do_not_work_on_any_project']);
 $tmp['position']['center'] = ceil(($config['progress_bar']['width'] - $tmp['font']['width']) / 2);
 $tmp['position']['middle'] = ceil(($config['progress_bar']['height'] - $tmp['font']['height']) / 2) - 1;
 // Tworzenie wyśrodkowanego napisu mówiącego o braku projektów
 imagestring($img$config['progress_bar']['font_size'], $tmp['position']['center'], $tmp['position']['middle'], $lang['progress_bar']['we_currently_do_not_work_on_any_project'], $tmp['color']['black']);
}

header('Content-type: image/png');
# header('Expires: Mon, 26 Jul 1997 0500 GMT');
# header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
# header('Cache-Control: no-store, no-cache, must-revalidate');
# header('Cache-Control: post-check=0, pre-check=0', false);
# header('Pragma: no-cache');

imagepng($img);
imagedestroy($img);
?>
I zapomniany data.php
Kod:
<?php
#--------------------------------------------+
# Authors: CapaciousCore & jsmp              |
# Website: www.CapaciousCore.pl              |
#          www.jsmp.republika.pl             |
#                                            |
#                       All rights reserved! |
#--------------------------------------------+

$progress_bar[] = array('Projekt 1'30);
$progress_bar[] = array('Projekt 2'60);
?>

Komentarze

Publikowane komentarze są prywatnymi opiniami użytkowników serwisu. Serwis nie ponosi odpowiedzialności za treść opinii. W trosce o zachowanie poziomu dyskusji wszystkie komentarze podlegają akceptacji przed ich publikacją dlatego proszę cierpliwie czekać aż komentarz zostanie opublikowany.

CapaciousCore

Dodano 01.08.2012r. o 21:57
@mator96 zakomentuj linijke z header() oraz imagepng() i zobacz co się dzieje :]

mator96

Dodano 27.07.2012r. o 09:31
Ja również mam problem z tym skryptem, mam taki błąd:
Obrazek: "Mojastrona.pl" nie może zostać wyświetlony ponieważ zawiera błędy.

Wiesz jak to rozwiązać?

CapaciousCore

Dodano 17.02.2012r. o 13:17
@php-team Odpowiedź na poziomie osoby początkującej na forum dyskusyjnym. Skoro pada stwierdzenie, że coś nie działa to mówi się także co konkretnie... Po drugie to jest tylko example i jak się nie podoba to zrób lepszy (na jednym pliku, a najlepiej OOP i w ogóle co tam sobie wymarzysz).

php-team

Dodano 17.02.2012r. o 11:03
do dupy taki progress bar, zrób to w jednym pliku, i popraw błędy bo nie działa

guest

Dodano 31.07.2011r. o 15:45
Bardzo fajny progress bar Smile

CapaciousCore

Dodano 06.03.2010r. o 23:54
Hm, przepraszam za niedociągnięcie. Przeoczywszy najwyraźniej Wink Zaraz zmodyfikuje. W pliku data.php znajdują się dane dla progress bara czyli projekty jakie wykonujemy.

awerd

Dodano 06.03.2010r. o 14:46
Co ma się znajdować w pliku data.php ?

Dodaj komentarz

Zostaw komentarz jeżeli możesz! Nie bądź przysłowiowym botem! Nie bądź obojętny! Ciebie to nic nie kosztuje, a mi sprawi uśmiech na twarzy.
Zezwolono używać: BBCode
Zabroniono używać:
znaczników HTML

(Wymagany)

(Wymagany, niepublikowany)

(Nie wymagana)

Token:

Obrazek dla bota

(Przepisz tylko cyfry!)

(Wymagana)