[php] Pasek postępu (oceny) Opcje

[GreenGo]

Witam.
Wie może ktoś jak zrobić aby pasek oceny rysował się automatycznie w zależności od jej wysokości ? Czyli np.
użytkownicy ocenili artykuł na np. 8.46 i chodzi o to aby pasek wyświetlający tą ocene wypełnił się kolorkiem do punku 8.46 biorąc za max 10 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Z góry dzięki za pomoc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[batman]

Rysujesz sobie tabelę. Tabela ma szerokość (lub wysokość) 10 (w pikselach) razy jakaś tam wartość (nie wiem jak duży ma być pasek). Następnie za pomocą css ustawiasz kolor tła dla komórki i masz ładny pasek (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował batman 17.08.2006, 22:03:04

[My4tic]

Rysujesz sobie tabelę. Tabela ma szerokość (lub wysokość) 10 (w pikselach) razy jakaś tam wartość (nie wiem jak duży ma być pasek). Następnie za pomocą css ustawiasz kolor tła dla komórki i masz ładny pasek (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Troche dziwny pomysł ;-)

A wracając do tematu to nie ma sensu bawić sie w coś co będzie rysowało obrazki z taką dokładnością. Jeśli jednak chcesz to:

http://pl2.php.net/manual/pl/ref.image.php

...jednak radziłbym zrobić oceny artykułu w postaci jakiś gwaizdek lub nawet słupka ale nie z taką dokładnością. Zrob sobie jakiś gif na 10px wysokości i w zależności czy ocena znajduje sie w przedziałach wsatawaisz odpowiednią ilość gwiazdek czy czego tam chcesz np.:

ocena < 0 - zero gwiazdek
0 < ocena < 1 - jedna gwiazdka
1 < ocena < 2 - dwie gwiazdki

..itd.

[batman]

Co do gd to nie polecam. Ma duże możliwości ale zamula i wymaga modułu, który nie zawsze jest dostepny u dostawców.
A odnośnie gwiazdek. Jest to pomysł tak samo funkcjonalny jak słupki z jednym wyjątkiem. W przykładzie podanym przez My4tic trzeba będzie napisać trochę if-ów. Po co zaśmiecać kod kolejnymi warunkami?

[GreenGo]

gwiazdki miałem do tej pory i właśnie ze względu na czytelność kodu chce to zmienić na taki pasek. Jeśli nie ma innej możliwoście to pewnie skończy się na poszerzającym się obrazku.

[Prph]

Mozna zrobic tak:

[PHP] pobierz, plaintext 
<?php
$iOcena = baza_danych_podaj_ocene();
 
for($i = 1; $i <= $iOcena; $i++)
  echo '<gwiazdka>';
?>
[PHP] pobierz, plaintext 

Adrian.

[php programmer]

Troche dziwny pomysł ;-)

Właśnie bardzo dobry pomysł,
użycie CSS dobrze nadaje się do takiego prostego wyksreu
natomiast użycie GD jest w tym przypadku to troche przesada
(z czołgiem na zająca)

na samy dole tej strony przykład
jest użyte właśnie CSS do zrobienia wykresu

Ten post edytował php programmer 18.08.2006, 10:00:24

[tiraeth]

Na dole jest nie tyle CSS to znacznik <img> ze zmienioną szerokością.... klik

Przykład CSS (działa tylko na Firefoxie i Operze):

[HTML] pobierz, plaintext 
<style type="text/css">
	div.shadows {
		margin-top : 1px;
		margin-left : 1px;
		width : 454px;
		padding-right : 1px;
		padding-bottom : 1px;
		background : #c9c9c9;
		-moz-border-radius : 4;
		border-radius : 4;
	}
 
	div.shadows>div.ProgressBar {
		top : -1px;
		left : -1px;
		width : 450px;
		height: 11px;
		background : #ffffff;
		border : solid 1px #000000;
		padding : 1px;
		position : relative;
		-moz-border-radius : 4;
		border-radius : 4;
	}
 
	div.shadows>div.ProgressBar div.percent {
		position : absolute;
		top : 0;
		width : 100%;
		margin : auto 0;
		background : 0;
		text-align : center;
		vertical-align : middle;
		font-size : 10px;
		font-weight : bold;
		font-family : Arial, sans-serif;
		font-color : #434343;
	}
 
	div.shadows>div.ProgressBar div.progress {
		display : block;
		width : 75%;
		height : 100%;
		background : #ff0000;
		-moz-border-radius : 3;
		border-radius : 3;
	}
