Elektroda.pl
Elektroda.pl
X
Proszę, dodaj wyjątek www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Mechanizm sterowania bramą garażową oparty na Electric Imp

Hetzer 21 Sie 2013 21:42 10995 0
  • Mechanizm sterowania bramą garażową oparty na urządzeniu Electric Imp
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Autor projektu pisze: ,,Nie jestem w stanie policzyć ile razy wracałem się, aby sprawdzić czy na pewno pamiętałem o zamknięciu bramy garażowej.” Ten projekt ma za zadanie pokazać w jaki sposób podłączyć moduł Electric Imp do mechanizmu otwierającego bramę, w jaki sposób sterować bramą z poziomu smartphone ‘a i jak zdalnie sprawdzić aktualny stan bramy, z dowolnego miejsca na świecie. Za każdym razem kiedy brama zostaje otwarta lub zamknięta czujnik odbiera informację o tym, a następnie urządzenie wysyła wiadomość tekstową do zdefiniowanej wcześniej grupy numerów telefonów. Na rynku jest wiele komercyjnych urządzeń tego typu, jednak ten projekt ukazuje w jaki sposób możemy wykonać je samodzielnie, nie wydając przy tym zbyt wielu pieniędzy.

    Co prawda autor w tym projekcie do sterowania użył iPhone ’a, jednak równie dobrze wykorzystać można jakikolwiek inny smartphone, tablet lub urządzenie mające dostęp do Internetu. Jeśli użyjemy jednak urządzenia iPhone, to dodatkowo istnieje możliwość zapisania w urządzeniu kodu strony odpowiedzialnej za sterowanie, dzięki czemu będzie ona widoczna, i będzie działała jak prawdziwa aplikacja pobrana z App Store, bez konieczności przechodzenia przez procedury konieczne do faktycznego rozpoczęcia dystrybucji takiej aplikacji. Smartphony stały się nieodłącznym elementem naszego życia – większość ludzi nie wychodzi z domu bez nich, niektórzy nie są w stanie wytrzymać kilku godzin bez używania smartphone ’a. Są jednak zalety takiego stanu rzeczy, na przykład taka, że dzięki temu możemy mieć zawsze przy sobie osobisty sterownik do otwierania/zamykania drzwi garażowych. Znacznie wygodniej jest, kiedy nie musimy nosić przy sobie lub trzymać w samochodzie pilotów, które często są łakomym kąskiem dla złodzieja, niepotrzebnie stwarzając tym samym zagrożenie.

    Electric Imp to bardzo ciekawe urządzenie, które umożliwia sterowanie przy pomocy sieci Wi-Fi czymkolwiek. Bez większego wysiłku możemy sterować czym tylko zechcemy przy użyciu smartphone ’a, przeglądarki internetowej lub innego urządzenia mającego dostęp do Internetu.

    Aby jednak projekt był kompletny, należy również wykonać część elektroniczną, stworzyć odpowiednie oprogramowanie oraz wykonać aplikację HTML, dzięki której będziemy mogli sterować bramą garażową. Ten projekt opiera się na elektrycznym mechanizmie otwierania bramy garażowej, który został już zamontowany, a którym normalnie sterujemy za pomocą zwykłych przycisków. Jeśli posiadasz ręczny mechanizm otwierania bramy, niestety nie jesteś szczęśliwcem, który będzie mógł cieszyć się z jego zautomatyzowanej, zdalnej wersji, jednak w tym projekcie możesz nadal dowiedzieć się nieco o urządzeniu Electric Imp i tworzeniu aplikacji HTML na telefon. Po skończeniu projektu będziesz mógł używać obydwu wersji sterowania bramą, zarówno poprzez przyciski, jak i przez smartphone ‘a – wszystkie istniejące mechanizmy otwierający nadają się do tego celu.
    Temat sterowania bramami garażowymi z poziomu telefonu jest całkiem nowy. W tym projekcie autor zawarł również niejako odpowiedzi na często pojawiające się na forach internetowych pytania typu „w jaki sposób mogę sterować urządzeniem Electric Imp z poziomu przeglądarki internetowej?”, „w jaki sposób mogę sterować przekaźnikiem przez urządzenie Electric Imp?”, „jak stworzyć własną aplikację HTML na telefon?” lub „jak mogę pobrać dane z Electric Imp na telefon?” itp.

    Krok 1: Teoretyczny schemat działania
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Zwykłe mechanizmy otwierania drzwi garażowe zawierają przycisk, którego wciśnięcie zamyka obwód, co zaś jest sygnałem dla sterownika silnika, że należy rozpocząć otwieranie lub zamykanie, w zależności od tego, jaki sygnał został wysłany poprzednim razem. Jeśli poprzednio wysłano sygnał o zamknięciu bramy, następne naciśnięcie przycisku spowoduje ich otwarcie i na odwrót. Obwód, który zamierzamy zamontować będzie połączony równolegle z przełącznikiem odpowiadającym za ręczne sterowanie, więc zarówno sygnał z przekaźnika sterowanego naszym urządzeniem, jak i przyciśnięcie przycisku spowoduje uruchomienie mechanizmu otwierającego bramę.

    Jak możemy przeczytać w opisie urządzenia Electric Imp, po wybraniu odpowiedniego polecenia w aplikacji Sesame na ekranie naszego iPhone zostaje wysłana wiadomość poprzez protokół HTTP Post (można użyć zarówno sieci Wi-Fi, jak i danych mobilnych w telefonie) do serwerów Imp. Wiadomość taka opatrzona jest unikalnym numerem identyfikacyjnym ID, który zawiera informacje o tym konkretnym modelu urządzenia Electric Imp, którego chcemy użyć.

    Serwer Imp namierza adres IP docelowego urządzenia Electric Imp, a następnie przekierowuje do niego tą właśnie wiadomość poprzez Internet i router bezprzewodowy. Wewnątrz urządzenia Electric Imp wiadomość zostaje odebrana i przekierowana do wewnętrznego oprogramowania poprzez terminal HTTP. Ostatecznie, oprogramowanie odczytuje i interpretuje wiadomość w zależności od tego, jakie funkcje zostały w nim zaprogramowane. W tym wypadku, wiadomość wysłana za pośrednictwem HTTP dociera w ostateczności do styków przekaźnika, podłączonych do obwodu, do pinu 7. W ten oto sposób infrastruktury sieci warte miliardy dolarów zostają wykorzystane przez nas do sterowania prostym przełącznikiem. Wszystko odbywa się błyskawicznie. W najgorszym wypadku, opóźnienie może wynosić od 1 do 2 sekund, jednak w większości przypadków jest znacznie mniejsze.

    Krok 2: Przesyłanie informacji o stanie bramy do iPhone ’a
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Przesyłanie informacji o stanie bramy do iPhone ’a jest jednak pewnym wyzwaniem. Electric Imp może komunikować się wyłącznie z serwerem Imp – nie ma tutaj żadnego kanału służącego do komunikacji ze smartphone ‘m w trybie ad-hoc. Aby móc otrzymywać wiadomości od naszego urządzenia na smartphone ‘a potrzebujemy pośrednika. Tym pośrednikiem może być zarówno serwer Web, jak i jakakolwiek inna usługa Web zdolna do komunikacji ze smartphone ‘m. Sygnały z urządzenia Electric Imp są wysyłane z powrotem do serwera Imp i mogą być przekazane do serwera pośredniczącego poprzez protokół http, który możemy skonfigurować w oprogramowaniu Electric Imp Planner. W zależności od rodzaju używanej usługi, iPhone może sprawdzać status z pośredniczącego serwera Web lub innej usługi Web wykorzystując AJAX lub też status może być wysyłany automatycznie SMS ‘em, email ‘em itp.
    Mając to na uwadze, autor stworzył stronę ASP.NET (GarageUpdater.aspx) na serwerze Web, z którym komunikuje się urządzenie Electric Imp w celu przesłanie danych na temat stanu bramy. Aktywna strona Web jest wywoływana przez serwer Imp za każdym razem, kiedy oprogramowanie wyśle żądanie do portu http. Każda zmiana stanu bramy zostaje zapisana w bazie danych SQL serwera poprzez tą stronę Web, która dodatkowo zawiera kod umożliwiający wysłanie wiadomości tekstowej SMS do zdefiniowanej grupy numerów telefonów.

    Ostatecznie program Planner dostępny na serwerze Imp bazujący na oprogramowaniu COSM, które umożliwia zapisywanie stanu drzwi do COSM (nazwa została zmieniona na Xively, jednak starego interfejsu nadal można używać). Chyba nie ma krótszej i łatwiejszej drogi na sprawdzenie stanu bramy. Według najnowszych informacji Electric Imp ma wkrótce udostępnić funkcję wysyłania wiadomości SMS bezpośrednio z agenta pracującego na serwerze Imp, jednak na tą chwilę agent ten jest nadal w fazie zamkniętej bety. Są również głosy, jakoby wraz z tą funkcją w Electric Imp miało pojawić się kilka innych, które w znacznym stopniu ułatwiłyby i rozwinęły możliwości komunikacji I/O przez protokół HTTP.

    Krok 3: Elementy i narzędzia
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Teraz, kiedy mamy już ogólny obraz sposobu w jaki urządzenie działa I komunikuje się ze smartphone ‘m możemy przejść do dalszej części tego projektu, dotyczącej stworzenia odpowiedniego obwodu i oprogramowania oraz jego instalacji. Aby móc wykonać urządzenie należy zaopatrzyć się w komponenty i narzędzia wymienione poniżej:
    -Urządzenie Electric Imp Link
    -Płytka rozwojowa urządzenia Electric Imp Link
    -Mały przekaźnik 5V Link
    -Tranzystor NPN Link
    -Dioda 1N4148 Link
    -Lutownica i lutowie
    -Przewód 24AWG
    -Przełączniki stykowe Link
    -Inne drobne narzędzia elektryczne (przecinaki do przewodu, urządzenie do zdejmowania izolacji itp.)
    -Mały kawałek uniwersalnej płytki montażowej Link
    -2x rezystor o wartości 56kΩ 1/4W 10%
    -1x rezystor o wartości 470Ω
    -3x wtyczka molex 2-pinowa męska i żeńska

    Krok 4: Wykonywanie elektronicznej części projektu
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Electric Imp jest bardzo ciekawym urządzeniem, które można wykorzystać w bardzo wielu funkcjonalnych rozwiązaniach. Sam układ Electric Imp wygląda jak karta SD oraz wkładana jest właśnie w slot na karty SD zamocowany na płytce rozwojowej. Płytka rozwojowa zawiera wspomniany wcześniej numer identyfikacyjny ID, który jest konieczny, aby możliwa była komunikacja z serwerem Imp. Dobry opis urządzenia możemy znaleźć na stronie: Link

    Jeśli kupisz nowy moduł Electric Imp, musi on zostać skonfigurowany w odpowiedni sposób. Odbywa się to przy użyciu aplikacji dostępnej na smartphone ‘a, która przesyła informacje o konfiguracji sieci Wi-Fi do wewnętrznej pamięci urządzenia. Szczegółowa instrukcja dostępna jest na stronie Web Imp, dostępnej pod poniższym odnośnikiem: Link

    Obwód jest wykonany zgodnie ze schematem zamieszczonym poniżej. Autor użył płytki uniwersalnej, jednak równie dobrze można użyć zwykłej pytki PCB.

    Krok 5: Czujniki krańcowe i ich łączenie
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Czujniki krańcowe odpowiedzialne za sygnalizacje stanu bramy są zamocowane za pomocą cienkich, wygiętych pasków aluminium. Ich grubość to prawdopodobnie ok 0.060”. Są zamontowane do szyny, gdzie przesuwający się element bramy będzie aktywował je sygnalizując tym samym otwarcie lub zamknięcie bramy.

    Przełączniki połączone są z wejściami w obwodzie oznaczonymi, jako wejścia czujników. Kiedy przełącznik jest zamknięty, linia wejściowa jest uziemiona. Oprogramowanie odczytuje ten sygnał jako zera lub jako aktywację czujnika. Więc, kiedy brama jest zamknięta, linia czujnika odpowiedzialnego za stan „zamknięty” jest w stanie niskim, zaś druga linia w stanie wysokim. Odwrotna sytuacja następuje w momencie, kiedy brama zostanie otwarta.

    Cały obwód zasilany jest przez port USB przy użyciu ładowarki do iPhone ‘a podłączonej do gniazdka znajdującego się blisko mechanizmu otwierania bramy. Cały obwód jest podwieszony na opasce zaciskowej… Nie wygląda zbyt ładnie, ale spełnia swoje zadanie.

    Krok 6: Oprogramowanie I narzędzie Planner
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Oprogramowanie urządzenia Electric Imp znajduje się na serwerach Imp „w chmurze”. Kiedy uruchomisz urządzenie, łączy się ono z serwerem i pobiera oprogramowanie skonfigurowane pod nasze urządzenie.
    Konfiguracja oprogramowania Electric Imp odbywa się przy pomocy narzędzia zwanego Planner. Funkcje i zasady działania programu Planner są obszernie opisane na stronie Wiki poświęconej właśnie temu urządzeniu. Odnośnik do wspomnianej strony: Link

    Oprogramowanie i inne potrzebne pliki są załączone w tym kroku.

    Aby móc używać urządzenia, jako mechanizmu otwierania bramy garażowej, program Planner został skonfigurowany poprzez dodanie terminali HTTP IN, HTTP REEQUEST i dwóch innych terminali COSM. Jeśli chcemy wyłącznie sterować drzwiami, wystarczy jedynie terminal HTTP IN. Inne terminale zostały dołączone, aby umożliwić komunikację w celu przekazywania stanu bramy.

    Aby skonfigurować terminal, kliknij na suwak znajdujący się w prawym górnym narożniku prostokąta, a następnie w okienku pop-up, które się pojawi wprowadź odpowiednie informacje. Terminal HTTP IN nie wymaga konfiguracji. Jeśli chodzi o COSM, będziesz potrzebował osobnego terminala dla każdego elementu, ponieważ każdy terminal COSM może pobierać tylko pojedynczą wartość. Jako, że mamy dwa przyciski, z których sygnały będziemy chcieli pobierać, musimy utworzyć dwa terminale połączone z dwoma strumieniami danych. API Key i Feed ID zostanie udostępnione, kiedy zostaną utworzone strumienie w terminalach COSM. Terminal HTTP REQUEST jest również bardzo ważny w naszym przypadku, ponieważ to on odpowiada za wysyłanie wiadomości SMS za każdym razem, kiedy czujniki wykryją zmianę stanu bramy. Terminal jest tak skonfigurowany, aby łączył się z zewnętrznym serwerem Web, który udostępnia stronę GarageUpdater.aspx. Strona ta aktualizacje bazę danych SQL i wysyła wiadomości SMS na telefon. Zostanie to opisane dokładniej w innym kroku.

    GarageDoor.zip

    Krok 7: Strona serwera ASP.NET
    Mechanizm sterowania bramą garażową oparty na Electric Imp
    Wszystko zostało wykonane przy użyciu narzędzia Visual Studio Express 2012, które jest darmowe i możliwe do pobrania ze strony Microsoftu pod tym odnośnikiem: Link.

    Strona pobiera dane i zapisuje je w bazie danych SQL znajdującej się na serwerze, ponieważ autor miał w planach wykorzystać to, aby umożliwić pobieranie aktualnego stanu bramy z poziomu telefonu. Pomysł był taki, aby telefon mógł połączyć się z bazą danych SQL znajdującą się na serwerze i pobrać aktualny stan bramy w dowolnej chwili, kiedy zażyczy sobie tego użytkownik. Autor nie dokończył jednak tego rozwiązania dlatego, że w międzyczasie wykonany został system powiadamiania za pomocą wiadomości tekstowych SMS i autor mógł korzystać bezpośrednia z terminala COSM przy użyciu HTML, przestała więc istnieć potrzeba komunikowania się z oddzielną bazą danych. Dane są jednak nadal zapisywane, więc autor może w każdej chwili rozwinąć stronę tak, aby można było pobierać stan bramy z serwera, jednak na tę chwilę autor nie planuje rozwijania tej funkcji. Jeśli ktoś nie chciałby używać COSM lub nowej usługi XIVELY.COM, baza danych może okazać się najlepszym wyjściem w tej sytuacji. Jeśli jednak komuś wystarczają powiadomienia poprzez wiadomości tekstowe, za każdym razem kiedy czujniki wykryją zmianę, to zaproponowane przez autora projektu rozwiązanie może okazać się najlepsze w tej sytuacji.
    Usługa wiadomości SMS jest dostarczana przez serwis Link
    Sam autor poleca usługi tej firmy – miesięcznie dostajemy możliwość wysłania 500 SMS-ów za darmo, a sam interfejs API programu jest przejrzysty i łatwy w obsłudze. Nawet jeśli ktoś posiada bardzo „ruchliwą” bramę garażową, taka ilość SMS-ów powinna mu wystarczyć. Interfejs programu został też bardzo dobrze opisany, co umożliwia przejście przez cały proces konfiguracji krok po kroku. Nie ma tutaj żadnych niespodzianek lub ukrytych „gwiazdek”, śmiało można korzystać z serwisu dostępnego pod odnośnikiem Link
    Żądanie wysyłane z urządzenia Electric Imp do strony Web jest złożone z ciągu parametrów, wymienionych po przecinkach.

    http://YourServer.com/ImpGarage/GarageUpdater.apsx
    Parametry mają formę: value=ImpID, openSensorStatus, closedSensorStatus, Status

    Gdzie
    -ImpID = numer identyfikacyjny ID urządzenia Electric Imp, w razie gdyby ktoś posiadał kilka bram garażowych, może dzięki temu w łatwy sposób je odróżniać.
    -openSensorStatus = 0 lub 1 w zależności od tego, który czujnik jest aktywny, a który nie. Wartosć 0 występuje wtedy, gdy czujnik został aktywowany (tj. przełącznik został zwarty, co zaś oznacza, że brama znajduje się właśnie w tej pozycji, mówiąc jaśniej 0 = brama otwarta)
    -closedSensorStatus = 0 lub 1, gdzie 0 = brama zamknięta 1 = brama otwarta
    -Status = wiadomość, która ma za zadanie opisać aktualny stan bramy, jako „Otwarta”, „W trakcie zamykania”, „Zamknięta” lub „W trakcie otwierania”

    Wartości są najpierw analizowane i przekształcane na odpowiednią formę, a następnie tekst wiadmości jest wysyłany za pomocą wiadomości SMS do grupy zdefiniowanych wcześniej numerów telefonów w serwisie SendHub. Jedyną problematyczną częścią tego procesu było sprawienie, aby wszystko działało z hostingiem Web 1&1. Proxy musi zostać skonfigurowane tak, aby łączyło się z serwisem Sendhub. Po prostu skopiuj i wklej w odpowiednie miejsce poniższy tekst, a wszystko powinno prawidłowo działać. Będziesz jednak musiał wstawić swój własny unikalny sendhub key oraz nazwę użytkownika (czyli numer twojego telefonu) w adresie URL i zdefiniować grupę numerów telefonów widocznych poniżej jako 55555.

    Code:
    //Create Request
    
                 impHttpWebRequest = (System.Net.HttpWebRequest)HttpWebRequest.Create("https://api.sendhub.com/v1/messages/?                       username=9199195555&api_key=Yourspecialsendhubkeygoeshere");
                 impHttpWebRequest.Method = "POST";
                  impHttpWebRequest.ContentType = "application/json";

                 //Hook up 1&1 proxy server
                WebProxy proxy = new WebProxy(new Uri("http://ntproxy.1and1.com:3128"));
                 impHttpWebRequest.Proxy = proxy;

                 using (System.IO.StreamWriter streamWriter = new System.IO.StreamWriter(impHttpWebRequest.GetRequestStream()))
                {
                   string json = "{\"groups\": [\"55555\" ],   \"text\": \"Sesame Door:"+garageVals[3]+"\"}";
                   streamWriter.Write(json);
                   streamWriter.Close();
                }


               impHttpWebResponse = (System.Net.HttpWebResponse)impHttpWebRequest.GetResponse();
               System.IO.StreamReader streamReader = new System.IO.StreamReader(impHttpWebResponse.GetResponseStream());
               String line = streamReader.ReadToEnd();
               // Add some text to show that the response has run through
               Response.Write(line);
               streamReader.Close();


    I to by było na tyle, jeśli chodzi o ten projekt od strony usług. Kod bazy danych jest zamieszczony w pliku, autor nie używa go jednak, więc zdecydował, że nie będzie go opisywał. Mimo to kod działa i można z niego korzystać. Wraz z wydaniem API najnowszego Agenta na stronie Electric Imp, które aktualnie znajduje się w fazie zamkniętych testów (beta) będzie można wysyłać wiadomości SMS bezpośrednio z serwera Imp, bez konieczności używania zewnętrznego serwera Web. Jeśli jednak mimo to będziesz potrzebował funkcji zapisywania danych w bazie, będziesz potrzebował zewnętrznej bazy danych na oddzielnym serwerze.

    Krok 8: Aplikacja HTML – szczegóły konfiguracji
    Mechanizm sterowania bramą garażową oparty na Electric Imp
    Aplikacja którą zamierzamy uruchamiać na iPhone jest właściwie stroną internetową stworzoną przy użyciu HTML, CSS i Javascript. Aby strona ta pojawiła się jako natywna aplikacja na system iOS konieczne będzie dodanie metatagów, które będą mogły zostać rozpoznane przez przeglądarkę Safari i spowodują ukrycie pasków nawigacji u góry ekranu i przycisku na dole ekranu. Aby aplikacja działała bez ładowania jej z serwera web można ją zapisać w pamięci cache telefonu. To oznacza, że strona będzie ładowana z tymczasowej pamięci wewnętrznej telefonu i nikt poza jej użytkownikiem nie będzie miał do niej dostępu. Kiedy strona zostanie raz zapisana w pamięci cache, przeglądarka Safari nie będzie już korzystała z HTTP, zamiast tego ładując stronę bezpośrednio z pamięci telefonu, dzięki czemu wszystko będzie wyglądało tak, jakby była to osobna aplikacja. Wspomniane wcześniej metatagi odpowiedzialne za sposób wyświetlania strony to:

    -Viewport
    Definiuje sposób w jaki strona Web będzie wyświetlana. Powinien zostać skonfigurowany w taki sam sposób jak wskazówki Apple. Musisz więc mieć pewność, że zawarte przyciski i obrazki są wystarczająco duże, ponieważ użytkownik nie będzie miał możliwości przybliżenia fragmentu strony.

    -apple-mobile-web-app-capable
    Ten parametr sprawia, że strona zostaje uruchomiona w trybie pełnoekranowym, dzięki czemu pasek narzędzi nawigacyjnych będzie ukryty.
    -apple-mobile-web-app-status-bar-style
    Wyświetla czarny pasek statusu u góry ekranu.
    To jest początek kodu HTML zawierający już zdefiniowane metatagi

    Code:
    <html manifest="manifest.appcache">
    
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />


    Ikona aplikacji
    Jeśli chcesz, aby aplikacja miała własną ikonę, będziesz musiał stworzyć obrazek png w formacie 114x114 pikseli. System iOS zajmie się sam zaokrągleniem narożników oraz nadaniem obrazkowi „połysku”.

    Cache
    W końcu, aby móc zapisać aplikację w pamięci cache, będziemy potrzebowali utworzyć plik MANIFEST. Aby wszystko się udało, upewnij się, że twój serwer web wspiera pliki MANIFEST MIME type “text/cache-manifest” W przypadku IIS Express edytuj plik application.config , aby dodać do niego odpowiedni typ pliku. W przypadku innych programów może być inaczej.
    Aplikacja HTML będzie za każdym razem ładowała z pamięci cache najnowszą wersję obrazków i plików HTML. Jeśli będzie jednak dostępne połączenie sieciowe, przeglądarka sprawdzi stan pliku MANIFEST na serwerze. Jeśli okaże się, że na serwerze znajduje się inny plik MANIFEST, zostanie załadowana jego nowsza wersja. Jest to użyteczne podczas rozwijania aplikacji, kiedy pliki są często aktualizowane – możesz zmienić numer wersji wewnątrz pliku MANIFEST aby zmusić program do załadowania nowej wersji plików i zapisania ich w pamięci cache. Czasem jednak konieczne jest ręczne wyczyszczenie pamięci cache, aby nowe pliki mogły zostać pobrane.

    Plik MANIFEST ma dwie sekcje – pliki, które mają zostać zapisane w pamięci cache oraz pliki, które mają zostać pobrane z sieci. W przypadku tej aplikacji, wszystkie pliki przeznaczamy do zapisu w pamięci cache, pozostawiając tym samym drugą sekcję pustą.

    Code:
    CACHE MANIFEST
    

    #version 3.3

    CACHE:

    index.html
    images/hitchhikeguidetogalaxy0.png
    images/hitchhikeguidetogalaxy1.png
    images/hitchhikeguidetogalaxy2.png
    images/hitchhikeguidetogalaxy3.png
    images/garage_icon.png

    NETWORK:


    Obecność numeru wersji umożliwia przeglądarce porównanie plików i w razie potrzeby pobrania nowszej ich wersji. Jeśli ktoś potrzebowały więcej informacji na temat uruchamiania aplikacji HTML na iPhone, pod tym odnośnikiem można znaleźć dobry blog opisujący to zagadnienie: Link

    Krok 9: Aplikacja HTML – przegląd
    Mechanizm sterowania bramą garażową oparty na Electric Imp
    Podczas uruchamiania się aplikacji widzimy animację złożoną z 4 obrazków, która przedstawia fale sygnału Wi-Fi emitowane przez robota (Marvin the paranoid android – postać z „Autostopem przez Galaktykę” ) po jego dotknięciu. Animację tę można pobrać za darmo do użytku niekomercyjnego z poniższych odnośników:
    Link
    Link

    Autor połączył obrazek robota Marvin ‘a z ikoną połączenia Wi-Fi, tworząc w ten sposób trzystopniową animację fal, które niejako wydostają się z głowy robota. Kiedy ekran zostanie dotknięty w obrębie obrazka, Javascript rozpoczyna animację. Cykl animacji zawiera 4 obrazki zmieniane co 250ms, aby stworzyć iluzję pływających fal, które zostają wysłane do bramy garażowej. Cykl powtarzany jest dwa razy, głównie po to, aby uniknąć pukania w ekran przez co bardziej niecierpliwych użytkowników, kiedy brama nie zareaguje od razu. Jak już wcześniej zostało to wspomniane, opóźnienie może wynosić do 2 sekund, a animacja pozoruje użytkownikowi, że trwa komunikacja z modułem sterowania.

    Komunikacja z urządzeniem Electric Imp odbywa się poprzez wysłanie wiadomości na adres dostarczany przez terminal HTTP In skonfigurowany wcześniej w programie Planner.
    W aplikacji HTML utworzony został obiekt XMLHttpRequest a następnie wpisano do terminala HTTP In na serwerze Imp ID przycisku, który został dodany w aplikacji HTML. Z technicznego punktu widzenia, można więc zrealizować kilka różnych funkcji przez przycisk, wysłanie ID przycisku do oprogramowania spowodowałoby odpowiednią reakcję w zależności od tego, jaki przycisk został uruchomiony. Jednak w tej aplikacji mamy tylko jeden przycisk, więc ID jest tutaj trochę zbyteczne. Autor wpadł również na pewne zagadnienie, że iOS zapisuje w pamięci cache wysyłane komendy.
    Potrzebne jest więc obejście, aby upewnić się, że dane, które wysyłamy są za każdym razem inne. Zostało to osiągnięte poprzez dodanie liczby kontrolnej do wysyłanego ciągu danych, dzięki czemu każda wiadomość jest unikalna i nie zostanie zapisana w cache przez system iOS. Zapisywanie wychodzących wiadomości zdaje się nie mieć większego sensu, ale jak widać dla kogoś w Apple miało. Jest też inny sposób na rozwiązanie tego problemu, jednak w przypadku tego interfejsu nie będzie działało ono poprawnie. W razie problemów spójrz na komentarze dodane w kodzie źródłowym.
    Code:
    xmlhttp.open("POST", "https://api.electricimp.com/v1/Your_Imp_Specfic_ID_Here", true);
    
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Sending a Date Time stamp prevents iOS6 from caching the query. If you set the cache-control header
    // for this request, it does not work. Odd since it does work for the COSM query
    xmlhttp.send("value=" + button.id + Date());


    Aby uzyskać aktualny stan bramy, zostaje wysłane zapytanie do COSM. Odkąd COSM jest aktualizowany za każdym razem, kiedy czujniki wykryją zmianę, okazało się, że jest to całkiem wygodny sposób na rozwiązanie tego problemu. Stan bramy można sprawdzić poprzez naciśnięcie przycisku lub przeciągnięcie ekranu w dół.
    Code:

    xmlhttp.open("GET", "https://api.cosm.com/v2/feeds/YourFeedID.csv", true);

              xmlhttp.setRequestHeader("X-ApiKey", "Your API Key");
              xmlhttp.setRequestHeader("Cache-Control", "no-cache");
              xmlhttp.send(Date());


    Odpowiedź z COSM jest dekodowana, aby określić stan bramy. Przykładowy ciąg danych otrzymywany w odpowiedzi od COSM wygląda następująco:
    ClosedSensor,2013-04-01T00:02:10.303991Z,0 OpenSensor,2013-04-01T00:02:10.301233Z,1

    Co po zdekodowaniu oznacza:
    Code:

              if (openSensor[2] == "0") {
                                document.getElementById("doorStatus").innerHTML = "Door Open";
                            }
                            else if (closedSensor[2] == "0") {
                                document.getElementById("doorStatus").innerHTML = "Door Closed";
                            }
                            else {
                                document.getElementById("doorStatus").innerHTML = "Door somewhere between open and closed";
                            }


    I to by było na tyle jeśli chodzi o opis aplikacji HTML. W następnym kroku opisany zostanie proces pobierania aplikacji HTML i to, jak sprawić, aby była ona wyświetlana jak wewnętrzna aplikacja na system iOS.

    Krok 10: Konfigurowanie ISS Express i pobieranie aplikacji na iPhone
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Cała aplikacja została wykonana przy użyciu narzędzia Visual Studio Express 2012 dla stron Web, które można pobrać za darmo ze strony Microsoftu pod tym odnośnikiem: Link
    Test aplikacji HTML automatycznie uruchamia IIS Express (Serwer Web Microsoft-u) w tle, kiedy używasz desktopowej przeglądarki jako cel debuggowania. Jeśli chcesz przetestować aplikację HTML na telefonie, będziesz musiał wprowadzić pewne zmiany w programie IIS Express, aby umożliwić zdalne łączenie się z nim.

    Konfigurowanie IIS Express w celu umożliwienia zdalnego połączenia
    Plik XML application.config znajduje się na twoim komputerze w lokalizacji: C:\Users\YourName\Documents\IISExpress\config
    Pierwszą rzeczą, jaką należy zrobić jest skonfigurowanie typu MIME dla naszego pliku MANIFEST. Do tego celu używamy .appcache jako rozszerzenia pliku. Właściwie możesz użyć każdego rozszerzenia, jednak autor poleca .appcache Typ MIME pliku MANIFEST jest tekstem, który informuje przeglądarkę z jakim typem pliku ma do czynienia. Jeśli typ zostanie zarejestrowany raz, serwer będzie dodawał typ MIME do nagłówka odpowiedzi za każdym razem, kiedy strona zostanie wywołana.

    Code:
    <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />


    Drugą zmianą, jaką należy wprowadzić jest umożliwienie programowi ISS Express zdalne łączenie. Domyślnie program używa tylko portów do łączenia z „localhost”, co nie jest zbyt dobrym rozwiązaniem, jeśli chcemy testować aplikację na iPhone. Aby to zmienić, należy zmodyfikować konfigurację dla naszej strony zmieniając atrybut bindingInformation z „localhost” na „*”, umożliwiając tym samym łącznie się IIS Express z każdym adresem IP, nie tylko z „localhost”. Twój numer portu może być inny niż ten pokazany poniżej – to nie ma znaczenia, ponieważ będzie to port zlokalizowany na twoim komputerze. Nazwa strony „Site Name” również może być inna. W przypadku autora była to domyślna nazwa „My Web Sites”.

    Code:
    <site name="My Web Sites" id="2005659526">
    
                    <application path="/" applicationPool="Clr4IntegratedAppPool">
                        <virtualDirectory path="/" physicalPath="C:\Users\Midnight\Documents\My Web Sites" />
                    </application>
                    <bindings>
                        <binding protocol="http" bindingInformation="*:52917:" />
                   
                    </bindings>
                </site>



    Na koniec należy uruchomić to z uprawieniami administrator przy pomocy poniższej komendy, która doda „Wszyscy” do listy osób, które mają dostęp do portu.

    C:\Program Files\Microsoft SDKs\Windows Azure\.NET SDK\2012-10>netsh http add urlacl url=http://*:52917/ user=Everyone


    Twój numer portu będzie inny i powinien być zgodny z tym wyświetlanym w sekcji <site> w pliku XML application.config.
    Autor złączył wszystkie te informacje do kupy wraz z wieloma innymi wyszukanymi w google.com poradami. Ta strona okazała się najbardziej pomocna, jednak jak pisze autor musiał nieco zmodyfikować informacje tam zawarte, aby umożliwić połączenie z każdym adresem IP, ponieważ w jego wypadku występował pewien problem z DHCP. Odnośnik do wspomnianej strony:
    Link

    Pobieranie aplikacji na iPhone
    Wszystkie przygotowania zostały zakończona, teraz można więc załadować aplikację HTML na iPhone. W tym celu należy uruchomić Visual Studio 2012 Express dla stron Web (można również uruchomić IIS Express z poziomu linii komend, autor jednak używa edytora IDE). Wirtualna ścieżka do aplikacji to „/”, więc łączenie z http://youripaddress:yourport/ powinno połączyć nas do IIS Express. Autor dodał folder o nazwie Imp Garage, zaś nazwa strony to Index.html

    Aby pobrać aplikację na iPhone, należy otworzyć przeglądarkę Safari i przejść pod adres http://youripaddress:yourport/ImpGarage/Index.html Kiedy strona Web zostanie już wyświetlona, należy zapisać ją na pulpicie poprzez naciśnięcie przycisku “udostępnianie” na środku górnego paska nawigacyjnego. Następnie wybrać przycisk „Dodaj do ekranu głównego” i wybrać tytuł pod jakim strona ma ukazać się na ekranie głównym. Ikona aplikacji zostanie dodana po naciśnięciu przycisku „Dodaj”.

    No i to by było na tyle. Aplikacja teraz może być uruchomiona z poziomu ekranu głównego tak samo, jak zwykła aplikacja zainstalowana na systemie iOS.

    Krok 11: Działanie systemu
    Mechanizm sterowania bramą garażową oparty na Electric Imp Mechanizm sterowania bramą garażową oparty na Electric Imp
    Kiedy aplikacja jest już pobrana naciśnięcie na obrazek powinno wysłać wiadomość do urządzenia Electric Imp (poprzez serwer Imp w Imp Cloud) w celu aktywowania przekaźnika otwierającego bramę garażową. Jeśli drzwi były już otwarte, naciśnięcie przycisku spowoduje ich zamknięcie. Jeśi drzwi są aktualnie w ruchu, naciśnięcie przycisku spowoduje zatrzymanie drzwi. Wiadomość SMS zawierająca aktualny status bramy zostanie wysłana na twój telefon za każdym razem, gdy czujniki wykryją jakąś zmianę. Aby sprawdzić stan bramy ręcznie, przeciągnij ekran w dół. To użyteczne rozwiązanie, jeśli chcesz sprawdzić stan bramy zdalnie.

    Jeśli ktoś otworzy bramę garażu przy użyciu pilota lub przycisku, również zostanie wysłana wiadomość SMS z aktualnym stanem bramy.

    Cały projekt może zostać z łatwością wykonany w jeden dzień. Wykonywanie części elektronicznej projektu zajmuje około 3 godzin (jeśli masz pod ręką wszystkie elementy i narzędzia), instalacuja czujników to około 2 godziny. Pozostaje tylko pobrać oprogramowanie, skonfigurować IIS, Imp i po 2-3 godzinach mamy skończony projekt. Oczywiście czas ten znacznie wydłuża się, jeśli nie mamy żadnego doświadczenia w elektronice, czy programowaniu, wtedy nad wszystkim potrzeba spędzić nawet dwukrotnie więcej czasu.

    Źródło: Link


    ----------------------------------------------------------
    Z racji tego, że materiału jest sporo, mogły zdarzyć się jakieś błędy, czy to w tłumaczeniu, czy w linkach. Jeśli ktoś coś zauważy, dajcie znać, postaram się je poprawić.


    Fajne!