Blog informatyczny

Jak wygenerować wartości dla własnego wybieracza kolorów (color picker'a)

2009-03-21T09:54:00.000+01:00

Wygenerowana tablica kolorów będzie służyła wybieraczowi kolorów dla aplikacji webowej napisanej w Pythonie. Dla przykładu plansza kolorów na wybieraczu będzie utworzona jako HTML-owa tabela z dynamicznym wpisywaniem wartości kolorów. Nie jest to optymalne rozwiązanie, ale proste.

Tabela przyjmnie postać

<table cellpadding='0' cellspacing='0'>
<tr>
<td style='width:2px;height:2px;background-color: rgb(colR,colG,colB);'>
</td>
...
</tr>
...
</table>

gdzie colR, colG, colB są wartościami czerwieni, zieleni i błękitu w przedziale (0-255).

Wyświetlane kolory należą do trójwymiarowej przestrzeni RGB. Plansza kolorów wybieracza kolorów windowsowego programu Paint wyświetla kolory w przestrzeni HSL o stałym L=0.5. Jest więc to dwuwymiarowa przestrzeń. H oznacza odcień (ang. hue), S - nasycenie (ang. saturation), a L - świetło (ang. lightness). Nasza tabela będzie miała wymiary 100 na 100, a wartości HSL będą z przedziału 0-1.

Wartości z przestrzeni HSL o stałym L należy przeliczyć na wartości RGB. W tym celu skorzystam z algorytmu znalezionego w Inetrnecie, a kod programu zapiszę w języku Python.

L = 0.5

html = """
<table cellpadding='0' cellspacing='0'>
"""

for i in range(99,-1,-1):
S = i/100.0
html += '<tr>'
for j in range(100):
H = j/100.0
temp2=L+S - L*S
temp1 = 2.0*L - temp2
Rtemp3=H+1.0/3.0
if Rtemp3 < 0:
Rtemp3 = Rtemp3 + 1.0
if Rtemp3 > 1:
Rtemp3 = Rtemp3 - 1.0
Gtemp3=H
if Gtemp3 < 0:
Gtemp3 = Gtemp3 + 1.0
if Gtemp3 > 1:
Gtemp3 = Gtemp3 - 1.0
Btemp3=H-1.0/3.0
if Btemp3 < 0:
Btemp3 = Btemp3 + 1.0
if Btemp3 > 1:
Btemp3 = Btemp3 - 1.0

if S == 0:
R = L
G = L
B = L
else:
if 6.0*Rtemp3 < 1:
R = temp1+(temp2-temp1)*6.0*Rtemp3
elif 2.0*Rtemp3 < 1:
R = temp2
elif 3.0*Rtemp3 < 2:
R = temp1+(temp2-temp1)*((2.0/3.0)-Rtemp3)*6.0
else:
R = temp1

if 6.0*Gtemp3 < 1:
G = temp1+(temp2-temp1)*6.0*Gtemp3
elif 2.0*Gtemp3 < 1:
G = temp2
elif 3.0*Gtemp3 < 2:
G = temp1+(temp2-temp1)*((2.0/3.0)-Gtemp3)*6.0
else:
G = temp1

if 6.0*Btemp3 < 1:
B = temp1+(temp2-temp1)*6.0*Btemp3
elif 2.0*Btemp3 < 1:
B = temp2
elif 3.0*Btemp3 < 2:
B = temp1+(temp2-temp1)*((2.0/3.0)-Btemp3)*6.0
else:
B = temp1

R1 = int(256*R)
G1 = int(256*G)
B1 = int(256*B)
line= "<td style='width:2px;height:2px;background-color: rgb("+str(R1)+","+str(G1)+","+str(B1)+");'></td>"
html += line
html += '</tr>'

html += """
</table>
"""

W wybieraczu kolorów programu Paint w systemie Windows, plansza kolorów jest stała i światło (lub jaskrawość) wynosi 0.5. Z boku znajduje się jednak suwak zmieniający jaskrawość. Zmiana jaskrawości na suwaku nie zmienia planszy, ale zmienia kolor wynikowy pokazywany w osobnym prostokącie. W ten sposób otrzymujemy trójwymiarową przestrzeń HSL.

Różne programy graficzne, np. GIMP, używają innego modelu przy wyborze kolorów. Jest to model HSV. W programie GIMP istnieje kilka plansz kolorów.

Jak stworzyć dynamiczny arkusz CSS w języku PHP?

2009-02-26T19:51:00.001+01:00

Przy użyciu języka PHP można łatwo stworzyć dynamiczny arkusz CSS, w którym style mogą zmieniać się zależnie od zmiennych PHP-owych.
Po pierwsze, tak stworzony dokument musi mieć odpowieni nagłówek HTTP, który wskaże odpowiedni typ mine, w tym przypadku text/css.
tworzymy plik PHP, np. style.php

<?php
header("Content-Type: text/css");
?>

Taki plik można zaprogramować na różne sposoby. Tutaj dla przejrzystości kodu proponuję najpierw ustawiać zmienne odpowiednimi wartościami, a później wydruk tych wartości wklejać do definicji standardowego pliku CSS.
Np. kod koloru sztywno zapisanego jako #a0a0a0 zamieniamy na . Zmienna $backgroundColor została wcześniej odpowiednio zdefiniowana.

<?php
header("Content-Type: text/css");
$backgroundColor = '#a0a0a0';
?>
body {
background-color: ;
}

Style mogą różnić się w zależności od przeglądarki ($_SERVER['HTTP_USER_AGENT']), w zależności od wartości odczytanych z sesji lub z bazy danych, w zależności od czasu lub mogą być na stałe ustawione, jeśli celem stworzenia dynamicznego arkusza CSS jest łatwość zmien w stylach.

Stworzonyw ten sposób plik PHP dołączamy do kodu HTML:

<link rel="stylesheet" href="style.php"
type="text/css" />

Czym różnią się atrybuty name i id w HTML-u?

2009-02-23T22:08:00.003+01:00

Każdy element HTML może posiadać zarówno atrybut name jak i id.
Funkcja javaScript'u

document.getElementById(id)

zwraca obiekt pojedynczego elementu HTML o danym id, natomiast

document.getElementsByName(name)

zwraca obiekt kolekcji HTML - wszystkie elementy z odpowiednim atrybutem name.
Atrybut name jest używany w formularzach. Po naciśnięciu przycisku submit formularz jest wysyłany do serwera. Po stronie serwera uzyskujemy w ten sposób pary name=value.

W kaskadowych arkuszach stulu (CSS) można definiować styl elementu poprzez id, np:

#id {
background-color: #ffffff;
}