</style>
 
<div class="shadows">
	<div class="ProgressBar">
		<div class="progress"></div>
		<div class="percent">75%</div>
	</div>
</div>
[HTML] pobierz, plaintext 

[LBO]

Co do gd to nie polecam. Ma duże możliwości ale zamula i wymaga modułu, który nie zawsze jest dostepny u dostawców.

A o cache nie słyszałeś?

Poza tym mozna gwiazdki wygenerować (stworzyć w PSP, PS) samemu, będzie to raptem z 10 gifów (jeżeli będą połowki gwiazdek).

[GreenGo]

Ok zdecydowałem się na CSS ale coś nie działa :/

Mama zmienną:

[PHP] pobierz, plaintext 
<?php
$width = $ocena2*10;
?>
[PHP] pobierz, plaintext 

a następnie kod wyświetlający pasek:

[HTML] pobierz, plaintext 
<div style=\"background-color:#000000; height:10px;  width:100px; \">
         <div style=\"width:$width px; height:10px; background-color:#3C8EA6;\"></div>
</div>
[HTML] pobierz, plaintext 

I nie wiem dla czego ale zawsze zamalowuje mi cały pasek :/

[danek]

Zrób coś takiego:

[PHP] pobierz, plaintext 
<?
$pasek=$ocena*2; //caly pasek bedzie mial 20 px
$reszta=20-$pasek;
echo'<table><tr><td width='.$pasek.'></td><td width='.$reszta.'></td></tr></table>';
?>
[PHP] pobierz, plaintext 

A po ocenie 8 otrzymasz:

[HTML] pobierz, plaintext 
<table><tr><td width=16></td><td width=4></td></tr></table>
[HTML] pobierz, plaintext 

Proste...
A w komórkach tabeli zrób odwołanie do klas w CSS

[My4tic]

Właśnie bardzo dobry pomysł

Mylisz sie - tabele nie słuzą do takich rzeczy dloatego nie jest to dobre rozwiązanie. Przykład podany przez tiraeth jest juz duzo lepszy. Chociaz i tak moim zdaniem lepiej zrobić sobie gwiazdki i jakąś funkcje do tego. Na pewno kod bedzie bardziej przejrzysty niz wtedy gdy bedzie w nim pełno tabelek.

Wywołasz sobei funkcje ProgressBar($ocena), funkcja sprawdzi jaki obrazek nalezy wstawic i taki wysle.

Zamiast:

[HTML] pobierz, plaintext 
<table><tr><td width=16></td><td width=4></td></tr></table>
[HTML] pobierz, plaintext 

bedziesz miał jedno:

[HTML] pobierz, plaintext 
<img>
[HTML] pobierz, plaintext 

Pzdr

[tiraeth]

Udało mi się zrobić alternatywny styl dla InternetExplorera (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Teraz w trzech przeglądarkach pasek postępu wygląda w miarę podobnie (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

http://phpfi.com/142501

[phpion]

A mi sie podobaja takie proste paski postepu:
llllllllllllllllllllllllllllll 40%
cos takiego (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) wystarczy uzyc dwukrotnie str_repeat() wypisujacego literke 'l' (male L) i po sprawie.
Mozesz tez uzyc zwyklego gifa o wymiarach 1x1 px i ustawic wysokosc stala np. na 20px a szerokosc wstawiac dynamicznie (np. dla 40% width: 40px;)
Albo system z gwiazdkami analogicznie do pierwszego podanego przeze mnie: np. 4 razy wyswietlasz gwiazdki zakolorowane, po nich 6 razy gwiazdki puste (dla 40%).

Ten post edytował phpion.com 19.08.2006, 19:43:06

[slawek_master]

@phpion.com efektowne i efektywne (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) mi sie tam podoba:)