Cytaty Jana Pawła II

Z pewnością wszyscy ze mną się zgodzą, że był on jednym z najwybitniejszych Polaków ostatnich lat. Ze strony http://pl.wikiquote.org/wiki/Jan_Paweł_II pobrałem cytaty autorstwa Papieża – Polaka. Po uruchomieniu skryptu co jakiś czas pojawiają się powiadomienia z cytatami. Oczywiście skrypt można dowolnie modyfikować. W chwili obecnej ustawione jest na:

• wyświetlanie co 15 minut (900 sekund)
• czas wyświetlania 15 sek (15000 milisekund)
• domyślna ikonka (notification-message-im) – można podać ścieżkę do swojej ikonki
• tytuł “Jan Paweł II”

Instalacja

Należy pobrać plik .sh – najlepiej umieścić go w katalogu głównym ~/ (u mnie /home/grzesiek/). Zainstalować pakiet
sudo aptitude install notify-osd
Nadać plikowi uprawnienia do uruchamiania jako programu. Można to zrobić przez wybranie właściwości pliku → Uprawnienia → Zezwól na wykonywanie jako programu lub przez konsolę:
chmod +x ~/LabNot.sh
Teraz można uruchomić skrypt przez dwukrotne kliknięcie pliku i „uruchom”. Można też ustawić żeby skrypt sam uruchamiał się przy starcie systemu. Można to zrobić przez System → Preferencje → Programy Startowe → Dodaj i w polu Nazwa wpisać Cytaty Jana Pawła II a w Poleceniu ścieżkę do pliku (czyli np. /home/grzesiek/LabNot.sh – oczywiście nazwę trzeba zmienić). Aby usunąć wyświetlanie cytatów trzeba usunąć po prostu proces. Można to zrobić w System → Administracja → Monitor Systemu, znaleźć na liście LabNot.sh i usunąć.
Od teraz będziemy się cieszyć cytatami wielkiego Polaka. Mała rzecz a cieszy ;-)

Animacja

Animacja, którą zrobiłem za pomocą elementu <canvas> rysuje sobie linie, które składają się na figurę geometryczną. Internet Explorer najprawdopodobniej nie pokaże żadnej animacji, więc polecam zmienić przeglądarkę jeżeli jej używasz. Policzenie linii ile potrzeba do narysowania takiego rysunku nie jest zadaniem trudnym, jednak obliczenie pola powierzchni całej figury może okazać się niełatwe. Ma ktoś pomysł?
Zobacz animację

Zasada działania

Cały plik to mieszanina HTML, CSS oraz JavaScript’u. Pominę style i przejdę od razu do kodu. Na początku deklarowane jest kilka zmiennych globalnych:

• level – numer rundy; jeśli podana suma cyfr zgadza się z rzeczywistą sumą to zmienna jest inkrementowana
• countCols – liczba kolumn obszaru dodawania; domyślnie ustawiłem 5
• countSecPerNumber – liczba milisekund przeznaczona na pokazanie kolejnej cyfry (liczba sekund wybrana na początku rozgrywki z pola select pomnożona razy 1000)
• randed – tablica wylosowanych cyfr
• endTime – do tej zmiennej będzie przypisana funkcja setTimeout
• endOfLevel – zmienna przechowuje wartość logiczną mówiącą czy zakończył się czas przewidziany na pokazanie wszystkich cyfr w tabelce; jest stworzona po to, żeby uniemożliwić podanie wyniku zanim cyfry zostaną wylosowane. Wiem, że troche dyskryminuje jasnowidzów ;-)
• levelLength – liczba milisekund, po jakiej zostanie wyświetlona ostatnia cyfra
• infoCorrect, infoWrong, infoTime, infoRunning – tablice z komentarzami człowieczka w określonych sytuacjach

Teraz czas na funkcje:

• startLabMathGame () – główna funkcja gry; wywoływana jest po kliknięciu na start i wywołuje inne funkcje
• createTable () – wywoływana jest w funkcji startLabMathGame i tworzy tabele z odpowiednią ilością wierszy i kolumn wypełnioną pytajnikami
• fillTable () – steruje czasem po jakim mają się pokazywać cyfry oraz czasem po jakim sympatyczny człowieczek poinformuje, że time is over ;-)
• fillTd (row, col) – wywoływana cyklicznie w funkcji fillTable do wylosowania i uzupełnienia pojedynczej komórki
• checkAnswer() – funkcja sprawdza poprawność odpowiedzi – jeśli jest dobra to inkrementuje zmienną level i gracz uzyskuje dostęp do kolejnej rundy
• endOfTime () – funkcja wywoływana gdy skończy się czas
• getInfo (event, correct) – wyświetla odpowiedni komentarz w zależności od sytuacji
• switchButtons(visibility) – przełącza przycisk „start” i pole tekstowe do wpisywania wyniku, aby nie były wyświetlane naraz.

Podsumowanie

Może nie stanę się sławny po opublikowaniu tego skromnego kodu, ale może się komuś przydać do nauki lub stać się inspiracją do napisania czegoś ;-) Jeśli można było coś zrobić lepiej to proszę napisz w komentarzach. Jeszcze nie czuję się guru w JavaScript, więc jestem otwarty na podpowiedzi.

LabMathGame

