niedziela, lipca 31, 2011

Robimy widget do Windows 7 :-)

Tytułem wstępu ;-)
W pracy ważne są dla mnie godziny w Los Angeles i Dallas, jakiś czas temu wrzuciłem sobie jako element aktywnego pulpitu Windows XP kawałek kodu w HTML i JavaScript, który pokazywał mi aktualną godzinę w Krakowie, Los Angeles i Dallas.
Jednak w tym tygodniu dostałem Windows 7 (dzięki BSODom na XP :-)), a że w Windows 7 (a może i w Vista) usunięto Active Desktop to mój hack już nie działał.

Postanowiłem więc zrobić sobie widget do tego :-)
Poszperałem trochę w sieci i już wiem jak zrobić widget :-)

Nie wygląda on jakoś szczególnie ładnie, tutaj na tle mojej tapety w prywatnym laptopie:


KRK to Kraków, LAX to Los Angeles, a DFW to Dallas (jakby to kogoś interesowało to są to nazwy portów lotniczych w tych miastach).

Jak robimy widget do Windows 7? :-) Prosto :-)

Najpierw tworzymy katalog, np. Timer.Gadget, w nim zaś tworzymy plik gadget.xml o mniej więcej tej treści:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>Timer Gadget</name>
  <namespace>pl.przemelek</namespace>
  <version>1.0.0.10</version>
  <author name="Przemelek">
    <info url="przemelek.blogspot.com" />
  </author>
  <description>Timer gadget.</description>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="timezones.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>
Tutaj można znaleźć dokładny opis tego pliku i wszystkich elementów.

Dla nas ważne jest to, że wskazaliśmy, że w pliku timezones.html znajduje się kod naszego widgetu.

Jest to zwykły dokument HTML, w którym można używać JavaScript. Jedyna istotna sprawa to to, że trzeba w tym pliku podać rozmiary co robimy definiując parametry dla body, np. tak:

<style type="text/css">
body{
margin:0;
width:220px;
height:120px;
}
</style>

Dzięki temu nasz widget będzie miał szerokość 220 pikseli i wysokość 120.
Niestety taki widget będzie miał białe tło, a wolelibyśmy przezroczyste.
Do tego używamy sztuczki, po pierwsze potrzebujemy "przezroczystego" obrazka, czyli pliku PNG nagranego z przezroczystością w kanale alfa (cokolwiek to znaczy, można do tego użyć IrfanView ;-)).
Jeśli ten przezroczysty plik nagramy jako background.png to wskazujemy Windowsowi, że ma go użyć jako tła w taki sposób:

<body>
<g:background id="imgBackground" src="background.png">
[......]
</g:background>
</body>

Kropki oznaczają kod strony i skryptu.

No i prawie wszystko mamy ;-)

Teraz testowanie.
Nasz katalog trzeba skopiować do c:\Program Files\Windows Sidebar\Gadgets, do tego trzeba mieć uprawnienia administratora, później już tylko prawy mysz na puplicie i wybieramy Gadżety, a później z okienka nasz :-)
W celu wprowadzenia zmian kopiujemy pliki do tego samego katalogu, w celu zapewnienia sobie tego, że Windows wszystko zupdatuje dobrze zmienić numer wersji w gadget.xml.

Jak już nasz widget jest taki jak chcieliśmy i chcielibyśmy go komuś pokazać, lub zacząć go publikować to trzeba go spakować :-)
W tym celu po prostu zawartość naszego katalogu (czyli wszystkie pliki które są potrzebne widgetowi) pakujemy ZIPem do pliku z rozszerzeniem .gadget, w moim przypadku to Timer.Gadget.
I voilà! Widget gotowy :-)

Instalacja jest prosta, wystarczy zaklikać taki plik i Windows spyta nas czy chcemy go zainstalować.
Tutaj uwaga, to jest niepodpisany widget więc Windows będzie narzekać, że twórca jest niezweryfikowany, ale to nam raczej nie przeszkadza ;-)

Jak ktoś chce to zapraszam do pobierania :-)
Kilka uwag, gadget jest głupi i nie podaje tak naprawdę w 100% pewnego czasu w LAX i DFW, po prostu odejmuje zawsze taką samą liczbę od godziny lokalnej, to spowoduje, że przy zmianie strefy czasowej zmieni się też czas wyświetlany dla LAX i DFW ;-), dodatkowo nawet gdy będziemy ciągle w naszej strefie czasowej to widget będzie pokazywał bzdury w momencie zmiany czasu z letniego na zimowy, dodatkowo to następuje w różnym czasie u nas i u nich. Ale to detale, które nie są teraz ważne, jeśli nadal będę używał tego widgetu to po prostu sobie to zmienię gdy przyjdzie czas ;-)



Podobne postybeta
ToDo od Trello jako "oddzielna aplikacja"
Z NMEA do KML (chyba najbardziej kryptyczny tytuł postu jak stworzyłem ;-))
Programowanie jako sztuka oszukiwania ;-)
We Frankfurcie...
Jak "okradłem" Google Readera ;-)