Transparent wcale nie znaczy przezroczysty

Wg Microsoftu „transparent” nie znaczy wcale „przezroczysty”. Ci którzy wymyślili .Net Compact Framework (czyli tę okrojoną wersję dla PDA i komórek) uważali, że przezroczystość oznacza ustawienie takiego samego koloru tła jaki ma element nadrzędny. No i pewnie w 90% prostych formularzy i kontrolek się to sprawdza.

Ale nie trzeba się zbytnio wysilić, aby zobaczyć, że przy tworzeniu pierwszej bardziej zaawansowanej graficznie aplikacji na Windows Mobile, takie rozumowanie będzie błędne. Niech np. tłem aplikacji będzie jakiś obrazek, albo dla ułatwienia jakiś mały gradient. Oto co na wyjdzie:

Windows Mobile Emulator - przezroczyte tło w Labelach
Windows Mobile Emulator - przezroczyte tło w Labelach

Aplikacji wygląda tragicznie, bo każdy Label, PictureBox itp. ma tło jednostajne, a nie przezroczyste. Ustawienia BackgroundColor na Web / Transparent nic nie da. Trzeba napisać od początku nowego Label’a, Form’a i PictureBox’a.

Pomóc mogą dwie strony:

  1. http://blogs.commentor.dk/post/Transparent-Controls-in-NETCF.aspx
  2. http://www.codeplex.com/alphamobilecontrols

Na obrazie powyżej „transparentLabel1” jest właśnie takim przerobionym Labelem (wg pierwszego linka). Jak można się domyśleć, teraz trzeba przerobić PictureBox, aby te strzałki po prawej i lewej ekrnu też wykorzystywały przezroczystość. Ale to jutro… Dzisiaj już nie mogę patrzeć na to całe MS Visual Studio…

Popsuty upload zdjęć na Facebooku?

Ostatnio próbowałem wrzucić nowe na Facebooka. Zdjęcia na facebooku są automatycznie pomniejszane, więc do przesyłania oryginałów do znajomych się nie nadaje. Do tego lepsza jest PicasaWeb, bo ma klienta do szybkiego wrzucania plików (Google Picasa), 1Gb powierzchni dla zdjęć i fimów (lub więcej jeśli się dokupi), geotaging, komentarze, podział albumów na prywatne i publiczne, powiadamiania emailem, szybką edycję, sortowanie, integrację z kontaktami z Gmaila.

Ale czegoś tam brakuje. Facebook ma to coś. Jest to tzw. oznaczanie ludzi na zdjęciach, dzięki czemu są oni automatycznie powiadamiani przy następnym logowaniu na facebooku, że pojawiły się zdjęcia, na których oni są. Można wręcz oznaczyć ludzi, którzy nie są zapisani na facebooku, pod warunkiem że znamy ich email. Jeśli kiedykolwiek się zapiszą podając ten email, to automatycznie zobaczą, że ktoś kiedyś ich oznaczył i że są już na facebooku ich zdjęcia. Miłe zaskoczenie, wiem, bo już kilku moich znajomych się temu dziwiło.

Wracając do tematu. Chciałem dzisiaj wrzucić te 60 zdjęć. Niestety w czasie uploadu pojawia się:

Screen pokazuje w Facebook Upload, że „This is a trial version. It can be used in evaluation process only.”, co znaczy mniej więcej że to jest wersja próbna oprogramowania i może być używana jedynie do testowania.

Ciekawi mnie kto zawinił? Programista który ustawi maksymalny czas życia aplikacji, bo bał się że mu nie zapłacą? I widocznie nie zapłacili? A może robiła to firma z zewnątrz i teraz już się nie lubią z facebookiem. Albo ktoś dodał w kodzie coś, co zapomniał usunąć, a teraz już tam nie pracuję, więc go nie obchodzi.

Upload plików takim programem kończy się niepowodzeniem 🙂

P.S. Problem dotyczy tylko 'nowego’ wyglądu Facebooka. Wystarczy zmienić skórkę na starszą aby móc skorzystać z uploadu zdjęć.