LabMathGame jest grą o bardzo prostych zasadach. Polega na zliczaniu sumy wyświetlanych cyfr i wpisaniu tej sumy do pola tekstowego. Prawda, że łatwe? ;-) Największą trudnością jest goniący nas czas. Na początku gry można ustawić trudność – co ile sekund ma się pojawiać kolejna liczba czyli ile będziemy mieli czasu na dodanie tej liczby do pozostałych. Na chwilę obecną dostępne są: 1s, 1.5s, 2s, gdzie 1s jest najtrudniejsze (trzeba szybciej liczyć), a 2s jest najłatwiejsze (mamy więcej czasu na liczenie).

Po pojawieniu się ostatniej liczby mamy 5 sekund na wpisanie wyniku do pola tekstowego i naciśnięcie entera. Sympatyczny pan poinformuje nas czy właściwie policzyliśmy. Jeśli tak to mamy przepustkę do kolejnej rundy. Jeśli nie to rundę trzeba powtarzać.

Podsumowanie

Gry logiczne poprawiają refleks, wyobraźnię i uczą koncentracji. Podobno nieużywany organ obumiera więc warto czasem poćwiczyć swój umysł ;-) Zapraszam do gry. W komentarzach zostawiajcie swoje rekordy. Jest to moja pierwsza gra. Kod źródłowy pokażę w najbliżsyzm czasie.

Dodaj do iGoogle

Wykres kołowy

Na początek trzeba wczytać klasę dla wykresu kołowego i utworzyć jej obiekt. Teraz najważniejsza metoda – setData(). Jest to metoda dla wszystkich typów wykresów. Definiuje ona wartości potrzebne do wygenerowania wykresu, a argumentem tej metody jest właśnie tablica wartości. Nie należy się przejmować tym, że Google Charts API przyjmuje wartości tylko z określonych zakresów. LabCharts skaluje te wartości aby zmieściły się w wyznaczonym zakresie. Nie ma limitu wartości, jednak trzeba się z tym liczyć, że przy większej ilości danych wykres może być nieczytelny. W kolejnej linijce znajduje się wywołanie wykresu tj. obrazka z odpowiednim adresem. Metoda getChart() zwraca adres obrazka wygenerowany na podstawie właściwości obiektu.

Jak widać niewiele potrzeba do wygenerowania wykresu. Wykres ten można trochę „upiększyć” za pomocą kilku metod:

• setType() – typ wykresu – dla wykresu kołowego może to być wartość „p” (2D) lub „p3” (3D)
• setTitle() – tytuł wykresu – będzie to napis widoczny na górze obrazka
• setSize() – wymiary obrazka w pixelach
• setColors() – kolor lub kilka kolorów oddzielonych znakiem „|”
• setLabels() – etykiety kolejnych wartości (w takiej samej kolejności jak podane w metodzie setData()

A tak będzie wyglądał wykres po modyfikacjach:

Wykres słupkowy

Tak jak w przypadku wykresu kołowego najpierw trzeba wczytać klasę wykresu słupkowego i utworzyć obiekt. Metoda setData() działa dokładnie tak samo. Wystarczy po prostu wczytać kolejne wartości.

Dodatkowe metody do wykresu słupkowego:

• setSize()
• setTitle()
• setColors() – kolory w systemie szesnastkowym odpowiadające kolejnym słupkom. Najlepiej jak liczba kolorów jest równa liczbie danych.
• setLabels() – etykiety kolejnych słupków oddzielone znakiem „|”
• setBarStyles() – metoda definiująca style wykresu słupkowego. Pierwszy argument metody ustawia szerokość słupków, a drugi odległość słupków od siebie.
• setAxis() – Metoda ustawia skale na osi y oraz co ile wartości ma być wyświetlana np. jeśli mamy wartości z przedziału 0-300 można ustawić wartość 30 i na osi y będą zaznaczone wartości: 0, 30, 60 itd.
• setGrids() – Metoda definiująca położenie poziomych lini pomocniczych na wykresie. Argument $range mówi co ile jednostek ma być linia. Zwyke jest to ta sama wartość co w metodzie setAxis(), ale można też ustawić inną wartość.

A wykres będzie wyglądał:

Wykres liniowy:

Inicjalizacja wygląda tak samo jak w poprzednich wykresach. Wczytanie klasy LabChartsLine, utworzenie obiektu i wczytanie danych.

Metody dla wykresu liniowego:

• setSize()
• setTitle()
• setColors()
• setAxis() – metoda działa podobnie do tej z wykresu słupkowego z tą różnicą, że przyjmuje drugi argument – nazwy etykiet na osi x, których MUSI być tyle samo co wartości zadeklarowanych w metodzie setData() oddzielonych znakiem „|”.
• setGrids() – metoda definiująca położenie poziomych i pionowych linii pomocniczych na wykresie. Argument $range mówi co ile jednostek ma być linia pozioma. Zwykle jest to ta sama wartość co w metodzie setAxis(), ale można też ustawić inną wartość. Linie pionowe są generowane automatycznie do każdej wartości na wykresie.

Podsumowanie

Wiele jest serwisów, które prowadzą różnego rodzaju statystyki. Profesor od statystyki powiedział, że jeśli tylko da się coś zobrazować to należy to zrobić ;) Klasę LabCharts łatwo można zintegrować z istniejącą aplikacją. Kod źródłowy, przykłady oraz dokumentację można pobrać poniżej.

UPDATE 2010-01-30 13:40
Dodana została metoda setBackground($color) dla wszytskich typów wykresów, która zmienia tło np. $LabChartsLine->setBackground(’474747′);

UPDATE 2010-05-22 22:59
Zmieniona została klasa LabChartsLine – teraz możliwe jest pokazywanie na wykresie liczb ujemnych i dodatnich