Mikrokontrolery - Jak zacząć?

... czyli zbiór praktycznej wiedzy dot. mikrokontrolerów.

środa, 23 marca 2011

Bluetooth + Android: Pierwsza aplikacja APP Inventor - cz. I


Autor: Dondu

Bluetooth + Android + App Inventor + HC-05
Znasz już co najmniej jeden z modułów Bluetooth, które opisałem w niniejszym cyklu, możemy więc zająć się napisaniem pierwszej aplikacji na system Android.

Poniżej znajdziesz dokładny opis tworzenia aplikacji przesyłającej dane do komputera wyposażonego w:
  • port RS-232 
  • lub wirtualny port RS-232 uzyskany za pomocą dowolnej wersji konwertera RS-232 na USB, który można zakupić już za kilka złotych (stan na rok 2014).

Będzie nam także potrzebny jakiś moduł Bluetooth - ja wykorzystam tani (około 25zł w 2014r.) moduł HC-05 opisany przeze mnie wcześniej.

Aplikację wykonamy w Application Inventor (MIT App Inventor): appinventor.mit.edu


Ponieważ App Inventor jest szybko rozwijany, stąd interfejs oraz dostępne komponenty ulegają zmianom.

W związku z tym, przedstawione niżej sposoby osiągnięcia wybranych celów programistycznych oraz wygląd komponentów mogą być realizowane inaczej w nowszych wersjach MIT App Inventora.

Jeżeli więc jesteś w takiej sytuacji, to szukaj elementów podobnych do przedstawionych poniżej. 


Instalacja MIT App Inventor-a

Ponieważ przedmiotem tego artykułu nie jest App Inventor jako taki, stąd też nie opisuję dokładnie w jaki sposób należy go zainstalować. Opiszę jedynie jaki jest skutek instalacji.

Po zainstalowaniu App Inventor-a podczas uruchamiania komputera (w Windows XP) otwiera się okienko programu aiStarter:


App Inventor - aiStarter: Okno DOS


Program aiStarter musi działać w tle, by można było otworzyć w przeglądarce internetowej okno środowiska programistycznego (IDE) Invertora.

Następnie będąc zalogowanym w przeglądarce wpisujemy adres: ai2.appinventor.mit.edu
Jeśli nie będziesz zalogowany w Google zostaniesz o to poproszony.

W rezultacie otrzymamy ekran początkowy:


App Inventor - Ekran startowy



Tworzymy nową aplikację

Aby utworzyć nową aplikację należy rozpocząć nowy projekt, co wykonuje się klikając przycisk Star new project, po którym ukazuje się okienko gdzie nadamy mu nazwę  np.Test_Bluetooth_SPP:


App Inventor - Tworzenie nowego projektu


a po kliknięciu OK zobaczymy go na wykazie projektów:


App Inventor - Wykaz projektów


Gdy klikniemy nasz projekt na wykazie, po krótkiej chwili ukaże się nam ekran główny edytora aplikacji:


App Inventor - Ustawianie właściwości głównych tworzonej aplikacji.


gdzie od razu po prawej stronie w kolumnie Properties dla elementu Srceen1 (czyli całego okienka naszej aplikacji) wybieramy w polu ScreenOrientation opcję User. Opcja ta ustawia tryb okienka widzianego w smartfonie na taki, jaki ustawi użytkownik w czasie jej wykorzystania.

Podobnie będziemy ustawiać właściwości (ang. properties) różnych używanych elementów stąd jeżeli w artykule poniżej piszę o właściwościach danego komponentu, to po wybraniu danego komponentu (kliknięcia na nim) znajdziesz jego właściwości właśnie w kolumnie Properties.

Interfejs App Inventora jest bardzo przyjazny, więc spokojnie się zorientujesz po krótkim treningu, a ja nie będę tłumaczył i pokazywał wszystkich niezbędnych ruchów jakie trzeba wykonać myszką :-)



Założenia naszej aplikacji

Czas przyjąć co ma robić nasza aplikacja. Przyjmijmy, że ma ona:
  1. pokazać listę urządzeń Bluetooth (wcześniej sparowanych) będących w zasięgu,
  2. umożliwiać wybranie z listy jednego z nich i połączenie z nim,
  3. jeżeli połączenie będzie poprawne powinien pokazać jakiś komunikat oraz elementy dodatkowe, które umożliwią nam realizację zadań (poniżej),
  4. umożliwić wprowadzenie w polu tekstowym dowolnego tekstu,
  5. wysłać tekst z pola tekstowego do połączonego urządzenia Bluetooth,
  6. wysłać na końcu znaki przejścia do nowej linii.


Przygotowanie niezbędnych komponentów

App Inventor - Zakładki komponentów.Założenia naszej aplikacji może nie są zbyt ambitne, ale myślę, że wystarczające na początek :-)

Będą nam więc potrzebne:
  • przycisk pokazujący listę urządzeń Bluetooth będących w zasięgu,
  • pole komunikatu o poprawnym połączeniu,
  • pole do wprowadzenia tekstu,
  • przycisk wysyłania tekstu.