Atrybuty name i id, choć wydają się podobne, mają troche inne zastosowanie.

Blokowanie zawartości strony internetowej elementem div

2009-02-20T20:32:00.006+01:00

Podczas tworzenia aplikacji webowej pojawiła się potrzeba zablokowania elementów strony na czas pobierania AJAX-a. Rozwiązaniem jest zastosowanie ukrytego diva, który w razie potrzeby zasłoni całą stronę.

W kodzie HTML umieszczamy odpowiedni element div:

<div id="ukrywanie"></div>

W arkuszu stylów CSS dla strony umieszczamy:

#ukrywanie{
width: 100%;
height: 100%;
top:0pt;
left:0pt;
display: none;
z-index: 1000000;
position: fixed;
background-image: url('pixel.gif');
}

Właściwość z-index ustawia porządek stosu dla elementu. Element z większą wartością z-index znajduje się zawsze przed innym elementem z mniejszą wartością, zakrywa element z mniejszą warością. Element z bardzo dużą wartocią, np. 1000000 zakryje wszystkie inne.

właściwość z-index działa jedynie dla elementów z ustawioną pozycją (np. position:fixed;)

pixel.gif to jednopikselowy przeźroczysty gif. Zastosowanie przeźroczystego gifa jako tła sprawia, że rozwiązanie sprawdza się także pod Intenet Explorerem. Bez background-image doskonale działa pod Firefoxem, ale nie pod IE.

