[PHP] Własny Progress Bar

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. 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

Nowy

Ź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'] === 0 || $config['progress_bar']['sort_by'] === 1 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'] == 0 ? 1 : $tmp['how']) * $config['progress_bar']['height']);
// Tworzenie kolorów
$tmp['color']['dark_red'] = imagecolorallocate($img, 200, 0, 0);
$tmp['color']['red'] = imagecolorallocate($img, 255, 0, 0);
$tmp['color']['orange'] = imagecolorallocate($img, 255, 200, 0);
$tmp['color']['green'] = imagecolorallocate($img, 169, 211, 41);
$tmp['color']['dark_green'] = imagecolorallocate($img, 128, 160, 32);
$tmp['color']['black'] = imagecolorallocate($img, 0, 0, 0);
$tmp['color']['white'] = imagecolorallocate($img, 255, 255, 255);
// Tło
imagefill($img, 0, 0, $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], 0, 24).'...';
  }

  if(!is_int($progress_bar[$h][1]) || $progress_bar[$h][1] < 0 || $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 + 2 * $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($img, 201, $tmp['y'][0] + 3, 201 + floor($progress_bar[$h][1] * 2.95), $tmp['y'][1], $tmp['color']['bar']);
  }

  // Lewa kreska postępu
  imagefilledrectangle($img, 200, $tmp['y'][0] + 3, 200, $tmp['y'][1], $tmp['color']['bar']);
  // Prawa kreska postępu
  imagefilledrectangle($img, 495, $tmp['y'][0] + 3, 496, $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($img, 2, 210, $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

• 1

Dodaj komentarz

Zezwolono używać: BBCode
Zabroniono używać: znaczników HTML

Podpis: (Wymagany)

E-mail: (Wymagany, niepublikowany)

Strona WWW: (Nie wymagana)

Token:

Treść tokena: (Przepisz tylko cyfry!)

Treść: (Wymagana)

Tagi

php webmaster webmastering programowanie strony www pasek tutorial porada example artykul skrypt rada projektowanie stron internetowych wlasny progress bar postepu