Wszystkie niezbędne elementy znajdziemy po lewej stronie okna edycji. Kliknąwszy wybraną listę możesz wybrać komponent i metodą drag & drop przeciągnąć je do głównego okna symulującego wygląd naszego smartfona.

Zacznijmy więc od przycisku, który otworzy listę dostępnych urządzeń Bluetooth. W tym celu z listy komponentów User Interface wybieramy komponent ListPicker i przeciągamy do okna ekranu smartfona:


App Inventor - Przeciągnięcie (dodanie) wybranego komponentu.


Od razu ustawimy mu (ListPicker1) niezbędne właściwości:
  • Text: Lista dostępnych urządzeń Bluetooth
  • Width: Fill parent

App Inventor - Ustawianie właściwości wybranego komponentu.


Szerokość ustawiona na opcję Fill parent spowoduje rozszerzenie tego elementu na całą szerokość okna i po powyższych zmianach powinieneś zobaczyć następujący efekt:


App Inventor - Ustawiona właściwość komponentu listy wyboru Width Fill parent rozszerza listę na cały ekran.


Następnie z listy komponentów User Interface według tej samej zasady dodajemy kolejne komponenty:
  • Label
  • TextBox
  • Button
w efekcie czego powinieneś otrzymać:


App Inventor - Dodawanie dalszych komponentów.



Zauważ że:
  • wszystkie trzy wyżej dodane elementy są wyrównane do lewej i umieszczone jeden po drugim (domyślne ustawienia). Jeżeli pomyliłeś kolejność ich dodawania, możesz je myszką ustawić jak na screenie powyżej.
  • po prawej stronie w kolumnie Components (czerwona strzałka), widnieją wszystkie dodane przez nas do tej pory komponenty. To istotne ponieważ za chwilę będziemy część z nich ukrywać. Jeżeli je ukryjemy to w kolumnie Components nadal będą widoczne, co pozwoli nam je kliknąć i ewentualnie zmieniać im właściwości.
  • wokół przycisku Button1 jest zielona ramka (czyli przycisk jest wybrany) i także na zielono jest podświetlony w kolumnie Components. Zaznaczyłem to strzałkami w tym samym kolorze.


Teraz klikając po kolei trzy dodane przed chwilą komponenty ustaw w ich właściwościach następujące parametry:

Dla komponentu Label1:
  • Text: Połączono z HC-05 :-)

Dla komponentu TextBox1:
  • Hint: Wprowadź tekst do wyslania

Dla komponentu TextBox1:
  • Text: Wyślij tekst

Efekt będzie następujący:


App Inventor - Test_Bluetooth_SPP - Ekran po zalogowaniu.



Następnie wszystkim trzem dodanym przed chwilą komponentom ustawimy właściwość Visible na hidden, po to by je ukryć na początku działania programu. Od tego momentu znikną z okna smartfona, ale pozostaną w kolumnie Components:


App Inventor - Ukrywanie widoczności komponentów.


Aby zobaczyć ukryte komponenty nawet wtedy, nie zmieniając jednak ustawień ich właściwości, możesz kliknąć checkbox Display hidden components in Viewer znajdujący się nad oknem smartfona, a który zaznaczyłem niebieską strzałką na screenie powyżej.

Pozostaje nam dodać komponent klienta Bluetooth, który znajdziesz na liście komponentów oznaczonej Connectivity:

App Inventor - Dodanie klient Bluetooth.


Komponent ten należy przeciągnąć do okienka smartfona, ale on i tak samodzielnie przeniesie się poniżej okienka, ponieważ należy do komponentów niewidocznych na ekranie smartfona i zawiera wszelkie niezbędne komponenty służące do obsługi Bluetooth.

Mamy przygotowaną część dot. komponentów, możemy więc zabrać się za programowanie, czyli puzzle :-) o czym piszę w kolejnym artykule.


Oceń artykuł.
Wasze opinie są dla nas ważne, gdyż pozwalają dopracować poszczególne artykuły.
Pozdrawiamy, Autorzy
Ten artykuł oceniam na:

2 komentarze:

  1. Witam, bardzo fajny artykuł ale wkradł się mały błąd:
    Dla komponentu TextBox1:
    Hint: Wprowadź tekst do wyslania

    Dla komponentu TextBox1: (tu powinno być "Dla komponentu Button1")
    Text: Wyślij tekst

    Pozdrawiam :D

    OdpowiedzUsuń

Działy
Działy dodatkowe
Inne
O blogu




Dzisiaj
--> za darmo!!! <--
1. USBasp
2. microBOARD M8


Napisz artykuł
--> i wygraj nagrodę. <--


Co nowego na blogu?
Śledź naszego Facebook-a



Co nowego na blogu?
Śledź nas na Google+

/* 20140911 Wyłączona prawa kolumna */
  • 00

    dni

  • 00

    godzin

  • :
  • 00

    minut

  • :
  • 00

    sekund

Nie czekaj do ostatniego dnia!
Jakość opisu projektu także jest istotna (pkt 9.2 regulaminu).

Sponsorzy:

Zapamiętaj ten artykuł w moim prywatnym spisie treści.