Exception zdarza się nawet największym

Nawet w Plusie można napotkać się na exception:

Ktokolwiek jest odpowiedzialny za strone serwerową serwisów Plusa, to pewnie zapomniał o paru flagach na serwerze. A na pewno o obłudze błędów!! Zostawianie e.printStackTrace() jest niezbyt pro… Z drugiej strony catch all na Exception e też nie jest fajnie…

Najgorsze jest, że takie małe błędy na stronach Plusa to normalka. Najlepszy jest e-bok. Full of zasadzkas. Ktoś musiał nieźle dostać w łapę że przyklepał taką aplikację na testach… Eh.. chyba trzebabyło skorzytać z Tomcata 🙂

CSS3 i szybkie formatowanie inputów

Wyobraźcie sobie taką sytuację. Macie oto stworzoną stronę, tfu 10 stron albo i 100. Wszędzie tabele, przyciski, formularze. Ten co to wszystko stworzył nie zadbał o style, zostawił to wam. Chcemy zmienić style we wszystkich przyciskach… no ale przycisk z type=”input” to nie to samo co przycisk z type=”submit”…



Pierwsza metoda to przelecenie tych stu stron i dodanie pola class do wszystkich inputów:



Ale przeciez CSS pozwala na łatwe załatwienie sprawy:

input[type="text"] {
font:bold 10px/12px verdana,arial,serif;
padding:3px;
}
input[type="button"],input[type="submit"] {
/* co tam chcesz */
}

Znalazłem także w necie ciekawe podejście do starszych przeglądarek. Zostosowanie javascriptów pozwala osiągnąć ten sam efekt, czyli modyfikacje wszystkich stylów za pomocą jednego css’a.

Redukcja poziomów szarości

Redukcja poziomów szarości jest banalnie prosta dla wszelkich obrazów i ma złożoność w * h. Otóż bierzemy sobie
piksele z obrazka i….

// pixele to jedna dluga tablica wszystkich pikseli z obrazka
for (int i = 0; i < (w * h); i++) {
    tmp = ((pixele[i] >> 16) & 0xff) +
          ((pixele[i] >> 8) & 0xff) +
          (pixele[i] & 0xff))/3;
    tmp = ((int) (tmp / (256 / skala))) *
          (255 / (skala - 1));
    pixele[i] = (((255 & 0xff) << 24) |
                (((int) tmp & 0xff) << 16) |
                (((int) tmp & 0xff) << 8) |
                ((int) tmp & 0xff));
}

Zmienna skala może być równa od 2 do 256. Oczywiście najlepsze rezultaty otrzymamy jeśli wybierzemy 2, 4, 8, 16, 32, 64, 128 lub nawet 256. Wybranie 2 spowoduje że otrzymamy zbinaryzowany obrazek, zaś gdy wybierzemy 2 to z obrazka kolorowego powstanie obrazek w skali szarości. Proste, no nie?

A oto przykłady:

Segmentacja wododziałowa

Chyba czas zacząć pokazywać jakieś przykłady super fajnej segmentacji wododziałowej. Na początek przykładowe logo:

obraz źródłowy

To samo już po segmentacji i pokolorowaniu każdego obszaru spływu na (prawie) inny kolor:

po segmentacji i kolorowaniu

Kolejny obrazek przedstawia zbinaryzowaną wersję obrazu wejściowego:

binarny obraz

Możemy zobaczyć jak wyglądają tamy po takiej segmentacji:

tamy

A na koniec połączenie tam i obrazu wejściowego. Docelowo tamy powinny być np. koloru czerwonego, aby łatwiej odróżniały się od krawędzi figur:

nałożenie tam na obraz wejściowy

Eh wszystko ładnie pięknie. Brakuje tylko tych prostokącików w środku. Ich mój algorytm po prostu nie wykrył. Dla porównania algorytm Cannego dla wykrywania linii (Canny’s Edge Detector) z domyślnymi wartościami (128, 15):

przykładowy obraz po zastosowaniu algorytmu Cannego

A Canny wykrył mniejsze prostokąciki…niestety.