Jeżeli chcemy dodatkowo uzyskać efekt tzw. firanek (zasłonięcie wyświetlanej strony półprzeźroczystą wartową) to do CSS-u dopisujemy:

opacity:0.3;
filter:alpha(opacity=30);
background-color: white

a właściwość background-image jest juz niepotrzebna.

Opacity działa prawidłowo w przeglądarce Mozilla Firefox, nie działa natomiast pod Internet Explorerem. Dla drugiej przeglądarki dodatkowo umieszczamy filter:alpha(opacity=30).

Wtedy CSS otrzymuje postać:

#ukrywanie{
width: 100%;
height: 100%;
top:0pt;
left:0pt;
display: none;
z-index: 1000000;
position: fixed;
opacity:0.3;
filter:alpha(opacity=30);
background-color:white;
}

Blokowanie strony uzyskujemy poprzez włączanie i wyłączanie elementu div o id "ukrywanie". Mogą temu posłuzyć następujące funkcje JavaScript:

function blokuj() {
document.getElementById( 'ukrywanie').style.display='block';
}

function odblokuj() {
document.getElementById( 'ukrywanie' ).style.display='none';
};

AJAX i SEO

2008-10-30T18:29:00.003+01:00

Z założenia AJAX i SEO wykluczją się nawzajem. Na stronach AJAX-owych zawartość jest ładowana javascriptem, co z kolei nie pozwala wyszukiwarkom jej widzieć i indeksować. Jeśli chcemy zoptymalizować stronę pod względem wyszukiwarek to należy doprowadzić do sytuacji, w której po wylączeniu javascriptu treść wyła dostępna w inny sposób.

Wyłączenie menu kontekstowego w przeglądarce internetowej

2008-10-28T19:37:00.009+01:00

Aby wyłączyć menu kontekstowe (czyli domyślne menu pojawiające się po kliknięciu prawego przycisku myszy) w przeglądarce internetowej można na przykład w znaczniku body przypisać atrybutowi oncontextmenu "return false;":

< body oncontextmenu="return false;">

Domyślne menu kontekstowe przeglądarki można wyłączać javascriptem jeśli tworzy się właśne menu kontekstowe na potrzeby aplikacji webowej. Nie zaleca się natomiast wyłączania tego menu w celu zabezpieczenia przed kradzieżą grafiki, gdyż takie zabezpieczenie można łatwo obejść.

Opisany sposób nie działa w przeglądarce Opera, nie da się tam zablokować menu kontekstowego, a własne menu należy wywoływać skrótem klawiszowym.

Switch-case emulation in Python

2008-06-12T16:00:00.003+02:00

There is no switch-case construction in python. Although one can emulate its simplicity and compactness with appropriate use of a dictionary.

d = {}
d['condition1'] = 'result1'
d['condition2'] = 'result2'
d['condition3'] = 'result3'
result = d[condition]

Result can be execution of appropriate function.

My Home Page

2008-03-29T13:38:00.002+01:00

I have created my personal home page on lukaszmalysa.ovh.org.

Zope Bible

2008-03-29T12:55:00.002+01:00

I read almost the entire book about a month ago. It is a simple general introduction to Zope with elements of Python programming.

A Byte of Python

2008-03-29T11:27:00.002+01:00

I read it some time ago. It is really the simplest book about computer programming I have ever read.

Promocja

2001-01-01T18:04:00.000+01:00

Jeżeli podoba Ci się ten blog, umieść na swojej stronie link:

<a href="http://blog.malysa.info">Blog informatyczny</a>